/* #DESIGN_FROM: https://skyclinics.al/ */
/* #DESIGN_FROM_CHATGPT: 出典=元サイト実測 https://skyclinics.al/ （工程0実査=site_db\raw\skyclinics_kotei0\JISSA_REPORT.md・国内向け転換表=hp-web-jigyo\skyclinics_kokunai_tenkan_設計_2026-08-27.md §2の配色・構図踏襲方針に基づく実装。配色5色は実査値をそのまま採用し、意匠の新規創作はしていない） */
/* 是正第2弾（2026-08-27）: 第三者監査audit3rd+ペルソナ戦略の是正。コントラスト是正はAA(4.5:1)未達だった
   アクセントテキスト(明地/#003934地)・muted文字にのみ新変数を充てる。写真・動きの暗パネル上のアクセント
   （実測5.59等ですでにAA達成）は既存 --accent のまま変更しない。 */
:root{
  --paper:#E8E7E5;   /* 地色 クリーム */
  --ink:#003934;     /* 本文・見出し下地 深緑 */
  --accent:#1A9E8F;  /* CTA ティール（暗背景上のテキスト・面色はこのまま） */
  --accent-text:#0B5F52; /* クリーム地などの明地テキスト用ティール（対crema比6.1:1・AA達成） */
  --accent-ondark:#4FC3B0; /* #003934地（sub-hero等の暗緑背景）のテキスト用ティール（対ink比5.97:1・AA達成。
     明地用--accent-textは暗地だと逆に沈んで1.7:1にしかならないため別変数で分離） */
  --heading:#0A0A0A; /* 大見出し 黒 */
  --muted:#5A5A5A;   /* 本文グレー（旧#888888はクリーム地でAA未達のため是正） */
  --header:64px;
  --progress:0;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--paper);overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.9 "Noto Sans JP",sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
button,input,textarea{font:inherit;color:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,dl,dd{margin:0}
.eyebrow{font-size:11px;line-height:1.4;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 10px}
.label-en{font-weight:700;letter-spacing:.02em}
.section-pad{padding:96px max(5vw,24px);position:relative}
.wrap{max-width:1180px;margin:0 auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ===== スキップリンク（キーボード操作の入口） ===== */
.skip-link{position:absolute;left:12px;top:-60px;z-index:999;background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}

/* ===== ヘッダー（tel:常設・医療必須7項目3） ===== */
.site-header{position:fixed;z-index:200;top:0;left:0;width:100%;height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:rgba(232,231,229,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,57,52,.12)}
.brand{display:flex;flex-direction:column;line-height:1;min-height:44px;justify-content:center}
.brand b{font-size:17px;letter-spacing:.06em;color:var(--heading)}
.brand small{font-size:9px;letter-spacing:.2em;color:var(--muted);margin-top:4px}
.site-header nav{display:flex;align-items:center;gap:24px;font-size:13px;letter-spacing:.04em}
.site-header nav a{color:var(--ink);transition:color .2s;display:inline-flex;align-items:center;min-height:44px}
.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--accent-text)}
.nav-yoyaku{font-weight:700;color:var(--accent-text)!important}
.header-tel{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);border:1px solid var(--accent);border-radius:999px;padding:8px 16px;font-size:13px;min-height:44px}
.header-tel i{width:14px;height:14px;flex:0 0 auto;background:var(--accent);mask:radial-gradient(circle at 30% 30%,transparent 2px,#000 2.5px);border-radius:3px}
.menu-toggle{display:none;flex-direction:column;gap:4px;padding:6px;width:44px;height:44px;align-items:center;justify-content:center}
.menu-toggle span{width:20px;height:2px;background:var(--heading)}
@media(max-width:860px){
  .site-header nav{position:fixed;top:var(--header);left:0;width:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid rgba(0,57,52,.12);max-height:0;overflow:hidden;transition:max-height .25s ease}
  .site-header nav.open{max-height:420px}
  .site-header nav a{padding:16px 6vw;width:100%;border-top:1px solid rgba(0,57,52,.08);min-height:44px}
  .menu-toggle{display:flex}
}

/* ===== 全体の縦の物語＝pinned canvas（1枚のsticky内で0〜1の進行を1本化） =====
   C節#1是正(2026-08-28 v3): 旧6900px(PC)/5600px(SP)は10パネル+200フレームに対して
   総距離が短すぎ、ホイール1回で次の次のパネルまで飛ぶ過敏挙動の実測原因だった。
   PC/SPともおよそ2倍へ拡大し、1パネルあたりの実スクロール距離を確保する。 */
.journey{position:relative;height:13000px;background:#0c1512}
.journey-fixed{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-5;background:#0c1512}
.seq-fallback{position:absolute;inset:0;z-index:-6}
.seq-fallback img{filter:brightness(.7)}
.scrim{position:absolute;inset:0;z-index:-4;background:linear-gradient(100deg,rgba(0,10,8,.72) 0%,rgba(0,10,8,.38) 40%,rgba(0,10,8,.12) 62%,rgba(0,10,8,.4) 100%),linear-gradient(to bottom,rgba(0,10,8,.22),transparent 20%,transparent 78%,rgba(0,10,8,.5))}
.scroll-flag{position:absolute;z-index:5;left:50%;bottom:38px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:11px;letter-spacing:.32em;transition:opacity .3s}
.scroll-flag b{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:flagmove 1.6s ease-in-out infinite}
@keyframes flagmove{50%{transform:translateY(8px)}}

.panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transform:translate3d(0,40px,0);will-change:transform,opacity;padding:0 6vw}
.panel.is-active{pointer-events:auto}

/* --- 0.00-0.08 ヒーロー --- */
.panel-hero{align-items:flex-start;padding-left:6vw}
.panel-hero .huge{display:block;font-size:clamp(56px,10vw,148px);line-height:.86;color:#fff;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.4);margin:0}
.panel-hero .catch-title{margin-top:22px;color:#fff;font-weight:700;font-size:1.3em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.panel-hero .catch-title .region-line{display:block;margin-top:6px;font-weight:500;font-size:.52em;letter-spacing:.04em;opacity:.92}
.panel-hero .catch{margin-top:14px;color:#fff;font-size:clamp(15px,1.6vw,19px);line-height:1.9;max-width:520px;text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* --- 0.08-0.15 街へ降下 --- */
.panel-city{color:#fff}
.panel-city h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.panel-city .lead{max-width:560px;margin-top:16px;font-size:15px;line-height:1.95;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.panel-city .insurance-note{max-width:560px;margin-top:12px;font-size:13.5px;line-height:1.8;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.panel-city .insurance-note a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.notice-board{margin-top:22px;display:grid;gap:10px;max-width:620px}
.notice-board p{margin:0 0 10px;font-size:12px;letter-spacing:.24em;color:#fff;opacity:.85}
.notice-board ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notice-board li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:12px 16px;font-size:13px;color:#fff;backdrop-filter:blur(4px)}
.notice-board li b{color:var(--accent);margin-right:8px;font-size:11px;letter-spacing:.1em}
.notice-board .notice-more{margin-top:2px;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-block}

/* --- 0.15-0.60 診療パート ×4 --- */
.panel-clinic{color:#fff;max-width:640px}
.panel-clinic .num{font-size:13px;letter-spacing:.3em;color:var(--accent);font-weight:700}
.panel-clinic h2{font-size:clamp(30px,4vw,48px);margin-top:14px;font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.panel-clinic p{margin-top:18px;font-size:14.5px;line-height:2;max-width:560px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.panel-clinic a.more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:12px;letter-spacing:.2em;color:var(--accent);font-weight:700;border-bottom:1px solid var(--accent);padding-bottom:4px;min-height:44px}
.clinic-dots{position:absolute;right:6vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:5}
.clinic-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s,transform .2s}
.clinic-dots i.is-on{background:var(--accent);transform:scale(1.3)}

/* #DESIGN_FROM_CHATGPT: 出典=元サイト実測 https://skyclinics.al/（本ファイル冒頭のDESIGN_FROM_CHATGPT参照）。
   Opus検収③の是正指示どおり、既存パレット --paper/--ink/--accent/--heading をそのまま転用するのみで
   新規の意匠は作らない（暗い写真一辺倒を崩す元サイトの「明るいクリーム地」カードを間奏帯に1箇所だけ復元）。 */
/* --- 0.60-0.69 間奏（ティール粒子）+診療時間 --- */
.panel-interlude{align-items:center;text-align:center;color:var(--ink)}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transition:opacity .4s ease}
.panel-interlude .inner{position:relative;z-index:2;background:var(--paper);color:var(--ink);border-radius:22px;padding:40px clamp(20px,5vw,60px);box-shadow:0 20px 60px rgba(0,10,8,.45);max-height:82vh;overflow-y:auto}
.panel-interlude .eyebrow{color:var(--accent-text)}
.panel-interlude h2{font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--heading)}
.hours{margin:22px auto 0;border-collapse:collapse;font-size:13px;background:rgba(0,57,52,.04);border-radius:10px;overflow:hidden;width:100%;max-width:420px}
.hours th,.hours td{padding:9px 14px;border:1px solid rgba(0,57,52,.16);color:var(--ink);text-align:center}
.hours thead th{color:var(--accent-text);font-weight:700;letter-spacing:.06em;background:rgba(0,57,52,.05)}
.hours tbody th[scope="row"]{color:var(--accent-text);font-weight:700;text-align:left;white-space:nowrap}
.hours td.closed{color:var(--ink);font-weight:700;opacity:.6}
.hours-note{margin-top:14px;font-size:12px;color:rgba(0,57,52,.68);letter-spacing:.04em}

/* --- 0.69-1.00 夕景の街＋アクセス＋CTA --- */
.panel-dusk{color:#fff;align-items:flex-start}
.panel-dusk h2{font-size:clamp(26px,3.6vw,40px);font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.panel-dusk .lead{max-width:520px;margin-top:14px;font-size:14.5px;line-height:1.95;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.access-cta{margin-top:26px;display:grid;grid-template-columns:1.15fr 1fr;gap:22px;max-width:920px;width:100%}
.access-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:20px 22px;backdrop-filter:blur(4px)}
.access-card h3{font-size:13px;letter-spacing:.18em;color:var(--accent);margin-bottom:12px}
.access-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.access-card dt{color:rgba(255,255,255,.65)}
.access-card dd{color:#fff}
.map-box{margin-top:14px;height:120px;border-radius:10px;position:relative;overflow:hidden;background:
  repeating-linear-gradient(0deg,rgba(26,158,143,.25) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(90deg,rgba(26,158,143,.25) 0 1px,transparent 1px 22px),#04211c}
.map-box b{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:16px;height:16px;border-radius:50% 50% 50% 0;background:var(--accent);rotate:-45deg;box-shadow:0 0 0 4px rgba(26,158,143,.25)}
.map-box span{position:absolute;left:8px;bottom:8px;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.map-open-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.cta-card{background:var(--accent);border-radius:14px;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.cta-card p{font-size:12px;letter-spacing:.18em;opacity:.9}
.cta-tel{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;min-height:44px}
.cta-note{font-size:12px;line-height:1.7;opacity:.9}
/* 是正(P2・2026-08-27): 白文字/teal背景=3.32:1でAA(4.5:1)未達だった実測是正。
   既存トークン--heading（見出し用の濃色）を流用し新色は作らない。.cta-card p{opacity:.9}より
   詳細度を上げてopacityの滲みも解消（対--accent実測 約5.97:1）。 */
.cta-card .cta-note{opacity:1;color:var(--heading)}
.cta-web{margin-top:4px;align-self:flex-start;background:#fff;color:var(--ink);border-radius:999px;padding:10px 20px;font-size:12.5px;font-weight:700;letter-spacing:.06em;min-height:44px;display:inline-flex;align-items:center}
.cta-web.ghost{background:transparent;border:1px solid #fff;color:var(--heading)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:860px){.access-cta{grid-template-columns:1fr}}

/* ===== フッター（在流し・濃緑#003934） ===== */
footer{background:var(--ink);color:var(--paper);padding:56px 5vw 30px}
footer .foot-top{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;padding-bottom:32px;border-bottom:1px solid rgba(232,231,229,.18)}
footer .brand b{color:#fff}
footer .brand small{color:rgba(232,231,229,.6)}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.foot-nav a{opacity:.85;min-height:44px;display:inline-flex;align-items:center}
.foot-nav a:hover{opacity:1;color:var(--accent)}
.foot-contact{font-size:13px;line-height:1.9;opacity:.9}
.foot-contact strong{display:block;font-size:16px;margin-bottom:4px;color:#fff}
.foot-contact strong a{display:inline-flex;align-items:center;min-height:44px} /* 是正(P4・2026-08-27): タップ標的44px化 */
.foot-sns{display:none} /* 是正(P4・2026-08-27): 実SNSリンクの無いダミーspan(IG/X/LN)を非表示化 */
.foot-sns a,.foot-sns span{width:32px;height:32px;border:1px solid rgba(232,231,229,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:20px;font-size:11.5px;opacity:.65}
.foot-bottom a{text-decoration:underline;text-underline-offset:2px}

/* #DESIGN_FROM_CHATGPT: 出典=元サイト実測 https://skyclinics.al/（本ファイル冒頭のDESIGN_FROM_CHATGPT参照）。
   以下v4ブロック（下部バーLINE枠・LINEデモトースト・journeyスキップ・静的インフォメーション帯・予約3択カード）は
   新規の意匠を作らず、発注書=C:\Users\nouka\ATAI-workspace\_automation\orders\soramichi_v4_line_ux_2026-08-28.md
   の指示どおり既存デザイントークン(--paper/--ink/--accent/--accent-text/--heading/--muted)と、
   本ファイルに既存の角丸カード・ボーダー・パディング比率（.hours/.info-grid/.job-card/.cost-table等）の
   コンポーネント言語をそのまま転用する。LINEブランド色#06C755は発注書の指示どおり
   「LINEというサービスの標準色」としての使用であり新規意匠の創作ではない。 */
/* ===== モバイル追従バー（768px以下・常時表示） ===== */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{display:flex;position:fixed;left:0;bottom:0;width:100%;z-index:300;background:var(--ink);border-top:1px solid rgba(232,231,229,.18);padding-bottom:env(safe-area-inset-bottom,0)}
  .mobile-bar a,.mobile-bar button{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;color:#fff;font-size:11px;letter-spacing:.02em;font-weight:700}
  .mobile-bar .mb-ico{width:18px;height:18px;display:block}
  .mobile-bar a:not(:last-child),.mobile-bar button:not(:last-child){border-right:1px solid rgba(232,231,229,.16)}
  .mobile-bar .mb-tel{color:#fff;background:var(--accent-text)}
  /* #DESIGN_FROM_CHATGPT: 出典=元サイト実測 https://skyclinics.al/。既存トークン--ink流用・新規意匠なし（発注書soramichi_v4_line_ux_2026-08-28.md）。 */
  .mobile-bar .mb-line{color:var(--ink);background:#06C755;font-size:10px;line-height:1.25;padding:0 4px;text-align:center}
  body{padding-bottom:56px}
}

/* #DESIGN_FROM_CHATGPT: 出典=元サイト実測 https://skyclinics.al/（本ファイル冒頭のDESIGN_FROM_CHATGPT参照）。
   以下は発注書=_automation\orders\soramichi_v4_line_ux_2026-08-28.md の指示どおり、既存デザイントークン
   (--paper/--ink/--accent/--accent-text/--heading/--muted)と本ファイル既存の角丸カード・ボーダー言語
   （.hours/.info-grid/.job-card/.cost-table等）をそのまま転用し新規意匠は作らない。
   LINEブランド色#06C755は「LINEというサービスの標準色」の再現であり新規意匠の創作ではない。 */
.cta-line{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#06C755;color:var(--ink);border-radius:999px;padding:10px 20px;font-size:12.5px;font-weight:700;letter-spacing:.04em;min-height:44px}
.foot-line{margin-top:12px;display:inline-flex;align-items:center;gap:6px;background:#06C755;color:var(--ink);border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:700;min-height:40px}
.line-friend-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:#06C755;color:var(--ink);border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:700;min-height:44px}

.line-demo-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);max-width:min(92vw,420px);background:var(--ink);color:#fff;font-size:13px;line-height:1.7;padding:14px 18px;border-radius:12px;box-shadow:0 12px 30px rgba(0,10,8,.35);z-index:400;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.line-demo-toast.is-shown{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:768px){.line-demo-toast{bottom:calc(56px + env(safe-area-inset-bottom,0) + 16px)}}

.journey-skip{margin-top:26px;display:inline-flex;min-height:44px;align-items:center;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.journey-skip:hover,.journey-skip:focus-visible{color:#fff;border-color:#fff}

.info-band{background:var(--paper)}
.info-band-heading{font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--heading);margin-top:8px}
.info-band-lead{margin-top:14px;max-width:640px;font-size:13.5px;line-height:1.9;color:var(--muted)}
.info-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px}
.info-band-col h3{font-size:15px;color:var(--heading);margin-bottom:14px}
.info-band-access{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13.5px}
.info-band-access dt{color:var(--muted)}
.info-band-access dd{color:var(--ink)}
.map-open-btn-static{margin-top:16px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:1px solid rgba(0,57,52,.3);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--accent-text)}
@media(max-width:768px){.info-band-grid{grid-template-columns:1fr}}

.info-band-news{margin-top:52px}
.info-band-news h3{font-size:15px;color:var(--heading);margin-bottom:14px}
.info-band-news ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.info-band-news li{display:flex;gap:14px;align-items:baseline;font-size:13.5px;border-top:1px solid rgba(0,57,52,.12);padding-top:10px}
.info-band-news li:first-child{border-top:0;padding-top:0}
.info-band-news time{color:var(--muted);flex:0 0 auto;min-width:64px}
.notice-more-static{margin-top:14px;display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

.info-band-faq{margin-top:52px;max-width:760px}
.info-band-faq h3{font-size:15px;color:var(--heading);margin-bottom:6px}
.info-band-faq details{border-top:1px solid rgba(0,57,52,.14);padding:14px 0}
.info-band-faq details:first-of-type{border-top:0}
.info-band-faq summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--heading);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.info-band-faq summary::-webkit-details-marker{display:none}
.info-band-faq summary:after{content:'+';font-size:18px;color:var(--accent-text);flex:0 0 auto}
.info-band-faq details[open] summary:after{content:'\2212'}
.info-band-faq details p{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--ink)}

.reserve-3choice{margin-top:52px}
.reserve-3choice h3{font-size:15px;color:var(--heading);margin-bottom:16px}
.reserve-cards{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.reserve-card{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid rgba(0,57,52,.2);border-radius:12px;padding:18px 20px;background:#fff;min-height:44px;font:inherit}
.reserve-card b{font-size:15px;color:var(--heading)}
.reserve-card span{font-size:12.5px;line-height:1.7;color:var(--muted)}
.reserve-card:hover,.reserve-card:focus-visible{border-color:var(--accent)}
.reserve-card-line{border-left:4px solid #06C755}
@media(max-width:768px){.reserve-cards{grid-template-columns:1fr}}

/* ===== サブページ共通 ===== */
.sub-hero{padding:calc(var(--header) + 64px) 5vw 60px;background:var(--ink);color:#fff}
.sub-hero .eyebrow{color:var(--accent-ondark)}
.sub-hero h1{font-size:clamp(30px,4.4vw,54px);font-weight:700}
.sub-hero p{margin-top:14px;max-width:640px;font-size:14.5px;line-height:1.9;opacity:.9}
.sub-main{max-width:920px;margin:0 auto;padding:70px 5vw 100px}
.sub-main h2{font-size:clamp(22px,2.6vw,30px);color:var(--heading);margin-bottom:6px}
.sub-main .num{font-size:12px;letter-spacing:.28em;color:var(--accent-text);font-weight:700}
.sub-section{padding:44px 0;border-top:1px solid rgba(0,57,52,.14)}
.sub-section:first-child{border-top:0}
.sub-section p{margin-top:14px;color:var(--ink);font-size:15px;line-height:2}
.sub-section h3{margin-top:26px;font-size:16px;color:var(--heading)}
.cost-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:13.5px}
.cost-table th,.cost-table td{border:1px solid rgba(0,57,52,.2);padding:10px 14px;text-align:left}
.cost-table th{background:rgba(26,158,143,.12);color:var(--ink)}
.risk-note{margin-top:16px;background:#fdf6e8;border:1px solid rgba(0,57,52,.14);border-left:4px solid var(--accent);border-radius:8px;padding:16px 18px;font-size:13.5px;line-height:1.9;color:var(--ink)}
.risk-note b{display:block;color:var(--heading);margin-bottom:6px;font-size:12.5px;letter-spacing:.08em}
.insurance-lede{background:rgba(26,158,143,.1);border:1px solid rgba(0,57,52,.16);border-radius:10px;padding:14px 18px;font-size:13.5px;line-height:1.85;margin-top:14px}
.insurance-grid{display:grid;gap:16px;margin-top:22px;grid-template-columns:repeat(2,1fr)}
.insurance-item{border:1px solid rgba(0,57,52,.18);border-radius:12px;padding:18px 20px}
.insurance-item h3{margin-top:0;font-size:15px;color:var(--heading)}
.insurance-item p{margin-top:8px;font-size:13.5px;line-height:1.85}
@media(max-width:640px){.insurance-grid{grid-template-columns:1fr}}
.flow-steps{counter-reset:step}
.flow-step{position:relative;padding:36px 0 36px 64px;border-top:1px solid rgba(0,57,52,.14)}
.flow-step:first-child{border-top:0}
.flow-step:before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:0;top:34px;font-size:22px;font-weight:700;color:var(--accent-text)}
.flow-step h3{font-size:18px;color:var(--heading);margin-top:0}
.flow-step p{margin-top:10px;font-size:14.5px;line-height:1.95;color:var(--ink)}
.job-card{border:1px solid rgba(0,57,52,.2);border-radius:12px;padding:22px 24px;margin-top:18px}
.job-card h3{font-size:16px;color:var(--heading);margin-top:0}
.job-card dl{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;margin-top:12px;font-size:13.5px}
.job-card dt{color:var(--muted)}
.partner-list{display:grid;gap:14px;margin-top:20px}
.partner-list li{border:1px solid rgba(0,57,52,.2);border-radius:10px;padding:16px 18px;font-size:14px;line-height:1.8}
.info-grid{display:grid;gap:16px;margin-top:20px;grid-template-columns:repeat(2,1fr)}
.info-card{border:1px solid rgba(0,57,52,.18);border-radius:12px;padding:18px 20px}
.info-card h3{margin-top:0;font-size:14.5px;color:var(--heading)}
.info-card p{margin-top:8px;font-size:13.5px;line-height:1.85}
@media(max-width:640px){.info-grid{grid-template-columns:1fr}}

/* ===== 写真（生成静止画・院内イメージ） ===== */
.photo-figure{margin:24px 0 0;border-radius:14px;overflow:hidden;background:#ddd}
.photo-figure img{aspect-ratio:16/9;object-fit:cover}
.photo-figure figcaption{margin-top:8px;font-size:12px;color:var(--muted)}
.photo-grid{display:grid;gap:20px;margin-top:24px;grid-template-columns:repeat(2,1fr)}
.photo-grid .photo-figure{margin-top:0}
@media(max-width:640px){.photo-grid{grid-template-columns:1fr}}

/* ===== お知らせ一覧 ===== */
.news-list{display:grid;gap:0}
.news-item{padding:22px 0;border-top:1px solid rgba(0,57,52,.14);display:grid;grid-template-columns:120px 1fr;gap:16px}
.news-item:first-child{border-top:0}
.news-item time{color:var(--muted);font-size:13px;letter-spacing:.04em}
.news-item h2{font-size:15px;color:var(--heading);margin-top:0}
.news-item p{margin-top:8px;font-size:14px;line-height:1.85;color:var(--ink)}
@media(max-width:560px){.news-item{grid-template-columns:1fr}}

/* ===== フォーム（デモ送信なし） ===== */
.demo-form{margin-top:24px;display:grid;gap:18px;max-width:560px}
.form-field{display:grid;gap:6px}
.form-field label{font-size:13px;font-weight:700;color:var(--heading)}
.form-field input,.form-field select,.form-field textarea{border:1px solid rgba(0,57,52,.28);border-radius:8px;padding:12px 14px;font-size:14.5px;background:#fff;color:var(--ink);min-height:44px}
.form-field textarea{min-height:120px;resize:vertical}
.form-note{font-size:12px;color:var(--muted)}
.form-submit{margin-top:4px;align-self:flex-start;background:var(--accent-text);color:#fff;border-radius:999px;padding:0 28px;min-height:48px;font-size:14px;font-weight:700;letter-spacing:.04em}
.form-result{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--accent-text);display:none}
.form-result.is-shown{display:block}

/* ===== 404・プライバシー等の簡易ページ ===== */
.plain-hero{padding:calc(var(--header) + 96px) 5vw 80px;text-align:center}
.plain-hero h1{font-size:clamp(26px,4vw,40px);color:var(--heading)}
.plain-hero p{margin-top:14px;max-width:520px;margin-left:auto;margin-right:auto;font-size:14.5px;line-height:1.9;color:var(--ink)}
.plain-hero .cta-web{display:inline-flex;margin-top:22px;background:var(--accent-text);color:#fff}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.panel{transform:none}}
@media(max-width:768px){
  /* C節#1（SP）: JS側のframes_v3_sp切替・MOBILE_LIGHT閾値(768px)と揃え、
     解像度切替と物語の速度感が同じブレークポイントで一致するようにする。 */
  .journey{height:9500px}
  .access-cta{grid-template-columns:1fr}
  .panel-clinic{max-width:100%}
  .clinic-dots{display:none}
}

/* ===== reveal（サブページ用の緩やかな出現） ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ===== JS無効フォールバック（.no-js＝html要素の既定クラス。JS起動時にJSがこのクラスを外す） ===== */
.no-js .reveal{opacity:1;transform:none}
.no-js .journey{height:auto;background:none}
.no-js .journey-fixed{position:relative;height:auto;overflow:visible;display:block}
.no-js #seq,.no-js #particles,.no-js .scrim,.no-js .scroll-flag,.no-js .clinic-dots{display:none}
.no-js .seq-fallback{position:relative;inset:auto;height:min(70vw,420px);z-index:auto}
.no-js .panel{position:relative;inset:auto;opacity:1!important;pointer-events:auto!important;transform:none!important;padding:48px 6vw;background:var(--ink);visibility:visible!important}
.no-js .panel-interlude{background:var(--paper)}
.no-js .panel-interlude .inner{box-shadow:none;max-height:none;overflow:visible}
.no-js .mobile-bar{position:static;padding-bottom:0}
.no-js body{padding-bottom:0}

/* ヘッダーメニューのLINEボタン（v4.1・社長指示 2026-08-28「メニューにもLINEの訴求ボタンを」）
   既存の .cta-line / .foot-line と同じコンポーネント言語。LINEブランド色#06C755はサービス標準色の再現。 */
.nav-line{display:inline-flex;align-items:center;gap:6px;background:#06C755;color:var(--ink);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;min-height:44px;white-space:nowrap}
.nav-line i{width:14px;height:14px;flex:0 0 auto;border-radius:4px;background:var(--ink);mask:radial-gradient(circle at 50% 45%,#000 5px,transparent 5.5px);-webkit-mask:radial-gradient(circle at 50% 45%,#000 5px,transparent 5.5px)}
@media(max-width:860px){
  .site-header nav.open{max-height:520px}
  .site-header nav .nav-line{width:calc(100% - 12vw);margin:12px 6vw;justify-content:center;padding:12px 16px}
}