/* ============================================================
   I案「若葉の面」— COLOR FIELD ／ 色面と余白
   ライトグリーンのベタ面 → 白の余白 → 写真の帯、を繰り返す。1スクロールに1つだけ置く。
   トークンの値は1つも変えず、これまで文字色にしか使っていなかった --accent-inv（#77EE88）を
   初めて「面」として使う。--ink 上のコントラストは base.css 実測で 13.52:1。
   写真は4枚だけ。囲みカードに入れず、面と面のあいだに帯として挟む。
   base.css → plan-common.css → i.css の順に読む。
   ============================================================ */

/* ---------- 面A：ライトグリーンのベタ ---------- */
.field{background:var(--accent-inv);color:var(--ink)}
.field .eyebrow{color:var(--accent-ink)}
.field .lead{color:#1C1917}

/* ---------- S1 ヒーロー（写真なし・面だけで立てる） ---------- */
.hero{background:var(--accent-inv);color:var(--ink);
  padding:clamp(56px,11vw,132px) 0 clamp(52px,10vw,120px)}
.hero h1{font-weight:700;font-size:clamp(31px,6.4vw,60px);line-height:1.26;letter-spacing:-.035em;
  text-wrap:balance;max-width:16em}
.hero .lead{margin-top:24px;max-width:33em;color:#1C1917}
.hero-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero .btn-primary:hover{background:#292524}
.hero .btn-outline{background:transparent;color:var(--ink);border-color:rgba(12,10,9,.35)}
.hero .btn-outline:hover{background:rgba(255,255,255,.35);border-color:var(--ink);color:var(--ink)}
.hero .btn:focus-visible{outline-color:var(--ink)}

/* ---------- 写真の帯（もう1つの色面として扱う） ----------
   D12：全幅フルブリードはやめ 1440px で止める。素材は 4:3=1448×1086／16:9=1280×720
   （2026-09-29 に制服を実物に合わせた版へ差し替え。1440px 表示で約1.1倍）なので
   これ以上広げると拡大率が上がって甘くなる。 */
.band{max-width:1440px;margin:0 auto;position:relative;overflow:hidden;background:var(--ink)}
.band img{width:100%;height:auto;aspect-ratio:var(--ar,21/9);object-fit:cover;
  object-position:var(--pos,center)}
.band .note{position:absolute;right:0;bottom:0;margin:0;background:rgba(12,10,9,.45);
  color:rgba(255,255,255,.8);font-size:10.5px;padding:5px 11px;line-height:1.5;border:0}
@media(max-width:700px){
  /* 狭い画面で 21:9 に切ると人物が消えるので、素材の実比率に戻す */
  .band img{aspect-ratio:var(--ar-sm,16/9)}
}

/* ---------- セクションの間合い（1スクロールに1つだけ） ---------- */
.sec{padding:clamp(60px,9vw,116px) 0}
.sec-head{max-width:44ch}

/* ---------- キャリアの道すじ（3段・罫線だけで組む） ---------- */
.path{margin-top:var(--s7);border-top:2px solid var(--ink)}
.path .st{display:grid;grid-template-columns:1fr;gap:6px;padding:26px 0;
  border-bottom:1px solid var(--line)}
.path .st:last-child{border-bottom:3px double var(--line-2)}
.path .no{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.path h3{font-size:clamp(19px,2.6vw,24px);font-weight:700;letter-spacing:-.02em}
.path p{font-size:15px;color:var(--ink-2);line-height:1.95;max-width:46ch}
@media(min-width:901px){
  .path .st{grid-template-columns:80px minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);
    align-items:baseline}
  .path .no{padding-top:6px}
}

/* ---------- 会社の言葉 ---------- */
.words{margin-top:var(--s7);display:grid;gap:clamp(24px,3.5vw,44px);align-items:start;max-width:980px}
.words figure{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.words figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.words .note{position:absolute;right:0;bottom:0;background:rgba(12,10,9,.45);color:rgba(255,255,255,.8);
  font-size:10.5px;padding:5px 10px;line-height:1.5}
.words p{font-size:16px;line-height:2.05;color:var(--ink-2);text-wrap:pretty;max-width:44ch}
.words p+p{margin-top:1.15em}
.words p:first-child{font-size:clamp(18px,2.4vw,23px);font-weight:500;color:var(--ink);line-height:1.72}
.sign{margin-top:var(--s6);font-size:13px;letter-spacing:.04em;color:var(--mut)}
@media(min-width:901px){.words{grid-template-columns:300px 1fr}}

/* ---------- 採用（面Aの上に置く） ---------- */
.field .entry{background:rgba(255,255,255,.72);border:1px solid rgba(12,10,9,.16);padding:26px 24px;
  display:flex;flex-direction:column}
.field .entry .tag{align-self:flex-start;font-size:11.5px;font-weight:700;color:#fff;background:var(--ink);
  padding:4px 10px;letter-spacing:.04em}
.field .entry h3{margin-top:14px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.field .entry p{margin-top:10px;font-size:14.5px;color:#292524;line-height:1.9;flex:1;text-wrap:pretty}
.field .entry .btn{margin-top:20px;align-self:flex-start}
.field .entry .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.field .entry .btn-primary:hover{background:#292524}
.field .tbd{background:rgba(255,255,255,.6);border-color:rgba(12,10,9,.28);color:#44403C}

/* ---------- グループ ---------- */
.grouptext{margin-top:var(--s6);max-width:46ch;font-size:15px;line-height:2;color:var(--ink-2)}
.grouptext p+p{margin-top:1.1em}

/* ---------- こうやっていきます（2026-09-16 復活）----------
   I案は罫線と余白で組むので、キャリアの道すじ（.path）と同じ見え方に揃える。
   ただし順番のある3段ではなく並列の3つなので、番号は振らない。 */
.stance3{margin-top:var(--s7);border-top:2px solid var(--ink)}
.stance3>div{padding:26px 0;border-bottom:1px solid var(--line)}
.stance3>div:last-child{border-bottom:3px double var(--line-2)}
.stance3 h3{font-size:clamp(18px,2.4vw,22px);font-weight:700;letter-spacing:-.02em}
.stance3 p{margin-top:8px;font-size:15px;color:var(--ink-2);line-height:1.95;max-width:46ch}
@media(min-width:901px){
  .stance3>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    gap:clamp(20px,3vw,40px);align-items:baseline}
  .stance3 p{margin-top:0}
}