@charset "UTF-8";
/* ============================================================
   祇をん 玄松  ―  TOPページ固有スタイル
   ============================================================ */

/* ---------- フルページ（重ねパネル方式・動き=sanga-ryokan準拠） ----------
   各セクションを重ねて transform で上下スライド。
   JS有効化時(html.fp-on)のみ作動。未適用時は通常フロー。 */
.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;
}

/* ---------- HERO / MV（写真＋ロゴのみ・コンセプト文なし） ---------- */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:center; justify-content:flex-start;
  background:var(--ink);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,13,12,.45) 0%, rgba(15,13,12,.15) 40%, rgba(15,13,12,.55) 100%);
}
.hero__brand{
  position:relative; z-index:2; margin:0;
  padding-left:clamp(40px,8vw,150px);
}
.hero__brand img{
  height:clamp(280px,52vh,470px); width:auto;
  filter:drop-shadow(0 4px 30px rgba(0,0,0,.45));
}
/* SCROLL インジケーター */
/* 2026-07-30: 中央寄せはtransformでなくleft/right:0＋margin:autoで行う。
   snap-in演出の完了状態(.fp-on .is-shown .snap-in{transform:none})がtranslateX(-50%)を
   上書きして半幅ぶん右にズレていたため（transform非依存なら演出と共存できる） */
.hero__scroll{
  position:absolute; left:0; right:0; margin-inline:auto; width:max-content; bottom:0;
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,.8);
}
.hero__scroll span{
  font-family:var(--font-en); font-weight:300; letter-spacing:.3em;
  font-size:11px; text-transform:uppercase;
}
.hero__scroll::after{
  content:""; width:1px; height:90px; background:rgba(255,255,255,.6);
  animation:scrollline 2.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollline{
  0%{ transform:scaleY(0); }
  40%{ transform:scaleY(1); }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- ABOUT（白地・守破離） ---------- */
.about{
  position:relative; overflow:hidden;
  min-height:100vh;
  display:flex; align-items:center;
  background:#fff; color:#1d1b1a;
}
.about__inner{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:row-reverse; align-items:stretch; gap:clamp(36px,5vw,84px);  /* 左右ミラー（物語=左／守破離=右）・上端揃え */
  padding-block:clamp(40px,10vh,120px);
  padding-inline:clamp(56px,9vw,150px);
}
.about__big{
  display:flex; flex-direction:column; justify-content:space-between;  /* 上端=物語ラベル・下端=本文と揃える */
  font-family:var(--font-mincho); font-weight:400;
  font-size:clamp(54px,7vw,108px);
  color:#1d1b1a; flex:0 0 auto;
  min-height:clamp(340px,52vh,520px);
}
.about__big p{ margin:0; line-height:1; }   /* 1文字1pタグ／line-height:1で末尾「離」の下端＝字面下端 */
.about__text{
  font-family:var(--font-body);
  font-size:clamp(13px,1vw,16px); letter-spacing:.05em;
  color:#3a3530; flex:0 0 auto; align-self:flex-end;  /* 本文は下揃え（守破離の下端と揃う） */
  display:flex; flex-direction:column; gap:clamp(18px,2.2vw,26px);
}
.about__text span{ display:block; line-height:1; }   /* 各行line-height:1で末尾行の下アキを無くし下端を揃える */
.about__right{
  margin-right:auto; align-self:stretch;   /* 守破離の高さに合わせる・ミラーで左端へ */
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
}
.about__head{
  display:flex; flex-direction:row-reverse; align-items:flex-start;  /* DOM[物語h2,玄松についてh3]→視覚は玄松について左 */
  gap:clamp(12px,1.2vw,20px);
}
.about__ttl{
  writing-mode:vertical-rl;
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(24px,2.4vw,36px); letter-spacing:.16em; line-height:1.5;
  color:#1d1b1a;
}
.about__label{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Zen Old Mincho","游明朝","Yu Mincho",serif; font-size:25px; letter-spacing:.2em;
  color:#1d1b1a; margin-top:4px;
}
.about__right .viewmore{ color:#5a544e; }

/* ---------- LOUNGE（生成地・縦書き見出し＋画像＋本文） ---------- */
.lounge{
  position:relative; overflow:hidden; min-height:100vh;
  display:flex; align-items:center;
  background:#ede7df; color:#1d1b1a;
}
.lounge__inner{
  width:100%; display:grid;
  grid-template-columns:max-content minmax(260px,360px) minmax(0,1fr);   /* ラベル(左) / 本文(中) / 画像(右) */
  align-items:stretch; gap:clamp(34px,4.5vw,84px);   /* 行高=画像高。ラベル上端/ボタン下端を画像に揃える */
  padding:var(--header-h) clamp(48px,8vw,130px) clamp(40px,6vh,90px);
}
/* 全要素を明示で1行目に固定（sparse自動配置で本文が2行目に落ちるのを防ぐ） */
.lounge__head{ grid-area:1/1; align-self:start; }   /* 縦ラベル＝左のまま固定 */
.lounge__body{ grid-area:1/2; align-self:end; }       /* 本文+ボタンの塊を下揃え（下端=画像下端） */
.lounge__media{ grid-area:1/3; align-self:start; }    /* 画像＝右・上端をテキストと揃える */
.lounge__label{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Zen Old Mincho","游明朝","Yu Mincho",serif; font-size:25px; letter-spacing:.2em;
  color:#1d1b1a;
}
.lng-br-sp{ display:none; }   /* PCは2列／SPで改行を有効化して3列 */
.br-sp{ display:none; }       /* SPのみ有効な改行（PCは無効） */
.lounge__media{ overflow:hidden; }
.lounge__media img{ width:100%; height:auto; display:block;   /* クロップせず全体表示＝端の暗部を出さない */
  transition:transform 1.2s var(--ease); transform-origin:center; }
.lounge:has(.viewmore:hover) .lounge__media img{ transform:scale(1.05); }
.lounge__body{
  display:flex; flex-direction:column; gap:clamp(28px,4vh,56px);
  max-width:clamp(260px,24vw,360px);
}
.lounge__text{
  font-family:var(--font-body);
  font-size:clamp(13px,0.95vw,15px); line-height:2.5; letter-spacing:.04em;
  color:#3a3530;
}
.lounge__body .viewmore{ align-self:flex-start; color:#5a544e; }

/* ---------- 共通：写真＋縦書きテキストのスプリットセクション ---------- */
.feature{
  position:relative; background:var(--ink); color:var(--text-light);
  display:grid; align-items:center;
  min-height:min(86vh, 760px);
  padding-block:clamp(60px,7vw,110px);
}
.feature__media{ position:relative; }
.feature__media img{ width:100%; height:100%; object-fit:cover; }
.feature__text{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,2.4vw,44px);
  padding-inline:var(--gutter);
}
.feature__text .sec-body{ color:var(--text-light); max-height:62vh; }
.feature__text .viewmore{ color:var(--text-dim); align-self:flex-end; }
.feature__viewmore{ writing-mode:horizontal-tb; }

/* メディア左・テキスト右 */
.feature--mediaLeft{ grid-template-columns:54% 46%; }
.feature--mediaLeft .feature__media{ height:min(78vh,680px); }
/* メディア右・テキスト左 */
.feature--mediaRight{ grid-template-columns:46% 54%; }
.feature--mediaRight .feature__media{ order:2; height:min(78vh,680px); }
.feature--mediaRight .feature__text{ order:1; }

/* テキストカラムの並び（縦書きは右→左に積む） */
.vstack{
  display:flex; flex-direction:row-reverse; align-items:flex-start;
  gap:clamp(16px,1.8vw,34px); height:100%;
}
.vstack .col-foot{
  display:flex; flex-direction:column; justify-content:flex-end; gap:18px; height:100%;
}

/* ---------- ROOMS（画像カルーセル左／本文+ボタン右(下揃え)／縦書き見出し右端(上揃え)） ---------- */
/* 2026-07-29 FB: 画像・本文幅をLOUNGEと統一（余白/カラム幅/gapをラウンジの左右ミラーに合わせる） */
.rooms{
  position:relative; background:var(--ink); color:var(--text-light);
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content;   /* 画像(左) / 本文+ラベル(右) ＝ラウンジのミラー */
  grid-template-areas:"slider right";
  align-items:stretch; align-content:center; column-gap:clamp(34px,4.5vw,84px);
  padding:calc(var(--header-h) + clamp(16px,1.6vw,30px)) clamp(48px,8vw,130px) clamp(48px,5vw,84px);
  min-height:100vh;
}
/* スライダー（アスペクト比固定＝中間幅でも画像が縦に潰れない） */
.rooms__slider{ grid-area:slider; align-self:center; }
.rooms__slides{
  position:relative; width:100%;
  aspect-ratio:3/2; max-height:72vh;
}
.rooms__slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease);
}
.rooms__slide.is-active{ opacity:1; }
.rooms__slide img{ width:100%; height:100%; object-fit:cover; }
/* 画像の左右クリックで前後へ（2026-07-29 FB） */
.rooms__nav{
  position:absolute; top:0; bottom:0; width:50%; z-index:2;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rooms__nav--prev{ left:0; }
.rooms__nav--next{ right:0; }
/* ドット＝画像の下・左寄せ（高さ22px=6px+マージン16px）／2026-07-29 FB: 目立ちすぎのため縮小 */
.rooms__dots{ display:flex; gap:8px; margin-top:16px; }
.rooms__dots button{
  width:6px; height:6px; padding:0; border:0; border-radius:50%;   /* padding:0＝ボタン既定パディングで実寸が太るのを防ぐ */
  background:rgba(255,255,255,.35);
  transition:width .35s var(--ease), background .3s, border-radius .35s var(--ease);
}
.rooms__dots button.is-active{ width:14px; border-radius:3px; background:#fff; }

/* 右セル：高さ=スライダーと同じ。ラベル上端=画像上端／本文+ボタン=画像下端 */
.rooms__headings{
  grid-area:right; align-self:stretch;   /* 行高=スライダー(画像+ドット)に一致 */
  display:flex; flex-direction:row; align-items:stretch;
  gap:clamp(34px,4.5vw,84px);   /* 2026-07-29 FB: ラウンジと同じ列間隔 */
  padding-bottom:22px;   /* ドット行分を差し引き＝ボタン下端を画像下端に一致させる */
}
/* 2026-07-29 FB: 本文ブロックをラウンジと同寸に（枠=360px／文字幅=clamp、ラウンジの .lounge__body と同値） */
.rooms__txt{
  flex:0 1 auto; display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(22px,3vh,34px);
  width:360px; max-width:100%;
}
.rooms__lead{
  font-family:var(--font-body);
  writing-mode:horizontal-tb;
  font-size:clamp(13px,0.95vw,15px); line-height:2.5; letter-spacing:.06em;
  color:var(--text-light);
  max-width:clamp(260px,24vw,360px);   /* 2026-07-29 FB: ラウンジ本文と同じ字面幅 */
}
.rooms__headings .sec-heading{ color:#fff; }
.rooms__headings .sec-label{ color:#fff; margin-top:0; flex:0 0 auto; align-self:flex-start; }   /* ラベル=上揃え(画像上端) */
.rooms__viewmore{ align-self:flex-end; color:var(--text-dim); }   /* ボタン=右・下端は画像下端 */

/* ---------- ACCESS（白地・縦書き見出し＋住所＋路線地図） ---------- */
.access{
  background:#fff; color:var(--text-dark);
  display:flex; align-items:center; min-height:100vh;
}
.access__inner{
  width:100%; display:grid; grid-template-columns:minmax(0,1.05fr) auto;   /* 地図(左) / テキスト(右)：左右ミラー */
  align-items:stretch; gap:clamp(30px,5vw,84px);   /* 行高=地図高。ラベル上端/ボタン下端を地図に揃える */
  padding:var(--header-h) clamp(48px,8vw,120px) clamp(40px,6vh,90px);
}
/* 全要素を明示で1行目に固定（gridのsparse自動配置で要素が2行目に落ちるのを防ぐ） */
.access__map{ grid-area:1/1; }                       /* 地図＝左 */
.access__left{ grid-area:1/2; display:flex; align-items:stretch; gap:clamp(22px,2.8vw,46px);
  flex-direction:row-reverse; align-self:stretch; }  /* テキスト群＝右・縦ラベル右端・高さを地図に合わせる */
.access__label{
  writing-mode:vertical-rl; text-orientation:upright; flex:0 0 auto;
  font-family:"Zen Old Mincho","游明朝","Yu Mincho",serif; font-weight:400; font-size:25px; letter-spacing:.2em;
  color:#1d1b1a; margin-top:2px;
}
.access__body{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; justify-content:flex-end; }   /* 本文+ボタンの塊を下揃え（下端=地図下端） */
.access__desc{
  font-family:var(--font-body); font-size:clamp(13.5px,1.05vw,16px);
  line-height:2.5; letter-spacing:.06em; color:#3a3530;
  margin-bottom:clamp(20px,2.8vw,34px);
}
.access__addr{
  font-family:var(--font-body); font-size:clamp(13px,1vw,15px);
  line-height:2; letter-spacing:.06em; color:#3a3530;
}
.access__body .viewmore{ color:#5a544e; }
.access__map{ position:relative; }
.access__map img{ width:90%; height:auto; display:block; margin-inline:auto; }

/* ---------- セクション間の細い区切り（任意） ---------- */
.feature + .feature{ border-top:1px solid rgba(255,255,255,.06); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .feature--mediaLeft,
  .feature--mediaRight{ grid-template-columns:1fr; }
  .feature__media{ height:46vh !important; order:0 !important; }
  .feature__text{ order:0 !important; padding-block:48px; }
  .rooms{ grid-template-columns:1fr; padding-inline:var(--gutter); }
  .rooms__slider{ height:46vh; }
  .rooms__slides{ max-height:none; }
  .rooms__lead{ writing-mode:horizontal-tb; max-height:none; }
  .rooms__headings{ justify-self:start; justify-content:flex-start; }
  .rooms__txt{ width:auto; flex:1 1 auto; }
  .rooms__lead{ max-width:none; }
  .rooms__headings{ gap:clamp(24px,3vw,56px); }
  .access__inner{ grid-template-columns:1fr; }
  .access__map{ max-width:520px; margin:clamp(24px,5vh,48px) auto 0; }
}
@media (max-width:680px){
  .sec-heading{ writing-mode:horizontal-tb; }
  .sec-label{ writing-mode:horizontal-tb; text-orientation:mixed; letter-spacing:.3em; }
  .sec-body{ writing-mode:horizontal-tb; max-height:none !important; }
  .access__left{ flex-direction:column; align-items:flex-start; gap:16px; }
  .access__label{ writing-mode:horizontal-tb; letter-spacing:.22em; }
  .feature__text{ flex-direction:column; }
  .feature__text .viewmore{ align-self:center; }
  .rooms__lead{ writing-mode:horizontal-tb; max-height:none; }
  .rooms__headings{ flex-direction:column; align-items:flex-start; gap:14px; }
  .rooms__viewmore{ position:static; right:auto; bottom:auto; margin-top:8px; }
}