/* ==========================================================================
   Maison PUREJU / Mouth Design — 共通UIコンポーネント
   --------------------------------------------------------------------------
   複数ページで共有するデザイン部品のスタイル。テーマ差（配色）はCSS変数で吸収する。
   ・各部品には C-xx の識別子を付け、_shared/COMPONENTS.md の台帳と対応させる。
   ・新しい共通部品を切り出すたびに、ここへ追記し台帳を更新する。
   ・依存トークンは _shared/tokens.css（--brand-dark / --font-* 等）。
   ========================================================================== */

/* ===== C-01 Site Logo（クリニック名ロゴ＝Cormorant Garamond のフォント表記＋mouth design） =====
   使用: index.html / corner-lip-lift.html / cases.html のヘッダー
   マークアップ:
     <a class="logo site-logo" href="..."> Maison PUREJU<small>MOUTH DESIGN</small></a>
   テーマ変数（各ページの :root で任意に上書き）:
     --logo-color : 通常時のロゴ色（省略時=白。濃い写真の上のヘッダー向け）
     --logo-sub   : 通常時の mouth design の色（省略時=白85%）
   スクロールでヘッダーに .solid（TOP）または .scrolled（口角挙上・症例）が付くと、
   自動でスミ色（--brand-dark）／補助色（--muted）へ切り替わる（切り返し）。
   ライトテーマのページ（症例一覧）は --logo-color/--logo-sub をダーク側に指定して常時ダークにする。 */
.site-logo{font-family:var(--font-serif);font-size:15px;letter-spacing:.18em;font-weight:500;line-height:1.12;color:var(--logo-color,#fff);transition:color .45s}
.site-logo small{display:block;font-family:var(--font-mincho);font-size:24px;letter-spacing:.12em;font-weight:500;margin-top:6px;color:var(--logo-sub,rgba(255,255,255,.85))}
.solid .site-logo,.scrolled .site-logo{color:var(--brand-dark)}
.solid .site-logo small,.scrolled .site-logo small{color:var(--muted)}

/* ===== C-03 Footer（全ページ共通フッター＝濃色・本サイト情報＋法的リンク） =====
   使用: 全ページ（index / top / cases / doctor / guide）
   マークアップ（全ページ同一）:
     <footer><div class="wrap">
       <div class="f-top">
         <div class="f-logo">Maison PUREJU<small>口元専門サイト</small></div>
         <div class="f-access">
           <p class="f-addr">〒104-0061<br>東京都中央区銀座5丁目3-13 Ginza SS 85ビル 4F</p>
           <a class="f-map" href="https://mpureju.com/…（Google Maps）" target="_blank" rel="noopener">Google Maps</a>
           <p class="f-hours">受付時間　10:00〜19:00／休診日：月曜・不定休</p>
           <p class="f-tel-txt">TEL　<a href="tel:0332891222">03-3289-1222</a></p>
         </div>
       </div>
       <div class="f-bottom"><span>Maison PUREJU</span><span>© 2026 Maison PUREJU</span></div>
       <div class="f-legal">
         <a href="https://mpureju.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>
         <a href="https://mpureju.com/medical-guidelines" target="_blank" rel="noopener">医療広告ガイドライン</a>
         <a href="https://mpureju.com/cancel-policy" target="_blank" rel="noopener">キャンセルポリシーについて</a>
         <a href="https://mpureju.com/legal" target="_blank" rel="noopener">特定商取引法に基づく表示</a>
       </div>
     </div></footer>
   注: 法的リンクは本サイト(mpureju.com)へ target="_blank"（新規ウィンドウ）。
       .flag/.f-flag の基本スタイルは各ページ側の共通flag CSSに準拠（ここは濃色地の色上書きのみ）。 */
footer{background:#241713;color:#c9bdb6;padding:64px 0 40px;font-size:13px;line-height:1.95;font-weight:400}
footer .f-top{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:34px}
@media(min-width:820px){footer .f-top{grid-template-columns:auto 1fr;align-items:start;gap:44px}}
footer .f-logo{font-family:"Cormorant Garamond","Zen Old Mincho",serif;font-size:22px;letter-spacing:.14em;color:#fff;line-height:1.3}
footer .f-logo small{display:block;font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif;font-size:12px;letter-spacing:.24em;color:rgba(255,255,255,.72);margin-top:6px}
footer .f-addr{margin:0 0 10px;color:#d7ccc4}
footer .f-map{display:inline-block;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;margin-bottom:16px}
footer .f-map:hover{border-color:#fff}
footer .f-hours{margin:0;color:rgba(255,255,255,.75);font-size:12.5px}
footer .f-tel-txt{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:13px;letter-spacing:.02em}
footer .f-tel-txt a{color:#fff}
footer .f-tel-txt a:hover{border-bottom:1px solid rgba(255,255,255,.5)}
footer .f-legal{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.04em}
footer .f-legal a{color:rgba(255,255,255,.6)}
footer .f-legal a:hover{color:#fff}
footer .f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;font-size:12px;color:rgba(255,255,255,.5)}
footer .f-flag{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
/* SP：タップ領域を拡張（PCは据え置き。フッター1カラム化と同じ820px境界） */
@media(max-width:820px){
  footer .f-map{padding:12px 0 2px}
  footer .f-tel-txt a{display:inline-block;padding:8px 0 4px}
  footer .f-legal{gap:0 22px}
  footer .f-legal a{display:inline-block;padding:11px 0}
}

/* ═══════════════════════════════════════════════════════════
   C-10 Access Guide（クリニックへの道順）　… 2026-07-16 追加
   マークアップとデータは _shared/access-guide.js が描画する（各HTMLに書かない）。
   データ出典＝mpureju.site/data/accessGuideData.ts（microCMS自動生成）。
   ・直前の「アクセス」の続きとして読ませるため背景は透過＝上パディングも持たない
     （アクセス側セクションの下パディングが両者の間隔になる）。
     バンドを敷きたいページは mount 要素に --ag-bg を指定する。
   ・テーマ差（TOP=トープゴールド／施術=コーラル）は既存トークンで吸収するため、
     ページ固有の背景トークン（--bg2 / --paper）はここでは使わない。
   ═══════════════════════════════════════════════════════════ */
.ag{padding:0 0 clamp(72px,10vw,120px);background:var(--ag-bg,transparent)}
.ag .ag-head{text-align:center;margin-bottom:clamp(28px,3.8vw,40px)}
.ag .ag-eyebrow{display:inline-block;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent-d);margin-bottom:14px}
.ag .ag-ttl{font-size:clamp(22px,3.2vw,34px);font-weight:600;letter-spacing:.04em;color:var(--ink);margin:0}
.ag .ag-lead{margin:14px 0 0;color:var(--sub);font-size:14px;line-height:1.95}
.ag .ag-box{max-width:560px;margin:0 auto}
.ag .ag-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(22px,3vw,30px)}
.ag .ag-tab{padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--sub);font-size:13px;letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ag .ag-tab:hover{border-color:var(--accent)}
.ag .ag-tab.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.ag .ag-bar{display:flex;gap:6px;margin-bottom:18px}
.ag .ag-bar button{flex:1;height:3px;border:0;padding:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .3s}
.ag .ag-bar button.is-done{background:var(--accent)}
.ag .ag-row{display:flex;align-items:center;gap:12px}
.ag .ag-fig{flex:1;min-width:0;margin:0;border-radius:10px;overflow:hidden;aspect-ratio:3/4}
.ag .ag-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ag .ag-nav{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--accent);color:#fff;cursor:pointer;transition:background .25s,opacity .25s}
.ag .ag-nav:hover:not(:disabled){background:var(--accent-d)}
.ag .ag-nav:disabled{opacity:.25;cursor:not-allowed}
.ag .ag-nav svg{width:14px;height:14px}
.ag .ag-count{text-align:center;margin:16px 0 0;color:var(--sub);font-size:13px}
.ag .ag-count b{font-size:18px;font-weight:600;color:var(--ink)}
.ag .ag-count span{margin:0 7px;opacity:.45}
.ag .ag-cap{margin:14px 0 0;text-align:center;color:var(--sub);font-size:14px;line-height:1.95}
.ag .ag-tel{margin:22px 0 0;text-align:center;color:var(--sub);font-size:13px;line-height:1.9}
.ag .ag-tel a{color:var(--accent-d);font-weight:600;border-bottom:1px solid currentColor}
@media(max-width:560px){
  .ag .ag-tab{padding:10px 15px;font-size:12px}
  .ag .ag-row{gap:8px}
  .ag .ag-nav{width:36px;height:36px}
}

/* ═══════════════════════════════════════════════════════════
   CTA ボタンの等幅化（PC）　… 2026-07-16 追加
   ─────────────────────────────────────────────────────────
   LINE側はアイコン(19px)＋gap(10px)ぶん広くなるため、PC幅では左右が不揃いになる。
   → 下限を与えて等幅に揃える。
   ・2026-07-16：「LINEで相談する」224px ／「まずは相談する」191px（実測）→ 下限240px
   ・2026-07-28：文言変更に伴い再実測。「LINEでカウンセリング予約」302px ／
     「Webでカウンセリング予約」270px となり240pxでは効かなくなった → **下限310px**に更新。
     ※561〜635px幅では合計(310×2+gap15=635px)が収まらず折り返すが、flex-wrap:wrapにより
       縦2段・等幅で並ぶため破綻しない（実機の主要幅＝SP〜430px／タブレット768px以上は対象外）。

   ・SP（560px以下）は各ページ側の `.cta-btns{flex-direction:column;align-items:stretch}`
     で既に縦積み等幅のため、min-width を効かせない＝`min-width:561px` で囲っている
     （min-width を無条件に効かせると狭幅端末で横溢れする）。
   ・`.cta-btns .btn`（詳細度0,2,0）は各ページ `<style>` の `.btn`（0,1,0）より強いため、
     読み込み順に関係なくこの指定が勝つ。
   ・⚠️C-04 Button 本体の切り出しは未着手（デザインFIX後の予定）。ここは等幅化の一点のみ。
   ═══════════════════════════════════════════════════════════ */
@media(min-width:561px){
  .cta-btns .btn{min-width:310px;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   #cta ボタン下の補足文（稼働12ページ共通）　… 2026-07-28 追加
   ─────────────────────────────────────────────────────────
   経緯：クライアントより「『LINEで相談する』はチャット相談できると
   誤解されうる」「2つのボタンの違いが分かりにくい」とのご指摘。
   → ボタンを「LINEでカウンセリング予約／Webでカウンセリング予約」に変更。

   LINEボタンの遷移先は友だち追加画面（line.me/R/ti/p/@527hukoq）であり
   予約フォームそのものではないため、本サイト準拠で1行の補足を添える。
   出典＝本サイト `app/reservation/page.tsx` BOOKING_METHODS「LINE予約」の説明文
   「LINEから予約フォームへ簡単にアクセスできます。友だち追加後、メニュー内の
   『予約』ボタンよりお手続きください。」（カンプでは1文に凝縮）
   ※「無料カウンセリング」とは書かない（外科初診料¥5,500が発生＝優良誤認の恐れ）
   ═══════════════════════════════════════════════════════════ */
/* ⚠️詳細度：各ページ<style>の `.cta p`（0,1,1）が後に読まれるため、`.cta-note`（0,1,0）
   だけでは font-size:16px / margin-bottom:38px に負ける。`.cta .cta-note`（0,2,1）で上書きする。 */
/* サイズはサイト内の注釈最小＝11px に統一（.cap/.img-note/.price-note/.case-note と同値）。
   .hero-note の10.5pxはFV写真上の1行専用のため本文エリアでは採らない。2026-07-28 おその氏指示 */
.cta .cta-note{margin:clamp(18px,2.4vw,24px) auto 0;font-size:11px;line-height:1.9;color:var(--muted);text-align:center}
@media(max-width:560px){
  .cta .cta-note{text-align:left;max-width:27em}
}
/* SP限定改行：SPでは読点のあとで区切る（そのままだと「ボタ／ン」と語中で割れる）。
   文言は変えずbrのみ。PC（561px以上）ではbrを殺して1行に保つ。
   ※`.spbr`(BP768px)とは別系統。ここは561pxで`.cta-note`のbrだけを殺す共通制御。 */
@media(min-width:561px){
  .cta .cta-note br{display:none}
}

/* ═══════════════════════════════════════════════════════════
   #related 見出しのSP改行（施術8ページ共通）　… 2026-07-16 追加
   ─────────────────────────────────────────────────────────
   「解決策は、ひとつじゃない。」は SP幅で語中折り返し（"解決策は、ひとつじゃな／い。"）
   になるため、読点のあとで区切る。**文言は変えない**（SP限定の<br>のみ）。

   BPの根拠（実測・二分探索）：h2 は clamp(28px,4.2vw,52px) で SP域は 28px 固定。
     ・422px以下 … 1行に収まらず折り返す → <br> を出す
     ・423px以上 … 1行に収まる          → <br> は隠す（PCは1行維持）
   分割後の最長行「ひとつじゃない。」は 320px 幅でも収まるためフォント調整は不要。
   ※命名は既存の SP限定br（.fvbr / .mlbr / .ccbr / .pcbr）に合わせて .rlbr（related）。
   ═══════════════════════════════════════════════════════════ */
.rlbr{display:none}
@media(max-width:422px){
  .rlbr{display:inline}
}

/* ═══════════════════════════════════════════════════════════
   #info リスク・副作用セルの横2枠化　… 2026-07-16 追加
   ─────────────────────────────────────────────────────────
   #info を「概要」に絞る整理に伴い、入院＋通院を1セルに統合して 8→7セルにし、
   最後尾のリスク・副作用を2枠分に広げて 8ユニット＝グリッドを埋め切る構成にした。
     PC(≥1000px・4列)：[施術内容][施術時間][麻酔][入院・通院]
                        [ダウンタイム][料金][リスク・副作用 ←2枠]
     〜999px(2列)    ：3行＋リスクが1行を占める
   横に広がるぶん行数が減り、一番長いリスク欄の縦の圧迫が解ける。
   ※`.info-grid` は各ページの <style> にあるが8ページとも同一（md5一致）。
     この1行だけ共通CSSに置く（`.info-cell.is-wide`＝詳細度0,2,0で競合なし）。
   ═══════════════════════════════════════════════════════════ */
.info-cell.is-wide{grid-column:span 2}

/* ═══════════════════════════════════════════════════════════
   #related 関連施術カード（8ページ共通）　… 2026-07-16 追加
   ─────────────────────────────────────────────────────────
   ① 説明文が1行のカードと2行のカードで「詳しく見る」の高さが揃わない
      → 説明文に2行ぶんの高さを確保（min-height）して統一。
        13px × line-height1.85 × 2行 = 48.1px → em指定（3.7em）でフォント変更に追従。
      → 併せてカードを flex 縦積みにし、ボタンを margin-top:auto で最下部に固定。
        （説明文が3行になる幅があってもボタン位置は揃う＝二重の保険）
   ② 「詳しく見る」がテキストリンクでボタンと認識されにくい
      → 各カードのキーカラー（--kc）で塗った角丸ボタンにし、カード幅いっぱいに広げる。
        flexの既定 align-items:stretch により、PC・SPとも自動で左右いっぱいになる。

   ⚠️詳細度：ページ側 <style> は本ファイルより後に読まれ、かつ `.rel-card .rc-link`
     （0,2,0）と同値のため、**3クラス（0,3,0）で上書きする必要がある**。
     `.rel-card{display:block}` も同様に `.rel-grid .rel-card` で上書きする。
   ⚠️キーカラー8色はクライアント承認待ちの仮色。白文字×キーカラー地のコントラストは
     ピーナッツ/ガミーが低い（既知・色確定後に再計算する方針でユーザーと合意済み）。
   ═══════════════════════════════════════════════════════════ */
.rel-grid .rel-card{display:flex;flex-direction:column}
.rel-grid .rel-card p{min-height:3.7em;margin-bottom:18px}
.rel-grid .rel-card .rc-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:auto;padding:12px 14px;border-radius:999px;
  background:var(--kc,var(--accent));color:#fff;
  transition:filter .25s,box-shadow .25s;
}
.rel-grid .rel-card:hover .rc-link{filter:brightness(.94)}

/* ═══════════════════════════════════════════════════════════
   .page-hero（doctor / cases / guide のヘッダー直下エリア）　… 2026-07-16 追加
   ─────────────────────────────────────────────────────────
   【不具合】各ページ <style> の指定が
       .page-hero{padding:clamp(72px,8vw,84px) 0 clamp(20px,2.4vw,30px)}
     となっており、
     ① 左右パディングが 0 ＝ リード文が画面端まで届く。
        `.page-hero p` の max-width:42em(≈567px) は SP幅では効かないため歯止めにならない。
     ② 上パディングが SP で 72px（8vw=31pxのため下限72pxが適用）。
        ヘッダーは position:fixed で **未スクロール時 83px** のため **11px 食い込み**、
        パンくずがヘッダーに隠れていた。PCも 84px ＝ 隙間1pxでほぼ接触していた。

   【対処】ヘッダー高＋ゆとり を上に確保し、左右は他セクションと同じ --gut を入れる。
     ・--hd-h は #site-header の実測値（padding:16px×2＋ロゴ2行）。
       スクロール時は .scrolled で padding:10px になり 71px に縮むが、
       .page-hero はページ最上部＝**未スクロール状態の 83px** を基準にする。
     ・⚠️詳細度：ページ側 <style> は本ファイルより後に読まれ、かつ `padding` ショートハンドで
       上下左右を一括指定しているため、`.page-hero`（0,1,0）と同値では上書きできない。
       **`section.page-hero`（0,1,1）**で勝たせる。padding-bottom はページ側の指定を活かす。
   ═══════════════════════════════════════════════════════════ */
:root{ --hd-h:83px; }
section.page-hero{
  padding-top:calc(var(--hd-h) + clamp(20px,3vw,32px));
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* ═══════════════════════════════════════════════════════════
   術式図解イラスト（.tc-img.method-fig）　… 2026-07-16 追加
   ─────────────────────────────────────────────────────────
   施術7ページ（人中短縮/外側人中短縮/M字/ピーナッツ/口唇縮小/口唇拡大/ガミー）の
   #about後半メソッドに入る術式図解（上下2段組・文字ラベル入り・比率≈1.11）。

   既存の `.twocol .tc-img img` は aspect-ratio:4/3 + object-fit:cover ＝**切り抜き**のため、
   この図をそのまま入れると上下のラベル（「切開」「引き上げて縫合」等）が欠ける。
   → 図解セルだけ `.method-fig` で隔離し、画像の本来比率で全体を見せる（contain相当）。
     ・aspect-ratio は画像実寸（1324:1188≈1.114）に合わせて枠の縦を確保。
     ・object-fit:contain＝切らない。
     ・hover拡大（既存 .tc-img:hover img の scale）は図解では誤読を招くので無効化。
   【カード化（2026-07-16 追記）】図の白背景が施術ページの地色 paper と溶けて沈むため、
     口角挙上の図解カード（`.method-illust figure`）と同じ質感＝**白地＋薄い罫線＋うっすらシャドウ**を
     与えて浮かせる。値は corner のカードから踏襲：
       background:#fff / border:1px solid var(--line) / box-shadow:0 8px 24px rgba(58,30,24,.06)
     内側に少し余白（padding）を取り、図が枠に貼り付かないようにする。
   ⚠️詳細度：ページ側 <style> の `.twocol .tc-img img`（0,3,0）が後読みで効くため、
     上書きは **`.twocol .tc-img.method-fig img`（0,4,0）** で行う。
   ═══════════════════════════════════════════════════════════ */
.twocol .tc-img.method-fig{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(58,30,24,.06);
  padding:clamp(12px,1.6vw,18px);
  overflow:visible;   /* シャドウが枠で切れないように（.tc-img既定の overflow:hidden を解除） */
}
.twocol .tc-img.method-fig img{
  width:100%;
  aspect-ratio:1324/1188;
  object-fit:contain;
  background:#fff;
  border-radius:6px;
}
.twocol .tc-img.method-fig:hover img{transform:none}
/* SP：.tc-img は画面幅いっぱいに負のマージンで広がる指定（≤879px）がある。
   図解カードはシャドウ・罫線を見せるため、その負マージンを打ち消して通常幅に戻す。 */
@media(max-width:879px){
  .twocol .tc-img.method-fig{margin-left:0;margin-right:0;border-radius:12px}
}