/* ============================================================
   スジミチ LP ― Editorial（フラット誌面・脱AIスロップ）
   方針: グラデ/ドロップシャドウ/過度な角丸を排除。
        ヘアライン罫・非対称グリッド・極太タイポ・通し番号で誌面感。
        画像フレームは影/角丸/背景なしの完全フラット。
   ============================================================ */
:root{
  --ink:#16181F; --ink-2:#3C414E; --ink-3:#6E7482;
  --navy:#1A2150; --navy-ink:#10142E;
  --cyan:#0FA3C9;            /* 単色フラットのアクセント（グラデにしない） */
  --green:#15803D; --amber:#A86A12; --red:#C8362F;
  --paper:#F1EFE7; --paper-2:#E9E6DB; --surface:#FBFAF6;
  --rule:#16181F;           /* ヘアライン罫（濃いめ・誌面感） */
  --rule-soft:#D9D6CB;
  --sans:"Zen Kaku Gothic New",-apple-system,"Segoe UI",Meiryo,sans-serif;
  --grot:"Schibsted Grotesk",var(--sans);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1140px,90vw);margin:0 auto}
.wrap-narrow{width:min(780px,90vw)}
b{font-weight:700}
.dot{color:var(--cyan)}

/* tabular numerals for data-y bits */
.hero-facts,.pc-price,.shead-no,.step-n,.vf-no,.vr-no,.mail-sample{font-variant-numeric:tabular-nums}

/* ===== buttons（フラット・角は控えめ） ===== */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:700;font-size:1rem;padding:16px 26px;border-radius:3px;transition:background-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease);cursor:pointer;border:1.5px solid var(--ink);line-height:1}
.btn .arr{font-family:var(--grot);transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-lg{font-size:1.06rem;padding:19px 38px}

/* ===== Nav（ソリッド紙・ヘアライン） ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav-logo img{height:48px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:.4em;background:var(--ink);color:#fff!important;padding:10px 18px;border-radius:3px;font-weight:700!important;font-size:.88rem!important}
.nav-cta:hover{background:var(--navy)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Hero（非対称・フラット紙） ===== */
.hero{padding:120px 0 0;background:var(--paper)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;padding-bottom:40px}
.hero-kicker{font-size:.92rem;font-weight:700;letter-spacing:.08em;color:var(--ink-2);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.hero-kicker .dot{font-size:.6rem}
.hero-h1{font-weight:900;font-size:clamp(3rem,7vw,5.6rem);line-height:1.04;letter-spacing:-.02em;margin-bottom:26px}
.hero-h1 .period{color:var(--cyan)}
.hero-sub{font-size:1.08rem;color:var(--ink-2);max-width:34em;margin-bottom:30px}
.hero-sub b{color:var(--ink)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:36px}
.hero-facts{display:flex;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hero-facts div{padding:16px 22px 16px 0;margin-right:22px;border-right:1px solid var(--rule-soft)}
.hero-facts div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-facts dt{font-size:.76rem;color:var(--ink-3);margin-bottom:4px}
.hero-facts dd{font-family:var(--grot);font-weight:800;font-size:1.3rem;color:var(--navy)}
.hero-cap{font-size:.82rem;color:var(--ink-3);margin-top:12px}
.hero-rule{height:1px;background:var(--rule)}
.hero-tags{display:flex;align-items:center;gap:18px;padding:18px 0;flex-wrap:wrap}
.hero-tags span{font-weight:700;font-size:1.02rem;letter-spacing:.04em}
.hero-tags span:not(:last-of-type)::after{content:"／";color:var(--rule-soft);margin-left:18px;font-weight:400}
.hero-tags em{font-style:normal;font-size:.82rem;color:var(--ink-3);margin-left:auto}

/* ===== 画像フレーム（完全フラット：影/角丸/背景なし。誌面コンプ風） ===== */
.frame{position:relative;background:transparent}
.frame.ar-16x9{aspect-ratio:16/9}
.frame.ar-4x3{aspect-ratio:4/3}
.frame.ar-3x4{aspect-ratio:3/4}
.frame.ar-1x1{aspect-ratio:1/1}
.frame.ar-21x9{aspect-ratio:21/9}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame img[src*="img-01-"],
.frame img[src*="img-04-"],
.frame img[src*="img-05-"],
.frame img[src*="img-06-"],
.frame img[src*="img-07-"],
.frame img[src*="img-10-"],
.frame img[src*="img-11-"]{object-fit:contain;background:#fff}
.frame:has(img) .ph,.frame:has(img)::before,.frame:has(img)::after{display:none}
/* トンボ（印刷の角トンボ＝人が組んだ誌面の質感／脱AI） */
.frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--ink);border-style:solid;z-index:2}
.frame::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.frame::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
/* プレースホルダ（差し込みメモ）：ベタ面＋画像アイコン */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:11px;padding:9% 9%;background:var(--paper-2);border:1px solid var(--ink)}
.ph::before{content:"";width:34px;height:34px;background:var(--ink);-webkit-mask:var(--img-icon) center/contain no-repeat;mask:var(--img-icon) center/contain no-repeat;opacity:.32;position:absolute;top:9%;left:9%}
.ph-no{font-family:var(--grot);font-weight:800;font-size:.78rem;letter-spacing:.12em;color:var(--ink);align-self:flex-start;position:absolute;top:9%;right:9%;border:1px solid var(--ink);padding:3px 9px}
.ph-memo{font-size:.92rem;color:var(--ink-2);line-height:1.65;max-width:34em}
.ph-memo b{color:var(--ink)}
.ph-spec{font-family:var(--grot);font-size:.74rem;color:var(--ink-3);letter-spacing:.04em;border-top:1px solid var(--rule-soft);padding-top:9px}
.frame.on-ink::before,.frame.on-ink::after{border-color:rgba(255,255,255,.7)}
.frame.on-ink .ph{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.45)}
.frame.on-ink .ph::before{background:#fff;opacity:.4}
.frame.on-ink .ph-no{color:#fff;border-color:rgba(255,255,255,.6)}
.frame.on-ink .ph-memo{color:rgba(255,255,255,.85)}
.frame.on-ink .ph-memo b{color:#fff}
.frame.on-ink .ph-spec{color:rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.2)}
:root{--img-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E")}

/* ===== セクション枠組み ===== */
.sec{padding:92px 0;border-top:1px solid var(--rule)}
.sec-paper2{background:var(--paper-2)}
.sec-ink{background:var(--navy);color:#fff;border-top:1px solid var(--navy)}
.shead{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start;margin-bottom:50px}
.shead-no{font-family:var(--grot);font-weight:800;font-size:2.4rem;line-height:1;color:var(--cyan);padding-top:6px}
.shead-no.light{color:var(--cyan)}
.eyebrow{font-size:.82rem;font-weight:700;letter-spacing:.18em;color:var(--ink-3);margin-bottom:14px;text-transform:uppercase}
.eyebrow.light{color:var(--cyan)}
.shead-h2{font-weight:900;font-size:clamp(1.8rem,3.8vw,2.7rem);line-height:1.32;letter-spacing:-.01em}
.shead-h2.light{color:#fff}
.shead-lead{font-size:1.05rem;color:var(--ink-2);margin-top:14px}
.sec-ink .shead-lead{color:rgba(255,255,255,.8)}

/* 課題 */
.problem-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:46px;align-items:start}
.checks{list-style:none;display:flex;flex-direction:column}
.checks li{display:flex;align-items:flex-start;gap:14px;font-size:1.06rem;font-weight:500;padding:19px 0;border-bottom:1px solid var(--rule-soft)}
.checks li:first-child{border-top:1px solid var(--rule-soft)}
.ck{flex-shrink:0;width:22px;height:22px;border:2px solid var(--ink-3);position:relative;margin-top:4px}
.ck::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--cyan);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:1}

/* 放置コスト */
.cost-row{display:grid;grid-template-columns:1fr .8fr;gap:46px;align-items:start}
.cost-list{list-style:none;counter-reset:c}
.cost-list li{counter-increment:c;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.cost-list li:first-child{border-top:1px solid rgba(255,255,255,.16)}
.cost-list li::before{content:counter(c,decimal-leading-zero);font-family:var(--grot);font-weight:800;color:var(--cyan);font-size:1.1rem}
.cost-list b{display:block;font-size:1.16rem;margin-bottom:2px}
.cost-list span{color:rgba(255,255,255,.78);font-size:.96rem}
.cost-list li{grid-template-columns:auto 1fr}
.cost-list li>b,.cost-list li>span{grid-column:2}
.cost-list li::before{grid-row:1/3;grid-column:1}

/* flow */
.flow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:30px;border:1px solid var(--rule);background:var(--surface);margin-bottom:30px}
.flow-start{font-weight:800;font-size:1.05rem;color:#fff;background:var(--navy);padding:13px 22px;white-space:nowrap}
.flow-arr{font-family:var(--grot);font-weight:700;font-size:1.3rem;color:var(--ink-3)}
.flow-chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* 7つの価値：代表3機能（画像＋テキスト 交互） */
.value-feature{display:flex;flex-direction:column;gap:40px;margin-bottom:50px}
.vf{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.vf .frame{align-self:stretch}
.vf-rev .frame{order:2}
.vf-no{font-family:var(--grot);font-weight:800;font-size:1.1rem;color:var(--cyan);display:block;margin-bottom:10px}
.vf-txt h3{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:900;line-height:1.4;margin-bottom:12px}
.vf-txt p{font-size:1rem;color:var(--ink-2)}
/* 残り4機能：罫線リスト */
.value-rest{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;border-top:1px solid var(--rule)}
.vr{padding:26px 0;border-bottom:1px solid var(--rule-soft)}
.vr-no{font-family:var(--grot);font-weight:700;font-size:.9rem;color:var(--ink-3)}
.vr p{font-size:.94rem;color:var(--ink-2)}

/* 毎朝メール spotlight */
.mail-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.mail-txt .shead-no{margin-bottom:14px}
.mail-sample{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:#fff;background:rgba(255,255,255,.08);border-left:3px solid var(--cyan);padding:14px 18px;margin:8px 0 18px;line-height:1.5}
.mail-sample .g{color:#5fd39a}
.mail-lead{color:rgba(255,255,255,.82);font-size:1rem}

/* 差別化 table（フラット罫） */
.table-wrap{border:1px solid var(--rule);overflow-x:auto}
.diff{width:100%;border-collapse:collapse;background:var(--surface);min-width:560px}
.diff th,.diff td{padding:18px 22px;text-align:left;font-size:.98rem;border-bottom:1px solid var(--rule-soft)}
.diff thead th{font-size:.84rem;color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--rule)}
.diff th.hi,.diff td.hi{background:rgba(15,163,201,.08)}
.diff thead th.hi{color:var(--cyan)}
.diff td:first-child{font-weight:700;color:var(--ink-2)}
.diff td.hi{font-weight:700;color:var(--ink)}
.diff tbody tr:last-child td{border-bottom:0}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule-soft);margin-bottom:30px}
.steps li{padding:26px 22px;border-right:1px solid var(--rule-soft);border-top:2px solid var(--ink)}
.step-n{font-family:var(--grot);font-weight:800;font-size:1.6rem;color:var(--cyan);display:block;margin-bottom:12px}
.steps h3{font-size:1.06rem;font-weight:800;margin-bottom:8px}
.steps p{font-size:.9rem;color:var(--ink-2)}

/* 料金 */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.pcard{padding:34px 28px;border-right:1px solid var(--rule-soft);position:relative;background:var(--surface)}
.pcard:last-child{border-right:0}
.pcard-hi{background:var(--paper-2);border-top:3px solid var(--cyan);margin-top:-1px}
.pc-badge{position:absolute;top:14px;right:16px;background:var(--cyan);color:#fff;font-size:.72rem;font-weight:700;padding:4px 11px}
.pc-name{font-size:1rem;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.pc-price{font-family:var(--grot);font-weight:800;font-size:1.9rem;margin-bottom:14px;color:var(--navy)}
.pc-price span{font-size:.78rem;color:var(--ink-3);font-weight:500;font-family:var(--sans)}
.pc-desc{font-size:.92rem;color:var(--ink-2)}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{list-style:none;cursor:pointer;padding:22px 4px;font-weight:700;font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s var(--ease);flex-shrink:0;margin-top:-3px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq details div{padding:0 4px 22px;color:var(--ink-2);font-size:.96rem}

/* CTA（ソリッドnavy・フラット） */
.cta{background:var(--navy);color:#fff;padding:96px 0;text-align:center}
.cta-h2{font-weight:900;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.26;margin:10px 0 18px}
.cta-sub{font-size:1.04rem;color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 32px}
.cta .btn-primary{background:#fff;color:var(--navy);border-color:#fff}
.cta .btn-primary:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}
.cta-note{margin-top:16px;font-size:.88rem;color:rgba(255,255,255,.6)}
.cta .eyebrow{display:inline-block}

/* footer */
.foot{background:var(--navy-ink);color:rgba(255,255,255,.66);padding:44px 0 28px}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand img{height:30px;width:auto;display:block;margin-bottom:8px}
.foot-brand p{font-size:.84rem;color:rgba(255,255,255,.5)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-size:.9rem;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-copy{margin-top:18px;font-size:.8rem;color:rgba(255,255,255,.4)}

/* float CTA */
.float-cta{display:none;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:40;background:var(--navy);color:#fff;font-weight:700;padding:13px 32px;border-radius:3px;border:1px solid #fff}

/* reveal（控えめ＝テンプレ感を出さない） */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== responsive ===== */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:40px;align-items:start}
  .hero-visual{max-width:440px}
  .problem-layout,.cost-row,.mail-inner{grid-template-columns:1fr;gap:34px}
  .vf,.vf-rev .frame{grid-template-columns:1fr;order:initial}
  .vf{gap:22px}
  .vf .frame{order:0}
  .steps{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr}
  .pcard{border-right:0;border-bottom:1px solid var(--rule-soft)}
}
@media (max-width:640px){
  .nav-links{position:fixed;top:76px;left:0;right:0;flex-direction:column;background:var(--paper);padding:16px 22px;gap:4px;border-bottom:1px solid var(--rule);transform:translateY(-135%);transition:transform .35s var(--ease);align-items:stretch}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:12px 4px}
  .nav-cta{text-align:center;justify-content:center;margin-top:6px}
  .nav-burger{display:flex}
  .sec{padding:60px 0}
  .hero{padding:104px 0 0}
  .shead{grid-template-columns:1fr;gap:8px;margin-bottom:34px}
  .shead-no{font-size:1.7rem}
  .value-rest,.steps{grid-template-columns:1fr}
  .hero-facts{flex-wrap:wrap}
  .hero-facts div{border-right:0;width:100%;margin-right:0;padding-right:0}
  .float-cta{display:block}
  body{padding-bottom:84px}
  .frame.ar-21x9{aspect-ratio:4/3}
  .frame.ar-21x9 img{object-position:center}
  .foot-inner{flex-direction:column;align-items:flex-start}
  .btn{width:100%;justify-content:center}
  .hero-cta{flex-direction:column}
}

/* CTA内の画像フレーム余白 */
.cta-frame{margin-top:44px;text-align:left}

/* ============================================================
   Round1 修正：脱AI(ブランドモチーフ実体化)＋a11y＋ビジュアル
   ============================================================ */
:root{--ink-3:#5A606E}

/* 信号●（赤/黄/緑）をeyebrowに常設＝ブランド固有モチーフ */
.eyebrow{position:relative;padding-left:32px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:8px;
  background:
    radial-gradient(circle 3.4px at 4px 50%,var(--red) 98%,transparent),
    radial-gradient(circle 3.4px at 12px 50%,var(--amber) 98%,transparent),
    radial-gradient(circle 3.4px at 20px 50%,var(--green) 98%,transparent)}

/* 「筋道」＝通し番号を貫く一本の線＋停車ノード（スクロールで道を辿る） */
.shead-no{position:relative;color:var(--navy)}
.shead-no.light{color:#fff}
.shead-no::before{content:"";position:absolute;left:12px;top:-92px;width:2px;height:66px;background:var(--cyan)}
.shead-no::after{content:"";position:absolute;left:6px;top:-28px;width:14px;height:14px;border:2px solid var(--cyan);border-radius:50%;background:var(--paper)}
.sec-paper2 .shead-no::after{background:var(--paper-2)}
.sec-ink .shead-no::after{background:var(--navy)}

/* 見出しを締める／cyanを導線色に */
.shead-h2{line-height:1.2;letter-spacing:-.02em}
.nav-links a:hover{color:var(--cyan)}
.diff thead th.hi{border-bottom:2px solid var(--cyan)}
.steps li{border-top:3px solid var(--ink)}

/* 角丸ゼロ＝印刷物の質感に振り切る（AIのデフォルト3pxを排除） */
.btn,.nav-cta,.pc-badge,.float-cta,.foot-brand img{border-radius:0}

/* focus 可視化（a11y） */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* 料金：均等3カード(AI典型)→非対称＋中央せり出し */
.price-grid{grid-template-columns:.86fr 1.28fr .86fr}
.pcard-hi{margin:-16px 0;padding:48px 30px;border:2px solid var(--cyan);z-index:1}

/* 代表3機能：3つ目で型を破る */
.vf-big{grid-template-columns:1.45fr .55fr}

/* :has非対応の保険（画像挿入時 .has-img をJS付与） */
.frame.has-img .ph,.frame.has-img::before,.frame.has-img::after{display:none}

/* footer 可読性/タップ */
.foot-copy{color:rgba(255,255,255,.62)}
.foot-links a{padding:6px 0;display:inline-block}

/* reduced-motion 補完 */
@media (prefers-reduced-motion:reduce){
  .faq summary::after,.nav-burger span,.btn .arr{transition:none}
  .reveal{transition-delay:0!important}
}
@media (max-width:640px){ .shead-no::before{display:none} }

/* インラインCTAバンド（中盤の温まった瞬間に押せる導線） */
.midcta{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:46px}
.midcta p{font-weight:700;font-size:1.08rem}
.midcta .btn{flex-shrink:0}
.sec-paper2 .midcta{border-color:var(--rule-soft)}

/* ============================================================
   Round2 修正：筋道線の連続化／モバイル崩れ／flow路線図／a11y
   ============================================================ */
/* 筋道線をセクション上罫まで届かせ、各セクションで同位置に連続させる */
.shead-no::before{top:-92px;height:92px;left:13px}
.shead-no::after{left:7px;top:-30px}
.sec-ink .shead-no::after{background:var(--navy-ink)}
/* ヒーローにも起点ノード（道はここから始まる） */
.trisig{display:inline-block;width:24px;height:8px;vertical-align:middle;margin-right:6px;
  background:
    radial-gradient(circle 3.4px at 4px 50%,var(--red) 98%,transparent),
    radial-gradient(circle 3.4px at 12px 50%,var(--amber) 98%,transparent),
    radial-gradient(circle 3.4px at 20px 50%,var(--green) 98%,transparent)}
/* 見出し 日本語最適化 */
.shead-h2{line-height:1.28;letter-spacing:-.01em}
.hero-h1{letter-spacing:-.015em}
/* vf-big テキスト圧縮の緩和 */
.vf-big{grid-template-columns:1.25fr .75fr}
/* flow 路線図化（停車ノード） */
/* on-ink 補助テキスト可読性 */
.frame.on-ink .ph-spec,.cta-note,.foot-copy{color:rgba(255,255,255,.72)}
/* 運営情報 */
.foot-note{margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.6)}
/* CTA下の予備導線・限定性 */
.cta-alt{margin-top:14px;font-size:.86rem;color:rgba(255,255,255,.72)}
.cta-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* モバイル：価格せり出しの漏れ修正＋reduced-motion scroll */
@media(max-width:960px){.pcard-hi{margin:0;padding:34px 28px;border-width:1px;border-top:3px solid var(--cyan)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   Round3 修正：ロゴ実寸化／信号を生きた指標に／flow路線図(a11y)／微調整
   ============================================================ */
/* 余白除去後の実寸でヘッダーロゴを最適サイズに */
.nav-logo img{height:50px}
/* 筋道線：sec-ink(navy)上で沈むため明色化 */
.sec-ink .shead-no::before{background:#48C7E6}
.sec-ink .shead-no::after{border-color:#48C7E6}
/* mobileは線・ノードとも非表示（線なしノードの孤立回避） */
@media (max-width:640px){ .shead-no::before,.shead-no::after{display:none} }
/* 信号を「生きた指標」に：道を進むほど 赤→黄→緑（ノード色をセクションに連動） */
#problem .shead-no::after{border-color:var(--red)}
#cost    .shead-no::after{border-color:var(--amber)}
#how .shead-no::after,#value .shead-no::after,#diff .shead-no::after,#flow .shead-no::after,#price .shead-no::after{border-color:var(--green)}
/* flow を路線図化（ol/li＋駅をつなぐ線路） */
.flow-chain{list-style:none;margin:0;padding:0;position:relative}
.flow-chain::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--rule-soft);transform:translateY(-50%);z-index:0}
.flow-chain li{position:relative;z-index:1;background:var(--surface);font-weight:700;font-size:.96rem;color:var(--ink-2);border:1px solid var(--rule-soft);padding:10px 15px}
.flow-chain li.last{background:var(--cyan);color:#fff;border-color:var(--cyan)}
/* value 残り機能の見出しをh3に統一 */
.vr h3{font-size:1.12rem;font-weight:800;margin:4px 0 6px}
/* a11y・微調整 */
.foot-links a{padding:11px 0}
.cta-note{color:rgba(255,255,255,.72)}
.trisig{margin-right:0}

/* ============================================================
   Round4 仕上げ：信号物語の整流／道を進む進捗レール／路線図崩れ
   ============================================================ */
/* 信号の逆流を解消：mail(sec-ink)も緑に（枠だけ緑・塗りはnavy-ink） */
#mail .shead-no::after{border-color:var(--green)}
/* flow路線図：中間幅(折返し帯)で線路が宙に浮くのを防止 */
@media (max-width:820px){ .flow-chain::before{display:none} }
/* 価格せり出し時の縁を締める（罫との光学衝突対策） */
.pcard-hi{outline:0}
/* ── 道を進む：左端の進捗レール（赤→黄→緑に充填＝筋道を辿る） ── */
.rail{position:fixed;left:0;top:0;bottom:0;width:3px;background:var(--rule-soft);z-index:45}
.rail-fill{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--red),var(--amber) 55%,var(--green));transition:height .12s linear}
@media (max-width:640px){ .rail{width:2px} }
@media (prefers-reduced-motion:reduce){ .rail-fill{transition:none} }

/* ============================================================
   Round5 仕上げ：進捗レールを信号色に同期＋本文左罫へ寄せ一本化
   ============================================================ */
/* レールを本文の左罫位置へ（画面端の浮きを解消し筋道線と一本の道に） */
.rail{left:max(0px, calc((100vw - min(1140px,90vw)) / 2 - 12px))}
/* 充填色はJSで現在地セクションの信号色に差し替え（フォールバックは緑） */
.rail-fill{background:var(--green)}
/* 朝メール 注意例の赤をトークン化（インラインstyle廃止） */
.mail-sample .r{color:#ff8a80}
/* flow 超狭幅は縦積み（矢印は下向き） */
@media (max-width:520px){
  .flow{flex-direction:column;align-items:stretch}
  .flow-arr{transform:rotate(90deg);align-self:center}
  .flow-chain{justify-content:flex-start}
}
@media (max-width:980px){ .rail{display:none} }

/* ============================================================
   パレット刷新：背景を白寄りに＋部分的に水色系（ブラッシュアップ）
   ※脱AIの構造(フラット/罫/トンボ/通し番号/信号)は維持。水色は部分使い。
   ============================================================ */
:root{
  --paper:#FAFCFE;        /* 背景＝クールな白 */
  --paper-2:#E9F3FA;      /* 交互セクション＝淡い水色 */
  --surface:#FFFFFF;
  --rule-soft:#DCE5EC;    /* クールなヘアライン */
  --cyan-soft:#E6F4FB;    /* 部分使いの淡い水色 */
}
/* セクション区切りは軽く（白基調に合わせ重さを抜く／トンボ・枠の黒は維持） */
.sec{border-top-color:var(--rule-soft)}
/* 画像プレースホルダは白面で清潔に（どのセクションでも均一） */
.ph{background:var(--surface)}
/* 水色セクション上ではカード類を白で抜いて段差を作る */
.sec-paper2 .steps li,.sec-paper2 .faq details{background:var(--surface)}
/* 差別化テーブルの勝ち列を水色で明確化 */
.diff td.hi{background:var(--cyan-soft)}
.diff thead th.hi{background:#D7ECF6}
/* ヒーロー指標の数値に水色アクセント（部分使い・大サイズで可読） */
.hero-facts dd{color:var(--cyan)}
/* セカンダリボタンのホバーを水色に */
.btn-line:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}
/* ナビは白寄り＋スクロールで淡い水色ヘアライン */
.nav{background:rgba(250,252,254,.86);backdrop-filter:saturate(160%) blur(12px)}
.nav.scrolled{border-bottom-color:var(--rule-soft)}
/* 業種タグ帯にうっすら水色の下地（部分使い） */
.hero-tags{background:var(--cyan-soft);margin-top:0;padding:16px 18px;border:1px solid var(--rule-soft)}
.hero-rule{display:none}

/* ============================================================
   配色刷新 修正：cyanは罫/点/大見出しに限定。文字色・白字地は濃シアン/navy（WCAG AA）
   ============================================================ */
:root{ --cyan-deep:#0B7E9C; --paper-2:#E4F0F8; }
/* 文字色のcyanをnavyへ（コントラスト確保） */
.hero-facts dd{color:var(--navy)}
.diff thead th.hi{color:var(--navy)}
/* 白字を載せる“面”は濃シアンに（白on #0B7E9C ≈ AA） */
.pc-badge{background:var(--cyan-deep)}
.flow-chain li.last{background:var(--cyan-deep);border-color:var(--cyan-deep)}
.btn-line:hover{background:var(--cyan-deep);border-color:var(--cyan-deep);color:#fff}
.cta .btn-primary:hover{background:var(--cyan-deep);border-color:var(--cyan-deep);color:#fff}
/* セクションの起伏回復：区切り罫を見えるクール線に＋水色面を一段濃く */
.sec{border-top-color:#C7D6E0}
/* プレースホルダは白セクションでも枠が起きる極淡水色に */
.ph{background:#F4F8FC}
/* ナビ可読性アップ＋スクロール時の罫 */
.nav{background:rgba(250,252,254,.92)}
.nav.scrolled{border-bottom-color:#C7D6E0}
/* 業種タグ帯：輪郭＋左に筋道アクセント（水色を意味づけて配置） */
.hero-tags{border-color:#C7D6E0;border-left:3px solid var(--cyan)}

/* 小型番号ラベルのcyan文字をAA達成色へ（vf-no=navy / step-n=濃シアン） */
.vf-no{color:var(--navy)}
.step-n{color:var(--cyan-deep)}

/* ============================================================
   実画像設置 Round1修正：モバイル比率/navy窓化/高密度スクショ可読
   ============================================================ */
/* 21:9のダッシュ画像(04/10 contain)はモバイルで4:3にせず比率維持＝白帯回避 */
@media (max-width:640px){
  .frame.ar-21x9:has(img[src*="img-04-"]),
  .frame.ar-21x9:has(img[src*="img-10-"]){aspect-ratio:16/9}
}
/* navy面の明るい写真を「窓」化（影/角丸なし・白の細罫一本＝outline） */
.frame.on-ink img{outline:1px solid rgba(255,255,255,.25);outline-offset:-1px}
/* 高密度ダッシュスクショはモバイルで上部にズームし数字を読めるように */
@media (max-width:640px){
  .frame:has(img[src*="img-05-"]) img,
  .frame:has(img[src*="img-06-"]) img,
  .frame:has(img[src*="img-11-"]) img{object-fit:cover;object-position:top center}
  .frame:has(img[src*="img-05-"]),
  .frame:has(img[src*="img-06-"]),
  .frame:has(img[src*="img-11-"]){aspect-ratio:4/3}
}
/* skip link / nav-cta タップ44px */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.nav-cta{padding:12px 22px}

/* ============================================================
   モバイル レビュー修正（375/390/768）
   ============================================================ */
/* アンカー着地が固定ヘッダ(76px)裏に隠れない */
html{scroll-padding-top:88px}
section[id]{scroll-margin-top:88px}
/* vf-big もモバイルで1カラム（追記後勝ち対策） */
@media (max-width:960px){ .vf-big{grid-template-columns:1fr} }
@media (max-width:640px){
  /* 21:9はモバイルで16:9に統一（白帯/過剰クロップ回避） */
  .frame.ar-21x9{aspect-ratio:16/9}
  /* 高密度ダッシュは“上だけクロップ”をやめ全体表示＝情報の取りこぼし回避 */
  .frame:has(img[src*="img-05-"]) img,
  .frame:has(img[src*="img-06-"]) img,
  .frame:has(img[src*="img-11-"]) img{object-fit:contain;background:#fff;object-position:center}
  .frame:has(img[src*="img-05-"]),
  .frame:has(img[src*="img-06-"]),
  .frame:has(img[src*="img-11-"]){aspect-ratio:4/3}
  /* 差別化テーブル：横スクロールを無くし全列表示 */
  .diff{min-width:0}
  .diff th,.diff td{padding:11px 9px;font-size:.78rem;line-height:1.5}
  /* 本文の最小フォント(可読性) */
  .steps p,.faq details div,.vr p,.pc-desc{font-size:15px}
  /* ロゴ過密回避 */
  .nav-logo img{height:40px}
  /* タップ44px */
  .nav-cta{min-height:44px}
  .nav-links a{padding:13px 4px;min-height:44px;display:flex;align-items:center}
  .foot-links a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  /* メニュー：閉時は不可視＆フォーカス不可／開時はスクロール可 */
  .nav-links{visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
  .nav-links.open{visibility:visible;transition:transform .35s var(--ease);max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:49}
  /* iOS safe-area：下部余白 */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* バーガーのタップ域44px */
.nav-burger{padding:11px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
/* 追従CTA：safe-area＋CTA/フッター可視時に隠す */
.float-cta{bottom:calc(14px + env(safe-area-inset-bottom))}
.float-cta.hidden{opacity:0;pointer-events:none;transform:translate(-50%,18px)}

/* ===== 料金 2プラン ===== */
.plan2-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule)}
.plan{padding:38px 34px;position:relative;background:var(--surface);display:flex;flex-direction:column}
.plan+.plan{border-left:1px solid var(--rule-soft)}
.plan-hi{background:var(--paper-2);border-top:3px solid var(--cyan);margin-top:-1px}
.plan-badge{position:absolute;top:16px;right:18px;background:var(--cyan);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;letter-spacing:.04em}
.plan-name{font-family:var(--grot);font-weight:800;font-size:1.35rem;color:var(--navy);margin-bottom:6px}
.plan-tag{font-size:.92rem;color:var(--ink-2);margin-bottom:22px;min-height:2.6em}
.plan-total{font-family:var(--grot);font-weight:800;font-size:2.15rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.plan-total span{display:inline-block;font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--ink-3)}
.plan-month{margin-top:8px;font-size:.95rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.plan-month b{font-family:var(--grot);font-weight:800;color:var(--navy);font-size:1.08rem}
.plan-feats{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:13px}
.feat{display:flex;align-items:flex-start;gap:11px;font-size:.95rem;line-height:1.45;color:var(--ink)}
.feat .fi{flex-shrink:0;margin-top:2px}
.feat-in .fi{color:var(--cyan-deep,var(--cyan))}
.feat-out{color:var(--ink-3)}
.feat-out .fi{color:var(--ink-3);opacity:.7}
.plan-cta{margin-top:26px;width:100%;justify-content:center}
.plan-note{margin-top:18px;font-size:.86rem;color:var(--ink-3);line-height:1.6}
@media(max-width:720px){
  .plan2-grid{grid-template-columns:1fr}
  .plan+.plan{border-left:0;border-top:1px solid var(--rule-soft)}
  .plan-tag{min-height:0}
}