@charset "utf-8";
/* ============================================================
   ハローサービス 採用サイト／LP  共通スタイル  v2（白基調・コーポレートカラー版）
   準拠: recruit-web/_design/デザイン言語.md
   ブランド色は www.halloservice.com のCSSから実測（#FABD00 / #F18D00）
   中立色は 2026-02-14 撮影データからの抽出値
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root{
  /* ブランド（コーポレートカラー実測値） */
  --y-500:#FABD00;   /* 主。面・ハイライト・CTA。上に載せる文字は必ず墨 */
  --y-400:#FFCE2E;
  --y-300:#FFDC00;
  --y-600:#E3A800;   /* ホバー */
  --o-500:#F18D00;   /* 副。大きめの装飾 */
  --o-700:#9A5A00;   /* 白地の小さい文字用。#B86B00 は 4.08:1 で AA 未達だった */

  /* 墨 ink — 撮影データの影 #21211E 由来。青みゼロのウォームブラック */
  --ink-900:#1C1A17;
  --ink-800:#2B2724;
  --ink-700:#3E3934;
  --ink-500:#5A524C;   /* 旧#6E645E */
  --ink-400:#6E645E;   /* 旧#8C8078 は白地で 3.84:1（AA未達）だった */
  --ink-300:#8C8078;   /* 暗面でのみ使う */

  /* 紙 paper */
  --white:#FFFFFF;
  --paper:#F7F4F0;
  --paper-2:#EFEAE4;
  --line:#E2DCD5;      /* 白地の罫線 */
  --line-2:#D5CDC5;

  /* 暗面（ページ全体の1〜2箇所だけ） */
  --sumi-900:#1C1A17;
  --sumi-800:#262320;
  --sumi-600:#403A34;
  --sumi-txt:#F2EEE8;

  /* 書体 ─ 4ファミリーを「役割」で分ける
     ※ generic(sans-serif/serif)を途中に挟むと、それが全ての漢字仮名を先に捕まえ、
        後続の和文書体が一切効かなくなる。generic は必ずスタック最後尾のみ。 */
  --f-lat:"Archivo";                                                  /* 欧文・数字（可変幅） */
  --f-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic";/* 事実：ゴシック */
  --f-mc:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho";        /* 語り：本文明朝 */
  --f-dsp:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho";    /* 主張：太明朝 */

  --f-body:var(--f-lat),var(--f-jp),sans-serif;
  --f-read:var(--f-lat),var(--f-mc),serif;
  --f-display:var(--f-lat),var(--f-dsp),serif;
  --f-nm:var(--f-lat),sans-serif;

  /* 級数 */
  /* 第一声を最大に。以降は約1.5倍の等比で降りる（ジャンプ率を設計する） */
  --t-hero:clamp(2.05rem,1.6rem + 2.1vw,3.4rem);      /* 390:33 → 1440:54（分割ヒーローの半幅に収める） */
  --t-h1:clamp(1.6rem,1.28rem + 1.42vw,2.75rem);      /* 390:39 → 1440:44 */
  --t-h2:clamp(1.3rem,1.14rem + 0.72vw,1.875rem);     /* 390:24 → 1440:30 */
  --t-h3:clamp(1.06rem,1rem + 0.3vw,1.25rem);         /* 390:18 → 1440:20 */
  --t-lead:clamp(1.125rem,1.05rem + 0.34vw,1.25rem);  /* 18 → 20 */
  --t-body:clamp(1.0625rem,1rem + 0.28vw,1.125rem);   /* 17 → 18 */
  --t-sm:0.9375rem;   /* 15 補足（旧14） */
  --t-cap:0.875rem;   /* 14 注記（旧13） */
  --t-label:0.75rem;  /* 12 欧文ラベル（旧11） */
  --t-num-xl:clamp(4rem,14vw,11rem);
  --t-num-l:clamp(3rem,8vw,6rem);
  --t-num-m:clamp(2.2rem,5vw,3.6rem);

  /* 余白 */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px; --sp10:128px; --sp11:160px;

  --wrap:1240px;
  --rail-ref:1240px;   /* レールの基準幅。セクションのコンテナ幅に合わせて上書きする */
  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(88px,11vw,180px);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.9s;
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--anchor-offset,100px)}
body{
  font-family:var(--f-body);font-weight:400;font-size:var(--t-body);
  line-height:1.95;letter-spacing:.04em;
  color:var(--ink-900);background:var(--white);
  text-autospace:normal;   /* 和欧間に四分アキ。Chromeの既定はno-autospace */
  line-break:strict;       /* 禁則を厳格に */
  /* 日本語を文節で折り返す。これが無いと「歩|合」「直|接」のように語中で割れる。
     未対応ブラウザでは無視されるだけなので安全に足せる。 */
  word-break:auto-phrase;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--y-500);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--o-700);outline-offset:3px}

/* ---------- 3. レイアウト ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:880px}
/* レールの基準をセクションのコンテナ幅に合わせる（本文への食い込みを防ぐ） */
.sec--wide{--rail-ref:1560px}
.sec--narrow{--rail-ref:880px}
.wrap--wide{max-width:1560px}

.sec{position:relative;padding-block:var(--sec-y)}
.sec--tight{padding-block:clamp(60px,7.5vw,108px)}

/* 4つのレジスター。暗面はページ全体で1〜2箇所だけに抑える */
.sec--paper{background:var(--white);color:var(--ink-900)}          /* 白 */
.sec--paper-050{background:var(--paper);color:var(--ink-900)}      /* 紙 */
.sec--brand{background:var(--y-500);color:var(--ink-900)}          /* 黄ベタ */
.sec--sumi,.sec--sumi-850{background:var(--sumi-900);color:var(--sumi-txt)}

.grid{display:grid;grid-template-columns:1fr;gap:var(--sp6)}
@media(min-width:900px){
  .grid{grid-template-columns:repeat(12,1fr);gap:var(--sp5)}
  .col-2-8{grid-column:2/9}
  .col-2-9{grid-column:2/10}
  .col-1-6{grid-column:1/7}
  .col-7-12{grid-column:7/13}
  .col-2-7{grid-column:2/8}
  .col-8-12{grid-column:8/13}
}

/* ---------- 4. 章見出し ---------- */
.idx{
  display:flex;align-items:center;gap:var(--sp4);
  font-family:var(--f-lat),sans-serif;font-weight:500;font-size:.95rem;
  letter-spacing:.14em;margin-bottom:var(--sp5);color:var(--ink-500);
}
.idx::after{content:"";flex:1;height:1px;background:var(--line-2)}
.idx b{font-weight:700;font-stretch:92%;color:var(--o-700);font-size:1.15em}
.idx .jp{font-family:var(--f-jp),sans-serif;font-weight:500;font-size:.88rem;letter-spacing:.1em;color:var(--ink-400)}
.sec--brand .idx{color:var(--ink-800)}
.sec--brand .idx::after{background:rgba(28,26,23,.28)}
.sec--brand .idx b{color:var(--ink-900)}
.sec--sumi .idx{color:var(--ink-300)}
.sec--sumi .idx::after{background:var(--sumi-600)}
.sec--sumi .idx b{color:var(--y-500)}

/* 縦組みラベル（デスクトップのみ） */
.rail{display:none}
@media(min-width:1100px){
  .rail{
    display:block;position:absolute;top:var(--sec-y);left:max(20px,calc((100vw - var(--rail-ref))/2 - 44px));
    writing-mode:vertical-rl;text-orientation:mixed;
    font-family:var(--f-dsp),serif;font-size:.85rem;font-weight:800;letter-spacing:.34em;color:var(--ink-400);
    padding-block:var(--sp5);
  }
  .rail::before{content:"";position:absolute;top:0;left:50%;width:2px;height:var(--sp5);background:var(--y-500)}
  .sec--sumi .rail{color:var(--ink-300)}
  .sec--brand .rail{color:var(--ink-800)}
  .sec--brand .rail::before{background:var(--ink-900)}
}

.eyebrow{
  font-family:var(--f-lat),sans-serif;font-size:var(--t-label);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--o-700);
  display:flex;align-items:center;gap:.9em;margin-bottom:var(--sp4);flex-wrap:wrap;
}
/* 欧文ラベルの隣に和文の小ラベルを添える＝章の切替を3段階で示す */
.eyebrow .jp{font-family:var(--f-jp),sans-serif;font-weight:500;letter-spacing:.09em;text-transform:none;color:var(--ink-400)}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--y-500);flex:none}
.sec--sumi .eyebrow{color:var(--y-500)}
.sec--brand .eyebrow{color:var(--ink-900)}
.sec--brand .eyebrow::before{background:var(--ink-900)}

/* 主張＝太明朝。h2でゴシックに落とし、書体の切替そのものを階層の切替にする */
.h1{
  font-family:var(--f-display);font-weight:800;
  font-size:var(--t-h1);line-height:1.42;letter-spacing:-.005em;
}
.h2{font-family:var(--f-body);font-weight:700;font-size:var(--t-h2);line-height:1.55;letter-spacing:.01em}
.h3{font-family:var(--f-body);font-weight:700;font-size:var(--t-h3);line-height:1.65;letter-spacing:.02em}
.lead{font-size:var(--t-lead);line-height:1.95;letter-spacing:.04em}
.sub{font-size:var(--t-sm);line-height:1.85;color:var(--ink-500)}
.cap{font-size:var(--t-cap);letter-spacing:.08em;line-height:1.7;color:var(--ink-400)}
/* 見出し末尾の句点・行頭の括弧が作る穴を潰す（hanging-punctuationはChrome非対応） */
.h1 .pp,.hero h1 .pp{margin-right:-.45em}
.h1 .pq,.hero h1 .pq{margin-left:-.4em}
.sec--sumi .sub,.sec--sumi .cap{color:var(--ink-300)}
.sec--brand .sub,.sec--brand .cap{color:var(--ink-800)}
.mt3{margin-top:var(--sp3)} .mt4{margin-top:var(--sp4)} .mt5{margin-top:var(--sp5)}
.mt6{margin-top:var(--sp6)} .mt7{margin-top:var(--sp7)} .mt8{margin-top:var(--sp8)}
.mt9{margin-top:var(--sp9)}
.shu{color:var(--o-700)}
.sec--sumi .shu{color:var(--y-500)}
.nowrap{white-space:nowrap}
.measure{max-width:34em}
.measure-wide{max-width:min(760px,100%)}
.h1,.h2,.h3,.hero h1{text-wrap:balance;line-break:strict;overflow-wrap:normal}
.lead,.essay p,.card p,.faq-a p,.sub{text-wrap:pretty;line-break:strict}
/* 短い説明文は text-wrap:pretty で「最終行が1〜3文字」を機械的に回避する。
   手で改行位置を打つより、幅が変わっても崩れない。 */
.stat dd,.card p,.card h3,.choice p,.choice h3,.steps p,.jbox li,.tbl td,.note,.faq summary,.f-note{
  text-wrap:pretty;overflow-wrap:normal;line-break:strict;
}

/* 黄色のマーカー（コーポレートカラーの主な露出面） */
.ul-shu{
  background-image:linear-gradient(transparent 58%,var(--y-500) 58%,var(--y-500) 96%,transparent 96%);
  background-repeat:no-repeat;background-size:100% 100%;
  padding-inline:.08em;
}
.sec--sumi .ul-shu{
  background-image:linear-gradient(transparent 58%,rgba(250,189,0,.42) 58%,rgba(250,189,0,.42) 96%,transparent 96%);
}
.sec--brand .ul-shu{
  background-image:linear-gradient(transparent 58%,var(--white) 58%,var(--white) 96%,transparent 96%);
}

/* ---------- 5. 数字 ---------- */
/* Archivoの数字は和文書体の自前数字と字面高の差が2〜6%。Oswaldは15〜18%高く必ず浮いた */
.num{
  font-family:var(--f-lat),sans-serif;font-weight:700;font-stretch:86%;
  line-height:.84;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.num--xl{font-size:var(--t-num-xl)}
.num--l{font-size:var(--t-num-l)}
.num--m{font-size:var(--t-num-m)}
/* 単位（日・%・万円）は和文ゴシックへ切り替える。数値と単位が別書体だと読み取りが速い */
.num small{
  font-family:var(--f-jp),sans-serif;font-weight:700;font-stretch:normal;
  font-size:.28em;letter-spacing:.05em;vertical-align:.16em;margin-left:.1em;
}
/* 見出し・本文の中に出る数字 */
.n{font-family:var(--f-lat),sans-serif;font-stretch:88%;font-weight:inherit;letter-spacing:-.01em;font-variant-numeric:proportional-nums}
/* 縦に並ぶ数値は等幅で。桁が揃うことが「検算できる」の裏付けになる */
.tbl td,.stat,.formula,.stats{font-variant-numeric:tabular-nums}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--white);padding:var(--sp6) var(--sp5) var(--sp5)}
.stat dt{font-size:.8rem;letter-spacing:.16em;font-family:var(--f-lat),sans-serif;font-weight:300;color:var(--ink-400);margin-bottom:var(--sp3)}
.stat .num{color:var(--ink-900);display:block;position:relative}
.stat .num::after{content:"";display:block;width:34px;height:4px;background:var(--y-500);margin-top:.22em}
.stat dd{font-size:var(--t-sm);line-height:1.75;letter-spacing:.03em;margin-top:var(--sp3);color:var(--ink-500)}
.sec--paper-050 .stat{background:var(--paper)}
.sec--brand .stats{background:rgba(28,26,23,.22);border-color:rgba(28,26,23,.22)}
.sec--brand .stat{background:var(--y-500)}
.sec--brand .stat dt{color:rgba(28,26,23,.6)}
.sec--brand .stat dd{color:var(--ink-800)}
.sec--brand .stat .num::after{background:var(--ink-900)}
.sec--sumi .stats{background:var(--sumi-600);border-color:var(--sumi-600)}
.sec--sumi .stat{background:var(--sumi-900)}
.sec--sumi .stat .num{color:var(--y-500)}
.sec--sumi .stat .num::after{background:var(--y-500)}
.sec--sumi .stat dd{color:var(--ink-300)}

/* ---------- 6. ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:58px;padding:0 var(--sp7);border-radius:999px;
  font-weight:700;font-size:.94rem;letter-spacing:.06em;
  transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
/* 主CTA＝コーポレート黄 × 墨文字（コントラスト比 約11:1） */
.btn--primary{background:var(--y-500);color:var(--ink-900);box-shadow:0 0 0 1px var(--y-600) inset}
.btn--primary:hover{background:var(--y-400)}
.btn--ghost{border:1.5px solid currentColor;color:inherit}
.btn--ghost:hover{background:var(--ink-900);color:var(--white);border-color:var(--ink-900)}
.sec--sumi .btn--ghost:hover{background:var(--sumi-txt);color:var(--ink-900);border-color:var(--sumi-txt)}
.sec--brand .btn--primary{background:var(--ink-900);color:var(--y-500);box-shadow:none}
.sec--brand .btn--primary:hover{background:var(--ink-800)}
.btn--sm{min-height:46px;padding:0 var(--sp5);font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp4)}
.btn .arw{font-family:var(--f-lat),sans-serif;font-weight:300;transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- 7. 写真 ---------- */
figure{margin:0}
.fig img{width:100%;object-fit:cover}
.fig figcaption{margin-top:var(--sp3);font-size:var(--t-cap);letter-spacing:.08em;color:var(--ink-400)}
.sec--sumi .fig img,.ph-sumi img{filter:contrast(1.04) saturate(.88) brightness(.96)}
.ratio{position:relative;overflow:hidden}
.ratio>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.r-32{aspect-ratio:3/2} .r-11{aspect-ratio:1/1} .r-23{aspect-ratio:2/3}
.r-43{aspect-ratio:4/3} .r-169{aspect-ratio:16/9} .r-45{aspect-ratio:4/5}
.bleed{width:100%}
.bleed img{height:clamp(240px,42vw,540px);object-fit:cover;object-position:44% 30%}

/* ---------- 8. 引用・読み物 ---------- */
.quote{
  font-family:var(--f-read);font-weight:700;   /* 500 だと画線が細く読みにくい */
  font-size:clamp(1.14rem,1.02rem + 0.55vw,1.42rem);line-height:2;letter-spacing:.04em;
  padding-left:var(--sp5);border-left:4px solid var(--y-500);
}
.quote cite{display:block;margin-top:var(--sp4);font-family:var(--f-jp);font-style:normal;font-size:.8rem;letter-spacing:.1em;color:var(--ink-400)}
/* 長文は必ずゴシック。明朝19px/500の白抜きは横画が飛んで読めなかった */
.essay{font-family:var(--f-body);font-weight:400;font-size:clamp(1.0625rem,1rem + 0.34vw,1.1875rem);line-height:2.05;letter-spacing:.03em;max-width:30em}
.sec--sumi .essay,.sec--sumi-850 .essay{font-weight:500}   /* 白抜きは1段太く */
.essay p+p{margin-top:1.9em}
.essay strong{font-weight:700;background-image:linear-gradient(transparent 58%,var(--y-500) 58%,var(--y-500) 96%,transparent 96%)}
.sec--sumi .essay strong{color:var(--y-500);background:none}
.sign{font-family:var(--f-read);font-weight:700;font-size:.92rem;letter-spacing:.12em;text-align:right;margin-top:var(--sp7)}
.sign span{display:block;font-size:.72rem;letter-spacing:.16em;color:var(--ink-400);margin-bottom:.4em}

/* ---------- 9. カード（角0・罫線のみ） ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.cards--2{grid-template-columns:repeat(2,1fr)}.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);padding:var(--sp6)}
.sec--paper-050 .card{background:var(--paper)}
.sec--sumi .cards{background:var(--sumi-600);border-color:var(--sumi-600)}
.sec--sumi .card{background:var(--sumi-900)}
.sec--brand .cards{background:rgba(28,26,23,.22);border-color:rgba(28,26,23,.22)}
.sec--brand .card{background:var(--y-500)}
.card .kn{font-family:var(--f-lat),sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.16em;color:var(--ink-900);display:inline-block;margin-bottom:var(--sp3);background:var(--y-500);padding:.15em .7em}
.sec--sumi .card .kn{background:var(--y-500);color:var(--ink-900)}
.sec--brand .card .kn{background:var(--ink-900);color:var(--y-500)}
.card h3{font-size:var(--t-h3);font-weight:700;line-height:1.55;margin-bottom:var(--sp3)}
.card p{font-size:var(--t-sm);line-height:1.9;color:var(--ink-700)}
.sec--sumi .card p{color:var(--ink-300)}
.sec--brand .card p{color:var(--ink-800)}

/* リスト */
.list-pt li{position:relative;padding-left:1.6em;margin-top:var(--sp4)}
.list-pt li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:3px;background:var(--y-500)}
.list-pt li b{display:block;font-weight:700;margin-bottom:.2em}
.sec--brand .list-pt li::before{background:var(--ink-900)}

/* ---------- 10. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.sec--sumi .faq,.sec--sumi .faq details{border-color:var(--sumi-600)}
.faq summary{
  display:flex;gap:var(--sp4);align-items:flex-start;
  padding:var(--sp5) 44px var(--sp5) 0;position:relative;cursor:pointer;
  font-family:var(--f-body);font-weight:700;font-size:1.0625rem;line-height:1.7;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--o-700)}
.faq summary .q{
  font-family:var(--f-lat),sans-serif;font-weight:700;font-stretch:90%;
  font-variant-numeric:tabular-nums;flex:none;font-size:.94rem;line-height:1;letter-spacing:.02em;
  background:var(--y-500);color:var(--ink-900);padding:.5em .6em;margin-top:.32em;
}
.faq summary::after{content:"";position:absolute;right:8px;top:calc(var(--sp5) + .85em);width:14px;height:2px;background:var(--o-700);transition:transform .35s var(--ease)}
.faq summary::before{content:"";position:absolute;right:14px;top:calc(var(--sp5) + .25em);width:2px;height:14px;background:var(--o-700);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.sec--sumi .faq summary::after,.sec--sumi .faq summary::before{background:var(--y-500)}
.faq details[open] summary::before{opacity:0;transform:rotate(90deg)}
.faq-a{padding:0 44px var(--sp6) calc(2.6em + var(--sp4));font-size:var(--t-body);line-height:1.95;color:var(--ink-700)}
.sec--sumi .faq-a{color:var(--ink-300)}
.faq-a p+p{margin-top:1em}

/* ---------- 11. 表 ---------- */
.tbl{font-size:var(--t-body);line-height:1.9}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:var(--sp5) 0;border-bottom:1px solid var(--line)}
.sec--sumi .tbl th,.sec--sumi .tbl td{border-color:var(--sumi-600)}
.tbl th{width:30%;min-width:8em;font-weight:700;padding-right:var(--sp5);letter-spacing:.06em}
@media(max-width:640px){
  .tbl th,.tbl td{display:block;width:100%;padding-block:var(--sp3)}
  .tbl th{border:0;padding-bottom:0;color:var(--o-700);font-size:.8rem;letter-spacing:.12em}
  .sec--sumi .tbl th{color:var(--y-500)}
  .tbl td{padding-top:var(--sp2);padding-bottom:var(--sp5)}
}
.tbl td small{display:block;font-size:var(--t-cap);color:var(--ink-500);margin-top:.3em}
.sec--sumi .tbl td small{color:var(--ink-400)}

/* ---------- 12. ヘッダー（白基調） ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp4) var(--gut);
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:padding .4s var(--ease),box-shadow .4s var(--ease);
}
.hd.is-stuck{padding-block:var(--sp3);box-shadow:0 1px 18px rgba(28,26,23,.07)}
.hd__logo{display:flex;align-items:baseline;gap:.6em;color:var(--ink-900)}
.hd__logo b{font-size:1rem;font-weight:900;letter-spacing:.08em;position:relative}
.hd__logo b::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--y-500)}
.hd__logo span{font-family:var(--f-lat),sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.16em;color:var(--ink-400)}
.hd__nav{display:none;gap:var(--sp6)}
@media(min-width:1000px){.hd__nav{display:flex}}
.hd__nav a{font-size:.8rem;letter-spacing:.1em;color:var(--ink-700);transition:color .3s}
.hd__nav a:hover{color:var(--o-700)}
.hd__cta{display:none}
@media(min-width:1000px){.hd__cta{display:inline-flex}}

/* ---------- 13. 下部固定CTAバー ---------- */
.ctabar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-900);
  transform:translateY(105%);transition:transform .5s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.ctabar.is-on{transform:none}
.ctabar a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:var(--sp2) var(--sp3);text-align:center;font-weight:700;font-size:.86rem;letter-spacing:.04em}
.ctabar a small{font-family:var(--f-lat),sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.16em;opacity:.72;margin-bottom:.15em}
.ctabar .c1{background:var(--y-500);color:var(--ink-900)}
.ctabar .c2{background:var(--ink-900);color:var(--white)}
@media(min-width:1000px){.ctabar{display:none}}

/* ---------- 14. マーキー（黄の帯） ---------- */
.marquee{overflow:hidden;padding-block:var(--sp5);background:var(--y-500);color:var(--ink-900);border-block:1px solid var(--y-600)}
.marquee__in{display:flex;gap:var(--sp8);width:max-content;animation:mq 42s linear infinite}
.marquee span{font-family:var(--f-lat),sans-serif;font-weight:700;font-stretch:88%;font-size:clamp(1.5rem,3.6vw,2.7rem);letter-spacing:.01em;white-space:nowrap;display:flex;align-items:center;gap:var(--sp8);color:var(--ink-900)}
.marquee span::after{content:"";width:6px;height:6px;background:var(--ink-900);border-radius:50%;display:block}
.marquee b{color:var(--ink-900);font-weight:700}.marquee .lb{font-family:var(--f-jp),sans-serif;font-weight:700;font-size:.56em;letter-spacing:.08em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 15. フッター ---------- */
.ft{background:var(--sumi-900);color:var(--ink-300);padding-block:var(--sp9) var(--sp8);font-size:.82rem}
.ft a:hover{color:var(--y-500)}
.ft__grid{display:grid;gap:var(--sp7)}
@media(min-width:800px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ft h4{font-family:var(--f-lat),sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.18em;color:var(--y-500);margin-bottom:var(--sp4)}
.ft li+li{margin-top:var(--sp3)}
.ft__btm{margin-top:var(--sp8);padding-top:var(--sp5);border-top:1px solid var(--sumi-600);display:flex;flex-wrap:wrap;gap:var(--sp4);justify-content:space-between;font-size:.8rem;letter-spacing:.08em}

/* ---------- 16. 出現アニメ ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 17. ヒーロー（白基調・写真は右に置く） ---------- */
.hero{position:relative;background:var(--white);padding-top:78px}
.hero__grid{width:100%;max-width:1560px;margin-inline:auto;display:grid;gap:0}
@media(min-width:960px){
  .hero{display:flex;align-items:center}
  .hero__grid{grid-template-columns:1.15fr .85fr;align-items:stretch;min-height:min(80svh,740px)}
}
.hero__ph{position:relative;order:-1}
@media(min-width:960px){.hero__ph{order:0;height:auto;min-height:100%}}
.hero__ph img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;aspect-ratio:4/3}
@media(min-width:960px){.hero__ph img{aspect-ratio:auto}}
/* 写真の左下に黄のブロックを重ねる＝コーポレートカラーの露出 */
.hero__ph::after{content:"";position:absolute;left:0;bottom:0;width:clamp(64px,9vw,120px);height:12px;background:var(--y-500)}
.hero__txt{padding:var(--sp8) var(--gut) var(--sp9)}
@media(min-width:960px){.hero__txt{padding:var(--sp9) clamp(40px,4.5vw,80px) var(--sp9) var(--gut)}}
.hero h1{font-family:var(--f-display);font-size:var(--t-hero);font-weight:800;line-height:1.44;letter-spacing:-.008em}
.hero h1 em{font-style:normal;display:block}
.hero h1 i{font-style:normal}
@media(max-width:760px){.hero h1 i{display:block}}
.hero__scroll{display:none}
@media(min-width:960px){
  .hero__scroll{
    display:flex;position:absolute;left:var(--gut);bottom:var(--sp5);z-index:2;
    font-family:var(--f-lat),sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.18em;
    align-items:center;gap:var(--sp3);color:var(--ink-400);
  }
  .hero__scroll::after{content:"";width:44px;height:2px;background:var(--y-500);transform-origin:left;animation:sc 2.4s var(--ease) infinite}
}
@keyframes sc{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* ---------- 18. 人物グリッド ---------- */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp4)}
@media(min-width:700px){.people{grid-template-columns:repeat(3,1fr);gap:var(--sp5)}}
@media(min-width:1060px){.people{grid-template-columns:repeat(5,1fr)}}
.person figure{position:relative;overflow:hidden;background:var(--paper-2)}
.person img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;transition:transform 1.2s var(--ease)}
.person:hover img{transform:scale(1.04)}
.person .role{margin-top:var(--sp3);font-size:.76rem;letter-spacing:.08em;line-height:1.6;border-top:3px solid var(--y-500);padding-top:var(--sp3)}
.person .role b{display:block;font-weight:700;font-size:.86rem}
.person .role span{color:var(--ink-500)}

/* ---------- 19. 到達式 ---------- */
.formula{border:1px solid var(--line);padding:var(--sp7) var(--sp6);background:var(--white)}
.sec--paper-050 .formula{background:var(--white)}
.sec--sumi .formula{border-color:var(--sumi-600);background:var(--sumi-800)}
.formula__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp3);padding-block:var(--sp5);border-bottom:1px dashed var(--line-2)}
.sec--sumi .formula__row{border-color:var(--sumi-600)}
.formula__row:last-of-type{border-bottom:0}
.formula__row .k{font-size:.88rem;line-height:1.7;flex:1 1 14em}
.formula__row .k small{display:block;font-size:.74rem;color:var(--ink-500);letter-spacing:.06em}
.sec--sumi .formula__row .k small{color:var(--ink-400)}
.formula__row .v{font-family:var(--f-lat),sans-serif;font-weight:500;font-size:clamp(1.3rem,3vw,2.1rem);letter-spacing:.01em;white-space:nowrap}
.formula__row .op{font-family:var(--f-lat),sans-serif;font-weight:300;color:var(--o-700);font-size:1.4rem;flex:none;width:1.2em}
.sec--sumi .formula__row .op{color:var(--y-500)}
.formula__sum{margin-top:var(--sp6);padding:var(--sp6) var(--sp5);background:var(--y-500);color:var(--ink-900);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp4)}
.formula__sum .v{font-family:var(--f-lat),sans-serif;font-weight:600;font-size:clamp(2.4rem,7vw,4.4rem);line-height:.9}

/* ---------- 20. ステップ ---------- */
.steps{counter-reset:st;border-top:1px solid var(--line)}
.sec--sumi .steps{border-color:var(--sumi-600)}
.steps li{counter-increment:st;display:flex;gap:var(--sp5);padding-block:var(--sp5);border-bottom:1px solid var(--line)}
.sec--sumi .steps li{border-color:var(--sumi-600)}
.steps li::before{
  content:counter(st,decimal-leading-zero);font-family:var(--f-lat),sans-serif;font-weight:500;font-size:.92rem;
  color:var(--ink-900);background:var(--y-500);flex:none;letter-spacing:.06em;
  padding:.28em .6em;height:max-content;line-height:1.2;
}
.steps b{display:block;font-weight:700;margin-bottom:.15em}
.steps p{font-size:var(--t-sm);line-height:1.85;color:var(--ink-500)}
.sec--sumi .steps p{color:var(--ink-300)}

/* ---------- 21. 現在地レール ---------- */
.prog{display:none}
@media(min-width:1280px){
  .prog{display:block;position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:50}
  .prog li+li{margin-top:14px}
  .prog a{display:flex;align-items:center;gap:10px;justify-content:flex-end;font-family:var(--f-lat),sans-serif;font-size:.6rem;letter-spacing:.14em;color:var(--ink-400);opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s,color .3s}
  .prog a::after{content:"";width:16px;height:2px;background:currentColor;flex:none;transition:width .35s var(--ease),background-color .35s}
  .prog:hover a,.prog a.is-here{opacity:1;transform:none}
  .prog a.is-here{color:var(--o-500)}
  .prog a.is-here::after{width:30px;background:var(--y-500)}
}

/* ---------- 22. 注記・バッジ ---------- */
.note{font-size:var(--t-cap);line-height:1.85;color:var(--ink-500);letter-spacing:.04em}
.sec--sumi .note{color:var(--ink-300)}
.sec--brand .note{color:var(--ink-800)}
.badge{display:inline-block;font-family:var(--f-lat),sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.16em;padding:.4em 1em;background:var(--y-500);color:var(--ink-900)}
.hr{height:1px;background:var(--line);border:0}
.sec--sumi .hr{background:var(--sumi-600)}

/* ---------- 23. フォーム ---------- */
.f-grid{display:grid;gap:var(--sp5)}
@media(min-width:680px){.f-grid{grid-template-columns:1fr 1fr}}
.f{display:block}
.f+.f{margin-top:var(--sp5)}
.f label{display:flex;align-items:center;min-height:2.1em;font-size:.9375rem;font-weight:700;letter-spacing:.08em;margin-bottom:var(--sp2)}
.f label span{font-family:var(--f-lat),sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;background:var(--y-500);color:var(--ink-900);padding:.2em .6em;margin-left:.6em;vertical-align:.15em}
.f input,.f select,.f textarea{
  width:100%;font:inherit;font-size:.95rem;letter-spacing:.03em;
  background:var(--white);color:var(--ink-900);
  border:1px solid var(--line-2);border-radius:0;
  padding:14px 16px;min-height:54px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.sec--paper-050 .f input,.sec--paper-050 .f select,.sec--paper-050 .f textarea{background:var(--white)}
.sec--sumi .f input,.sec--sumi .f select,.sec--sumi .f textarea{background:var(--sumi-800);color:var(--sumi-txt);border-color:var(--sumi-600)}
.f textarea{min-height:auto;line-height:1.85;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--y-600);box-shadow:0 0 0 3px rgba(250,189,0,.28)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-300)}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--o-700) 50%),linear-gradient(135deg,var(--o-700) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.f-note{font-size:.82rem;letter-spacing:.04em;color:var(--ink-500);padding-left:var(--sp4);border-left:4px solid var(--y-500)}
.sec--sumi .f-note{color:var(--ink-300)}
button[type=submit]:disabled{opacity:.5;cursor:wait}

/* ============================================================
   24. ダイレクトレスポンスの部品
   準拠: _design/コピー設計書.md
   ============================================================ */

/* ジョンソン・ボックス（ケネディ ステップ6）＝冒頭の予告囲み */
.jbox{background:var(--white);border:1px solid var(--line-2);border-top:6px solid var(--y-500);padding:var(--sp6)}
.sec--sumi .jbox{background:var(--sumi-800);border-color:var(--sumi-600);border-top-color:var(--y-500)}
.sec--brand .jbox{background:var(--white);border-top-color:var(--ink-900)}
.jbox__t{font-family:var(--f-lat),sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.2em;color:var(--o-700);margin-bottom:var(--sp4)}
.sec--sumi .jbox__t{color:var(--y-500)}
.jbox li{position:relative;padding-left:1.7em;font-size:var(--t-body);line-height:1.85;margin-top:var(--sp3)}
.jbox li:first-child{margin-top:0}
.jbox li::before{content:"";position:absolute;left:0;top:.68em;width:12px;height:3px;background:var(--y-500)}
.jbox li b{font-weight:700}

/* 追伸（ケネディ ステップ14）＝第二のヘッドライン */
.ps{border-top:4px solid var(--y-500);padding-top:var(--sp6);margin-top:var(--sp9)}
.ps__t{font-family:var(--f-lat),sans-serif;font-weight:700;font-size:1rem;letter-spacing:.2em;color:var(--o-700);display:block;margin-bottom:var(--sp4)}
.sec--sumi .ps__t{color:var(--y-500)}
.ps p{font-size:1.02rem;line-height:2}
.ps p+p{margin-top:1.2em}

/* 3択CTA（アリエリー 相対性）＝おとり付き。真ん中が本命 */
.choices{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--sp6)}
@media(min-width:820px){.choices{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.sec--sumi .choices{background:var(--sumi-600);border-color:var(--sumi-600)}
.choice{background:var(--white);padding:var(--sp6);display:flex;flex-direction:column}
.sec--paper-050 .choice{background:var(--paper)}
.sec--sumi .choice{background:var(--sumi-900)}
.choice .kn{font-family:var(--f-lat),sans-serif;font-weight:600;font-size:.88rem;letter-spacing:.18em;color:var(--ink-400)}
.choice h3{font-size:1.06rem;font-weight:700;line-height:1.55;margin:var(--sp3) 0}
.choice p{font-size:var(--t-sm);line-height:1.85;color:var(--ink-500);flex:1}
.sec--sumi .choice p{color:var(--ink-300)}
.choice .btn{margin-top:var(--sp5);width:100%;padding-inline:var(--sp4);font-size:.82rem;letter-spacing:.02em;text-align:center}
.choice--reco{position:relative;background:var(--paper);box-shadow:0 0 0 3px var(--y-500) inset;z-index:1}
.sec--paper-050 .choice--reco{background:var(--white)}
.sec--sumi .choice--reco{background:var(--sumi-800)}
.choice--reco::before{
  content:"いちばん多い選び方";position:absolute;top:0;left:0;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;
  background:var(--y-500);color:var(--ink-900);padding:.4em 1em;
}
.choice--reco{padding-top:calc(var(--sp6) + 16px)}

/* 事実ベースの限定（ケネディ ステップ13。嘘の締切は使わない） */
.limited{
  display:block;background:var(--paper);border-left:5px solid var(--y-500);
  padding:var(--sp4) var(--sp5);font-size:var(--t-sm);line-height:1.85;
}
.sec--paper-050 .limited{background:var(--white)}
.sec--sumi .limited{background:var(--sumi-800)}
.sec--brand .limited{background:var(--white);border-left-color:var(--ink-900)}
.limited b{font-weight:700}

/* 見出し直上の「旗」（ケネディ：目印の旗＝対象の名指し） */
.flag{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  background:var(--y-500);color:var(--ink-900);padding:.45em 1.1em;margin-bottom:var(--sp5);
}
.sec--brand .flag{background:var(--ink-900);color:var(--y-500)}

/* ---------- 26. 人物（実名表示）と代表メッセージ ---------- */
/* 6名なので3列。5列だと1行目5＋2行目1で座りが悪い */
@media(min-width:1060px){.people{grid-template-columns:repeat(3,1fr)}}
.person .role b{display:block;font-weight:700;font-size:1.02rem;letter-spacing:.04em;line-height:1.5}
.person .role span{display:block;color:var(--ink-500);font-size:.9375rem;margin-top:.25em}
.person .role em{display:block;font-style:normal;color:var(--ink-400);font-size:var(--t-sm);letter-spacing:.04em;margin-top:.4em}

/* 代表メッセージの見出し脇に顔写真 */
.msg-head{display:flex;align-items:center;gap:var(--sp6);flex-wrap:wrap}
.msg-ph{flex:none;width:clamp(130px,20vw,200px)}
.msg-ph img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%}
.msg-meta{flex:1 1 14em;min-width:0}

/* ---------- 27. 可読性の底上げ（実測にもとづく修正） ---------- */
/* 白地用に ink を濃くしたぶん、暗面では明るい側を使う */
.sec--sumi,.sec--sumi-850,.ft{--ink-400:#B4A9A1;--ink-500:#CFC5BD;--ink-300:#9A8F87}
.sec--sumi .rail,.sec--sumi-850 .rail{color:#B4A9A1}
.sec--sumi .note,.sec--sumi-850 .note,.ft .note{color:#C3B8B0}
.sec--sumi .idx .jp,.sec--sumi-850 .idx .jp{color:#B4A9A1}
.sec--sumi .cap,.sec--sumi-850 .cap{color:#C3B8B0}
.sec--sumi cite,.sec--sumi-850 cite{color:#C3B8B0}

/* 黄色の面に載る文字は必ず墨。グレーだと 2.26:1 まで落ちる */
.sec--brand .jp,.sec--brand .note,.sec--brand .cap,.sec--brand cite,.sec--brand .rail,
.marquee .jp,.badge .jp{color:var(--ink-800)}

/* 行長を少し詰めて、行の追いやすさを上げる */
.measure{max-width:32em}
.essay{max-width:29em}


/* ============================================================
   28. 可読性：文字の下限を引き上げる
   実測で「読ませる要素」が軒並み12〜13pxだった。
   ナビ・フッター・ボタン・注記は最低15px、装飾ラベルでも13px以上にする。
   ============================================================ */

/* ナビゲーション */
.hd__nav a{font-size:.95rem;opacity:.9}
.hd__nav a:hover{opacity:1}
.hd__logo span{font-size:.8rem}

/* フッター：連絡先も事業一覧もここで読ませる */
.ft{font-size:.95rem;line-height:1.9}
.ft h4{font-size:.82rem;letter-spacing:.14em}
.ft__btm{font-size:.875rem}
.ft a{text-decoration:underline;text-underline-offset:.25em;text-decoration-color:rgba(255,255,255,.28)}
.ft a:hover{text-decoration-color:currentColor}

/* ボタン */
.btn--sm{font-size:.95rem;min-height:48px}
.ctabar a{font-size:.98rem}
.ctabar a small{font-size:.78rem}

/* 注記・キャプション類 */
.quote cite{font-size:.9rem}
.formula__row .k small{font-size:.875rem}
.f-note{font-size:.95rem}
.f label span{font-size:.78rem}
.sign span{font-size:.82rem}
.stat dt{font-size:.875rem}
.jbox__t{font-size:.875rem}
.badge{font-size:.84rem}
.flag{font-size:.9rem}
.hero__scroll{font-size:.8rem}
.rail{font-size:.9rem}
.eyebrow{font-size:.8rem}
.card .kn,.choice .kn{font-size:.92rem}
.tbl td small,.note,.cap,.fig figcaption{font-size:var(--t-cap)}

/* 本文リンクは下線で見つけやすく（色だけに頼らない） */
.faq-a a,.essay a,.lead a,.tbl a{text-decoration:underline;text-underline-offset:.2em}