@charset "UTF-8";
/* ============================================================
   祇をん 玄松 GION KUROMATSU  ―  共通スタイル
   静的コーディング（HTML/CSS/JS）
   デザイン源: Figma TOP_PC-vwe2.0 (node 54:1807)
   ※書体は暫定フォールバック（A1明朝→Zen Old Mincho / UD Reimin→Shippori Mincho /
     Civane→Jost / Zen Kaku Gothic New）。正式ライセンス確定後に差し替え。
   ============================================================ */

/* ---------- A1明朝（A-OTF A1 Mincho Std）自己ホスト・サブセット ---------- */
@font-face{
  font-family:"A-OTF A1 Mincho Std";
  src:url("/assets/fonts/a1mincho-bold.woff2") format("woff2");
  font-weight:400 900;   /* 提供されたBold 1ウェイトを全weightに適用 */
  font-style:normal;
  font-display:swap;
}

/* ---------- 変数（VI） ---------- */
:root{
  --ink:        #232122;   /* 墨：ダークセクション地 */
  --ink-deep:   #1b1917;   /* 墨（濃）：フッター */
  --matsu:      #597838;   /* 松：ボタン緑 */
  --matsu-band: #506c31;   /* 松（帯）：予約CTA帯 */
  --shu:        #e94d40;    /* 朱：差し色 */
  --kinari:     #efd3af;    /* 生成：差し色（淡） */
  --paper:      #ffffff;    /* 紙：ライトセクション地 */

  --text-light: #e8e2d6;    /* 暗地の本文 */
  --text-dim:   #b7b1a6;    /* 暗地の弱文字 */
  --text-dark:  #2a2724;    /* 明地の本文 */
  --line-light: rgba(255,255,255,.38);
  --line-dark:  rgba(35,33,34,.30);

  /* 2026-07-29 FB「太字と細字が混在して見える」対応でA1明朝から差し替え。
     A1明朝はBold 1ウェイトのみの自己ホストで、和文が太く欧文・数字が細いため
     見出しの中で太さが不揃いに見えていた。Zen Old Mincho は 400/700 の実ウェイトを持ち、
     和文・欧文とも同じ太さで揃う。※A1明朝はVI指定書体のため、差し替えは要クライアント共有。
     戻す場合は下記1行を差し替えるだけ（@font-faceは style.css 冒頭に残置）。 */
  --font-mincho: "Zen Old Mincho", "游明朝", "Yu Mincho", serif;
  --font-body:   "Shippori Mincho", "Zen Old Mincho", "游明朝", serif;
  --font-en:     "Jost", "Cormorant Garamond", "Zen Kaku Gothic New", sans-serif;
  --font-gothic: "Zen Kaku Gothic New", "游ゴシック", "Yu Gothic", sans-serif;

  --header-h: 128px;
  --maxw: 1920px;
  --gutter: clamp(24px, 5vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--ink);
  line-height:1.9;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,li{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- 流体タイポ ヘルパー ---------- */
.en{ font-family:var(--font-en); font-weight:300; }
.label-en{
  font-family:var(--font-en);
  font-weight:300;
  letter-spacing:.34em;
  text-transform:uppercase;
}

/* 縦書きユーティリティ */
.vert{ writing-mode:vertical-rl; text-orientation:mixed; }
.vert-upright{ writing-mode:vertical-rl; text-orientation:upright; }

/* 区切り罫＋VIEW MORE */
.viewmore{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:15px;
  font-family:var(--font-en); font-weight:300;
  letter-spacing:.34em; font-size:14px; text-transform:uppercase;
  color:inherit; overflow:hidden; padding-right:30px;
}
.viewmore::after{
  content:""; align-self:stretch; height:1px; background:currentColor;
  transform-origin:left center; transition:transform .55s var(--ease);
}
.viewmore:hover::after{ transform:translateX(26px); }

/* ============================================================
   ヘッダー / 並列ナビ
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:stretch;
  color:#fff;
  transition:background .5s var(--ease), height .4s var(--ease);
}
/* デフォルトは背景なし（透明）。hover時のみ半透明の黒背景を表示 */
.site-header:hover{ background:rgba(20,18,17,.62); }
.site-header.is-solid{ height:104px; }

.site-header__inner{
  flex:1; display:flex; align-items:center; gap:clamp(20px,3vw,52px);
  padding-left:var(--gutter); padding-right:clamp(20px,3vw,48px);
}

/* ロゴ（公式SVG：白版＋黒版を切替） */
.brand{ display:flex; align-items:center; line-height:0; }
.brand img{ height:clamp(64px,5.2vw,96px); width:auto; transition:height .4s var(--ease); }
.site-header.is-solid .brand img{ height:76px; }
.brand__b{ display:none; }
.brand__dot{ color:var(--shu); }

/* ACCESS（白地）セクション表示中：ロゴ・ナビを黒に */
.is-light-sec .brand__w{ display:none; }
.is-light-sec .brand__b{ display:block; }
.is-light-sec .gnav__link{ color:#232122; }
.is-light-sec .gnav__link::after{ background:#232122; }
/* hoverで黒帯が出たら白に戻す（可読性確保） */
.is-light-sec .site-header:hover .brand__w{ display:block; }
.is-light-sec .site-header:hover .brand__b{ display:none; }
.is-light-sec .site-header:hover .gnav__link{ color:#fff; }
.is-light-sec .site-header:hover .gnav__link::after{ background:var(--kinari); }

/* グローバルナビ（ロゴ以外を右側へ寄せる） */
.gnav{ margin-left:auto; }
.gnav__list{ display:flex; align-items:center; gap:clamp(20px,2.4vw,46px); }
.gnav__item{ position:relative; }
.gnav__link{
  font-family:var(--font-mincho); font-weight:400;
  font-size:15px; letter-spacing:.12em; padding:8px 0;
  display:inline-block; position:relative;
}
.gnav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--kinari); transition:width .4s var(--ease);
}
.gnav__link:hover::after,
.gnav__item:hover .gnav__link::after{ width:100%; }

/* 客室一覧 ドロップダウン */
.gnav__sub{ display:none; }   /* PCグロナビのサブメニュー（ドロップダウン）は不使用 */
.gnav__item:hover .gnav__sub{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.gnav__sub a{
  display:flex; justify-content:space-between; gap:24px;
  font-family:var(--font-gothic); font-size:13px; letter-spacing:.08em;
  padding:9px 0; color:var(--text-light);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gnav__sub a:last-child{ border-bottom:0; }
.gnav__sub a span{ color:var(--text-dim); font-family:var(--font-en); letter-spacing:.06em; }
.gnav__sub a:hover{ color:var(--kinari); }

/* 言語切替 */
.langswitch{ display:flex; align-items:center; gap:8px;
  font-family:var(--font-en); font-weight:300; font-size:13px;
  letter-spacing:.18em; color:var(--text-dim); }
/* ヘッダー内：ナビ右隣・下線 */
.site-header .langswitch{ margin-left:clamp(20px,2.4vw,46px); padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.4); }
.langswitch a{ padding:2px; transition:color .3s; }
.langswitch a[aria-current="true"], .langswitch a:hover{ color:#fff; }
.langswitch span{ opacity:.4; }
/* 白地（ACCESS）セクション表示中：言語切替を暗色に */
.is-light-sec .langswitch a{ color:#6b6660; }
.is-light-sec .langswitch a[aria-current="true"],
.is-light-sec .langswitch a:hover{ color:#232122; }
.is-light-sec .langswitch{ border-bottom-color:rgba(35,33,34,.4); }
.is-light-sec .site-header:hover .langswitch a{ color:var(--text-dim); }
.is-light-sec .site-header:hover .langswitch a[aria-current="true"]{ color:#fff; }
.is-light-sec .site-header:hover .langswitch{ border-bottom-color:rgba(255,255,255,.4); }

/* 予約ボタン（ヘッダー右端のフルハイトブロック） */
.header-reserve{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff;   /* 緑背景は廃止・テキストのみ */
  width:clamp(120px,9vw,168px); align-self:stretch;
  line-height:1.3; transition:color .35s var(--ease), opacity .3s var(--ease);
}
.header-reserve:hover{ opacity:.65; }
.header-reserve .ja{ font-family:var(--font-mincho); font-size:16px; letter-spacing:.12em; }
.header-reserve .en{ font-size:10px; letter-spacing:.32em; opacity:.8; margin-top:5px; }
/* 明るいセクション上では暗色／ヘッダーhoverで暗幕が出たら白に戻す */
.is-light-sec .header-reserve{ color:#232122; }
.is-light-sec .site-header:hover .header-reserve{ color:#fff; }

/* ---------- 言語切替（画面右下・縦書き固定／参考: gorakadan） ---------- */
.lang-fixed{
  position:fixed; right:clamp(14px,1.5vw,28px); bottom:clamp(22px,4vh,46px);
  z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:11px;
  font-family:var(--font-en); font-weight:300; font-size:12px;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
/* 末尾（ご予約/フッター）では非表示（フッター内に言語切替あり） */
.is-tail .lang-fixed{ opacity:0; visibility:hidden; }
.lang-fixed a{
  letter-spacing:.12em; line-height:1;
  color:rgba(255,255,255,.58); transition:color .35s var(--ease);
}
.lang-fixed a[aria-current="true"],
.lang-fixed a:hover{ color:#fff; }
.lang-fixed__sep{ width:14px; height:1px; background:rgba(255,255,255,.42); }
/* 明るいセクション（ACCESS）上では暗色に */
.is-light-sec .lang-fixed a{ color:rgba(40,39,36,.5); }
.is-light-sec .lang-fixed a[aria-current="true"],
.is-light-sec .lang-fixed a:hover{ color:#232122; }
.is-light-sec .lang-fixed__sep{ background:rgba(40,39,36,.35); }

/* ============================================================
   共通：セクション見出し（縦書き）
   ============================================================ */
.sec-label{
  font-family:var(--font-en); font-weight:300;
  writing-mode:vertical-rl; text-orientation:upright;
  letter-spacing:.4em; font-size:14px; color:var(--text-dim);
}
/* 日本語ラベル（例：物語）
   ※縦書きの仮名はA1明朝だと字形が左寄りになるため、仮名も中央に揃うZen Old Mincho系を使用 */
.sec-label--ja{
  font-family:"Zen Old Mincho","游明朝","Yu Mincho",serif; font-weight:400;
  letter-spacing:.2em; font-size:25px;
}
.sec-heading{
  font-family:var(--font-mincho); font-weight:700;
  writing-mode:vertical-rl;
  font-size:clamp(28px,2.6vw,46px);
  line-height:1.5; letter-spacing:.12em;
}
.sec-body{
  font-family:var(--font-body);
  writing-mode:vertical-rl;
  font-size:clamp(15px,1.05vw,17px);
  line-height:2.2; letter-spacing:.08em;
}

/* ============================================================
   予約CTA帯
   ============================================================ */
.reserve-cta{
  background:#ede7df;
  color:#262329;
  padding:clamp(44px,5vw,72px) var(--gutter);
  text-align:center;
}
.reserve-cta__inner{
  max-width:900px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}
/* 2026-07-29 FB: 全体的に文字が大きい／バランス調整 */
.reserve-cta__label{
  font-family:"Zen Old Mincho","游明朝","Yu Mincho",serif; font-weight:400;
  letter-spacing:.2em; font-size:20px; color:rgba(38,35,41,.55);
}
.reserve-cta__title{
  font-family:var(--font-mincho); font-weight:700;
  font-size:clamp(21px,2.2vw,30px); letter-spacing:.08em; line-height:1.5;
  color:#1d1b1a; margin-top:clamp(12px,1.3vw,18px);
}
.reserve-cta__note{
  font-family:var(--font-body);
  font-size:clamp(13px,1vw,15px); letter-spacing:.06em;
  color:rgba(38,35,41,.7); margin-top:clamp(16px,1.8vw,24px);
}
.reserve-cta__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:clamp(250px,26vw,340px); min-height:56px; padding:0 42px;
  margin-top:clamp(20px,2.4vw,32px);
  background:#262329; color:#f3efe6;
  font-family:var(--font-gothic); font-weight:400;
  letter-spacing:.2em; font-size:14px;
  transition:background .4s var(--ease), letter-spacing .4s var(--ease);
}
.reserve-cta__btn:hover{ background:#3a3640; letter-spacing:.3em; }

/* ============================================================
   フッター（墨）
   ============================================================ */
.site-footer{
  background:var(--ink-deep); color:var(--text-light);
  padding:clamp(56px,6vw,84px) var(--gutter) 40px;
}
.site-footer__grid{
  max-width:1480px; margin-inline:auto;
  display:grid; grid-template-columns:1.1fr 1fr 1fr auto; gap:clamp(32px,4vw,72px);
  align-items:start;
}
.footer-brand__link{ display:inline-block; line-height:0; transition:opacity .3s var(--ease); }
.footer-brand__link:hover{ opacity:.7; }
.footer-brand__logo{
  height:clamp(190px,15vw,238px); width:auto; display:block;
}
/* ロゴ下の電話番号（2026-07-28 追加・全ページ共通） */
/* ブロック幅をロゴ画像の幅に合わせ、その中で電話番号を中央寄せする */
.footer-brand{ width:fit-content; }
.footer-brand__tel{
  /* ロゴ(.footer-brand__link)はinline-blockなので、blockにして必ず下の行へ落とす */
  display:block; text-align:center; margin-top:clamp(18px,1.6vw,24px);
  /* ロゴの筆文字は画像ボックスの中でやや右寄りなので、その分だけ右へ寄せて視覚的な中心に合わせる。
     ロゴ幅に対する比率(10.4%＝1920幅で約20px)なので、画面サイズが変わっても見え方は一定。 */
  transform:translateX(10.4%);
  font-family:var(--font-en); font-weight:300;
  font-size:clamp(14px,1.05vw,16px); letter-spacing:.14em;
  color:var(--text-light); transition:color .3s var(--ease);
}
.footer-brand__tel:hover{ color:var(--kinari); }
.footer-top-link{
  display:inline-block; margin-top:36px;
  font-family:var(--font-en); letter-spacing:.3em; font-size:13px; color:var(--text-dim);
}
.footer-top-link:hover{ color:#fff; }

.footer-col h3{
  font-family:var(--font-gothic); font-weight:500; font-size:15px;
  letter-spacing:.1em; margin-bottom:18px; color:#fff;
}
.footer-col h3 a{ color:inherit; transition:opacity .3s var(--ease); }
.footer-col h3 a:hover{ opacity:.62; }
.footer-col li a{
  display:block; padding:7px 0; font-size:13px; letter-spacing:.06em;
  color:var(--text-light); transition:color .3s;
}
.footer-col li a:hover{ color:var(--kinari); }
.footer-col .roomname{ display:flex; justify-content:flex-start; gap:16px; }
.footer-col .roomname span{ font-family:var(--font-en); color:var(--text-dim); font-size:12px; }

.footer-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:22px; align-self:end; }  /* SNSを右下へ */
.footer-meta .langswitch{ color:var(--text-dim); }
.footer-sns{ display:flex; gap:18px; align-items:center; }
.footer-sns a{ display:inline-flex; align-items:center; height:23px; opacity:.85; transition:opacity .3s, transform .3s; }
.footer-sns a:hover{ opacity:1; transform:translateY(-2px); }
.footer-sns img{ height:23px; width:auto; object-fit:contain; display:block; }  /* アイコン高さ23px（2026-07-22打合せ） */

.site-footer__bottom{
  max-width:1480px; margin:48px auto 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.footer-legal{ display:flex; gap:32px; }
.footer-legal a{ font-size:12px; letter-spacing:.06em; color:var(--text-dim); }
.footer-legal a:hover{ color:#fff; }
.footer-copy{ font-family:var(--font-en); font-size:11px; letter-spacing:.18em; color:var(--text-dim); }

/* ============================================================
   reveal 演出
   ============================================================ */
/* セクション表示時のテキスト・リビール（フルページ作動時のみ初期非表示／表示のたび再生） */
.fp-on .snap-in{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.fp-on .is-shown .snap-in{ opacity:1; transform:none; transition-delay:var(--d, 0s); }

/* ============================================================
   アクセシビリティ
   ============================================================ */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ページ遷移フェード（白幕：loadでふわっと消える／クリックで白へ戻す） */
html.js::before{
  content:""; position:fixed; inset:0; z-index:99999; background:#fff;
  pointer-events:none; opacity:1; transition:opacity .55s var(--ease);
}
html.js.pf-ready::before{ opacity:0; }

/* SEO用h1：DOMに存在（クロール可）・z-indexで背面に隠す */
.seo-h1{
  position:absolute; top:0; left:0; z-index:-1;
  margin:0; padding:0; font-weight:400; font-size:14px; line-height:1;
  color:#fff; pointer-events:none; user-select:none;
}
:focus-visible{ outline:2px solid var(--kinari); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto!important; }
  .fp-on .snap-in{ transition:none !important; opacity:1 !important; transform:none !important; }
  .fp-on .fp > section{ transition:none !important; }
}

/* ============================================================
   レスポンシブ（タブレット以下）  ※SP詳細はTOP_SP準拠で別途調整
   ============================================================ */
@media (max-width:1024px){
  :root{ --header-h:92px; }
  .gnav__list{ gap:18px; }
  .gnav__link{ font-size:13px; }
  .langswitch{ display:none; }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .footer-meta{ align-items:flex-start; }
}
@media (max-width:680px){
  .site-header__inner{ gap:14px; }
  .gnav{ display:none; }            /* SP用の簡易メニューはJSで別途（ハンバーガー不使用方針） */
  .reserve-cta__btn{ min-width:0; width:100%; }
  /* 「客室一覧」と「メニュー」は2列のまま並べる（縦積みだとフッターが長くなりすぎるため）。
     ロゴとSNSは行いっぱいを使う。 */
  .site-footer__grid{ grid-template-columns:1fr 1fr; gap:clamp(24px,6vw,32px); }
  .footer-brand{ grid-column:1 / -1; }
  /* FB20260728_SP: 電話番号はロゴ中央寄せをやめ、コンテンツ左端（客室一覧と同じライン）に揃える */
  .footer-brand__tel{ text-align:left; transform:none; }
  .footer-meta{ grid-column:1 / -1; }
  .site-footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer-legal{ flex-direction:column; gap:10px; }
}