@charset "UTF-8";
/* ============================================================
   祇をん 玄松 ― 客室詳細 /stay/{slug}/
   stay.css(lp-hero等)を継承して詳細固有を追加
   ============================================================ */

/* ============ 客室詳細MV（参考準拠：左上に情報／左下に戻る） ============ */
.rd-hero .lp-hero__mask{   /* 左を濃く→右へ薄く（白文字の可読性確保）＋下部に戻る用の薄い影 */
  background:
    linear-gradient(90deg, rgba(20,18,17,.80) 0%, rgba(20,18,17,.55) 28%, rgba(20,18,17,.22) 58%, rgba(20,18,17,0) 100%),
    linear-gradient(180deg, rgba(20,18,17,0) 70%, rgba(20,18,17,.38) 100%);
}
/* PCはflex：ご宿泊を上、情報ブロックを残り空間の中央（必ず間隔を確保）、戻るは下 */
.rd-hero__inner{
  position:absolute; inset:0; z-index:2; color:#fff;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:calc(var(--header-h) + clamp(20px,4vh,44px)) clamp(28px,9vw,130px) clamp(48px,9vh,96px);
}
/* ご宿泊：左揃え／各文字は中央寄せで縦に積む */
.rd-hero__cat{
  flex:0 0 auto;
  font-family:var(--font-mincho); font-size:25px; line-height:1.34; color:#fff;   /* TOPのh2と同サイズ */
  text-align:center;
}
.rd-hero__cat span{ display:block; }
/* 情報ブロック（客室名〜ご予約）：残り空間の中央 */
.rd-hero__lead{
  margin-block:auto;
  max-width:min(420px,42vw);
}
.rd-hero__name{ margin-top:0; font-family:var(--font-mincho); font-weight:700; font-size:clamp(24px,2.7vw,38px); letter-spacing:.14em; line-height:1.4; color:#fff; }
.rd-hero__name span{ display:block; margin-top:8px; font-family:var(--font-en); font-weight:300; font-size:clamp(12px,.95vw,13px); letter-spacing:.26em; color:rgba(255,255,255,.7); }
.rd-hero__tags{ margin-top:clamp(13px,1.6vw,20px); display:flex; flex-wrap:wrap; gap:9px; }
.rd-hero__tags li{ font-family:var(--font-body); font-size:11.5px; letter-spacing:.12em; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:2px; padding:5px 11px; }
.rd-hero__text{ margin-top:clamp(15px,1.9vw,22px); font-family:var(--font-body); font-size:clamp(12.5px,.95vw,14px); line-height:2.05; letter-spacing:.04em; color:rgba(255,255,255,.9); }
.rd-hero__spec{
  margin-top:clamp(14px,1.7vw,22px);
  font-family:var(--font-body); font-size:clamp(12.5px,1vw,14.5px);
  letter-spacing:.12em; line-height:1.9; color:rgba(255,255,255,.92);
}
.rd-hero__btn{
  display:inline-block; margin-top:clamp(20px,2.4vw,28px);
  padding:13px 80px; border:1px solid rgba(255,255,255,.7);
  font-family:var(--font-mincho); font-size:13px; letter-spacing:.14em; color:#fff;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.rd-hero__btn:hover{ background:var(--matsu); color:#fff; border-color:var(--matsu); }
/* 左下の戻る */
.rd-hero__back{
  position:absolute; left:clamp(28px,9vw,130px); bottom:clamp(40px,7vh,72px);
  font-family:var(--font-body); font-size:15px; letter-spacing:.08em; color:#fff;
  padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.55); transition:border-color .3s;
}
.rd-hero__back:hover{ border-color:#fff; }

/* SP：ご宿泊は上部中央／情報ブロックは縦中央／戻るは左下 */
@media (max-width:820px){
  .rd-hero .lp-hero__mask{ background:linear-gradient(90deg, rgba(20,18,17,.82) 0%, rgba(20,18,17,.6) 35%, rgba(20,18,17,.3) 70%, rgba(20,18,17,.12) 100%), linear-gradient(180deg, rgba(20,18,17,0) 68%, rgba(20,18,17,.42) 100%); }
  /* SPヘッダーは64px：paddingを合わせる（基底flexのまま：ご宿泊上→情報ブロック中央→戻る下） */
  .rd-hero__inner{ padding:calc(64px + clamp(46px,11vw,60px)) clamp(24px,7vw,32px) clamp(92px,14vh,116px); }
  .rd-hero__cat{ font-size:21px; }
  .rd-hero__lead{ max-width:none; }
  .rd-hero__name{ font-size:clamp(22px,6vw,28px); }
  .rd-hero__text{ font-size:12.5px; }
  /* 戻るはご予約バー(min-height70px)に被らないよう上へ */
  .rd-hero__back{ left:clamp(24px,7vw,32px); bottom:clamp(90px,14vh,116px); }
  /* SCROLLの縦線を短くして「客室一覧に戻る」の下線と交差させない
     （全高21+14+44=79px < 戻るのbottom下限90px なので画面高に関わらず干渉しない） */
  .rd-hero .stl-scroll::after{ height:44px; }
}

/* ============ ギャラリー ============ */
.rd-gallery{ padding:calc(var(--header-h) + clamp(20px,3vh,44px)) var(--gutter) clamp(60px,8vh,100px); }
.gal{
  max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,22px);
}
.gal__item{ margin:0; overflow:hidden; aspect-ratio:4/3; background:#ece7df; }
.gal__item:first-child{ grid-column:1 / -1; aspect-ratio:16/8; }   /* 先頭は横長 */
.gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gal__item:hover img{ transform:scale(1.04); }

/* ============ 部屋の設え、細部まで（2026-08-13 FB20260812：間取り図直下に追加） ============
   01のブランドのみ室グレードで出し分け（上位3室=THREE／下位4室=Bamford）、02〜06は全室共通。
   背景は間取り図(.rdc=#fff)と地続き。次の.rd-spec(#ede7df)で切り替わる＝通常の地色リズムどおり。 */
.rd-detail{ background:#fff; padding:0 var(--gutter) clamp(72px,11vh,150px); }
.rd-detail__inner{ max-width:1240px; margin-inline:auto; }
.rd-detail__ttl{
  text-align:center; font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(21px,2.4vw,30px); letter-spacing:.24em; line-height:1.6; color:#1d1b1a;
}
.rd-detail__lead{
  margin-top:14px; text-align:center; font-family:var(--font-body);
  font-size:clamp(12.5px,1vw,14px); letter-spacing:.1em; color:#8a8475;
}
.rd-detail__grid{
  margin-top:clamp(36px,5vh,60px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.4vw,44px) clamp(34px,5vw,80px);
}
.rd-detail__cap{
  display:block; padding-bottom:14px; border-bottom:1px solid #d4cdbf;
  font-family:var(--font-body); font-size:clamp(12.5px,1vw,13.5px);
  letter-spacing:.16em; color:#8a8475;
}
.rd-detail__no{ margin-right:1.1em; font-family:var(--font-en); font-weight:300; letter-spacing:.18em; }
.rd-detail__item p{
  margin-top:16px; font-family:var(--font-body);
  font-size:clamp(13px,1vw,14.5px); line-height:2.1; letter-spacing:.03em; color:#4a443d;
}
@media (max-width:820px){
  .rd-detail{ padding-inline:clamp(26px,7vw,34px); padding-bottom:clamp(56px,9vh,80px); }
  .rd-detail__grid{ grid-template-columns:1fr; gap:24px; }
}

/* ============ スペック ============ */
.rd-spec{ background:#ede7df; padding:clamp(72px,11vh,150px) var(--gutter); }
.rd-spec__inner{ max-width:1240px; margin-inline:auto; display:flex; align-items:flex-start; gap:clamp(24px,3vw,56px); }   /* 左端・間隔をrdcと統一 */
.rd-spec__label{
  color:#1d1b1a; flex:0 0 auto;
  writing-mode:vertical-rl !important; text-orientation:upright;
  font-family:"Zen Old Mincho","游明朝","Yu Mincho",serif !important; font-weight:400;
  font-size:clamp(18px,1.6vw,24px) !important; letter-spacing:.2em !important;
  padding-top:4px;
}   /* 書体・サイズもrdc__labelと統一 */
.rd-spec__body{ flex:1; }
.rd-spec__ttl{
  font-family:var(--font-mincho); font-weight:700; font-size:clamp(22px,2.4vw,34px); letter-spacing:.1em; color:#1d1b1a;
}
/* 2026-07-29 FB:「ご案内」見出しを削除し、表の上罫を「設え」ラベル上端に揃える */
.spec{ margin-top:4px; border-top:1px solid #d4cdbf; }
.spec > div{ display:flex; gap:20px; padding:16px 2px; border-bottom:1px solid #d4cdbf; }
.spec dt{ flex:0 0 7.5em; font-family:var(--font-body); font-size:14px; letter-spacing:.08em; color:#6f6a60; }
.spec dd{ margin:0; font-family:var(--font-body); font-size:14px; letter-spacing:.04em; color:#2c2823; }
.spec__note{ margin-top:14px; font-family:var(--font-body); font-size:12px; color:#8a8475; }
.amenity__ttl{ margin-top:clamp(34px,4vw,52px); font-family:var(--font-mincho); font-weight:700; font-size:clamp(16px,1.3vw,20px); letter-spacing:.08em; color:#1d1b1a; }
.amenity{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.amenity li{ position:relative; padding-left:15px; font-family:var(--font-body); font-size:13px; letter-spacing:.04em; color:#4a443d; }
.amenity li::before{ content:""; position:absolute; left:0; top:.7em; width:5px; height:5px; border-radius:50%; background:var(--matsu); }
/* 2026-08-13 FB20260812：設え下部を「客室設備／アメニティ／お貸出し（無料）」の小分類つきリストへ変更 */
.speclist{ margin-top:18px; }
.speclist__grp + .speclist__grp{ margin-top:clamp(18px,2.4vh,26px); }
.speclist__cat{
  display:block; position:relative; padding-left:22px;
  font-family:var(--font-body); font-size:12.5px; letter-spacing:.16em; color:#8a8475;
}
.speclist__cat::before{ content:""; position:absolute; left:0; top:.85em; width:14px; height:1px; background:#b9b1a1; }
.speclist__grp .amenity{ margin-top:8px; }
/* 設え内の予約ボタン：重い暗色ベタ塗りを上書きし、上品なアウトラインに */
.rd-spec__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:0; min-height:0; margin-top:clamp(36px,4vw,52px);
  padding:16px 56px;
  background:transparent; border:1px solid #1d1b1a; color:#1d1b1a;
  font-family:var(--font-mincho); font-weight:400; font-size:14px; letter-spacing:.16em;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.rd-spec__btn:hover{ background:var(--matsu); color:#fff; border-color:var(--matsu); letter-spacing:.16em; }

/* ============ 他の客室 ============ */
.rd-others{ background:#fff; padding:clamp(72px,11vh,140px) var(--gutter) clamp(60px,8vh,100px); }
.rd-others__inner{
  max-width:1180px; margin-inline:auto;
  display:flex; align-items:flex-start; gap:clamp(28px,4vw,64px);   /* 縦ラベル(左)＋客室グリッド(右) */
}
.rd-others__body{ flex:1; min-width:0; }
.rd-others__body .orooms{ margin-top:0; }   /* ラベル上端とグリッド上端を揃える */
.rd-others__inner .sec-label--ja{ color:#1d1b1a; }
.rd-others__ttl{ margin-top:clamp(14px,1.6vw,22px); font-family:var(--font-mincho); font-weight:700; font-size:clamp(22px,2.4vw,34px); letter-spacing:.1em; color:#1d1b1a; }
.orooms{
  margin-top:clamp(34px,4vw,56px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,40px) clamp(16px,2vw,30px);
}
.oroom{ display:block; }
.oroom__media{ display:block; overflow:hidden; aspect-ratio:4/3; background:#ece7df; }
.oroom__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.oroom:hover .oroom__media img{ transform:scale(1.05); }
.oroom__name{ display:block; margin-top:14px; font-family:var(--font-mincho); font-weight:700; font-size:15px; letter-spacing:.1em; color:#1d1b1a; }
.oroom__name em{ display:block; margin-top:4px; font-family:var(--font-en); font-weight:300; font-style:normal; font-size:11px; letter-spacing:.22em; color:#9a958b; }
.rd-others__more{ display:inline-block; margin-top:clamp(30px,3.6vw,48px); color:#5a544e; }

/* ============ SP ============ */
@media (max-width:820px){
  .rd-ttl{ font-size:clamp(26px,7vw,34px) !important; }
  .rd-lead{ padding:calc(64px + 28px) clamp(26px,7vw,34px) 36px; }
  .rd-lead__inner{ flex-direction:column; gap:16px; }
  .rd-lead .sec-label--ja{ writing-mode:horizontal-tb; letter-spacing:.2em; }
  .rd-lead__text{ font-size:14px; line-height:2.2; }
  .rd-gallery{ padding:calc(64px + 20px) clamp(20px,6vw,30px) 52px; }   /* スナップ後にSPヘッダー(64px)が被らないよう上余白 */
  .gal{ grid-template-columns:1fr; }
  .gal__item:first-child,.gal__item{ aspect-ratio:4/3; }
  .rd-spec{ padding:clamp(56px,9vh,80px) clamp(26px,7vw,34px); }
  .rd-spec__inner{ flex-direction:column; gap:18px; }
  .rd-spec__label{ writing-mode:horizontal-tb; letter-spacing:.2em; }
  .rd-spec__btn{ width:100%; text-align:center; }
  .rd-others{ padding:clamp(56px,9vh,80px) clamp(26px,7vw,34px); }
  .rd-others__inner{ flex-direction:column; gap:clamp(18px,5vw,26px); }   /* SP=客室紹介(横書き上)→2列グリッド下 */
  .rd-others__body{ width:100%; }
  .rd-others__inner .sec-label--ja{ writing-mode:horizontal-tb; letter-spacing:.2em; }
  .orooms{ grid-template-columns:1fr 1fr; gap:clamp(18px,5vw,24px) clamp(14px,4vw,18px); }   /* SPは2列で全室を縦に */
}

/* ============================================================
   カテゴリ別 客室写真カルーセル（2026-07-22改修：寝室/和室/お風呂/アメニティ/その他/間取り図）
   ============================================================ */
.rdc{ background:#fff; padding:clamp(44px,6.5vh,84px) var(--gutter) 0; }
.rd-hero + .rdc{ padding-top:calc(var(--header-h) + clamp(28px,4.5vh,56px)); }   /* MV直後＝固定グロナビ分のスペースを確保 */
.rdc--floor{ padding-bottom:clamp(72px,11vh,150px); }
.rdc__inner{
  max-width:1240px; margin-inline:auto;
  display:flex; align-items:flex-start; gap:clamp(24px,3vw,56px);
}
.rdc__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:clamp(18px,1.6vw,24px); letter-spacing:.2em; color:#1d1b1a;
  padding-top:4px;
}
.rdc__slider{
  position:relative; flex:1; min-width:0;
  aspect-ratio:16/9; overflow:hidden; background:#ece7df;
}
/* 詳細ページの矢印は常時表示（stay.cssはカードhover前提のため上書き） */
.rdc__slider .rtsl__nav{ opacity:1; }
/* 間取り図（素材未提供＝プレースホルダー） */
.rdc__floor{
  flex:1; min-width:0; aspect-ratio:16/9; background:#f4f1eb;
  display:flex; align-items:center; justify-content:center;
}
.rdc__floor p{ font-family:var(--font-body); font-size:14px; letter-spacing:.14em; color:#8a8475; }

@media (max-width:820px){
  .rdc{ padding:clamp(30px,5vh,48px) clamp(20px,5.6vw,28px) 0; }
  .rd-hero + .rdc{ padding-top:clamp(88px,13vh,120px); }   /* 固定ヘッダーロゴとの被り回避 */
  .rdc--floor{ padding-bottom:clamp(56px,9vh,88px); }
  .rdc__inner{ flex-direction:column; gap:14px; }
  .rdc__label{ writing-mode:horizontal-tb; text-orientation:mixed; font-size:18px; letter-spacing:.26em; padding-top:0; }
  .rdc__slider, .rdc__floor{ width:100%; flex:none; aspect-ratio:4/3; }
}