@charset "UTF-8";
/* ============================================================
   スマートカイタク LP / 公式サイトトップ
   要件定義書 v2.1 11章（デザイン要件）・16章（実装制約）準拠
   - CSSフレームワークは使わない（16-2）
   - 赤の総面積を抑える。朱赤はCTAの塗りのみ（11-2）
   ============================================================ */

/* ---------- 1. デザイントークン ---------- */
:root{
  /* カラー（11-2） */
  --brand:#9E1B32;        /* 深紅：見出し・キーナンバー・STEP番号 */
  --brand-dark:#7C1526;
  --action:#D0342C;       /* 朱赤：CTAボタンの塗りのみ。他に使わない */
  --action-dark:#B22A23;
  --surface:#FDF2F1;      /* 淡赤：セクション交互背景 */
  --text:#1F2225;
  --sub:#6B7178;
  --line:#E3E5E8;
  --alert:#B54708;        /* 琥珀：入力エラー。赤と分離する */
  --alert-bg:#FEF6EC;
  --white:#fff;

  /* タイポ（11-3）：日本語Webフォントは使わない */
  --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Meiryo",sans-serif;
  /* 数値専用：欧文のみ。数字グリフは tabular-nums で字幅を揃える */
  --num:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif;

  --wrap:1120px;
  --radius:6px;
  --shadow:0 2px 14px rgba(31,34,37,.08);
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;
  font-family:var(--jp);
  color:var(--text);
  background:var(--white);
  font-size:16px;              /* 11-3：BtoB決裁者層のため小さくしない */
  line-height:1.8;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
/* 本文が短いページ（送信完了・404・法定ページ）でフッターを画面下端に固定する。
   LP本体には適用しない（十分な高さがあり、ヘッダーのstickyに影響させないため） */
body.page-sub{display:flex;flex-direction:column;min-height:100vh}
@supports (min-height:100dvh){body.page-sub{min-height:100dvh}}
body.page-sub > main{flex:1 0 auto}
body.page-sub > .footer{flex-shrink:0}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
table{border-collapse:collapse}

/* フォーカス可視（10章 アクセシビリティ） */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 3. 汎用レイアウト ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section--tint{background:var(--surface)}     /* 11-1 P9：白／淡色の交互 */
.section--gray{background:#F7F8F9}

.sec-head{margin-bottom:32px;text-align:center}
.sec-head .eyebrow{
  font-family:var(--num);font-size:12px;letter-spacing:.18em;color:var(--brand);
  font-weight:700;margin-bottom:8px;
}
.sec-head h2{font-size:25px;line-height:1.4;letter-spacing:.01em;font-weight:700}
@media (min-width:768px){.sec-head h2{font-size:34px}}
.sec-head p{margin-top:14px;color:var(--sub);font-size:15px}
.note{font-size:12px;line-height:1.75;color:var(--sub)}   /* 11-3：注記は読める大きさを保つ */
.note--block{margin-top:14px}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.brand-num{color:var(--brand);font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- 4. CTAボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 28px;border-radius:var(--radius);border:2px solid transparent;
  font-weight:700;font-size:16px;line-height:1.4;text-align:center;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--action);color:var(--white);border-color:var(--action)}
.btn--primary:hover{background:var(--action-dark);border-color:var(--action-dark);color:var(--white)}
.btn--ghost{background:var(--white);color:var(--brand);border-color:var(--brand)}
.btn--ghost:hover{background:var(--surface);color:var(--brand)}
.btn--lg{padding:19px 40px;font-size:18px;width:100%}
.btn--block{width:100%}
.btn__sub{display:block;font-size:12px;font-weight:400;opacity:.9;margin-top:2px}

/* ---------- 5. S00a 告知バー ---------- */
.announce{
  background:var(--brand);color:var(--white);
  font-size:13px;line-height:1.5;text-align:center;
  min-height:36px;display:flex;align-items:center;justify-content:center;
  padding:6px 16px;
}
/* 折り返しは「サービスリリース記念」の後ろで起きるようにする。
   「2026年内は初期費用0円」を1かたまりにして、その手前の全角スペースを折り返し位置にする */
.announce__nb,.announce a{white-space:nowrap}
.announce a{color:var(--white);text-decoration:underline;font-weight:700}
.announce .announce__tag{
  display:inline-block;background:var(--white);color:var(--brand);
  font-size:11px;font-weight:700;padding:1px 8px;border-radius:2px;margin-right:8px;
  letter-spacing:.04em;
}

/* ---------- 6. S00 ヘッダー ---------- */
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;gap:20px;height:64px}
/* ロゴに margin-right:auto を持たせ、余白をすべてロゴの右へ寄せる。
   これでナビの有無にかかわらず、ナビとCTAが常に右端に揃う */
.logo{display:flex;align-items:center;gap:9px;color:var(--brand);flex-shrink:0;margin-right:auto}
.logo:hover{text-decoration:none}
.logo__mark{width:28px;height:28px;flex-shrink:0}
.logo__type{font-size:19px;font-weight:700;letter-spacing:.02em;line-height:1;white-space:nowrap}
.header__nav{display:none;gap:24px}
.header__nav a{color:var(--text);font-size:14px;font-weight:700}
.header__cta{flex-shrink:0}
.header__cta .btn{padding:11px 20px;font-size:14px}

@media (min-width:1024px){
  .header__nav{display:flex}
}

/* ---------- 7. S01 ファーストビュー ---------- */
.hero{
  background:linear-gradient(180deg,var(--surface) 0%,#fff 100%);
  padding:40px 0 48px;border-bottom:1px solid var(--line);
  /* イラストの紙飛行機がSVGの枠外へ飛び出すため、ここで切る（横スクロール防止） */
  overflow:hidden;
}
.hero h1{font-weight:700}
/* h1は3段構成。上にキャッチ、中央にサービスカテゴリ（最大）、下にサービス名。
   SEO要件（h1にサービス名＋提供価値を1つ）は3段まとめて満たす */
/* サブコピー：深紅ベタのタグ。角丸は付けない */
.hero__tag{
  display:inline-block;background:var(--brand);color:var(--white);
  font-size:14px;font-weight:700;line-height:1.55;letter-spacing:.04em;
  padding:7px 14px;margin-bottom:16px;
}
/* メインコピー：2段組み。2段目「営業代行」を深紅で最大にする。
   .hero__main は2カラムの左カラムに使っているため、見出しは .hero__title を使う */
.hero__title{display:block;color:var(--text);letter-spacing:-.02em;line-height:1.12}
.hero__title > span{display:block}
.hero__title > span:first-child{font-size:25px}
/* 「営業代行サービス」は8文字。狭い端末で2行に折れないよう幅に追随させる */
.hero__title-accent{font-size:clamp(32px,10.9vw,44px);color:var(--brand)}

.hero__lead{margin-top:16px;color:var(--sub);font-size:15px}

/* ---- S01 2カラム（左：コピーとCTA／右：ナンバーパネル） ---- */
.hero__grid{display:grid;gap:26px}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1fr) 480px;gap:40px;align-items:start}
}
/* FVイラスト。装飾ではなく手法の説明なので、スマホでも表示する */
.hero__visual{display:flex;align-items:center;justify-content:center}
/* overflow:visible は紙飛行機を枠の外まで飛ばすため。クリップは .hero 側で行う */
.hero__illu{width:100%;max-width:520px;height:auto;display:block;overflow:visible}
/* margin:0 auto はグリッドアイテムのstretchを打ち消すため、justify-selfで中央寄せする */
@media (max-width:1023px){
  /* 縦積みではイラストをCTAの上に出す。
     .hero__visual は .hero__main の兄弟なので、.hero__main を display:contents にして
     h1・リード・CTAを同じflexの子に上げてから order で差し込む */
  .hero__grid{display:flex;flex-direction:column;gap:0}
  .hero__main{display:contents}
  .hero h1{order:1}
  .hero__lead{order:2}
  .hero__visual{order:3;width:100%;max-width:440px;margin:6px auto 0}
  .hero__cta{order:4;margin-top:22px}
}
}

/* ---- FVイラストの動き（7秒ループ）
       入力 → 送信ボタン押下 → 紙飛行機が飛ぶ → 完了チェック → 1.7秒の静止。
       JSを使わず、全要素が同じ7秒のタイムライン上で同期する。
       入力は6行を1.4秒で打ち切るテンポにし、末尾の静止時間を確保して
       CTAから視線を奪い続けないようにする ---- */
.hero__illu .sk-in,
.hero__illu .sk-typed,
.hero__illu .sk-btn,
.hero__illu .sk-check,
.hero__illu .sk-plane{transform-box:fill-box}
/* 入力欄の文字は左から伸びる */
.hero__illu .sk-in{transform-origin:left center;transform:scaleX(0)}
.hero__illu .sk-btn,
.hero__illu .sk-check,
.hero__illu .sk-plane{transform-origin:center}
.hero__illu .sk-check{opacity:0}
.hero__illu .sk-plane{opacity:0}

.hero__illu .sk-in1{animation:sk-in1 7s linear infinite}
.hero__illu .sk-in2{animation:sk-in2 7s linear infinite}
.hero__illu .sk-tx1{animation:sk-tx1 7s linear infinite}
.hero__illu .sk-tx2{animation:sk-tx2 7s linear infinite}
.hero__illu .sk-tx3{animation:sk-tx3 7s linear infinite}
.hero__illu .sk-tx4{animation:sk-tx4 7s linear infinite}
.hero__illu .sk-typed{animation:sk-typed 7s linear infinite}
.hero__illu .sk-btn{animation:sk-btn 7s linear infinite}
.hero__illu .sk-plane{animation:sk-plane 7s linear infinite}
.hero__illu .sk-check{animation:sk-check 7s linear infinite}

/* 入力（会社名・お名前）。1行あたり約0.22秒 */
@keyframes sk-in1{0%,3%{transform:scaleX(0)}6.2%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
@keyframes sk-in2{0%,7.5%{transform:scaleX(0)}10.4%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
/* 本文（営業文）が4行流し込まれる。1行あたり約0.18秒 */
@keyframes sk-tx1{0%,13%{transform:scaleX(0)}15.6%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
@keyframes sk-tx2{0%,15.6%{transform:scaleX(0)}18.2%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
@keyframes sk-tx3{0%,18.2%{transform:scaleX(0)}20.8%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
@keyframes sk-tx4{0%,20.8%{transform:scaleX(0)}23%,74%{transform:scaleX(1)}76%,100%{transform:scaleX(0)}}
/* 送信後、入力内容を見えないところで消して次のループに備える */
@keyframes sk-typed{0%,68%{opacity:1}72%,100%{opacity:0}}
/* 送信ボタンを押し込む */
@keyframes sk-btn{0%,27%{transform:scale(1)}29%{transform:scale(.95)}32%,100%{transform:scale(1)}}
/* 紙飛行機が送信ボタンから現れ、枠の外へ抜けていく */
@keyframes sk-plane{
  0%,28%{opacity:0;transform:translate(0,0) scale(.8)}
  30.5%{opacity:1;transform:translate(30px,-20px) scale(1)}
  38%{opacity:1;transform:translate(120px,-108px) scale(1.1)}
  48%,100%{opacity:0;transform:translate(280px,-310px) scale(1.15)}
}
/* 送信完了 */
@keyframes sk-check{
  0%,43%{opacity:0;transform:scale(.4)}
  46%{opacity:1;transform:scale(1.12)}
  48%,68%{opacity:1;transform:scale(1)}
  72%,100%{opacity:0;transform:scale(1)}
}
/* 動きを減らす設定のときは、入力済み＋送信完了の静止画にする */
@media (prefers-reduced-motion:reduce){
  .hero__illu .sk-in1,.hero__illu .sk-in2,
  .hero__illu .sk-tx1,.hero__illu .sk-tx2,.hero__illu .sk-tx3,.hero__illu .sk-tx4,
  .hero__illu .sk-typed,.hero__illu .sk-btn,
  .hero__illu .sk-plane,.hero__illu .sk-check{animation:none}
  .hero__illu .sk-in{transform:scaleX(1)}
  .hero__illu .sk-check{opacity:1}
  .hero__illu .sk-plane{opacity:1;transform:translate(60px,-52px) scale(1.05)}
}

/* 左カラムが狭くなるぶん、ボタンの文字を1行に収める */
.hero__cta .btn--lg{font-size:16px;padding:17px 22px}

/* ---- 実績数値（11-1 P3）。参考サイトinvoxと同じく、ラベル＋数値を横並びにし、
       注記番号で根拠を示す。装飾は罫線のみに留める ---- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
}
/* 基準日の有無でラベルの行数が変わるため、数値の下端を4つで揃える。
   liはstretchのままにして、中身だけ下寄せにする（罫線の高さを揃えるため） */
.stats li{padding:2px 20px;display:flex;flex-direction:column;justify-content:flex-end}
.stats li:first-child{padding-left:0}
.stats li + li{box-shadow:inset 1px 0 0 var(--line)}
.stats__label{
  display:block;font-size:12.5px;font-weight:700;line-height:1.5;
  color:var(--sub);letter-spacing:.03em;margin-bottom:8px;
}

.stats__value{
  display:block;font-family:var(--num);font-size:50px;font-weight:700;line-height:1;
  color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;
}
.stats__value b{font-weight:inherit;font-family:inherit}
.stats__value small{font-family:var(--jp);font-size:19px;font-weight:700;margin-left:2px;letter-spacing:0}
/* ラベルに添える基準日 */
.stats__asof{display:block;font-size:10.5px;font-weight:400;color:var(--sub);margin-top:2px;letter-spacing:0}
.stats__value .tilde{font-family:var(--num);font-style:normal;font-size:.7em;margin:0 1px;color:inherit}
.stats__value em{
  font-family:var(--jp);font-style:normal;font-size:19px;font-weight:700;
  margin-right:4px;color:var(--text);letter-spacing:0;
}

/* 中間幅は4列だと詰まるため2×2にする */
@media (max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr);row-gap:22px;margin-top:28px;padding-top:24px}
  .stats li{padding:2px 18px}
  .stats li:first-child,.stats li:nth-child(3){padding-left:0;box-shadow:none}
  .stats__label{font-size:11.5px;margin-bottom:6px}
  .stats__value{font-size:34px}
  .stats__value small{font-size:14px}
  .stats__value em{font-size:14px}
}
@media (max-width:600px){
  .stats{grid-template-columns:1fr;margin-top:24px;padding-top:0;border-top:0}
  /* 1カラムではラベルと数値を左右に並べるため、下寄せの縦積みを解除する */
  .stats li{padding:14px 0;border-top:1px solid var(--line);display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .stats li:first-child{padding-left:0}
  .stats li + li{box-shadow:none}
  .stats__label{margin-bottom:0;font-size:12.5px}
  .stats__value{font-size:30px}
}


/* ---- 実績バッジ（月桂冠）。FV最下部に白いカードで置く ---- */
.laurels{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:940px;margin:32px auto 0;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.laurels li{
  display:flex;align-items:center;justify-content:center;gap:2px;
  padding:20px 10px;color:var(--brand);text-align:center;
}
.laurels li + li{box-shadow:inset 1px 0 0 var(--line)}
.laurels__wreath{width:46px;height:88px;flex-shrink:0;color:var(--brand)}
.laurels__wreath--r{transform:scaleX(-1)}
/* 3つとも同じ幅にして、月桂冠の位置を縦に揃える */
.laurels__body{display:block;width:150px}
.laurels__cap{
  display:block;font-size:13.5px;font-weight:700;line-height:1.45;
  color:var(--text);letter-spacing:.01em;margin-bottom:2px;
}
.laurels__val{
  display:block;font-family:var(--num);font-size:44px;font-weight:700;line-height:1.1;
  color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;
}
.laurels__val small{font-family:var(--jp);font-size:18px;font-weight:700;margin-left:1px}
.laurels__val em{font-family:var(--jp);font-style:normal;font-size:19px;margin-right:2px}

@media (max-width:1000px){
  .laurels{max-width:none}
  .laurels li{padding:18px 6px}
  .laurels__wreath{width:32px;height:68px}
  .laurels__body{width:auto;min-width:0}
  .laurels__cap{font-size:12px}
  .laurels__val{font-size:32px}
  .laurels__val small{font-size:14px}
  .laurels__val em{font-size:14px}
}
/* 狭い画面では3列に詰め込まず縦積みにする。
   横並びのままだと、見出しの文字数の違いでバッジの幅と高さが揃わなくなるため */
@media (max-width:640px){
  .laurels{grid-template-columns:1fr;max-width:360px;margin:26px auto 0}
  .laurels li{gap:8px;padding:14px 10px}
  .laurels li + li{box-shadow:inset 0 1px 0 var(--line)}
  .laurels__wreath{width:32px;height:70px}
  .laurels__body{width:180px}
  .laurels__cap{font-size:12.5px}
  .laurels__val{font-size:34px}
  .laurels__val small{font-size:14px}
  .laurels__val em{font-size:14px}
}

.hero__cta{display:grid;gap:10px;margin-top:28px;margin-bottom:18px}
/* バッジと商談設定率の根拠となる注記。FVの最下部に全幅で置く（13章） */
.hero__note{margin-top:18px;margin-bottom:0}

@media (min-width:768px){
  .hero{padding:52px 0 60px}
  .hero__tag{font-size:18px;padding:8px 18px;margin-bottom:20px}
  .hero__title > span:first-child{font-size:34px}
  .hero__title-accent{font-size:72px}
  .hero__cta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__cta .btn{width:100%}
}
/* 2カラムでは左カラムが最小464pxまで狭くなり、「営業代行サービス」7文字が72pxだと
   2行に折れる。列幅に追随させ、1160px以上で本来の72pxに戻す。
   上の768pxブロックより後に置かないと打ち消せないため、ここに書く */
@media (min-width:1024px){
  /* 上限を70pxにしているのは、wrap最大1120pxのとき左カラムが560pxで、
     8文字×0.98em＝72pxだと564pxになり4px溢れて折れるため（全角は書体を問わず1em） */
  .hero__title-accent{font-size:clamp(56px,calc(12.2vw - 68px),70px);white-space:nowrap}
}
/* S01：モバイル48px以上／デスクトップ96px以上 */

/* ---------- 8. S02/S03 課題 → 解決 ---------- */
/* 参考サイトinvoxと同じ型：課題を横一列で一望させ、矢印とブリッジ文を挟んで、
   下段で解決を受ける。課題は細い枠のまま、解決だけ深紅の太枠に格上げして
   面積と色を解決側へ寄せる（左右1:1だと解決側が読まれないため） */
.pairs{display:grid;gap:16px}
.pairs__bridge{
  font-size:19px;font-weight:700;color:var(--brand);text-align:center;line-height:1.5;
}
.pair{display:grid;gap:0}
/* 課題：1行に収めるカード。下に矢印を出すため position:relative */
.pair__problem{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:18px 18px;display:flex;align-items:center;justify-content:center;text-align:center;
}
.pair__problem h3{font-size:16px;font-weight:700;line-height:1.6}
/* 矢印は擬似要素で描く。要素を増やさない（11-4） */
.pair__problem::before,.pair__problem::after{content:"";position:absolute;left:50%}
.pair__problem::before{top:100%;width:2px;height:20px;background:var(--line);transform:translateX(-50%)}
.pair__problem::after{
  top:calc(100% + 18px);width:11px;height:11px;
  border-right:2px solid var(--line);border-bottom:2px solid var(--line);
  transform:translateX(-50%) rotate(45deg);
}
/* 解決：深紅の太枠。本文ではなくチェック付き箇条書きにする */
.pair__solution{
  background:var(--white);border:2px solid var(--brand);border-radius:10px;padding:20px 18px;
  margin-top:38px;
}
/* 解決の図版。カード上端まで裏の帯を伸ばし、絵と文章の領域を分ける。
   何をするサービスかを絵だけで分からせるのがここの役割（11-4） */
.sol__fig{
  margin:-20px -18px 16px;padding:14px 18px;
  background:#F7F8F9;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;
}
/* 幅いっぱいに伸ばすと1カラム時に図版が巨大になるため上限を置く */
/* 中央寄せにすると1カラム時（タブレット）に図版だけ浮くため、本文と同じ左揃えにする */
.sol__fig-svg{width:100%;max-width:300px;height:auto;display:block}
/* ---- 図版の動き（7秒ループ・4枚を0.5秒ずつずらす）
       アニメーションは .pairs.js-anim が付いたときだけ適用する。
       これはJSが動かないときに0%（何もない状態）で止まるのを避けるため。
       クラスが無い＝SVGに書いた初期値がそのまま完成した絵になる。
       画面外では is-playing を外して止める（main.js） ---- */
.sol__fig .f1-plane,.sol__fig .f2-card,.sol__fig .f2-ban,
.sol__fig .f3-bars,.sol__fig [class^="f3-b"],
.sol__fig .f4-bars,.sol__fig [class^="f4-b"],.sol__fig .f4-arrow{transform-box:fill-box}
.sol__fig .f2-ban,.sol__fig .f1-plane{transform-origin:center}
.sol__fig [class^="f3-b"]{transform-origin:left center}
.sol__fig [class^="f4-b"]{transform-origin:center bottom}
/* JSが無いときの見え方＝除外済みの完成形 */
.sol__fig .f2-card{opacity:.34}

.pairs.js-anim .sol__fig-svg--1 .f1-dash{animation:f1-dash .9s linear infinite}
.pairs.js-anim .sol__fig-svg--1 .f1-plane{animation:f1-plane 7s linear infinite}
.pairs.js-anim .sol__fig-svg--2 .f2-card{animation:f2-card 7s linear infinite .5s}
.pairs.js-anim .sol__fig-svg--2 .f2-ban{animation:f2-ban 7s linear infinite .5s}
.pairs.js-anim .sol__fig-svg--3 .f3-bars{animation:f3-bars 7s linear infinite 1s}
.pairs.js-anim .sol__fig-svg--3 .f3-b1{animation:f3-b1 7s linear infinite 1s}
.pairs.js-anim .sol__fig-svg--3 .f3-b2{animation:f3-b2 7s linear infinite 1s}
.pairs.js-anim .sol__fig-svg--3 .f3-b3{animation:f3-b3 7s linear infinite 1s}
.pairs.js-anim .sol__fig-svg--4 .f4-bars{animation:f4-bars 7s linear infinite 1.5s}
.pairs.js-anim .sol__fig-svg--4 .f4-b1{animation:f4-b1 7s linear infinite 1.5s}
.pairs.js-anim .sol__fig-svg--4 .f4-b2{animation:f4-b2 7s linear infinite 1.5s}
.pairs.js-anim .sol__fig-svg--4 .f4-b3{animation:f4-b3 7s linear infinite 1.5s}
.pairs.js-anim .sol__fig-svg--4 .f4-b4{animation:f4-b4 7s linear infinite 1.5s}
.pairs.js-anim .sol__fig-svg--4 .f4-arrow{animation:f4-arrow 7s linear infinite 1.5s}
/* 画面外では止める */
.pairs.js-anim:not(.is-playing) .sol__fig *{animation-play-state:paused}

/* ①リストから紙飛行機が飛び出す。破線は流し続ける */
@keyframes f1-dash{from{stroke-dashoffset:0}to{stroke-dashoffset:-11}}
@keyframes f1-plane{
  0%,6%{transform:translateX(-64px);opacity:0}
  14%{opacity:1}
  56%{transform:translateX(0);opacity:1}
  70%,100%{transform:translateX(34px);opacity:0}
}
/* ②中央の1社が除外される */
@keyframes f2-card{0%,16%{opacity:1}28%,74%{opacity:.34}86%,100%{opacity:1}}
@keyframes f2-ban{
  0%,18%{opacity:0;transform:scale(.5)}
  28%{opacity:1;transform:scale(1.12)}
  32%,74%{opacity:1;transform:scale(1)}
  84%,100%{opacity:0;transform:scale(1)}
}
/* ③アクセス数のバーが上から順に伸びる */
@keyframes f3-bars{0%,80%{opacity:1}88%,100%{opacity:0}}
@keyframes f3-b1{0%,8%{transform:scaleX(0)}20%,86%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes f3-b2{0%,20%{transform:scaleX(0)}32%,86%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
@keyframes f3-b3{0%,32%{transform:scaleX(0)}44%,86%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
/* ④棒が左から順に立ち、単価が下がっていくのを見せる */
@keyframes f4-bars{0%,80%{opacity:1}88%,100%{opacity:0}}
@keyframes f4-b1{0%,6%{transform:scaleY(0)}18%,86%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}}
@keyframes f4-b2{0%,14%{transform:scaleY(0)}26%,86%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}}
@keyframes f4-b3{0%,22%{transform:scaleY(0)}34%,86%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}}
@keyframes f4-b4{0%,30%{transform:scaleY(0)}42%,86%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}}
@keyframes f4-arrow{0%,42%{opacity:0}52%,80%{opacity:1}88%,100%{opacity:0}}
/* 動きを減らす設定のときは、SVGに書いた初期値（完成した絵）のままにする */
@media (prefers-reduced-motion:reduce){
  .pairs.js-anim .sol__fig *{animation:none!important}
}

.pair__solution h3{
  font-size:15.5px;font-weight:700;line-height:1.55;color:var(--brand);
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.sol__list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.7;margin-top:10px}
.sol__ck{width:17px;height:17px;flex-shrink:0;margin-top:5px}

/* 1024px以上でinvox型の3段構成にする。
   .pair を display:contents にして、課題を1段目・解決を3段目へ振り分ける。
   DOM順は「課題→解決」の対のままなので、スマホでは並び替えなしで縦積みになる */
@media (min-width:1024px){
  .pairs{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:0}
  .pair{display:contents}
  /* 矢印の到達点（カード下端から37px）より下にブリッジ文を置く */
  .pairs__bridge{grid-column:1/-1;grid-row:2;font-size:21px;margin:46px 0 24px}
  .pair__problem{grid-row:1;min-height:86px}
  .pair__solution{grid-row:3;margin-top:0}
  .pair:nth-child(2) .pair__problem,.pair:nth-child(2) .pair__solution{grid-column:1}
  .pair:nth-child(3) .pair__problem,.pair:nth-child(3) .pair__solution{grid-column:2}
  .pair:nth-child(4) .pair__problem,.pair:nth-child(4) .pair__solution{grid-column:3}
  .pair:nth-child(5) .pair__problem,.pair:nth-child(5) .pair__solution{grid-column:4}
  /* 3段構成では矢印がブリッジ文まで届くように伸ばす */
  .pair__problem::before{height:26px}
  .pair__problem::after{top:calc(100% + 24px)}
  .sol__list li{font-size:13.5px}
}
/* 1024px未満は対ごとの縦積み。ブリッジ文は導入の1行として先頭に置く */
@media (max-width:1023px){
  .pairs{gap:34px}
  .pairs__bridge{margin-bottom:-8px}
  .pair__problem{justify-content:flex-start;text-align:left}
}

/* ---------- 9. S04 料金表 ---------- */
/* 表が1120pxいっぱいだと1列あたりが広く、数字の比較がしづらい。
   見出し（中央揃え）以外を940pxで頭打ちにして、表・注記の左右をそろえる */
#pricing .wrap > *:not(.sec-head){max-width:940px;margin-left:auto;margin-right:auto}
/* 見出しはインラインstyleだと上の中央寄せに勝ってしまうため、クラスで持つ */
.pricing__h3{margin:44px 0 4px;font-size:20px;font-weight:700}
.pricing__h3--sm{margin:26px 0 8px;font-size:15px;color:var(--text)}
.tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:8px;background:var(--white);
}
.tablewrap::-webkit-scrollbar{height:8px}
.tablewrap::-webkit-scrollbar-thumb{background:#C9CDD2;border-radius:4px}
.ptable{width:100%;min-width:660px;font-size:14px}
.ptable th,.ptable td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:center;vertical-align:middle}
.ptable thead th{background:var(--brand);color:var(--white);font-size:14px;font-weight:700;white-space:nowrap;border-bottom:0}
.ptable thead th:first-child{background:var(--brand-dark)}
.ptable thead th small{display:block;font-size:10px;font-weight:400;opacity:.85}
/* 1列目を固定（5-6） */
.ptable th[scope="row"],.ptable tbody td:first-child{
  position:sticky;left:0;z-index:2;background:var(--white);text-align:left;
  font-weight:700;font-size:13.5px;white-space:nowrap;
  box-shadow:1px 0 0 var(--line);
}
.ptable tbody tr:nth-child(even) th[scope="row"],
.ptable tbody tr:nth-child(even) td{background:#FBFBFC}
.ptable tbody tr:nth-child(even) th[scope="row"]{background:#FBFBFC}
.ptable .row-count th[scope="row"],.ptable .row-count td{background:var(--surface)!important}
.ptable .row-count td{font-size:20px;font-weight:700;color:var(--brand);font-family:var(--num);font-variant-numeric:tabular-nums}
.ptable .row-count td small{display:block;font-family:var(--jp);font-size:10px;font-weight:400;color:var(--sub)}
.ptable .price{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700;font-size:17px}
.ptable .price .tax{display:block;font-family:var(--jp);font-size:10px;font-weight:400;color:var(--sub)}  /* 11-1 P7 */

/* スマホでは1列目の nowrap が幅を食い、データ列がほとんど見えない
   （オプション表で1列目276px／残り74px）。折り返して幅を固定し、
   表の最小幅とセル余白も詰めて、隣の列が見えるようにする */
@media (max-width:600px){
  .ptable{min-width:560px;font-size:13px}
  .ptable th,.ptable td{padding:10px 8px}
  .ptable thead th{font-size:13px}
  .ptable th[scope="row"],.ptable tbody td:first-child{
    white-space:normal;width:116px;min-width:116px;font-size:12.5px;
    padding-left:10px;padding-right:8px;line-height:1.5;
  }
  .dtable{font-size:13px}
  .dtable th,.dtable td{padding:10px 8px}
  .dtable tbody th{white-space:normal;width:84px;min-width:84px;font-size:12.5px}
}
.ptable .unit{font-family:var(--num);font-size:15px;font-weight:700;color:var(--sub)}
.ptable .ok{color:var(--brand);font-weight:700;font-size:17px}
.ptable .free{color:var(--brand);font-weight:700}
.ptable .none{color:#A9AFB5}
.ptable td small.sub,.ptable th small.sub{display:block;font-size:10px;color:var(--sub);font-weight:400;line-height:1.5;margin-top:2px}
.ptable .col-reco{box-shadow:inset 0 0 0 2px var(--brand)}
/* 初期費用行：4列まとめのセル。モバイルで横スクロールしなくても「0円」が見えるよう左寄せ */
.ptable .row-initial td{text-align:left;white-space:normal}
@media (min-width:768px){.ptable .row-initial td{text-align:center}}

.scroll-hint{display:block;text-align:right;font-size:11px;color:var(--sub);margin:6px 2px 0}
@media (min-width:768px){.scroll-hint{display:none}}
/* 表の下に置く注記 */
.table-note{margin-top:10px;text-align:right}

/* 表の上に置くひとこと。表に書いてあることを本文で繰り返さないための置き場所 */
.ptable__cap{font-size:15px;font-weight:700;margin-bottom:10px}
.ptable__cap strong{color:var(--brand)}
/* 単発プランと比べて何%多く送れるか。
   同じ数字で別ブロックを作らず、件数の行に併記して重複を避ける */
.ptable .vs{display:block;color:var(--brand);font-weight:700;font-size:10.5px;margin-top:2px}

/* 同額比較・商談単価 */
.cards{display:grid;gap:14px;margin-top:16px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px;
}
.card h3{font-size:15px;margin-bottom:8px}
.card .big{font-family:var(--num);font-size:30px;font-weight:700;color:var(--brand);line-height:1.2;font-variant-numeric:tabular-nums}
.card .cmp{font-size:12px;color:var(--sub);margin-top:6px}

/* 商談単価表。料金表（.ptable）と同じ語彙にそろえる。
   キャプションを外したので、ヘッダー行が枠の上端に接する。
   格子状の罫線をやめ、横罫と偶数行の下地だけで読ませる */
.dtable{width:100%;font-size:14px;background:var(--white)}
.dtable th,.dtable td{
  border-bottom:1px solid var(--line);padding:12px 14px;text-align:right;vertical-align:middle;
}
.dtable thead th{
  background:var(--brand);color:var(--white);font-size:13.5px;font-weight:700;
  text-align:center;white-space:nowrap;border-bottom:0;
}
.dtable thead th:first-child{background:var(--brand-dark)}
.dtable tbody th{text-align:left;font-weight:700;font-size:13.5px;white-space:nowrap;background:var(--white)}
.dtable tbody tr:nth-child(even) th,
.dtable tbody tr:nth-child(even) td{background:#FBFBFC}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}
.dtable td{font-family:var(--num);font-variant-numeric:tabular-nums}
.dtable .hl{color:var(--brand);font-weight:700}

/* ---------- 10. S05 シミュレーター ---------- */
/* 入力欄が5つだけのフォームなので、1120pxいっぱいだと1項目が広くなりすぎる。
   読みやすい幅で頭打ちにして中央に置く */
.sim{
  background:var(--white);border:2px solid var(--brand);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);max-width:860px;margin:0 auto;
}
.sim__head{background:var(--brand);color:var(--white);padding:14px 20px}
.sim__head h3{font-size:17px;font-weight:700}
.sim__head p{font-size:12.5px;opacity:.92;margin-top:2px}
.sim__body{padding:20px}
.sim__grid{display:grid;gap:16px}
@media (min-width:768px){.sim__grid{grid-template-columns:repeat(2,1fr)}}
/* 項目見出しのラベル。チェック／ラジオのラベル（.check）は flex のままにするため除外する */
.field label:not(.check),.field .lbl{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field .hint{font-size:11px;color:var(--sub);font-weight:400;margin-left:6px}
.input,select.input{
  /* display:block にしないと、textarea がベースラインに乗って下に余分な隙間ができる */
  display:block;
  width:100%;padding:12px 14px;border:1px solid #C9CDD2;border-radius:var(--radius);
  font-size:16px;background:var(--white);color:var(--text);font-family:var(--jp);
}
input.input[type="number"],input.input[type="tel"]{font-family:var(--num);font-variant-numeric:tabular-nums}
.input:focus{border-color:var(--brand);outline:3px solid rgba(158,27,50,.25);outline-offset:0}
.checks{display:grid;gap:8px}
.check{
  display:flex;align-items:flex-start;gap:12px;padding:11px 13px;
  border:1px solid #C9CDD2;border-radius:var(--radius);cursor:pointer;font-size:14px;background:var(--white);
}
.check:hover{background:var(--surface)}
.check input{
  width:19px;height:19px;margin:1px 0 0;accent-color:var(--brand);
  flex:0 0 19px;min-width:19px;
}
.check > span{flex:1 1 auto}
.check .c-note{display:block;font-size:11px;color:var(--sub)}

.sim__out{border-top:1px solid var(--line);background:#FAFBFC}
.sim__result{padding:18px 20px}
.sim__pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:4px}
.sim__pick .tag{background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:2px}
.sim__pick .plan{font-size:22px;font-weight:700;color:var(--brand)}
.sim__amount{font-family:var(--num);font-size:34px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.sim__amount .yen{font-size:20px}
.sim__amount .per{font-family:var(--jp);font-size:14px;font-weight:400;color:var(--sub)}
.sim__meta{margin-top:8px;font-size:13.5px;color:var(--text)}
.sim__meta li{padding:3px 0 3px 18px;position:relative}
.sim__meta li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;background:var(--brand);border-radius:50%}
.sim__campaign{color:var(--brand);font-weight:700}
.sim__alert{
  margin:12px 0 0;padding:10px 14px;background:var(--alert-bg);border-left:3px solid var(--alert);
  color:var(--alert);font-size:13px;border-radius:0 4px 4px 0;
}
.sim__alert[hidden]{display:none}
.sim__table{width:100%;font-size:13px;margin-top:16px;background:var(--white)}
.sim__table th,.sim__table td{border:1px solid var(--line);padding:8px 10px;text-align:right}
.sim__table thead th{background:#F0F2F4;text-align:center;font-size:12px;white-space:nowrap}
.sim__table tbody th{text-align:left;white-space:nowrap}
.sim__table td{font-family:var(--num);font-variant-numeric:tabular-nums}
.sim__table tr.best th,.sim__table tr.best td{background:var(--surface);font-weight:700}
.sim__table .ng{color:var(--alert);font-family:var(--jp);font-size:10.5px}
.sim__cta{padding:0 20px 20px}
.sim__foot{padding:0 20px 18px}

/* ---------- 11. S06 セグメント ---------- */
/* リストの取得元。分野ごとに箱を分け、媒体名はチップで並べる。
   採用系だけ数が多いため、広い画面では2列ぶんを使う */
.media{display:grid;gap:12px}
@media (min-width:768px){.media{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.media{grid-template-columns:repeat(3,1fr)}}
.media__cat{
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:16px 16px 14px;
}
@media (min-width:1024px){.media__cat--wide{grid-column:span 2}}
.media__cat h4{font-size:14px;font-weight:700;color:var(--brand);margin-bottom:10px}
.media__cat ul{display:flex;flex-wrap:wrap;gap:6px}
.media__cat li{
  background:#F7F8F9;border:1px solid var(--line);border-radius:4px;
  padding:4px 9px;font-size:12.5px;line-height:1.6;
}
/* 「ほか」は媒体名ではないので、枠を外して区別する */
.media__cat li.is-etc{background:none;border-color:transparent;color:var(--sub);padding-left:2px}

.seg-h3{font-size:17px;font-weight:700;text-align:center;margin:34px 0 14px}
@media (min-width:768px){.seg-h3{font-size:19px}}

/* 条件5つ。バッジや枠色で序列を作らず、全部同じ形にする（3＋2に割れて見えないように） */
.cond{display:grid;gap:12px}
@media (min-width:480px){.cond{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){.cond{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.cond{grid-template-columns:repeat(5,1fr)}}
.cond li{
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:16px 15px;
}
/* 条件のアイコン。線幅2pxでサイト内の他のアイコンと揃える（11-4） */
/* 条件のイラスト。カード幅いっぱいに置く。
   1カラム時に絵だけ大きくなりすぎないよう上限を設ける */
/* 1カラムではカード幅よりイラストが小さいので、左寄せだと浮く。中央に置く */
.cond__illu{width:100%;max-width:230px;height:auto;display:block;margin:0 auto 12px}
@media (min-width:1024px){.cond__illu{margin-left:0}}
.cond .cond__name{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
/* 本文は1行だけ。説明と値の例を分けると、カードによって片方が
   名前の言い換えになって薄く見えるため、具体的な値を含む1行にまとめる */
.cond .cond__desc{display:block;font-size:12.5px;color:var(--sub);line-height:1.75}
.seg-note{
  margin-top:14px;font-size:13px;line-height:1.8;background:var(--surface);
  border-left:3px solid var(--brand);padding:11px 15px;border-radius:0 6px 6px 0;
}

/* 切り口の例。条件式を外して名前だけにしたので、
   等幅グリッドだと1行の文字に対して箱が大きすぎる。
   文字幅に合わせたチップを中央から流す形にする */
/* 幅を絞ると1行あたりの個数が揃い、最終行だけ極端に短くなるのを防げる */
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin:0 auto}
.tags + .note{text-align:center}
.tags li{
  display:flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:99px;
  padding:9px 18px 9px 15px;font-size:14.5px;font-weight:700;line-height:1.5;
}
/* 先頭の点。チップが文章に見えないよう、項目であることを示す */
.tags li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;
}
@media (max-width:600px){
  .tags{gap:8px}
  .tags li{font-size:13.5px;padding:8px 14px 8px 12px}
}

/* ---------- 12. S06b 配信品質 ---------- */
.quality{display:grid;gap:12px}
@media (min-width:768px){.quality{grid-template-columns:repeat(2,1fr)}}
.quality li{
  display:flex;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:8px;padding:16px 18px;
}
.quality .q-ico{width:22px;height:22px;color:var(--brand);flex-shrink:0;margin-top:3px}
.quality h3{font-size:15px;margin-bottom:3px}
.quality p{font-size:13.5px;color:var(--sub);line-height:1.7}

/* ---------- 13. S07 フロー ---------- */
/* 番号を振るのはお客様の行動だけ（3つ）。当社の作業はその下にぶら下げる。
   工程を6つに割ると「面倒そう」に見えるが、実際にお願いするのは3つしかない。
   番号が3つしか無いことで、それを構造で伝える（参考：invox「ご利用の流れ」） */
/* 1行の説明文に対して1120pxは広すぎる。シミュレーター・FAQと同じ860pxで頭打ちにする */
.flow{display:grid;gap:0;max-width:860px;margin:0 auto}
#flow .note--block{max-width:860px;margin-left:auto;margin-right:auto}
.flow__step{position:relative;padding-bottom:18px}
.flow__step:last-child{padding-bottom:0}
/* ステップ同士をつなぐ縦線。最後のステップには引かない */
.flow__step:not(.is-last)::before{
  content:"";position:absolute;left:21px;top:48px;bottom:0;width:2px;background:var(--line);
}
.flow__you{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.flow__no{
  width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--white);
  font-family:var(--num);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.flow__ask h3{font-size:18px;font-weight:700;line-height:1.5}
.flow__ask p{font-size:14px;color:var(--sub);margin-top:4px;line-height:1.75}
/* 当社の作業。主語が切り替わることを面で示す */
.flow__us{margin:12px 0 0 58px;background:#F7F8F9;border-radius:8px;padding:13px 16px}
.flow__us-lab{font-size:11.5px;font-weight:700;color:var(--brand);margin-bottom:5px}
.flow__us li{
  position:relative;padding-left:16px;font-size:13.5px;line-height:1.85;color:var(--sub);
}
.flow__us li::before{
  content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;
  background:var(--brand);opacity:.55;
}
.flow .hl{color:var(--brand);font-weight:700}
@media (min-width:768px){
  .flow__step{padding-bottom:20px}
  .flow__step:not(.is-last)::before{left:25px;top:56px}
  .flow__you{grid-template-columns:52px minmax(0,1fr);gap:18px}
  .flow__no{width:52px;height:52px;font-size:19px}
  .flow__ask h3{font-size:20px}
  .flow__ask p{font-size:14.5px}
  .flow__us{margin-left:70px;padding:14px 18px}
  .flow__us li{font-size:14px}
}

/* ---------- 14. S08 レポート ---------- */
.report{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:var(--shadow)}
.report figure{margin:0}
.report img{width:100%;border:1px solid var(--line);border-radius:4px;cursor:zoom-in}
.report figcaption{margin-top:10px;font-size:11.5px;color:var(--sub);line-height:1.7}
.report__points{display:grid;gap:10px;margin-top:16px}
@media (min-width:768px){.report__points{grid-template-columns:repeat(3,1fr)}}
.report__points li{background:var(--surface);border-radius:6px;padding:12px 14px;font-size:13.5px}
.report__points b{display:block;color:var(--brand);font-size:14px}

/* 拡大表示 */
.lightbox{
  position:fixed;inset:0;background:rgba(31,34,37,.88);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:88vh;border-radius:4px;background:#fff}
.lightbox__close{
  position:absolute;top:14px;right:14px;background:var(--white);border:0;border-radius:50%;
  width:42px;height:42px;font-size:22px;line-height:1;cursor:pointer;color:var(--text);
}

/* ---------- 15. S09 成果 ---------- */
.result{
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:26px 22px;text-align:center;
}
.result__val{font-family:var(--num);font-size:46px;font-weight:700;color:var(--brand);line-height:1.1;font-variant-numeric:tabular-nums}
.result__val small{font-size:22px}
.result__label{font-size:14px;font-weight:700;margin-top:4px}
.result__conv{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.result__conv b{color:var(--brand);font-family:var(--num);font-size:20px}

/* ---------- 16. S10 FAQ ---------- */
/* LPには7問だけ置き、残りは faq.html へ送る。
   一覧ページへのボタンは、最後の質問と間を空けて中央に置く */
/* 1行の質問文に対して1120pxは広すぎる。シミュレーターと同じ860pxで頭打ちにする */
.faq-list{display:grid;gap:10px;max-width:860px;margin:0 auto}
.faq-more{margin-top:28px;display:flex;justify-content:center}
.faq-more .btn{width:100%;max-width:420px}
@media (min-width:768px){.faq-more{margin-top:32px}}
.faq-cat{margin-bottom:26px}
.faq-cat > h3{
  font-size:16px;font-weight:700;color:var(--brand);
  padding-left:11px;border-left:4px solid var(--brand);margin-bottom:12px;
}
.faq{border:1px solid var(--line);border-radius:8px;background:var(--white);overflow:hidden}
.faq + .faq{margin-top:10px}
.faq summary{
  display:flex;gap:12px;align-items:flex-start;padding:15px 46px 15px 16px;
  cursor:pointer;font-weight:700;font-size:15px;line-height:1.65;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:18px;top:22px;width:10px;height:10px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq[open] summary::after{transform:rotate(-135deg);top:26px}
.faq summary:hover{background:var(--surface)}
.faq .q{
  font-family:var(--num);color:var(--brand);font-weight:700;flex-shrink:0;font-size:16px;
}
.faq__a{padding:0 16px 16px 42px;font-size:14.5px;line-height:1.85;color:var(--sub)}
.faq__a strong{color:var(--text)}

/* ---------- 17. S11 会社概要 ---------- */
.company{width:100%;font-size:14.5px;background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.company th,.company td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.company th{background:#F7F8F9;font-weight:700;white-space:nowrap;width:34%}
/* URLなど途中で折り返せない文字列がページを横に広げないようにする */
.company td{overflow-wrap:anywhere}
@media (max-width:480px){
  .company th{white-space:normal;width:36%}
  .company th,.company td{padding:11px 12px}
}
.company tr:last-child th,.company tr:last-child td{border-bottom:0}

/* ---------- 18. 締めCTA（11-1 P8） ---------- */
.closing{background:var(--brand);color:var(--white);padding:52px 0;text-align:center}
.closing h2{font-size:24px;line-height:1.45;font-weight:700}
@media (min-width:768px){.closing h2{font-size:32px}}
.closing p{margin-top:12px;font-size:15px;opacity:.94}
.closing .campaign-wrap{margin:20px 0 16px}
.closing .campaign{
  display:inline-block;padding:6px 16px;border:1px solid rgba(255,255,255,.6);
  border-radius:99px;font-size:13.5px;font-weight:700;
}
.closing .btn--primary{background:var(--white);color:var(--action);border-color:var(--white)}
.closing .btn--primary:hover{background:#F4E9E8;color:var(--action-dark);border-color:#F4E9E8}
.closing .btn{max-width:420px;margin:0 auto}

/* ---------- 19. S12 フォーム ---------- */
.form{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.form__steps{display:flex;border-bottom:1px solid var(--line);background:#F7F8F9}
.form__steps li{
  flex:1;text-align:center;padding:11px 6px;font-size:12.5px;font-weight:700;color:var(--sub);
  position:relative;
}
.form__steps li[aria-current="step"]{color:var(--brand);background:var(--white);box-shadow:inset 0 -3px 0 var(--brand)}
.form__steps .n{font-family:var(--num)}

.summary{padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.summary__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.summary__head h3{font-size:14px;font-weight:700;color:var(--brand)}
.summary__edit{
  background:none;border:1px solid var(--brand);color:var(--brand);border-radius:4px;
  font-size:12px;font-weight:700;padding:4px 12px;cursor:pointer;
}
.summary__edit:hover{background:var(--white)}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px}
.summary dt{color:var(--sub);white-space:nowrap}
.summary dd{margin:0;font-weight:700}
.summary .amount{color:var(--brand);font-family:var(--num);font-variant-numeric:tabular-nums}

.form__body{padding:20px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
/* STEP1パネル内の最後の項目（営業文章）は、パネルの外に次の項目が続くため
   :last-child で余白が消えてしまう。他の項目と間隔を揃える */
#step1Panel .field:last-child{margin-bottom:18px}
.req,.opt{
  display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:2px;
  margin-left:6px;vertical-align:1px;letter-spacing:.04em;
}
.req{background:var(--brand);color:#fff}
.opt{background:#E7E9EB;color:#4A4F57}
.radios{display:grid;gap:8px}
@media (min-width:768px){.radios--inline{grid-template-columns:repeat(3,1fr)}}
textarea.input{min-height:104px;resize:vertical;line-height:1.7}
.error{
  display:none;margin-top:6px;padding:7px 11px;background:var(--alert-bg);
  border-left:3px solid var(--alert);color:var(--alert);font-size:13px;border-radius:0 4px 4px 0;
}
.error::before{content:"! ";font-weight:700}   /* 色だけで伝えない（11-2） */
.field.is-error .error{display:block}
.field.is-error .input{border-color:var(--alert);background:#FFFDFA}
.consent{background:#F7F8F9;border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* ハニーポット（15-4） */
.form__submit{margin-top:22px}
.form__note{margin-top:12px;text-align:center}

/* ---------- 20. S13 フッター ---------- */
.footer{background:#1F2225;color:#C9CDD2;padding:40px 0 96px;font-size:13.5px}
.footer__top{padding-bottom:24px}
.footer .logo{color:var(--white);margin-right:0}
.footer .logo__mark{color:var(--white)}
.footer address{font-style:normal;margin-top:12px;line-height:1.85;color:#9AA1A8}

/* 最下段：左にコピーライト、右に法定表記へのリンク */
.footer__bottom{
  display:flex;flex-direction:column-reverse;align-items:flex-start;gap:14px;
  border-top:1px solid #33373B;padding-top:18px;
}
.footer__links{display:flex;flex-wrap:wrap;gap:10px 28px}
.footer__links a{color:#E3E5E8;font-size:13px}
.footer__links a:hover{color:var(--white)}
.footer__copy{font-size:11px;color:#8A9098;font-family:var(--num)}

@media (min-width:768px){
  .footer{padding-bottom:40px}
  .footer__bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:16px 32px}
}

/* ---------- 21. モバイル固定CTA（10章） ---------- */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  box-shadow:0 -2px 12px rgba(31,34,37,.1);
  transform:translateY(110%);transition:transform .22s ease;
}
.fixed-cta.is-visible{transform:translateY(0)}
.fixed-cta .btn{padding:13px 10px;font-size:14px}
@media (min-width:1024px){.fixed-cta{display:none}}

/* 下部固定CTA表示中はヘッダーCTAを隠す（S00） */
body.has-fixed-cta .header__cta{display:none}
@media (min-width:1024px){body.has-fixed-cta .header__cta{display:block}}

/* ---------- 22. 下層ページ ---------- */
.page{padding:44px 0 72px}
.page h1{font-size:26px;line-height:1.5;margin-bottom:8px}
.page h2{font-size:20px;margin:34px 0 10px;padding-left:12px;border-left:4px solid var(--brand);line-height:1.5}
.page p,.page li{font-size:15px;line-height:1.9}
.page p{margin-bottom:12px}
.page ul{list-style:disc;padding-left:1.5em;margin-bottom:14px}
.page ol{list-style:decimal;padding-left:1.6em;margin-bottom:14px}
.page ul li,.page ol li{margin-bottom:4px}
.page table{width:100%;border:1px solid var(--line);font-size:14.5px;margin-bottom:16px}
.page table th,.page table td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.page table th{background:#F7F8F9;width:32%;white-space:nowrap;font-weight:700}
.page .updated{color:var(--sub);font-size:12px}
.thanks{text-align:center;padding:60px 0 80px}
.thanks__ico{width:64px;height:64px;margin:0 auto 18px;color:var(--brand)}
.thanks h1{font-size:26px;margin-bottom:14px}
@media (max-width:480px){.thanks h1{font-size:21px}.page h1{font-size:22px}}
.thanks .next{
  max-width:560px;margin:24px auto 0;text-align:left;background:var(--surface);
  border-radius:10px;padding:20px 22px;
}
.thanks .next h2{font-size:15px;color:var(--brand);margin-bottom:8px;border:0;padding:0}
.thanks .next li{font-size:14.5px;padding:4px 0 4px 20px;position:relative}
.thanks .next li::before{content:"";position:absolute;left:3px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
/* ボタンを横並びにする（狭い画面では縦積み） */
.thanks .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.thanks .btns .btn{min-width:220px}
/* 下層ページ末尾のボタン列（thanks と同じ扱い） */
.page__back{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.page__back .btn{min-width:240px}

/* ---------- 23. コラム（/form/column/） ----------
   記事は src/column/*.md から columnkit.py が生成します。
   このセクションのCSSは必ずこの区画の中に書いてください。
   別の区画に混ぜると、そちらを範囲指定で書き換えたときに巻き込まれて消えます。 */
.col-wrap{padding:28px 0 72px;max-width:1080px}

/* パンくず */
.crumb{margin-bottom:22px}
.crumb ol{display:flex;flex-wrap:wrap;gap:6px 0;font-size:12.5px;color:var(--sub)}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"›";margin:0 8px;color:#B9BEC4}
.crumb a{color:var(--sub)}
.crumb a:hover{color:var(--brand)}
.crumb [aria-current]{color:var(--text);font-weight:700}

/* 記事ヘッダー */
.col-article{max-width:760px;margin:0 auto}
.col-head{padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.col-head__cat{
  display:inline-block;font-size:12px;font-weight:700;color:var(--brand);
  background:var(--surface);border-radius:99px;padding:4px 13px;margin-bottom:14px;
}
.col-head__cat:hover{background:#F8E4E2;text-decoration:none}
.col-head__title{font-size:29px;line-height:1.5;font-weight:700;letter-spacing:.01em}
.col-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  margin-top:16px;font-size:12.5px;color:var(--sub);font-family:var(--num);
}
.col-meta__author{font-family:var(--jp)}
.col-meta__upd::before{content:"";display:inline-block;width:1px;height:11px;
  background:var(--line);margin-right:16px;vertical-align:-1px}

/* 目次 */
.col-toc{background:#F7F8F9;border:1px solid var(--line);border-radius:8px;padding:20px 24px;margin-bottom:34px}
.col-toc__title{font-size:14px;font-weight:700;margin-bottom:10px}
.col-toc ol{list-style:none;counter-reset:toc;font-size:14px}
.col-toc>ol>li{counter-increment:toc;padding-left:1.9em;position:relative;margin-bottom:7px}
.col-toc>ol>li::before{
  content:counter(toc);position:absolute;left:0;top:.15em;
  font-family:var(--num);font-size:11px;font-weight:700;color:var(--brand);
  background:#fff;border:1px solid #E9CFD3;border-radius:4px;
  min-width:1.55em;height:1.55em;display:flex;align-items:center;justify-content:center;
}
.col-toc ol ol{margin:6px 0 10px;padding-left:1em}
.col-toc ol ol li{margin-bottom:4px;font-size:13.5px;position:relative;padding-left:.9em}
.col-toc ol ol li::before{content:"–";position:absolute;left:0;color:#B9BEC4}
.col-toc a{color:var(--text)}
.col-toc a:hover{color:var(--brand)}

/* 本文 */
.col-body{font-size:16px;line-height:1.95}
.col-body>*+*{margin-top:20px}
.col-body h2{
  font-size:22px;line-height:1.5;font-weight:700;
  margin:52px 0 18px;padding:0 0 10px;border-bottom:2px solid var(--brand);
}
.col-body h3{
  font-size:18.5px;line-height:1.55;font-weight:700;
  margin:38px 0 14px;padding-left:12px;border-left:4px solid var(--brand);
}
.col-body h4{font-size:16.5px;font-weight:700;margin:28px 0 10px}
.col-body h2:first-child,.col-body h3:first-child{margin-top:0}
.col-body p{margin-bottom:0}
.col-body a{text-decoration:underline;text-underline-offset:2px}
.col-body strong{font-weight:700}
.col-body em{font-style:normal;background:linear-gradient(transparent 62%,#FBE4E1 62%)}
.col-body ul,.col-body ol{margin-left:0;padding-left:1.6em}
.col-body ul{list-style:disc}
.col-body ol{list-style:decimal}
.col-body li{margin-bottom:8px}
.col-body li::marker{color:var(--brand)}
.col-body li>ul,.col-body li>ol{margin-top:8px}
.col-body img{border-radius:8px;margin:0 auto}
.col-body figure{margin:28px 0}
.col-body figcaption{margin-top:9px;font-size:12.5px;color:var(--sub);text-align:center}
.col-body blockquote{
  margin:28px 0;padding:18px 22px;background:#F7F8F9;
  border-left:4px solid var(--line);border-radius:0 6px 6px 0;color:#4A5057;
}
.col-body blockquote>*+*{margin-top:12px}
.col-body blockquote p:last-child{margin-bottom:0}
.col-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.col-body code{
  font-family:"SFMono-Regular",Consolas,monospace;font-size:.9em;
  background:#F1F3F5;padding:2px 6px;border-radius:3px;
}
.col-body pre{background:#1F2225;color:#E8EAED;padding:16px 18px;border-radius:8px;overflow-x:auto}
.col-body pre code{background:none;color:inherit;padding:0}
/* 表は幅が足りないときだけ横スクロールさせる */
.col-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.col-table table{width:100%;min-width:480px;border:1px solid var(--line);font-size:14.5px}
.col-table th,.col-table td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.col-table thead th{background:#F7F8F9;font-weight:700;white-space:nowrap}
.col-table tbody tr:last-child th,.col-table tbody tr:last-child td{border-bottom:0}

/* 記事下のサービス案内。料金・キャンペーンの数値は置かないこと（README C1〜C5） */
.col-offer{
  max-width:760px;margin:56px auto 0;background:var(--surface);
  border-radius:10px;padding:30px 32px;
}
.col-offer__eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand);margin-bottom:8px}
.col-offer__title{font-size:19px;font-weight:700;line-height:1.6;margin-bottom:10px}
.col-offer__text{font-size:14.5px;line-height:1.85;color:#4A5057;margin-bottom:20px}
.col-offer__actions{display:flex;flex-wrap:wrap;gap:12px}

/* 関連記事 */
.col-related{max-width:1080px;margin:64px auto 0}
.col-related__title{font-size:19px;font-weight:700;margin-bottom:18px}

/* 一覧ページ */
.col-index-head{margin-bottom:26px}
.col-index-head h1{font-size:30px;line-height:1.4;font-weight:700}
.col-index-head__lead{margin-top:10px;font-size:14.5px;color:var(--sub)}

.col-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.col-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--text);background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:7px 15px;
}
.col-chip span{font-family:var(--num);font-size:11px;color:var(--sub);font-weight:400}
.col-chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.col-chip.is-current{background:var(--brand);border-color:var(--brand);color:#fff}
.col-chip.is-current span{color:rgba(255,255,255,.75)}

.col-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.col-card{display:flex}
.col-card__link{
  display:flex;flex-direction:column;width:100%;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 22px 20px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.col-card__link:hover{border-color:#D8C2C6;box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.col-card__cat{font-size:11.5px;font-weight:700;color:var(--brand);margin-bottom:9px}
.col-card__title{font-size:16px;line-height:1.6;font-weight:700;margin-bottom:9px}
.col-card__link:hover .col-card__title{color:var(--brand)}
.col-card__excerpt{
  font-size:13px;line-height:1.8;color:var(--sub);margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.col-card__date{margin-top:auto;font-family:var(--num);font-size:11.5px;color:#8D939A}

/* ページ送り */
.col-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:44px}
.col-pager__num,.col-pager__side{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;font-family:var(--num);font-size:14px;
  color:var(--text);background:#fff;border:1px solid var(--line);border-radius:6px;
}
.col-pager__side{font-family:var(--jp);font-size:13.5px}
.col-pager__num:hover,.col-pager__side:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.col-pager__num.is-current{background:var(--brand);border-color:var(--brand);color:#fff}
.col-pager__gap{color:var(--sub);padding:0 2px}

@media (max-width:900px){
  .col-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .col-wrap{padding:20px 0 56px}
  .col-head__title{font-size:23px}
  .col-index-head h1{font-size:24px}
  .col-body{font-size:15.5px}
  .col-body h2{font-size:19.5px;margin-top:40px}
  .col-body h3{font-size:17px;margin-top:30px}
  .col-cards{grid-template-columns:1fr;gap:14px}
  .col-toc{padding:18px 20px}
  .col-offer{padding:24px 22px}
  .col-offer__actions .btn{width:100%}
}

/* ---------- 24. 印刷 ---------- */
@media print{
  .header,.announce,.fixed-cta,.sim__cta,.closing{display:none}
  body{font-size:11pt}
  .section{padding:16px 0;page-break-inside:avoid}
  .col-toc,.col-offer,.col-related,.col-chips,.col-pager{display:none}
  .col-body{font-size:10.5pt}
}