/* =========================================================
   月の庵 — 共有スタイル（オリウェブ 制作例）
   1ページ版 samples/ryokan/index.html のブランドを継承
   墨 / 和紙 / 金（細線） ＋ 毛筆・明朝・細ゴシック、極大の余白、縦書きアクセント
   ========================================================= */

:root{
  --sumi:#1a1a1a;        /* 墨 */
  --sumi-soft:#26241f;
  --washi:#f3efe6;       /* 和紙 */
  --washi-d:#e9e3d6;
  --washi-dd:#ddd5c4;
  --kin:#b89a5a;         /* 金（細線・差し色のみ） */
  --kin-soft:#cbb381;
  --grey:#6f6a60;
  --line:rgba(26,26,26,.14);
  --line-strong:rgba(26,26,26,.2);
  --line-on-dark:rgba(243,239,230,.14);

  --mincho:"Shippori Mincho",serif;
  --brush:"Yuji Syuku",serif;
  --kana:"Zen Kaku Gothic New",sans-serif;

  --bar-h:46px;
  --maxw:1080px;
  --pad-x:clamp(24px,6vw,80px);
  --gap-section:clamp(80px,16vh,180px);
}

/* ── リセット / 基盤 ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--kana);font-weight:300;color:var(--sumi);
  background:var(--washi);line-height:2.2;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ── コンテナ ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.wrap-narrow{max-width:760px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* =========================================================
   共有ヘッダー（サイト名＋ナビ）
   ========================================================= */
.site-head{
  position:sticky;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:var(--bar-h);padding:8px clamp(18px,4vw,46px);
  background:rgba(243,239,230,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(26,26,26,.08);
}
.site-head .brand{
  font-family:var(--mincho);font-weight:500;font-size:.96rem;
  letter-spacing:.5em;padding-left:.5em;white-space:nowrap;
}
.site-nav ul{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;justify-content:flex-end}
.site-nav a{
  font-family:var(--mincho);font-size:.74rem;letter-spacing:.26em;
  color:var(--sumi);padding:4px 0 6px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;white-space:nowrap;
}
.site-nav a:hover{color:var(--kin)}
.site-nav a[aria-current="page"]{color:var(--sumi);border-bottom-color:var(--kin)}
/* CTA ナビ項目（ご宿泊・予約） */
.site-nav a.nav-cta{border:1px solid var(--kin);padding:6px 16px;letter-spacing:.22em;color:var(--sumi)}
.site-nav a.nav-cta:hover{background:var(--kin);color:var(--washi)}
.site-nav a.nav-cta[aria-current="page"]{background:var(--kin);color:var(--washi)}

/* =========================================================
   テキストリンク（金の下線）／ ボタン代わり
   ========================================================= */
.tlink{
  display:inline-block;font-family:var(--mincho);font-size:.84rem;letter-spacing:.3em;
  padding-bottom:7px;border-bottom:1px solid var(--kin);transition:color .25s;
}
.tlink:hover{color:var(--kin)}
.tlink.on-dark{color:var(--washi)}
.tlink.on-dark:hover{color:var(--kin-soft)}
.tlink::after{content:"　→";font-size:.8em;letter-spacing:0}

/* =========================================================
   セクション雛形 / 見出し
   ========================================================= */
.section{padding:var(--gap-section) 0}
.section-tight{padding:clamp(56px,10vh,110px) 0}

.eyebrow{font-family:var(--mincho);font-size:.62rem;letter-spacing:.5em;color:var(--kin);display:block;margin-bottom:18px;padding-left:.5em}
.h-brush{font-family:var(--brush);font-weight:400;letter-spacing:.16em;line-height:1.5;font-size:clamp(1.7rem,4.2vw,2.6rem)}
.h-brush-lg{font-family:var(--brush);font-weight:400;letter-spacing:.18em;line-height:1.35;font-size:clamp(2.1rem,6vw,3.6rem)}
.h-mincho{font-family:var(--mincho);font-weight:500;letter-spacing:.14em;line-height:1.6;font-size:clamp(1.2rem,2.6vw,1.6rem)}
.lead{font-family:var(--mincho);font-size:clamp(.86rem,2.1vw,.98rem);line-height:2.6;letter-spacing:.1em;color:var(--grey)}
.prose p{font-family:var(--mincho);font-size:.92rem;line-height:2.5;letter-spacing:.08em;margin-bottom:1.6em}
.prose p:last-child{margin-bottom:0}

/* セクション見出しブロック（中央・縦線のあしらい） */
.sect-head{text-align:center;margin-bottom:clamp(48px,8vh,90px)}
.sect-head .rule{display:inline-block;width:1px;height:46px;background:linear-gradient(var(--kin),transparent);margin-top:26px}

/* =========================================================
   汎用ページ・ヘッダー（下層ページの開幕：全面写真の小型版）
   ========================================================= */
.page-hero{position:relative;height:clamp(360px,52vh,560px);display:flex;align-items:flex-end;overflow:hidden}
.page-hero .img{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero .img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,13,10,.72),rgba(15,13,10,.12) 60%,rgba(15,13,10,.3))}
.page-hero .inner{position:relative;z-index:2;color:var(--washi);padding:0 var(--pad-x) clamp(40px,7vh,72px);max-width:var(--maxw);margin:0 auto;width:100%}
.page-hero .ko{font-family:var(--mincho);font-size:.66rem;letter-spacing:.5em;opacity:.86;margin-bottom:18px;padding-left:.5em}
.page-hero h1{font-family:var(--brush);font-weight:400;font-size:clamp(2.2rem,7vw,4rem);letter-spacing:.16em;line-height:1.25;text-shadow:0 3px 30px rgba(0,0,0,.45)}
.page-hero .sub{font-family:var(--mincho);font-size:clamp(.8rem,2vw,.96rem);letter-spacing:.28em;margin-top:18px;opacity:.94;padding-left:.28em}

/* =========================================================
   間（ま）— 余白の章扉（縦書き）
   ========================================================= */
.ma{min-height:64vh;display:flex;align-items:center;justify-content:center;padding:clamp(72px,14vh,160px) 24px;text-align:center}
.ma .v{writing-mode:vertical-rl;text-orientation:upright;display:inline-flex;gap:clamp(22px,5vw,54px);align-items:flex-start}
.ma .big{font-family:var(--brush);font-weight:400;font-size:clamp(1.8rem,5vw,3rem);line-height:1.7;letter-spacing:.22em}
.ma .small{font-family:var(--mincho);font-size:clamp(.78rem,2.2vw,.92rem);line-height:2.7;letter-spacing:.28em;color:var(--grey);align-self:center;max-height:18em}

/* =========================================================
   章：全面写真＋縦書きキャプション（トップで使用）
   ========================================================= */
.chapter{position:relative}
.chapter .photo{position:relative;height:clamp(520px,88vh,920px)}
.chapter .photo .img{position:absolute;inset:0;background-size:cover;background-position:center}
.chapter .cap{position:absolute;z-index:3;color:var(--washi);writing-mode:vertical-rl;text-orientation:mixed}
.chapter .cap .num{font-family:var(--mincho);font-size:.66rem;letter-spacing:.3em;opacity:.8;margin-left:18px}
.chapter .cap .t{font-family:var(--brush);font-weight:400;font-size:clamp(1.5rem,4.6vw,2.4rem);letter-spacing:.2em;line-height:1.6;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.chapter .cap .d{font-family:var(--mincho);font-size:clamp(.74rem,2.1vw,.86rem);letter-spacing:.2em;line-height:2.5;margin-left:18px;max-height:20em;opacity:.95}
.cap.left{left:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%)}
.cap.right{right:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%)}
.chapter .grad-b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,10,.55),rgba(15,13,10,0) 55%)}
.chapter .grad-r::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(15,13,10,.55),rgba(15,13,10,0) 55%)}

/* =========================================================
   交互の本文ブロック（写真＋テキスト：詳細ページ）
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,84px);align-items:center;margin:clamp(48px,9vh,110px) 0}
.split.rev .media{order:2}
.split .media{position:relative;aspect-ratio:4/5;overflow:hidden}
.split .media .img{position:absolute;inset:0;background-size:cover;background-position:center}
.split .body .en{font-family:var(--mincho);font-size:.6rem;letter-spacing:.46em;color:var(--kin);display:block;margin-bottom:16px}
.split .body h3{font-family:var(--brush);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:.14em;line-height:1.5;margin-bottom:22px}

/* =========================================================
   カード（客室一覧・献立など）
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(28px,4vw,52px)}
.card{background:transparent}
.card .media{position:relative;aspect-ratio:3/2;overflow:hidden;margin-bottom:22px}
.card .media .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s ease}
.card:hover .media .img{transform:scale(1.04)}
.card .media .badge-jp{position:absolute;left:0;bottom:0;background:rgba(26,26,26,.78);color:var(--washi);font-family:var(--mincho);font-size:.62rem;letter-spacing:.32em;padding:.5em 1.1em .5em 1.4em}
.card .en{font-family:var(--mincho);font-size:.58rem;letter-spacing:.44em;color:var(--kin);display:block;margin-bottom:12px}
.card h3{font-family:var(--brush);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.6rem);letter-spacing:.12em;line-height:1.5;margin-bottom:14px}
.card p{font-family:var(--mincho);font-size:.82rem;line-height:2.3;letter-spacing:.06em;color:var(--grey);margin-bottom:18px}
.card .meta{font-family:var(--mincho);font-size:.74rem;letter-spacing:.16em;color:var(--sumi);padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.card .meta .price b{font-weight:500}

/* =========================================================
   静かな目次（三題）— トップ・各ページの続き読み
   ========================================================= */
.three{max-width:640px;margin:0 auto}
.three .head{writing-mode:vertical-rl;font-family:var(--brush);font-size:clamp(1.4rem,4vw,2rem);letter-spacing:.3em;display:inline-block;margin:0 0 clamp(40px,7vh,84px);padding-left:50%;transform:translateX(50%)}
.three .one{border-top:1px solid var(--line-strong);padding:clamp(28px,5vh,40px) 0}
.three .one:last-child{border-bottom:1px solid var(--line-strong)}
.three .one .en{font-family:var(--mincho);font-size:.62rem;letter-spacing:.4em;color:var(--kin);display:block;margin-bottom:14px}
.three .one h3{font-family:var(--brush);font-weight:400;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:.16em;margin-bottom:16px;line-height:1.5}
.three .one p{font-family:var(--mincho);font-size:.82rem;letter-spacing:.1em;line-height:2.4;color:var(--grey)}

/* =========================================================
   テーブル（料金・時刻・湯の概要）
   ========================================================= */
.tbl{width:100%;border-collapse:collapse;font-family:var(--mincho)}
.tbl caption{font-family:var(--brush);font-size:1.2rem;letter-spacing:.14em;text-align:left;margin-bottom:18px}
.tbl th,.tbl td{text-align:left;padding:18px 14px;border-bottom:1px solid var(--line);font-size:.84rem;letter-spacing:.08em;line-height:1.9;vertical-align:top}
.tbl th{font-weight:500;color:var(--kin);letter-spacing:.18em;white-space:nowrap;width:34%}
.tbl thead th{color:var(--sumi);border-bottom:1px solid var(--line-strong)}
.tbl .num{font-family:var(--mincho);letter-spacing:.04em}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:1px solid var(--line)}

/* 定義リスト（縦の項目：泉質・所在など） */
.deflist{font-family:var(--mincho)}
.deflist .one{display:flex;gap:1.6em;padding:18px 0;border-bottom:1px solid var(--line);font-size:.86rem;letter-spacing:.1em;line-height:2}
.deflist .one .k{color:var(--kin);white-space:nowrap;min-width:6em;letter-spacing:.2em}
.deflist.on-dark .one{border-bottom:1px solid var(--line-on-dark)}
.deflist.on-dark .one .k{color:var(--kin-soft)}

/* =========================================================
   ギャラリー（不揃いのグリッド）
   ========================================================= */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px)}
.gallery .g{position:relative;overflow:hidden}
.gallery .g .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s ease}
.gallery .g:hover .img{transform:scale(1.05)}
.gallery .g.tall{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery .g.wide{grid-column:span 2;aspect-ratio:3/2}
.gallery .g.sq{grid-column:span 2;aspect-ratio:1}

/* =========================================================
   暗い案内ブロック（墨地・CTA／予約）
   ========================================================= */
.annai{background:var(--sumi);color:var(--washi)}
.annai .in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,8vw,110px);align-items:start;padding:var(--gap-section) var(--pad-x)}
.annai .lead{writing-mode:vertical-rl;font-family:var(--brush);font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:.26em;line-height:1.8}
.annai .body .one{display:flex;gap:1.6em;padding:18px 0;border-bottom:1px solid var(--line-on-dark);font-family:var(--mincho);font-size:.86rem;letter-spacing:.1em;line-height:2}
.annai .body .one .k{color:var(--kin-soft);white-space:nowrap;min-width:5.4em;letter-spacing:.2em}
.annai .tel{font-family:var(--brush);font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:.1em;margin:38px 0 6px}
.annai .hours{font-family:var(--mincho);font-size:.74rem;letter-spacing:.24em;color:rgba(243,239,230,.7)}

/* =========================================================
   フォーム（予約問い合わせ）
   ========================================================= */
.form{font-family:var(--mincho)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px)}
.form .field{margin-bottom:clamp(22px,3.4vh,30px)}
.form label{display:block;font-size:.74rem;letter-spacing:.24em;color:var(--sumi);margin-bottom:12px}
.form label .req{color:var(--kin);margin-left:.5em;font-size:.66rem;letter-spacing:.1em}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--mincho);font-size:.9rem;letter-spacing:.06em;color:var(--sumi);
  background:rgba(255,255,255,.5);border:1px solid var(--line-strong);border-radius:0;
  padding:14px 16px;line-height:1.8;transition:border-color .25s,background .25s;
}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--kin);background:#fff}
.form .submit{
  appearance:none;cursor:pointer;font-family:var(--mincho);font-size:.86rem;letter-spacing:.3em;
  color:var(--washi);background:var(--sumi);border:1px solid var(--sumi);
  padding:16px 44px;transition:background .25s,color .25s;
}
.form .submit:hover{background:var(--kin);border-color:var(--kin)}
.form .note-min{font-family:var(--mincho);font-size:.72rem;letter-spacing:.1em;color:var(--grey);line-height:2;margin-top:20px}

/* =========================================================
   フッター（制作例表記）
   ========================================================= */
.site-foot{background:var(--washi-d);padding:clamp(54px,8vh,80px) var(--pad-x) 40px}
.site-foot .in{max-width:var(--maxw);margin:0 auto}
.site-foot .badge{display:inline-block;font-family:var(--mincho);font-size:.66rem;letter-spacing:.18em;color:var(--grey);border:1px solid var(--line-strong);padding:.5em 1.2em;margin-bottom:30px}
.site-foot .sig{font-family:var(--mincho);font-size:.84rem;letter-spacing:.18em;color:var(--sumi)}
.site-foot .sig b{font-weight:500}
.site-foot .note{font-family:var(--mincho);font-size:.7rem;letter-spacing:.08em;line-height:2.1;color:var(--grey);margin-top:18px;max-width:46em}
.site-foot .cr{font-family:var(--mincho);font-size:.68rem;letter-spacing:.2em;color:var(--grey);margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:980px){
  .gallery{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  body{line-height:2}

  /* ヘッダー：縦に2段（ブランド上、ナビ下で横スクロールせず折返し中央） */
  .site-head{flex-direction:column;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px}
  .site-head .brand{font-size:.9rem;letter-spacing:.42em}
  .site-nav ul{justify-content:center;gap:14px 16px}
  .site-nav a{font-size:.68rem;letter-spacing:.18em}
  .site-nav a.nav-cta{padding:5px 12px}

  /* 間：縦書き→横書き縦積み */
  .ma{min-height:auto;padding:clamp(64px,12vh,120px) 26px}
  .ma .v{writing-mode:horizontal-tb;flex-direction:column;gap:clamp(20px,4vh,38px);align-items:center}
  .ma .big{line-height:1.85}
  .ma .small{writing-mode:horizontal-tb;max-height:none;line-height:2.2;max-width:26em}

  /* 章キャプション：縦→横、下端へ */
  .chapter .photo{height:80vh;min-height:460px}
  .chapter .cap,.chapter .cap.left,.chapter .cap.right{
    writing-mode:horizontal-tb;left:clamp(22px,7vw,40px);right:clamp(22px,7vw,40px);
    top:auto;bottom:clamp(30px,8vh,60px);transform:none;
  }
  .chapter .cap .num{margin-left:0;margin-bottom:12px;display:block}
  .chapter .cap .t{margin-bottom:14px}
  .chapter .cap .d{margin-left:0;max-height:none;display:block;max-width:28em;line-height:2.2}
  .chapter .grad-b::after,.chapter .grad-r::after{background:linear-gradient(0deg,rgba(15,13,10,.72),rgba(15,13,10,0) 56%)}

  /* split：1カラム、写真を上に */
  .split{grid-template-columns:1fr;gap:28px;margin:clamp(40px,7vh,72px) 0}
  .split.rev .media{order:0}
  .split .media{aspect-ratio:3/2}

  /* 三題：縦書き見出し→横書き中央 */
  .three{max-width:560px}
  .three .head{writing-mode:horizontal-tb;display:block;text-align:center;padding-left:0;transform:none}

  /* 案内：1カラム、縦書きリード→横書き中央 */
  .annai .in{grid-template-columns:1fr;gap:30px}
  .annai .lead{writing-mode:horizontal-tb;text-align:center}

  /* テーブル：内側余白を詰める */
  .tbl th,.tbl td{padding:14px 8px;font-size:.8rem}
  .tbl th{width:38%}

  /* ギャラリー：2列、span をリセット */
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .g.tall{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}
  .gallery .g.wide,.gallery .g.sq{grid-column:span 2}

  /* フォーム：1カラム */
  .form .row{grid-template-columns:1fr;gap:0}
}