@charset "UTF-8";
/* ============================================================
   祇をん 玄松  ―  スマートフォン（SP）専用スタイル
   ブレークポイント: max-width 820px
   ============================================================ */

/* SPのみ有効な改行ヘルパー（PC=非表示／SP=改行）。top.css非読込ページ用に基本ルールをここに置く */
.br-sp{ display:none; }

/* ---------- ハンバーガー（既定は非表示・SPで表示） ---------- */
.hamburger{ display:none; }
.hamburger span{ display:block; }

/* ---------- HERO SPロゴ / フロート予約（既定は非表示） ---------- */
.hero__sp-logo{ display:none; }
.sp-reserve{ display:none; }
.sp-float{ display:none; }

/* ---------- SPメニュー（既定は非表示・JSで開閉） ---------- */
.spmenu{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:100dvh;   /* スクロール範囲=実可視高(dvhで正しくスクロール)。ツールバー領域の覗きはbody.menu-open::before暗幕で別途カバー(2026-07-26) */
  background:rgba(28,26,24,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:#fff;
  /* 下部padding=セーフエリア(ホームバー)＋バッファ。最下部の言語切替/SNSがツールバーに隠れないよう余白を確保 */
  padding:clamp(28px,8vw,48px) clamp(26px,7vw,44px) calc(clamp(28px,7vw,44px) + env(safe-area-inset-bottom) + 40px);
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* 参考: gorakadan ― 右から左へ clip-path でワイプ展開 */
  -webkit-clip-path:inset(0 0 0 100%); clip-path:inset(0 0 0 100%);
  visibility:hidden;
  transition:clip-path .95s var(--ease), -webkit-clip-path .95s var(--ease), visibility 0s .95s;
}
.spmenu.is-open{
  -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:clip-path .95s var(--ease), -webkit-clip-path .95s var(--ease), visibility 0s 0s;
}
/* メニュー展開中、100dvhメニュー(実可視高でスクロール可)の下端〜画面下端=iOS Safariツールバー領域に
   背後セクションが覗くのを塞ぐ暗幕。メニュー背面(z<200)＋メニュー同色でシームレス。
   top:0＋bottom:-25vhで高さ単位に依存せず画面下端より下まで確実に覆う(2026-07-26) */
body::after{
  content:""; position:fixed; left:0; right:0; top:0; bottom:-25vh;
  background:#1c1a18; z-index:190; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s .5s;
}
body.menu-open::after{ opacity:1; visibility:visible; transition:opacity .5s var(--ease), visibility 0s 0s; }
/* 中身は順次スライドイン */
.spmenu__logo,
.spmenu__list > li,
.spmenu__lang,
.spmenu__sns{
  opacity:0; transform:translateX(38px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.spmenu.is-open .spmenu__logo,
.spmenu.is-open .spmenu__list > li,
.spmenu.is-open .spmenu__lang,
.spmenu.is-open .spmenu__sns{ opacity:1; transform:none; }
.spmenu.is-open .spmenu__logo{ transition-delay:.18s; }
.spmenu.is-open .spmenu__list > li:nth-child(1){ transition-delay:.26s; }
.spmenu.is-open .spmenu__list > li:nth-child(2){ transition-delay:.32s; }
.spmenu.is-open .spmenu__list > li:nth-child(3){ transition-delay:.38s; }
.spmenu.is-open .spmenu__list > li:nth-child(4){ transition-delay:.44s; }
.spmenu.is-open .spmenu__list > li:nth-child(5){ transition-delay:.50s; }
.spmenu.is-open .spmenu__lang{ transition-delay:.56s; }
.spmenu.is-open .spmenu__sns{ transition-delay:.62s; }
.spmenu__close{
  position:absolute; top:18px; right:16px; width:52px; height:52px;
}
.spmenu__close span{
  position:absolute; top:50%; left:50%; width:30px; height:1.5px; background:#fff;
}
.spmenu__close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.spmenu__close span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }
.spmenu__logo{ height:54px; width:auto; align-self:flex-start; margin-bottom:clamp(24px,7vw,40px); }
.spmenu__list{ display:flex; flex-direction:column; }
.spmenu__head{
  display:block; padding:11px 0;
  font-family:var(--font-mincho); font-size:18px; letter-spacing:.08em; color:#fff;
}
.spmenu__rooms{ display:flex; flex-direction:column; padding:2px 0 8px; }
.spmenu__rooms a{
  display:flex; gap:6px; align-items:baseline; padding:9px 0 9px 14px;
  font-family:var(--font-mincho); font-size:14px; letter-spacing:.04em; color:var(--text-light);
}
.spmenu__rooms a span{ font-family:var(--font-en); font-weight:300; font-size:14px; color:var(--text-dim); letter-spacing:.02em; }
.spmenu__lang{
  margin-top:clamp(20px,6vw,32px); align-self:flex-end;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-en); font-weight:300; font-size:15px; letter-spacing:.16em;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.4);
}
.spmenu__lang a{ color:rgba(255,255,255,.7); }
.spmenu__lang a[aria-current="true"]{ color:#fff; }
.spmenu__lang span{ opacity:.4; }
.spmenu__div{ display:none; }
.spmenu__sns{ display:flex; gap:18px; margin-top:clamp(28px,8vw,44px); padding-top:clamp(24px,7vw,36px); border-top:1px solid rgba(255,255,255,.16); }
.spmenu__sns a{ width:46px; height:46px; }
.spmenu__sns img{ width:100%; height:100%; object-fit:contain; }

/* スクロールロック */
body.menu-open{ overflow:hidden; }

/* ============================================================
   SP レイアウト（max-width:820px）
   ============================================================ */
@media (max-width:820px){

  /* ---- ヘッダー：ハンバーガーのみ ---- */
  .site-header{ height:64px; }
  .site-header__inner{ display:none; }
  .header-reserve{ display:none; }
  .site-header:hover{ background:none; }
  .lang-fixed{ display:none; }

  .hamburger{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    position:fixed; top:0; right:0; width:64px; height:64px; z-index:210; /* メニューより前面 */
  }
  .hamburger span{
    width:26px; height:2px; background:#fff; border-radius:2px;
    box-shadow:0 0 2px rgba(0,0,0,.4);
    transition:transform .42s var(--ease), opacity .25s var(--ease), background .3s;
    transform-origin:center;
  }
  .hamburger span:nth-child(2){ display:none; }   /* 中央線を消して2本線に */
  /* 明るいセクション上では黒線に（メニュー閉時のみ） */
  .is-light-sec .hamburger span{ background:#232122; box-shadow:none; }

  /* ---- 下層ページのみ：左上に祇をん玄松ロゴ（TOPは不要） ---- */
  body.lower .site-header__inner{
    display:flex; align-items:flex-start; height:auto;
    padding:clamp(14px,4vw,20px) 0 0 clamp(16px,5vw,24px); width:auto;
  }
  body.lower .gnav{ display:none; }
  body.lower .brand{ display:flex; align-items:flex-start; }
  body.lower .brand img{ width:165px; height:auto; }

  /* 3本線 → × へ滑らかに変形（メニュー開時） */
  body.menu-open .hamburger span{ background:#fff; box-shadow:none; }
  body.menu-open .hamburger span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
  body.menu-open .hamburger span:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }

  /* メニュー内の×は使わない（ハンバーガーが×に変形） */
  .spmenu__close{ display:none; }

  /* ---- フルページはSPでも有効（1スワイプ＝1セクション） ---- */

  /* ---- HERO ---- */
  .hero__sp-logo{
    display:block; position:absolute; z-index:2;
    top:clamp(74px,12vh,110px); left:clamp(20px,6vw,32px);
    height:clamp(150px,26vh,210px); width:auto;
    filter:drop-shadow(0 4px 24px rgba(0,0,0,.4));
  }
  .hero__scroll{ display:none; }

  /* ---- フロート予約（最下部固定） ---- */
  .sp-reserve{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    position:fixed; left:0; right:0; bottom:0; z-index:100;
    min-height:70px; padding:12px;
    background:var(--matsu); color:#fff;
  }
  .sp-reserve .ja{ font-family:var(--font-mincho); font-size:16px; letter-spacing:.2em; }
  .sp-reserve .en{ font-family:var(--font-en); font-weight:300; font-size:10px; letter-spacing:.32em; color:rgba(255,255,255,.82); }
  body.menu-open .sp-reserve{ display:none; }

  /* ---- セクション共通：縦書き→横書き・1カラム ---- */
  .sec-heading{ writing-mode:horizontal-tb !important; }
  .sec-label{ writing-mode:horizontal-tb !important; text-orientation:mixed; letter-spacing:.3em; }
  .sec-label--ja{ letter-spacing:.2em; }

  /* ===== セクションタイトル（SP）：横書き ===== */
  .about__label, .lounge__label, .access__label, .rooms__headings .sec-label{
    writing-mode:horizontal-tb !important; text-orientation:mixed !important;
    font-size:clamp(20px,5.6vw,24px) !important; letter-spacing:.28em !important;
  }

  /* ---- 各セクション上揃え（端末高さでの構図ばらつき防止） ---- */
  .about, .lounge, .access{ align-items:flex-start !important; }

  /* ===== ABOUT（物語）SP：ラベル→守破離(横書き大)→本文→もっと詳しく（ワイヤー準拠） ===== */
  .about{ align-items:stretch !important; }
  .about__inner{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    justify-content:flex-start !important; min-height:100vh !important;
    gap:clamp(18px,5vw,28px) !important;
    padding:calc(64px + 40px) clamp(26px,7vw,34px) clamp(120px,20vh,180px) !important;   /* 下の塊をもう少し上へ */
  }
  .about__right{ display:contents !important; }
  .about__head{ order:1 !important; margin:0 !important; }
  .about__big{
    order:2 !important; display:flex !important; flex-direction:row !important;
    justify-content:flex-start !important; gap:.42em !important;
    font-size:clamp(30px,9vw,40px) !important; line-height:1.2 !important;
    min-height:0 !important; margin:0 !important; width:auto !important;
  }
  .about__big p{ margin:0 !important; }
  .about__text{ order:3 !important; align-self:stretch !important; font-size:13px !important; margin:auto 0 0 0 !important; gap:0 !important; }   /* margin-top:auto=本文+ボタンを下の塊に分離 */
  .about__text span{ line-height:2.1 !important; }
  .br-sp{ display:inline !important; }
  .about__right .viewmore{ order:4 !important; align-self:flex-start !important; margin:0 !important; }

  /* ===== ROOMS SP：写真カルーセル(ドット下)→客室ラベル→本文→客室一覧へ ===== */
  .rooms{
    display:flex !important; flex-direction:column; justify-content:flex-start;
    gap:clamp(14px,3.4vw,22px); min-height:100vh; align-content:initial;
    padding:calc(64px + 18px) clamp(26px,7vw,34px) clamp(40px,6vh,72px) !important;
  }
  .rooms__slider{ order:1; height:auto !important; min-height:0 !important; position:relative; flex:0 0 auto; align-self:stretch; }
  .rooms__slides{ position:relative; width:100%; height:auto !important; aspect-ratio:3/2; max-height:none; flex:0 0 auto; }
  .rooms__dots{ position:static !important; margin-top:12px !important; justify-content:flex-start; transform:none !important; }
  .rooms__headings{ order:2; position:static; display:flex !important; flex-direction:column; align-items:flex-start; gap:clamp(12px,3.4vw,18px); padding:0 !important; }
  .rooms__headings .sec-label{ position:static !important; margin:0 !important; color:#fff !important; order:-1; }   /* ラベル→本文の順（ワイヤー準拠） */
  .rooms__lead{
    writing-mode:horizontal-tb !important; max-height:none !important;
    font-size:13px !important; line-height:1.95 !important; color:var(--text-light) !important;
    padding-right:0;
  }
  .rooms__viewmore{ order:3; position:static !important; right:auto; bottom:auto; align-self:flex-start; margin-top:2px; }
  .rooms__headings .sec-heading{ display:none !important; }

  /* ===== LOUNGE SP：写真→ラベル→本文→もっと詳しく ===== */
  .lounge__inner{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    gap:clamp(16px,4.5vw,24px) !important;
    padding:calc(64px + 26px) clamp(26px,7vw,34px) clamp(64px,10vh,96px) !important;
  }
  .lounge__media{ order:1 !important; align-self:stretch !important; margin-left:0 !important; width:100% !important; }
  .lounge__media img{ max-height:none; width:100%; }
  .lounge__head{ order:2 !important; justify-self:initial !important; align-self:flex-start !important; }
  .lounge__body{ order:3 !important; max-width:none !important; align-self:stretch !important; gap:0 !important; }
  .lounge__text{ display:block !important; font-size:13.5px; line-height:2.05; letter-spacing:.03em; color:#4a443d; margin-bottom:16px; }
  .lounge__body .viewmore{ align-self:flex-start !important; }

  /* ===== ACCESS SP：地図→ラベル→本文→住所→もっと詳しく ===== */
  .access__inner{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    gap:clamp(16px,4.5vw,24px) !important; min-height:0 !important;
    padding:calc(64px + 26px) clamp(26px,7vw,34px) clamp(64px,10vh,96px) !important;
  }
  .access__map{ order:1 !important; align-self:stretch !important; max-width:none; margin:0 !important; }
  .access__map img{ width:100%; }
  .access__left{
    order:2 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important;
    gap:clamp(12px,3.4vw,18px) !important;
  }
  .access__label{ margin:0 !important; }
  .access__body{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:clamp(14px,4vw,20px) !important; }
  .access__desc{ font-size:13.5px !important; line-height:2.05 !important; margin-bottom:0 !important; }
  .access__desc br{ display:none !important; }
  .access__addr{ font-size:13px !important; line-height:1.9 !important; }

  /* ===== HERO：SCROLLインジケーターをSPでも表示（ワイヤー準拠） ===== */
  .hero__scroll{ display:flex; }
  .hero__scroll::after{ height:56px; }

  /* ===== SPフローティング（縦書きご予約＋JP−EN・右下） ===== */
  .sp-float{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    position:fixed; right:10px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:120;   /* 画面最下部に配置 */
  }
  .sp-float__reserve{
    writing-mode:vertical-rl; font-family:var(--font-mincho);
    font-size:15px; letter-spacing:.26em; color:#fff;
    /* 2026-08-13 FB20260812 SP「崩れてます」対応：縦書きは行の高さが足りないと2列に折り返す。
       実機(iOS Safari)でツールバー分だけ有効高が縮んだ際に「ご予／約」と割れていたため折返し禁止 */
    white-space:nowrap;
    /* 縦書きは行ボックス(line-height)内で字面が右寄りになるため約0.8px戻す（実測: 区切り線基準+0.9px→+0.06px） */
    transform:translateX(-.8px);
  }
  .sp-float__sep{ width:1px; height:24px; background:rgba(255,255,255,.55); }
  .sp-float__lang{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    font-family:var(--font-en); font-weight:300; font-size:11px; letter-spacing:.12em;
  }
  /* letter-spacingは最後の1字の後ろにも余白を作り、中央寄せ時に字面が左へずれる。同量の負マージンで打ち消す */
  .sp-float__lang a{ color:rgba(255,255,255,.62); margin-right:-.12em; }
  .sp-float__lang a[aria-current="true"]{ color:#fff; }
  .sp-float__dash{ width:10px; height:1px; background:rgba(255,255,255,.5); }
  /* 明るいセクション上では黒文字に */
  .is-light-sec .sp-float__reserve{ color:#232122; }
  .is-light-sec .sp-float__sep{ background:rgba(35,33,34,.45); }
  .is-light-sec .sp-float__lang a{ color:rgba(35,33,34,.5); }
  .is-light-sec .sp-float__lang a[aria-current="true"]{ color:#232122; }
  .is-light-sec .sp-float__dash{ background:rgba(35,33,34,.45); }
  body.menu-open .sp-float{ display:none; }

  /* 予約CTA（生成帯）：下部固定バーの無いTOP/一覧は通常余白／バーが残る下層のみ回避余白 */
  .reserve-cta{ padding-bottom:clamp(48px,8vh,72px); }
  body.lower .reserve-cta{ padding-bottom:clamp(96px,18vh,140px); }
  body.stl .reserve-cta{ padding-bottom:clamp(48px,8vh,72px); }
  .reserve-cta__btn{ min-width:0; width:100%; }

  /* フッター余白：下層のみ予約バー分を確保（紙芝居一覧stlは除外） */
  body.lower .site-footer{ padding-bottom:96px; }
  body.stl .site-footer{ padding-bottom:0; }

  /* フッター客室名：左寄せ */
  .footer-col .roomname{ justify-content:flex-start !important; gap:10px !important; }

  /* SPメニュー内SNSアイコン（23px） */
  .spmenu__sns a{ width:23px; height:23px; }

  /* 2026-08-13 FB20260812 SP「PCと同じく縦」：客室一覧カードの2ボタンはPC同様に縦積みへ。
     縦積み・同幅の指定は stay.css の .stl-btns(inline-grid) 側で全幅共通に行う。
     SPはさらに画面幅いっぱいまで広げる。 */
  .stl-btns{ display:grid; width:100%; gap:10px; }
  .stl-btns .rd-hero__btn{ padding-inline:20px; }
}

/* ============ iOS Safari ツールバー展開時のvh短縮対策(2026-07-25) ============
   lower.jsが実画面高を--glassH／ツールバー差分を--tbGapで供給。
   下層MVを実画面高まで引き上げ、固定カーテン下に後続セクションが覗くのを防ぐ。
   MV底部の要素はツールバー分だけ持ち上げる。 */
@media (max-width:820px){
  /* 2026-07-29 SP FB「ファーストビューでオレンジ枠(部分)は見せたくない」対応。
     --glassH は読み込み時の実画面高＝ツールバー表示中の高さ。スクロールでツールバーが
     引っ込むと画面が縦に伸び、MV下の次セクションが覗いてしまう。
     常に大きい方(lvh)で確保して覗きを止める。 */
  .lp-hero{ height:100vh; height:100lvh; }
  .lfp-on .lp-hero{ height:var(--glassH, 100lvh); }
  .lp-hero__inner{ bottom:calc(clamp(40px,8vh,72px) + var(--tbGap, 0px)); }
  /* 2026-07-30: SCROLLインジケーターも持ち上げ対象（漏れており、ツールバー表示中は
     100lvhのMV下端＝ツールバーの裏に隠れてSCROLL文字ごと見えなくなっていた） */
  /* 2026-08-13 FB20260812 SP「スクロール消えている」恒久対応：
     --tbGap を供給するのは lower.js だが、TOP・物語・客室一覧の3ページは lower.js を読まない
     （main.js のみ）ため --tbGap が未設定＝フォールバック0pxとなり持ち上げが効いていなかった。
     lvh(ツールバー隠れ時の画面高) − svh(ツールバー表示時の画面高) ＝ ツールバー高。
     JS非依存で同じ持ち上げ量が得られるので max() で併用する。PCは lvh==svh ＝ 0 で無影響。 */
  .lp-hero .stl-scroll{ bottom:max(var(--tbGap, 0px), calc(100lvh - 100svh)); }
  /* TOPのSCROLLは別クラス(.hero__scroll)で、そもそも持ち上げ対象から漏れていた */
  .hero__scroll{ bottom:max(var(--tbGap, 0px), calc(100lvh - 100svh)); }
  .lg-hours{ bottom:calc(26px + var(--tbGap, 0px)); }
  .rd-hero__inner{ padding-bottom:calc(clamp(92px,14vh,116px) + var(--tbGap, 0px)); }
  .rd-hero__back{ bottom:calc(clamp(90px,14vh,116px) + var(--tbGap, 0px)); }
}