/* ==========================================================
   TDC 共通CSS（全ページ共通）: 変数 / ベース / ボタン / ヘッダー / フッター / 追従CV
   ページ固有のスタイルは style.css。ヘッダー・フッターを他ページで使うときはこのファイルと common.js を読み込む。
   色は白と黒のみ / 英字: Muli(Mulish) / 和文: ヒラギノ角ゴ
   ========================================================== */
:root{
  /* 色（白と黒、透明度変種）。名前の数字は不透明度 % */
  --b:#000; --b-92:rgba(0,0,0,.92); --b-80:rgba(0,0,0,.8); --b-60:rgba(0,0,0,.6); --b-55:rgba(0,0,0,.55); --b-42:rgba(0,0,0,.42); --b-32:rgba(0,0,0,.32); --b-25:rgba(0,0,0,.25); --b-15:rgba(0,0,0,.15); --b-05:rgba(0,0,0,.05);
  --w:#fff; --w-60:rgba(255,255,255,.6); --w-20:rgba(255,255,255,.2);
  --b-06:var(--b-05); /* 旧名。値は .05。assets/form-design.css が参照しているので残す（ステップ 4 で解消） */
  --font:'Muli','Mulish','Hiragino Kaku Gothic ProN','Hiragino Sans','ヒラギノ角ゴ ProN W3','Noto Sans JP','Meiryo',sans-serif;
  --header-h:76px;
  /* ---- tokens:begin（tools/tokens-report.py --init が生成。値は丸めない。手で編集しない） ---- */
  /* 文字サイズ */
  --fs-7:7px; --fs-9:9px; --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-19:19px; --fs-20:20px; --fs-22:22px; --fs-24:24px; --fs-26:26px;
  --fs-28:28px; --fs-30:30px; --fs-32:32px; --fs-44:44px; --fs-56:56px;
  --fs-fluid-1:clamp(14px,1.6vw,20px);
  --fs-fluid-2:clamp(16px,2vw,22px);
  --fs-fluid-3:clamp(18px,2.2vw,26px);
  --fs-fluid-4:clamp(18px,2.4vw,32px);
  --fs-fluid-5:clamp(20px,2.4vw,28px);
  --fs-fluid-6:clamp(26px,4vw,44px);
  --fs-fluid-7:clamp(30px,4.4vw,52px);
  --fs-fluid-8:clamp(32px,5vw,56px);
  --fs-fluid-9:clamp(34px,5vw,56px);
  --fs-fluid-10:clamp(40px,12.5vw,60px);
  --fs-fluid-11:clamp(40px,5vw,64px);
  --fs-fluid-12:clamp(40px,7.4vw,112px);
  --fs-fluid-13:clamp(44px,8.5vw,128px);
  --fs-fluid-14:clamp(56px,7vw,96px);
  /* 余白 */
  --sp-1:1px; --sp-2:2px; --sp-3:3px; --sp-4:4px; --sp-6:6px; --sp-7:7px; --sp-8:8px; --sp-9:9px;
  --sp-10:10px; --sp-11:11px; --sp-12:12px; --sp-14:14px; --sp-15:15px; --sp-16:16px; --sp-18:18px; --sp-19:19px;
  --sp-20:20px; --sp-22:22px; --sp-24:24px; --sp-26:26px; --sp-28:28px; --sp-30:30px; --sp-32:32px; --sp-34:34px;
  --sp-36:36px; --sp-40:40px; --sp-44:44px; --sp-46:46px; --sp-48:48px; --sp-50:50px; --sp-56:56px; --sp-60:60px;
  --sp-64:64px; --sp-70:70px; --sp-72:72px; --sp-76:76px; --sp-80:80px; --sp-86:86px; --sp-90:90px; --sp-100:100px;
  --sp-110:110px; --sp-120:120px; --sp-150:150px; --sp-1-5vw:1.5vw; --sp-7vw:7vw; --sp-11vh:11vh;
  /* 行間 */
  --lh-100:1; --lh-110:1.1; --lh-120:1.2; --lh-140:1.4; --lh-150:1.5; --lh-160:1.6; --lh-170:1.7; --lh-175:1.75;
  --lh-180:1.8; --lh-190:1.9; --lh-200:2; --lh-210:2.1;
  /* 字間 */
  --ls-2:.02em; --ls-4:.04em; --ls-5:.05em; --ls-6:.06em; --ls-8:.08em; --ls-10:.1em; --ls-12:.12em; --ls-14:.14em;
  --ls-20:.2em; --ls-22:.22em; --ls-24:.24em; --ls-30:.3em; --ls-40:.4em;
  /* z-index */
  --z-1:1; --z-2:2; --z-40:40; --z-50:50; --z-60:60; --z-100:100;
  /* ---- tokens:end ---- */
  /* ステップ 4（束 4-1）で build.py の style= 直書きから移した値のうち、上の生成ブロックに無いもの */
  --sp-96:96px;
  --sp-13:13px;  /* U-01（ハンバーガーの当たり判定 44px） */
  --ls-18:.18em;  /* U-01 段 2・D-01（≤382px のロゴ字間） */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font);color:var(--b);background:var(--w);line-height:var(--lh-190);letter-spacing:var(--ls-5);font-size:var(--fs-14);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
:where(img[width][height]):not(:where(.post-body img)){height:auto}  /* C-35 Img: width/height 属性は縦横比（CLS 対策）にだけ使い、高さは CSS（無ければ幅なりの auto）に任せる。詳細度 0 なので各部品の height 指定が勝つ。記事本文（.post-body）は元から属性付きの img があり見た目を変えないため除外（post.css が個別に height:auto） */
a{color:inherit;text-decoration:none;transition:opacity .3s}
a:hover{opacity:.55}
ul{list-style:none}
[hidden]{display:none!important}
.container{width:min(1160px,100% - 48px);margin-inline:auto}
.bg-b{background:var(--b);color:var(--w)}
.bg-g{background:var(--b-05)}
.muted{color:var(--b-60)}
.bg-b .muted{color:var(--w-60)}
.small{font-size:var(--fs-12)}
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s}
.fade.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:var(--sp-16) var(--sp-46);border:1px solid var(--b);font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-22);text-align:center;transition:all .3s;background:transparent;color:var(--b);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--b);color:var(--w);opacity:1}
.btn.solid{background:var(--b);color:var(--w)}
.btn.solid:hover{background:var(--w);color:var(--b)}
.btn.w{border-color:var(--w);color:var(--w)}
.btn.w:hover{background:var(--w);color:var(--b)}
.btn.w.solid{background:var(--w);color:var(--b)}
.btn.w.solid:hover{background:transparent;color:var(--w)}
.btn.sm{padding:var(--sp-10) var(--sp-22);font-size:var(--fs-11)}

/* ---------- section title ---------- */
.sec-title{margin-bottom:var(--sp-64);text-align:center;font-size:inherit;font-weight:400;line-height:inherit}
.sec-title .en{display:block;font-weight:700;font-size:var(--fs-fluid-7);letter-spacing:var(--ls-20);line-height:var(--lh-120);text-transform:uppercase}
.sec-title .jp{display:block;margin-top:var(--sp-14);font-size:var(--fs-12);letter-spacing:var(--ls-30)}

/* ==========================================================
   HEADER
   ========================================================== */
.header{position:fixed;inset:0 0 auto 0;z-index:var(--z-50);background:var(--b);color:var(--w);transition:background .4s}
.header.on-hero{background:linear-gradient(var(--b-55),transparent)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 var(--sp-32);gap:var(--sp-24)}
.logo{font-weight:700;font-size:var(--fs-20);letter-spacing:var(--ls-24);line-height:var(--lh-120);white-space:nowrap}
.logo small{display:block;font-weight:400;font-size:var(--fs-9);letter-spacing:var(--ls-30);opacity:.7}
.gnav{display:flex;gap:var(--sp-26);font-size:var(--fs-11);letter-spacing:var(--ls-14);font-weight:600}
.gnav a{position:relative;padding:var(--sp-4) 0}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--w);transition:width .3s}
.gnav a:hover{opacity:1}.gnav a:hover::after{width:100%}
.header-cta{display:flex;gap:var(--sp-10);align-items:center}
.header .btn{border-color:var(--w);color:var(--w)}
.header .btn:hover{background:var(--w);color:var(--b)}
.header .btn.solid{background:var(--w);color:var(--b)}
.header .btn.solid:hover{background:transparent;color:var(--w)}
.burger{display:none;width:44px;height:44px;padding:var(--sp-13) var(--sp-8);margin:calc(-1 * var(--sp-13)) calc(-1 * var(--sp-8));position:relative;background:none;border:0;cursor:pointer;color:var(--w);flex:none}
.burger span{position:absolute;left:8px;width:28px;height:1px;background:currentColor;transition:.3s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:29px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ==========================================================
   FOOTER : アクセス → 予約(CV) → フッターメニュー
   ========================================================== */
.access-block{padding:var(--sp-120) 0;background:var(--b-05)}
.access-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-56)}
.map{width:100%;min-height:420px;height:100%;border:0}
dl.info{display:grid;grid-template-columns:110px 1fr;font-size:var(--fs-14)}
dl.info dt,dl.info dd{padding:var(--sp-15) 0;border-bottom:1px solid var(--b-15)}
dl.info dt{font-weight:700;letter-spacing:var(--ls-20);font-size:var(--fs-12)}
.access-block .p-name{font-weight:700;font-size:var(--fs-20);letter-spacing:var(--ls-20);margin-bottom:var(--sp-12)}
.reserve{text-align:center;background:var(--b);color:var(--w);padding:var(--sp-110) 0}
.reserve h2{font-weight:700;font-size:var(--fs-fluid-8);letter-spacing:var(--ls-24)}
.reserve .lead{margin:var(--sp-18) 0 var(--sp-40);font-size:var(--fs-13);letter-spacing:var(--ls-20)}
.footer-clinic-info_contact{display:flex;gap:var(--sp-16);justify-content:center;flex-wrap:wrap}
.m-button{background:var(--w);color:var(--b);border:1px solid var(--w);min-width:280px;font-weight:700;font-size:var(--fs-13);letter-spacing:var(--ls-20);transition:.3s}
.m-button a{display:block;padding:var(--sp-19) var(--sp-30)}
.m-button:not(:has(a)){padding:var(--sp-19) var(--sp-30)}
.m-button:hover{background:transparent;color:var(--w)}
.m-button:hover a{opacity:1}
.reserve-hours{margin-top:var(--sp-28);font-size:var(--fs-12);letter-spacing:var(--ls-20);opacity:.8}
.footer-menu{background:var(--b);color:var(--w);border-top:1px solid var(--w-20);padding:var(--sp-80) 0 var(--sp-30);font-size:var(--fs-12)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--sp-40);padding-bottom:var(--sp-50);border-bottom:1px solid var(--w-20)}
.footer-menu .logo{margin-bottom:var(--sp-18);display:block}
.footer-menu .foot-title{font-weight:700;font-size:var(--fs-12);letter-spacing:var(--ls-30);margin-bottom:var(--sp-16)}
.footer-menu li{margin-bottom:var(--sp-8)}
.footer-menu small{display:block;opacity:.6}
.footer-copyright{text-align:center;padding-top:var(--sp-26);opacity:.6;letter-spacing:var(--ls-10);font-size:var(--fs-11)}

/* 追従CV（モバイルのみ） */
.footer-fixed-button{display:none}
.pagetop{position:fixed;right:20px;bottom:24px;z-index:var(--z-40);width:44px;height:44px;border:1px solid var(--w);background:var(--b);color:var(--w);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.pagetop.show{opacity:1;pointer-events:auto}

/* ==========================================================
   RESPONSIVE (header / footer)
   ========================================================== */
@media (max-width:1100px){
  .gnav{display:none}
  .gnav.open{display:flex;position:fixed;inset:var(--header-h) 0 0 0;background:var(--b);flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-22);font-size:var(--fs-15)}
  .burger{display:block}
  .header-cta .btn{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  :root{--header-h:62px}
  /* 追従 CV の分の余白はフッター（.footer-menu の padding-bottom:100px）が持つ。body に足すと黒いフッターの下に白い帯が出る（第 6 波 M12） */
  .container{width:calc(100% - 40px)}
  .header-in{padding:0 var(--sp-20)}
  .sec-title{margin-bottom:var(--sp-40)}
  .sec-title .en{font-size:var(--fs-28);letter-spacing:var(--ls-14)}
  .btn{padding:var(--sp-15) var(--sp-28)}
  .access-block{padding:var(--sp-76) 0}
  .access-grid{grid-template-columns:1fr;gap:var(--sp-32)}
  .map{min-height:300px}
  dl.info{grid-template-columns:90px 1fr}
  .reserve{padding:var(--sp-76) 0}
  .footer-clinic-info_contact{flex-direction:column;align-items:stretch;padding:0 var(--sp-4)}
  .m-button{min-width:0}
  .footer-menu{padding-bottom:var(--sp-100)}
  .foot-grid{grid-template-columns:1fr;gap:var(--sp-28)}
  .pagetop{bottom:78px;right:14px;width:40px;height:40px}
  /* 追従CV : 電話 / WEB(MAIL) / LINE */
  .footer-fixed-button{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-60);background:var(--b);border-top:1px solid var(--w)}
  .footer-fixed-button li{border-right:1px solid var(--w-20);min-width:0}
  .footer-fixed-button li:last-child{border-right:0}
  .footer-fixed-button li>a,.footer-fixed-button li>span{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:var(--sp-8) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom));font-size:var(--fs-12);font-weight:700;letter-spacing:var(--ls-6);line-height:var(--lh-140);color:var(--w);background:var(--b)}
  .footer-fixed-button li>a:active,.footer-fixed-button li>span:active{background:var(--w);color:var(--b)}
  .footer-fixed-button small{display:block;font-size:var(--fs-9);font-weight:400;letter-spacing:var(--ls-2);opacity:.8;white-space:nowrap}
  .footer-fixed-button .callbtn:not(:has(a)){display:flex;flex-direction:column;align-items:center;justify-content:center}
}

/* ---------- ARTMAKE プルダウン ---------- */
.gnav-item{position:relative}
.gnav-title{display:block;padding:var(--sp-4) var(--sp-14) var(--sp-4) 0;cursor:pointer;position:relative}
.gnav-title::before{content:"";position:absolute;right:2px;top:50%;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.gnav-sub{position:absolute;left:-18px;top:100%;min-width:230px;padding:var(--sp-12) 0;background:var(--b);border:1px solid var(--w-20);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.gnav-item:hover .gnav-sub,.gnav-item:focus-within .gnav-sub,.gnav-sub.open{opacity:1;visibility:visible;transform:none}
.gnav-sub a{display:block;padding:var(--sp-9) var(--sp-22);white-space:nowrap;font-size:var(--fs-12);letter-spacing:var(--ls-10)}
.gnav-sub a::after{display:none}
.gnav-sub a:hover{background:var(--w);color:var(--b);opacity:1}
@media (max-width:1100px){
  .gnav.open{overflow-y:auto;justify-content:flex-start;padding:var(--sp-28) 0 var(--sp-120)}
  .gnav-item{text-align:center}
  .gnav-title.is-open::before{transform:translateY(-30%) rotate(-135deg)}
  .gnav-sub{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:var(--sp-6) 0 0;min-width:0;display:none;background:transparent}
  .gnav-sub.open{display:block}
  .gnav-sub a{padding:var(--sp-9) 0;font-size:var(--fs-13);opacity:.85}
}

.reserve h2{font-size:var(--fs-fluid-6)}

/* フッター見出し（RESERVATION）：他のセクション見出しと同じ英日2段 */
.reserve .sec-title{margin-bottom:var(--sp-24)}
.reserve .sec-title .en{font-size:var(--fs-fluid-7)}
.access-block .sec-title{margin-bottom:var(--sp-48)}

/* Instagram：PCはヘッダーのLINE予約の左、SP・タブレットはハンバーガーメニュー（コラムの下） */
.h-insta,.gnav-insta{display:inline-flex;align-items:center;justify-content:center;color:var(--w)}
.h-insta{width:43px;height:43px;margin-right:var(--sp-6)}  /* LINE予約ボタンの高さ（約43px）に揃える */
.h-insta svg{width:100%;height:100%;fill:currentColor}
.gnav-insta svg{width:22px;height:22px;fill:currentColor}
.gnav-insta{gap:var(--sp-10)}
.gnav .gnav-insta{display:none}
.gnav a.gnav-insta::after{display:none}
@media (max-width:1100px){
  .header-cta .h-insta{display:none}
  .gnav.open .gnav-insta{display:inline-flex;padding:var(--sp-6)}
  .gnav.open .gnav-insta svg{width:24px;height:24px}
}
/* ナビは折り返さない（Instagramアイコン追加分、間隔を詰める） */
.gnav{gap:clamp(var(--sp-14),var(--sp-1-5vw),var(--sp-24))}
.gnav a,.gnav-title{white-space:nowrap}
/* ヘッダー：1360px以下はハンバーガーメニュー（項目が多く、1101〜1360pxでナビがはみ出すため） */
@media (max-width:1360px){
  .gnav{display:none}
  .gnav.open{display:flex;position:fixed;inset:var(--header-h) 0 0 0;background:var(--b);flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--sp-22);font-size:var(--fs-15);overflow-y:auto;padding:var(--sp-28) 0 var(--sp-120)}
  .burger{display:block}
  .header-cta{display:none}  /* 子が全部非表示の空箱が flex 項目として gap を 1 回余分に取るため、箱ごと消す（WF-A-05） */
  .header .logo{min-width:0}  /* 字形の幅が想定より広いとき（Google Fonts 未着・代替フォント）もハンバーガーを画面内に残す */
  .gnav.open .gnav-insta{display:inline-flex;padding:var(--sp-6)}
  .gnav.open .gnav-insta svg{width:24px;height:24px}
  .gnav-item{text-align:center}
  .gnav-title.is-open::before{transform:translateY(-30%) rotate(-135deg)}
  .gnav-sub{position:static;opacity:1;visibility:visible;transform:none;border:0;padding:var(--sp-6) 0 0;min-width:0;display:none;background:transparent}
  .gnav-sub.open{display:block}
  .gnav-sub a{padding:var(--sp-9) 0;font-size:var(--fs-13);opacity:.85}
}
@media (max-width:382px){.header .logo{letter-spacing:var(--ls-18)}}  /* U-01 段 2・D-01: ロゴ文字とハンバーガーの線の間隔を空ける */
/* 第 3 波: 監修ブロック（記事以外のページ。.col-doctor をそのまま使う）の公開日・最終更新日・監修日。記事の .post-meta（post.css）と同じ値 */
.sv-dates{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-20);font-size:var(--fs-12);letter-spacing:var(--ls-8);color:var(--b-60)}
/* 第 4 波 1・第 5 波: ロゴ画像（build.py LOGO。ヘッダーだけ）。1 行の横組み（T | D | C と TRUE DESIGN CLINIC）で、高さは青砥さんの lp4 案の common.css と同じ PC 16px・スマホ 13px、幅は画像の縦横比。
   ヘッダーで .logo が縮んだ（≤1360px の min-width:0）ときは、幅に収まるよう縦横比を保って縮める */
.logo-img{display:block;height:16px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
@media (max-width:768px){.logo-img{height:13px}}