/* =========================================================
   高井病院 心臓血管センター — プロトタイプサイト 共通スタイル
   デザイン基準: prototype-arrhythmia/index.html のインラインCSSを抽出・整理
   ========================================================= */
:root{
  --ink:#11212e; --sub:#52677a; --line:#e1e9ef; --line2:#d4e2ea;
  --brand:#0e7490; --brand2:#1395b5; --brand-d:#0a5468; --brandglow:rgba(14,116,144,.18);
  --accent:#c0392b; --gold:#b07d12;
  --bg:#ffffff; --bg2:#eef6f9; --navy:#0e2330; --navy2:#143246;
  --r:18px; --r-s:12px;
  --maxw:1140px;
  --fs:clamp(17px,1.1vw + 14px,19px);
  --h1:clamp(28px,3.9vw,46px);
  --h2:clamp(25px,3.2vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
[id]{scroll-margin-top:76px} /* sticky headerの下に隠れないようアンカー位置を補正 */
body{margin:0; color:var(--ink); background:var(--bg);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-size:var(--fs); line-height:1.9; -webkit-text-size-adjust:100%; word-break:auto-phrase; overflow-x:clip}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.hd>*, .hero .wrap>*, .split>*, .cards>*, .feat>*, .flow>*, .metrics>*, .symp>*{min-width:0}
.telbtn{flex:none}
.brand{min-width:0}
img{max-width:100%}
a{color:var(--brand-d)}
h1,h2,h3{line-height:1.4; letter-spacing:.01em; margin:0}
.em{color:var(--brand-d)}
.icon{width:1.25em; height:1.25em; vertical-align:-.18em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.skip-link{position:absolute; left:-999px; top:0; background:#fff; color:var(--brand-d); padding:10px 16px; z-index:100; border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* ===== header / nav ===== */
header.site{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hd{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:11px; padding-bottom:11px}
.brand{font-weight:800; font-size:clamp(15px,2.4vw,18px); line-height:1.25; text-decoration:none; color:var(--ink)}
.brand small{display:block; font-weight:600; font-size:11px; color:var(--sub); letter-spacing:.1em; margin-top:1px}
.hd-right{display:flex; align-items:center; gap:14px}
.mainnav{display:none; gap:2px}
.mainnav a{text-decoration:none; color:var(--ink); font-weight:700; font-size:14.5px; padding:8px 10px; border-radius:9px; white-space:nowrap}
.mainnav a:hover{background:var(--bg2); color:var(--brand-d)}
.mainnav a[aria-current="page"]{color:var(--brand-d); background:var(--bg2)}
.telbtn{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg,var(--brand2),var(--brand));
  color:#fff; text-decoration:none; font-weight:800; padding:10px 16px; border-radius:999px;
  font-size:clamp(14px,2.2vw,16px); white-space:nowrap; box-shadow:0 4px 14px var(--brandglow)}
/* mobile nav toggle (hamburger) — 900px未満で表示。JS無効時もCSSで開かない代わりにデスクトップ幅で常時ナビ表示 */
.navtoggle{display:none; align-items:center; justify-content:center; width:46px; height:46px; padding:0; flex:none;
  background:#fff; border:1px solid var(--line2); border-radius:12px; color:var(--brand-d); cursor:pointer}
.navtoggle svg{width:24px; height:24px; display:block}
.navtoggle line{stroke:currentColor; stroke-width:2; stroke-linecap:round; transform-box:fill-box; transform-origin:center;
  transition:transform .25s ease, opacity .2s ease}
.navtoggle[aria-expanded="true"] .l1{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .l2{opacity:0}
.navtoggle[aria-expanded="true"] .l3{transform:translateY(-6px) rotate(-45deg)}

/* ページ先頭へ戻るボタン（JSで生成・スクロールで出現）。高齢の方にも分かるよう文字ラベル付き */
.to-top{position:fixed; right:clamp(14px,3vw,24px); bottom:24px; z-index:41; padding:12px 18px;
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; border-radius:999px;
  background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff; font-weight:800; font-size:15px; line-height:1;
  box-shadow:0 8px 22px var(--brandglow);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; flex:none}
@media(max-width:819px){ .to-top{bottom:72px} } /* モバイルの通話バーの上に表示 */

/* ===== hero (top) ===== */
.hero{position:relative; overflow:hidden; color:var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(19,149,181,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(14,116,144,.14), transparent 55%),
    linear-gradient(165deg,#eaf5f9 0%,#f3f9fb 55%,#ffffff 100%)}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:26px; padding-top:clamp(30px,5vw,58px); padding-bottom:clamp(34px,5vw,62px)}
.kicker{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line2); color:var(--brand-d);
  font-weight:800; font-size:clamp(12px,2.2vw,14px); padding:7px 14px; border-radius:999px; box-shadow:0 2px 8px rgba(14,116,144,.08); width:max-content; max-width:100%}
.hero h1{font-size:clamp(26px,3.5vw,43px); margin:16px 0 .35em; letter-spacing:.005em; overflow-wrap:anywhere}
.hero-l1{white-space:normal} /* 小画面（〜479px）は自然に折り返し可 */
.hero-mobile-break{display:none}
@media(min-width:480px){ .hero-l1{white-space:nowrap} } /* 一定幅以上は1行目を常に1行に固定（大画面での不自然な折返し防止） */
.hero h1 .em{color:var(--brand-d)}
.hero .lead{font-size:clamp(16px,1.5vw,21px); color:var(--sub); margin:0 0 22px; max-width:32em}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; font-weight:800; border-radius:13px; padding:15px 24px; font-size:clamp(16px,2.4vw,18px);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease}
.btn.primary{background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff; box-shadow:0 8px 22px var(--brandglow)}
.btn.ghost{background:#fff; color:var(--brand-d); border:2px solid var(--line2)}
.btn:hover{transform:translateY(-2px)}
.btn.primary:hover{box-shadow:0 12px 30px var(--brandglow)}
.btn.ghost:hover{background:var(--bg2); border-color:var(--brand2)}
.btn:focus-visible{outline:3px solid var(--brand2); outline-offset:2px}
@media(prefers-reduced-motion:reduce){ .btn{transition:none} .btn:hover{transform:none} }

/* hero side card */
.hero-side{display:grid; gap:16px; align-self:center}
.hero-photo{margin:0; position:relative; aspect-ratio:16 / 9; border-radius:18px; overflow:hidden; box-shadow:0 18px 50px rgba(15,40,55,.18); border:1px solid rgba(255,255,255,.6)}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%}
.hero-photo figcaption{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(8,28,38,.82)); color:#fff; font-size:13px; font-weight:700; padding:22px 14px 10px}
.herocard{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(15,40,55,.12); padding:22px; align-self:start}
.herocard .tel-lab{font-size:13px; color:var(--sub); font-weight:700; letter-spacing:.08em}
.herocard .tel-num{font-size:clamp(24px,5.4vw,30px); font-weight:800; color:var(--brand-d); line-height:1.1; letter-spacing:.01em; display:flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none}
.herocard .tel-num .icon{width:1.05em; height:1.05em; flex:none; color:var(--brand)}
.herocard .hcfacts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
.hcfact{position:relative; background:var(--bg2); border-radius:var(--r-s); padding:12px 14px; text-decoration:none; color:inherit; display:block; box-shadow:0 0 0 1px var(--line), 0 2px 0 rgba(15,40,55,.15), 0 3px 6px rgba(15,40,55,.08); transition:background-color .2s ease, transform .15s ease, box-shadow .2s ease}
.hcfact::after{content:"›"; position:absolute; right:10px; top:9px; color:var(--brand); font-size:18px; font-weight:800; line-height:1}
a.hcfact:hover{background:#e2eff4; transform:translateY(-2px); box-shadow:0 0 0 1px var(--brand2), 0 8px 20px rgba(15,40,55,.16)}
a.hcfact:active{transform:translateY(1px); box-shadow:0 0 0 1px var(--line), 0 1px 3px rgba(15,40,55,.1)}
a.hcfact:focus-visible{outline:3px solid var(--brand2); outline-offset:2px}
.hcfact b{display:block; font-size:clamp(18px,3vw,22px); color:var(--brand-d); line-height:1.15}
.hcfact span{font-size:12.5px; color:var(--sub)}
/* 大きな数字を等幅で揃える（静的・Webフォント不要・速度コストゼロ） */
.metric b, .hcfact b, .factbox .big{font-variant-numeric:tabular-nums; letter-spacing:.01em}

/* ===== 全幅写真ヒーロー（トップページ・.hero-full 修飾）===== */
.hero.hero-full{min-height:clamp(480px,76vh,740px); display:flex; align-items:center; background:var(--navy)}
/* トップページのヒーローは最初の1画面（ヘッダー下）を写真で埋める */
@media(min-width:641px){ .hero-full.hero-top{min-height:clamp(600px, calc(100vh - 76px), 1120px)} }
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(6,22,32,.86) 0%, rgba(6,22,32,.66) 40%, rgba(6,22,32,.22) 70%, rgba(6,22,32,.04) 100%),
    linear-gradient(0deg, rgba(6,22,32,.55) 0%, rgba(6,22,32,0) 45%)}
.hero-full .hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,40px);
  align-items:center; color:#fff; padding-top:clamp(44px,6vw,80px); padding-bottom:clamp(44px,6vw,80px)}
.hero-copy{min-width:0}
.hero-full .kicker{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; box-shadow:none; backdrop-filter:blur(3px)}
.hero-full h1{font-size:clamp(28px,3.3vw,44px); color:#fff; max-width:16em; text-shadow:0 2px 22px rgba(0,15,25,.5)}
.hero-full h1 .em{color:#7fe0ff}
.hero-full .hero-l1{white-space:normal} /* 2カラムでは1行目も自然折り返し（右カードへのめり込み防止） */
.hero-full .lead{font-size:clamp(16px,1.6vw,21px); color:#eaf3f7; max-width:30em; margin-bottom:24px; text-shadow:0 1px 12px rgba(0,15,25,.55); overflow-wrap:anywhere}
.hero-full .lead strong{color:#fff}
.hero-full .btn.ghost{background:#fff; color:var(--brand-d); border-color:#fff; box-shadow:0 6px 18px rgba(0,12,20,.3)}
.hero-full .btn.ghost:hover{background:var(--bg2); border-color:var(--brand2)}
.hero-full .btn.ghost:active{transform:translateY(1px); box-shadow:0 2px 8px rgba(0,12,20,.25)}
.btn .dn{color:var(--brand); font-size:.85em; line-height:1}
/* 右カード（電話＋実績4ボックス）を写真の上に重ねる */
.hero-aside{display:flex; flex-direction:column; gap:14px; align-self:start; min-width:0}
.hero-aside .hero-card-over{align-self:stretch}
.hero-card-over{align-self:start; box-shadow:0 24px 60px rgba(0,12,20,.42)}
.af-hero-cta{position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px;
  padding:15px 17px; border-radius:var(--r); border:1px solid rgba(255,255,255,.26); border-left:6px solid #e85d75;
  background:linear-gradient(135deg,rgba(128,30,55,.97),rgba(14,35,48,.95)); color:#fff; text-decoration:none;
  box-shadow:0 20px 46px rgba(0,12,20,.34), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease}
.af-hero-cta::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(232,93,117,.26),transparent 46%); pointer-events:none}
.af-hero-cta>*{position:relative}
.af-hero-cta:hover{transform:translateY(-2px); box-shadow:0 26px 58px rgba(0,12,20,.42); border-color:rgba(255,255,255,.42)}
.af-hero-cta:focus-visible{outline:3px solid #7fe0ff; outline-offset:3px}
.af-cta-icon{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#ffd8df; border:1px solid rgba(255,255,255,.24); flex:none; overflow:hidden; padding:2px}
.af-cta-icon .icon{width:24px; height:24px}
.af-cta-icon img.ic-img{width:100%; height:100%; object-fit:contain; display:block}
.af-cta-copy{display:block; min-width:0; line-height:1.35}
.af-cta-kicker{display:block; color:#ffd8df; font-size:16px; font-weight:800; letter-spacing:.06em; margin-bottom:3px}
.af-cta-copy strong{display:block; font-size:clamp(21px,2.1vw,26px); line-height:1.16; letter-spacing:.01em}
.af-cta-sub{display:block; color:#f6dce2; font-size:13px; font-weight:700; margin-top:3px}
.af-cta-go{font-size:24px; font-weight:800; color:#ff9fb0; line-height:1; flex:none}
@media(prefers-reduced-motion:reduce){ .af-hero-cta{transition:none} .af-hero-cta:hover{transform:none} }
@media(min-width:960px){
  .hero-full .hero-inner{grid-template-columns:minmax(0,1.42fr) minmax(280px,.72fr); align-items:start}
  /* 目次を内包するサブページのヒーロー：余白を少し圧縮して1画面に収める */
  .hero-full.hero-withnav{min-height:clamp(440px,64vh,600px)}
  .hero-full.hero-withnav .hero-inner{padding-top:clamp(28px,3vw,46px); padding-bottom:clamp(24px,2.6vw,40px)}
}
/* 全幅ヒーロー上のパンくず（下層ページで流用） */
.hero-full .crumbs{color:rgba(255,255,255,.82); margin-bottom:16px}
.hero-full .crumbs a{color:rgba(255,255,255,.88)}
.hero-full .crumbs a:hover{color:#fff}
.hero-full .crumbs span.sep{opacity:.55; color:rgba(255,255,255,.7)}
.hero-full .crumbs span:not(.sep){color:rgba(255,255,255,.95)}

/* ===== 心臓リハビリ専用：あたたかい白基調ヒーロー（白ぼかし＋濃色文字） ===== */
.hero-full.hero-warm{background:#fbf4ea}
.hero-full.hero-warm .hero-scrim{
  backdrop-filter:blur(3px);
  /* 右側80%以降はぼかし・白ともにゼロ（写真そのまま）。左からの流れで徐々に抜く */
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 55%, transparent 80%);
  mask-image:linear-gradient(90deg, #000 0%, #000 55%, transparent 80%);
  background:
    linear-gradient(90deg, rgba(255,251,245,.92) 0%, rgba(255,250,242,.72) 36%, rgba(255,249,239,.28) 62%, rgba(255,248,236,0) 88%),
    linear-gradient(0deg, rgba(255,250,243,.42) 0%, rgba(255,250,243,0) 40%)}
.hero-full.hero-warm h1{color:#3c2a1c; text-shadow:0 1px 10px rgba(255,255,255,.55)}
.hero-full.hero-warm h1 .em{color:#c2570e}
.hero-full.hero-warm .lead{color:#3d2a1a; text-shadow:0 1px 6px rgba(255,255,255,.5)}
.hero-full.hero-warm .lead strong{color:#3c2a1c}
.hero-full.hero-warm .kicker{background:rgba(255,255,255,.74); border-color:rgba(194,87,14,.30); color:#9a4a0e; box-shadow:0 2px 10px rgba(120,70,20,.10)}
.hero-full.hero-warm .crumbs{color:#6b5544}
.hero-full.hero-warm .crumbs a{color:#8a5a2a}
.hero-full.hero-warm .crumbs a:hover{color:#5b3410}
.hero-full.hero-warm .crumbs span.sep{color:rgba(90,70,54,.6)}
.hero-full.hero-warm .crumbs span:not(.sep){color:#4a3626}
/* 目次チップ（あたたかい白ガラス・濃色文字） */
.hero-warm .hero-jumpnav .hj-label{color:#6b5544; text-shadow:0 1px 6px rgba(255,255,255,.6)}
.hero-warm .hero-jumpnav .hj-label .icon{color:#c2570e}
.hero-warm .hero-jumpnav .jumpnav a{background:rgba(255,255,255,.74); border-color:rgba(120,70,20,.18); color:#4a3626; text-shadow:none}
.hero-warm .hero-jumpnav .jumpnav a .icon{color:#c2570e}
.hero-warm .hero-jumpnav .jumpnav a img.ic-img{filter:none}
.hero-warm .hero-jumpnav .jumpnav a:hover{background:#fff; color:#3c2a1c; border-color:#c2570e}
.hero-warm .hero-jumpnav .jumpnav a:hover .icon{color:#9a4a0e}
/* モバイル/タブレット縦（1カラム積み上げ時）:
   縦長ヒーロー全体を写真がcoverすると超拡大で何の写真か分からなくなるため、
   写真は上部480pxだけに敷き、下は無地背景（navy／warm）へフェード。
   文字は従来どおり最上部から写真に重ねて表示する */
@media(max-width:959px){
  .hero.hero-full{min-height:auto}
  .hero-bg{bottom:auto; height:480px;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .hero-scrim{background:linear-gradient(180deg, rgba(6,22,32,.52) 0px, rgba(6,22,32,.44) 280px, rgba(6,22,32,0) 480px)}
  .hero-full.hero-warm .hero-scrim{backdrop-filter:none; -webkit-mask-image:none; mask-image:none;
    background:linear-gradient(180deg, rgba(255,250,243,.88) 0px, rgba(255,250,243,.80) 280px, rgba(255,250,243,0) 480px)}
}

@media(max-width:640px){
  .hero-full .lead{max-width:18em; word-break:break-all}
  .hero-mobile-break{display:block}
  .af-hero-cta{grid-template-columns:auto minmax(0,1fr); padding:14px 15px}
  .af-cta-go{display:none}
  .af-cta-copy strong{font-size:clamp(20px,6vw,24px)}
}

/* ===== page-hero (sub pages, icon-led, no photo) ===== */
.page-hero{position:relative; overflow:hidden; color:var(--ink);
  background:
    radial-gradient(1100px 460px at 85% -20%, rgba(19,149,181,.20), transparent 60%),
    linear-gradient(165deg,#eaf5f9 0%,#f3f9fb 60%,#ffffff 100%)}
.page-hero .wrap{padding-top:clamp(20px,3.5vw,40px); padding-bottom:clamp(28px,4.5vw,52px)}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--sub); margin-bottom:14px}
.crumbs a{color:var(--sub); text-decoration:none}
.crumbs a:hover{color:var(--brand-d); text-decoration:underline}
.crumbs span.sep{opacity:.5}
.page-hero h1{font-size:var(--h1); margin:.15em 0 .35em; overflow-wrap:anywhere}
.page-hero h1 .em{color:var(--brand-d)}
.page-hero .lead{font-size:clamp(16px,1.5vw,21px); color:var(--sub); margin:0; max-width:38em}
.page-hero .cta-row{margin-top:22px}
/* page-hero with photo (two-column) */
.page-hero .hwrap{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
.page-hero .hwrap>*{min-width:0}

/* doctor byline */
.byline{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:0 8px 26px rgba(15,40,55,.06)}
.byline img{width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:center top; flex:none; border:3px solid #fff; box-shadow:0 6px 18px rgba(15,40,55,.2)}
.byline .role{font-size:12.5px; color:var(--brand); font-weight:800; letter-spacing:.08em}
.byline .nm{font-size:clamp(18px,2.2vw,22px); font-weight:800; margin:2px 0 4px}
.byline p{margin:0; color:var(--sub); font-size:clamp(14px,1.4vw,16px)}
.byline p strong{color:var(--ink)}

/* image inside a card */
.card-img{display:block; width:100%; max-width:280px; height:auto; border-radius:12px; margin-bottom:14px; box-shadow:0 8px 20px rgba(15,40,55,.14)}
.card-img.wide{max-width:100%; width:100%; aspect-ratio:5 / 2; height:auto; object-fit:cover}
.info-visual{display:flex; align-items:center; gap:16px; margin:18px 0 0; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 4px 16px rgba(15,40,55,.05)}
.info-visual img{flex:none; width:72px; height:72px; display:block; object-fit:contain}
.info-visual p{margin:0; color:var(--sub); font-size:clamp(14.5px,1.4vw,16px)}
.info-visual strong{color:var(--ink)}
.info-visual + .comp,.info-visual + .cards{margin-top:18px}
@media(max-width:560px){.info-visual{gap:12px; padding:14px}.info-visual img{width:62px; height:62px}}

/* ===== sections ===== */
section{padding:clamp(40px,5vw,70px) 0}
section.alt{background:var(--bg2)}
section.navy{background:linear-gradient(160deg,var(--navy2),var(--navy)); color:#dce7ee}
section.navy h2{color:#fff}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-weight:800; font-size:13px; letter-spacing:.14em; margin:0 0 8px; text-transform:uppercase}
section.navy .eyebrow{color:#5fcfe6}
h2{font-size:var(--h2); margin:0 0 .5em}
.lede{color:var(--sub); font-size:clamp(16px,1.4vw,19px); max-width:46em; margin:0 0 1.4em}
.lede.compact{margin:.2em 0 0}
.lede.flush{margin:0}
section.navy .lede{color:#aec6d4}
p.note{color:var(--sub); font-size:14.5px}
/* 汎用の上マージン（インラインstyle撲滅用） */
.gap{margin-top:14px}
.gap-lg{margin-top:22px}
section.navy p.note{color:#92acbb}

/* two-column generic */
.split{display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); align-items:start}

/* jump nav (ページ内クイックジャンプ／ミニ目次) */
.jumpnav-sec{padding:clamp(20px,3vw,30px) 0}
.jumpnav{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.jumpnav a{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line2); color:var(--brand-d);
  font-weight:700; font-size:clamp(13px,1.6vw,15px); padding:10px 16px; border-radius:999px; text-decoration:none;
  box-shadow:0 2px 8px rgba(15,40,55,.05); transition:background-color .2s ease, transform .15s ease, border-color .2s ease, box-shadow .2s ease}
.jumpnav a:hover{background:var(--bg2); border-color:var(--brand2); transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,40,55,.1)}
.jumpnav a:focus-visible{outline:3px solid var(--brand2); outline-offset:2px}
.jumpnav a .icon{width:1.05em; height:1.05em; color:var(--brand); flex:none}
.jumpnav a img.ic-img{width:1.5em; height:1.5em; object-fit:contain; flex:none; display:block}
@media(prefers-reduced-motion:reduce){ .jumpnav a{transition:none} .jumpnav a:hover{transform:none} }

/* ヒーロー写真の上に置くミニ目次（全幅・ガラス調ボタン） */
.hero-jumpnav{grid-column:1 / -1; margin-top:clamp(16px,2vw,24px); position:relative; z-index:2}
.hero-jumpnav .hj-label{display:inline-flex; align-items:center; gap:7px; color:#eaf3f7; font-size:13px; font-weight:800; letter-spacing:.08em; margin-bottom:11px; text-shadow:0 1px 8px rgba(0,15,25,.5)}
.hero-jumpnav .hj-label .icon{width:1.05em; height:1.05em; color:#7fe0ff; flex:none}
.hero-jumpnav .hj-label img.ic-img{width:1.4em; height:1.4em; object-fit:contain; flex:none; display:block}
.hero-jumpnav .jumpnav a{background:rgba(8,26,38,.42); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px); text-shadow:0 1px 6px rgba(0,15,25,.4)}
.hero-jumpnav .jumpnav a .icon{color:#7fe0ff}
.hero-jumpnav .jumpnav a img.ic-img{width:1.55em; height:1.55em; filter:drop-shadow(0 1px 3px rgba(0,10,20,.35))}
.hero-jumpnav .jumpnav a:hover{background:#fff; color:var(--brand-d); border-color:#fff}
.hero-jumpnav .jumpnav a:hover .icon{color:var(--brand)}
.hero-jumpnav .jumpnav a:hover img.ic-img{filter:none}

/* 本文中の心房細動 特設ページ 誘導バンド（白背景セクション向け・軽量） */
.af-cta-band{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  background:linear-gradient(135deg,#fbecef,#eef4f8); border:1px solid var(--line2); border-left:5px solid #c0405f;
  border-radius:var(--r); padding:15px 18px; margin:4px 0 24px; text-decoration:none; color:var(--ink);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease}
.af-cta-band:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,40,55,.12); border-left-color:#a5324f}
.af-cta-band:focus-visible{outline:3px solid var(--brand2); outline-offset:2px}
.af-cta-band .ac-ic{width:48px; height:48px; display:flex; align-items:center; justify-content:center; flex:none; overflow:visible}
.af-cta-band .ac-ic img.ic-img{width:100%; height:100%; object-fit:contain; display:block}
.af-cta-band .ac-tx{min-width:0; line-height:1.35}
.af-cta-band .ac-kicker{display:block; color:#a5324f; font-size:12.5px; font-weight:800; letter-spacing:.04em; margin-bottom:1px}
.af-cta-band .ac-tx strong{display:block; font-size:clamp(16.5px,1.9vw,20px); color:var(--ink)}
.af-cta-band .ac-go{font-size:22px; font-weight:800; color:#c0405f; line-height:1; flex:none}
@media(prefers-reduced-motion:reduce){ .af-cta-band{transition:none} .af-cta-band:hover{transform:none} }
@media(max-width:520px){ .af-cta-band{padding:14px 15px; gap:11px} .af-cta-band .ac-go{display:none} }
/* セクション末尾の関連リンク（次のセクションへ誘導） */
.jumplinks{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px}
.jumplinks a{display:inline-flex; align-items:center; gap:6px; font-weight:800; color:var(--brand-d); text-decoration:none;
  font-size:clamp(14.5px,1.5vw,16px); border-bottom:2px solid transparent; transition:border-color .15s}
.jumplinks a:hover{border-bottom-color:var(--brand)}

/* symptom chips */
.symp{display:flex; flex-wrap:wrap; gap:10px; margin:4px 0}
/* 症状チップ：ボタンと紛らわしくないよう、枠線・影なしの淡色タグにする（クリック不可の見た目） */
.symp span img.ic-img{width:1.55em; height:1.55em; object-fit:contain; flex:none; display:block}
.symp span{display:inline-flex; align-items:center; gap:9px; background:var(--bg2); border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:clamp(16px,2.6vw,19px); color:var(--brand-d)}
.symp span .icon{color:var(--brand); width:1.15em; height:1.15em}
.reassure{background:#fff; border:1px solid var(--line); border-left:6px solid var(--brand); border-radius:14px;
  padding:20px 22px; font-size:clamp(16px,1.5vw,18px); box-shadow:0 8px 26px rgba(15,40,55,.06)}
.reassure.urgent{border-left-color:var(--accent)}
.reassure.urgent .ic-inline{color:var(--accent)}

/* media */
.media{display:grid; grid-template-columns:1fr; gap:20px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(18px,3vw,28px); box-shadow:0 14px 40px rgba(20,40,60,.08)}
.media img{width:100%; max-width:300px; height:auto; border-radius:10px; border:1px solid var(--line); justify-self:center; box-shadow:0 8px 24px rgba(15,40,55,.14)}
.media .tag{display:inline-block; background:var(--accent); color:#fff; font-weight:800; font-size:12px; padding:4px 12px; border-radius:999px; margin-bottom:10px}
.media h3{font-size:clamp(18px,2.4vw,23px); margin:.1em 0 .45em; line-height:1.4}
.media a.more{font-weight:800; font-size:clamp(15px,2vw,17px)}
/* media内にbyline（監修医）を置く場合、.media img の300px指定より丸アバターを優先 */
.media .byline img{width:96px; height:96px; border-radius:50%; border:3px solid #fff}

/* fact highlight */
.factbox{background:linear-gradient(160deg,#fff,#f3f9fb); border:1px solid var(--line2); border-radius:var(--r);
  padding:clamp(22px,3vw,30px); text-align:center; box-shadow:0 10px 30px rgba(15,40,55,.07)}
.factbox .big{font-size:clamp(40px,8vw,72px); font-weight:800; color:var(--brand-d); line-height:1}
.factbox p{margin:.5em 0 0; color:var(--sub)}

/* cards */
.cards{display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,22px)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.6vw,28px); transition:transform .2s, box-shadow .2s; box-shadow:0 4px 16px rgba(15,40,55,.05)}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(15,40,55,.12)}
.card.lead-card{border:2px solid var(--brand); box-shadow:0 16px 44px var(--brandglow); position:relative; background:linear-gradient(170deg,#fff,#f2fafc)}
.card .badge{position:absolute; top:-14px; left:22px; background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff; font-weight:800; font-size:12.5px; padding:5px 14px; border-radius:999px; box-shadow:0 6px 16px var(--brandglow); z-index:3}
.card .ic{width:56px; height:56px; border-radius:14px; background:transparent; color:var(--brand-d); display:flex; align-items:center; justify-content:center; margin-bottom:12px; overflow:visible; flex:none}
.card .ic img.ic-img{width:100%; height:100%; object-fit:contain; display:block; padding:0}
.card.lead-card .ic{background:transparent; color:#fff; width:72px; height:72px; box-shadow:none; padding:0}
.card.lead-card .ic .icon{width:30px; height:30px}
.card.lead-card .ic img.ic-img{padding:0}
.card h3{font-size:clamp(19px,2.6vw,24px); margin:0 0 10px; overflow-wrap:anywhere}
.card .pill{display:inline-block; vertical-align:middle; margin-left:8px; white-space:nowrap; font-size:12px; font-weight:800; color:#fff; background:var(--brand); padding:4px 10px; border-radius:7px}
.card .pill.g{background:#7a8794}
.card .pill.r{background:var(--accent)}
.card p{margin:.3em 0 0; color:var(--sub); font-size:clamp(15px,1.4vw,17px)}
.card ul{margin:.6em 0 0; padding-left:1.2em; color:var(--sub); font-size:clamp(14.5px,1.4vw,16px)}
.card ul li{margin:.2em 0}
.card-link{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:800; color:var(--brand-d); text-decoration:none; font-size:clamp(15px,1.6vw,17px); border-bottom:2px solid transparent; transition:border-color .15s}
.card-link:hover{border-bottom-color:var(--brand)}

/* 写真背景カード（#treatments など）：画像を暗くして文字可読性を確保 */
.card.card-photo{position:relative; overflow:hidden; background:var(--navy); border-color:rgba(255,255,255,.12);
  color:#fff; min-height:clamp(220px,28vw,280px); display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:0 10px 28px rgba(8,24,36,.22)}
.card.card-photo .badge{top:16px; left:16px}
.card.card-photo:hover{box-shadow:0 18px 42px rgba(8,24,36,.32)}
.card.card-photo .card-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0}
.card.card-photo .card-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,18,28,.42) 0%, rgba(6,18,28,.72) 42%, rgba(4,14,22,.92) 100%),
    linear-gradient(90deg, rgba(6,18,28,.35) 0%, transparent 55%)}
.card.card-photo .card-body{position:relative; z-index:2}
.card.card-photo h3{color:#fff; text-shadow:0 1px 10px rgba(0,10,18,.55)}
.card.card-photo p{color:#e6eef3; text-shadow:0 1px 8px rgba(0,10,18,.45)}
.card.card-photo p strong{color:#fff}
.card.card-photo .pill{box-shadow:0 2px 8px rgba(0,10,18,.35)}
.card.card-photo .pill.g{background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.28)}
.card.card-photo .card-link{color:#9ae8ff; border-bottom-color:transparent}
.card.card-photo .card-link:hover{border-bottom-color:#9ae8ff; color:#c5f2ff}
.card.card-photo.lead-card{border:2px solid rgba(127,224,255,.55); background:var(--navy);
  min-height:clamp(260px,34vw,340px); box-shadow:0 18px 48px rgba(8,24,36,.35)}
.card.card-photo.lead-card .card-scrim{
  background:
    linear-gradient(180deg, rgba(6,18,28,.38) 0%, rgba(6,18,28,.68) 40%, rgba(4,14,22,.9) 100%),
    linear-gradient(105deg, rgba(6,18,28,.55) 0%, rgba(6,18,28,.15) 50%, transparent 70%)}
@media(min-width:900px){
  .cards .lead-card.card-photo{grid-template-columns:1fr; display:flex}
  .cards .lead-card.card-photo .card-body{max-width:42em}
}
/* whole-card link (article/anchor styled as a clickable card) */
a.card{display:block; color:inherit; text-decoration:none}
a.card:hover .card-link{border-bottom-color:var(--brand)}

/* condition link cards (top page "症状から探す") */
.condgrid{display:grid; grid-template-columns:1fr; gap:clamp(14px,2vw,20px)}
.condcard{display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2.4vw,24px); text-decoration:none; color:var(--ink); transition:transform .2s, box-shadow .2s; box-shadow:0 4px 16px rgba(15,40,55,.05)}
.condcard:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(15,40,55,.12)}
.condcard .ic{flex:none; width:52px; height:52px; border-radius:14px; background:linear-gradient(180deg,#eaf5f9,#dcecf3); color:var(--brand-d); display:flex; align-items:center; justify-content:center}
.condcard .ic-ill{flex:none; width:64px; height:64px; display:block}
.condcard h3{font-size:clamp(18px,2.4vw,21px); margin:0 0 4px}
.condcard p{margin:0; color:var(--sub); font-size:clamp(14px,1.4vw,16px)}
.condcard .go{display:block; margin-top:8px; font-weight:800; color:var(--brand-d); font-size:14.5px}
.condcard.urgent .ic{background:linear-gradient(180deg,#fdeceb,#f9dcd9); color:var(--accent)}

/* 病名から探す（アイコン付きボックス／タイル） */
.pick-head{margin:2em 0 0; font-size:clamp(18px,2.4vw,22px)}
.disease-links{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,14px); margin-top:16px}
.disease-links a{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-s); padding:18px 12px;
  font-weight:700; font-size:clamp(13px,1.4vw,15px); line-height:1.35; color:var(--ink); text-decoration:none;
  box-shadow:0 2px 8px rgba(15,40,55,.05); transition:transform .2s, box-shadow .2s, border-color .2s}
.disease-links a:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,40,55,.12); border-color:var(--line2)}
.disease-links a img{width:clamp(66px,17vw,90px); height:auto; display:block}
@media(min-width:560px){.disease-links{grid-template-columns:repeat(4,1fr)}}

/* metrics (navy band) */
.metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,22px)}
.metric{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); text-align:center}
.metric b{display:block; font-size:clamp(30px,5vw,46px); color:#fff; line-height:1.05; letter-spacing:.01em}
.metric b.txt{font-size:clamp(22px,3.8vw,36px); white-space:nowrap} /* 数字でなく語句の箱：小さめ＆折り返さない */
.metric b .u{font-size:.5em; font-weight:700; color:#8fd6e6; margin-left:2px}
.metric span{font-size:clamp(13px,1.4vw,15px); color:#aec6d4}
.yearbars{margin-top:clamp(20px,3vw,30px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:clamp(18px,2.6vw,26px)}
.ybar{display:flex; align-items:center; gap:14px; margin:11px 0}
.ybar i{font-style:normal; width:72px; font-weight:800; color:#aec6d4; font-size:clamp(14px,1.5vw,16px)}
.ybar .track{flex:1; background:rgba(255,255,255,.1); border-radius:9px; overflow:hidden; height:30px}
.ybar .fill{height:100%; background:linear-gradient(90deg,var(--brand),#28b6d6); display:flex; align-items:center; justify-content:flex-end; color:#fff; font-weight:800; font-size:clamp(13px,1.5vw,15px); padding-right:12px; box-shadow:0 0 18px rgba(40,182,214,.4)}

/* features */
.feat{display:grid; grid-template-columns:1fr; gap:clamp(14px,1.8vw,18px)}
.feat .f{display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.2vw,22px); box-shadow:0 4px 16px rgba(15,40,55,.05)}
.feat .f .ic{flex:none; width:60px; height:60px; border-radius:14px; background:transparent; color:var(--brand-d); display:flex; align-items:center; justify-content:center; overflow:visible}
.feat .f .ic img.ic-img{width:100%; height:100%; object-fit:contain; display:block; padding:0}
.feat .f h3{font-size:clamp(17px,2.2vw,20px); margin:0 0 4px}
.feat .f p{margin:0; color:var(--sub); font-size:clamp(14.5px,1.4vw,16px)}

/* flow */
.flow{display:grid; grid-template-columns:1fr; gap:14px; counter-reset:s}
.flow .step{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px 20px 78px; position:relative; box-shadow:0 4px 16px rgba(15,40,55,.05)}
.flow .step::before{counter-increment:s; content:counter(s); position:absolute; left:18px; top:18px; width:38px; height:38px;
  background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:0 6px 16px var(--brandglow)}
.flow .step h3{font-size:clamp(17px,2.2vw,20px); margin:0 0 4px}
.flow .step p{margin:0; color:var(--sub); font-size:clamp(14.5px,1.4vw,16px)}

/* comparison (狭心症 vs 心筋梗塞) */
.compare{display:grid; grid-template-columns:1fr; gap:16px}
.compare .col{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.6vw,26px); box-shadow:0 4px 16px rgba(15,40,55,.05)}
.compare .col.danger{border:2px solid var(--accent); box-shadow:0 14px 38px rgba(192,57,43,.12)}
.compare .col h3{font-size:clamp(19px,2.6vw,23px); margin:0 0 6px; display:flex; align-items:center; gap:10px}
.compare .col h3 .icon{color:var(--brand)}
.compare .col.danger h3 .icon{color:var(--accent)}
.compare .col .lab{display:inline-block; font-size:12.5px; font-weight:800; color:var(--sub); letter-spacing:.08em; margin-top:12px}
.compare .col .val{font-size:clamp(15px,1.5vw,17px); color:var(--ink); margin:2px 0 0}
.compare .col.danger .val strong{color:var(--accent)}

/* triage / checklist */
.triage{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.8vw,30px); box-shadow:0 8px 26px rgba(15,40,55,.06)}
.triage ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px}
.triage li{display:flex; gap:12px; align-items:flex-start; font-size:clamp(15px,1.5vw,17px)}
.triage li .icon{flex:none; color:var(--brand); margin-top:.2em}

/* complications / spec rows */
.comp{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 8px 26px rgba(15,40,55,.06)}
.comp .row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px clamp(16px,2.4vw,24px); border-top:1px solid var(--line)}
.comp .row:first-child{border-top:0}
.comp .row span:first-child{color:var(--ink); font-size:clamp(15px,1.5vw,17px)}
.comp .row span:last-child{font-weight:800; color:var(--brand-d); white-space:nowrap; font-size:clamp(15px,1.6vw,18px)}

/* price card (SORA) */
.pricecard{background:linear-gradient(155deg,#ffffff,#eaf5f9); border:2px solid var(--brand); border-radius:22px; padding:clamp(22px,3.2vw,34px); box-shadow:0 20px 54px var(--brandglow)}
.pricecard h3{font-size:clamp(20px,2.8vw,25px); margin:0 0 4px}
.pricerows{display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px}
.pricerow{display:flex; justify-content:space-between; align-items:baseline; gap:14px; background:#fff; border:1px solid var(--line2); border-radius:12px; padding:13px 16px}
.pricerow span{color:var(--sub); font-weight:700; font-size:clamp(14.5px,1.5vw,16px)}
.pricerow b{color:var(--brand-d); font-size:clamp(18px,2.4vw,22px); white-space:nowrap}
.pricerow b .u{font-size:.6em; font-weight:700; margin-left:2px}

/* speed highlight (1回で完結) */
.speed-card{display:grid; grid-template-columns:1fr; gap:18px; background:linear-gradient(155deg,#ffffff 0%,#eaf5f9 100%); border:2px solid var(--brand); border-radius:22px; padding:clamp(22px,3.4vw,40px); box-shadow:0 20px 54px var(--brandglow)}
.speed-card .ic-lg{width:80px; height:80px; border-radius:18px; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:none; flex:none; overflow:visible}
.speed-card .ic-lg .icon{width:34px; height:34px}
.speed-card .ic-lg img.ic-img{width:100%; height:100%; object-fit:contain; display:block; padding:0}
.speed-card h2{margin:.1em 0 .35em}
.speed-steps{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px}
.speed-steps span.s{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line2); border-radius:12px; padding:11px 16px; font-weight:800; color:var(--brand-d); font-size:clamp(14px,1.6vw,16px)}
.speed-steps span.s .icon{color:var(--brand)}
.speed-steps .arr{color:var(--brand); font-weight:800; font-size:18px}

/* footer */
.exterior{display:block; width:100%; height:clamp(170px,26vw,300px); object-fit:cover; object-position:center 38%}
footer.site{background:linear-gradient(160deg,var(--navy2),var(--navy)); color:#cdd8e0; padding:clamp(36px,5vw,56px) 0 30px}
footer.site h2{color:#fff; font-size:clamp(18px,2.4vw,22px); margin:0 0 12px}
footer.site a{color:#7fd2e6}
footer.site .fcontact{font-size:clamp(15px,1.5vw,17px); line-height:2.1}
footer.site .fcontact strong{color:#fff}
footer.site .tel-big{font-size:clamp(22px,4vw,28px); font-weight:800; color:#fff; letter-spacing:.02em}
.fnav{display:flex; flex-wrap:wrap; gap:8px 20px; margin:18px 0 6px}
.fnav a{font-weight:700}
.ftel{margin-top:8px}
.copyright{margin-top:22px; font-size:12px; color:#7f93a1}

/* mobile call bar */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff; text-decoration:none; text-align:center;
  font-weight:800; font-size:clamp(16px,4.4vw,19px); padding:15px; box-shadow:0 -3px 16px rgba(0,0,0,.2)}
.callbar .icon{width:1.1em; height:1.1em; flex:none} /* 白のSVG電話アイコン（currentColor=#fff） */

/* ===== desktop layouts ===== */
@media(min-width:720px){ .speed-card{grid-template-columns:auto 1fr; align-items:start; gap:28px} }
@media(min-width:820px){
  .split.two{grid-template-columns:1.3fr 1fr}
  .cards.c2{grid-template-columns:repeat(2,1fr)}
  .cards.c3{grid-template-columns:repeat(3,1fr)}
  .cards .lead-card{grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center}
  .cards .lead-card .ic{margin-bottom:0}
  /* 写真背景の lead はアイコン列レイアウトにせず、全文＋背景の1カラム */
  .cards .lead-card.card-photo{display:flex; flex-direction:column; justify-content:flex-end; grid-template-columns:none}
  .condgrid.c2{grid-template-columns:repeat(2,1fr)}
  .compare.two{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metrics.c3{grid-template-columns:repeat(3,1fr)}
  .feat{grid-template-columns:1fr 1fr}
  .triage ul.two{grid-template-columns:1fr 1fr; gap:10px 26px}
  .flow{grid-template-columns:repeat(4,1fr)}
  .flow.f5{grid-template-columns:repeat(5,1fr)}
  .flow .step{padding:64px 20px 22px}
  .flow .step::before{left:20px; top:18px}
  .pricerows.two{grid-template-columns:1fr 1fr}
  .media{grid-template-columns:300px 1fr}
  .media img{justify-self:start}
}
@media(min-width:900px){
  .mainnav{display:flex}
  .page-hero .hwrap{grid-template-columns:1.25fr .9fr; gap:42px}
}
@media(min-width:1000px){
  .hero .wrap{grid-template-columns:1.45fr .9fr; align-items:center; gap:48px}
  .hero-photo{aspect-ratio:2.15 / 1}
}
@media(max-width:899px){
  .navtoggle{display:inline-flex}
  .mainnav{position:absolute; top:100%; left:0; right:0; z-index:29; flex-direction:column; gap:0;
    background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 16px 34px rgba(15,40,55,.14); padding:6px clamp(16px,4vw,40px) 12px}
  .mainnav.open{display:flex}
  .mainnav a{font-size:16px; padding:14px 10px; border-radius:10px; border-bottom:1px solid var(--line); white-space:normal}
  .mainnav a:last-child{border-bottom:0}
}
@media(max-width:819px){
  .callbar{display:flex}
  body{padding-bottom:60px}
  .brand small{display:none}
  .brand{font-size:14px}
  .telbtn{font-size:13.5px; padding:9px 13px}
  .tl-pre{display:none}
}
@media(max-width:560px){
  .telbtn{display:none}
  .brand{font-size:16px}
}
@media(max-width:430px){
  .callbar{font-size:15px}
  .hero h1{font-size:clamp(25px,6.6vw,32px)}
  .hero .wrap{padding-top:26px}
}

/* =========================================================
   ページ識別用ヒーロー色替え（tint variants）
   トップ=.hero（青緑・電話カード付き）はトップ専用。
   下層は .page-hero ＋ tint-* で疾患ごとに色相を変え、
   「ページが変わった」ことがひと目で分かるようにする。
   ========================================================= */
.page-hero .kicker{border-left:4px solid var(--brand)}
.page-hero.tint-red{background:
  radial-gradient(1100px 460px at 85% -20%, rgba(192,57,43,.16), transparent 60%),
  linear-gradient(165deg,#fdf0ee 0%,#fbf6f4 60%,#ffffff 100%)}
.page-hero.tint-red .kicker{color:#a93226; border-left-color:#c0392b}
.page-hero.tint-red h1 .em{color:#a93226}
.page-hero.tint-blue{background:
  radial-gradient(1100px 460px at 85% -20%, rgba(37,99,235,.16), transparent 60%),
  linear-gradient(165deg,#edf3fd 0%,#f4f8fd 60%,#ffffff 100%)}
.page-hero.tint-blue .kicker{color:#1d4ed8; border-left-color:#2563eb}
.page-hero.tint-blue h1 .em{color:#1d4ed8}
.page-hero.tint-violet{background:
  radial-gradient(1100px 460px at 85% -20%, rgba(124,58,237,.15), transparent 60%),
  linear-gradient(165deg,#f4f0fd 0%,#f8f6fd 60%,#ffffff 100%)}
.page-hero.tint-violet .kicker{color:#6d28d9; border-left-color:#7c3aed}
.page-hero.tint-violet h1 .em{color:#6d28d9}
.page-hero.tint-gold{background:
  radial-gradient(1100px 460px at 85% -20%, rgba(176,125,18,.16), transparent 60%),
  linear-gradient(165deg,#fdf7ea 0%,#fdfaf2 60%,#ffffff 100%)}
.page-hero.tint-gold .kicker{color:#8f6410; border-left-color:#b07d12}
.page-hero.tint-gold h1 .em{color:#8f6410}
.page-hero.tint-green{background:
  radial-gradient(1100px 460px at 85% -20%, rgba(21,128,61,.15), transparent 60%),
  linear-gradient(165deg,#eefaf1 0%,#f4fbf6 60%,#ffffff 100%)}
.page-hero.tint-green .kicker{color:#15803d; border-left-color:#16a34a}
.page-hero.tint-green h1 .em{color:#15803d}
.page-hero.tint-orange{background:
  radial-gradient(1100px 460px at 85% -20%, rgba(194,87,14,.15), transparent 60%),
  linear-gradient(165deg,#fdf3ec 0%,#fdf8f3 60%,#ffffff 100%)}
.page-hero.tint-orange .kicker{color:#9a4a0e; border-left-color:#c2570e}
.page-hero.tint-orange h1 .em{color:#9a4a0e}

/* ===== 特設ページ表示（ラベル＋戻るボタン） ===== */
.page-label{display:flex; width:max-content; max-width:100%; align-items:center; gap:8px;
  background:linear-gradient(180deg,var(--brand2),var(--brand)); color:#fff;
  font-weight:800; font-size:clamp(12px,2.2vw,13.5px); letter-spacing:.08em;
  padding:7px 16px; border-radius:999px; margin-bottom:12px; box-shadow:0 6px 16px rgba(15,40,55,.18)}
.page-hero.tint-blue .page-label{background:linear-gradient(180deg,#2563eb,#1d4ed8)}
.page-hero.tint-violet .page-label{background:linear-gradient(180deg,#7c3aed,#6d28d9)}
.crumbs-row{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-bottom:14px}
.crumbs-row .crumbs{margin-bottom:0}
.btn.sm{padding:9px 16px; font-size:clamp(13.5px,1.5vw,15px); border-radius:11px}

/* ===== FAQ（開閉式） ===== */
.faq-section{background:linear-gradient(180deg,#f7fbfc 0%,#f2f8fa 100%);scroll-margin-top:84px}
.faq{display:grid; grid-template-columns:1fr; gap:12px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 4px 16px rgba(15,40,55,.05); overflow:hidden}
.faq details[open]{border-color:var(--line2); box-shadow:0 10px 28px rgba(15,40,55,.09)}
.faq summary{cursor:pointer; list-style:none; display:flex; gap:12px; align-items:flex-start;
  padding:16px clamp(16px,2.4vw,22px); font-weight:800; font-size:clamp(15px,1.6vw,17px); line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qm{flex:none; color:var(--brand); font-weight:800}
.faq summary::after{content:"＋"; margin-left:auto; color:var(--brand); font-weight:800; flex:none}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 clamp(16px,2.4vw,22px) 18px; color:var(--sub); font-size:clamp(14.5px,1.5vw,16px)}
.faq .a p{margin:.35em 0}
.faq .a .note{font-size:12.5px}

/* ===== 導入機器ラインナップ（使用機器） ===== */
.devsub{display:flex; align-items:flex-start; gap:13px; margin:clamp(28px,3.4vw,42px) 0 clamp(14px,1.8vw,18px)}
.devsub:first-of-type{margin-top:clamp(20px,2.4vw,28px)}
.devsub .n{flex:none; width:38px; height:38px; border-radius:11px; background:linear-gradient(180deg,var(--brand2),var(--brand));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:0 6px 16px var(--brandglow)}
.devsub .t{font-size:clamp(18px,2.4vw,22px); font-weight:800; color:var(--brand-d); line-height:1.3}
.devsub .t .s{display:block; font-size:12.5px; color:var(--sub); font-weight:700; letter-spacing:.06em; margin-top:2px}
.devcard{display:flex; flex-direction:column}
.devfig{display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; width:100%;
  border-radius:12px; margin-bottom:15px; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%,#f4fafc,#e4edf1)}
.devfig img{width:100%; height:100%; object-fit:contain; display:block; padding:6px}
.devfig.dark{background:radial-gradient(120% 120% at 50% 25%,#12384a,#0a1c28)}
.devfig.ph{background:linear-gradient(160deg,#eaf5f9,#dbe9ef)}
.devfig.ph img{width:44%; height:44%; object-fit:contain; padding:0; opacity:.9}
.devfig .coming{display:inline-flex; align-items:center; color:#7b8f9c; font-weight:800; font-size:13.5px;
  letter-spacing:.18em; text-indent:.18em; padding:10px 20px; border:2px dashed #bfd3dc; border-radius:999px; background:rgba(255,255,255,.6)}
.imgcredit{margin:-12px 0 10px; font-size:10.5px; color:#93a7b2; text-align:right; letter-spacing:.03em}
.devcard .mk{display:block; font-size:12.5px; font-weight:800; color:var(--brand); letter-spacing:.05em; margin:-4px 0 8px}
.devcard p{flex:1 1 auto}

/* af-hero-cta の紫バリアント（PFA特設ページへの帯） */
.af-hero-cta.pfa-cta{border-left-color:#a78bfa; background:linear-gradient(135deg,rgba(76,42,153,.97),rgba(14,35,48,.95))}
.af-hero-cta.pfa-cta::before{background:linear-gradient(90deg,rgba(139,92,246,.28),transparent 46%)}
.af-hero-cta.pfa-cta .af-cta-icon{color:#ddd1ff}
.af-hero-cta.pfa-cta .af-cta-kicker{color:#ddd1ff}
.af-hero-cta.pfa-cta .af-cta-sub{color:#e7defa}
.af-hero-cta.pfa-cta .af-cta-go{color:#c4b0ff}
.af-hero-cta.pfa-cta:focus-visible{outline-color:#c4b0ff}

/* ===== PFA特設：明るい紫系ヒーロー（白背景の製品写真＋薄紫ベール・濃色文字） ===== */
.hero-full.hero-bright{background:#f6f3fd}
.hero-full.hero-bright .hero-scrim{
  background:
    linear-gradient(90deg, rgba(248,245,255,.94) 0%, rgba(248,245,255,.80) 38%, rgba(248,245,255,.34) 68%, rgba(248,245,255,.10) 100%),
    linear-gradient(0deg, rgba(246,243,253,.5) 0%, rgba(246,243,253,0) 45%)}
.hero-full.hero-bright h1{color:#241b3e; text-shadow:0 1px 10px rgba(255,255,255,.6)}
.hero-full.hero-bright h1 .em{color:#6d28d9}
.hero-full.hero-bright .lead{color:#3a3153; text-shadow:0 1px 6px rgba(255,255,255,.55)}
.hero-full.hero-bright .lead strong{color:#241b3e}
.hero-full.hero-bright .kicker{background:rgba(255,255,255,.78); border-color:rgba(124,58,237,.30); color:#6d28d9; box-shadow:0 2px 10px rgba(90,60,160,.12)}
.hero-full.hero-bright .crumbs{color:#6a6284}
.hero-full.hero-bright .crumbs a{color:#7a5cc4}
.hero-full.hero-bright .crumbs a:hover{color:#4c2a99}
.hero-full.hero-bright .crumbs span.sep{color:rgba(110,100,140,.55)}
.hero-full.hero-bright .crumbs span:not(.sep){color:#3a3153}
.hero-bright .page-label{background:linear-gradient(180deg,#7c3aed,#6d28d9)}
.hero-bright .hero-jumpnav .hj-label{color:#6a6284; text-shadow:0 1px 6px rgba(255,255,255,.6)}
.hero-bright .hero-jumpnav .hj-label .icon{color:#7c3aed}
.hero-bright .hero-jumpnav .jumpnav a{background:rgba(255,255,255,.80); border-color:rgba(109,40,217,.16); color:#3a3153; text-shadow:none; backdrop-filter:none}
.hero-bright .hero-jumpnav .jumpnav a .icon{color:#7c3aed}
.hero-bright .hero-jumpnav .jumpnav a img.ic-img{filter:none}
.hero-bright .hero-jumpnav .jumpnav a:hover{background:#fff; color:#241b3e; border-color:#7c3aed}
.hero-bright .hero-jumpnav .jumpnav a:hover .icon{color:#6d28d9}
@media(max-width:959px){
  .hero-full.hero-bright .hero-scrim{background:linear-gradient(180deg, rgba(248,245,255,.90) 0px, rgba(248,245,255,.82) 280px, rgba(248,245,255,0) 480px)}
}