/* =====================================================================
   components.css — シン・東京駅こどもの成長クリニック
   Figma「トップページ v2 10/8」から切り出した共通コンポーネント。
   site.css の後に読み込む（全ページ共通）。

   1. トークン
   2. サイト共通パーツ（ヘッダー2段／予約メニュー／スマホメニュー）
   3. コンポーネント（.c-*）… TOP・下層ページで共用。一覧は /_components/
   4. ページ：TOP（.t4-*）… TOP固有のレイアウトのみ
   5. 下層ページへの適用 … 既存の下層ページ用クラスをコンポーネントの見た目に揃える
   ===================================================================== */

/* ============================== 1. トークン ============================== */
:root{
  --c-teal-d:#0B5D66;--c-teal:#00909F;--c-teal-h:#094B53;
  --c-apr:#F2A65A;--c-apr-h:#E8954A;
  --c-helmet:#C97A2B;--c-helmet-t:#D9832E;--c-helmet-bg:#FDEEDC;
  --c-pedia:#2C7A68;--c-pedia-bg:#E3F2EC;
  --c-mist:#E6F1F2;--c-mist2:#F1F7F7;--c-paper:#F7FAFA;
  --c-ink:#1C2F33;--c-ink2:#4A6066;--c-ink3:#7A8F93;--c-line:#D4E2E4;
  --f-h:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;--f-b:"Noto Sans JP",sans-serif;--f-e:"Figtree","Noto Sans JP",sans-serif;
  --r-card:16px;--r-lg:20px;--shadow-card:0 6px 18px rgba(28,46,51,.06);--shadow-pop:0 12px 16px rgba(28,46,51,.14)
}

/* ======================= 2. サイト共通パーツ ======================= */
/* ---------- ヘッダー（2段：住所・電話・予約／メニュー） ---------- */
.sitehead.v3 .hbar .w{max-width:none;padding:0 40px;gap:32px}
.sitehead .hcol{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-left:auto;min-width:0}
.sitehead .hrow1{display:flex;align-items:center;gap:20px}
.sitehead .hinfo{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.3}
.sitehead .hinfo small{font-size:11px;color:var(--c-ink3)}
.sitehead .hinfo p{display:flex;align-items:center;gap:8px;margin:0}
.sitehead .hinfo .hacc{font-size:13px;font-weight:500;color:var(--c-teal-d)}
.sitehead .hinfo .hacc:hover{text-decoration:underline;text-underline-offset:3px}
.sitehead .htel4{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-e);font-weight:700;font-size:24px;line-height:1.1;color:var(--c-teal-d);letter-spacing:.01em}
.sitehead .htel4 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sitehead .hrow1 .dd.rsv .ddb{min-width:217px;justify-content:center;padding:14px 18px 14px 22px;font-family:var(--f-h);font-size:15px;font-weight:700;border-radius:999px;gap:8px}
.sitehead .hrow1 .dd.rsv .ddb .ic{width:20px;height:20px;margin:0}
.sitehead .hrow1 .dd.rsv .ddb .chev{width:18px;height:18px}
.sitehead .hrow2{display:flex;align-items:center;gap:26px}
.sitehead .hrow2 .gnav3{margin-left:0;font-size:14px;font-weight:500}
.sitehead .hrow2 .gnav3 .gg{gap:26px}
.sitehead .hrow2 .gnav3 .gg+.gg{margin-left:26px}
.sitehead .hrow2 .gnav3 .gl,.sitehead .hrow2 .gnav3 .ddb{padding:0 0 2px;line-height:1.8}
.sitehead .hen2{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:500;color:var(--c-teal-d);white-space:nowrap}
.sitehead .hen2:hover{text-decoration:underline;text-underline-offset:3px}
.sitehead .hen2 .ic-ext{width:13px;height:13px}
.sitehead.v3 .logo img{height:40px;width:auto}
.entab{display:none!important}
@media (min-width:1101px){:root{--hd:117px}.sitehead.v3 .hbar .w{height:var(--hd)}}
@media (max-width:1320px){.sitehead.v3 .hbar .w{padding:0 24px;gap:20px}.sitehead .hrow2,.sitehead .hrow2 .gnav3 .gg{gap:18px}.sitehead .hrow2 .gnav3 .gg+.gg{margin-left:18px}.sitehead .hrow2 .gnav3{font-size:13.5px}.sitehead.v3 .logo img{height:34px}.sitehead .htel3{display:none}}
@media (max-width:1180px){.sitehead .hrow2,.sitehead .hrow2 .gnav3 .gg{gap:14px}.sitehead .hrow2 .gnav3 .gg+.gg{margin-left:14px}.sitehead .hrow2 .gnav3{font-size:13px}.sitehead .hinfo small{display:none}.sitehead.v3 .logo img{height:30px}}
@media (max-width:1100px){.sitehead .hcol{display:none}}
@media (max-width:640px){.sitehead.v3 .hbar .w{padding:0 16px}}

/* ---------- 予約メニュー（Figma 182:781：ヘッダー／TOPのFV／スマホの予約シート共通） ---------- */
.rm{display:none;flex-direction:column;gap:8px}
.sitehead .ddm.rm,.t4-hero-rsv .ddm.rm{min-width:0;width:340px;padding:14px;background:var(--c-mist2);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.sitehead .dd.rsv .ddm.rm{right:0;left:auto;top:calc(100% + 10px)}
.sitehead .dd.rsv .ddm.rm::before,.t4-hero-rsv .ddm.rm::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.t4-hero-rsv .ddm.rm{top:calc(100% + 10px)}
.t4-hero-rsv[data-up="true"] .ddm.rm{top:auto;bottom:calc(100% + 10px)}
.t4-hero-rsv[data-up="true"] .ddm.rm::before{top:auto;bottom:-12px}
.sitehead .dd[data-open="true"]>.ddm.rm,.sitehead .dd:focus-within>.ddm.rm,.t4-hero-rsv[data-open="true"]>.ddm.rm{display:flex}
@media (hover:hover){.sitehead .dd:hover>.ddm.rm,.t4-hero-rsv[data-hover="true"]>.ddm.rm{display:flex}.t4-hero-rsv[data-hover="true"] .chev{transform:rotate(180deg)}}
.rs-card.rm{display:flex;background:var(--c-mist2);padding:18px 14px calc(18px + env(safe-area-inset-bottom))}
.rs-card.rm .rs-x{top:10px;right:8px;width:44px;height:44px}
.rs-card.rm .rm-h{padding:10px 56px 14px 2px;font-size:13px}
.rm .rm-h{margin:0;font-size:12px;line-height:1.7;color:var(--c-ink2);font-family:var(--f-b);font-weight:400}
.rm .rm-c{display:flex;flex-direction:column;background:#fff;border:1.2px solid var(--c-teal-d);border-radius:14px;overflow:hidden;transition:background .15s}
.sitehead .ddm.rm a,.rm a{border-radius:0;font-size:inherit}
.rm a.rm-i{display:flex!important;align-items:center;gap:12px;padding:12px 16px!important;color:var(--c-teal-d)!important;background:#fff!important;transition:background .15s}
.rm .rmi{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm .rm-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rm .rm-t b{font-family:var(--f-b);font-weight:500;font-size:14.5px;line-height:1.8;color:var(--c-teal-d)}
.rm .rm-t small{display:flex;align-items:center;gap:4px;font-size:11px;line-height:1.7;color:var(--c-ink3)}
.rm .rms{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rm .rma{width:16px;height:16px;flex:none;fill:none;stroke:var(--c-ink3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s,stroke .15s}
.rm a.rm-i:hover .rma{transform:translateX(2px);stroke:var(--c-teal-d)}
.rm a.rm-sub{display:block!important;margin-top:-8px;padding:0 16px 10px 50px!important;font-size:11.5px!important;line-height:1.7;color:var(--c-ink2)!important;text-decoration:underline;text-underline-offset:2px;background:#fff!important}
.rm a.rm-faq{display:block!important;padding:4px 0 0 4px!important;font-size:11.5px!important;line-height:1.7;color:var(--c-ink2)!important;text-decoration:underline;text-underline-offset:2px;background:none!important}
.rm a.rm-sub:hover,.rm a.rm-faq:hover{color:var(--c-teal-d)!important}
.rm .rm-c:has(a.rm-i:hover),.rm .rm-c:has(a.rm-i:hover) a.rm-i,.rm .rm-c:has(a.rm-i:hover) a.rm-sub{background:var(--c-mist)!important}
@media (max-width:640px){.t4-hero-rsv .ddm.rm{width:auto}}

/* ---------- スマホのハンバーガーメニュー（Figma 276:20011） ---------- */
.sitehead nav.mnav{background:var(--c-mist2);padding:20px 20px calc(100px + env(safe-area-inset-bottom));border-top:1px solid var(--c-line)}
.mnav .grp{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.mnav .grp h4{font-family:var(--f-e);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--c-teal);margin:0 0 0 4px}
.mnav .grp a.mi,.mnav .grp .mi-acc{border-radius:14px;background:#fff;border:1.2px solid transparent;overflow:hidden}
.mnav .grp a.mi.bd,.mnav .grp .mi-acc.bd{border-color:var(--c-teal-d)}
.mnav .grp a.mi,.mnav .mi-acc button.mi{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;font-family:var(--f-b);font-weight:500;font-size:14.5px;line-height:1.8;color:var(--c-teal-d);background:#fff;text-align:left}
.mnav .mi-acc button.mi{border:0;cursor:pointer}
.mnav .grp a.mi::after{content:none}
.mnav .mi>span:not(.pm){flex:1;min-width:0}
.mnav .mic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mnav .mar{width:18px;height:18px;flex:none;fill:none;stroke:var(--c-ink3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mnav .mi-acc .pm{position:relative;width:14px;height:14px;flex:none;margin:0}
.mnav .mi-acc .pm::before,.mnav .mi-acc .pm::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;margin:0;border-radius:1px;background:var(--c-ink3);transition:transform .2s}
.mnav .mi-acc .pm::after{transform:rotate(90deg)}
.mnav .mi-acc button[aria-expanded="true"] .pm::after{transform:rotate(0)}
.mnav .mi-acc .maccp{border-top:1px solid var(--c-line);margin:0 16px;padding:4px 0 8px}
.mnav .grp .mi-acc a.sub{display:flex;align-items:center;justify-content:space-between;padding:10px 0 10px 34px;border:0;font-family:var(--f-b);font-weight:400;font-size:14px;color:var(--c-ink)}
.mnav .grp .mi-acc a.sub::after{content:none}
.mnav .grp .mi-acc a.sub span{flex:1;min-width:0}
.mnav a[aria-current="page"]{color:var(--c-teal)!important;font-weight:700!important}
/* メニューを開いている間も下部の固定CTAを表示（メニュー内にCTAは置かない） */
body[data-menu="open"] .fixcta.two{transform:none}

/* ===================== 3. コンポーネント（.c-*） ===================== */
/* ---------- レイアウト ---------- */
.c-w{max-width:1208px;margin:0 auto;padding:0 24px}
.bg-paper{background:var(--c-paper)!important}
.bg-mist{background:var(--c-mist)!important}
.bg-white{background:#fff!important}
.c-center{text-align:center;margin:44px 0 0}

/* ---------- アイコン（SVG） ---------- */
.c-eb svg,.c-btn .ic,.c-links .ic,.c-icc svg,.c-qa .chev,.c-tiles .ic{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 見出し：eyebrow ／ H2 ／ セクション見出し ---------- */
.c-eb{margin:0;font-family:var(--f-e);font-weight:600;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--c-teal)}
.c-eb.o{color:var(--c-helmet-t)}
.c-h2{margin:0;font-family:var(--f-h);font-weight:700;font-size:28px;line-height:1.4;letter-spacing:.01em;color:var(--c-teal-d);text-wrap:balance}
.c-h2.lg{font-size:32px}
.c-h2 em{font-style:normal;color:var(--c-helmet-t)}
.c-sh{display:flex;flex-direction:column;gap:12px;margin:0 0 44px}
.c-sh>p:not(.c-eb){margin:4px 0 0;font-size:14px;line-height:1.8;color:var(--c-ink2);max-width:46em}
.c-sh.c{align-items:center;text-align:center}
.c-sh.row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:40px}
.c-sh.row>div{display:flex;flex-direction:column;gap:12px}

/* ---------- ボタン（Figma Button 90:87：Primary=黄（予約）／dark=緑の塗り／out=緑の枠） ---------- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;font-family:var(--f-h);font-weight:700;font-size:14px;line-height:1;white-space:nowrap;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.c-btn .ic{width:18px;height:18px;flex:none;stroke-width:2;margin:0}
.c-btn.pri{background:var(--c-apr);color:var(--c-ink)}
.c-btn.pri:hover{background:var(--c-apr-h)}
.c-btn.dark{background:var(--c-teal-d);color:#fff}
.c-btn.dark:hover{background:var(--c-teal-h)}
.c-btn.out{border-color:var(--c-teal-d);color:var(--c-teal-d);background:#fff}
.c-btn.out:hover{background:var(--c-mist)}
.c-btn.on-dark{border-color:#fff;color:#fff;background:transparent}
.c-btn.on-dark:hover{background:rgba(255,255,255,.12)}
.c-btn.lg{height:auto;min-height:52px;padding:14px 22px;font-size:15px}
.c-btn.lg .ic{width:20px;height:20px}
.c-btn.pop{box-shadow:0 8px 24px rgba(28,46,51,.18)}
.c-btn .chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.c-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- タグ ---------- */
.c-tag{display:inline-block;font-family:var(--f-b);font-size:11.5px;font-weight:400;line-height:1.7;letter-spacing:0;padding:4px 10px;border-radius:999px;background:var(--c-mist);color:var(--c-teal-d)}
.c-tag.o{background:var(--c-helmet-bg);color:var(--c-helmet)}
.c-tag.g{background:var(--c-pedia-bg);color:var(--c-pedia)}
.c-tag.d{background:var(--c-teal-d);color:#fff;font-weight:700}

/* ---------- 小リンク（›つき） ---------- */
.c-links{display:flex;flex-wrap:wrap;gap:0 20px;margin:0;padding:0;list-style:none}
.c-links a{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.7;color:var(--c-ink)}
.c-links a:hover{color:var(--c-teal-d);text-decoration:underline;text-underline-offset:3px}
.c-links .ic{width:14px;height:14px;stroke-width:2}

/* ---------- アイコンの丸 ---------- */
.c-icc{display:flex;align-items:center;justify-content:center;flex:none;width:72px;height:72px;border-radius:50%;background:var(--c-mist);color:var(--c-teal-d);font-style:normal}
.c-icc svg{width:46%;height:46%;stroke-width:1.8}
.c-icc.o{background:var(--c-helmet-bg);color:var(--c-helmet-t)}
.c-icc.gr{background:var(--c-pedia-bg);color:var(--c-pedia)}
.c-icc.w{background:#fff}
.c-icc.md{width:44px;height:44px}
.c-icc.sm{width:36px;height:36px}

/* ---------- カード（白・枠線・角丸16） ---------- */
.c-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);padding:22px}
.c-card.shadow{box-shadow:var(--shadow-card)}
.c-card.soft{border-color:transparent;background:var(--c-paper)}

/* ---------- 特長カード（アイコン＋見出し＋説明：4列） ---------- */
.c-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.c-pillars>li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);text-align:center}
.c-pillars h3{margin:0;font-family:var(--f-h);font-weight:700;font-size:16px;line-height:1.5;color:var(--c-teal-d)}
.c-pillars p{margin:0;font-size:13px;line-height:1.8;color:var(--c-ink2)}
.c-pillars p b{color:var(--c-teal-d)}

/* ---------- POINTカード（番号つき：選ばれる理由など） ---------- */
.c-points{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:0;padding:0;list-style:none}
.c-points>li{width:calc((100% - 60px)/4);display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px 32px;background:#fff;border-radius:var(--r-card);text-align:center}
.c-points>li>div{display:contents}
.c-points .no{order:-1;font-family:var(--f-e);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--c-helmet-t);line-height:1}
.c-points .c-icc svg{width:42%;height:42%}
.c-points h3{margin:0;font-family:var(--f-h);font-weight:700;font-size:16px;line-height:1.5;letter-spacing:.04em;color:var(--c-teal-d)}
.c-points p{margin:-4px 0 0;font-size:12.5px;line-height:1.7;color:var(--c-ink2)}
.bg-white .c-points>li,.c-points.on-white>li{background:var(--c-paper)}

/* ---------- メディアカード（写真＋本文：診療案内） ---------- */
.c-mcard{display:flex;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden}
.c-mcard+.c-mcard{margin-top:40px}
.c-mcard .ph{width:460px;flex:none;position:relative}
.c-mcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-mcard.g .ph img{object-position:50% 100%}
.c-mcard .bd{flex:1;min-width:0;padding:36px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.c-mcard h3{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--f-h);font-weight:700;font-size:26px;line-height:1.4;color:var(--c-teal-d)}
.c-mcard h3 .ic{width:24px;height:24px;stroke-width:2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.c-mcard.c h3{color:var(--c-helmet)}
.c-mcard.p h3{color:var(--c-pedia)}
.c-mcard .bd>.tx{margin:-4px 0 0;font-size:15.5px;line-height:1.85;color:var(--c-ink2)}
.c-mcard .bd>.tx b{color:var(--c-teal-d)}
.c-mcard .c-links{margin-top:-4px}
.c-mcard .c-acts{margin-top:8px}
.c-mcard.sm{padding:28px}
.c-mcard.sm .ph{width:307px;border-radius:12px;overflow:hidden;min-height:221px}
.c-mcard.sm .bd{padding:0 0 0 28px;gap:14px}

/* ---------- 低身長チェック（入力のみ：結果は /growth/check/） ---------- */
.c-hcheck{width:100%;background:var(--c-mist2);border-radius:var(--r-card);padding:16px 18px;margin-top:8px}
.c-hcheck summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:default}
.c-hcheck summary::-webkit-details-marker{display:none}
.c-hcheck summary>span{display:flex;flex-direction:column;gap:2px;flex:1}
.c-hcheck summary b{font-family:var(--f-h);font-size:14.5px;line-height:1.5;color:var(--c-teal-d)}
.c-hcheck summary small{font-size:12px;line-height:1.7;color:var(--c-ink2)}
.c-hcheck summary>.chev{display:none}
.c-hcheck-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;margin-top:12px;align-items:end}
.c-hcheck-f .f{display:flex;flex-direction:column;gap:5px;min-width:0}
.c-hcheck-f .lb{font-size:11.5px;line-height:1.7;color:var(--c-ink2)}
.c-hcheck-f .seg{display:flex;gap:3px;padding:3px;background:#fff;border:1px solid var(--c-line);border-radius:12px}
.c-hcheck-f .seg label{flex:1;position:relative}
.c-hcheck-f .seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.c-hcheck-f .seg span{display:block;text-align:center;padding:8px 6px;border-radius:9px;font-size:13px;font-weight:500;color:var(--c-ink3)}
.c-hcheck-f .seg input:checked+span{background:var(--c-mist);color:var(--c-teal-d)}
.c-hcheck-f .seg input:focus-visible+span{outline:3px solid var(--c-apr);outline-offset:1px}
.c-hcheck-f .ym{display:flex;gap:6px}
.c-hcheck-f select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;height:46px;padding:0 26px 0 10px;border:1px solid var(--c-line);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8F93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/14px;font:500 13.5px var(--f-b);color:var(--c-ink)}
.c-hcheck-f .hin{display:flex;align-items:stretch;height:46px;background:#fff;border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.c-hcheck-f .hin input{flex:1;min-width:0;border:0;padding:0 4px 0 12px;font:500 13.5px var(--f-b);color:var(--c-ink);background:none;-moz-appearance:textfield}
.c-hcheck-f .hin input::-webkit-inner-spin-button,.c-hcheck-f .hin input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.c-hcheck-f .hin .u{align-self:center;font-size:12px;color:var(--c-ink3);padding-right:6px}
.c-hcheck-f .st{display:flex;flex-direction:column;border-left:1px solid var(--c-line)}
.c-hcheck-f .st button{flex:1;width:30px;border:0;background:var(--c-mist2);color:var(--c-teal-d);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.c-hcheck-f .st button+button{border-top:1px solid var(--c-line)}
.c-hcheck-f .st button:hover{background:var(--c-mist)}
.c-hcheck-f .st .ic{width:13px;height:13px;stroke-width:2.4;fill:none;stroke:currentColor}
.c-hcheck-f>.c-btn{grid-column:1/-1;justify-self:start}

/* ---------- お知らせ・補足ボックス（アイコン丸＋太字＋本文） ---------- */
.c-note{display:flex;align-items:flex-start;gap:14px;background:var(--c-mist2);border-radius:var(--r-card);padding:18px 20px}
.c-note>.c-icc{margin-top:2px}
.c-note b{display:block;font-family:var(--f-h);font-size:15px;line-height:1.5;color:var(--c-teal-d);margin-bottom:4px}
.c-note p{margin:0;font-size:13.5px;line-height:1.8;color:var(--c-ink2)}
.c-note.o{background:var(--c-helmet-bg)}
.c-note.o b{color:var(--c-helmet)}

/* ---------- CoCoBand ボックス ---------- */
.c-coco{display:flex;gap:20px;width:100%;background:var(--c-helmet-bg);border-radius:var(--r-card);padding:18px 20px;margin-top:8px}
.c-coco .im{width:170px;flex:none;border-radius:12px;overflow:hidden}
.c-coco .im img{width:100%;height:100%;object-fit:cover}
.c-coco>div:last-child{display:flex;flex-direction:column;gap:10px;min-width:0}
.c-coco p{margin:0}
.c-coco .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.c-coco .hd b{font-family:var(--f-e);font-size:24px;line-height:1.1;color:var(--c-helmet)}
.c-coco .hd span{background:#fff;color:var(--c-helmet);font-size:11.5px;line-height:1.7;padding:4px 10px;border-radius:999px}
.c-coco .tx{font-size:14px}
.c-coco ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.c-coco li{display:flex;gap:6px;font-size:13px}
.c-coco li .ic{width:16px;height:16px;flex:none;margin-top:4px;color:var(--c-helmet-t);stroke-width:2.4;fill:none;stroke:currentColor}
.c-coco .lk{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--c-helmet)}
.c-coco .lk:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- 写真ギャラリー（大1＋小4） ---------- */
.c-gallery{display:grid;grid-template-columns:572fr 278fr 278fr;gap:16px}
.c-gallery figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.c-gallery figure img{width:100%;aspect-ratio:278/180;object-fit:cover;border-radius:var(--r-card)}
.c-gallery figure.main{grid-row:1/3}
.c-gallery figure.main img{aspect-ratio:auto;height:452px}
.c-gallery figcaption{font-size:13.5px;font-weight:500;color:var(--c-ink)}

/* ---------- 連携医療機関カード（Figma 285:833 案A：証を左に縦長で） ---------- */
.c-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none}
.c-pcards>li{display:flex;align-items:center;gap:20px;padding:16px 20px 16px 16px;border:1px solid var(--c-line);border-radius:var(--r-card);background:#fff}
.c-pcards .ph{width:96px;flex:none;aspect-ratio:96/136}
.c-pcards .ph img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid var(--c-line);border-radius:2px;background:#fff}
.c-pcards .ph.empty{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--c-line);border-radius:4px;background:var(--c-mist2);text-align:center;font-size:10.5px;line-height:1.5;color:var(--c-ink3)}
.c-pcards .ph .slot{margin:0;width:100%;height:100%;aspect-ratio:auto!important}
.c-pcards .ph .slot .slot-in b,.c-pcards .ph .slot .slot-in small{display:none}
.c-pcards .bd{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.c-pcards b{font-family:var(--f-h);font-size:17px;line-height:1.4;color:var(--c-teal-d)}
.c-pcards small{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--c-ink3)}
.c-pcards small .ic{width:14px;height:14px;color:var(--c-teal-d);stroke-width:2;fill:none;stroke:currentColor}
.c-pcards .c-tag{font-size:11px;padding:3px 10px}
/* ---------- タイル（アイコン＋英字ラベル＋見出し＋説明＋「詳しく」） ---------- */
.c-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;padding:0;list-style:none}
.c-tiles a,.c-tiles>li>div{display:flex;flex-direction:column;gap:14px;height:100%;padding:22px;background:var(--c-paper);border-radius:var(--r-card);color:inherit;transition:background .15s}
.c-tiles a:hover{background:var(--c-mist)}
.c-tiles .hd{display:flex;align-items:center;gap:12px}
.c-tiles .hd>span{display:flex;flex-direction:column;gap:4px}
.c-tiles small{font-family:var(--f-e);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink3);line-height:1}
.c-tiles b{font-family:var(--f-h);font-size:16px;color:var(--c-teal-d);line-height:1.4}
.c-tiles p{margin:0;font-size:13px;line-height:1.8;color:var(--c-ink2);flex:1}
.c-tiles .more{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--c-teal)}
.c-tiles .more .ic{width:14px;height:14px;stroke-width:2.2}
.bg-paper .c-tiles a,.bg-paper .c-tiles>li>div{background:#fff}

/* ---------- 記事カード（コラム） ---------- */
.c-acards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none}
.c-acards.three{grid-template-columns:repeat(3,1fr)}
.c-acards a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);overflow:hidden;color:inherit;transition:box-shadow .2s,transform .2s}
.c-acards a:hover{transform:translateY(-2px);box-shadow:0 16px 32px -20px rgba(11,93,102,.4)}
.c-acards .ph{height:160px}
.c-acards .ph img{width:100%;height:100%;object-fit:cover;display:block}
.c-acards .bd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;flex:1}
.c-acards h3{margin:0;font-family:var(--f-h);font-weight:700;font-size:15px;line-height:1.5;color:var(--c-ink);flex:1}
.c-acards time,.c-acards .meta{font-size:12.5px;color:var(--c-ink3)}

/* ---------- よくある質問（アコーディオン） ---------- */
.c-qa{margin:0 0 40px;border-top:0}
.c-qa details{border-bottom:1px solid var(--c-line)}
.c-qa summary{display:flex;align-items:center;gap:14px;padding:18px 6px;list-style:none;cursor:pointer;font-family:var(--f-h);font-weight:700;font-size:15px;line-height:1.6;color:var(--c-teal-d);letter-spacing:.04em}
.c-qa summary::-webkit-details-marker{display:none}
.c-qa summary>b{font-family:var(--f-e);color:var(--c-helmet-t);font-size:16px;flex:none}
.c-qa summary>span{flex:1}
.c-qa .chev{width:18px;height:18px;flex:none;stroke:var(--c-ink3);stroke-width:2;transition:transform .2s}
.c-qa details[open] summary .chev{transform:rotate(180deg)}
.c-qa .a{display:flex;gap:14px;padding:0 6px 20px;font-size:14px;line-height:1.8;color:var(--c-ink2)}
.c-qa .a>b{font-family:var(--f-e);color:var(--c-teal);font-size:16px;line-height:1.6;flex:none}
.c-qa .a>div{flex:1;min-width:0}
.c-qa .a p{margin:0}
.c-qa .a p+p,.c-qa .a p+ul,.c-qa .a ul+p{margin-top:8px}
.c-qa .a a{color:var(--c-teal-d);text-decoration:underline;text-underline-offset:3px}

/* ---------- 診療時間の表 ---------- */
.c-hrs{width:100%;border:1px solid var(--c-line);border-radius:12px;overflow:hidden;background:#fff}
.c-hrs table{width:100%;border-collapse:collapse;font-size:14px;text-align:center}
.c-hrs thead th{background:var(--c-paper);font-weight:400;padding:12px 4px}
.c-hrs tbody th{width:120px;text-align:left;font-weight:400;padding:12px 16px;white-space:nowrap}
.c-hrs td{padding:12px 4px}
.c-hrs i.o,.c-hrs i.p,.c-hrs-note i.o,.c-hrs-note i.p{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c-teal);vertical-align:-1px;font-style:normal}
.c-hrs i.p,.c-hrs-note i.p{background:none;border:1.2px solid var(--c-ink2);border-radius:1px}
.c-hrs i.x{font-style:normal;color:var(--c-ink3)}
.c-hrs-note{margin:0;font-size:12.5px;color:var(--c-ink3)}
.c-hrs-note i{margin:0 3px 0 0}
.c-hrs-note i.o{background:var(--c-ink3)}
.c-hrs-note i.p{border-color:var(--c-ink3)}

/* ---------- 数値（FVの実績表示） ---------- */
.c-stats{display:flex;align-items:stretch;gap:28px;margin:0}
.c-stats>div{display:flex;flex-direction:column;justify-content:center}
.c-stats>div+div{border-left:1px solid var(--c-line);padding-left:28px}
.c-stats dt{font-size:11px;font-weight:700;line-height:16px;letter-spacing:.04em;color:var(--c-teal)}
.c-stats dd{margin:0;font-family:var(--f-h);font-weight:900;font-size:24px;line-height:40px;color:var(--c-teal-d);white-space:nowrap}
.c-stats dd small{font-size:11px;font-weight:700}
.c-stats dd b{font-family:var(--f-e);font-size:30px;font-weight:700}
.c-stats dd b.big{font-size:36px}
.c-stats dd:has(b){font-size:14px}

/* ---------- 動画カード ---------- */
.c-vcard{margin-top:0!important;max-width:366px}

/* ---------- CTA帯（緑） ---------- */
.c-cta{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:var(--c-teal-d);color:#fff;border-radius:var(--r-lg);padding:40px 44px}
.c-cta h3{margin:0;font-family:var(--f-h);font-weight:700;font-size:24px;line-height:1.45;color:#fff}
.c-cta p{margin:6px 0 0;font-size:14px;line-height:1.8;color:rgba(255,255,255,.82)}
.c-cta .btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- タイムライン（Figma P1：時期・年齢の目安。PC=横／スマホ=縦） ----------
   li > .tg（最適期などのタグ。なくても空の .tg を置く）> .lb（時期）> .tr（線と点）> p（説明） */
.c-tag.y{background:var(--c-apr);color:var(--c-ink);font-weight:700}
.c-timeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;margin:0;padding:0;list-style:none}
.c-timeline>li{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0;--tl:var(--c-teal)}
.c-timeline>li.best{--tl:var(--c-apr)}
.c-timeline>li.warn{--tl:var(--c-helmet)}
.c-timeline>li.off{--tl:var(--c-line)}
.c-timeline .tg,.c-timeline .lb,.c-timeline p{padding-left:24px;padding-right:20px}
.c-timeline .tg{min-height:24px;margin-bottom:6px;display:flex;align-items:flex-end}
.c-timeline .tg .c-tag{font-size:11px;padding:2px 9px}
.c-timeline .lb{display:flex;align-items:flex-end;margin-bottom:12px}
.c-timeline .lb b{font-family:var(--f-h);font-weight:700;font-size:24px;line-height:1.2;color:var(--c-teal-d);white-space:nowrap}
.c-timeline .best .lb b{color:var(--c-helmet-t)}
.c-timeline .warn .lb b{color:var(--c-helmet)}
.c-timeline .off .lb b{color:var(--c-ink3)}
.c-timeline .tr{position:relative;display:block;height:16px;font-style:normal}
.c-timeline .tr::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--tl)}
.c-timeline .best .tr::before{height:6px;margin-top:-3px}
.c-timeline .tr::after{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--tl)}
.c-timeline p{margin:14px 0 0;font-size:13.5px;line-height:1.8;color:var(--c-ink2)}
.c-timeline .off p{color:var(--c-ink3)}
.split .c-timeline .lb b{font-size:22px}
.split .c-timeline .tg,.split .c-timeline .lb,.split .c-timeline p{padding-right:12px}
@media (max-width:640px){
  .c-timeline{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
  .c-timeline>li{grid-row:auto;grid-template-rows:auto auto auto;grid-template-columns:16px 1fr;column-gap:14px;padding-bottom:22px;position:relative}
  .c-timeline>li:last-child{padding-bottom:0}
  .c-timeline .tg,.c-timeline .lb,.c-timeline p{grid-column:2;padding:0}
  .c-timeline .tg{grid-row:1;min-height:0;margin-bottom:4px}
  .c-timeline .tg:empty{display:none}
  .c-timeline .lb{grid-row:2;margin-bottom:2px}
  .c-timeline p{grid-row:3;margin:0}
  .c-timeline .tr{grid-column:1;grid-row:1/4;height:auto;position:static}
  .c-timeline .tr::before{left:6.5px;right:auto;top:8px;bottom:0;width:3px;height:auto;margin:0}
  .c-timeline .best .tr::before{left:5.5px;width:5px;height:auto;margin:0}
  .c-timeline>li:last-child .tr::before{display:none}
  .c-timeline .lb b{font-size:19px}
  .c-timeline p{font-size:13px;line-height:1.75}
}

/* ---------- 実績の数字（Figma P4：アイコン丸＋数字） ---------- */
.c-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none}
.c-figs.stack{grid-template-columns:1fr;gap:18px}
.c-figs>li{display:flex;align-items:center;gap:16px;min-width:0}
.c-figs .c-icc{width:64px;height:64px}
.c-figs .c-icc svg{width:44%;height:44%}
.c-figs>li>div{min-width:0}
.c-figs p{margin:0;font-size:13px;line-height:1.7;color:var(--c-ink2)}
.c-figs p.n{display:flex;align-items:baseline;gap:4px;font-family:var(--f-h);font-weight:700;font-size:15px;line-height:1.1;color:var(--c-teal-d);margin-bottom:4px}
.c-figs p.n b{font-family:var(--f-e);font-weight:700;font-size:36px;line-height:1}
@media (max-width:640px){
  .c-figs{grid-template-columns:1fr;gap:14px}
  .c-figs .c-icc{width:52px;height:52px}
  .c-figs p.n b{font-size:30px}
}

/* ---------- コンポーネント：タブレット・スマホ ---------- */
@media (max-width:1180px){
  .c-pcards{grid-template-columns:1fr 1fr}
  .c-gallery{grid-template-columns:1.6fr 1fr 1fr}
  .c-gallery figure.main img{height:auto;flex:1;min-height:0}
  .c-mcard .ph{width:380px}
}
@media (max-width:1000px){
  .c-pillars{grid-template-columns:repeat(2,1fr)}
  .c-points>li{width:calc((100% - 20px)/2)}
  .c-mcard{flex-direction:column}
  .c-mcard .ph{width:100%;height:320px}
  .c-mcard.sm .ph{width:100%;height:240px}
  .c-mcard.sm .bd{padding:24px 0 0}
  .c-acards,.c-acards.three{grid-template-columns:repeat(2,1fr)}
  .c-cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .c-w{padding:0 20px}
  .c-h2,.c-h2.lg{font-size:22px}
  .c-eb{font-size:11px}
  .c-sh{margin-bottom:28px;gap:10px}
  .c-sh>p:not(.c-eb){font-size:13.5px}
  .c-sh.row{margin-bottom:28px}
  .c-center{margin-top:28px}
  .c-btn{width:100%;height:48px}
  .c-acts{flex-direction:column;width:100%;gap:10px}
  .c-pillars{gap:10px}
  .c-pillars>li{padding:20px 10px;gap:8px}
  .c-pillars .c-icc{width:52px;height:52px}
  .c-pillars h3{font-size:13.5px}
  .c-pillars p{font-size:11.5px;line-height:1.7}
  .c-points{gap:12px}
  .c-points>li{width:100%;flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:18px 16px}
  .c-points .c-icc{width:48px;height:48px;order:-1}
  .c-points>li>div{display:flex;flex-direction:column;gap:4px}
  .c-points .no{font-size:11px}
  .c-points h3{font-size:15px}
  .c-points p{margin-top:0}
  .c-mcard+.c-mcard{margin-top:20px}
  .c-mcard .ph,.c-mcard.sm .ph{height:200px;border-radius:0}
  .c-mcard.g .ph{height:250px}
  .c-mcard.g .ph img{object-position:50% 52%}
  .c-mcard.sm{padding:0}
  .c-mcard .bd,.c-mcard.sm .bd{padding:20px 18px 24px;gap:12px}
  .c-mcard h3{font-size:21px}
  .c-mcard .bd>.tx{font-size:14px}
  .c-links{gap:2px 18px}
  .c-links a{font-size:12px}
  .c-hcheck{padding:14px}
  .c-hcheck summary{cursor:pointer}
  .c-hcheck summary>.chev{display:block;width:18px;height:18px;flex:none;color:var(--c-teal-d);fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s}
  .c-hcheck[open] summary>.chev{transform:rotate(180deg)}
  .c-hcheck summary b{font-size:13.5px}
  .c-hcheck summary small{font-size:11px}
  .c-hcheck-f{grid-template-columns:1fr 1fr}
  .c-hcheck-f .f:first-child{grid-column:1/-1}
  .c-coco{flex-direction:column;padding:14px;gap:12px}
  .c-coco .im{width:auto;aspect-ratio:16/9}
  .c-coco .hd b{font-size:21px}
  .c-coco .tx{font-size:13.5px}
  .c-note{padding:16px;gap:12px}
  .c-pcards{grid-template-columns:1fr;gap:12px}
  .c-pcards .ph{width:72px}
  .c-pcards b{font-size:15.5px}
  .c-gallery{grid-template-columns:1fr 1fr;gap:12px}
  .c-gallery figure.main{grid-column:1/-1;grid-row:auto}
  .c-gallery figure.main img{aspect-ratio:16/10;height:auto}
  .c-gallery figure img{border-radius:12px}
  .c-gallery figcaption{font-size:12.5px}
  .c-tiles{grid-template-columns:1fr;gap:12px}
  .c-tiles a,.c-tiles>li>div{padding:18px}
  .c-acards,.c-acards.three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;gap:12px;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .c-acards::-webkit-scrollbar{display:none}
  .c-acards>li,.c-acards>a{flex:0 0 72%;scroll-snap-align:start}
  .c-acards .ph{height:140px}
  .c-qa summary{font-size:14px;padding:16px 2px;gap:10px;align-items:flex-start}
  .c-qa .chev{margin-top:3px}
  .c-qa{margin-bottom:28px}
  .c-hrs table{font-size:12.5px}
  .c-hrs tbody th{padding:10px 8px;width:auto}
  .c-cta{padding:26px 22px;border-radius:18px}
  .c-cta h3{font-size:19px}
  .c-stats{gap:0;justify-content:space-between}
  .c-stats>div{flex:1;align-items:center;text-align:center}
  .c-stats>div+div{padding-left:0}
  .c-stats dt{font-size:10px;letter-spacing:0}
  .c-stats dd{font-size:20px;line-height:36px}
  .c-stats dd b{font-size:24px}.c-stats dd b.big{font-size:28px}
  .c-stats dd:has(b){font-size:13px}
}

/* ========================= 4. ページ：TOP（.t4-*） ========================= */
.t4{background:#fff;color:var(--c-ink);font-family:var(--f-b);font-size:15px;line-height:1.8}
.t4 *{box-sizing:border-box}
.t4 img{display:block;max-width:100%}
.t4 h1,.t4 h2,.t4 h3{margin:0}
.t4 p{margin:0}
.t4 ul,.t4 ol{list-style:none;margin:0;padding:0}
.t4 b{font-weight:700}
.t4 section{padding:88px 0}
.t4 .sp{display:none}
/* お知らせ */
.t4 .t4-notice{padding:16px 0;background:var(--c-mist)}
.t4-notice .c-w{display:flex;align-items:center;gap:16px}
.t4-notice .n1{display:flex;align-items:center;gap:16px;flex:1;min-width:0;font-size:14px}
.t4-notice em{font-style:normal;flex:none;background:var(--c-teal-d);color:#fff;font-size:11.5px;line-height:1.7;padding:4px 10px;border-radius:999px}
.t4-notice time{flex:none;color:var(--c-ink3)}
.t4-notice .n1 span{text-decoration:underline;text-underline-offset:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t4-notice .n1:hover span{color:var(--c-teal-d)}
.t4-notice .more{flex:none;font-size:14px;color:var(--c-teal-d)}
/* お知らせの欄（最新 3 件。見た目は /news/ の一覧に合わせる） */
.t4 .t4-news{padding:72px 0}
.t4-news .c-sh.row{margin-bottom:24px}
.t4-news-list{display:flex;flex-direction:column;border-top:1px solid var(--c-line)}
.t4-news-list a{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--c-line);font-size:15px}
.t4-news-list time{font-family:var(--f-e);font-size:13px;color:var(--c-ink3);font-variant-numeric:tabular-nums}
.t4-news-list .cat{font-size:11.5px;line-height:1.7;padding:4px 10px;border-radius:999px;background:var(--c-mist);color:var(--c-teal-d);white-space:nowrap}
.t4-news-list .cat.news-imp{background:var(--c-helmet-bg);color:var(--c-helmet)}
.t4-news-list a:hover .tt{color:var(--c-teal-d);text-decoration:underline;text-underline-offset:4px}
/* ヒーロー */
.t4 .t4-hero{position:relative;padding:0 0 56px;background:linear-gradient(180deg,transparent 0,transparent 642px,var(--c-paper) 642px)}
.t4-hero-ph{position:absolute;left:0;right:0;top:0;height:700px;overflow:hidden;background:#FFFCF7}
.t4-hero-ph img{position:absolute;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:75% 4%}
.t4-hero-ph::after{content:"";position:absolute;left:0;top:0;bottom:0;width:68%;background:linear-gradient(90deg,rgba(255,252,247,.97) 0%,rgba(255,252,247,.88) 60%,rgba(255,252,247,0) 100%)}
.t4-hero-in{position:relative;height:700px;padding-top:96px}
.t4-hero-txt{width:560px;max-width:100%;display:flex;flex-direction:column;gap:16px}
.t4-hero h1{font-family:var(--f-h);font-weight:900;font-size:40px;line-height:1.32;letter-spacing:.01em;color:var(--c-teal-d)}
.t4-hero .lead{font-size:16px;line-height:1.9}
.t4-hero-rsv{position:relative;align-self:flex-start;margin-top:12px}
.t4-hero-rsv .ddm{display:none;position:absolute;left:0;z-index:30}
.t4-hero-rsv[data-open="true"] .chev{transform:rotate(180deg)}
.t4-hero .c-stats{margin-top:28px}
.t4-entry{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-58px}
.t4-entry .ent{display:flex;align-items:center;gap:16px;padding:18px 20px 18px 18px;background:#fff;border:1.5px solid var(--c-teal-d);border-radius:var(--r-card);box-shadow:0 5px 0 var(--c-teal-d);color:var(--c-teal-d);transition:transform .15s,box-shadow .15s}
.t4-entry .ent:hover{transform:translateY(2px);box-shadow:0 3px 0 currentColor}
.t4-entry .ent.c{border-color:var(--c-helmet);box-shadow:0 5px 0 var(--c-helmet);color:var(--c-helmet)}
.t4-entry .ent.p{border-color:var(--c-pedia);box-shadow:0 5px 0 var(--c-pedia);color:var(--c-pedia)}
.t4-entry .ent:hover.c,.t4-entry .ent:hover.p{box-shadow:0 3px 0 currentColor}
.t4-entry img{width:54px;height:54px;border-radius:8px;object-fit:cover;flex:none}
.t4-entry .ent>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.t4-entry b{display:flex;align-items:center;gap:6px;font-size:17px;line-height:24px}
.t4-entry b .ic{width:16px;height:16px;stroke-width:2.2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.t4-entry small{font-size:13px;line-height:20px;color:var(--c-ink2)}
.t4-entry i.sp svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
/* 専門性 */
.t4 .t4-spec{padding:80px 0}
.t4-spec-top{display:flex;align-items:center;gap:44px;margin-bottom:64px}
.t4-spec-top .im{flex:1;height:313px;border-radius:var(--r-lg);overflow:hidden}
.t4-spec-top .im img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.t4-spec-top .tx{flex:1;display:flex;flex-direction:column;gap:20px}
.t4-spec-top .tx p:not(.c-eb){font-size:15.5px;line-height:1.85;color:var(--c-ink2)}
.t4-spec-top .tx p b{color:var(--c-teal-d)}
/* 院長 */
.t4-doc .c-w{display:flex;align-items:center;gap:56px}
.t4-doc .tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.t4-doc .nm{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.t4-doc .nm b{font-family:var(--f-h);font-size:22px;line-height:1.45;white-space:pre}
.t4-doc .nm span{font-family:var(--f-e);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--c-ink3)}
.t4-doc .creds{display:flex;flex-wrap:wrap;gap:8px}
.t4-doc .socs{display:flex;gap:12px;width:100%;padding:10px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);font-size:13px;line-height:22px}
.t4-doc .socs b{color:var(--c-teal-d);flex:none}
.t4-doc .socs span{color:var(--c-ink2)}
.t4-doc .msg{display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.85;color:var(--c-ink2)}
.t4-doc .ph{width:420px;height:540px;flex:none;border-radius:32px;overflow:hidden}
.t4-doc .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* 研究活動 */
.t4-res .c-w{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:72px;align-items:center}
.t4-res .tx{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.t4-res .tx p:not(.c-eb){font-size:15.5px;line-height:1.85;color:var(--c-ink2)}
/* アクセス */
.t4-acc .c-w{display:grid;grid-template-columns:minmax(0,592px) minmax(0,1fr);gap:48px;align-items:stretch}
.t4-acc .tx{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.t4-acc .c-hrs{margin-top:4px}
.t4-acc .ad{font-size:14px;line-height:1.8}
.t4-acc .map{border-radius:var(--r-lg);overflow:hidden;background:var(--c-mist);min-height:380px}
.t4-acc .map iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:1180px){.t4-doc .ph{width:340px;height:460px}}
@media (max-width:1000px){
  .t4 section{padding:72px 0}
  .t4-hero-ph::after{width:100%}
  .t4-res .c-w,.t4-acc .c-w{grid-template-columns:1fr;gap:40px}
  .t4-doc .c-w{flex-direction:column-reverse;align-items:stretch;gap:32px}
  .t4-doc .ph{width:100%;height:420px}
}
@media (max-width:640px){
  .t4{font-size:14.5px}
  .t4 .pc{display:none}
  .t4 .sp{display:revert}
  .t4 section{padding:56px 0}
  .t4 .t4-notice{padding:10px 0}
  .t4-notice .n1{gap:10px;font-size:13px}
  .t4-notice em{font-size:11px;padding:2px 8px}
  .t4-notice time{display:none}
  .t4-notice .n1 span{text-decoration:none}
  .t4-notice .more{font-size:0}
  .t4-notice .more::after{content:"→";font-size:15px}
  .t4 .t4-news{padding:48px 0}
  .t4-news-list a{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"time cat" "tt tt";gap:6px 12px;padding:14px 2px;font-size:14px}
  .t4-news-list time{grid-area:time}.t4-news-list .cat{grid-area:cat;justify-self:start}.t4-news-list .tt{grid-area:tt}
  .t4 .t4-hero{padding:0 0 8px;background:var(--c-paper)}
  .t4-hero-ph{position:relative;height:260px}
  .t4-hero-ph img{object-position:70% 4%}
  .t4-hero-ph::after{width:auto;left:0;right:0;top:auto;height:90px;background:linear-gradient(180deg,rgba(247,250,250,0),var(--c-paper))}
  .t4-hero-in{height:auto;padding-top:0;margin-top:-6px}
  .t4-hero-txt{width:auto;gap:14px}
  .t4-hero h1{font-size:24px;line-height:1.45}
  .t4-hero .lead{font-size:14px;line-height:1.85}
  .t4-hero-rsv{align-self:stretch;margin-top:4px}
  .t4-hero-rsv .ddb{width:100%;justify-content:center}
  .t4-hero-rsv .ddm{left:0;right:0}
  .t4-hero .c-stats{margin-top:14px}
  .t4-entry{margin-top:24px;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .t4-entry .ent{flex-direction:column;justify-content:center;gap:10px;padding:14px 4px 12px;text-align:center;border-radius:14px}
  .t4-entry img{display:none}
  .t4-entry i.sp{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--c-mist);color:var(--c-teal-d)}
  .t4-entry .c i.sp{background:var(--c-helmet-bg);color:var(--c-helmet-t)}
  .t4-entry .p i.sp{background:var(--c-pedia-bg);color:var(--c-pedia)}
  .t4-entry i.sp svg{width:20px;height:20px;stroke-width:2}
  .t4-entry b{font-size:12.5px;line-height:1.3;gap:2px;justify-content:center}
  .t4-entry b .ic{width:13px;height:13px}
  .t4-entry small{display:none}
  .t4 .t4-spec{padding:48px 0 56px}
  .t4-spec-top{flex-direction:column-reverse;gap:24px;align-items:stretch;margin-bottom:24px}
  .t4-spec-top .im{flex:none;height:auto;aspect-ratio:16/10}
  .t4-spec-top .tx{gap:14px}
  .t4-spec-top .tx p:not(.c-eb){font-size:14px}
  .t4-doc .c-w{gap:24px}
  .t4-doc .ph{height:auto;aspect-ratio:1/0.75;border-radius:var(--r-lg)}
  .t4-doc .nm b{font-size:19px}
  .t4-doc .socs{flex-direction:column;gap:2px}
  .t4-doc .msg{font-size:14px}
  .t4-res .tx .c-btn{order:3}
  .t4-acc .map{min-height:260px}
}

/* ================= 5. 下層ページへの適用（既存クラス → コンポーネントの見た目） ================= */
.sub{--teal-deep:var(--c-teal-d);--teal:var(--c-teal);--ink:var(--c-ink);--ink-2:var(--c-ink2);--ink-3:var(--c-ink3);--line:var(--c-line);--mist:var(--c-mist);--mist-2:var(--c-mist2);--paper:var(--c-paper);--r:16px;--r-s:16px}
.sub .wrap,.sub .w{max-width:1208px}
.sub section{padding:88px 0}
/* ページ見出し（FVの見出しと同じ書体・色） */
.sub .pagehead{background:linear-gradient(180deg,#fff 0,var(--c-paper) 100%);padding:40px 0 56px}
.sub .pagehead .c-eb{margin-top:4px}
.sub .pagehead h1{font-family:var(--f-h);font-weight:900;font-size:clamp(28px,3vw,40px);line-height:1.32;letter-spacing:.01em;color:var(--c-teal-d);margin-top:14px!important}
.sub .pagehead h1 small{font-family:var(--f-b);font-weight:500!important;font-size:15px!important;color:var(--c-ink2)!important;margin-top:8px!important}
.sub .pagehead .lead{margin-top:16px;font-size:16px;line-height:1.9;color:var(--c-ink)}
.sub .pagehead .ph-vis .im{border-radius:var(--r-lg);box-shadow:none}
.sub .pagehead .ph-vis .badge{border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:0 12px 28px -18px rgba(11,93,102,.45)}
.sub .pagehead .hero.ctas{margin-top:28px!important}
.sub .crumb{font-size:12px;color:var(--c-ink3)}
/* ページ内ナビ */
.sub .subnav{background:rgba(255,255,255,.94);border-bottom:1px solid var(--c-line)}
.sub .subnav a{font-size:13.5px;color:var(--c-ink2)}
.sub .subnav a.on{color:var(--c-teal-d);border-color:var(--c-teal);font-weight:700}
/* セクション見出し（.sec-h → .c-sh） */
.sub .sec-h.c-sh h2.c-h2{margin-top:0}
.sub .sec-h.c-sh .lead{font-size:14.5px;color:var(--c-ink2);margin-top:4px}
/* カード類（.cause / .policy / .tx / .theme / .step → .c-card） */
.sub .cause,.sub .policy>div,.sub .tx,.sub .theme,.sub .doc-card,.sub .staff-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.sub .cause h4,.sub .tx h3,.sub .theme h4,.sub .policy b{font-family:var(--f-h);font-weight:700;color:var(--c-teal-d)}
.sub .cause h4{font-size:16px;line-height:1.5}
.sub .cause p,.sub .policy p{font-size:13px;line-height:1.8;color:var(--c-ink2)}
.sub .tx .badge,.sub .theme .st{font-family:var(--f-b);font-weight:400;font-size:11.5px;line-height:1.7;letter-spacing:0;padding:4px 10px;border-radius:999px}
.sub .tx.own .badge,.sub .theme .st.plan{background:var(--c-helmet-bg);color:var(--c-helmet)}
/* ステップ（STEP 01 は POINT と同じ書体・色） */
.sub .step{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);padding:22px 18px}
.sub .step::before{font-family:var(--f-e);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--c-helmet-t)}
.sub .step h4{font-family:var(--f-h);font-size:15.5px;line-height:1.5;color:var(--c-teal-d);margin:10px 0 6px}
.sub .step p{font-size:12.5px;line-height:1.75}
/* 補足ボックス（.callout → .c-note） */
.sub .callout.c-note{padding:20px 24px}
.sub .callout.c-note .ic{width:44px;height:44px;border-radius:50%;background:#fff}
.sub .callout.c-note .ic svg{stroke:var(--c-teal-d)}
/* CTA帯 */
.sub .cta-band.c-cta{border-radius:var(--r-lg)}
.sub .cta-band.c-cta h3{font-family:var(--f-h);font-size:24px}
/* ボタン（JSで生成される低身長チェックの結果ボタンも含む） */
.sub .c-btn{border-width:1.5px}
.sub .chk .res .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:999px;font-family:var(--f-h);font-weight:700;font-size:14px}
/* タグ（コラムのカテゴリ） */
.sub .cat{display:inline-block;font-family:var(--f-b);font-size:11.5px!important;font-weight:400!important;line-height:1.7;padding:4px 10px!important;border-radius:999px!important}
/* 料金表 */
.sub .price-tbl{border-radius:12px;border-color:var(--c-line)}
.sub .price-tbl th{font-family:var(--f-b);font-size:12.5px;letter-spacing:0;color:var(--c-ink2);background:var(--c-paper);font-weight:500}
.sub .price-tbl td:last-child{font-family:var(--f-e);font-weight:700;color:var(--c-teal-d)}
/* 記事カード（.col-card → .c-acards の見た目） */
.sub .col-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);transition:box-shadow .2s,transform .2s}
.sub .col-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px -20px rgba(11,93,102,.4)}
.sub .col-card .b{padding:18px}
.sub .col-card h4{font-family:var(--f-h);font-size:15px;line-height:1.5;color:var(--c-ink);margin-top:8px}
.sub .col-card .meta{font-family:var(--f-b);font-size:12.5px}
.sub .cfilter a{font-family:var(--f-b);font-weight:500}
/* 医師紹介の資格チップ（.creds → .c-tag） */
.sub .creds span{font-size:11.5px;line-height:1.7;padding:4px 10px;border-radius:999px;background:var(--c-mist);color:var(--c-teal-d)}
/* 関連リンク */
.sub .related a{border-radius:12px}
.sub .related a::before{content:none}
.sub .related a::after{content:"›";margin-left:auto;color:var(--c-ink3);font-size:18px;font-weight:400}
@media (max-width:640px){
  .sub section{padding:56px 0}
  .sub .pagehead{padding:24px 0 40px}
  .sub .pagehead .lead{font-size:14.5px}
  .sub .cta-band.c-cta h3{font-size:19px}
}
/* 見出し内の eyebrow は、旧スタイル（.pB .sec-h p など）より優先 */
.c-sh p.c-eb,.c-sh>div>p.c-eb,.pagehead p.c-eb,.chk p.c-eb{margin:0;font-family:var(--f-e);font-weight:600;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--c-teal)}
.c-sh p.c-eb.o{color:var(--c-helmet-t)}
@media (max-width:640px){.c-sh p.c-eb,.pagehead p.c-eb,.chk p.c-eb{font-size:11px}}
/* 低身長チェック（下層ページの判定ウィジェット）を TOP の入力部品に合わせる */
.chk .seg{padding:3px;gap:3px;border-radius:12px}
.chk .seg button{border-radius:9px;font-weight:500;font-size:13.5px;color:var(--c-ink3);opacity:1}
.chk .seg button[aria-pressed="true"]{background:var(--c-mist)!important;color:var(--c-teal-d)!important}
.chk select,.chk input.h{border-radius:12px}
.chk .go button{background:var(--c-teal-d)!important;color:#fff!important;font-family:var(--f-h);font-size:14px}
.chk .go button:hover{background:var(--c-teal-h)!important}
.chk .res .btn.pri{background:var(--c-apr)!important;color:var(--c-ink)!important}
.chk .res .btn.line{background:#fff!important;color:var(--c-teal-d)!important;border:1.5px solid var(--c-teal-d)!important}
.acc-faq .faqc .c-qa{max-width:none}
/* 下層ページの見出しサイズを TOP と揃える（旧 .sub .sec-h h2 より優先） */
.sub .c-sh h2.c-h2{font-size:28px;line-height:1.4}
@media (max-width:640px){.sub .c-sh h2.c-h2{font-size:22px}}
/* あたまのかたち「治療できる時期」：写真を細くしてタイムラインの幅を確保（見出しとタグを1行に収める） */
@media (min-width:901px){.sub .split.tl-wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px}}
/* あたまのかたち「治療できる時期」（写真なし）：見出し＋本文の下に、タイムラインを全幅で大きく */
.sub .wrap.prose.tl-full{max-width:1208px}
.tl-full .tl-intro>p{margin:20px 0 0;max-width:48em;font-size:14.5px;line-height:1.8}
.tl-full .c-timeline{margin-top:48px}
@media (min-width:901px){
  .tl-full .c-timeline{margin-top:64px}
  .tl-full .c-timeline .lb b{font-size:30px}
  .tl-full .c-timeline .tg .c-tag{font-size:12.5px;padding:3px 11px}
  .tl-full .c-timeline .tr{height:20px}
  .tl-full .c-timeline .tr::after{width:20px;height:20px}
  .tl-full .c-timeline .best .tr::before{height:8px;margin-top:-4px}
  .tl-full .c-timeline p{font-size:15px;margin-top:18px}
}

/* ---------- ステッパー（Figma F1：流れ・手順。丸＝ミント、番号＝メイン緑） ----------
   ol.c-stepper > li > span.no（番号）＋ div.bd（p.st「STEP 01」・h4・p）。.v で縦並び（幅が狭い所・6ステップ以上） */
.c-stepper{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.c-stepper[hidden]{display:none}
.c-stepper>li{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0}
.c-stepper>li::before{content:"";position:absolute;left:48px;right:0;top:23px;height:2px;background:var(--c-line)}
.c-stepper>li:last-child::before{display:none}
.c-stepper .no{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--c-mist);color:var(--c-teal-d);font-family:var(--f-e);font-weight:700;font-size:17px;line-height:1;flex:none}
.c-stepper .bd{padding-right:28px;min-width:0}
.c-stepper .st{margin:0 0 8px;font-family:var(--f-e);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--c-helmet-t)}
.c-stepper h4{margin:0 0 8px;font-family:var(--f-h);font-weight:700;font-size:17px;line-height:1.5;color:var(--c-teal-d)}
.c-stepper .bd p:not(.st){margin:0;font-size:13px;line-height:1.8;color:var(--c-ink2)}
.c-stepper .bd p+p:not(.st){margin-top:6px}
.c-stepper.v{grid-auto-flow:row;grid-template-columns:1fr}
.c-stepper.v>li{display:grid;grid-template-columns:48px 1fr;column-gap:18px;padding-bottom:26px}
.c-stepper.v>li:last-child{padding-bottom:0}
.c-stepper.v>li::before{left:23px;right:auto;top:48px;bottom:0;width:2px;height:auto}
.c-stepper.v .bd{padding:4px 0 0}
.c-stepper.v .st{margin-bottom:4px}
@media (max-width:900px){.c-stepper:not(.v){grid-auto-flow:row;grid-template-columns:1fr}.c-stepper:not(.v)>li{display:grid;grid-template-columns:48px 1fr;column-gap:18px;padding-bottom:26px}.c-stepper:not(.v)>li:last-child{padding-bottom:0}.c-stepper:not(.v)>li::before{left:23px;right:auto;top:48px;bottom:0;width:2px;height:auto}.c-stepper:not(.v) .bd{padding:4px 0 0}}
@media (max-width:640px){
  .c-stepper>li,.c-stepper.v>li{grid-template-columns:36px 1fr!important;column-gap:14px!important;padding-bottom:22px}
  .c-stepper>li::before,.c-stepper.v>li::before{left:17px!important;top:36px!important}
  .c-stepper .no{width:36px;height:36px;font-size:13px}
  .c-stepper .bd{padding-top:2px!important}
  .c-stepper h4{font-size:16px;margin-bottom:4px}
}
/* STEP の文字をなくしたので、縦並びは見出しを丸の中心に揃える */
.c-stepper.v .bd{padding-top:11px}
@media (max-width:900px){.c-stepper:not(.v) .bd{padding-top:11px}}
@media (max-width:640px){.c-stepper .bd,.c-stepper.v .bd{padding-top:6px!important}}
/* ステッパーの番号：オレンジ（丸は薄いオレンジ） */
.c-stepper .no{background:var(--c-helmet-bg);color:var(--c-helmet-t)}

/* ---------- CTA帯（10/8 改訂：濃い緑をやめ、ミントの面＋白抜きなし） ----------
   .has-ph で右に写真。下層ページの途中に置くときは section.cta-sec で包む */
.c-cta,.sub .cta-band.c-cta{background:linear-gradient(120deg,var(--c-mist) 0%,var(--c-mist2) 100%);color:var(--c-ink);border-radius:var(--r-lg);padding:40px 44px;gap:28px}
.c-cta h3,.sub .cta-band.c-cta h3{color:var(--c-teal-d);font-size:24px}
.c-cta p,.sub .cta-band.c-cta p{color:var(--c-ink2);opacity:1}
.c-cta .c-eb{margin-bottom:10px}
.c-cta .btns{margin-top:0}
.c-cta.has-ph{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch;padding:0;overflow:hidden;gap:0}
.c-cta.has-ph .ctx{padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.c-cta.has-ph .btns{margin-top:24px}
.c-cta.has-ph .ph{position:relative;min-height:240px}
.c-cta.has-ph .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.sub section.cta-sec{padding:0 0 88px;background:var(--c-paper)}
@media (max-width:900px){.c-cta.has-ph{grid-template-columns:1fr}.c-cta.has-ph .ph{min-height:200px;order:-1}}
@media (max-width:640px){.c-cta.has-ph .ctx{padding:26px 22px}.c-cta.has-ph .ph{min-height:180px}.sub section.cta-sec{padding:0 0 56px}}
.c-cta p.c-eb{color:var(--c-teal);font-size:12px;line-height:1;margin:0 0 12px}
.c-cta,.sub .cta-band.c-cta{background:var(--c-mist)}
.sub section.cta-sec{background:#fff;padding:72px 0 0}@media (max-width:640px){.sub section.cta-sec{padding:48px 0 0}}
/* CTA帯は背景を画面の左右いっぱいまで伸ばす（中身の幅はそのまま） */
.c-cta,.sub .cta-band.c-cta{border-radius:0;box-shadow:0 0 0 100vmax var(--c-mist);clip-path:inset(0 -100vmax);padding:56px 0}
.c-cta.has-ph{padding:56px 0;gap:56px;overflow:visible}
.c-cta.has-ph .ctx{padding:0}
.c-cta.has-ph .ph{border-radius:var(--r-lg);overflow:hidden;min-height:260px}
.sub section.cta-sec{padding:0;background:var(--c-mist)}
@media (max-width:900px){.c-cta.has-ph{gap:24px}}
@media (max-width:640px){.c-cta,.sub .cta-band.c-cta,.c-cta.has-ph{padding:40px 0}.c-cta.has-ph .ctx{padding:0}.sub section.cta-sec{padding:0}}
/* よくある質問：下層ページの旧スタイル（.sub .qa …）を打ち消して TOP と同じ見た目に */
.sub .qa.c-qa{border-top:0}
.sub .qa.c-qa summary{padding:18px 6px;align-items:center;gap:14px;font-size:15px;line-height:1.6}
.sub .qa.c-qa details .a p{padding:0;font-size:14px;line-height:1.8}
.sub .qa.c-qa details .a{padding:0 6px 20px}
@media (max-width:640px){.sub .qa.c-qa summary{font-size:14px;padding:16px 2px;gap:10px;align-items:flex-start}.sub .qa.c-qa details .a{padding:0 2px 18px}}

/* ---------- 写真＋キャプション（キャプションは写真の下。TOP「院内・設備」と同じ） ---------- */
.c-photo{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.c-photo .im{overflow:hidden;border-radius:var(--r-card);background:var(--c-mist)}
.c-photo .im img{display:block;width:100%;height:100%;object-fit:cover}
.c-photo figcaption{font-size:13.5px;font-weight:500;line-height:1.6;color:var(--c-ink)}
.c-photo.doc-photo .im{border-radius:var(--r-lg)}
@media (max-width:640px){.c-photo .im{border-radius:12px}.c-photo figcaption{font-size:12.5px}}

/* ---------- 影のルール（10/8）：クリックできないものに影は付けない ----------
   本文内の要素は影なし。リンク・ボタン・フォーム部品・ポップアップ（予約メニュー）だけ影を使える。
   .c-cta の box-shadow は背景を左右に伸ばすためのもの（影ではない）なので除外 */
main :where(*):not(a,button,input,select,textarea,summary,label,.ddm,.c-cta,.cta-band){box-shadow:none!important}

/* 一般小児外来「費用」：自費項目の料金表（2列） */
.fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-top:28px;align-items:start}
.fee-col{display:flex;flex-direction:column;gap:28px}
.fee-blk h3{margin:0 0 12px;font-family:var(--f-h);font-weight:700;font-size:17px;line-height:1.5;color:var(--c-teal-d)}
.fee-blk .price-tbl{margin:0}
.fee-note{margin:10px 0 0;font-size:12.5px;line-height:1.75;color:var(--c-ink3)}
.fee-note a{color:var(--c-teal-d);text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){.fee-grid{grid-template-columns:1fr}}

/* ---------- 低身長チェック（下層ページ：入力＋その場で結果） ----------
   入力部品は TOP 診療案内の .c-hcheck と同じ。結果は Figma 127:14860（ゲージ）。押す前は結果欄を出さない */
.c-hcheck-lg{padding:28px 32px;margin-top:0;border-radius:var(--r-lg)}
.c-hcheck .hc-hd{display:flex;align-items:center;gap:12px}
.c-hcheck .hc-hd>span{display:flex;flex-direction:column;gap:2px}
.c-hcheck .hc-hd b{font-family:var(--f-h);font-size:16px;line-height:1.5;color:var(--c-teal-d)}
.c-hcheck .hc-hd small{font-size:12.5px;line-height:1.7;color:var(--c-ink2)}
.c-hcheck-lg .c-hcheck-f{margin-top:20px}
.c-hres{margin-top:24px}
.c-hres[hidden]{display:none}
.hres-err{margin:0;font-size:13.5px;color:var(--c-helmet)}
.hres-card{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:40px;align-items:center;background:#fff;border:1px solid var(--c-line);border-radius:24px;padding:32px 36px}
.hres-pos{display:flex;flex-direction:column;gap:8px}
.hres-pos p{margin:0}
.hres-pos .lb{font-size:12.5px;line-height:1.7;color:var(--c-ink3)}
.hres-pos .sd{display:flex;align-items:baseline;gap:6px;color:var(--c-teal-d)}
.hres-pos .sd b{font-family:var(--f-e);font-weight:700;font-size:52px;line-height:1.1}
.hres-pos .sd span{font-family:var(--f-h);font-weight:700;font-size:16px}
.hres-card.ins .hres-pos .sd{color:var(--c-pedia)}
.hres-pos .cm{font-size:14px;line-height:1.8;color:var(--c-ink2)}
.hres-gauge{min-width:0}
.hres-gauge .trk{position:relative;height:56px}
.hres-gauge .trk i{position:absolute;display:block;font-style:normal}
.hres-gauge .s1,.hres-gauge .s2,.hres-gauge .s3{top:21px;height:14px}
.hres-gauge .s1{left:0;width:25%;background:var(--c-pedia-bg);border-radius:7px 0 0 7px}
.hres-gauge .s2{left:25%;width:50%;background:var(--c-mist)}
.hres-gauge .s3{left:75%;width:25%;background:var(--c-mist2);border-radius:0 7px 7px 0}
.hres-gauge .t2,.hres-gauge .t0{top:15px;width:2px;height:26px;margin-left:-1px}
.hres-gauge .t2{left:25%;background:var(--c-pedia)}
.hres-gauge .t0{left:50%;background:var(--c-ink3)}
.hres-gauge .pin{top:16px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--c-apr);border:3px solid #fff;box-sizing:border-box}
.hres-card.ins .hres-gauge .pin{background:var(--c-pedia)}
.hres-gauge .lbls{position:relative;height:20px;margin-top:2px}
.hres-gauge .lbls span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;line-height:1.7;color:var(--c-ink3)}
.hres-gauge .lbls span:first-child{transform:none}
.hres-gauge .lbls span.g{color:var(--c-pedia)}
.hres-gauge .msg{margin:12px 0 0;font-size:14px;line-height:1.8;color:var(--c-ink)}
.hres-gauge .msg b{color:var(--c-pedia)}
.hres-acts{display:flex;flex-direction:column;gap:10px}
.hres-fine{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--c-ink3)}
@media (max-width:1100px){.hres-card{grid-template-columns:200px minmax(0,1fr);}.hres-acts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}}
@media (max-width:640px){
  .c-hcheck-lg{padding:18px 16px}
  .c-hcheck .hc-hd b{font-size:14.5px}
  .c-hcheck .hc-hd small{font-size:11.5px}
  .hres-card{grid-template-columns:1fr;gap:18px;padding:22px 18px;border-radius:18px}
  .hres-pos .sd b{font-size:44px}
  .hres-gauge .lbls span{font-size:10.5px}
  .hres-gauge .lbls span.g{font-size:10px}
  .hres-acts{flex-direction:column}
}
@media (max-width:640px){.hres-gauge .lbls span:first-child{display:none}}

/* 下層ページの低身長チェック（PC）：左に説明、右に入力（性別・生年月・身長・ボタンを縦並び） */
@media (min-width:901px){
  .c-hcheck-lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px;align-items:start;padding:36px 40px}
  .c-hcheck-lg .hc-hd{flex-direction:column;align-items:flex-start;gap:14px;padding-top:4px}
  .c-hcheck-lg .hc-hd .c-icc{width:48px;height:48px}
  .c-hcheck-lg .hc-hd b{font-size:20px}
  .c-hcheck-lg .hc-hd small{font-size:14px;line-height:1.8}
  .c-hcheck-lg .c-hcheck-f{grid-template-columns:1fr;gap:16px;margin-top:0}
  .c-hcheck-lg .c-hcheck-f .f:first-child{grid-column:auto}
  .c-hcheck-lg .c-hcheck-f>.c-btn{justify-self:stretch;margin-top:4px}
  .c-hcheck-lg .c-hres{grid-column:1/-1;margin-top:28px}
}
/* 入力欄のフォーカス：オレンジの太い枠（ブラウザ標準）ではなく、欄の枠を緑にする */
.c-hcheck-f select:focus,.c-hcheck-f .hin input:focus{outline:none}
.c-hcheck-f select:focus-visible{border-color:var(--c-teal);outline:2px solid var(--c-teal);outline-offset:-2px}
.c-hcheck-f .hin:focus-within{border-color:var(--c-teal);outline:2px solid var(--c-teal);outline-offset:-2px}
.c-hcheck-f .st button:focus-visible{outline:2px solid var(--c-teal);outline-offset:-2px;border-radius:0}
/* 結果のラベル（保険の対象になりうるか） */
.hres-tag{display:inline-block;align-self:flex-start;margin:0 0 6px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.5}
.hres-tag.ins{background:var(--c-pedia-bg);color:var(--c-pedia)}
.hres-tag.own{background:var(--c-mist);color:var(--c-ink2)}
.hres-card .hres-tag{grid-column:1/-1;justify-self:start;margin:0 0 -16px}@media (max-width:640px){.hres-card .hres-tag{margin:0 0 -6px;font-size:12.5px}}
/* 補足ボックスのアイコン：共通アイコン（.c-icc）に統一 */
.sub .callout .c-icc{width:44px;height:44px;margin-top:0}
.sub .callout .c-icc svg{width:22px;height:22px;stroke:var(--c-teal-d);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* 医師紹介：院長カードは箱にせず、TOPの院長セクションと同じ並び */
.sub .doc-card{background:none!important;border:0!important;border-radius:0;padding:0;grid-template-columns:360px 1fr;gap:56px}
.sub .doc-card .c-photo .im,.sub .doc-card .photo{border-radius:32px;overflow:hidden}
.sub .doc-card .role{font-family:var(--f-e);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--c-teal);margin:0}
.sub .doc-card>div:last-child>h3{font-family:var(--f-h);font-size:28px;line-height:1.4;margin:12px 0 16px}
.sub .doc-card .creds{margin-bottom:14px}
.sub .doc-card .socs{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);font-size:13px;line-height:22px;color:var(--c-ink2);margin:0 0 28px}
.sub .doc-card .socs b{color:var(--c-teal-d);flex:none;margin:0}
.sub .doc-card .prose h3{margin:0 0 10px}
.sub .doc-card .timeline{margin-top:32px}
@media (max-width:900px){.sub .doc-card{grid-template-columns:1fr;gap:28px}.sub .doc-card .photo{max-width:360px}}
@media (max-width:640px){.sub .doc-card .socs{flex-direction:column;gap:2px}.sub .doc-card>div:last-child>h3{font-size:22px}}
/* 医師の経歴タイムライン：点の周りの薄い色をなくす */
.sub .career.timeline dt::before{box-shadow:none}
/* アクセス「受診の流れ」：タブの下に余白 */
#flow .flow-tabs{margin-bottom:36px}
#flow .c-note{margin-top:36px!important}
@media (max-width:640px){#flow .flow-tabs{display:flex;flex-wrap:wrap;width:100%}}
.sub .pagehead .wrap:not(:has(.ph-vis)){grid-template-columns:minmax(0,1fr)}.sub .pagehead .wrap:not(:has(.ph-vis)) .ph-txt{max-width:820px}
/* 2カラムのセクションは上揃え */
.sub .split{align-items:start!important}
/* 「成長する強さ × 成長する期間 = 最終身長」は1行で */
.sub .formula .box{white-space:nowrap}
/* パンくずと見出しの間隔 */
.sub .pagehead .crumb{margin-bottom:28px}
/* 身長治療外来「低身長とは」：補足ボックスは本文の下に */
.sub .about-wrap .prose{max-width:820px}
.sub .about-wrap .c-note{margin-top:32px}
@media (max-width:640px){.sub .pagehead .crumb{margin-bottom:20px}.sub .formula .box{white-space:normal}}
/* コラム記事のリード文：箱・左の線をやめ、本文より少し大きい文字＋下に区切り線 */
.sub .art-lead{background:none;border:0;border-radius:0;padding:0 0 28px;margin:0 0 32px;border-bottom:1px solid var(--c-line);font-family:var(--f-h);font-weight:700;font-size:18px;line-height:1.9;color:var(--c-teal-d)}
@media (max-width:640px){.sub .art-lead{padding:0 0 22px;margin-bottom:24px;font-size:16px}}
/* 下層ページの低身長チェック：背景を1段濃く */
.c-hcheck-lg{background:var(--c-mist)}
/* ページ内ナビで移動したとき、見出しの上に余白（ヘッダー＋ページ内ナビ＋40px） */
.sub [id]{scroll-margin-top:calc(var(--hd) + 56px + 40px)}
@media (max-width:1100px){.sub [id]{scroll-margin-top:calc(var(--hd) + 48px + 28px)}}
.sub .article p.art-lead{font-size:18px;color:var(--c-teal-d);line-height:1.9}@media (max-width:640px){.sub .article p.art-lead{font-size:16px}}
.sub .art-lead{border-bottom:0;padding-bottom:0}
/* スマホ：計算式は1行（入りきらない幅では「＝」のあとで改行） */
@media (max-width:640px){
  .sub .formula{gap:6px;font-size:13.5px;flex-wrap:wrap}
  .sub .formula .box{white-space:nowrap;padding:8px 10px;border-width:1.5px;border-radius:10px}
  .sub .formula .op{font-size:16px}
}
/* スマホ：アイコン付きの補足ボックスは縦並び（アイコンが上、文字が下） */
@media (max-width:640px){
  .c-note,.sub .callout.c-note{flex-direction:column;align-items:flex-start;gap:12px;padding:18px}
  .sub .callout.c-note .c-icc{margin:0}
}

/* ---------- 短い項目のリスト（.policy）：白い箱をやめ、チェック印＋細い区切り線 ---------- */
.sub .policy{gap:0 40px}
.sub .policy>div{background:none!important;border:0!important;border-radius:0!important;padding:20px 0 22px!important;border-top:1px solid var(--c-line)!important}
.sub .policy b{position:relative;display:block;padding-left:30px;font-family:var(--f-h);font-size:16px;line-height:1.5;color:var(--c-teal-d);margin-bottom:6px}
.sub .policy b::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--c-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5D66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") no-repeat center/13px}
.sub .policy p{padding-left:30px;font-size:13.5px;line-height:1.8;color:var(--c-ink2)}
.sub .policy[style*="grid-template-columns:1fr"]>div:first-child{border-top:0!important;padding-top:4px!important}
@media (max-width:640px){.sub .policy>div{padding:16px 0 18px!important}.sub .policy b{font-size:15px}}
/* 補足ボックス（素材枠つき）：スマホは縦並び */
@media (max-width:640px){.sub .callout.with-slot.c-note{display:flex}.sub .callout.with-slot .slot.sq{width:100%;margin:6px 0 0;aspect-ratio:16/7}}
@media (max-width:640px){.sub .callout.with-slot .slot.sq{aspect-ratio:16/7!important;height:auto}}
/* チェックリスト（.policy）：上の区切り線なし。背景が色付きのセクションでは丸を白、白いセクションではミント */
.sub .policy>div{border-top:0!important;padding:12px 0 16px!important}
.sub .policy b::before{background-color:#fff}
.sub section[style*="--white"] .policy b::before{background-color:var(--c-mist)}
/* コラム一覧の絞り込み */
.sub .cfilter button{font:500 13px var(--f-b);padding:8px 16px;border-radius:999px;border:1px solid var(--c-line);background:#fff;color:var(--c-ink2);cursor:pointer}
.sub .cfilter button:hover{border-color:var(--c-teal);color:var(--c-teal-d)}
.sub .cfilter button.on{background:var(--c-teal-d);border-color:var(--c-teal-d);color:#fff}
.sub .cf-count{margin:-16px 0 16px;font-size:12.5px;color:var(--c-ink3)}
.sub .col-card[hidden]{display:none}
/* チェックリストの丸：塗り（メイン緑）＋白いチェック（背景色に関係なく同じ） */
.sub .policy b::before,.sub section[style*="--white"] .policy b::before{background:var(--c-teal-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") no-repeat center/13px}
/* タイムライン（スマホ）：ラベル（最適期など）は時期の右に横並び */
@media (max-width:640px){
  .c-timeline>li{grid-template-columns:16px auto 1fr;grid-template-rows:auto auto}
  .c-timeline .lb{grid-column:2;grid-row:1;margin:0}
  .c-timeline .tg{grid-column:3;grid-row:1;margin:0 0 0 8px;align-self:center;min-height:0}
  .c-timeline .tg:empty{display:block}
  .c-timeline p{grid-column:2/4;grid-row:2;margin-top:2px}
  .c-timeline .tr{grid-row:1/3}
}
@media (max-width:640px){
  .c-timeline>li{column-gap:0}
  .c-timeline .lb,.c-timeline p,.split .c-timeline .lb,.split .c-timeline p,.split .c-timeline .tg{padding:0!important}
  .c-timeline .lb,.c-timeline p{margin-left:14px}
  .c-timeline .tg{margin-left:6px}
  .split .c-timeline .lb b{font-size:19px}
}
/* スマホ：料金表は横スクロールさせず、項目の下に料金を右寄せで表示 */
@media (max-width:640px){
  .sub .tbl-scroll{overflow:visible}
  .sub .tbl-scroll table.price-tbl,.sub table.price-tbl{min-width:0!important;width:100%;table-layout:auto}
  .sub .price-tbl thead th:last-child{display:none}
  .sub .price-tbl tr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;border-bottom:1px solid var(--c-line)}
  .sub .price-tbl tbody tr:last-child{border-bottom:0}
  .sub .price-tbl th,.sub .price-tbl td{display:block;border-bottom:0!important;padding:12px 14px}
  .sub .price-tbl thead th{width:100%}
  .sub .price-tbl td:first-child{flex:1 1 100%;padding-bottom:0;font-size:14px;line-height:1.7}
  .sub .price-tbl td:last-child{flex:1 1 100%;padding-top:4px;white-space:normal!important;text-align:right;font-size:14px}
}
/* アクセス「受診の流れ」のタブ（3つ） */
.sub .flow-tabs.flow3 small{font-size:inherit;font-weight:inherit}
.sub .flow-tabs.flow3 small::before{content:"（"}
.sub .flow-tabs.flow3 small::after{content:"）"}
@media (max-width:640px){
  #flow .flow-tabs.flow3{display:grid!important;grid-template-columns:repeat(3,1fr);width:100%;border-radius:16px;padding:4px;gap:2px}
  #flow .flow-tabs.flow3 button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 4px;border-radius:12px;font-size:12.5px;line-height:1.35;text-align:center}
  #flow .flow-tabs.flow3 small{font-size:10.5px;font-weight:500;color:var(--c-ink3)}
  #flow .flow-tabs.flow3 small::before,#flow .flow-tabs.flow3 small::after{content:none}
}
/* CTA帯の写真：横長・引き */
.c-cta.has-ph{grid-template-columns:minmax(0,1fr) 440px}
.c-cta.has-ph .ph{min-height:0;aspect-ratio:3/2;align-self:center}
@media (max-width:900px){.c-cta.has-ph{grid-template-columns:1fr}.c-cta.has-ph .ph{aspect-ratio:16/9;min-height:0}}
@media (max-width:640px){.c-cta.has-ph .ph{aspect-ratio:16/10;min-height:0}}
/* スマホ：タブ（受診の流れ・よくある質問など）を同じ見た目に統一。3つ＝3列、4つ＝2列×2段 */
@media (max-width:640px){
  .sub .flow-tabs,#flow .flow-tabs.flow3,.sub .acc-faq .flow-tabs.faq-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px;padding:4px;border-radius:16px;background:var(--c-mist)}
  .sub .flow-tabs:has(>button:nth-child(4)),.sub .acc-faq .flow-tabs.faq-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sub .flow-tabs button,#flow .flow-tabs.flow3 button,.sub .acc-faq .faq-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;width:auto;padding:8px 6px;border-radius:12px;font-family:var(--f-h);font-weight:700;font-size:12.5px;line-height:1.35;text-align:center;color:var(--c-ink2);box-shadow:none}
  .sub .flow-tabs button[aria-pressed="true"]{background:#fff;color:var(--c-teal-d)}
  .sub .flow-tabs small{font-size:10.5px;font-weight:500;color:var(--c-ink3)}
}
@media (max-width:640px){.sub .flow-tabs button{word-break:keep-all;overflow-wrap:anywhere}}
/* TOP 診療案内・身長治療外来の写真（スマホ）：引きの横長写真 */
@media (max-width:640px){.c-mcard.g .ph{height:auto;aspect-ratio:16/10.5}.c-mcard.g .ph img{object-position:50% 50%}}
/* コラム一覧：カテゴリの絞り込みは、一覧を見ている間は上に固定 */
.sub .cfilter{position:sticky;top:var(--hd);z-index:20;margin:0 -24px 24px;padding:14px 24px;background:rgba(247,250,250,.95);backdrop-filter:blur(6px)}
@media (max-width:640px){.sub .cfilter{margin:0 -20px 20px;padding:10px 20px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sub .cfilter::-webkit-scrollbar{display:none}.sub .cfilter button{flex:none}}
.sub .cf-count{margin:0 0 16px}

/* 連携医療機関が2院のとき：PCは2列で中央寄せ */
.c-pcards.n2{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
@media (max-width:640px){.c-pcards.n2{grid-template-columns:1fr}}
.price-tbl .tbl-note{display:block;margin-top:4px;font-size:12px;line-height:1.6;color:var(--c-ink3);font-weight:400}

/* コラム一覧「もっと見る」 */
.col-more{display:flex;justify-content:center;margin-top:32px}
.col-more[hidden]{display:none}
/* 院長ブログ：タイトルにホバーで下線 */
.sub .blog-list a:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
/* CTA帯：ボタンは縦並び（PCでも） */
.sub .cta-band.c-cta .btns{flex-direction:column;align-items:stretch}
.sub .cta-band.c-cta .btns .c-btn{justify-content:center}
/* CTA帯の予約メニュー（ヘッダーの「WEB・LINE予約」と同じ） */
.c-cta .c-rsv{margin-top:0;align-self:center}
.c-cta .c-rsv .ddm{left:auto;right:0}
@media (max-width:1000px){.c-cta .c-rsv{align-self:stretch}.c-cta .c-rsv .ddb{width:100%;justify-content:center}.c-cta .c-rsv .ddm{left:0;right:0;width:auto}}
/* 予約メニューを持つCTA帯：clip-path だとメニューが切れるので、背景の横伸ばしを疑似要素で行う */
.c-cta:has(.c-rsv),.sub .cta-band.c-cta:has(.c-rsv){clip-path:none;box-shadow:none!important;position:relative;isolation:isolate;z-index:5}
.c-cta:has(.c-rsv)::before,.sub .cta-band.c-cta:has(.c-rsv)::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--c-mist);z-index:-1}
/* 背景の横伸ばしでページが横に広がらないように（上下は切らない） */
main.sub>section:has(.cta-band .c-rsv){overflow-x:clip}
/* ページ最後のCTA帯はフッターに直結（下に地の色の余白を残さない） */
main.sub>section:last-child:has(.cta-band){padding-bottom:0}
/* CTA帯：予約メニューの下に「よくある質問」ボタン（同じ幅で縦並び） */
.c-cta .btns:has(.c-rsv){align-self:center}
.c-cta .btns:has(.c-rsv)>.c-rsv{align-self:stretch}
.c-cta .btns:has(.c-rsv) .c-rsv .ddb,.c-cta .btns:has(.c-rsv)>.c-btn{width:100%;justify-content:center}
/* 予約メニューの各項目は縮めない（狭い所でつぶれないように） */
.ddm.rm .rm-c,.ddm.rm .rm-faq,.ddm.rm .rm-h{flex-shrink:0}
/* CTA帯の予約メニューを開いている間は、固定ヘッダー・ページ内ナビより手前に出す */
.c-cta:has(.c-rsv[data-open="true"]),.sub .cta-band.c-cta:has(.c-rsv[data-open="true"]){z-index:100}
@media (hover:hover){.c-cta:has(.c-rsv[data-hover="true"]),.sub .cta-band.c-cta:has(.c-rsv[data-hover="true"]){z-index:100}}
.c-cta .c-rsv .ddm.rm{max-height:none;overflow:visible}
/* CTA帯の見出し：文節の途中で折り返さない */
.c-cta h3,.sub .cta-band.c-cta h3{text-wrap:wrap}
.c-cta h3 .nw{display:inline-block}
/* スマホ：見出しの balance をやめる（iOS Safari で日本語見出しが半分の幅で折り返されるため）
   見出しには BudouX で文節ごとに <wbr> を入れてあるので、keep-all で文節の区切りでだけ改行する
   （新しく見出しを追加するときも、文節の区切りに <wbr> を入れる） */
@media (max-width:767px){
  h1,h2,h3,h4,.c-h2,.mock h1,.mock h2,.mock h3,.mock h4,.sub h2,.sub h3,.sub h4{text-wrap:wrap!important;word-break:keep-all;overflow-wrap:anywhere}
}
/* フッター：各ページへのリンクはホバーで下線 */
.sitefoot ul a:hover,.sitefoot .legal a:hover{text-decoration:underline;text-underline-offset:3px}
/* ヘッダー：ナビの3グループ（診療案内／クリニックについて／English）を縦線で区切る */
.sitehead .hrow2{--ng:26px}
.sitehead .hrow2 .gnav3 .gg+.gg::before,.sitehead .hrow2 .gnav3::after{content:"";flex:none;width:1px;height:14px;background:var(--c-ink3);opacity:.35}
.sitehead .hrow2 .gnav3::after{margin-left:var(--ng)}
@media (max-width:1320px){.sitehead .hrow2{--ng:18px}}
@media (max-width:1180px){.sitehead .hrow2{--ng:14px}}
/* ハンバーガー：開いたとき真ん中の線を確実に消す（iOS Safari で×の左右に線の端が点のように残るため） */
.sitehead .hmenu[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);visibility:hidden}
/* TOP：共同研究の公募（研究活動の下に続く控えめな枠） */
.t4 .t4-collab{padding-top:0}
.t4-collab-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:36px 40px;border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-paper)}
.t4-collab .tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.t4-collab .c-h2{font-size:24px;line-height:1.5}
.t4-collab .tx>p:not(.c-eb){margin:0;font-size:14.5px;line-height:1.85;color:var(--c-ink2)}
.t4-collab .side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.t4-collab .who{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.t4-collab .who li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.t4-collab .who p{margin:0;font-size:13.5px;line-height:1.75;color:var(--c-ink2)}
@media (max-width:1000px){.t4-collab-box{grid-template-columns:1fr;gap:24px;padding:28px}}
@media (max-width:640px){
  .t4-collab-box{padding:24px 20px}
  .t4-collab .c-h2{font-size:20px}
  .t4-collab .side,.t4-collab .side .c-btn{width:100%}
}
/* 身長治療外来：製剤カード内の「注射のやり方」（製薬会社の公式動画・ガイドへのリンク） */
/* 3枚のカードで「注射のやり方」の位置をそろえる（各カード＝写真・頻度・名前・説明・特徴・リンクの6行） */
.sub .cause-grid.gh3{grid-template-rows:repeat(6,auto)}
.sub .gh3 .cause{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
.sub .gh3 .cause .pts{margin-bottom:18px}
.c-howto-lk{align-self:start;padding-top:16px;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:8px}
.c-howto-lk .hl{margin:0 0 2px;font-family:var(--f-h);font-weight:700;font-size:13px;line-height:1.5;color:var(--c-ink)}
.c-howto-lk .hl small{margin-left:6px;font-family:var(--f-b);font-weight:400;font-size:11.5px;color:var(--c-ink3)}
.c-howto-lk .lk{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--c-line);border-radius:12px;color:var(--c-ink);text-decoration:none;transition:background .15s,border-color .15s}
.c-howto-lk .lk:hover{background:var(--c-mist2);border-color:var(--c-teal)}
.c-howto-lk .lk>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sub .c-howto-lk .lk b{font-size:13.5px;line-height:1.5;color:var(--c-ink)}
.sub .c-howto-lk .lk small{font-size:11px;line-height:1.5;color:var(--c-ink3)}
.c-howto-lk .c-icc.sm{width:32px;height:32px}
.c-howto-lk .c-icc svg{width:18px;height:18px;stroke-width:1.8}
.c-howto-lk .ex{width:14px;height:14px;flex:none;fill:none;stroke:var(--c-ink3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sub .c-howto-note{margin-top:14px;font-size:12px;line-height:1.8;color:var(--c-ink3)}
/* 素材差し替え：CoCoBand ロゴ（H-07）・製剤写真（G-01） */
.sub .brand-strip .brand-logo{margin:0;width:74px;flex:none}
.sub .brand-strip .brand-logo img{display:block;width:100%;height:auto}
.sub .med-img.ph{overflow:hidden;background:#fff;border:1px solid var(--line)}
.sub .med-img.ph img{display:block;width:100%;height:100%;object-fit:cover}
.sub .callout .slot.ph-img{border:1px solid var(--line);background:#CDCCCD}
.sub .callout .slot.ph-img img{display:block;width:100%;height:100%;object-fit:cover}
.sub .callout.with-slot.photo-l{grid-template-columns:auto 1fr;gap:0 18px}
.sub .callout.photo-l .slot.sq{margin:0}
@media (max-width:640px){.sub .callout.with-slot.photo-l.c-note{display:grid;grid-template-columns:1fr}.sub .callout.photo-l .slot.sq{margin:0 0 12px}}
.slot.filled{border:0;background:none}
.slot.filled img{display:block;width:100%;height:100%;object-fit:cover}
.slot-row.top{align-items:start}
.slot-row .c-photo figcaption{margin:0;font-size:13.5px;color:var(--c-ink)}
@media (max-width:640px){.slot-row .c-photo figcaption{font-size:12.5px}}
.slot.filled.framed{background:#fff;padding:20px;border-radius:16px;box-shadow:0 0 0 1px var(--c-line)}
.slot.filled.framed img{height:auto;border-radius:0}
/* 研究テーマ（抜粋）— R-01 */
.c-theme-ex{background:var(--white,#fff);border:1px solid var(--c-line);border-radius:var(--r-card);padding:20px 22px}
.acad .c-theme-ex{border:0;padding:0;background:none}
.c-theme-ex .hd{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--c-ink2)}
.c-theme-ex ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--c-ink2)}
.c-theme-ex li{padding-left:16px;position:relative}
.c-theme-ex li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--teal,#00909F)}
.c-theme-ex .lk{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--teal-deep,#0E5A5B);text-decoration:underline;text-underline-offset:3px}
.c-theme-ex .lk .ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 3Dスキャン評価：左にステップ（縦）、右に縦長写真2枚（あたまのかたち外来） */
.c-scanb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.c-scanb .figs{display:grid;grid-template-columns:repeat(2,268px);gap:16px}
.c-scanb .pic{margin:0}
.c-scanb .ph{aspect-ratio:724/1024;border-radius:var(--r-card);overflow:hidden}
.c-scanb .ph img{display:block;width:100%;height:100%;object-fit:cover}
.c-scanb .ph.rep{display:flex;align-items:center;justify-content:center;padding:16px;background:var(--c-mist)}
.c-scanb .ph.rep img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:4px;box-shadow:0 2px 6px rgba(28,46,51,.14)}
.c-scanb figcaption{margin-top:10px;font-size:13px;line-height:1.6;color:var(--c-ink2);word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:1100px){.c-scanb .figs{grid-template-columns:repeat(2,220px)}}
@media (max-width:900px){.c-scanb{grid-template-columns:1fr;gap:28px}.c-scanb .figs{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:640px){.c-scanb .ph.rep{padding:10px}.c-scanb figcaption{font-size:12.5px}}
.sub .prose>h2.c-h2{font-size:28px;line-height:1.4;margin-bottom:16px;word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:640px){.sub .prose>h2.c-h2{font-size:22px}}
/* 横長1枚写真（素材が1点だけの写真行） */
.c-photo-wide .im{aspect-ratio:21/8}
.c-photo-wide .im img{object-position:50% 68%}
@media (max-width:640px){.c-photo-wide .im{aspect-ratio:16/9}}

/* ---------- 症例（あたまのかたち：治療前後の3Dスキャン重ね合わせ。肌色＝治療前／青＝治療後） ---------- */
.c-case-key{display:flex;gap:18px;margin:18px 0 0;font-size:13px;color:var(--c-ink2)}
.c-case-key span{display:inline-flex;align-items:center;gap:6px}
.c-case-key .k{display:inline-block;width:14px;height:14px;border-radius:50%}
.c-case-key .k.pre{background:#F1C7B6}
.c-case-key .k.post{background:rgba(110,160,170,.55);box-shadow:inset 0 0 0 1.5px #6EA0AA}
.c-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}
.c-case{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);padding:24px}
.c-case .hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c-case .no{font-family:var(--f-h);font-weight:700;font-size:13px;color:#fff;background:var(--c-teal-d);border-radius:999px;padding:3px 12px}
.c-case .hd p{margin:0;font-weight:700;font-size:15px;color:var(--c-ink)}
.c-case .figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.c-case figure{margin:0}
.c-case .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.c-case .ph img{display:block;width:100%;height:100%;object-fit:contain}
.c-case figcaption{margin-top:6px;text-align:center;font-size:12px;color:var(--c-ink3)}
.c-case .vals{display:grid;gap:12px;margin-top:20px}
.c-case .mt{display:grid;grid-template-columns:96px minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.c-case .mt p{margin:0}
.c-case .lb b{display:block;font-weight:700;font-size:15px;line-height:1.3;color:var(--c-ink)}
.c-case .lb small{display:block;font-size:11.5px;color:var(--c-ink3)}
.c-case .bx{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-radius:10px;white-space:nowrap}
.c-case .bx.pre{background:var(--c-paper)}
.c-case .bx.post{background:var(--c-mist)}
.c-case .bx .cap{font-weight:700;font-size:11.5px;color:var(--c-ink3)}
.c-case .bx.post .cap{color:var(--c-teal-d)}
.c-case .bx .v{font-family:var(--f-e);font-weight:500;font-size:20px;line-height:1.2;color:var(--c-ink2)}
.c-case .bx.post .v{font-weight:700;font-size:26px;color:var(--c-teal-d)}
.c-case .bx small{font-size:12px;color:var(--c-ink3)}
.c-case .bx.post small{color:var(--c-teal-d)}
.c-case .mt .ar{display:flex;color:var(--c-ink3)}
@media (max-width:900px){.c-cases{grid-template-columns:1fr}}
@media (max-width:640px){.c-case{padding:18px}.c-case .mt{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:6px}.c-case .lb{grid-column:1/-1;display:flex;align-items:baseline;gap:6px}.c-case .lb b,.c-case .lb small{display:inline}.c-case .bx{padding:8px 12px;gap:6px}.c-case .bx .v{font-size:18px}.c-case .bx.post .v{font-size:22px}}