@charset "UTF-8";
/* ============================================================
   祇をん 玄松 ― 客室一覧 /stay/（下層ページ）
   TOPトンマナ準拠：A1明朝見出し・余白・静けさ・高級感
   ============================================================ */

/* ---------- 下層共通：ヘッダーは固定・透過、MVは全面 ---------- */
.lower{ background:#fff; color:var(--text-dark); }

/* スクロール・リビール */
.snap-up,.rt,.feat{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.snap-up.is-in,.rt.is-in,.feat.is-in{ opacity:1; transform:none; }

/* ============ MV ============ */
.lp-hero{ position:relative; height:100vh; overflow:hidden; background:var(--ink); }
/* MVスナップ（TOPと同じ transform 1.3s／MVを固定カーテンとしてスライド・GPU合成で滑らか） */
.lfp-on .lp-hero{
  position:fixed; inset:0; height:var(--glassH, 100vh); z-index:6; /* --glassH=lower.jsが供給する実画面高。CSS単位に依存しない */
  transition:transform 1.3s cubic-bezier(0.65,0,0.35,1); will-change:transform; backface-visibility:hidden;
}
/* MV表示中、固定カーテン背後の後続セクションが画面下端(iOS Safariツールバー領域)に覗くのを
   高さ単位に依存せず物理的に塞ぐ暗幕。top:0基準＋bottom:-25vhで、ツールバーの有無・vh解釈に
   関わらず画面下端より下まで確実に延長する。z=5(セクション<5<固定ヒーロー6)。2026-07-25 */
.lfp-on:not(.is-light-sec) body::before{
  content:""; position:fixed; left:0; right:0; top:0; bottom:-25vh;
  background:var(--ink); z-index:5; pointer-events:none;
}
.lfp-on .lp-hero.is-up{ transform:translate3d(0,-100%,0); }
.lp-hero__media{ position:absolute; inset:0; }
.lp-hero__media img{ width:100%; height:100%; object-fit:cover; }
.lp-hero__mask{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 48%, rgba(20,18,17,.40) 0%, rgba(20,18,17,0) 72%),
    linear-gradient(180deg, rgba(20,18,17,.42) 0%, rgba(20,18,17,.16) 36%, rgba(20,18,17,.28) 70%, rgba(20,18,17,.66) 100%);
}
.lp-hero__inner{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:var(--header-h) 20px clamp(40px,7vh,80px);
}
.lp-hero__ttl{
  writing-mode:vertical-rl; text-orientation:upright;   /* 縦文字 */
  font-family:var(--font-mincho); font-weight:400;
  font-size:clamp(28px,2.9vw,40px); letter-spacing:.18em; line-height:1; color:#fff;
}
.lp-hero__en{
  margin-top:clamp(18px,2vw,26px);
  font-family:var(--font-en); font-weight:300; font-size:clamp(11px,1vw,13px);
  letter-spacing:.42em; color:rgba(255,255,255,.78);
}
.lp-hero__lead{
  margin-top:clamp(18px,2.2vw,28px);
  font-family:var(--font-body); font-size:clamp(13px,1vw,15px); line-height:2.1; letter-spacing:.08em;
  color:rgba(255,255,255,.94);
}

/* ============ イントロ ============ */
.stay-intro{ background:#fff; padding:calc(var(--header-h) + clamp(28px,5vh,64px)) var(--gutter) clamp(30px,5vh,70px); }
.stay-intro__inner{
  max-width:1100px; margin-inline:auto;
  display:flex; align-items:flex-start; gap:clamp(24px,4vw,64px);
}
.stay-intro .sec-label--ja{ color:#1d1b1a; flex:0 0 auto; }
.stay-intro__text{
  font-family:var(--font-body); font-size:clamp(14px,1.1vw,17px); line-height:2.5; letter-spacing:.05em;
  color:#3a3530;
}

/* ============ 客室タイプ（交互レイアウト） ============ */
.roomtypes{ padding:clamp(30px,5vh,60px) var(--gutter) clamp(60px,8vh,110px); }
.rt{
  max-width:1180px; margin:0 auto; padding:clamp(34px,5vh,72px) 0;
  display:grid; grid-template-columns:1.18fr 1fr; align-items:center;
  gap:clamp(30px,4.5vw,86px);
}
.rt--rev{ grid-template-columns:1fr 1.18fr; }   /* 画像を左右どちらでも同じ幅(1.18fr)に */
.rt--rev .rt__media{ order:2; }
.rt__media{
  position:relative; overflow:hidden; aspect-ratio:4/3; background:#ece7df;
}
/* 客室カード スライダー */
.rtsl{ position:absolute; inset:0; overflow:hidden; }
.rtsl__track{ display:flex; height:100%; transition:transform .7s var(--ease); }
.rtsl__slide{ flex:0 0 100%; height:100%; }
.rtsl__slide picture{ display:block; height:100%; }
.rtsl__slide img{ width:100%; height:100%; object-fit:cover; }
/* 2026-07-29 FB「TOPと同じく修正したサイズ」＝ドット縮小に合わせて矢印ボタンも控えめに（42→32px） */
.rtsl__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; padding:0; border:0; border-radius:50%;
  background:rgba(20,18,17,.26); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  cursor:pointer; opacity:0; transition:opacity .3s var(--ease), background .3s; z-index:3;
}
.rt__media:hover .rtsl__nav{ opacity:1; }
.rtsl__nav:hover{ background:rgba(20,18,17,.5); }
.rtsl__nav--prev{ left:12px; } .rtsl__nav--next{ right:12px; }
.rtsl__nav::before{ content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border-top:1.2px solid #fff; border-right:1.2px solid #fff; }
.rtsl__nav--prev::before{ transform:translate(-25%,-50%) rotate(-135deg); }
.rtsl__nav--next::before{ transform:translate(-75%,-50%) rotate(45deg); }
/* 画像の左右クリックで前後へ（2026-07-29 FB）。矢印・ドットより下のレイヤー */
.rtsl__zone{
  position:absolute; top:0; bottom:0; width:50%; z-index:2;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rtsl__zone--prev{ left:0; }
.rtsl__zone--next{ right:0; }
/* ドット＝2026-07-29 FB: TOPと同じ縮小サイズに統一 */
.rtsl__dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; z-index:3; }
.rtsl__dots button{ width:6px; height:6px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:width .3s var(--ease), background .3s; }
.rtsl__dots button.is-active{ width:14px; border-radius:3px; background:#fff; }
.rt__body{ padding-block:6px; }
.rt__tag{
  display:inline-block; font-family:var(--font-body); font-size:12px; letter-spacing:.18em;
  color:#6f6a60; border:1px solid #cfc8bb; border-radius:2px; padding:5px 12px;
}
.rt__name{
  margin-top:clamp(16px,1.8vw,24px);
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(26px,2.6vw,40px); letter-spacing:.14em; line-height:1.4; color:#1d1b1a;
}
.rt__name span{
  display:block; margin-top:8px;
  font-family:var(--font-en); font-weight:300; font-size:clamp(12px,1vw,14px);
  letter-spacing:.26em; color:#9a958b;
}
.rt__text{
  margin-top:clamp(16px,1.8vw,24px);
  font-family:var(--font-body); font-size:clamp(13px,0.98vw,15px); line-height:2.2; letter-spacing:.05em;
  color:#3a3530; max-width:34em;
}
.rt__more{ margin-top:clamp(22px,2.6vw,34px); color:#5a544e; }

/* ============ 共通の魅力 ============ */
.stay-feature{ background:#ede7df; padding:clamp(72px,11vh,150px) var(--gutter); }
.stay-feature__inner{ max-width:1100px; margin-inline:auto; }
.stay-feature__label{ color:#1d1b1a; }
.stay-feature__ttl{
  margin-top:clamp(14px,1.6vw,22px);
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(24px,2.6vw,38px); letter-spacing:.1em; line-height:1.5; color:#1d1b1a;
}
.stay-feature__grid{
  margin-top:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,3.4vw,60px);
}
.feat__no{ font-family:var(--font-en); font-weight:300; font-size:13px; letter-spacing:.2em; color:var(--matsu); }
.feat__ttl{
  margin-top:14px; font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(17px,1.4vw,21px); letter-spacing:.06em; color:#1d1b1a;
}
.feat__text{
  margin-top:14px; font-family:var(--font-body); font-size:clamp(13px,0.95vw,14px); line-height:2.1; letter-spacing:.04em;
  color:#4a443d;
}

/* ============================================================
   SP（max-width:820px）
   ============================================================ */
@media (max-width:820px){
  .lp-hero__inner{ bottom:clamp(40px,8vh,72px); padding-inline:clamp(24px,7vw,34px); }
  /* 2026-07-29 SP FB「文字がデカい」対応。SPがPC(最大40px)より大きい状態だったので抑える */
  .lp-hero__ttl{ font-size:clamp(30px,8.5vw,40px); }
  /* 同 FB「スクロールの線が消えてる」対応：SPはMV下端の余白が浅く90pxの線が収まらないため短くする */
  .lp-hero .stl-scroll::after{ height:56px; }
  .lp-hero .stl-scroll{ gap:10px; }

  .stay-intro{ padding:calc(64px + 28px) clamp(26px,7vw,34px) 30px; }
  .stay-intro__inner{ flex-direction:column; gap:18px; }
  .stay-intro .sec-label--ja{ writing-mode:horizontal-tb; letter-spacing:.2em; }
  .stay-intro__text{ font-size:14px; line-height:2.2; }
  .stay-intro__text br{ display:none; }

  .roomtypes{ padding:24px clamp(26px,7vw,34px) 56px; }
  .rt{ grid-template-columns:1fr; gap:18px; padding:clamp(26px,5vh,40px) 0; }
  .rt--rev .rt__media{ order:0; }
  .rt__media,.rt--suite .rt__media{ aspect-ratio:4/3; }
  .rt__name{ font-size:clamp(22px,6vw,28px); }
  .rt__text{ font-size:13px; line-height:2.05; }

  .stay-feature{ padding:clamp(56px,9vh,80px) clamp(26px,7vw,34px); }
  .stay-feature__grid{ grid-template-columns:1fr; gap:30px; }
  .stay-feature__label{ writing-mode:horizontal-tb; letter-spacing:.2em; }
}

/* ============================================================
   客室一覧 紙芝居（2026-07-22改修・fpフルページ機構=TOPと同一）
   ============================================================ */
.fp > section{ position:relative; height:100vh; }
.fp-on .fp{ position:relative; height:100vh; overflow:hidden; }
.fp-on .fp > section{
  position:absolute; top:0; left:0; width:100%; height:100vh;
  transition:transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
  will-change:transform; backface-visibility:hidden;
}
/* fp管理下ではMVの旧スナップ(lfp)は使わない */
.fp .lp-hero{ height:100vh; }

/* パネル内：詳細を見る＋ご予約はこちら
   2026-08-13 FB20260812「PCと同じく縦」＋「上下サイズが揃ってなくておかしい」対応。
   .rd-hero__lead(max-width:420px)には2つ横並びで収まらず、旧 flex-wrap では必ず折り返して
   縦2段になるが幅がバラバラ（実測 PC1440で239px/204px）だった。
   inline-grid の1カラムにすると、コンテナ幅＝広い方のボタン幅／各アイテムはstretchで
   その幅に揃う＝どの画面幅でも「縦積み・同幅」になる。 */
.stl-btns{
  margin-top:clamp(20px,2.4vw,30px);
  display:inline-grid; grid-auto-flow:row; justify-items:stretch; gap:12px;
}
/* 左右paddingの下限は20px：375px幅でも「もっと詳しくみる ＞」が1行に収まる */
.stl-btns .rd-hero__btn{ margin-top:0; padding:13px clamp(20px,3.4vw,52px); white-space:nowrap; text-align:center; }

/* SCROLLインジケーター（MV下中央・TOPと同意匠） */
/* 2026-07-29 FB「次にスクロールすると宿が出てくるのがわかりづらい」＝下に続きがある合図を強める */
/* サイズは従来どおり（2026-07-29：一度大きくしたが「デカすぎる」ため元に戻した）。
   FB「スクロール誘導が弱い」への対応は、寸法ではなく色とシャドウの強めだけで行う。 */
.stl-scroll{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 6px rgba(0,0,0,.45);   /* 明るい写真の上でも視認できるように */
}
.stl-scroll > span{
  font-family:var(--font-en); font-weight:300; letter-spacing:.3em;
  font-size:11px; text-transform:uppercase;
}
.stl-scroll::after{
  content:""; width:1px; height:90px; background:rgba(255,255,255,.85);
  animation:stl-line 2.4s var(--ease) infinite; transform-origin:top;
}
@keyframes stl-line{
  0%{ transform:scaleY(0); }
  40%{ transform:scaleY(1); }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}