/* ============================================================
   柾風 春岡（MASAKAZE Haruoka）pages.css
   下層ページ専用の共通部品。style.css のトークン（--ink/--paper/--line/
   --mute/--bg/--fg/--ln/--mt/--maxw/--gutter/--font-en/--font-ja/--ease）と
   既存部品（.sidebar/.sec/.wrap/.disp/.disp-ja/.lead/.reveal/.mask-reveal/
   .btn*/.site-footer 等）をそのまま前提にする。style.css の後に読み込むこと。
   ここで定義する部品の使い方は README.md「下層ページの作り方」章を参照。
   単位は px 固定幅を作らず rem/em/% を基本にする（1800px+ の html 拡張に
   自動追従させるため）。
   ============================================================ */

/* ============================================================
   page-head（各下層ページの1枚目：パンくず＋h1＋日本語1行＋リード）
   <section class="sec page-head" id="page-head"><div class="wrap">…
   ============================================================ */
.page-head{padding-block:clamp(56px,9vw,110px) clamp(40px,6vw,64px)}
.page-head__crumb{
  margin-bottom:clamp(20px,3vw,32px);
  font-family:var(--font-en);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);
}
.page-head__crumb a{border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.page-head__crumb a:hover{border-color:currentColor}
.page-head .lead{margin-top:clamp(20px,3vw,32px);margin-left:0}

/* ============================================================
   media-full（全幅写真。サイドバー右端〜画面右端まで、トップの
   .concept__media と同じ実装。.sec の子だが .wrap の外に置くことで
   ブリードさせる＝<section>の直接の子にする。.wrap の中に入れない）
   <section><div class="media-full"><img …></div></section>
   ============================================================ */
.media-full{width:100%;aspect-ratio:16/9;overflow:hidden;margin-block:clamp(48px,7vw,88px)}
.media-full img,.media-full video{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   chapter（章の縦積みラッパー。sub-head + prose 等をまとめ、1px罫で区切る）
   ============================================================ */
.chapter{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line)}
.chapter:first-child{padding-top:0;border-top:0}

/* ============================================================
   sub-head（章見出し：極小英字番号＋英字見出し＋日本語1行。
   .disp/.disp-ja と同じ「英字→日本語」の並びを縮小したもの）
   <div class="sub-head">
     <p class="sub-head__num">01 —</p>
     <h2 class="sub-head__en">The Line</h2>
     <p class="sub-head__ja">際とは</p>
   </div>
   ============================================================ */
.sub-head{margin-bottom:clamp(24px,3.5vw,36px)}
.sub-head__num{margin-bottom:10px;font-family:var(--font-en);font-size:12px;letter-spacing:.1em;color:var(--mute)}
.sub-head__en{font-family:var(--font-en);font-weight:400;font-size:clamp(1.75rem,3vw,3rem);letter-spacing:-.02em;line-height:1.08}
.sub-head__ja{margin-top:8px;font-family:var(--font-ja);font-size:13px;letter-spacing:.08em;color:var(--mute)}

/* ============================================================
   prose（本文カラム。max-width 34em・14px/2.0・左揃え）
   <div class="prose"><p>…</p><p>…</p></div>
   ============================================================ */
.prose{max-width:34em;font-size:14px;line-height:2.0;color:var(--fg)}
.prose p{color:inherit}
.prose p+p{margin-top:1.6em}

/* ============================================================
   split-block（写真/動画1枚＋spec-table 等を横並びにする2カラム。
   material.html の石・木・ステンレス各ブロックで使用。1024px以下は縦積み）
   <div class="split-block">
     <div class="split-block__media mask-reveal"><video …></video></div>
     <div class="split-block__content">…</div>
   </div>
   ============================================================ */
.split-block{display:grid;grid-template-columns:38% 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.split-block__media{aspect-ratio:800/950;overflow:hidden}
.split-block__media img,.split-block__media video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
.split-block__content{padding-top:2px}
.split-block__link{margin-top:24px}

/* ============================================================
   spec-table（仕様表。1px罫のみ・角丸なし。th=極小英字ラベル／td=本文）
   <table class="spec-table"><tbody><tr><th>Type</th><td>…</td></tr>…</tbody></table>
   ============================================================ */
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table tr{border-top:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:1px solid var(--line)}
.spec-table th{
  width:8em;padding:14px 16px 14px 0;text-align:left;vertical-align:top;
  font-family:var(--font-en);font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);
}
.spec-table td{padding:14px 0;text-align:left;vertical-align:top;line-height:1.85;color:var(--fg)}

/* ============================================================
   step-list（番号付き工程。01 — の極小英字番号＋見出し＋1〜2行）
   <ol class="step-list"><li><p class="step-list__num">01 —</p>
   <h3 class="step-list__title">…</h3><p class="step-list__body">…</p></li>…</ol>
   ============================================================ */
.step-list{display:flex;flex-direction:column}
.step-list li{padding-block:clamp(20px,3vw,32px);border-top:1px solid var(--line)}
.step-list li:last-child{border-bottom:1px solid var(--line)}
.step-list__num{font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:var(--mute)}
.step-list__title{margin-top:8px;font-size:16px;letter-spacing:.02em;font-weight:500}
.step-list__body{margin-top:8px;max-width:30rem;font-size:13px;line-height:1.9;color:var(--mute)}

/* ============================================================
   media-pair（写真2枚横並び、モバイルは縦積み）
   <div class="media-pair">
     <div class="media-pair__item"><img …></div>
     <div class="media-pair__item"><img …></div>
   </div>
   ============================================================ */
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln);margin-top:clamp(32px,4vw,48px)}
.media-pair__item{aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.media-pair__item img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   tag-row（極小英字タグの横並び。トップのフロアガイド機能タグと同じ見た目）
   <ul class="tag-row"><li>Display</li><li>Kitchen Gallery</li></ul>
   ============================================================ */
.tag-row{display:flex;flex-wrap:wrap;margin-top:18px;margin-bottom:clamp(24px,3.5vw,36px)}
.tag-row li{
  font-family:var(--font-en);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);padding:0 16px;border-left:1px solid var(--line);
}
.tag-row li:first-child{padding-left:0;border-left:0}

/* ============================================================
   meta-line（所要時間・予約要否などの極小キャプション1行）
   ============================================================ */
.meta-line{margin-top:20px;font-size:12px;letter-spacing:.02em;color:var(--mute)}

/* ============================================================
   text-link（下線付きの極小英字テキストリンク。.intro__link 等トップの
   複数箇所と同じ見た目を汎用クラス化したもの）
   ============================================================ */
.text-link{display:inline-block;font-family:var(--font-en);font-size:13px;letter-spacing:.06em;border-bottom:1px solid var(--ln);transition:border-color .3s var(--ease)}
.text-link:hover{border-color:currentColor}

/* ============================================================
   signature（代表の言葉などの署名行）
   ============================================================ */
.signature{margin-top:28px;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--mute)}

/* ============================================================
   cta-band（ページ末尾のCTA帯。黒／生成りどちらのセクションにも置ける。
   トップの #reserve と同じ組版。中央揃え。ピルボタン＋細字リンク）
   <section class="sec cta-band"><div class="wrap">
     <h2 class="disp">Book a Visit</h2><p class="disp-ja">…</p><p class="lead">…</p>
     <a class="cta-band__cta" href="reserve.html">ご来館予約</a>
     <div class="cta-band__more"><p class="cta-band__sub"><a href="business.html">…</a></p></div>
   </div></section>
   ============================================================ */
.cta-band{min-height:56vh;display:flex;align-items:center;text-align:center}
.cta-band .wrap{width:100%}
.cta-band .lead{margin-inline:auto;max-width:34rem;text-align:left}
.cta-band__cta{display:inline-flex;margin-top:32px;padding:18px 44px;border-radius:999px;background:var(--fg);color:var(--bg);font-family:var(--font-en);font-size:13px;letter-spacing:.08em;transition:opacity .25s}
.cta-band__cta:hover{opacity:.78}
.cta-band__more{display:block;max-width:28rem;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line)}
.cta-band__sub{font-size:12px;letter-spacing:.02em;color:var(--mute)}
.cta-band__sub a{border-bottom:1px solid var(--ln)}
.cta-band__sub a:hover{border-color:currentColor}

/* ============================================================
   Responsive：1024px以下（サイドバー→上部バー化に合わせる）
   ============================================================ */
@media (max-width:1024px){
  .split-block{grid-template-columns:1fr;gap:28px}
  .split-block__media{aspect-ratio:4/3}
  .media-pair{grid-template-columns:1fr}
}

/* ============================================================
   大画面：1800px以上（style.css の html rem拡張＋90vwコンテナに追従。
   em/rem基準のため多くはここに書かなくても自動追従するが、視覚バランス
   のため一部だけ上限を広げる）
   ============================================================ */
@media (min-width:1800px){
  .page-head .lead{max-width:44rem;font-size:1rem}
  .prose{max-width:38em;font-size:1rem}
  .sub-head__en{font-size:clamp(2rem,3vw,3.4rem)}
  .step-list__body{max-width:34rem}
}