/* =========================================================
   離れの宿 月白 — 7. Responsive（タブレット・スマホ）
   ========================================================= */

@media (max-width: 1180px) {
  .global-nav { gap: 16px; }
  .header-cta { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  body { padding-bottom: 76px; }

  /* ヘッダー：メニューは「≡」で開閉 */
  .site-header { gap: 10px; }
  .menu-toggle {
    display: grid;
    gap: 7px;
    place-content: center;
    width: 44px; height: 44px;
    margin-right: -10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 1px; background: var(--kinari); transition: transform .3s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .global-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--sumi);
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility .3s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .global-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--kinari); }
  .brand__sub { display: none; }
  .brand__mark { width: 32px; height: 32px; }
  .sound-toggle { min-height: 40px; padding: 0 12px; gap: 6px; font-size: 11px; }

  /* ファーストビュー */
  .hero { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-top: 36px; padding-bottom: 64px; }
  .hero__window { width: min(78vw, 360px); }
  .hero__title { font-size: clamp(30px, 8.4vw, 40px); }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__facts li + li { padding-left: 12px; }
  .hero__facts b { font-size: 19px; }

  .about__image { width: 100%; border-radius: 0; }
  .about__body { width: auto; margin: -64px var(--gutter) 0; padding: 36px 26px; }

  .spec { grid-template-columns: 1fr; grid-template-areas: "head" "map" "list"; }

  .rooms { grid-template-columns: 1fr; }
  .rooms__plan { position: static; }
  .room--c { margin-top: 36px; }
  .room--d { width: 100%; }

  .day { min-height: 0; }
  .day__panel { padding: 24px 22px; }
  .day__tabs button { padding: 0 14px; font-size: 15px; }

  .plans__head { grid-template-columns: 1fr; margin-bottom: 40px; }
  .plans__list { grid-template-columns: 1fr; }
  .plans__list li { padding: 32px 0 8px; }
  .plans__list li + li { border-left: 0; border-top: 1px solid var(--line-ink); }

  .reserve { grid-template-columns: 1fr; }
  .ticket { grid-template-columns: 1fr 64px; transform: none; }
  .ticket__main { padding: 26px 22px 22px; }
  .ticket__info { grid-template-columns: 1fr 1fr; }
  .ticket__info div:last-child { grid-column: 1 / -1; }
  .stamp { font-size: 16px; }
  .booking { padding: 30px 20px 24px; }
  .booking__row--2 { grid-template-columns: 1fr 1fr; gap: 12px; }

  .access { grid-template-columns: 1fr; }
  .access__image { min-height: 260px; order: -1; }

  .voices__list { grid-template-columns: 1fr; gap: 20px; }
  .voice:nth-child(even) { transform: none; }
  .voices .note { margin-top: 28px; }

  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq summary { font-size: 16px; }
  .faq details p { padding-left: 0; }
  .faq .note { grid-column: 1; }

  .closing { min-height: 540px; }
  .closing__bg { object-position: 85% 50%; }
  .closing__actions .btn { flex: 1 1 100%; }

  .site-footer { grid-template-columns: 1fr; }

  /* 丸窓の演出：スマホでは画面の高さに収まるよう、丸窓とボタンを小さめに */
  .hero-stage .hero { gap: 22px; padding-top: 24px; padding-bottom: 24px; }
  .hero-stage .hero__window { width: min(58vw, 300px); }
  .hero-stage .hero__title { margin-bottom: 16px; }
  .hero-stage .hero__lead { margin-bottom: 20px; }
  .hero-stage .hero__actions { flex-wrap: nowrap; margin-bottom: 22px; }
  .hero-stage .hero__actions .btn { flex: 1 1 0; min-height: 48px; padding: 0 10px; letter-spacing: .06em; }
  .hero-stage .hero__facts { padding-top: 14px; }
  .hero-stage.is-cinematic .hero { align-content: center; }
  .hero__reveal img { object-position: 38% 60%; }
  .hero__after { bottom: 18%; }

  /* 配置図：部屋名は押したカードで見せる */
  .map-pin { width: 40px; min-height: 40px; }
  .map-pin span { display: none; }
  .room-card { padding: 18px; }
  .room-card__info { grid-template-columns: 1fr 1fr; }

  /* 案内係：スマホでは下のボタン帯の上に、顔だけ小さく */
  .concierge { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .concierge__launcher { padding: 4px; }
  .concierge__hint { display: none; }
  .concierge__launcher img { width: 52px; height: 52px; }
  .concierge__panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: min(82svh, 640px);
    border-radius: 16px 16px 0 0;
    z-index: 80;
  }
  .concierge.is-open .concierge__launcher { visibility: hidden; }

  /* 画面下に「空室を確認する」「電話」を固定 */
  .sp-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(21, 18, 15, .94);
    border-top: 1px solid var(--line);
  }
  .sp-bar .btn { flex: 1; min-height: 50px; }

  /* スマホは画面が縦に長く、何度もスクロールしないと進まないので、止まる場面を短くする */
  .hero-stage.is-cinematic { height: 185vh; }
  .day-stage.is-cinematic { height: 300vh; }
  /* 湯本の一日は、下のボタン帯に「スクロールすると時間が進みます」が隠れないよう、帯の上に収める */
  .day-stage.is-cinematic .day { height: calc(100svh - var(--header-h) - 71px - env(safe-area-inset-bottom)); }
  .sp-bar__tel {
    display: grid;
    place-items: center;
    width: 64px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .booking__row--2 { grid-template-columns: 1fr; gap: 0; }
  .brand__name { font-size: 15px; letter-spacing: .12em; }
}

/* 動きを減らす設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .steam { animation: none; opacity: .5; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .day__scene, .day__sun { transition: none; }
  .sound-toggle[aria-pressed="true"] .sound-toggle__bars i { animation: none; height: 10px; }
}