/* ==========================================================================
   pages.css
   トップと各固定ページの固有スタイル。トップぶんは body.home の中に閉じてある。
   ========================================================================== */

/* ── トップ ── */

/* ---------- ヒーロー（出典 preview/top.html） ---------- */
body.home .hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--c-paper) 0%,var(--c-navy-100) 100%);
  padding-block:var(--space-2xl) calc(var(--space-2xl) * 1.4); /* 下 ≧ 上×1.3 */
}
body.home .hero::after{ /* 斜め分割①／2箇所まで */
  content:"";position:absolute;inset:auto 0 -1px 0;height:56px;
  background:var(--c-paper);clip-path:polygon(0 100%,100% 0,100% 100%);
}
body.home .hero__inner{
  position:relative;z-index:var(--z-raised);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--space-2xl);align-items:center;
}
body.home .hero__title{font-size:var(--text-4xl);max-width:24ch;text-wrap:pretty}
body.home /* 見出しの改行制御
   1240px以上（横並びの左カラムが12文字を収められる幅）… 2行
     売上につながる仕組みを、／一緒に設計します。
   それ未満（タブレット・スマホ）… 3行
     売上につながる／仕組みを、／一緒に設計します。
   ※ 中間幅で「仕組／みを、」と単語の途中で割れるのを防ぐための明示改行 */
.br-sp{display:inline}
@media (min-width:1240px){
body.home .br-sp{display:none}}
body.home .hero__title em{font-style:normal;color:var(--c-navy);font-weight:700}
body.home /* 見出しに斜体は使わない */
.hero__lead{margin-top:var(--space-md);max-width:46ch;color:var(--c-ink-2);font-size:var(--text-lg)}
body.home .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
body.home .hero__note{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3)}
body.home .hero__figure{margin:0}
@media (max-width:900px){
body.home .hero__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
body.home .hero__figure{order:2}
}
/* 図版：トップの図は横520pxの版下なので、画面幅に合わせて縮めれば全体が入る。
   下層ページの横900pxの図（/service/・/consulting/）は縮めると読めなくなるため、
   そちらは components.css の横スクロールのままにしてある。 */
body.home .figscroll{overflow-x:visible}
body.home .figscroll svg{min-width:0;width:100%}
body.home .fighint{display:none}

/* ---------- チェックリスト（出典 preview/top.html） ---------- */
body.home .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--space-md) var(--space-xl)}
/* 項目そのものの見た目（大きさ・チェック印）は components.css 側に集約してある。
   ここで font-size や display を指定すると、そちらの指定を打ち消してしまう。 */
body.home .checks li{color:var(--c-ink-2)}
body.home .banner{
  margin-top:var(--space-xl);padding:var(--space-md) var(--space-lg);
  background:var(--c-navy-100);border-left:1px solid var(--c-navy);
  font-weight:500;color:var(--c-navy-900);
}

/* ---------- 原因（出典 preview/top.html） ---------- */
body.home .cause{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-2xl);align-items:center}
@media (max-width:900px){
body.home .cause{grid-template-columns:minmax(0,1fr)}}
body.home .cause__body p+p{margin-top:var(--space-md)}

/* ---------- サービス（出典 preview/top.html） ---------- */
body.home .svc{border-top:var(--rule-strong)}
body.home .svc__item{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--space-xl);align-items:center;
  padding-block:var(--space-xl);border-bottom:var(--rule-strong);
}
body.home .svc__item:nth-child(even) .svc__figure{order:2}
body.home .svc__figure{margin:0;background:var(--c-paper-2);border-radius:var(--radius-lg);padding:var(--space-lg)}
body.home .svc__no{
  display:block;font-family:var(--font-display);font-size:var(--text-sm);
  font-weight:700;letter-spacing:.12em;color:var(--c-brass);margin-bottom:6px;
}
body.home .svc__title{font-size:var(--text-xl);font-family:var(--font-display)}
body.home .svc__desc{margin-top:var(--space-sm);color:var(--c-ink-2)}
body.home .svc__meta{margin-top:var(--space-md);border-top:var(--rule);width:100%}
body.home .svc__meta th,
body.home .svc__meta td{
  padding:var(--space-2xs) 0;font-size:var(--text-sm);text-align:left;
  vertical-align:top;border-bottom:var(--rule);
}
body.home .svc__meta th{width:7.5em;font-weight:700;color:var(--c-ink-3);white-space:nowrap}
body.home .svc__meta td{color:var(--c-ink-2);font-variant-numeric:tabular-nums}
body.home .svc__more{margin-top:var(--space-md)}
@media (max-width:900px){
body.home .svc__item{grid-template-columns:minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-lg)}
body.home .svc__item:nth-child(even) .svc__figure{order:0}
}

/* ---------- 選ばれる理由（出典 preview/top.html） ---------- */
body.home .feat{display:grid;gap:var(--space-xl)}
body.home .feat__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);align-items:start}
body.home .feat__no{
  font-family:var(--font-display);font-size:clamp(2.5rem,1.6rem + 3vw,3.75rem);
  font-weight:500;line-height:.9;color:var(--c-navy-100);
  font-variant-numeric:tabular-nums;
}
body.home .feat__title{font-size:var(--text-xl);font-family:var(--font-display)}
body.home .feat__desc{margin-top:var(--space-2xs);color:var(--c-ink-2);max-width:62ch}

/* ---------- 事例（紺セクション）（出典 preview/top.html） ---------- */
body.home .works{
  position:relative;background:var(--c-navy-900);color:var(--c-paper);
  padding-block:calc(var(--space-3xl) + 40px) var(--space-3xl);
}
body.home .works::before{
  content:"";position:absolute;inset:-1px 0 auto 0;height:48px;
  background:var(--c-paper);clip-path:polygon(0 0,100% 0,0 100%);
}
body.home .works .eyebrow{color:var(--c-brass-bright)}
body.home .works .section__title,
body.home .works h3{color:var(--c-paper)}
body.home .works .section__lead{color:#c2d3e2}
body.home .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-md)}
body.home .card{
  background:#0d3557;border:1px solid rgba(247,249,251,.14);
  border-radius:var(--radius-md);padding:var(--space-lg);
  display:flex;flex-direction:column;gap:var(--space-sm);
}
body.home .card__tag{
  align-self:flex-start;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;
  color:var(--c-brass-bright);border:1px solid rgba(201,169,97,.5);
  border-radius:var(--radius-sm);padding:3px var(--space-2xs);line-height:1.4;
}
body.home .card__title{font-size:var(--text-lg);font-family:var(--font-display);line-height:var(--lh-tight)}
body.home .card__body{font-size:var(--text-sm);color:#cddced;line-height:1.8}
body.home .card__meta{margin-top:auto;border-top:1px solid rgba(247,249,251,.14);padding-top:var(--space-sm);width:100%}
body.home .card__meta th,
body.home .card__meta td{font-size:var(--text-xs);text-align:left;padding:3px 0;vertical-align:top}
body.home .card__meta th{width:5.5em;color:#9fb8cd;font-weight:500;white-space:nowrap}
body.home .card__meta td{color:#e2ecf5}
body.home .works__note{margin-top:var(--space-lg);font-size:var(--text-xs);color:#9fb8cd}
body.home .works__actions{margin-top:var(--space-xl)}
body.home .works__actions .tlink{color:var(--c-brass-bright)}

/* ---------- 実績（出典 preview/top.html） ---------- */
body.home .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--c-paper-3)}
body.home .stat{background:var(--c-paper);padding:var(--space-lg)}
body.home .stat__label{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;color:var(--c-ink-3)}
body.home .stat__value{
  margin-top:var(--space-2xs);font-family:var(--font-display);font-weight:700;
  font-size:var(--text-2xl);color:var(--c-navy);line-height:1.2;
  font-variant-numeric:tabular-nums;
}
body.home .stat__unit{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--c-ink-2);margin-left:2px}
body.home .industries{margin-top:var(--space-xl);border:var(--rule);border-radius:var(--radius-md);padding:var(--space-lg)}
body.home .industries__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--c-ink);margin-bottom:var(--space-sm)}
body.home .industries__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-sm)}
body.home .industries__list li{font-size:var(--text-sm);color:var(--c-ink-2);display:flex;gap:6px;align-items:center}
body.home .industries__list li::before{content:"";width:3px;height:3px;background:var(--c-brass);flex:none}
body.home .stance{
  margin-top:var(--space-xl);max-width:var(--w-prose);
  padding-left:var(--space-lg);border-left:2px solid var(--c-brass);
  font-family:var(--font-display);font-size:var(--text-lg);
  line-height:1.9;color:var(--c-navy-900);
}

/* ---------- 流れ（出典 preview/top.html） ---------- */
body.home .flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-sm);counter-reset:step}
body.home .flow__item{
  position:relative;background:var(--c-paper);border:var(--rule);
  border-top:2px solid var(--c-navy);border-radius:var(--radius-md);
  padding:var(--space-md);
}
body.home .flow__no{
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  color:var(--c-brass);letter-spacing:.08em;font-variant-numeric:tabular-nums;
}
body.home .flow__title{margin-top:4px;font-size:var(--text-base);font-family:var(--font-display);font-weight:700}
body.home .flow__desc{margin-top:6px;font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}
/* 5列に並べきれない幅では、2列にせず1列にする。
   2列だと STEP01→02 が横、03 が下、という読み順になり、順番が伝わらない。 */
@media (max-width:1000px){
body.home .flow{grid-template-columns:minmax(0,1fr)}
body.home .flow__item{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--space-md);align-items:baseline}
body.home .flow__no{grid-row:1/span 2}
body.home .flow__title{margin-top:0}
body.home .flow__desc{grid-column:2}}

/* ---------- コラム（出典 preview/top.html） ---------- */
body.home .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--space-md)}
body.home .post{
  background:var(--c-paper);border:var(--rule);border-radius:var(--radius-md);
  padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-2xs);
  transition:border-color var(--dur-base) var(--ease-out);
}
body.home .post:hover{border-color:var(--c-navy-600)}
body.home .post__meta{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3)}
body.home .post__cat{color:var(--c-brass);font-weight:700}
body.home .post__title{font-size:var(--text-base);font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight)}
body.home .post__title a{color:var(--c-ink);text-decoration:none}
body.home .post:hover .post__title a{color:var(--c-navy)}

/* ---------- 会社情報（出典 preview/top.html） ---------- */
body.home .company{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-2xl);align-items:start}
@media (max-width:900px){
body.home .company{grid-template-columns:minmax(0,1fr)}}
body.home .dl{border-top:var(--rule-strong);width:100%}
body.home .dl th,
body.home .dl td{padding:var(--space-sm) 0;font-size:var(--text-sm);text-align:left;vertical-align:top;border-bottom:var(--rule)}
body.home .dl th{width:9em;font-weight:700;color:var(--c-ink-3);white-space:nowrap}
body.home .dl td{color:var(--c-ink-2)}
body.home .creed{background:var(--c-paper-2);border-radius:var(--radius-lg);padding:var(--space-lg)}
body.home .creed__title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--c-navy);line-height:var(--lh-display)}
body.home .creed__body{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--c-ink-2)}

/* ---------- 入場アニメ（出典 preview/top.html） ---------- */
@keyframes rise{
body.home from{opacity:0;transform:translateY(10px)}
body.home to{opacity:1;transform:none}}
body.home .hero__title,
body.home .hero__lead,
body.home .hero__actions{animation:rise .5s var(--ease-out) both}
body.home .hero__lead{animation-delay:.06s}
body.home .hero__actions{animation-delay:.12s}
@media (prefers-reduced-motion:reduce){
body.home *,
body.home *::before,
body.home *::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important}
}

/* ── サービス（ハブ）── */

/* ---------- 全体像の図（出典 preview/service.html） ---------- */
.figure{border:var(--rule);border-radius:var(--radius-lg);padding:var(--space-lg);background:#fdfefe}
.figure figcaption{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}


/* 図版：狭い画面では縮小しすぎて中の文字が読めなくなるため、図だけ横スクロールさせる
   （ページ全体は横スクロールさせない。比較表と同じ扱い） */
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;--minw:600px}
.figscroll svg{min-width:var(--minw)}
.fighint{display:none;margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3)}
@media (max-width:700px){.fighint{display:block}}

/* ---------- サービス項目（出典 preview/service.html） ---------- */
.svc{border-top:var(--rule-strong)}
.svc__item{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--space-xl);
  align-items:start;padding-block:var(--space-xl);border-bottom:var(--rule-strong);
  scroll-margin-top:calc(var(--header-h) + 16px)}
.svc__aside{background:var(--c-paper-2);border-radius:var(--radius-lg);padding:var(--space-lg)}
.svc__no{display:block;font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;
  letter-spacing:.12em;color:var(--c-brass);margin-bottom:var(--space-2xs)}
.svc__title{font-size:var(--text-xl)}
.svc__price{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--c-paper-3)}
.svc__priceLabel{display:block;font-size:var(--text-xs);color:var(--c-ink-3);font-weight:700}
.svc__priceValue{font-family:var(--font-display);font-size:var(--text-lg);color:var(--c-navy-900);
  line-height:1.5;font-variant-numeric:tabular-nums;margin-top:2px}
.svc__priceSub{margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}
.svc__desc{color:var(--c-ink-2)}
.svc__sub{margin-top:var(--space-lg);font-size:var(--text-base)}
.svc__meta{margin-top:var(--space-sm);width:100%;border-top:var(--rule)}
.svc__meta th,.svc__meta td{padding:var(--space-2xs) 0;font-size:var(--text-sm);text-align:left;
  vertical-align:top;border-bottom:var(--rule);line-height:1.75}
.svc__meta th{width:8em;font-weight:700;color:var(--c-ink-3);white-space:nowrap}
.svc__meta td{color:var(--c-ink-2)}
.svc__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
@media (max-width:900px){
  .svc__item{grid-template-columns:minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-lg)}
}

/* ---------- 比較表（出典 preview/service.html） ---------- */
.tablewrap{overflow-x:auto;border:var(--rule);border-radius:var(--radius-md);background:#fdfefe}
.ctable{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--text-sm)}
.ctable th,.ctable td{padding:var(--space-sm);text-align:left;vertical-align:top;border-bottom:var(--rule);line-height:1.75}
.ctable thead th{background:var(--c-navy);color:var(--c-accent-ink);font-weight:700;border-bottom:0;
  font-family:var(--font-display);font-size:var(--text-base)}
.ctable thead th:first-child{background:var(--c-navy-900);font-family:var(--font-body);font-size:var(--text-sm)}
.ctable tbody th{background:var(--c-paper-2);font-weight:700;color:var(--c-ink);white-space:nowrap;width:9em}
.ctable td+td{border-left:var(--rule)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable .num{font-variant-numeric:tabular-nums}
.tablenote{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3)}

/* ---------- 費用（出典 preview/service.html） ---------- */
.cost{margin-top:var(--space-2xl);border:var(--rule);border-top:2px solid var(--c-brass);
  border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-xl)}
.cost__title{font-size:var(--text-xl);margin-bottom:var(--space-lg)}
.cost__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl)}
@media (max-width:760px){.cost__steps{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}}
.cost__step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-md);align-items:start}
.cost__no{font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2vw,2.75rem);font-weight:500;
  line-height:.9;color:var(--c-navy-100);font-variant-numeric:tabular-nums}
.cost__stepTitle{font-size:var(--text-lg)}
.cost__stepDesc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}
.cost__stepDesc strong{font-weight:700;color:var(--c-ink)}
.cost__action{margin-top:var(--space-md)}

/* ---------- オプション（出典 preview/service.html） ---------- */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-md)}
.opt{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg)}
.opt__title{font-size:var(--text-lg)}
.opt__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.8}

/* ---------- 向き・不向き（出典 preview/service.html） ---------- */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
@media (max-width:760px){.fit{grid-template-columns:minmax(0,1fr)}}
.fit__col{border:var(--rule);border-radius:var(--radius-md);padding:var(--space-lg);background:#fdfefe}
.fit__col--yes{border-top:2px solid var(--c-navy)}
.fit__col--no{border-top:2px solid var(--c-paper-3);background:var(--c-paper-2)}
.fit__title{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
.fit li{display:flex;gap:var(--space-xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:var(--lh-tight)}
.fit li+li{margin-top:var(--space-xs)}
.fit svg{width:18px;height:18px;flex:none;margin-top:3px}
.fit__col--yes svg{color:var(--c-navy)}
.fit__col--no svg{color:var(--c-ink-3)}

/* ---------- ポジショニング帯（出典 preview/service.html） ---------- */
.posband{background:var(--c-navy-900);color:var(--c-paper)}
.stance__inner{padding-block:var(--space-2xl)}
.stance__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.stance__title{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-2xl);color:var(--c-paper);line-height:1.45}
.stance__list{margin-top:var(--space-lg);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
@media (max-width:760px){.stance__list{grid-template-columns:minmax(0,1fr)}}
.stance__item{display:flex;gap:var(--space-sm);border:1px solid rgba(247,249,251,.2);border-radius:var(--radius-md);
  padding:var(--space-md);background:rgba(247,249,251,.04)}
.stance__x{flex:none;font-family:var(--font-display);font-size:var(--text-lg);color:#9fb8cd;line-height:1.5}
.stance__body{font-size:var(--text-sm);color:#dbe7f1;line-height:1.85}
.stance__concl{margin-top:var(--space-lg);font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--c-paper);line-height:1.85;max-width:56ch}
.stance__concl em{font-style:normal;color:var(--c-brass-bright)}

/* ---------- 対象の目安（出典 preview/service.html） ---------- */
.criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--c-paper-3);
  border:var(--rule);border-radius:var(--radius-md);overflow:hidden}
@media (max-width:820px){.criteria{grid-template-columns:minmax(0,1fr)}}
.criterion{background:#fdfefe;padding:var(--space-lg)}
.criterion__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;color:var(--c-brass)}
.criterion__value{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--c-navy-900);line-height:1.5}
.criterion__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.8}

/* ---------- お引き受けできないケース（出典 preview/service.html） ---------- */
.decline{margin-top:var(--space-xl);border:var(--rule);border-left:2px solid var(--c-ink-3);
  border-radius:var(--radius-md);background:var(--c-paper-2);padding:var(--space-lg)}
.decline__title{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
.decline li{display:flex;gap:var(--space-xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:var(--lh-tight)}
.decline li+li{margin-top:var(--space-sm)}
.decline svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--c-ink-3)}
.decline__note{margin-top:var(--space-md);padding-top:var(--space-md);border-top:var(--rule);
  font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.8}

/* ---------- 流れ（5ステップ）（出典 preview/service.html） ---------- */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-sm)}
.flow__item{background:#fdfefe;border:var(--rule);border-top:2px solid var(--c-navy);
  border-radius:var(--radius-md);padding:var(--space-md)}
.flow__no{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;color:var(--c-brass);
  letter-spacing:.08em;font-variant-numeric:tabular-nums}
.flow__title{margin-top:4px;font-size:var(--text-base)}
.flow__desc{margin-top:6px;font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}
/* トップと同じ理由で、5列に並べきれない幅では2列にせず1列にする（順番が伝わらないため） */
@media (max-width:1000px){
.flow{grid-template-columns:minmax(0,1fr)}
.flow__item{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:var(--space-md);align-items:baseline}
.flow__no{grid-row:1/span 2}
.flow__title{margin-top:0}
.flow__desc{grid-column:2}}
.banner{margin-top:var(--space-xl);padding:var(--space-md) var(--space-lg);background:var(--c-navy-100);
  border-left:1px solid var(--c-navy);font-weight:500;color:var(--c-navy-900)}

/* ── サービス（個別）── */

/* ---------- ページヘッダー（サービス個別）（出典 preview/service-consulting.html） ---------- */
.shead{background:linear-gradient(180deg,var(--c-paper) 0%,var(--c-navy-100) 100%);
  padding-block:var(--space-xl) calc(var(--space-xl)*1.35)}
.shead__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--space-2xl);align-items:start}
@media (max-width:900px){.shead__inner{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}}
.eyebrow{display:block;font-size:var(--text-sm);font-weight:700;letter-spacing:.14em;
  color:var(--c-brass);margin-bottom:var(--space-2xs)}
.shead__title{font-size:var(--text-3xl)}
.shead__lead{margin-top:var(--space-md);color:var(--c-ink-2);font-size:var(--text-lg);line-height:1.85;max-width:46ch}
.shead__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.spec{background:#fdfefe;border:var(--rule);border-top:2px solid var(--c-brass);
  border-radius:var(--radius-md);padding:var(--space-lg)}
.spec__title{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);
  font-family:var(--font-body);margin-bottom:var(--space-sm)}
.spec dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2xs) var(--space-md);margin:0}
.spec dt{font-size:var(--text-xs);font-weight:700;color:var(--c-ink-3);white-space:nowrap;line-height:1.9}
.spec dd{margin:0;font-size:var(--text-sm);color:var(--c-ink);line-height:1.9}
.spec .amount{font-family:var(--font-display);font-size:var(--text-lg);color:var(--c-navy-900);
  font-variant-numeric:tabular-nums;line-height:1.5}

/* ---------- 提供内容（出典 preview/service-consulting.html） ---------- */
.figure{border:var(--rule);border-radius:var(--radius-lg);padding:var(--space-lg);background:#fdfefe}
.figure figcaption{margin-top:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.7}
.rworks{margin-top:var(--space-xl);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-md)}
.work{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg)}
.work__no{display:block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.1em;color:var(--c-brass);margin-bottom:var(--space-2xs)}
.work__title{font-size:var(--text-lg)}
.work__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}


/* 図版：狭い画面では縮小しすぎて中の文字が読めなくなるため、図だけ横スクロールさせる
   （ページ全体は横スクロールさせない。比較表と同じ扱い） */
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;--minw:600px}
.figscroll svg{min-width:var(--minw)}
.fighint{display:none;margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3)}
@media (max-width:700px){.fighint{display:block}}

/* ---------- 提供範囲の対応表（出典 preview/service-consulting.html） ---------- */
.scope{margin-top:var(--space-2xl)}
.scope__title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
.scope__lead{margin-bottom:var(--space-md);color:var(--c-ink-2);font-size:var(--text-sm);max-width:62ch}
.scopewrap{overflow-x:auto;border:var(--rule);border-radius:var(--radius-md);background:#fdfefe}
.scopetable{width:100%;min-width:420px;border-collapse:collapse;font-size:var(--text-sm)}
.scopetable th,.scopetable td{padding:var(--space-sm) var(--space-md);text-align:left;
  vertical-align:middle;border-bottom:var(--rule);line-height:1.7}
.scopetable thead th{background:var(--c-navy-900);color:var(--c-accent-ink);font-weight:700;
  font-size:var(--text-xs);letter-spacing:.06em;border-bottom:0}
.scopetable thead th:last-child,.scopetable td:last-child{text-align:center;width:7em}
.scopetable tbody th{font-weight:400;color:var(--c-ink-2)}
.scopetable tbody tr:last-child th,.scopetable tbody tr:last-child td{border-bottom:0}
.scopetable tbody tr:hover{background:var(--c-paper)}
.mk{font-family:var(--font-display);font-size:1.125rem;font-weight:700;line-height:1}
.mk--o{color:var(--c-navy)}
.mk--t{color:var(--c-brass)}
.mk--x{color:var(--c-ink-3)}
.scope__legend{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);margin-top:var(--space-md);
  font-size:var(--text-xs);color:var(--c-ink-3)}
.scope__legend span{display:inline-flex;align-items:center;gap:6px}
.scope__note{margin-top:var(--space-md);padding:var(--space-md);background:var(--c-navy-100);
  border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--c-navy-900);line-height:1.85}

/* ---------- 成果（出典 preview/service-consulting.html） ---------- */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--c-paper-3)}
.result{background:var(--c-paper);padding:var(--space-lg)}
.result__title{font-size:var(--text-lg);color:var(--c-navy-900)}
.result__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}

/* ---------- 料金（出典 preview/service-consulting.html） ---------- */
.pricebox{max-width:var(--w-prose);border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;overflow:hidden}
.pricebox__head{background:var(--c-navy-900);color:var(--c-paper);padding:var(--space-lg)}
.pricebox__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.pricebox__amount{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-xl);
  color:var(--c-paper);line-height:1.5}
.pricebox__note{margin-top:var(--space-2xs);font-size:var(--text-xs);color:#c2d3e2}
.pricebox table{width:100%;border-collapse:collapse}
.pricebox th,.pricebox td{padding:var(--space-sm) var(--space-lg);text-align:left;vertical-align:top;
  font-size:var(--text-sm);border-bottom:var(--rule);line-height:1.85}
.pricebox th{width:9em;font-weight:700;color:var(--c-ink-3);white-space:nowrap}
.pricebox td{color:var(--c-ink-2)}
.pricebox tr:last-child th,.pricebox tr:last-child td{border-bottom:0}

/* ---------- FAQ（サービス個別・簡易版）（出典 preview/service-consulting.html） ---------- */
.faq{max-width:var(--w-prose)}
.faq__item{border-bottom:var(--rule);padding-block:var(--space-lg)}
.faq__item:first-child{border-top:var(--rule)}
.faq__q{display:flex;gap:var(--space-sm);font-size:var(--text-lg);line-height:var(--lh-tight)}
.faq__mark{font-family:var(--font-display);font-weight:700;color:var(--c-brass);flex:none;line-height:1.4}
.faq__a{display:flex;gap:var(--space-sm);margin-top:var(--space-sm);color:var(--c-ink-2);font-size:var(--text-sm);line-height:1.9}
.faq__a .faq__mark{color:var(--c-navy);font-size:var(--text-lg)}

/* ---------- 関連サービス（出典 preview/service-consulting.html） ---------- */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-md)}
.rcard{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-md);
  transition:border-color var(--dur-base) var(--ease-out)}
.rcard:hover{border-color:var(--c-navy-600)}
.rcard__cat{display:block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;color:var(--c-brass);margin-bottom:var(--space-3xs)}
.rcard__title{font-size:var(--text-sm);line-height:1.6}
.rcard__title a{color:var(--c-ink);text-decoration:none}
.rcard:hover .rcard__title a{color:var(--c-navy)}
.othersvc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-md)}
.osvc{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg);
  display:flex;flex-direction:column;gap:var(--space-2xs);transition:border-color var(--dur-base) var(--ease-out)}
.osvc:hover{border-color:var(--c-navy-600)}
.osvc__no{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;color:var(--c-brass)}
.osvc__title{font-size:var(--text-base)}
.osvc__title a{color:var(--c-ink);text-decoration:none}
.osvc:hover .osvc__title a{color:var(--c-navy)}
.osvc__price{font-size:var(--text-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.osvc__more{margin-top:auto;padding-top:var(--space-sm)}

/* ---------- ページ末尾CTA（サービス個別）（出典 preview/service-consulting.html） ---------- */
.pagecta{background:var(--c-navy-900);color:var(--c-paper);border-radius:var(--radius-lg);
  padding:var(--space-xl);max-width:var(--w-prose)}
.pagecta__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.pagecta__title{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-2xl);color:var(--c-paper);line-height:1.45}
.pagecta__desc{margin-top:var(--space-sm);font-size:var(--text-sm);color:#c2d3e2;max-width:46ch}
.pagecta__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.pagecta__note{margin-top:var(--space-sm);font-size:var(--text-xs);color:#9fb8cd}

/* ── 支援事例 ── */

/* ---------- 事例インデックス（出典 preview/works.html） ---------- */
.idx{border-block:var(--rule);background:var(--c-paper)}
.idx__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs);padding-block:var(--space-sm)}
.idx__link{display:inline-flex;align-items:center;min-height:38px;padding:0 var(--space-md);
  font-size:var(--text-sm);font-weight:500;color:var(--c-ink-2);text-decoration:none;line-height:1;
  white-space:nowrap;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);background:#fdfefe;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.idx__link:hover{color:var(--c-navy);border-color:var(--c-navy-600)}

/* ---------- 事例本体（出典 preview/works.html） ---------- */
.case{scroll-margin-top:calc(var(--header-h) + 16px)}
.case+.case{margin-top:var(--space-4xl);padding-top:var(--space-3xl);border-top:var(--rule-strong)}
.case__no{display:block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;
  letter-spacing:.14em;color:var(--c-brass);margin-bottom:var(--space-sm)}
.case__title{font-size:clamp(1.375rem,1.05rem + 1.3vw,1.875rem);color:var(--c-navy-900);max-width:26ch}
.case__tags{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-md)}
/* タグはリンクではないので、狭い画面では折り返してよい（nowrapだと画面外にはみ出す） */
.ctag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:700;
  padding:5px var(--space-2xs);line-height:1.6;border-radius:var(--radius-sm);
  overflow-wrap:anywhere;min-width:0;max-width:100%}
.ctag--biz{background:var(--c-navy-100);color:var(--c-navy-900)}
.ctag--svc{background:transparent;color:var(--c-brass);border:1px solid rgba(140,109,31,.4)}
.case__issue{margin-top:var(--space-lg);max-width:var(--w-prose);
  border-left:2px solid var(--c-navy);padding-left:var(--space-lg)}
.case__issueLabel{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;color:var(--c-ink-3)}
.case__issueText{margin-top:var(--space-3xs);font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--c-navy-900);line-height:1.7}

/* Before / After */
.ba{margin-top:var(--space-xl);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--c-paper-3);border:var(--rule);border-radius:var(--radius-md);overflow:hidden}
@media (max-width:760px){.ba{grid-template-columns:minmax(0,1fr)}}
.ba__col{background:#fdfefe;padding:var(--space-lg)}
.ba__col--after{background:var(--c-navy-100)}
.ba__label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;margin-bottom:var(--space-sm)}
.ba__col--before .ba__label{color:var(--c-ink-3)}
.ba__col--after .ba__label{color:var(--c-brass)}
.ba li{display:flex;gap:var(--space-2xs);font-size:var(--text-sm);line-height:1.85}
.ba li+li{margin-top:var(--space-sm)}
.ba__col--before li{color:var(--c-ink-2)}
.ba__col--after li{color:var(--c-navy-900)}
.ba li::before{content:"";flex:none;width:5px;height:5px;margin-top:11px;border-radius:50%}
.ba__col--before li::before{background:#a9bccc}
.ba__col--after li::before{background:var(--c-brass)}

/* 施策 */
.acts{margin-top:var(--space-xl);max-width:var(--w-prose);display:grid;gap:var(--space-lg)}
.act{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);align-items:start}
.act__no{font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);font-weight:500;
  line-height:1;color:var(--c-navy-100);font-variant-numeric:tabular-nums;min-width:1.2em;text-align:center}
.act__title{font-size:var(--text-lg);color:var(--c-navy-900)}
.act__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.9}
.acts__head{font-size:var(--text-xl);margin-bottom:var(--space-2xs)}

/* 担当者コメント */
.voice{margin-top:var(--space-xl);max-width:var(--w-prose);background:var(--c-paper-2);
  border-left:2px solid var(--c-brass);border-radius:var(--radius-md);padding:var(--space-lg)}
.voice__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);margin-bottom:var(--space-2xs)}
.voice__body{font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.95}
.case__note{margin-top:var(--space-md);max-width:var(--w-prose);font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.8}

/* ---------- 業界一覧（出典 preview/works.html） ---------- */
.inds{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-xl)}
.inds__title{font-size:var(--text-lg);margin-bottom:var(--space-md)}
.inds__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-lg)}
.inds__list li{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--c-ink-2)}
.inds__list li::before{content:"";width:4px;height:4px;background:var(--c-brass);flex:none}
.inds__note{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:var(--rule);
  font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.9}

/* ── ご依頼の流れ ── */

/* ---------- 縦のタイムライン（出典 preview/flow.html） ---------- */
.tl{position:relative;max-width:860px}
.tl::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:2px;background:var(--c-navy-100)}
@media (max-width:640px){.tl::before{left:17px}}
.tstep{position:relative;padding-left:76px}
.tstep+.tstep{margin-top:var(--space-2xl)}
@media (max-width:640px){.tstep{padding-left:52px}}
.tstep__mark{position:absolute;left:0;top:2px;width:48px;height:48px;border-radius:50%;
  background:var(--c-navy);color:var(--c-accent-ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:640px){.tstep__mark{width:36px;height:36px}}
.tstep__markLabel{font-size:9px;font-weight:700;letter-spacing:.06em;opacity:.8}
@media (max-width:640px){.tstep__markLabel{display:none}}
.tstep__markNo{font-family:var(--font-display);font-size:1.125rem;font-weight:700}
.tstep__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm)}
.tstep__title{font-size:var(--text-xl);color:var(--c-navy-900)}
/* 所要時間の札。
   時計アイコンに寸法を与えていなかったため、SVGがフレックスの伸びに引きずられて
   ステップごとに12px〜62pxとばらついていた（2026-08-07にNの指摘で判明）。
   アイコンを固定寸にし、文字は折り返さずアイコンの隣から1行で始める。
   これで札の高さが5ステップとも揃う（横幅だけが文字数ぶん伸びる）。 */
.tstep__time{display:inline-flex;align-items:center;flex:none;gap:6px;
  font-size:var(--text-sm);font-weight:700;white-space:nowrap;
  color:var(--c-brass);border:1px solid rgba(140,109,31,.4);border-radius:var(--radius-sm);
  padding:4px 10px;line-height:1.5}
.tstep__time svg{width:16px;height:16px;flex:none}
.tstep__desc{margin-top:var(--space-sm);font-size:var(--text-base);color:var(--c-ink-2);line-height:1.9;max-width:60ch}
.tstep__grid{margin-top:var(--space-lg);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--c-paper-3);border:var(--rule);border-radius:var(--radius-md);overflow:hidden}
@media (max-width:760px){.tstep__grid{grid-template-columns:minmax(0,1fr)}}
.tcell{background:#fdfefe;padding:var(--space-md)}
.tcell--fix{background:var(--c-navy-100)}
/* 「弊社がすること」など3つの小見出し。
   12pxでは本文に埋もれて、3列の区別が読み取れなかった。
   最も長い「貴社にお願いすること」（10文字）が3列表示の最小幅168pxでも
   折り返さない上限が約15pxなので、14px＋字間を詰めて余裕を持たせている。 */
.tcell__label{display:block;font-size:var(--text-sm);font-weight:700;letter-spacing:.04em;
  color:var(--c-ink-3);margin-bottom:8px}
.tcell--fix .tcell__label{color:var(--c-brass)}
.tcell__body{font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.85}
.tcell--fix .tcell__body{color:var(--c-navy-900)}
.gate{max-width:860px;margin-block:var(--space-2xl);margin-left:76px;
  background:var(--c-navy-900);color:var(--c-paper);border-radius:var(--radius-lg);padding:var(--space-xl)}
@media (max-width:640px){.gate{margin-left:52px;padding:var(--space-lg)}}
.gate__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.gate__title{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-xl);color:var(--c-paper);line-height:1.5}
.gate__body{margin-top:var(--space-sm);font-size:var(--text-sm);color:#c2d3e2;line-height:1.9}

/* ── 資料請求・完了 ── */

/* ---------- 資料の中身（出典 preview/document.html） ---------- */
.toc{border:var(--rule);border-top:2px solid var(--c-brass);border-radius:var(--radius-md);
  background:#fdfefe;padding:var(--space-xl)}
.toc__meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);margin-bottom:var(--space-md);
  font-size:var(--text-sm);color:var(--c-ink-3)}
.toc__meta span{display:inline-flex;align-items:center;gap:6px}
.toc__meta svg{width:16px;height:16px;flex:none;color:var(--c-brass)}
.toc__title{font-size:var(--text-xl);margin-bottom:var(--space-lg)}
.toc__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-md);align-items:start}
.toc__item+.toc__item{margin-top:var(--space-md);padding-top:var(--space-md);border-top:var(--rule)}
.toc__no{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--c-navy-100);
  font-variant-numeric:tabular-nums;line-height:1.4;min-width:1.4em}
.toc__name{font-size:var(--text-lg);color:var(--c-ink)}
.toc__desc{margin-top:4px;font-size:var(--text-base);color:var(--c-ink-2);line-height:1.85}

/* 5項目を1列で全幅に並べると1行が長くなりすぎるので、幅があるときは2列にする。
   2列だと1項目が縦に切られる位置が揃わないため、罫線は各項目の上に引く。 */
@media (min-width:760px){
  .toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-3xl);row-gap:0}
  .toc__meta,.toc__title{grid-column:1/-1}
  .toc__title{margin-bottom:0}
  .toc__item{padding-top:var(--space-md);border-top:var(--rule)}
  .toc__item,.toc__item+.toc__item{margin-top:var(--space-md)}
}
.toc__hl{background:linear-gradient(180deg,transparent 62%,rgba(201,169,97,.4) 62%,rgba(201,169,97,.4) 92%,transparent 92%);font-weight:700}
.formhead{margin-top:var(--space-2xl);margin-bottom:var(--space-lg);max-width:var(--w-prose)}
.formhead__title{font-size:var(--text-xl)}
.formhead__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.8}

/* ---------- 完了ページ（出典 preview/document-thanks.html） ---------- */
.done{max-width:640px;margin-inline:auto;text-align:center;padding-block:var(--space-3xl) var(--space-4xl)}
.done__mark{width:64px;height:64px;margin:0 auto var(--space-lg);border-radius:50%;
  background:var(--c-navy-100);display:flex;align-items:center;justify-content:center}
.done__mark svg{width:30px;height:30px;color:var(--c-navy)}
.done__title{font-size:var(--text-2xl);color:var(--c-navy-900)}
.done__lead{margin-top:var(--space-md);color:var(--c-ink-2);line-height:1.9}
.docbox{margin-top:var(--space-xl);border:var(--rule);border-top:2px solid var(--c-brass);
  border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-xl)}
.dl__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass)}
.dl__name{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-lg);color:var(--c-navy-900);line-height:1.5}
.dl__meta{margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--c-ink-3)}
.dl__action{margin-top:var(--space-lg)}
.dl__note{margin-top:var(--space-md);padding-top:var(--space-md);border-top:var(--rule);
  font-size:var(--text-xs);color:var(--c-ink-3);line-height:1.8;text-align:left}
.next{margin-top:var(--space-2xl);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);text-align:left}
@media (max-width:640px){.next{grid-template-columns:minmax(0,1fr)}}
.next__card{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-lg);
  transition:border-color var(--dur-base) var(--ease-out)}
.next__card:hover{border-color:var(--c-navy-600)}
.next__title{font-size:var(--text-base)}
.next__desc{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--c-ink-2);line-height:1.8}
.next__more{margin-top:var(--space-md)}

/* ---------- トップだけの組み（下層より一段大きくする） ----------
   トップは読ませるページではなく、視線を運ぶページなので、
   見出しを一段大きく・行間をやや詰めた組みに差し替える。
   トークンの上書きなので、body.home の中は全部これに従う。 */
body.home{
  --text-xl:   clamp(1.25rem, .9rem + 1.1vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --text-3xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --lh-display: 1.28;
  --lh-tight:   1.45;
}

/* セクションの上下余白を全部同じにしない（hallmark minor）。
   96 / 128px を交互に振ってリズムを付ける。 */
body.home .section:nth-of-type(even){ padding-block:var(--space-4xl) }

/* ---------- ステップ一覧 ----------
   もとは <ol><li> だったが、中の見出し・説明文をブロックとして
   編集できるようにするため <div> に変えた。
   .flow は grid なので、子が li でも div でも並び方は変わらない。 */
.flow > .flow__item{ list-style:none }
