/* FONTS:BEGIN — build-fonts.py が生成。手で直さない（次回の実行で消える） */
/* 自社配信の書体。SIL Open Font License 1.1 / 原本のライセンスは fonts/OFL-*.txt */
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/noto-sans-jp.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/outfit.woff2") format("woff2");}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/zen-kaku-500.woff2") format("woff2");}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/zen-kaku-700.woff2") format("woff2");}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/zen-kaku-900.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-700.woff2") format("woff2");}
/* FONTS:END */

/* ============================================================
   CoreLine 公式サイト — 共通スタイルシート
   6ページに複製されていたCSSを1枚に統合したもの。正本は旧 top-mock-v4.html。
   以後、CSSの変更はこのファイルだけを直す。
   ============================================================ */

/* ============================================================
   CoreLine — トップページ デザインモック v2
   ヒーローと最終CTAをロゴのグラデーションで挟み、間は白と淡橙を交互に置く
   ============================================================ */

:root{
  color-scheme: light;

  /* --- 基調色 --- */
  --bg:        #FFF7EF;   /* 淡いオレンジ — ページの主調 */
  --cream:     #FDF1E5;   /* 一段濃い淡橙（面の切り替え用） */
  --cream-2:   #FBE8D6;
  --white:     #FFFFFF;
  --ink:       #2B1D14;   /* 暖色寄りの濃茶 — 文字と沈めの面 */

  /* 明るい地の上で読めるアクセント（金は地と同化するため文字には使わない） */
  --gold:      #C7210E;   /* 小さい文字用の赤 — 5.4:1 */
  --gold-lt:   #C1470A;   /* 数字用の橙赤 — 5.0:1 */
  --gold-dk:   #BE2410;   /* 明転上の赤 — 5.7:1 */

  /* --- セクション内で切り替わる論理色 --- */
  --fg:        #2B1D14;
  --fg-muted:  #7A6A5D;
  --rule:      rgba(43,29,20,.13);
  --rule-2:    rgba(43,29,20,.24);
  --panel:     rgba(43,29,20,.03);

  /* ロゴ原本（ロゴ.jpg / オンライン背景.png）から実測した値。
     ワードマークは左端の赤から右端の金へ、80%付近が最も明るい。 */
  --brand-a:   #D92B12;   /* ロゴ左端：赤   実測 #DB3114 */
  --brand-b:   #F0700C;   /* ロゴ中央：橙   実測 #F16E10 (52%) */
  --brand-c:   #FBC229;   /* ロゴ右端：金   実測 #FBC029 */
  --brand-pk:  #FDCE2E;   /* 80%付近のピーク 実測 #FECE2E */
  --brand:     #C7210E;   /* 面用の単色（赤寄り） */
  --grad:      linear-gradient(100deg,var(--brand-a) 0%,#E8560C 16%,var(--brand-b) 42%,var(--brand-pk) 82%,var(--brand-c) 100%);
  --grad-v:    linear-gradient(180deg,var(--brand-a) 0%,var(--brand-b) 45%,var(--brand-c) 100%);

  /* シンボル単体の色域。ワードマークより赤が深い（実測 #DF0D0D → #EE3707）。
     ロックアップ全体で見ると、シンボルはグラデーションの左端18%を担当する。 */
  --mark-a:    #DC0F0C;
  --mark-b:    #EE3A07;

  /* --- タイポ --- */
  --f-disp: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --f-body: "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --f-num:  "Outfit","Zen Kaku Gothic New",sans-serif;

  /* --- レイアウト --- */
  --wrap: 1200px;
  --gutter: clamp(1rem,5vw,3rem);
  --sec-y: clamp(4.5rem,11vw,9rem);
}

*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x は html だけに置く。body にも付けると body 自身がスクロール
   コンテナ扱いになり、position:sticky が「スクロールしない箱」を基準にして
   しまうため、ヘッダーが本文と一緒に流れて消える。
   モバイルで透かしを右にはみ出させるためのクリップは html 側だけで足りる。 */
html{ max-width:100%; overflow-x:hidden; }

body{ max-width:100%; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(0.98rem,0.94rem + 0.22vw,1.06rem);
  line-height:1.95;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4,p,li,dd,dt,blockquote{ overflow-wrap:break-word; }

a{ color:inherit; }

@supports (word-break: auto-phrase){
  h1,h2,h3,.lead,.jp-break,.cov-step b,.p-answer p.big{ word-break:auto-phrase; }
}

.nb{ display:inline-block; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

section{ padding-block:var(--sec-y); position:relative; }

/* 明転セクション：論理色を差し替えるだけで中身は共通 */
/* ------------------------------------------------------------------
   面の順番（隣り合う面は必ず違う色にする）
   ヒーロー   : 濃橙グラデーション
   マーキー   : 淡橙のクリーム帯
   サービス   : 淡オレンジ
   課題       : 白
   実績       : 淡オレンジ（body）
   支援範囲   : 白
   料金       : 淡オレンジ（body）
   最終CTA    : 濃橙グラデーション（ヒーローと呼応）
   フッター   : 濃茶
   ※ FAQは faq-mock.html へ移設（2026-09-17）。
   ※ 導入事例・スタンス・代表メッセージ・会社概要も各ページへ移設（2026-09-17）。
      流れもTOPから削除（2026-09-17）。抜けたぶん、料金を淡オレンジに振り直した。
   ------------------------------------------------------------------ */
.sec-light{ background:var(--white); }

.sec-dark-2{ background:var(--white); }

/* 課題 = 白 */
#service{ background:var(--bg); }

/* サービス = 淡オレンジ */

/* ============================================================
   共通パーツ
   ============================================================ */
.eyebrow{
  font-family:var(--f-num); font-weight:600;
  font-size:0.76rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.4rem;
  display:flex; align-items:center; gap:1rem;
}

.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--gold); flex:0 0 auto;
}

.sec-light .eyebrow{ color:var(--gold-dk); }

.sec-light .eyebrow::before{ background:var(--gold-dk); }

.sec-title{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.8rem,1.15rem + 2.9vw,3.4rem);
  line-height:1.4; letter-spacing:-0.01em;
  margin:0 0 1.4rem; color:var(--fg);
}

.sec-note{ max-width:46em; color:var(--fg-muted); margin:0 0 clamp(2.4rem,6vw,4rem); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.7rem;
  min-height:58px; padding:0 2.1rem; border-radius:999px;
  font-family:var(--f-body); font-weight:700; font-size:0.98rem; letter-spacing:0.05em;
  text-decoration:none; border:1px solid transparent; position:relative; overflow:hidden;
  transition:color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}

.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--grad);
  transform:translateY(0); transition:transform .35s cubic-bezier(.2,.7,.3,1);
}

.btn-gold{ color:#140F0C; font-weight:700; }

.btn-gold:hover{ transform:translateY(-2px); }

.btn-gold::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);
}

.btn-gold:hover::after{ animation:sheen .8s ease forwards; }

@keyframes sheen{ to{ transform:translateX(120%); } }

.btn-line{
  color:var(--fg); border-color:var(--rule-2); background:transparent;
}

.btn-line::before{ display:none; }

.btn-line:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* ============================================================
   スクロール進捗バー
   ============================================================ */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:100;
  background:var(--grad);
  transform:scaleX(0); transform-origin:0 50%;
}

@supports (animation-timeline: scroll()){
  .progress{ animation:prog linear both; animation-timeline:scroll(root); }
  @keyframes prog{ to{ transform:scaleX(1); } }
}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header{
  position:static; z-index:90;
  background:var(--white);
  /* 背景が不透明になったので backdrop-filter は効果ゼロ。追従中の毎フレーム
     のぼかし合成だけが残るため外した。 */
  border-bottom:1px solid var(--rule);
}

/* PCのみ追従。モバイルは画面下に固定CTAバー（.mobile-cta）があるので、
   上も固定すると可視領域を二重に削る。ナビとCTAが出そろう 1040px から。 */
@media (min-width:1040px){
  .site-header{ position:sticky; top:0; }
  /* 追従ヘッダーの下にアンカー先が潜らないように（min-height:74px ＋ 余白） */
  section[id]{ scroll-margin-top:calc(74px + 1.2rem); }
}

.header-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; }

.logo{ display:flex; flex-direction:column; gap:3px; text-decoration:none; min-width:0; }

.logo b{
  font-family:var(--f-num); font-weight:600; font-size:clamp(1.3rem,1.15rem + 0.8vw,1.7rem);
  line-height:1;
  font-family:"Poppins",var(--f-num); font-weight:700; letter-spacing:-0.005em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ブランドシンボル（お預かりしたマークの再現） */
.mark{ width:auto; flex:0 0 auto; }

/* 原本の比率：シンボルの直径 = ワードマークのキャップ高 ÷ 0.685。
   Poppins のキャップ高は約 0.70em なので、シンボル高 ≒ 文字サイズ × 1.02。 */
.header-in .mark{ height:clamp(1.33rem,1.17rem + 0.82vw,1.74rem); }

/* 原本の字間：シンボル高 × 0.342 */
.logo-lockup{ display:flex; align-items:center; gap:clamp(0.46rem,0.4rem + 0.28vw,0.6rem); text-decoration:none; min-width:0; }

.logo{ gap:3px; }

.logo small{ font-size:0.62rem; letter-spacing:0.22em; color:var(--fg-muted); line-height:1; }

.gnav{ display:none; }

@media (min-width:1040px){
  .gnav{ display:flex; align-items:center; gap:2.1rem; }
  .gnav a{
    text-decoration:none; font-size:0.9rem; font-weight:500; letter-spacing:0.06em;
    position:relative; padding-block:6px; color:rgba(43,29,20,.82);
    transition:color .2s ease;
  }
  .gnav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--gold); transform:scaleX(0); transform-origin:right;
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .gnav a:hover{ color:var(--brand); }
  .gnav a:hover::after{ transform:scaleX(1); transform-origin:left; }
}

.header-cta{ display:none; }

@media (min-width:1040px){ .header-cta{ display:inline-flex; min-height:46px; padding:0 1.5rem; font-size:0.88rem; } }

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(4.5rem,13vw,9rem) clamp(3.5rem,9vw,6rem);
  background:linear-gradient(115deg,#E8560C 0%,#F0700C 38%,#FDCE2E 86%,#FBC229 100%);
}

/* グラデーションの上では光の演出は濁るので止める */
.hero .aurora{ display:none; }

/* 透かしのシンボルは白抜きにする */
.hero-ring path{ stroke:#fff; }

/* ボタンはCTAと同じ扱い（濃茶＋白抜き） */
.hero .btn-gold::before{ background:var(--ink); }

.hero .btn-gold{ color:#FFF7EF; }

.hero .btn-line{ border-color:rgba(43,29,20,.42); color:var(--ink); }

.hero .btn-line:hover{ background:var(--ink); color:#FFF7EF; border-color:var(--ink); }

.aurora{ position:absolute; inset:-20% -10% auto -10%; height:150%; pointer-events:none; z-index:0; }

.aurora i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(86px); opacity:.5;
}

.aurora i:nth-child(1){
  width:66vw; height:66vw; max-width:820px; max-height:820px; left:-14%; top:-4%;
  background:radial-gradient(circle,rgba(245,180,23,.68),transparent 68%);
}

.aurora i:nth-child(2){
  width:52vw; height:52vw; max-width:660px; max-height:660px; right:-10%; top:12%;
  background:radial-gradient(circle,rgba(240,112,12,.36),transparent 66%);
}

.aurora i:nth-child(3){
  width:34vw; height:34vw; max-width:480px; max-height:480px; left:38%; top:48%;
  background:radial-gradient(circle,rgba(217,43,18,.20),transparent 66%);
}

@media (prefers-reduced-motion:no-preference){
  .aurora i:nth-child(1){ animation:drift1 26s ease-in-out infinite alternate; }
  .aurora i:nth-child(2){ animation:drift2 32s ease-in-out infinite alternate; }
  .aurora i:nth-child(3){ animation:drift3 24s ease-in-out infinite alternate; }
}

@keyframes drift1{ to{ transform:translate3d(9%,7%,0) scale(1.14); } }

@keyframes drift2{ to{ transform:translate3d(-11%,10%,0) scale(1.2); } }

@keyframes drift3{ to{ transform:translate3d(7%,-9%,0) scale(1.1); } }

/* 透かしのシンボル。
   モバイルは従来どおり右へはみ出させる（狭い画面で全体を入れると小さくなりすぎる）。
   PCは 640px で頭打ちにしていたため相対的に小さく、しかも右端で切れていた。
   1000px 以上では画面内に全体を収め、シンボルが途中で切れないようにする。 */
.hero-ring{
  position:absolute; right:-16%; top:6%; width:min(66vw,640px); height:auto;
  opacity:.17; z-index:0; pointer-events:none;
}

@media (min-width:1000px){
  .hero-ring{ right:1.5%; top:4%; width:min(58vw,880px); }
}

@media (prefers-reduced-motion:no-preference){
  .hero-ring{ animation:ringFloat 18s ease-in-out infinite alternate; }
}

@keyframes ringFloat{ to{ transform:translate3d(0,-3.5%,0) scale(1.04); } }

.hero .wrap{ position:relative; z-index:1; }

/* ヒーローのラベル。半透明の白（.42）では橙の地と同化してぼやけていたので
   白ベタに。ヒーローで唯一の濃い面はCTAボタン（濃茶ベタ）に残し、ラベルは
   明度を逆に振ることで「押せるもの」に見えないようにする。
   ドットだけブランド赤（--gold）でアクセント。 */
.hero-kicker{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--f-num); font-weight:600;
  font-size:clamp(0.62rem,0.58rem + 0.2vw,0.74rem);
  letter-spacing:clamp(0.13em,0.06em + 0.35vw,0.28em);
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
  border:1px solid var(--white); border-radius:999px;
  padding:0.5rem 1.1rem; margin-bottom:clamp(1.6rem,4vw,2.4rem);
  background:var(--white);
}

.hero-kicker span{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

@media (prefers-reduced-motion:no-preference){
  .hero-kicker span{ animation:pulse 2.4s ease-in-out infinite; }
}

@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.72);} }

.hero h1{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(2.02rem,1.05rem + 6.2vw,5.2rem);
  line-height:1.3; letter-spacing:-0.02em; margin:0 0 1.8rem;
}

.hero h1 .ln{ display:block; overflow:hidden; }

.hero h1 .ln > span{ display:block; }

@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln > span{ transform:translateY(105%); animation:lineUp .95s cubic-bezier(.16,.9,.28,1) forwards; }
  .hero h1 .ln:nth-child(1) > span{ animation-delay:.12s; }
  .hero h1 .ln:nth-child(2) > span{ animation-delay:.26s; }
}

@keyframes lineUp{ to{ transform:translateY(0); } }

.shimmer{
  /* 濃橙の上では文字色で差をつけられないため、クリームの帯を敷いて反転させる */
  -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--ink); -webkit-text-fill-color:var(--ink);
  padding-inline:.12em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  background:linear-gradient(#FFFAF3,#FFFAF3) left center / 100% 90% no-repeat;
}

@media (prefers-reduced-motion:no-preference){
  .shimmer{ background-size:0% 90%; animation:bandIn .85s cubic-bezier(.16,.9,.28,1) .62s forwards; }
}

@keyframes bandIn{ to{ background-size:100% 90%; } }

.hero .lead{
  max-width:40em; font-size:clamp(1rem,0.95rem + 0.4vw,1.18rem);
  color:rgba(43,29,20,.86); margin:0 0 2.8rem;
}

/* ------------------------------------------------------------------
   .lock-lines — 段落の行構成を固定する
   中の <span> ごとに必ず改行する。横幅が足りる端末では書いたとおりの
   行数になり、足りない端末では各 <span> の中だけで折り返すので、
   どの端末でも意味のまとまりが崩れない（語の途中では切れない）。
   ------------------------------------------------------------------ */
.lock-lines > span{ display:block; }

/* 狭い画面でだけ効く改行。全角28文字を超える行は 660px 未満で必ず折り返すので、
   ブラウザ任せにせず切れ目を指定しておく。660px 以上では無効（1行に収まる）。 */
br.sp{ display:none; }

@media (max-width:659px){ br.sp{ display:inline; } }

/* ------------------------------------------------------------------
   .phrase — 文節単位でだけ折り返す
   .lock-lines と違って改行を強制しない。各 <span> は内部で折り返さないので、
   幅が足りれば1行のまま、足りなければ必ず意味の切れ目で折り返す。
   見出しや短い文で「語の途中で切れる」のを防ぐ用途。
   注意：1つの <span> が入れ物より長いと折り返せずにはみ出すので、
   まとまりは最も狭いカード幅に収まる長さ（全角16文字程度まで）にする。
   ------------------------------------------------------------------ */
/* text-indent は継承する。span は inline-block ＝ ブロックコンテナなので、
   親のぶら下げインデント（text-indent:負値）をもう一度自分にも適用してしまい、
   自分の幅だけその分狭くなって中身が左へはみ出す＝隣の span と文字が重なる。
   ぶら下げは親の1行目だけに効けばいいので、子では必ず打ち消す。 */
.phrase > span{ display:inline-block; white-space:nowrap; text-indent:0; }

/* 語の途中で切りたくない単語だけを個別に止める（「ターゲット設／計」のような
   カタカナ語の分断を防ぐ）。段落全体を固めないので行数は増えない。
   ※ .nb は別用途で既に使われているため、別名にしている。 */
.nw{ white-space:nowrap; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:0.9rem; }

.hero-actions .btn{ flex:1 1 250px; }

@media (min-width:660px){ .hero-actions .btn{ flex:0 0 auto; } }

@media (prefers-reduced-motion:no-preference){
  .fade-up{ opacity:0; transform:translateY(24px); animation:fadeUp .9s cubic-bezier(.16,.9,.28,1) forwards; }
  .d1{ animation-delay:.45s; } .d2{ animation-delay:.6s; } .d3{ animation-delay:.75s; }
}

@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.hero-meta{
  margin-top:clamp(3rem,7vw,4.5rem);
  display:grid; gap:1.9rem;
}

@media (min-width:760px){ .hero-meta{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.6rem); } }

/* 3つを一組として読ませる：各項目の頭に細い罫を置く */
.hero-meta div{ min-width:0; padding-top:0.9rem; border-top:2px solid rgba(43,29,20,.34); }

.hero-meta b{
  display:flex; align-items:baseline; gap:0.1em;
  font-family:var(--f-num); font-weight:600;
  font-size:clamp(2.3rem,1.75rem + 2vw,3.3rem); line-height:1;
  color:var(--ink); letter-spacing:-0.025em;
  margin-bottom:0.62rem;
}

/* 単位は数字と同じ重さ・同じ色で、サイズだけ落とす（別物に見せない） */
.hero-meta b em{
  font-style:normal; font-size:0.38em; font-weight:600;
  letter-spacing:0.005em; color:var(--ink); translate:0 -0.04em;
}

.hero-meta small{
  display:block; font-size:0.83rem; font-weight:500; line-height:1.75;
  color:rgba(43,29,20,.9); letter-spacing:0.03em;
}

/* PC：ファーストビューで数値ブロックが切れないようにする。
   幅で決まる clamp は 1366px 以上で全て上限に張り付くため、ヘッダー下端から
   数値ブロック下端までが幅によらず 943px で固定だった（実測：ウィンドウ高
   900px で 43px、860px で 83px、800px で 143px はみ出す）。
   見出し216 ＋ 本文110 ＋ ボタン58 ＋ 数値102 ＋ ラベル41 ＋ ヘッダー75 の
   計602px は動かせないので、余白側だけをウィンドウ高に追従させる。
   モバイルは対象外（URLバーの伸縮で vh が揺れるため）。 */
@media (min-width:1040px){
  .hero{ padding-block:clamp(3.5rem,7.8vh,6rem) clamp(3rem,7vh,6rem); }
  .hero-kicker{ margin-bottom:clamp(1.2rem,3.2vh,2.4rem); }
  .hero h1{ margin-bottom:clamp(1.2rem,3vh,1.8rem); }
  .hero .lead{ margin-bottom:clamp(1.6rem,4.2vh,2.8rem); }
  .hero-meta{ margin-top:clamp(2rem,7.4vh,4.5rem); }
}

/* ============================================================
   マーキー（職種）
   ============================================================ */
.marquee{
  /* モバイルの見え方は現状維持。幅が広いほど帯を厚く、文字と間隔を大きくする
     （固定値のままだとPCで帯だけ細く、文字だけ小さく見えていた）。 */
  --mq-gap: clamp(3.5rem,2.2rem + 3.4vw,6rem);
  /* 帯が広がると1周の距離も伸びる。流れる速さ（約57px/秒）を保つため、
     幅に合わせて所要時間も伸ばす。実測した帯の全長 ÷ 57 が根拠。 */
  --mq-dur: 50s;
  border-block:1px solid var(--rule);
  background:var(--cream);
  overflow:hidden; display:flex;
  padding-block:clamp(1.15rem,0.55rem + 1.6vw,2.2rem);
}

/* 継ぎ目の間隔も項目間と同じにする（従来は半分の1.75remで、1周に1回だけ
   詰まって見えていた）。 */
.marquee ul{
  display:flex; gap:var(--mq-gap); margin:0; padding:0 var(--mq-gap) 0 0; list-style:none;
  flex:0 0 auto; align-items:center;
}

@media (min-width:768px){  .marquee{ --mq-dur:56s; } }

/* 全長 約3,100px */
@media (min-width:1000px){ .marquee{ --mq-dur:62s; } }

/* 全長 約3,436px */
@media (min-width:1280px){ .marquee{ --mq-dur:69s; } }

/* 全長 約3,851px */
@media (min-width:1600px){ .marquee{ --mq-dur:75s; } }

/* 全長 約4,234px */
@media (prefers-reduced-motion:no-preference){
  .marquee ul{ animation:slide var(--mq-dur) linear infinite; }
}

.marquee:hover ul{ animation-play-state:paused; }

@keyframes slide{ to{ transform:translateX(-100%); } }

.marquee li{
  font-family:var(--f-num); font-weight:400;
  font-size:clamp(0.94rem,0.72rem + 0.6vw,1.25rem);
  letter-spacing:0.22em; color:rgba(43,29,20,.5); white-space:nowrap;
  display:flex; align-items:center; gap:var(--mq-gap);
}

.marquee li::after{
  content:""; border-radius:50%; background:var(--gold); opacity:.6; flex:0 0 auto;
  width:clamp(4px,1.5px + 0.28vw,6px); height:clamp(4px,1.5px + 0.28vw,6px);
}

/* ============================================================
   課題
   ============================================================ */
.p-list{ display:grid; gap:0; }

.p-item{
  display:grid; gap:0.4rem 1.6rem; padding-block:clamp(1.6rem,4vw,2.2rem);
  border-top:1px solid var(--rule); position:relative;
  transition:background-color .3s ease;
}

/* 3カラムに切り替える幅。820px だと本文の列が狭すぎて、固定したはずの
   2行が全部折り返して4行になる（実測：860px で8行中7行が折り返した）。
   本文が1行で収まる 1000px まで、1カラムのまま引っ張る。 */
@media (min-width:1000px){
  /* 右の説明文は2行、左の番号と見出しは1行。start 揃えだと左が上に張り付いて
     高さがずれるので、行の中央で揃える（＝説明文の1行目と2行目の中間に来る）。 */
  .p-item{ grid-template-columns:clamp(4.2rem,5.2vw,5rem) minmax(0,24rem) minmax(0,1fr); align-items:center; }
}

.p-item:last-child{ border-bottom:1px solid var(--rule); }

.p-item:hover{ background:var(--panel); }

/* 番号は「飾り」ではなく通し番号として読ませたいので、太く・大きく・傾ける。
   Outfit 200 → Poppins 700。斜体を持たない書体なので skewX で傾ける。
   色は赤→橙のグラデーション（金まで伸ばすと白地で薄くなるため手前で止める）。 */
/* 番号とカテゴリ。横並び（01｜集客）にすると、列幅が「応募者対応」「入社・定着」
   といった一番長いラベルに引きずられて広がり、カードごとに見出しの開始位置が
   ずれる。縦に積めば列幅は一定になり、番号も大きいまま置ける。 */
/* PC：番号とカテゴリを縦に積み、互いに中央で揃える。
   列幅は固定なので、4枚とも「01」の位置が完全に一致する。 */
.p-tag{ margin:0; display:flex; flex-direction:column; align-items:center; gap:0.3rem; min-width:0; }

.p-tag .cat{
  font-size:0.7rem; font-weight:700; letter-spacing:0.08em; line-height:1.4;
  color:var(--fg-muted); white-space:nowrap;
}

@media (max-width:999px){
  /* 1カラムのときは 01｜集客 と横に並べる。
     baseline 揃えだとカテゴリが数字の足元に沈むため、上下中央で揃える。
     区切り線も文字だけの高さにならないよう、上下に少し伸ばす。 */
  .p-tag{ flex-direction:row; align-items:center; gap:0.6rem; margin-bottom:0.15rem; }
  .p-tag .cat{
    padding-left:0.6rem; padding-block:0.35rem;
    border-left:1px solid var(--rule-2);
  }
}

.p-item .n{
  font-family:"Poppins",var(--f-num); font-weight:700;
  font-size:clamp(2rem,1.55rem + 1.5vw,3.1rem);
  line-height:.9; letter-spacing:-0.02em;
  background:linear-gradient(100deg,var(--brand-a) 0%,#E8560C 55%,var(--brand-b) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; transform:skewX(-11deg); transform-origin:50% 60%;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}

.p-item h3{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.1rem,1rem + 0.7vw,1.45rem); line-height:1.6;
  margin:0; letter-spacing:-0.005em; color:var(--fg);
}

.p-item p{ margin:0; color:var(--fg-muted); font-size:0.93rem; }

.p-answer{
  margin-top:clamp(2.8rem,7vw,4.5rem); text-align:center;
  padding:clamp(2.2rem,6vw,4rem) clamp(1.2rem,4vw,3rem);
  border:1px solid rgba(199,33,14,.26); border-radius:4px;
  background:linear-gradient(160deg,rgba(240,112,12,.13),rgba(245,180,23,.05) 70%);
}

.p-answer p.big{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.3rem,1rem + 1.9vw,2.3rem); line-height:1.55;
  margin:0 0 1rem; letter-spacing:-0.01em;
}

/* 一番長い行が全角45文字あるので、44em では入りきらない。48em に広げる。 */
.p-answer p.sub{ margin:0 auto; max-width:48em; color:var(--fg-muted); font-size:0.95rem; }

.p-answer p.sub + p.sub{ margin-top:1.15rem; }

/* ============================================================
   実績（数字）
   応募獲得 → 選考プロセス改善 → 採用成果 の3カテゴリ。
   情報の優先順位は 1.数字 2.指標名 3.職種・条件の注記 4.補足説明。
   カテゴリ番号は課題セクションの表現（Poppins700 + skewX + 赤→橙）を
   踏襲し、ページ全体で番号の見え方を揃える。
   ============================================================ */
.ach{ display:grid; gap:clamp(2.8rem,6.5vw,4.4rem); }

/* --- カテゴリ見出し（01｜応募獲得） --- */
.ach-head{
  margin:0 0 clamp(1.5rem,3.5vw,2.1rem);
  padding-bottom:0.75rem; border-bottom:1px solid var(--rule-2);
  display:flex; align-items:center; gap:0.8rem;
}

.ach-head .n{
  font-family:"Poppins",var(--f-num); font-weight:700;
  font-size:clamp(1.55rem,1.3rem + 0.9vw,2.1rem);
  line-height:.9; letter-spacing:-0.02em;
  background:linear-gradient(100deg,var(--brand-a) 0%,#E8560C 55%,var(--brand-b) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; transform:skewX(-11deg); transform-origin:50% 60%;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}

.ach-head .cat{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.02rem,0.95rem + 0.35vw,1.25rem);
  letter-spacing:0.03em; line-height:1.4; color:var(--fg);
  padding-left:0.8rem; padding-block:0.2rem;
  border-left:1px solid var(--rule-2);
}

/* --- 数字カード --- */
.ach-row{ display:grid; gap:clamp(1.9rem,4vw,2.4rem); }

/* 3カラムに切り替える幅。768px で3カラムにすると1列あたり約200pxしかなく、
   「ほぼ0→」と数字が同じ行に収まらない。実測で確認した 860px を境にする。 */
@media (min-width:860px){
  .ach-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* 指標名・数字・注記・補足を3枚横並びで行ごとに揃える。
     subgrid 非対応ブラウザでは各カードが独立して積まれるだけで崩れない。 */
  @supports (grid-template-rows:subgrid){
    .ach-row{ grid-template-rows:auto auto auto auto; align-items:start; }
    .ach-item{ display:grid; grid-template-rows:subgrid; grid-row:span 4; }
  }
}

.ach-item{ min-width:0; padding-top:1.25rem; border-top:1px solid var(--rule); position:relative; }

.ach-item::after{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .ach-item::after{ animation:ruleIn both ease-out; animation-timeline:view(); animation-range:entry 12% cover 34%; }
    @keyframes ruleIn{ from{ width:0; } to{ width:100%; } }
  }
}

@supports not (animation-timeline: view()){ .ach-item::after{ width:100%; } }

/* 2. 数字 — 主役。単位は数字と同じ重さ・同じ色でサイズだけ落とす
   （ヒーローの数字ブロックと同じ扱い。別物に見せない） */
.ach .v{
  font-family:var(--f-num); font-weight:600; color:var(--ink);
  line-height:1; letter-spacing:-0.03em;
  display:flex; align-items:baseline; gap:0.08em; flex-wrap:wrap; margin:0;
}

.ach .v .u{
  font-size:0.3em; font-weight:600; color:var(--ink);
  letter-spacing:0.01em; translate:0 -0.04em;
}

/* 改善前の値。矢印は疑似要素で付けるので、本文には矢印を書かない */
.ach .v .from{
  font-family:var(--f-num); font-size:0.3em; font-weight:500;
  color:var(--fg-muted); letter-spacing:0.01em; align-self:center;
  white-space:nowrap; display:inline-flex; align-items:center; gap:0.4em;
}

.ach .v .from::after{ content:"→"; color:var(--gold-lt); font-weight:700; }

.ach-item .v{ font-size:clamp(2.7rem,1.6rem + 3.6vw,4.1rem); }

/* 1. 指標名 */
.ach .k{
  margin:0 0 0.75rem; font-size:0.86rem; font-weight:700;
  color:var(--fg); letter-spacing:0.04em; line-height:1.7;
}

/* 3. 職種・条件の注記（空のカードでも行位置を揃えるため要素は必ず置く） */
.ach-item .m{
  margin:0.9rem 0 0; font-size:0.78rem; font-weight:500;
  color:var(--fg); line-height:1.75;
}

.ach-item .m i{ display:block; font-style:normal; font-weight:400; color:var(--fg-muted); }

/* 4. 補足説明 */
.ach-item .note{ margin:0.55rem 0 0; font-size:0.78rem; color:var(--fg-muted); line-height:1.8; }

/* --- 03 採用成果：セクションの着地点なので一段強く --- */
.ach-fin{
  padding:clamp(1.8rem,5vw,2.8rem) clamp(1.3rem,4vw,3rem);
  border:1px solid rgba(199,33,14,.26); border-radius:4px;
  background:linear-gradient(160deg,rgba(240,112,12,.13),rgba(245,180,23,.05) 70%);
}

.ach-fin .k{ font-size:0.9rem; margin-bottom:0.85rem; }

.ach-fin .v{ font-size:clamp(3rem,1.7rem + 4.6vw,5.2rem); line-height:1.05; gap:0.12em; }

/* 「最高13名」が平常値と誤読されないよう、バッジと数字は必ず同じ行に置く */
.ach-fin .peak-wrap{ display:inline-flex; align-items:baseline; gap:0.16em; white-space:nowrap; }

.ach-fin .peak{
  font-family:var(--f-body); font-size:0.72rem; font-weight:700;
  letter-spacing:0.06em; line-height:1; color:#fff; background:var(--brand);
  border-radius:999px; padding:0.45em 0.8em; align-self:center;
  flex:0 0 auto; translate:0 -0.12em;
}

.ach-fin .note{ margin:1.1rem 0 0; font-size:0.84rem; color:var(--fg-muted); line-height:1.9; max-width:46em; }

/* --- 注記 --- */
.ach-fn{ margin:clamp(1.8rem,4vw,2.4rem) 0 0; padding:0; list-style:none; }

.ach-fn li{
  font-size:0.78rem; color:var(--fg-muted); line-height:1.85;
  padding-left:1.15em; text-indent:-1.15em;
}

.ach-fn li::before{ content:"※ "; }

/* ============================================================
   支援範囲
   ============================================================ */
.cov{ border:1px solid var(--rule); background:var(--white); }

.sec-light .cov{ background:#fff; }

.cov-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,clamp(64px,16vw,130px)));
  border-bottom:1px solid var(--rule);
}

.cov-row:last-child{ border-bottom:0; }

/* 見出し行はスクロール中も列名を残すために固定する。ただし top はサイトヘッダーの
   振る舞いに合わせる。ヘッダーが追従するのは 1040px 以上だけなので、それ未満で
   top:74px にすると、見出し行の上に74px分の本文が流れて帯が宙に浮く。 */
.cov-head{ background:var(--cream-2); position:sticky; top:0; z-index:5; border-bottom:1px solid var(--rule-2); }

@media (min-width:1040px){ .cov-head{ top:74px; } }

.cov-head > div{
  padding:0.9rem 0.25rem; font-size:clamp(0.66rem,0.6rem + 0.3vw,0.8rem);
  font-weight:700; line-height:1.45; text-align:center; color:var(--fg-muted);
  display:flex; align-items:center; justify-content:center; min-width:0;
}

.cov-head > div:first-child{
  text-align:left; justify-content:flex-start; color:var(--fg);
  padding-left:clamp(0.9rem,3vw,1.6rem);
  font-family:var(--f-num); font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
}

.cov-head .mine{ color:var(--gold-dk); font-weight:700; }

.cov-step{
  padding:clamp(0.95rem,2.6vw,1.35rem) clamp(0.9rem,3vw,1.6rem);
  min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px;
}

.cov-step em{
  font-family:var(--f-num); font-weight:600; font-style:normal; font-size:0.72rem;
  letter-spacing:0.18em; color:var(--gold-dk); line-height:1;
}

.cov-step b{ font-weight:700; font-size:clamp(0.88rem,0.82rem + 0.35vw,1.04rem); line-height:1.5; }

.cov-step span{ font-size:0.74rem; color:var(--fg-muted); line-height:1.6; }

.cell{ display:flex; justify-content:center; padding:0 0.35rem; min-width:0; }

.cell i{ display:block; width:clamp(13px,3.6vw,20px); height:100%; }

.cell.on i{ background:rgba(43,29,20,.17); transform-origin:top; }

.cell.on.mine i{ background:var(--grad-v); }

/* 8工程を1本のグラデーションとして通す（セルごとの繰り返しを避ける） */
.cov-row:nth-of-type(2) .cell.on.mine i{ background:#D92B12; }

.cov-row:nth-of-type(3) .cell.on.mine i{ background:#E04110; }

.cov-row:nth-of-type(4) .cell.on.mine i{ background:#E8570E; }

.cov-row:nth-of-type(5) .cell.on.mine i{ background:#EF6D0C; }

.cov-row:nth-of-type(6) .cell.on.mine i{ background:#F17F0E; }

.cov-row:nth-of-type(7) .cell.on.mine i{ background:#F29111; }

.cov-row:nth-of-type(8) .cell.on.mine i{ background:#F4A214; }

.cov-row:nth-of-type(9) .cell.on.mine i{ background:#FBC229; }

.cell.on.start i{ border-radius:999px 999px 0 0; }

.cell.on.end i{ border-radius:0 0 999px 999px; }

.cell.off i{ width:1px; background:repeating-linear-gradient(180deg,var(--rule) 0 3px,transparent 3px 9px); }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .cell.on i{ animation:growY both cubic-bezier(.3,.8,.3,1); animation-timeline:view(); animation-range:entry 8% cover 40%; }
    @keyframes growY{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  }
}

.cov-caption{ margin-top:1.2rem; font-size:0.78rem; color:var(--fg-muted); line-height:1.8; }

/* ============================================================
   サービス
   ============================================================ */
/* 見出しブロックとカード帯のアキ。共通値のままだと下が 64px しかなく、
   全幅の境界線が説明文に張り付いて、セクション上下の余白（--sec-y＝1440pxで
   144px）と釣り合わなかった。--sec-y の約2/3まで広げて均衡させる。 */
#service .sec-note{ margin-bottom:clamp(3rem,6.5vw,6rem); }

.svc-grid{ display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule); }

/* 3カラムの境界。説明文（全角60文字前後）を3行に収めるには1列あたり
   本文幅300px強が要る。1000pxだと248pxしかなく4行になり窮屈なので、
   3行で収まる 1150px までは1カラムのまま引っ張る。 */
@media (min-width:1150px){
  .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* 番号・サービス名・説明文・支援内容の開始位置を3枚で揃える。
     subgrid 非対応ブラウザでは各カードが独立して積まれるだけで崩れない。 */
  @supports (grid-template-rows:subgrid){
    .svc-grid{ grid-template-rows:auto auto auto auto; }
    .svc{ grid-template-rows:subgrid; grid-row:span 4; }
  }
}

.svc{
  background:var(--white);
  /* 上の余白は詰めぎみに。左右と下は従来どおり */
  padding:clamp(1.4rem,2.8vw,2rem) clamp(1.5rem,3vw,2.4rem) clamp(1.9rem,4vw,2.8rem);
  display:grid; align-content:start; row-gap:1rem; min-width:0; position:relative;
  transition:background-color .35s ease;
}

.svc::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
  transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.3,1);
}

.svc:hover{ background:#FFFBF6; }

.svc:hover::before{ transform:scaleX(1); }

/* 番号は識別子。細く小さく置いて、いちばん強いのはサービス名にする */
.svc .no{ font-family:var(--f-num); font-weight:200; font-size:2rem; line-height:1; color:var(--gold-dk); opacity:.55; }

.svc h3{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.15rem,1.05rem + 0.65vw,1.45rem); line-height:1.55; margin:0; letter-spacing:-0.01em;
}

/* 説明文は .phrase を付けない。文節を nowrap で固めると、列が狭いときに
   行末が余って行数が増える（1280pxで3行→5行になった）。日本語の本文は
   ブラウザ任せの折り返しで自然に収まる。 */
.svc .desc{ margin:0; font-size:0.9rem; color:var(--fg-muted); line-height:1.95; }

.svc p{ margin:0; font-size:0.92rem; color:var(--fg-muted); }

/* 支援内容は補助情報。細い罫で本文と切り分けるだけで、囲みや地色は足さない */
.svc-do{ padding-top:1.15rem; border-top:1px solid var(--rule); }

.svc-do .lab{
  margin:0 0 0.75rem; font-family:var(--f-num); font-weight:600;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--fg-muted);
}

.svc ul{ margin:0; padding:0; list-style:none; display:grid; gap:0.55rem; }

.svc li{ font-size:0.84rem; color:rgba(43,29,20,.74); padding-left:1.25rem; position:relative; line-height:1.75; }

.svc li::before{
  content:""; position:absolute; left:0; width:8px; height:1px; background:var(--gold-dk);
  /* 行の中央に合わせる。line-height:1.75 の半分が 0.875em、そこから罫の太さ
     1px の半分を引いた位置が中心。0.66em だと中央より 2.4px 上にあり、
     文字と高さが揃って見えなかった。 */
  top:calc(0.875em - 0.5px);
}

.svc .more{
  margin-top:auto; padding-top:0.8rem; font-family:var(--f-num); font-weight:600;
  font-size:0.84rem; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--fg); display:inline-flex; align-items:center; gap:0.6rem;
  align-self:flex-start;
}

.svc .more span{ transition:transform .3s cubic-bezier(.2,.7,.3,1); display:inline-block; }

.svc .more:hover{ color:var(--gold-dk); }

.svc .more:hover span{ transform:translateX(6px); }

.case{
  border:1px solid rgba(43,29,20,.1); background:var(--white); box-shadow:0 1px 2px rgba(43,29,20,.04);
  padding:clamp(1.9rem,4vw,2.8rem); display:flex; flex-direction:column; gap:1.3rem; min-width:0;
  transition:border-color .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}

.case:hover{ border-color:rgba(199,33,14,.4); transform:translateY(-4px); box-shadow:0 14px 34px rgba(160,70,10,.16); }

.case .tag{
  font-family:var(--f-num); font-weight:600; font-size:0.72rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
}

.case h3{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.2rem,1.05rem + 0.9vw,1.6rem); line-height:1.55; margin:0; letter-spacing:-0.015em;
}

.case .meta{ font-size:0.8rem; color:var(--fg-muted); margin:-0.7rem 0 0; }

.case dl{ margin:0; display:grid; gap:0.1rem; border-top:1px solid var(--rule); }

.case .kpi{
  display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap; min-width:0;
  padding-block:0.85rem; border-bottom:1px solid var(--rule);
}

.case .kpi:last-child{ border-bottom:0; }

.case .kpi dt{ font-size:0.8rem; color:var(--fg-muted); flex:1 1 9em; min-width:0; line-height:1.6; }

.case .kpi dd{
  margin:0; font-family:var(--f-num); font-weight:200;
  font-size:clamp(1.35rem,1.15rem + 1vw,1.85rem); line-height:1.15; letter-spacing:-0.02em;
  color:var(--gold-lt);
}

.case .kpi dd em{ font-style:normal; font-size:0.55em; color:var(--fg-muted); font-weight:400; }

/* 「最高13名」が平常値と誤読されないよう、バッジと数字は必ず同じ行に置く（実績セクションと同じ） */
.case .peak-wrap{ display:inline-flex; align-items:baseline; gap:0.3em; white-space:nowrap; }

.case .peak{
  font-family:var(--f-body); font-size:0.58rem; font-weight:700;
  letter-spacing:0.06em; line-height:1; color:#fff; background:var(--brand);
  border-radius:999px; padding:0.42em 0.72em; align-self:center;
  flex:0 0 auto; translate:0 -0.06em;
}

.case .more{
  margin-top:auto; font-family:var(--f-num); font-weight:600; font-size:0.82rem;
  letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
  display:inline-flex; gap:0.6rem; align-self:flex-start; color:var(--fg);
}

.case .more span{ display:inline-block; transition:transform .3s cubic-bezier(.2,.7,.3,1); }

.case .more:hover{ color:var(--gold); }

.case .more:hover span{ transform:translateX(6px); }

/* ============================================================
   料金
   ============================================================ */
.price-grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); grid-template-columns:minmax(0,1fr); }

@media (min-width:880px){ .price-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.price-item{
  background:var(--white); padding:clamp(1.9rem,4vw,2.8rem);
  display:flex; flex-direction:column; row-gap:1rem; min-width:0;
  transition:background-color .3s ease;
}

.price-item:hover{ background:#FFFBF6; }

/* 番号はサービスセクションと同じ扱い（識別子）。いちばん強いのはサービス名。
   3列それぞれが独立した列なので、01｜ を横に置いても見出しの開始位置はずれない。 */
.price-item h3{
  font-family:var(--f-disp); font-weight:700; font-size:1.1rem; margin:0; line-height:1.6;
  display:flex; align-items:center; gap:0.55rem; min-width:0;
}

.price-item h3 .no{
  font-family:var(--f-num); font-weight:200; font-size:1.5em; line-height:1;
  color:var(--gold-dk); opacity:.55; flex:0 0 auto;
}

.price-item h3 .nm{ padding-left:0.55rem; border-left:1px solid var(--rule-2); min-width:0; }

.price-item .amount{
  font-family:var(--f-num); font-weight:200; color:var(--fg);
  font-size:clamp(2.2rem,1.7rem + 2.2vw,3.1rem); line-height:1.05; letter-spacing:-0.03em;
  display:flex; align-items:baseline; gap:0.12em; flex-wrap:wrap; margin:0;
}

.price-item .amount .u{ font-size:0.3em; font-weight:400; letter-spacing:0.04em; color:var(--gold-dk); }

.price-item .amount.q{ font-size:clamp(1.3rem,1.15rem + 0.8vw,1.6rem); color:var(--fg-muted); font-weight:400; }

/* 税別の表記は金額の直後に置く。単位（.u）より一段弱くして、
   金額そのものの読みを邪魔しない。 */
.price-item .amount .tax{
  font-family:var(--f-body); font-size:0.24em; font-weight:400;
  letter-spacing:0.02em; color:var(--fg-muted); white-space:nowrap;
}

.price-item p{ margin:0; font-size:0.87rem; color:var(--fg-muted); line-height:1.85; }

/* 補足の行。中身を持つカードだけ罫で区切る（空なら罫も出さない）。 */
/* 罫の位置を3枚で揃えたいので上揃え。end にすると下端は揃うが、
   中身の行数が違うぶん罫の高さがカードごとにずれる。 */
.price-item .p-tail{ align-self:start; }

.price-item .p-tail:not(:empty){ padding-top:0.9rem; border-top:1px solid var(--rule); }

.price-item .p-tail b{
  display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.08em;
  color:var(--fg-muted); margin-bottom:0.3rem;
}

.price-item .p-tail .v{ font-family:var(--f-num); font-size:1.05rem; color:var(--fg); letter-spacing:-0.01em; }

/* サービス名・金額・説明文・補足の開始位置を3枚で揃える。カード内の情報量が揃って
   いない（見出しの行数、説明文の長さが3枚で違う）ため、subgrid で親の行を共有する。
   ※ この指定は .price-item の基本ルール（display:flex）より必ず後ろに置く。
     同じ詳細度なので、前に置くと flex に上書きされて subgrid が無効になる。
   非対応ブラウザでは各カードが独立して積まれるだけで崩れない。 */
@media (min-width:880px){
  @supports (grid-template-rows:subgrid){
    .price-grid{ grid-template-rows:auto auto 1fr auto; }
    .price-item{ display:grid; grid-template-rows:subgrid; grid-row:span 4; }
    /* 金額の行は3枚で文字サイズが違う（01は数字、02・03は「個別お見積り」）。
       行の高さは subgrid で同じでも、既定の stretch だと小さい方が行の上に張り付いて
       座りがずれる。ベースラインで揃えると3枚の文字が同じ線に乗る。 */
    .price-item .amount{ align-self:baseline; }
  }
}

.price-fn{ margin:clamp(1.4rem,3vw,1.9rem) 0 0; padding:0; list-style:none; }

.price-fn li{
  font-size:0.8rem; color:var(--fg-muted); line-height:1.9;
  padding-left:1.15em; text-indent:-1.15em;
}

.price-fn li::before{ content:"※ "; }

のように
   要素名を混ぜると詳細度が上がって（0,1,1 > 0,1,0）margin-top が消えるので、
   打ち消しも子セレクタで揃える。 */
.stance-body > *{ margin:0; }

.msg-sign .role{ font-size:0.78rem; color:var(--fg-muted); letter-spacing:0.08em; }

.msg-sign .name{ font-family:var(--f-disp); font-weight:900; font-size:1.35rem; letter-spacing:0.02em; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ border-top:1px solid var(--rule); }

.faq-list details{ border-bottom:1px solid var(--rule); }

.faq-list summary{
  cursor:pointer; list-style:none; padding:clamp(1.2rem,3vw,1.6rem) 3.2rem clamp(1.2rem,3vw,1.6rem) 0;
  position:relative; font-weight:700; font-size:clamp(0.95rem,0.9rem + 0.35vw,1.08rem); line-height:1.7;
  transition:color .2s ease;
}

.faq-list summary:hover{ color:var(--gold-dk); }

.faq-list summary::-webkit-details-marker{ display:none; }

.faq-list summary::before,.faq-list summary::after{
  content:""; position:absolute; right:0.6rem; top:50%; background:var(--gold-dk);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}

.faq-list summary::before{ width:14px; height:1.5px; margin-top:-0.75px; }

.faq-list summary::after{ width:1.5px; height:14px; margin-top:-7px; right:calc(0.6rem + 6.25px); }

.faq-list details[open] summary::after{ transform:rotate(90deg); opacity:0; }

.faq-list .a{ padding:0 0 clamp(1.3rem,3vw,1.7rem); margin:0; color:var(--fg-muted); font-size:0.92rem; line-height:1.9; }

/* ============================================================
   最終CTA
   ============================================================ */
/* CTAは赤を外し橙〜金に。濃茶の文字がどの位置でも4.5:1以上になる範囲に収める */
.cta{ position:relative; overflow:hidden; text-align:center;
      background:linear-gradient(115deg,#E8560C 0%,#F0700C 38%,#FDCE2E 86%,#FBC229 100%); }

.cta .aurora{ display:none; }

.cta .btn-gold::before{ background:var(--ink); }

.cta .btn-gold{ color:#FFF7EF; }

.cta .btn-line{ border-color:rgba(43,29,20,.42); color:var(--ink); }

.cta .btn-line:hover{ background:var(--ink); color:#FFF7EF; border-color:var(--ink); }

.cta .wrap{ position:relative; z-index:1; }

.cta h2{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.7rem,1.15rem + 3.2vw,3.2rem); line-height:1.45; letter-spacing:-0.02em; margin:0 0 1.4rem;
}

.cta p{ max-width:42em; margin:0 auto 2.8rem; color:rgba(43,29,20,.9); font-size:0.97rem; }

.cta-actions{ display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center; }

.cta-actions .btn{ flex:1 1 260px; max-width:340px; }

.cta-sub{ margin-top:2.4rem; font-size:0.82rem; color:rgba(43,29,20,.62); letter-spacing:0.05em; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{ background:var(--ink); color:rgba(247,244,238,.64); padding-block:clamp(2.8rem,6vw,4.5rem) 7.5rem; font-size:0.85rem; border-top:1px solid rgba(255,255,255,.07); }

@media (min-width:920px){ .site-footer{ padding-bottom:clamp(2.8rem,6vw,4.5rem); } }

.f-top{ display:grid; gap:2.4rem; }

@media (min-width:780px){ .f-top{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); } }

/* フッターのロゴはヘッダーと同じ横並びロックアップ。
   シンボル高さ・字間・文字サイズはヘッダーの値をそのまま使う。 */
.f-lockup{ display:flex; align-items:center; gap:clamp(0.46rem,0.4rem + 0.28vw,0.6rem); min-width:0; }

.f-name{ display:flex; flex-direction:column; gap:3px; min-width:0; }

.f-logo b{
  font-family:"Poppins",var(--f-num); font-weight:700; font-size:clamp(1.3rem,1.15rem + 0.8vw,1.7rem);
  letter-spacing:-0.005em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.f-logo .mark{ height:clamp(1.33rem,1.17rem + 0.82vw,1.74rem); }

.f-logo small{ font-size:0.62rem; letter-spacing:0.22em; color:rgba(246,244,239,.45); line-height:1; }

.f-logo address{ font-style:normal; margin-top:1.2rem; line-height:1.95; font-size:0.83rem; }

.f-nav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,135px),1fr)); gap:0.8rem 1.5rem; }

.f-nav a{ text-decoration:none; line-height:2.1; transition:color .2s ease; }

.f-nav a:hover{ color:var(--brand-c); }

.f-bottom{
  margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:0.76rem; color:rgba(246,244,239,.4); letter-spacing:0.06em;
}

/* ============================================================
   モバイル固定CTA
   ============================================================ */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; gap:1px;
  background:var(--rule); border-top:1px solid rgba(43,29,20,.14);
  backdrop-filter:blur(14px);
}

.mobile-cta a{
  flex:1 1 0; min-width:0; min-height:60px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:700; font-size:0.91rem; letter-spacing:0.04em;
}

.mobile-cta .a1{ background:rgba(255,252,247,.95); color:var(--fg); }

.mobile-cta .a2{ background:var(--grad); color:#140F0C; }

@media (min-width:920px){ .mobile-cta{ display:none; } }

/* ============================================================
   スクロール演出（全体）
   ============================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{ animation:rise both cubic-bezier(.16,.9,.28,1); animation-timeline:view(); animation-range:entry 4% cover 24%; }
    @keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
  }
}

/* ============================================================
   NOTE — このファイルのCSSは top-mock-v4.html からの複製です。
   プレビュー環境がローカルの外部CSS（<link href="style.css">）を
   読み込めないことを実測で確認したため、モック段階では自己完結型に
   しています。ビルド（Astro等）へ移行した時点で共通CSSに一本化します。
   TOPのCSSを直した場合は、この先頭ブロックも同じ内容に更新すること。
   ============================================================ */
/* ============================================================
   CoreLine — トップページ デザインモック v2
   ヒーローと最終CTAをロゴのグラデーションで挟み、間は白と淡橙を交互に置く
   ============================================================ */

:root{
  color-scheme: light;

  /* --- 基調色 --- */
  --bg:        #FFF7EF;   /* 淡いオレンジ — ページの主調 */
  --cream:     #FDF1E5;   /* 一段濃い淡橙（面の切り替え用） */
  --cream-2:   #FBE8D6;
  --white:     #FFFFFF;
  --ink:       #2B1D14;   /* 暖色寄りの濃茶 — 文字と沈めの面 */

  /* 明るい地の上で読めるアクセント（金は地と同化するため文字には使わない） */
  --gold:      #C7210E;   /* 小さい文字用の赤 — 5.4:1 */
  --gold-lt:   #C1470A;   /* 数字用の橙赤 — 5.0:1 */
  --gold-dk:   #BE2410;   /* 明転上の赤 — 5.7:1 */

  /* --- セクション内で切り替わる論理色 --- */
  --fg:        #2B1D14;
  --fg-muted:  #7A6A5D;
  --rule:      rgba(43,29,20,.13);
  --rule-2:    rgba(43,29,20,.24);
  --panel:     rgba(43,29,20,.03);

  /* ロゴ原本（ロゴ.jpg / オンライン背景.png）から実測した値。
     ワードマークは左端の赤から右端の金へ、80%付近が最も明るい。 */
  --brand-a:   #D92B12;   /* ロゴ左端：赤   実測 #DB3114 */
  --brand-b:   #F0700C;   /* ロゴ中央：橙   実測 #F16E10 (52%) */
  --brand-c:   #FBC229;   /* ロゴ右端：金   実測 #FBC029 */
  --brand-pk:  #FDCE2E;   /* 80%付近のピーク 実測 #FECE2E */
  --brand:     #C7210E;   /* 面用の単色（赤寄り） */
  --grad:      linear-gradient(100deg,var(--brand-a) 0%,#E8560C 16%,var(--brand-b) 42%,var(--brand-pk) 82%,var(--brand-c) 100%);
  --grad-v:    linear-gradient(180deg,var(--brand-a) 0%,var(--brand-b) 45%,var(--brand-c) 100%);

  /* シンボル単体の色域。ワードマークより赤が深い（実測 #DF0D0D → #EE3707）。
     ロックアップ全体で見ると、シンボルはグラデーションの左端18%を担当する。 */
  --mark-a:    #DC0F0C;
  --mark-b:    #EE3A07;

  /* --- タイポ --- */
  --f-disp: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --f-body: "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --f-num:  "Outfit","Zen Kaku Gothic New",sans-serif;

  /* --- レイアウト --- */
  --wrap: 1200px;
  --gutter: clamp(1rem,5vw,3rem);
  --sec-y: clamp(4.5rem,11vw,9rem);
}

/* 明転セクション：論理色を差し替えるだけで中身は共通 */
/* ------------------------------------------------------------------
   面の順番（隣り合う面は必ず違う色にする）
   ヒーロー   : 濃橙グラデーション
   マーキー   : 淡橙のクリーム帯
   課題       : 白
   実績       : 淡オレンジ（body）
   支援範囲   : 白
   サービス   : 淡オレンジ
   導入事例   : 一段濃い淡橙のグラデーション
   料金       : 白
   スタンス   : 淡オレンジ
   代表        : 白
   流れ       : 淡オレンジ
   会社概要   : 白
   ※ FAQは faq-mock.html へ移設（2026-09-17）。抜けたぶん会社概要を白に振り直した
   最終CTA    : 濃橙グラデーション（ヒーローと呼応）
   フッター   : 濃茶
   ------------------------------------------------------------------ */
.sec-light{ background:var(--white); }

/* サービス = 淡オレンジ */
#price{ background:var(--white); }

/* 料金 = 白 */
#case{ background:linear-gradient(170deg,#FDEBD8 0%,#FAD9B8 100%); }

/* ============================================================
   共通パーツ
   ============================================================ */
.eyebrow{
  font-family:var(--f-num); font-weight:600;
  font-size:0.76rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.4rem;
  display:flex; align-items:center; gap:1rem;
}

/* ============================================================
   事例
   ============================================================ */
.case-grid{ display:grid; gap:clamp(1.2rem,3vw,2rem); grid-template-columns:minmax(0,1fr); }

@media (min-width:880px){ .case-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   スタンス
   図も箱も置かず、原稿をそのまま読ませるセクション。
   1行が長すぎると読めないので、本文の幅は .sec-note と同じ 46em で止める。
   ============================================================ */
/* 見出しと本文の間は、段落どうしの間より広く取る。見出しの margin-bottom
   （1.4rem）と相殺されるので、段落間より大きい値をここで指定する。 */
.stance-body{ max-width:46em; margin-top:clamp(1.8rem,4vw,2.6rem); }

/* 段落間は隣接セレクタだけで作る。ここで .stance-body p{margin:0} のように
   要素名を混ぜると詳細度が上がって（0,1,1 > 0,1,0）margin-top が消えるので、
   打ち消しも子セレクタで揃える。 */
.stance-body > *{ margin:0; }

.stance-body > * + *{ margin-top:clamp(1.6rem,3.4vw,2.1rem); }

/* ============================================================
   代表メッセージ
   ============================================================ */
.msg-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:start; }

@media (min-width:900px){ .msg-grid{ grid-template-columns:minmax(0,320px) minmax(0,1fr); } }

.portrait{
  aspect-ratio:3/4; width:100%; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#FBE8D6,#F2D3B4);
  display:flex; align-items:flex-end; padding:1.3rem;
}

.portrait::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(43,29,20,.05) 0 1px,transparent 1px 13px);
}

.portrait span{ font-size:0.74rem; color:var(--fg-muted); letter-spacing:0.08em; line-height:1.7; position:relative; z-index:1; }

.msg-body blockquote{
  margin:0 0 1.8rem; font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.3rem,1.05rem + 1.5vw,2.1rem); line-height:1.6; letter-spacing:-0.015em;
}

.msg-body p{ margin:0 0 1.2rem; font-size:0.95rem; color:var(--fg-muted); }

.msg-sign{ margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--rule); display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }

/* ============================================================
   流れ
   ============================================================ */
.flow-list{ counter-reset:f; display:grid; margin:0; padding:0; list-style:none; }

.flow-list li{
  counter-increment:f; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.1rem,3vw,2.4rem); padding-block:clamp(1.3rem,3vw,1.9rem);
  border-top:1px solid var(--rule); transition:background-color .3s ease;
}

.flow-list li:last-child{ border-bottom:1px solid var(--rule); }

.flow-list li:hover{ background:var(--panel); }

.flow-list li::before{
  content:counter(f,decimal-leading-zero);
  font-family:var(--f-num); font-weight:200; font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);
  color:var(--gold); line-height:1.1; letter-spacing:0.01em;
}

.flow-list h3{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1rem,0.95rem + 0.5vw,1.2rem); margin:0 0 0.4rem; line-height:1.6; }

.flow-list p{ margin:0; font-size:0.88rem; color:var(--fg-muted); line-height:1.85; }

/* ============================================================
   会社概要
   ============================================================ */
/* パートナー・スポンサー欄は廃止（オーナー判断・2026-09-17）。表1枚だけになったので
   2カラムをやめ、1行が長くなりすぎない幅で止める。 */
.co-grid{ display:block; }

.co-table{ width:100%; max-width:46em; border-collapse:collapse; font-size:0.91rem; }

.co-table th,.co-table td{ text-align:left; padding:1rem 0; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.8; }

.co-table th{
  width:32%; color:var(--fg-muted); font-weight:500; padding-right:1rem;
  font-size:0.82rem; letter-spacing:0.06em;
}

/* ============================================================
   下層ページ共通（このページで追加した分）
   ============================================================ */
/* ページ見出し帯。TOPのヒーローと同じグラデーションを使うが、高さは約1/3。
   同じサイトであることを色で示しつつ、主役は本文側に置く。 */
.page-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(2.6rem,6.5vh,4.2rem) clamp(2.4rem,5.5vh,3.6rem);
  background:linear-gradient(115deg,#E8560C 0%,#F0700C 38%,#FDCE2E 86%,#FBC229 100%);
}

/* 透かしはTOPより小さく薄く。下層では背景であって主役ではない */
/* 帯の高さは文言の行数で変わる（モバイルはリード文が折り返すぶん高い）。
   top を％で置くと高さに比例して動いてしまい、狭い画面ほど上に寄る。
   1000px未満は帯の高さに関係なく上下中央で固定する。 */
.page-hero .hero-ring{
  opacity:.13; right:-8%; top:50%; translate:0 -50%;
  width:min(52vw,520px); animation:none;
}

/* PCは現状の見え方を変えない（translate を明示的に戻す） */
@media (min-width:1000px){
  .page-hero .hero-ring{ right:2%; top:-34%; translate:none; width:min(38vw,560px); }
}

.page-hero .wrap{ position:relative; z-index:1; }

.page-hero h1{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem);
  line-height:1.35; letter-spacing:-0.015em; margin:0 0 1rem; color:var(--fg);
}

.page-hero .lead{ max-width:40em; margin:0; color:rgba(43,29,20,.86); }

/* パンくず */
.crumb{ font-size:0.78rem; letter-spacing:0.04em; color:rgba(43,29,20,.7); margin:0 0 1.1rem; }

.crumb a{ text-decoration:none; border-bottom:1px solid rgba(43,29,20,.28); }

.crumb a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

.crumb i{ font-style:normal; margin-inline:0.55rem; opacity:.5; }

/* 現在地のナビ項目（下線を出したままにする） */
@media (min-width:1040px){
  .gnav a[aria-current="page"]{ color:var(--brand); }
  .gnav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
}

/* ============================================================
   代表メッセージ（ABOUTページ版）
   TOPより本文がはるかに長いので、複製元の「代表メッセージ」ブロックには
   触らず、このページだけの上書きをここに足す。
   複製元を書き換えないのは、TOPのCSSを流し込み直したときに
   この調整が消えないようにするため。
   ============================================================ */
/* 本文が長い。1行が全角40文字を超えると目が戻れなくなるので、本文側の幅を止める。
   写真の列はPCで固定幅なので、止めるのは本文だけでよい。 */
#message .msg-body{ max-width:33em; }

/* 段落が多いので、複製元の 1.2rem では段落の切れ目が行間に埋もれる。
   1行ぶん（本文の line-height ≒ 1.95em）に近い値まで開ける。 */
#message .msg-body p{ margin:0 0 1.55rem; }

#message .msg-body blockquote{ margin-bottom:clamp(1.8rem,4vw,2.4rem); }

/* 強調は太字＋本文より濃い色だけ。マーカーも色文字も使わない。 */
#message .msg-body b{ font-weight:700; color:var(--fg); }

/* 代表写真は入れない（オーナー判断・2026-09-17）。複製元の2カラム指定を
   1カラムに戻す。本文の幅は上の max-width で止まっているので、これだけでよい。 */
#message .msg-grid{ display:block; }

/* 署名：会社名 → 役職＋氏名 の2行。役職と氏名は同じ大きさ・同じ太さで並べる。 */
#message .msg-sign{ display:block; margin-top:clamp(2.2rem,5vw,3rem); padding-top:1.4rem; }

/* 行間は margin ではなく line-height で詰める。本文の line-height:1.95 が
   そのまま効いていると、margin を0にしても上下の余白（ハーフレディング）が
   1行ぶん近く残るため。 */
#message .msg-sign .company{
  display:block; font-size:0.85rem; font-weight:700; letter-spacing:0.06em;
  line-height:1.45; color:var(--fg-muted); margin-bottom:0;
}

#message .msg-sign .who{ display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap; line-height:1.45; }

#message .msg-sign .role,
#message .msg-sign .name{
  font-family:var(--f-body); font-weight:700; font-size:0.86rem;
  letter-spacing:0.08em; color:var(--fg);
}

/* PCのみ追従。モバイルは画面下に固定CTAバー（.mobile-cta）があるので、
   上も固定すると可視領域を二重に削る。ナビとCTAが出そろう 1040px から。 */
@media (min-width:1040px){
  .site-header{ position:sticky; top:0; }
  /* 追従ヘッダーの下にアンカー先が潜らないように（min-height:74px ＋ 余白） */
  section[id], article[id]{ scroll-margin-top:calc(74px + 1.2rem); }
}

.price-foot{ margin-top:1.6rem; font-size:0.8rem; color:var(--fg-muted); line-height:1.9; }

/* ============================================================
   スタンス
   ============================================================ */
.fit-grid{ display:grid; gap:clamp(1.4rem,4vw,2.5rem); }

@media (min-width:940px){ .fit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.fit-card{ padding:clamp(1.9rem,4vw,2.8rem); min-width:0; border:1px solid var(--rule); }

.fit-yes{ background:linear-gradient(165deg,rgba(240,112,12,.14),rgba(245,180,23,.05)); border-color:rgba(199,33,14,.26); }

.fit-no{ background:var(--white); }

.fit-card h3{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.1rem,1rem + 0.7vw,1.4rem); margin:0 0 1.4rem; line-height:1.6; letter-spacing:-0.01em;
}

.fit-yes h3{ color:var(--gold-lt); }

.fit-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:0.9rem; }

.fit-card li{ position:relative; padding-left:1.8rem; font-size:0.92rem; line-height:1.85; }

.fit-yes li::before{
  content:""; position:absolute; left:0; top:0.5em; width:11px; height:6px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg);
}

.fit-no li::before{
  content:""; position:absolute; left:1px; top:0.82em; width:12px; height:1.5px; background:var(--fg-muted);
}

.fit-no .stance{
  margin:1.6rem 0 0; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:0.87rem; color:var(--fg-muted); line-height:1.9;
}

/* ============================================================
   事例（詳細版）— TOPのカードより情報量を増やした版
   ============================================================ */
.cs-list{ display:grid; gap:clamp(2rem,5vw,3.4rem); }

.cs{
  border:1px solid rgba(43,29,20,.1); background:var(--white);
  box-shadow:0 1px 2px rgba(43,29,20,.04);
  padding:clamp(1.8rem,4vw,3rem);
}

.cs-head{ display:grid; gap:0.85rem; padding-bottom:clamp(1.3rem,3vw,1.9rem); border-bottom:1px solid var(--rule); }

.cs-head .tag{
  font-family:var(--f-num); font-weight:600; font-size:0.72rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
}

.cs-head h2{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.3rem,1.08rem + 1.1vw,1.9rem); line-height:1.5;
  letter-spacing:-0.015em; margin:0;
}

.cs-head .meta{ font-size:0.82rem; color:var(--fg-muted); margin:0; line-height:1.8; }

/* 本文（課題・打ち手）と結果を、広い画面では左右に置く。
   結果のパネルは先頭行を本文と揃えたいので align-self:start。 */
.cs-body{ display:grid; gap:clamp(1.5rem,3.5vw,2.2rem); padding-top:clamp(1.4rem,3vw,2rem); }

@media (min-width:1040px){
  .cs-body{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.2rem); }
}

.cs-block + .cs-block{ margin-top:clamp(1.4rem,3vw,1.9rem); }

.cs-block .lab{
  margin:0 0 0.7rem; font-family:var(--f-num); font-weight:600;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-muted);
}

.cs-block ul{ margin:0; padding:0; list-style:none; display:grid; gap:0.55rem; }

.cs-block li{
  font-size:0.86rem; color:rgba(43,29,20,.78); padding-left:1.25rem;
  position:relative; line-height:1.85;
}

/* 罫は行の中央に。line-height 1.85 の半分から罫の太さの半分を引く */
.cs-block li::before{
  content:""; position:absolute; left:0; width:8px; height:1px;
  background:var(--gold-dk); top:calc(0.925em - 0.5px);
}

/* 打ち手の罫は本文と区別するため濃茶に落とす */
.cs-block.do li::before{ background:rgba(43,29,20,.4); }

/* 結果パネル。TOPの .case .kpi と同じ組み方に揃えている */
.cs-res{
  background:var(--panel); border:1px solid var(--rule);
  padding:clamp(1.2rem,2.8vw,1.7rem); align-self:start; min-width:0;
}

.cs-res .lab{
  margin:0 0 0.4rem; font-family:var(--f-num); font-weight:600;
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-muted);
}

.cs-res dl{ margin:0; display:grid; gap:0.1rem; }

.cs-res .kpi{
  display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap; min-width:0;
  padding-block:0.8rem; border-bottom:1px solid var(--rule);
}

.cs-res .kpi:last-child{ border-bottom:0; padding-bottom:0; }

.cs-res .kpi dt{ font-size:0.79rem; color:var(--fg-muted); flex:1 1 8.5em; min-width:0; line-height:1.6; }

.cs-res .kpi dd{
  margin:0; font-family:var(--f-num); font-weight:200;
  font-size:clamp(1.25rem,1.1rem + 0.8vw,1.7rem); line-height:1.15;
  letter-spacing:-0.02em; color:var(--gold-lt);
}

.cs-res .kpi dd em{ font-style:normal; font-size:0.55em; color:var(--fg-muted); font-weight:400; }

/* 「最高13名」が平常値と誤読されないよう、バッジと数字は必ず同じ行に置く（実績セクションと同じ） */
.cs-res .peak-wrap{ display:inline-flex; align-items:baseline; gap:0.3em; white-space:nowrap; }

.cs-res .peak{
  font-family:var(--f-body); font-size:0.58rem; font-weight:700;
  letter-spacing:0.06em; line-height:1; color:#fff; background:var(--brand);
  border-radius:999px; padding:0.42em 0.72em; align-self:center;
  flex:0 0 auto; translate:0 -0.06em;
}

/* 結果パネルの数値に付ける限定条件（拠点合計・対象職種など） */
.cs-res .kpi-note{
  margin:0.5rem 0 0; font-size:0.72rem; line-height:1.75; color:var(--fg-muted);
  padding-left:1.15em; text-indent:-1.15em;
}

.cs-res .kpi-note::before{ content:"※ "; }

/* 支援範囲の帯 */
.cs-scope{
  margin:clamp(1.3rem,3vw,1.8rem) 0 0; padding-top:clamp(1.1rem,2.5vw,1.5rem);
  border-top:1px solid var(--rule); font-size:0.82rem; color:var(--fg-muted); line-height:1.9;
}

.cs-scope b{ font-weight:700; color:var(--fg); }

/* 掲載についての注記 */
.cs-fn{
  margin:clamp(2rem,5vw,3rem) 0 0; padding:0; list-style:none;
  display:grid; gap:0.5rem; font-size:0.78rem; color:var(--fg-muted); line-height:1.9;
}

.cs-fn li::before{ content:"※ "; }

/* ============================================================
   FAQ（このページ固有）
   FAQセクションはこのページにしか無いので、共通CSSの複製部分は触らず
   ここで足す。TOPのCSSを流し込み直しても消えない。
   ============================================================ */
/* 質問の頭に「Q.」を出す。summary は既に position:relative（開閉アイコン用）なので、
   Q. を絶対配置して本文側に padding を取れば、2行目以降も質問文の頭で揃う。
   ベタ書きで前に置くと、折り返した行だけが Q. の下にもぐって左端から始まる。 */
.faq-list summary{ padding-left:1.75em; }

.faq-list summary .q{
  position:absolute; left:0; top:clamp(1.2rem,3vw,1.6rem);
  color:var(--gold-dk); font-feature-settings:normal;
}

/* ============================================================
   個人情報保護方針（このページ固有）
   法令文書は「読ませる」より「引ける」ことを優先する。
   条番号はCSSカウンタで振る。ベタ書きすると条を1本足しただけで
   以降の番号が全部ずれ、目次とも食い違う。
   ============================================================ */
.legal{ max-width:54em; }

.legal .lede{ margin:0 0 1.15rem; line-height:2.05; }

.legal .lede:last-of-type{ margin-bottom:clamp(2.4rem,5vw,3.4rem); }

/* --- 条 --- */
.legal-arts{ counter-reset:art; }

.art{
  margin-top:clamp(2.2rem,5vw,3rem);
  padding-top:clamp(2.2rem,5vw,3rem);
  border-top:1px solid var(--rule);
  /* ヘッダーが固定なので、目次から飛んだときに見出しが隠れないよう逃がす */
  scroll-margin-top:96px;
}

.art:first-child{ margin-top:0; padding-top:0; border-top:0; }

.art > h3{
  counter-increment:art; position:relative; padding-left:2.6em;
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.05rem,0.98rem + 0.45vw,1.28rem);
  line-height:1.6; letter-spacing:0.005em; color:var(--fg); margin:0 0 1.1rem;
}

.art > h3::before{
  content:counter(art,decimal-leading-zero);
  position:absolute; left:0; top:0.12em;
  font-family:var(--f-num); font-weight:600; font-size:0.94em;
  color:var(--gold-dk); letter-spacing:0.03em;
}

.art p{ margin:0 0 1rem; line-height:2.0; }

.art p:last-child{ margin-bottom:0; }

.art p.sub{ color:var(--fg-muted); font-size:0.9rem; line-height:1.95; }

.art h4{
  font-family:var(--f-body); font-weight:700; font-size:0.95rem;
  letter-spacing:0.02em; margin:1.6rem 0 0.7rem; color:var(--fg);
}

.art h4:first-child{ margin-top:0; }

/* --- 箇条書き。行頭記号は罫、折り返しは頭で揃える --- */
.l-list{ margin:0 0 1rem; padding:0; list-style:none; }

.l-list:last-child{ margin-bottom:0; }

.l-list > li{ position:relative; padding-left:1.4em; margin-bottom:0.6rem; line-height:2.0; }

.l-list > li:last-child{ margin-bottom:0; }

.l-list > li::before{
  content:""; position:absolute; left:0; top:0.98em;
  width:0.55em; height:1px; background:var(--rule-2);
}

/* 号（(1)(2)…）。番号もカウンタで振る */
.l-num{ counter-reset:n; }

.l-num > li{ padding-left:2.3em; }

.l-num > li::before{
  content:"(" counter(n) ")"; counter-increment:n;
  width:auto; height:auto; background:none; top:0;
  font-family:var(--f-num); font-weight:400; font-size:0.9em; color:var(--fg-muted);
}

/* --- 目次 --- */
.toc{
  margin:0 0 clamp(2.4rem,5vw,3.4rem); padding:clamp(1.3rem,3vw,1.7rem) clamp(1.3rem,3vw,1.9rem);
  background:var(--white); border:1px solid var(--rule);
}

.toc h3{
  font-family:var(--f-body); font-weight:700; font-size:0.8rem;
  letter-spacing:0.14em; color:var(--fg-muted); margin:0 0 0.9rem;
}

.toc ol{ margin:0; padding:0; list-style:none; counter-reset:t; columns:2; column-gap:2rem; }

@media (max-width:719px){ .toc ol{ columns:1; } }

.toc li{ break-inside:avoid; margin-bottom:0.45rem; }

.toc a{
  position:relative; display:block; padding-left:2.3em;
  font-size:0.9rem; line-height:1.8; text-decoration:none; color:var(--fg);
  border-bottom:1px solid transparent;
}

.toc a::before{
  content:counter(t,decimal-leading-zero); counter-increment:t;
  position:absolute; left:0; top:0;
  font-family:var(--f-num); font-weight:600; font-size:0.85em; color:var(--gold-dk);
}

.toc a:hover{ color:var(--brand); }

/* --- 利用目的の一覧 --- */
/* 表にすると狭い画面で必ず潰れる（3列＝対象・情報・目的）。
   1件1ブロックに開いて、見出し＋定義リストで積む。 */
.pu{ display:grid; gap:1.1rem; margin:0; }

.pu-row{ background:var(--white); border:1px solid var(--rule); padding:clamp(1.15rem,3vw,1.5rem); }

.pu-row > h5{
  font-family:var(--f-disp); font-weight:700; font-size:0.98rem; line-height:1.6;
  margin:0 0 0.9rem; padding-bottom:0.7rem; border-bottom:1px solid var(--rule);
  color:var(--fg);
}

.pu-row dl{ margin:0; display:grid; gap:0.55rem 1.3rem; }

@media (min-width:760px){ .pu-row dl{ grid-template-columns:7.5em minmax(0,1fr); } }

.pu-row dt{
  font-size:0.78rem; letter-spacing:0.06em; color:var(--fg-muted);
  font-weight:500; line-height:2.0;
}

.pu-row dd{ margin:0; font-size:0.93rem; line-height:1.95; }

@media (max-width:759px){ .pu-row dd{ margin-bottom:0.5rem; } }

/* --- 窓口ブロック --- */
.contact-box{
  margin:1.3rem 0 0; padding:clamp(1.2rem,3vw,1.5rem);
  background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--brand);
}

.contact-box dl{ margin:0; display:grid; gap:0.5rem 1.3rem; }

@media (min-width:640px){ .contact-box dl{ grid-template-columns:8.5em minmax(0,1fr); } }

.contact-box dt{ font-size:0.78rem; letter-spacing:0.06em; color:var(--fg-muted); line-height:2.0; }

.contact-box dd{ margin:0; font-size:0.95rem; line-height:2.0; }

.contact-box a{ text-decoration:none; border-bottom:1px solid var(--rule-2); }

.contact-box a:hover{ color:var(--brand); border-bottom-color:var(--brand); }

/* 許可番号のような「途中で切れると壊れて見える」文字列を分割禁止にする */
.nb{ white-space:nowrap; }

/* --- 制定日 --- */
.legal-date{
  margin:clamp(2.4rem,5vw,3.2rem) 0 0; padding-top:1.4rem; border-top:1px solid var(--rule);
  font-size:0.85rem; color:var(--fg-muted); line-height:2.0;
}

.legal-date b{ display:block; font-weight:500; color:var(--fg); margin-top:0.4rem; }

/* ============================================================
   お問い合わせ（このページ固有）
   フォームは白い面に白い入力欄を置くと境目が消える。
   この面だけ淡オレンジ（既定の背景）にして、入力欄とカードを白で浮かせる。
   ============================================================ */
.contact-grid{ display:grid; gap:clamp(2.4rem,6vw,3.6rem); align-items:start; }

@media (min-width:980px){
  .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,330px); }
}

/* --- 入力欄 --- */
.fields{ display:grid; gap:1.4rem; }

@media (min-width:640px){ .fields{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.f-row{ display:flex; flex-direction:column; gap:0.55rem; min-width:0; }

.f-row.wide{ grid-column:1 / -1; }

.f-row > label{
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
  font-family:var(--f-body); font-weight:700; font-size:0.83rem;
  letter-spacing:0.06em; color:var(--fg);
}

.req,.opt{
  font-size:0.66rem; letter-spacing:0.08em; font-weight:700;
  padding:0.25em 0.55em; line-height:1.4;
}

.req{ color:#fff; background:var(--brand); }

.opt{ color:var(--fg-muted); border:1px solid var(--rule-2); }

.f-row input,.f-row textarea,.f-row select{
  font:inherit; font-size:0.95rem; line-height:1.7; color:var(--fg);
  background:var(--white); border:1px solid var(--rule-2);
  padding:0.85rem 1rem; width:100%; border-radius:0; appearance:none;
}

.f-row textarea{ min-height:11em; resize:vertical; line-height:1.95; }

.f-row input:focus,.f-row textarea:focus,.f-row select:focus{
  outline:2px solid var(--brand); outline-offset:1px; border-color:transparent;
}

.f-row .hint{ margin:0; font-size:0.78rem; color:var(--fg-muted); line-height:1.85; }

/* select の矢印。appearance:none で消えるので自前で描く。
   基準は select を包む .sel（行全体に付けると top:50% がラベルを含む高さの
   中心になり、矢印が select の中心より上にずれる）。 */
.sel{ position:relative; }

.sel::after{
  content:""; position:absolute; right:1.1rem; top:50%;
  width:0.48rem; height:0.48rem;
  border-right:1.5px solid var(--fg-muted); border-bottom:1.5px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* --- 同意 --- */
.consent{
  margin:1.9rem 0 0; padding:1.2rem 1.35rem;
  background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--brand);
}

.consent label{
  display:flex; gap:0.85rem; align-items:flex-start;
  font-size:0.9rem; line-height:1.95; cursor:pointer;
}

.consent input{ flex:none; margin-top:0.5em; width:1.05em; height:1.05em; accent-color:var(--brand); }

.consent a{ color:var(--gold-dk); text-decoration:none; border-bottom:1px solid var(--rule-2); }

.consent a:hover{ border-bottom-color:var(--gold-dk); }

/* --- 送信 --- */
.f-submit{ margin-top:1.8rem; }

.f-submit .btn{ min-width:15em; }

.f-note{ margin:1.1rem 0 0; font-size:0.8rem; color:var(--fg-muted); line-height:1.9; }

/* --- 右のレール --- */
.rail{ display:grid; gap:1.1rem; }

.rail-card{ background:var(--white); border:1px solid var(--rule); padding:clamp(1.2rem,3vw,1.45rem); }

.rail-card h3{
  font-family:var(--f-disp); font-weight:700; font-size:0.95rem;
  line-height:1.6; margin:0 0 0.7rem; color:var(--fg);
}

.rail-card p{ margin:0; font-size:0.87rem; line-height:1.95; color:var(--fg-muted); }

.rail-card p + p{ margin-top:0.7rem; }

.rail-card .mail{
  display:inline-block; margin-top:0.2rem;
  font-family:var(--f-num); font-weight:400; font-size:1.02rem; letter-spacing:0.01em;
  color:var(--fg); text-decoration:none; border-bottom:1px solid var(--rule-2);
}

.rail-card .mail:hover{ color:var(--brand); border-bottom-color:var(--brand); }

/* --- ハニーポット（機械よけ）。人間には見えない欄 --- */
/* display:none だと埋めない機械がいるので、画面外に飛ばして「見えないが存在する」状態にする */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* --- 送信の状態表示 --- */
.form-status{ margin:1.1rem 0 0; font-size:0.9rem; line-height:1.9; }

.form-status:empty{ display:none; }

.form-status.err{ color:var(--brand); font-weight:700; }

.form-status.wait{ color:var(--fg-muted); }

.btn[disabled]{ opacity:.55; pointer-events:none; }

/* --- 送信完了パネル（フォームと差し替わる） --- */
.sent{
  background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--brand);
  padding:clamp(1.6rem,4vw,2.2rem);
}

.sent h2{
  font-family:var(--f-disp); font-weight:900; font-size:clamp(1.15rem,1rem + 0.7vw,1.5rem);
  margin:0 0 1rem; line-height:1.5; color:var(--fg);
}

.sent p{ margin:0 0 0.9rem; line-height:2.0; }

.sent p:last-child{ margin-bottom:0; }

/* --- 送信前にFAQへ寄り道させる帯 --- */
.pre-faq{ padding-block:clamp(2.6rem,6vw,4rem); }

.pre-faq .inner{
  display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:space-between;
  max-width:54em;
}

.pre-faq p{ margin:0; font-size:0.95rem; line-height:1.9; }