/* =========================================================
   Pattern C — 支給スライド①〜⑥ 忠実再現版
   ポスターの構図・配色・文言をそのままWebに落とす方針。
   共通トークンは ../assets/css/common.css を参照。
   ========================================================= */

:root{
  --c-maxw:1010px;                 /* 支給スライド(1054px)に近い版面幅 */
  --c-gray:#3f3f46;                /* Before見出しのダークグレー */
  --c-blue-soft:#eef3fc;           /* 淡い青の囲み */
  --c-cream:#fdf6e6;               /* クリーム(資産ボックス) */
  --c-line:#dfe6f1;
}

/* アイコン内部の抜き色(白ヌキ)。濃色の丸の上に置く時は --ko を背景色に合わせる */
:root{--ko:#fff}

/* ---------- 版面 ---------- */
.poster{max-width:var(--c-maxw);margin-inline:auto;padding-inline:clamp(16px,4.4vw,30px)}
.cs{padding-block:clamp(44px,7vw,78px);position:relative}
/* scroll-margin-top は common.css で3案共通に定義(ここで二重に持たない) */
.cs--soft{background:#f6f8fd}
.cs + .cs{border-top:1px solid #eef1f7}

/* ---------- 見出し(共通) ---------- */
.c-h2{
  font-weight:900;color:var(--navy);line-height:1.22;text-align:center;
  font-size:clamp(1.75rem,5.4vw,3.15rem);letter-spacing:.005em;
}
.c-h2 .sm{display:block;font-size:.46em;letter-spacing:.02em;margin-bottom:.35em}
.c-h2 .accent{color:var(--red)}
.c-lead{text-align:center;color:var(--ink);font-weight:700;margin-top:14px;
  font-size:clamp(.95rem,2.1vw,1.12rem);line-height:1.85}

/* 黄色いスウォッシュ下線 */
.swoosh{position:relative;display:inline-block;isolation:isolate}
.swoosh::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.17em;
  background:var(--yellow);border-radius:999px;z-index:0;
}
.swoosh > *{position:relative;z-index:1}

/* 見出し脇の放射線 */
.rayed{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,26px)}
.rayed .ray{width:clamp(26px,4.6vw,48px);height:clamp(40px,6.6vw,70px);flex:none;color:var(--yellow)}
.rayed .ray--r{transform:scaleX(-1)}

/* 装飾ライン付き小見出し */
.c-h3-rule{
  display:flex;align-items:center;gap:16px;justify-content:center;
  font-weight:900;color:var(--navy);font-size:clamp(1.15rem,2.9vw,1.6rem);
  margin-block:clamp(30px,5vw,46px) clamp(16px,3vw,26px);
}
.c-h3-rule::before,.c-h3-rule::after{content:"";height:3px;background:var(--navy);flex:1;max-width:170px;border-radius:2px}

/* ---------- アイコン ---------- */
svg.ic{width:1em;height:1em;display:block}

/* ---------- ユーティリティ(インラインstyleを置き換え) ---------- */
.u-sprite{position:absolute}
.u-navy{color:var(--navy)}
.u-navy2{color:var(--navy-2)}
.u-green{color:var(--green)}
.u-purple{color:var(--purple)}
.u-orange{color:var(--orange)}
.u-red{color:var(--red)}
.u-gold{color:#e8a800}
.u-white,.u-white svg{color:#fff}
.u-mt12{margin-top:12px}
.u-mt14{margin-top:14px}
.u-onred{background:#fff;color:var(--red)}
.u-onnavy{background:#fff;color:var(--navy)}
.c-lead--strong{margin-top:0;font-weight:900;color:var(--navy);font-size:clamp(1rem,2.4vw,1.28rem)}

/* =========================================================
   ① ヒーロー
   ========================================================= */
/* 支給①の構図: タイトルは全幅、その下の行を「サブコピー+黄帯(左)/写真(右)」で分割。
   写真は版面右端まで裁ち落とし、下端は黄帯の下端に揃う(タイトルには重ねない)。
   色・字詰めは支給①のみの見た目なので、共通トークンを書き換えずここで局所化する。 */
.c1{
  padding-top:clamp(26px,4vw,46px);overflow:hidden;
  --c1-navy:#0a1a4f;         /* 支給①のタイトル紺は共通 --navy より深い */
  --c1-ink:#101319;          /* サブコピー/帯本文はほぼ黒(紺ではない) */
  --c1-yellow:#f7dc45;       /* 支給①の帯は共通 --yellow より明るいレモン */
  --c1-bleed:clamp(16px,4.4vw,30px);   /* .poster の padding-inline と同値 */
}
.c1-head{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,32%,362px);
  column-gap:clamp(6px,1vw,10px);row-gap:clamp(12px,2.4vw,22px);
}
.c1-title{
  grid-column:1 / -1;
  font-weight:900;color:var(--c1-navy);line-height:.98;letter-spacing:-.044em;
  /* 版面(=100vw - .poster の左右padding)の約95%に収まる大きさ。vw 直指定だと
     padding が固定30pxになる780〜1010pxで版面をはみ出して2行に折れるため、
     版面幅から逆算する。係数9.3 = 1文字あたりの実測字送り×文字数÷0.955(安全余裕)。 */
  font-size:clamp(1.75rem,calc((100vw - 60px) / 9.3),6.38rem);
}
/* 支給①の「AI」は和文の約1.6倍の大きさ(字形の縦横比は現行フォントとほぼ同じなので
   変形はさせず font-size だけで合わせる)。ベースラインを和文より下げてカンプの
   「AIが和文の下にはみ出す」組みを再現する。 */
.c1-title .ai{
  font-size:1.77em;line-height:.5;letter-spacing:.097em;margin-right:-.055em;
  position:relative;top:.29em;   /* 和文ベースラインより下に落ちる支給①の組み */
}
/* 写真はタイトル直下から始まり(行の上端)、サブコピーだけを下げてカンプの間を作る */
.c1-lead{grid-column:1;grid-row:2;min-width:0;padding-top:clamp(6px,2.35vw,24px)}
.c1-sub{font-weight:900;color:var(--c1-ink);
  line-height:1.34;font-size:clamp(1.28rem,3.52vw,2.22rem);letter-spacing:-.02em}
.c1-sub .l1,.c1-sub .l2{display:block}
.c1-sub .l1{font-size:1.33em;line-height:1.66}   /* 支給①は1行目が2行目より一回り大きい */
.c1-sub .r{color:var(--red);font-size:1.2em}      /* 「速く」「ラク」は周囲より大きい */
.c1-photo{
  grid-column:2;grid-row:2;position:relative;min-height:220px;
  margin-right:calc(var(--c1-bleed) * -1);   /* 支給①は写真が版面右端まで裁ち落とし */
  overflow:hidden;
}
.c1-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}

/* 黄色い斜めバナー(支給①は左右とも同じ向きに傾いた平行四辺形) */
.c1-band{
  margin-top:clamp(16px,3vw,26px);
  margin-left:calc(var(--c1-bleed) * -.4);    /* 帯の下端だけ版面より少し外へ出る */
  margin-right:clamp(8px,2.2vw,24px);          /* 帯はサブコピーより少し手前で終わる */
  background:var(--c1-yellow);
  padding:clamp(5px,.85vw,8px) clamp(44px,6.6vw,66px) clamp(6px,1.15vw,11px) clamp(24px,3.7vw,36px);
  clip-path:polygon(20px 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
  font-weight:900;line-height:1.45;
  font-size:clamp(1.18rem,2.69vw,1.70rem);
}
.c1-band{color:var(--c1-ink)}   /* 支給①の帯文字はほぼ黒 */
.c1-band .l1,.c1-band .l2{display:block}
.c1-band .r{color:var(--red)}
.c1-band .num{color:var(--red);font-size:1.2em;line-height:1.208}  /* 「1人」だけ一回り大きい(行高は据え置き) */

/* Before / After — 2軸の比較データなので実体は <table>。
   見た目(ヘッダー2箱＋白カード＋中央の矢印)はカンプどおりに保つ。 */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
table.ba{
  margin-top:clamp(20px,3.4vw,30px);width:100%;table-layout:fixed;
  border-collapse:separate;border-spacing:0;
}
.ba th{
  width:50%;border-radius:10px 10px 0 0;color:#fff;text-align:center;font-weight:900;
  padding:clamp(7px,1.4vw,11px);font-size:clamp(.98rem,2.3vw,1.32rem);letter-spacing:.02em;
}
.ba th.bh{background:var(--c-gray);border-right:clamp(6px,1.4vw,12px) solid transparent;background-clip:padding-box}
.ba th.ah{background:var(--navy)}
.ba th small{font-size:.62em;font-weight:800;margin-left:.2em}

.ba td{background:#fff;vertical-align:middle;border-top:1px solid #eef2f8;position:relative}
.ba tbody tr:first-child td{border-top:0}
.ba td.ba-b{border-left:1px solid var(--c-line)}
.ba td.ba-a{border-right:1px solid var(--c-line);border-left:1px solid #eef2f8;
  padding-left:clamp(38px,5.4vw,64px)}
.ba tbody tr:last-child td{border-bottom:1px solid var(--c-line)}
.ba tbody tr:last-child td.ba-b{border-bottom-left-radius:10px}
.ba tbody tr:last-child td.ba-a{border-bottom-right-radius:10px}

.ba-cell{display:flex;align-items:center;gap:clamp(8px,1.8vw,15px);padding:clamp(9px,1.8vw,15px) clamp(8px,1.8vw,16px)}
/* 支給①のアイコンは版面幅の約6.5%(表幅991pxに対し 51〜66px)＝行高の約7割を占める。
   Before は黒(#3c3c3c)、After は紺(#21326f)で描き分けられている。 */
.ba-cell .ic{font-size:clamp(30px,5.6vw,60px);flex:none;color:#3c3c3c}
.ba-a .ba-cell .ic{color:var(--navy-2)}
.ba-cell .t{display:block;font-weight:700;line-height:1.4;font-size:clamp(.8rem,1.85vw,1rem);color:var(--ink)}
.ba-cell .v{display:block;font-weight:900;line-height:1.34;font-size:clamp(.92rem,2.25vw,1.28rem);color:var(--navy)}
.ba-a .v{color:var(--red)}
.ba-a .v em{font-style:normal;font-size:1.24em}
/* After の Excel / 業務マニュアルに添える金のきらめき(支給①) */
/* きらめきの em 基準をアイコン寸法に合わせる(親の本文サイズだと極小になる) */
.ba-ic{position:relative;flex:none;display:block;line-height:0;
  font-size:clamp(30px,5.6vw,60px);margin-right:.28em}
.ba-ic .spk{position:absolute;color:#f7c400}
.ba-ic .s1{width:.44em;height:.44em;right:-.3em;top:-.06em}
.ba-ic .s2{width:.32em;height:.32em;right:-.42em;top:.34em}
.ba-ic .s3{width:.38em;height:.38em;right:-.2em;top:.66em}
/* 矢印は Before と After の「列の境目」の上に、境界線をまたいで中央に置く
   (支給①では幅51px・高さ55px＝行高の約58%で、境界を挟んで左右に半分ずつ出る) */
.ba-arrow{
  position:absolute;left:0;top:50%;translate:-50% -50%;z-index:2;
  display:grid;place-items:center;
  color:#0d337d;font-size:clamp(24px,4.9vw,52px);
}

/* この研修は〜ではありません */
.c1-notjust{
  margin-top:clamp(18px,3vw,28px);background:var(--c-blue-soft);
  border:1px solid #d9e3f6;border-radius:12px;padding:clamp(16px,3vw,26px);
}
/* 支給①実測: 見出し 漢字ink36px(font≒40) / 本文 ink23px(font≒26)。版面991px比で
   見出し=版面の4.0%・本文=2.6%。文字は紺一色ではなく「鉤括弧内だけ紺・他は黒」。 */
.c1-notjust .notjust-h{text-align:center;font-weight:900;color:var(--c1-ink);line-height:1.45;
  font-size:clamp(1.15rem,3.4vw,2.3rem)}
.c1-notjust .notjust-h .q{color:var(--navy)}
.c1-notjust p{margin-top:clamp(8px,1.4vw,14px);text-align:center;font-weight:700;line-height:1.7;
  color:var(--c1-ink);font-size:clamp(.92rem,2.1vw,1.5rem)}
.c1-notjust p b{color:var(--red)}
.asset-row{
  margin-top:clamp(12px,2.2vw,18px);background:#fff;border-radius:10px;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.asset-row .a{
  display:flex;align-items:center;gap:clamp(5px,.85vw,8px);justify-content:center;text-align:left;
  padding:clamp(9px,1.7vw,15px) 4px;font-weight:800;color:var(--c1-ink);
  font-size:clamp(.7rem,1.5vw,1.03rem);line-height:1.3;   /* 支給①実測 ink17px(font≒19) */
}
.asset-row .a + .a{border-left:1px solid #e7edf8}
.asset-row .ic{font-size:clamp(24px,3.9vw,48px);flex:none}   /* 支給①実測 64px(版面の6.3%) */
/* 成果物5点の帯: 〜780px は3列、〜560px は2列(「AIプロンプト集」等を語中で折らない) */
@media (max-width:780px) and (min-width:561px){
  .asset-row{grid-template-columns:repeat(3,1fr)}
  .asset-row .a{border-left:0;border-top:1px solid #e7edf8}
  .asset-row .a:nth-child(-n+3){border-top:0}
  .asset-row .a:not(:nth-child(3n+1)){border-left:1px solid #e7edf8}
}
@media (max-width:560px){
  .asset-row{grid-template-columns:1fr 1fr}
  .asset-row .a{border-left:0;border-top:1px solid #e7edf8;justify-content:flex-start;padding-inline:14px}
  .asset-row .a:nth-child(-n+2){border-top:0}
  .asset-row .a:nth-child(even){border-left:1px solid #e7edf8}
  .asset-row .a:last-child{grid-column:1 / -1;justify-content:center}
}

/* 価格バンド */
.c1-price{
  margin-top:clamp(20px,3.4vw,32px);background:#f5f8fe;border-radius:16px;
  padding:clamp(14px,2.4vw,22px) clamp(10px,1.6vw,16px);display:grid;
  grid-template-columns:auto auto auto;justify-content:space-between;
  gap:clamp(6px,1.2vw,13px);align-items:center;
}
/* 支給①の価格帯を実測(版面1022px基準)。横の取り合いは
   黄丸16.4% / 実質8.7% / 19,800 38.4% / 円・〜 8.6% / 紺の円 23.5% + 余白。
   縦組みが3か所ある: 実質=2文字を縦2段、(税込)→円→〜=縦積み、導入可能！=金額の真下。 */
.c1-price .circle{
  width:clamp(80px,12.3vw,146px);aspect-ratio:1;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;text-align:center;font-weight:900;color:var(--navy);
  line-height:1.28;font-size:clamp(.86rem,2.7vw,2rem);flex:none;   /* 丸径の約20% */
}
.c1-price .amount{display:flex;align-items:center;gap:clamp(4px,1.3vw,14px);flex-wrap:nowrap}
/* 「実質」は角丸なしの赤い縦長タグ。2文字を縦に積む(支給①実測 89×132px) */
.c1-price .tag{
  writing-mode:vertical-rl;text-orientation:upright;
  background:var(--red);color:#fff;font-weight:900;border-radius:0;
  padding:.32em .38em;font-size:clamp(1rem,3.6vw,2.85rem);line-height:1.06;letter-spacing:.03em;
  margin-bottom:0;flex:none;
}
/* 支給①では金額そのものが赤(最大の訴求点)。紺にしない。
   支給①の数字は1字が縦:横=1.56の細長い字形で、和文ゴシックの数字(1.22)より背が高い。
   横幅は版面の38.4%に収める必要があるので、幅は font-size で合わせ、
   足りない背丈を scaleY で補う(縦伸ばしはレイアウト幅に影響しない)。 */
.c1-price .num{
  display:inline-block;
  font-weight:900;color:var(--red);line-height:.9;letter-spacing:-.05em;
  font-size:clamp(2.3rem,8.5vw,6.1rem);
  transform:scaleY(1.3);transform-origin:50% 50%;
}
/* (税込) → 円 → 〜 を縦に積む。円は数字の約半分、〜はその下 */
.c1-price .unit{display:grid;justify-items:center;margin-bottom:0;line-height:1}
.c1-price .tax{font-weight:800;color:var(--c1-ink);font-size:clamp(.6rem,1.5vw,1.1rem);line-height:1.2}
.c1-price .yen{font-weight:900;color:var(--red);font-size:clamp(1.2rem,6.7vw,4.9rem);line-height:1}
.c1-price .tilde{font-weight:900;color:var(--red);font-size:clamp(1.8rem,7.6vw,5.6rem);
  line-height:.6;margin-top:-.02em}
.c1-price > div:nth-child(2){width:fit-content}   /* 「導入可能！」を金額の真下・中央に */
.c1-price .go{
  font-weight:900;color:var(--c1-ink);font-size:clamp(1.2rem,4vw,2.85rem);line-height:1.15;margin-top:.06em;
  text-align:center;
}
.c1-price .go .swoosh::after{height:.17em;border-radius:2px}
/* 支給①の右側は角丸長方形ではなく「紺の正円」。3行を細い罫で区切る */
.c1-price .checks{
  background:var(--navy);border-radius:50%;aspect-ratio:1;
  width:clamp(150px,17.6vw,208px);flex:none;
  display:grid;align-content:center;justify-items:center;
  padding:0;gap:0;
}
.c1-price .checks li{
  display:flex;align-items:center;gap:clamp(5px,.8vw,9px);color:#fff;font-weight:800;
  font-size:clamp(.68rem,1.35vw,1rem);white-space:nowrap;line-height:1.4;
  padding-block:clamp(5px,.85vw,9px);width:70%;justify-content:flex-start;
}
.c1-price .checks li + li{border-top:1px solid rgba(255,255,255,.28)}
.c1-price .checks .ic{font-size:1.15em;color:var(--yellow);flex:none}

/* =========================================================
   ② 会社の資産
   ========================================================= */
.c2-grid{
  margin-top:clamp(24px,4vw,38px);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(14px,2.6vw,24px);align-items:start;
}
.c2-card{border:1px solid var(--c-line);border-radius:12px;background:#fff;overflow:hidden}
.c2-card .hd{
  background:var(--navy);color:#fff;font-weight:900;text-align:center;
  padding:clamp(9px,1.7vw,13px);font-size:clamp(.86rem,1.95vw,1.08rem);
}
.c2-card .hd small{font-size:.8em;font-weight:800}
.deliv{padding:clamp(8px,1.6vw,14px)}
.deliv li{display:flex;gap:clamp(10px,1.8vw,15px);align-items:flex-start;padding:clamp(9px,1.6vw,14px) clamp(4px,1vw,8px)}
.deliv li + li{border-top:1px solid #eef2f8}
.deliv .box{
  width:clamp(38px,6vw,52px);aspect-ratio:1;border-radius:10px;display:grid;place-items:center;flex:none;
  font-size:clamp(20px,3.2vw,28px);
}
.deliv .t{display:block;font-weight:900;line-height:1.35;font-size:clamp(.94rem,2.25vw,1.24rem)}
.deliv .d{display:block;color:var(--muted);font-weight:600;line-height:1.55;font-size:clamp(.74rem,1.6vw,.9rem);margin-top:3px}
/* 支給②のタイル: ごく薄い地+同系色の枠線 */
.deliv .box{border:1.5px solid}
.deliv .b-mail{background:#f3f7ff;color:var(--navy-2);border-color:#c7d5f0}
.deliv .b-excel{background:#f2faf5;color:var(--excel);border-color:#bcdccb}
.deliv .b-clip{background:#f3f7ff;color:var(--navy-2);border-color:#c7d5f0}
.deliv .b-prompt{background:#f6f4fe;color:var(--purple);border-color:#d3cbf2}
.deliv .b-book{background:#fef6ec;color:var(--orange);border-color:#f0d3b3}
.deliv .t-mail{color:var(--navy-2)} .deliv .t-excel{color:var(--excel)}
.deliv .t-clip{color:var(--navy-2)} .deliv .t-prompt{color:var(--purple)} .deliv .t-book{color:var(--orange)}

.c2-asset{
  background:var(--c-cream);border:1px solid #f0e4c6;border-radius:12px;
  padding:clamp(16px,2.8vw,26px);
}
.c2-asset .pill{
  display:block;width:fit-content;margin-inline:auto;background:var(--yellow);color:var(--navy);
  font-weight:900;border-radius:7px;padding:.28em .8em;font-size:clamp(.9rem,2.1vw,1.16rem);
  position:relative;
}
.c2-asset .pill::after{
  content:"";position:absolute;left:50%;bottom:-9px;translate:-50% 0;
  border:10px solid transparent;border-top-color:var(--yellow);border-bottom:0;
}
.c2-asset .big{
  text-align:center;font-weight:900;color:var(--navy);line-height:1.24;margin-top:16px;
  font-size:clamp(1.6rem,5vw,2.65rem);
}
.c2-asset .after{text-align:center;font-weight:900;color:var(--navy);
  font-size:clamp(1rem,2.7vw,1.42rem);margin-top:6px}
.c2-asset ul{margin-top:clamp(14px,2.6vw,22px);display:grid;gap:clamp(10px,1.9vw,16px)}
.c2-asset li{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(9px,1.7vw,14px);align-items:center}
.c2-asset li + li{border-top:1px solid #efe4c8;padding-top:clamp(10px,1.9vw,16px)}
.c2-asset .mk{font-size:clamp(20px,3.2vw,28px);color:var(--navy);flex:none}
.c2-asset .t{display:block;font-weight:900;color:var(--navy);line-height:1.35;font-size:clamp(.92rem,2.15vw,1.18rem)}
.c2-asset .d{display:block;color:var(--ink);font-weight:600;line-height:1.55;font-size:clamp(.72rem,1.55vw,.88rem);margin-top:3px}
.c2-asset .art{font-size:clamp(30px,5.4vw,54px);color:var(--navy-2);flex:none}

/* こんな企業におすすめ */
.reco{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.reco > div{padding:clamp(10px,2vw,18px) clamp(6px,1.4vw,14px)}
.reco > div + div{border-left:1px solid var(--line)}   /* 支給②の区切りは細いグレー罫(黄ではない) */
.reco .ic{font-size:clamp(40px,7vw,66px);margin-inline:auto}
.reco .t{font-weight:900;margin-top:12px;line-height:1.35;font-size:clamp(.9rem,2.15vw,1.18rem)}
.reco .d{color:var(--ink);font-weight:600;margin-top:7px;line-height:1.6;font-size:clamp(.74rem,1.6vw,.9rem)}
.reco .c-navy{color:var(--navy)} .reco .c-green{color:var(--green)}
.reco .c-purple{color:var(--purple)} .reco .c-orange{color:var(--orange)}

/* =========================================================
   ③ 6つの特長
   ========================================================= */
.feat{
  margin-top:clamp(22px,3.6vw,34px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.9vw,18px);
}
.feat-card{
  border:1px solid #dce4f2;border-radius:12px;background:#fff;padding:clamp(14px,2.4vw,22px);
  box-shadow:var(--shadow-sm);position:relative;
}
.feat-card .no{                       /* 支給③は紺の塗り円＋白数字 */
  position:absolute;left:clamp(12px,2vw,18px);top:clamp(12px,2vw,18px);
  width:clamp(28px,4vw,36px);aspect-ratio:1;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:900;font-size:clamp(.74rem,1.5vw,.9rem);
}
.feat-card .art{height:clamp(52px,8vw,74px);display:grid;place-items:center;
  font-size:clamp(38px,6vw,58px);margin-bottom:10px}
.feat-card .t{font-weight:900;color:var(--navy);text-align:center;line-height:1.35;
  font-size:clamp(1rem,2.4vw,1.28rem)}
.feat-card .d{margin-top:9px;text-align:center;font-weight:600;line-height:1.7;
  font-size:clamp(.78rem,1.65vw,.92rem)}


.c3-note{
  margin-top:clamp(12px,2vw,18px);background:var(--c-cream);border-radius:8px;text-align:center;
  padding:clamp(9px,1.7vw,13px);font-weight:800;color:var(--navy);font-size:clamp(.8rem,1.8vw,1rem);
}
.c3-close{
  margin-top:clamp(14px,2.4vw,22px);text-align:center;font-weight:900;color:var(--navy);line-height:1.5;
  font-size:clamp(1rem,2.7vw,1.42rem);
}
.c3-close .big{display:flex;font-size:1.34em;margin-top:8px;line-height:1.3}
.c3-close .big .ray{width:clamp(20px,3.4vw,34px);height:clamp(30px,4.8vw,48px)}

/* =========================================================
   ④ カリキュラム
   ========================================================= */
.curr{margin-top:clamp(22px,3.6vw,34px);display:grid;gap:0}
.curr-item{position:relative}
.curr-item + .curr-item{margin-top:clamp(16px,2.6vw,24px)}
.curr-item + .curr-item::before{
  content:"";position:absolute;translate:-50% 0;
  left:calc(var(--curr-no-w) + (100% - var(--curr-no-w)) * .5556);
  top:calc(-1 * clamp(10px,1.5vw,14px));
  border-left:clamp(13px,1.9vw,18px) solid transparent;
  border-right:clamp(13px,1.9vw,18px) solid transparent;
  border-top:clamp(10px,1.5vw,14px) solid var(--navy);border-bottom:0;
}
/* イラスト列は削除し、第N回 / タイトル・説明 / チェックリスト の3列構成。
   第N回の幅は▼の位置計算にも使うので変数にしておく。 */
.curr{--curr-no-w:clamp(52px,8vw,84px)}
.curr-row{
  display:grid;grid-template-columns:var(--curr-no-w) minmax(0,1.25fr) minmax(0,1fr);
  border:1px solid var(--c-line);border-radius:10px;overflow:hidden;background:#fff;
}
.curr-no{
  background:var(--navy);color:#fff;display:grid;place-items:center;text-align:center;
  font-weight:900;line-height:1.05;padding:clamp(10px,1.8vw,16px) 4px;
}
.curr-no .k{display:block;font-size:clamp(.62rem,1.3vw,.8rem)}
.curr-no .n{display:block;font-size:clamp(1.5rem,4vw,2.5rem);margin-block:2px}
/* イラスト列を外したぶん行に余白ができるので、チェックリストと同じく縦中央に置く */
.curr-main{padding:clamp(11px,2vw,18px);display:grid;align-content:center}
.curr-main .t{font-weight:900;line-height:1.32;font-size:clamp(1rem,2.5vw,1.32rem)}
.curr-main .d{margin-top:8px;color:var(--ink);font-weight:600;line-height:1.6;font-size:clamp(.76rem,1.6vw,.9rem)}
/* 意味の切れ目でだけ改行させる(支給の改行位置に合わせる・語中で折らない) */
.nb{display:inline-block}
.curr-list{padding:clamp(11px,2vw,18px);display:grid;gap:clamp(6px,1.2vw,10px);align-content:center;background:#fafcff}
.curr-list li{display:flex;gap:9px;align-items:flex-start;font-weight:700;line-height:1.5;
  font-size:clamp(.78rem,1.7vw,.95rem)}
.curr-list .ic{font-size:1.15em;flex:none;margin-top:.15em}
/* 回ごとのアクセント */
.k1 .curr-main .t,.k1 .curr-list .ic{color:var(--navy-2)}
.k2 .curr-main .t,.k2 .curr-list .ic{color:var(--green)}
.k3 .curr-main .t,.k3 .curr-list .ic{color:var(--excel)}
.k4 .curr-main .t,.k4 .curr-list .ic{color:var(--navy-2)}
.k5 .curr-main .t,.k5 .curr-list .ic{color:var(--purple)}
.k6 .curr-main .t,.k6 .curr-list .ic{color:var(--orange)}

.goal{
  margin-top:clamp(18px,3vw,28px);background:var(--c-cream);border:1px solid #f0e4c6;border-radius:12px;
  padding:clamp(14px,2.4vw,22px);display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(12px,2.4vw,24px);align-items:center;
}
.goal .tag{                                  /* 支給④は紺の楕円＋黄文字 */
  background:var(--navy);color:var(--yellow);font-weight:900;border-radius:999px;
  padding:.5em 1.1em;font-size:clamp(.86rem,2vw,1.1rem);white-space:nowrap;
}
.goal .msg{font-weight:900;color:var(--navy);line-height:1.45;font-size:clamp(1rem,2.5vw,1.42rem)}
.goal ul{display:grid;gap:7px}
.goal li{display:flex;gap:9px;align-items:center;font-weight:800;color:var(--navy);
  font-size:clamp(.78rem,1.7vw,.96rem);white-space:nowrap}
.goal .ic{color:var(--navy);font-size:1.15em;flex:none}

/* =========================================================
   ⑤ 助成金・料金
   ========================================================= */
.c5-top{
  margin-top:clamp(22px,3.6vw,34px);display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);gap:clamp(12px,2.2vw,20px);align-items:start;
}
.about{border:1px solid var(--c-line);border-radius:12px;background:#fff;overflow:hidden}
.about .hd{background:var(--navy);color:#fff;font-weight:900;padding:clamp(8px,1.6vw,12px) clamp(10px,1.8vw,16px);
  font-size:clamp(.84rem,1.9vw,1.04rem)}
.about .bd{padding:clamp(12px,2.2vw,18px)}
.about p{font-weight:600;line-height:1.75;font-size:clamp(.78rem,1.7vw,.94rem)}
.about .art{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:14px;
  font-size:clamp(36px,6vw,58px);color:var(--navy-2)}
.about .art .y{color:var(--yellow)}

/* 支給⑤の仕組み図: 枠(白カード)に入るのは見出しバーと4列だけで、
   注記の2行はカードの外に置かれている。見出しバーも全幅ではなく内容幅の中央。 */
.scheme{border:0;background:transparent;padding:0}
.scheme-card{border:1px solid var(--c-line);border-radius:12px;background:#fff;
  padding:clamp(12px,2vw,18px) clamp(10px,1.8vw,18px) clamp(14px,2.4vw,22px)}
.scheme .hd{
  width:fit-content;margin-inline:auto;max-width:100%;
  background:var(--navy);color:#fff;font-weight:900;border-radius:7px;text-align:center;
  padding:.4em .8em;font-size:clamp(.8rem,1.8vw,1rem);
}
.scheme .hd small{font-size:.82em;font-weight:800}
.scheme .flow{
  margin-top:clamp(12px,2.2vw,18px);display:grid;
  grid-template-columns:minmax(0,.88fr) auto minmax(0,1.3fr) auto minmax(0,1.58fr) auto minmax(0,1fr);
  gap:clamp(4px,1vw,10px);align-items:center;text-align:center;
}
.scheme .op{font-weight:900;color:var(--ink);font-size:clamp(1.2rem,3.2vw,2.2rem);line-height:1}
.scheme .st .lb{font-weight:800;line-height:1.35;font-size:clamp(.72rem,1.62vw,.96rem)}
.scheme .st .lb small{display:block;font-weight:700;font-size:.86em;opacity:.85}
.scheme .st .ic{font-size:clamp(30px,5.2vw,58px);margin:clamp(6px,1vw,10px) auto 0}
.scheme .st--sub .lb small{display:inline}   /* 支給⑤の「経費助成（75％）」は1行 */
.scheme .st--price .lb{color:var(--ink)} .scheme .st--price .ic{color:var(--navy-2)}
.scheme .st--sub .lb{color:var(--green)} .scheme .st--sub .ic{color:var(--green)}
.scheme .st--add .lb{color:var(--orange)} .scheme .st--add .ic{color:var(--orange)}
.scheme .st--net{border:2px solid var(--red);border-radius:9px;padding:0;overflow:hidden;
  align-self:stretch;display:grid;align-content:start}
.scheme .st--net .lb{background:var(--red);color:#fff;border-radius:0;
  padding:.34em .4em;display:block;width:100%}
.scheme .st--net .ic{color:var(--red);margin-block:clamp(8px,1.5vw,16px)}
.scheme .notes{margin-top:clamp(12px,2.2vw,18px);display:grid;gap:8px;padding-left: 0;}
.scheme .notes li{display:flex;gap:10px;align-items:flex-start;font-weight:700;line-height:1.6;
  font-size:clamp(.8rem,1.8vw,1.12rem)}
.scheme .notes .ic{color:var(--green);font-size:1.2em;flex:none;margin-top:.1em}

/* プラン */
.plans{margin-top:clamp(16px,2.8vw,26px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.2vw,20px)}
.plan{border:1px solid var(--c-line);border-radius:12px;background:#fdfdff;padding:clamp(14px,2.4vw,22px)}
.plan--n{background:#fbfcff;border-color:#ccd8ef}
.plan .rec{
  display:block;width:fit-content;margin-inline:auto;color:#fff;font-weight:900;border-radius:6px;
  padding:.3em .9em;font-size:clamp(.72rem,1.6vw,.9rem);
}
.plan--l .rec{background:var(--green)}
.plan--n .rec{background:var(--navy)}
.plan .name{text-align:center;font-weight:900;color:var(--navy);margin-top:12px;line-height:1.25;
  font-size:clamp(1.3rem,3.6vw,2rem)}
.plan--l .name{color:var(--green)}   /* 支給⑤のライトプラン名は緑 */
.plan .name small{font-size:.62em}
.plan .cap{text-align:center;font-weight:800;margin-top:8px;line-height:1.5;font-size:clamp(.78rem,1.7vw,.95rem)}
.plan--l .cap{color:var(--green)} .plan--n .cap{color:var(--red)}
.plan .icons{
  margin-top:clamp(12px,2.2vw,18px);display:grid;gap:4px;text-align:center;
  border-bottom:1px solid #e7edf8;padding-bottom:clamp(10px,1.8vw,15px);
}
.plan--l .icons{grid-template-columns:repeat(5,1fr)}
/* 支給⑤のノーマルプランはアイコン7個・最後のラベル「個別フォロー・定着サポート」が2個にまたがる */
.plan--n .icons{grid-template-columns:repeat(5,1fr) 1.3fr}
.plan--n .icons .lb{font-size:clamp(.5rem,1.05vw,.66rem)}
.plan .icons .two{display:flex;gap:clamp(2px,.6vw,6px);justify-content:center}
.plan .icons .ic{font-size:clamp(19px,3vw,28px);margin-inline:auto;color:var(--navy-2)}
.plan .icons .lb{margin-top:6px;font-weight:700;line-height:1.3;font-size:clamp(.53rem,1.15vw,.7rem);color:var(--ink)}
.plan .rows{margin-top:clamp(10px,1.8vw,15px)}
.plan .rows div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:clamp(7px,1.3vw,11px) 0;border-bottom:1px solid #eef2f8}
.plan .rows .k{font-weight:700;font-size:clamp(.76rem,1.62vw,.92rem)}
.plan .rows .k small{font-size:.86em;font-weight:600;color:var(--muted)}
.plan .rows .v{font-weight:900;font-size:clamp(.92rem,2.1vw,1.16rem);white-space:nowrap}
.plan .rows .minus .k,.plan .rows .minus .v{color:var(--green)}
.plan .rows .add .k,.plan .rows .add .v{color:var(--orange)}
.plan .net{
  margin-top:clamp(12px,2.2vw,18px);display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
}
.plan .net .lb{color:#fff;font-weight:900;border-radius:7px;padding:.34em .8em;
  font-size:clamp(.84rem,1.9vw,1.06rem);white-space:nowrap}
.plan--l .net .lb{background:var(--green)}
.plan--n .net .lb{background:var(--navy)}
.plan .net .amt{font-weight:900;color:var(--red);line-height:1;letter-spacing:-.02em;
  font-size:clamp(2rem,5.8vw,3.3rem);position:relative}
.plan .net .amt::after{content:"";position:absolute;left:0;right:.6em;bottom:-.06em;height:.1em;background:var(--yellow);border-radius:2px}
.plan .net .spark{position:absolute;right:-.5em;top:-.34em;width:.42em;height:.5em;color:var(--yellow);transform:scaleX(-1)}
.plan .net .yen{font-size:.42em;letter-spacing:0}
.plan .pts{margin-top:clamp(12px,2.2vw,18px);display:grid;gap:8px}
.plan .pts li{display:flex;gap:9px;align-items:flex-start;font-weight:700;line-height:1.55;
  font-size:clamp(.76rem,1.62vw,.92rem)}
.plan .pts .ic{color:var(--green);font-size:1.2em;flex:none;margin-top:.1em}

/* ご利用の流れ */
.flow5{
  margin-top:clamp(16px,2.8vw,26px);background:#faf8f2;border:1px solid #efe8d8;border-radius:12px;
  padding:clamp(14px,2.4vw,22px);
}
.flow5 .hd{text-align:center;font-weight:900;color:var(--navy);font-size:clamp(1rem,2.4vw,1.28rem)}
.flow5 .steps{
  margin-top:clamp(12px,2.2vw,18px);display:grid;
  grid-template-columns:repeat(5,1fr);gap:clamp(4px,1vw,10px);
}
.flow5 .st{text-align:center;position:relative;padding-inline:4px}
.flow5 .st + .st::before{
  content:"";position:absolute;left:calc(-1 * clamp(4px,1vw,10px) / 2 - 7px);
  top:50%;translate:0 -50%;
  border-top:clamp(8px,1.5vw,12px) solid transparent;
  border-bottom:clamp(8px,1.5vw,12px) solid transparent;
  border-left:clamp(9px,1.7vw,14px) solid var(--navy);border-right:0;
}
.flow5 .st .n{
  display:inline-grid;place-items:center;width:clamp(20px,3vw,26px);aspect-ratio:1;border-radius:50%;
  background:var(--green);color:#fff;font-weight:900;font-size:clamp(.66rem,1.4vw,.82rem);margin-right:5px;
  vertical-align:middle;
}
/* 見出しは1行/2行が混在するが、支給⑤は5ステップのアイコンが横一列に揃っている。
   2行ぶんの高さを確保して、アイコンと矢印の高さを全ステップで一致させる。 */
.flow5 .st .t{font-weight:900;color:var(--navy);line-height:1.3;font-size:clamp(.7rem,1.55vw,.9rem);
  display:inline-block;vertical-align:middle;min-height:2.6em}
.flow5 .st .ic{font-size:clamp(28px,4.6vw,42px);margin:10px auto 8px;color:var(--navy-2)}
.flow5 .st .d{font-weight:600;line-height:1.55;font-size:clamp(.66rem,1.4vw,.82rem)}

.c5-cta{
  margin-top:clamp(16px,2.8vw,26px);background:var(--c-cream);border:1px solid #f0e4c6;border-radius:12px;
  padding:clamp(14px,2.4vw,20px);display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(12px,2.4vw,22px);align-items:center;
}
.c5-cta .bulb{font-size:clamp(34px,5.4vw,52px);color:var(--yellow);flex:none}
.c5-cta .msg{font-weight:900;color:var(--navy);line-height:1.4;font-size:clamp(1.02rem,2.6vw,1.5rem)}
.c5-cta .msg .r{color:var(--red)}
.c5-cta .chipline{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
.c5-cta .chipline span{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--navy);
  font-size:clamp(.76rem,1.62vw,.92rem)}
.c5-cta .chipline .ic{color:var(--green);font-size:1.1em}
.c5-cta .box{
  background:var(--red);color:#fff;border-radius:10px;padding:clamp(12px,2vw,16px) clamp(14px,2.4vw,22px);
  text-align:center;font-weight:900;line-height:1.45;font-size:clamp(.86rem,1.95vw,1.06rem);
}
.c5-cta .box small{display:block;font-weight:800;font-size:.84em;margin-top:4px;color:#ffd9dc}

/* =========================================================
   ⑥ 未来
   ========================================================= */
.c6-rule{
  display:flex;align-items:center;gap:12px;margin:clamp(16px,2.8vw,26px) auto 0;max-width:760px;color:var(--navy);
}
.c6-rule::before,.c6-rule::after{content:"";height:2px;background:currentColor;flex:1;opacity:.5}
.c6-rule .dot{width:9px;height:9px;border-radius:50%;background:currentColor}

.c6-grid{
  margin-top:clamp(20px,3.4vw,32px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(14px,2.6vw,22px);align-items:stretch;
}
.future{border:1px solid var(--c-line);border-radius:12px;background:#fff;overflow:hidden}
.future .hd{background:var(--navy);color:#fff;font-weight:900;padding:clamp(9px,1.7vw,13px) clamp(12px,2vw,18px);
  font-size:clamp(.88rem,2vw,1.1rem)}
.future ul{padding:clamp(8px,1.6vw,14px)}
.future li{display:grid;grid-template-columns:auto 1fr;gap:clamp(10px,1.9vw,16px);align-items:start;
  padding:clamp(9px,1.6vw,14px) clamp(4px,1vw,8px)}
.future li + li{border-top:1px solid #eef2f8}
.future .ring{
  width:clamp(38px,5.6vw,52px);aspect-ratio:1;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:clamp(19px,3vw,27px);flex:none;
  --ko:var(--navy);            /* 濃紺の丸の上なので、白ヌキ部分は紺に */
}
.future .t{font-weight:900;color:var(--navy);line-height:1.35;font-size:clamp(.96rem,2.3vw,1.22rem)}
.future .d{margin-top:5px;font-weight:600;line-height:1.6;font-size:clamp(.76rem,1.62vw,.9rem)}
.c6-photo{border-radius:12px;overflow:hidden;min-height:100%}
.c6-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}

.c6-close{
  margin-top:clamp(18px,3vw,28px);background:var(--c-cream);border-radius:12px;
  padding:clamp(16px,2.8vw,26px);display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.4vw,22px);
  align-items:start;
}
.c6-close .bulb{font-size:clamp(34px,5.4vw,54px);color:var(--navy);flex:none}
.c6-close h3{font-weight:900;color:var(--navy);line-height:1.4;font-size:clamp(1.1rem,3vw,1.72rem)}
.c6-close p{margin-top:10px;font-weight:700;line-height:1.85;font-size:clamp(.8rem,1.75vw,.98rem)}
.c6-close .b{margin-top:10px;color:var(--navy);font-weight:900;font-size:clamp(.88rem,2vw,1.12rem)}

/* =========================================================
   CTA / 補足
   ========================================================= */
.c-contact{background:var(--red);color:#fff;text-align:center}
.c-contact .wrapin{display:grid;gap:16px;place-items:center}
.c-contact h2{font-weight:900;line-height:1.3;font-size:clamp(1.5rem,4.2vw,2.4rem)}
.c-contact p{color:#ffe1e3;font-weight:700;line-height:1.8}
.c-contact p b{color:#fff}
/* 提案先(既にお付き合いのある担当者)向けの補足導線。主CTAより一段弱く置く */
/* 赤地では淡色にすると 4.5:1 を割るため、色は純白のまま。
   弱さは文字サイズだけで出す(既存の .c-contact p と同じ判断) */
.c-contact .direct{color:#fff;font-weight:700;line-height:1.7;
  font-size:clamp(.78rem,1.6vw,.92rem);max-width:44em;margin-top:-4px}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:920px){
  .plan--n .icons{grid-template-columns:repeat(3,1fr)}
  .plan--l .icons{grid-template-columns:repeat(3,1fr)}
  .c5-top{grid-template-columns:1fr}
  .curr{--curr-no-w:clamp(52px,10vw,70px)}
  .curr-row{grid-template-columns:var(--curr-no-w) 1fr 1fr}
  /* この幅では2列が等分になるので▼もその境目(中点)へ */
  .curr-item + .curr-item::before{left:calc(var(--curr-no-w) + (100% - var(--curr-no-w)) * .5)}
  .goal{grid-template-columns:auto 1fr;row-gap:14px}
  .goal ul{grid-column:1 / -1}
}
@media (max-width:780px){
  .c1-head{grid-template-columns:1fr}
  .c1-title{grid-column:1}
  .c1-title .ai{font-size:1.55em;letter-spacing:.06em;margin-right:-.03em;top:.18em}
  .c1-lead{grid-column:1;grid-row:auto}
  .c1-photo{grid-column:1;grid-row:auto;position:static;min-height:0;margin:4px 0 0;border-radius:10px}
  .c1-photo img{position:static;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  /* 1カラムでは帯の外側への食い出しをやめ、傾きも浅くする */
  .c1-band{margin-left:0;padding-left:clamp(18px,3.4vw,30px);
    clip-path:polygon(12px 0, 100% 0, calc(100% - 22px) 100%, 0 100%)}
  .c1-price{grid-template-columns:auto 1fr;row-gap:16px;justify-content:start}
  .c1-price .checks{grid-column:1 / -1;grid-template-columns:repeat(3,1fr);display:grid;
    border-radius:16px;aspect-ratio:auto;width:100%;
    padding:clamp(12px,2.2vw,18px) clamp(14px,2.4vw,22px);align-content:start}
  .c1-price .checks li{justify-content:center;font-size:.8rem;padding-block:0;width:auto}
  .c1-price .checks li + li{border-top:0}
  .c2-grid{grid-template-columns:1fr}
  .reco{grid-template-columns:1fr 1fr}
  .reco > div + div{border-left:0}
  .reco > div:nth-child(even){border-left:1px solid var(--line)}
  .reco > div:nth-child(n+3){border-top:1px solid var(--line)}
  .feat{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
  .flow5 .steps{grid-template-columns:repeat(2,1fr);gap:14px}
  .flow5 .st + .st::before{display:none}
  .c5-cta{grid-template-columns:1fr;text-align:center;justify-items:center}
  .c6-grid{grid-template-columns:1fr}
  .c6-photo{max-height:400px}
  .c6-close{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media (max-width:560px){
  /* 7列の仕組み図は狭い画面で窮屈になるため、字送りを詰めて語中改行を減らす */
  .scheme .flow{gap:3px}
  .scheme .st .lb{font-size:.66rem}
  .scheme .st .lb small{font-size:.8em}
  .scheme .op{font-size:1.05rem}
  .scheme .st--net .lb{font-size:.6rem;padding:.4em .2em}   /* 「実質負担額」を1行に収める */
  .ba-cell{flex-direction:column;align-items:flex-start;gap:6px}
  .ba-cell .ic{font-size:30px}
  .ba-ic{font-size:30px}
  .ba td.ba-a{padding-left:clamp(24px,7vw,34px)}
  .ba-arrow{font-size:clamp(20px,6.4vw,30px)}   /* 中央寄せは共通指定のまま */
  .curr{--curr-no-w:44px}
  .curr-row{grid-template-columns:var(--curr-no-w) 1fr}
  .curr-item + .curr-item::before{left:50%}   /* リストが下段に回るのでカード中央へ */
  .curr-list{grid-column:1 / -1;border-top:1px solid #eef2f8}
  .feat{grid-template-columns:1fr}
  .c1-price{grid-template-columns:1fr;justify-items:center;text-align:center}
  .c1-price .amount{justify-content:center;flex-wrap:wrap}
  .c1-price .checks{grid-template-columns:1fr;width:100%}
  .c1-price .checks li{white-space:normal;justify-content:flex-start}
  .goal{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* =========================================================
   アクセシビリティ／堅牢性の補正
   (common.css 由来の問題は pattern-c 側にスコープして上書き。
    pattern-a / pattern-b には影響させない)
   ========================================================= */

/* キーボード操作用スキップリンク(フォーカス時のみ表示) */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:100;
  background:var(--navy);color:#fff;font-weight:800;border-radius:0 0 8px 8px;
  padding:12px 20px;transition:top .18s ease;
}
.skip-link:focus-visible{top:0}

/* 赤地の上の淡色文字はコントラスト不足(3.7〜3.9:1)だったので白に。
   #ffeef0 でも 4.29:1 で AA 未達だったため純白(4.80:1)を採用。 */
.c-contact p{color:#fff}
.c5-cta .box small{color:#fff;opacity:.92}

/* 白地の緑小文字は #1e9e46 だと 3.48:1 で AA 未達。見た目をほぼ変えずに濃くする */
.scheme .st--sub .lb{color:#177a36}

/* 黄色地の赤(支給①の配色)は 3.35:1。文字を小さくすると AA を外れるため、
   色を濁らせるのではなく最小サイズを 18.66px 以上に保って「大きな文字」の
   基準(3:1)を満たす。= 支給デザインの赤をそのまま使える。
   帯の地色を支給どおりの明るいレモン(--c1-yellow #f7dc45)にして 3.49:1(実測)。 */
.c1-band{font-size:clamp(1.18rem,2.69vw,1.70rem)}

/* 極小幅での長いCTAラベルの折り返しは common.css で3案共通に対応済み */

/* 印刷 */
@media print{
  .site-header,.sticky-cta{display:none}
  .cs{break-inside:avoid}
  .c-contact{background:#fff;color:var(--ink)}
  .c-contact p{color:var(--muted)}
}