/* ============================================================
   東プレ九州株式会社 コーポレートサイト 共通スタイルシート
   ------------------------------------------------------------
   コンセプト: 「誠実・堅実、そしてクリーンで先進的」
   基調色: 東プレグループブルー(#404696) × 白 / アクセント: シアン(#00A0E9)
   構成: 1.トークン 2.リセット 3.ユーティリティ 4.ボタン 5.ヘッダー
         6.ドロワー 7.ヒーロー 8.ページヒーロー 9.セクション見出し
         10.統計 11.カード群 12.スプリット 13.帯 14.タイムライン
         15.テーブル 16.ニュース 17.採用 18.FAQ 19.フォーム風UI
         20.フッター 21.アニメーション 22.印刷 23.アクセシビリティ
   ------------------------------------------------------------
   カラーやフォントは下記 :root の変数を変更すると全ページ一括で
   変わります。
   ============================================================ */

/* ---- 1. デザイントークン ---- */
:root {
  color-scheme: only light; /* ブラウザの自動ダークモード反転からブランドカラーを守る */

  /* カラー */
  --navy-deep:   #070D26;
  --navy:        #0D1642;
  --navy-soft:   #17225C;
  --brand:       #404696;   /* 東プレグループブルー（親会社サイト実測値） */
  --brand-deep:  #2C3272;
  --brand-soft:  #575EAE;
  --accent:      #00A0E9;   /* シアンアクセント（大きい要素・暗背景用） */
  --accent-deep: #0080BC;
  --accent-text: #006C9E;   /* 小サイズ文字用アクセント。白5.77／base-soft 5.38／base-blue 4.91／accent-pale 5.12（すべてAA 4.5以上）
                               ※旧 #0073A8 は base-blue 上で 4.45 と 0.05 足りなかったため 2026-09-09 に微調整 */
  --accent-pale: #E3F4FD;
  --base:        #FFFFFF;
  --base-soft:   #F5F7FB;
  --base-blue:   #E7EDF8;
  --line:        #D8DFEE;
  --line-soft:   #E7ECF5;
  --ink:         #171A2E;
  --ink-soft:    #444A66;
  --ink-muted:   #5E6580;
  --on-navy:     #FFFFFF;
  --on-navy-soft:#B9C2E4;

  /* フォント */
  --ff-body: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ff-en:   'Outfit', 'Noto Sans JP', sans-serif;
  --ff-num:  'Oswald', 'Outfit', 'Noto Sans JP', sans-serif; /* 大きな数字表示用（Oswaldは index / recruit / sustainability / company の各HTMLで読み込む） */

  /* 流体タイポグラフィ */
  --fs-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-sm:   clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --fs-base: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --fs-md:   clamp(1rem, 0.92rem + 0.4vw, 1.15rem);
  --fs-lg:   clamp(1.15rem, 1.02rem + 0.65vw, 1.45rem);
  --fs-xl:   clamp(1.4rem, 1.15rem + 1.25vw, 1.9rem);
  --fs-2xl:  clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  --fs-3xl:  clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  --fs-hero: clamp(2.1rem, 1.3rem + 4vw, 4rem);
  --fs-num:  clamp(2.4rem, 1.8rem + 3vw, 4.2rem);

  /* スペーシング */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 8rem;

  /* その他 */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 4px rgba(13, 22, 66, 0.08);
  --shadow-md: 0 6px 20px rgba(13, 22, 66, 0.10);
  --shadow-lg: 0 14px 40px rgba(13, 22, 66, 0.16);
  --dur-fast: 0.18s;
  --dur:      0.32s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 72px;
  --utility-h: 36px;
  --container: 1160px;
  --container-wide: 1320px;
}

/* ---- 2. リセット・ベース ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* ※スクロールバーの色は指定しない（ブラウザ既定のまま）。
     2026-07-27に「ヒーロー右端のグレーの帯」の対策として着色を試したが、原因の誤認だった。
     真因は画像側で、hero-hotpress.jpg と work-assembly.jpg の右端に純白の余白が27px
     焼き込まれていた（object-fit:cover が幅基準に切り替わる幅を超えると画面に出る）。
     画像から白を切り落として解決済み。CSS側の小細工は全て取り消してある。 */
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--base);
  overflow-wrap: anywhere;
}

/* 最終行に1〜2文字だけ取り残される「泣き別れ」の対策。
   2026-08-01：採用ページで12箇所直したが、画面幅を変えると別の場所に3箇所現れた。
   折り返し位置は幅で変わるので、文言調整だけでは全幅を満たせない。
   text-wrap: pretty はブラウザが最終行を見て手前の行から文字を送ってくれる。
   balance は行長を均等にするもので、短い見出し・キャッチ向き（長文に使うと重い）。
   いずれも非対応ブラウザでは単に無視されるだけなので、フォールバック不要。 */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
.sec-head__lead, .card__text, .flow-step__name, .flow-step__text,
.job-card__copy, .icon-card__title, .nviz__title, .nviz-bars__label,
.num-card__note, .day-flow__text { text-wrap: balance; }

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

/* アイコンスプライト（recruit.html の <body> 直後に置いた <symbol> の集合）。
   画面には出さないが display:none だと Safari で <use> が解決されないことがあるため、
   面積ゼロにして視覚的に隠す。 */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 線の共通設定は「呼び出す側の <svg class="ic">」に書くこと。
   <use> は影のツリー（shadow tree）に symbol を複製するので、
   `.icon-sprite symbol { stroke: ... }` のようにスプライト側を狙った
   セレクタは複製先に届かない（実測：fill が黒、stroke が none のまま描画された）。
   fill / stroke / stroke-width / linecap / linejoin はいずれも継承するプロパティなので、
   ホスト側に指定すれば影のツリーまで流れていく。
   線幅2は business.html / sustainability.html が既に使っている値。そちらに合わせている。 */
.ic {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 大きく表示する採用フローのアイコンだけ線を細くする。
   同じ stroke-width でも glyph が大きいほど線は太く見えるため、見た目の重さを揃える。 */
.flow-step__icon--svg .ic { stroke-width: 1.5; }

a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease; }
/* ★本文中のリンクは下線で示す（WCAG 1.4.1「色だけで情報を伝えない」）。
   リンク色 #404696 と本文色の輝度差は約1.05:1しかなく、色だけでは本文と見分けが付かない。
   ニュース記事本文（.article-body a）には元から下線があり、サイト内で不統一だった状態も解消する。
   対象外：ボタン、電話番号（専用の大きな表示）、#prologue のチップ型リンク集。
   ナビ・カード・フッターは <p>/<dd> の中に無いため影響しない（実測18箇所→14箇所に適用）。 */
main p a:not(.btn):not([href^="tel:"]),
main dd a:not(.btn):not([href^="tel:"]) {
  text-decoration: underline; text-underline-offset: 0.15em;
}
#prologue .prologue-links a { text-decoration: none; }
a:hover { color: var(--accent-deep); }

ul, ol { list-style: none; }

h1, h2, h3, h4 { line-height: 1.4; letter-spacing: 0.04em; font-weight: 700; }

strong { font-weight: 700; }

button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* ---- 3. レイアウト・ユーティリティ ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--soft { background: var(--base-soft); }
.section--blue { background: var(--base-blue); }
.section--navy { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--on-navy); }
.section--navy a:not(.btn) { color: #9fd8ff; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.en { font-family: var(--ff-en); letter-spacing: 0.12em; }

.text-center { text-align: center; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

.lead { font-size: var(--fs-md); color: var(--ink-soft); }
.note { font-size: var(--fs-sm); color: var(--ink-muted); }

.img-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }

/* 横長の図解（モノづくりフロー等）: 狭い画面では文字が潰れないよう横スクロールさせる */
.wide-diagram { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wide-diagram img { display: block; width: 100%; height: auto; }
@media (max-width: 859px) {
  .wide-diagram img { width: 900px; max-width: none; }
}
.sp-only { display: none; }
@media (max-width: 859px) { .sp-only { display: block; } }
/* スマホでは、中央揃えの長い文を左揃えにする（行の始まりがそろって読みやすい。工場見学の導入・見学のおわりに。2026-10-29） */
@media (max-width: 620px) { .sp-left { text-align: left; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* スキップリンクはキーボードフォーカス時に可視化する */
a.sr-only:focus-visible {
  position: fixed; top: 10px; left: 10px; z-index: 2000;
  width: auto; height: auto; margin: 0; padding: 0.6em 1.2em;
  clip: auto; overflow: visible; white-space: normal;
  background: var(--navy); color: #fff; font-weight: 700;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}

/* ---- 4. ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0.7em 2em;
  font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.06em;
  border-radius: 999px; border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease,
              background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.btn::after {
  content: ""; width: 0.55em; height: 0.55em; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-fast) ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); color: #fff; }
.btn--accent { background: var(--accent); color: var(--navy-deep); }
.btn--accent:hover { background: #33B4ED; color: var(--navy-deep); }
.btn--outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--outline:hover { background: var(--brand); color: #fff; }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: var(--accent-pale); color: var(--navy); }
.btn--ghost-white { border-color: rgba(255,255,255,0.75); color: #fff; background: transparent; }
.btn--ghost-white:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn--small { min-height: 42px; padding: 0.45em 1.4em; font-size: var(--fs-sm); }
.btn--external::after { content: none; }
.btn--external .ext-ico { width: 0.9em; height: 0.9em; }

/* 外部リンクの矢印アイコン。
   2026-08-01：既定のサイズが無く、btn--external を付け忘れたボタン（index.html の
   グループリンク2つ）でアイコンが66〜83pxに膨張し、文字が4行に折り返してボタンが
   高さ118pxになっていた。付け忘れても壊れないよう、ここで既定サイズを持たせる。 */
.ext-ico { display: inline-block; width: 0.9em; height: 0.9em; flex: none; vertical-align: -0.05em; }

/* ---- 5. ヘッダー ---- */
.utility-bar {
  background: var(--navy); color: var(--on-navy-soft);
  font-size: var(--fs-xs); height: var(--utility-h);
  display: flex; align-items: center;
  position: relative; z-index: 1001;
}
.utility-bar .container {
  width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 1.6em;
}
.utility-bar a { color: var(--on-navy-soft); }
.utility-bar a:hover { color: #fff; }
.utility-bar .u-tel { letter-spacing: 0.08em; }
.utility-bar .u-tel strong { color: #fff; font-weight: 500; }
/* 2026-10-31：「東プレグループ」を「親会社 東プレ ⧉」にしたら、320px で文字の読み込み前（代わりの字体）に TEL が2行に折れたので、狭い画面だけ間を詰める */
@media (max-width: 360px) { .utility-bar .container { gap: 1em; } }
/* 2026-11-03：「親会社 東プレ株式会社」は幅の狭いスマホの帯に収まらないので、その幅だけ「株式会社」を隠す */
@media (max-width: 374px) { .utility-bar .u-co { display: none; } }

.header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur) ease;
}
.header.is-scrolled { box-shadow: var(--shadow-md); }

.header__inner {
  max-width: var(--container-wide); margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* ヘッダーロゴは「マーク＋社名」の横並び（images/logo-row.png・比率 7.6923:1）。
   縦積みロゴ（logo-full.png）は高さ72pxのヘッダーでは高さ側で先に詰まり、
   社名が14pxまで潰れていた（実測）。横長ヘッダーには横長ロゴを充てる。
   ・高さではなく「幅」で指定する：横長ロゴは横幅が制約になるため。
   ・max-width:100% ＋ height:auto で、幅が足りない画面では比率を保って自動縮小する。
   ・ドロワー（縦長パネル）は縦積みロゴのまま。用途に合う形をそれぞれ使う。 */
.header__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.header__logo img { width: 250px; max-width: 100%; height: auto; }

.gnav { display: none; }

.header__cta { display: none; }

@media (min-width: 1024px) {
  /* ナビとCTAは縮まないよう固定し、幅が足りないときはロゴ側だけが縮むようにする。
     両方が縮めるとナビの文字間が詰まって崩れるため。 */
  .gnav { display: block; flex: none; }
  .gnav__list { display: flex; align-items: stretch; gap: 0.2rem; height: var(--header-h); }
  .gnav__item { position: relative; display: flex; }
  .gnav__link {
    display: flex; align-items: center; gap: 0.4em;
    padding-inline: 1.05em; color: var(--ink);
    font-size: 0.95rem; font-weight: 500; letter-spacing: 0.05em;
    position: relative;
    /* 折り返しを禁止する。これがないと、ロゴが広い幅を取ったときに
       ナビ側が圧迫されて「会社情／報」のように項目名が2行に割れる（実測で発生）。
       nowrap にするとナビの最小幅が1行分で確定し、余りの調整はロゴ側だけで起きる。 */
    white-space: nowrap;
  }
  .gnav__link::before {
    content: ""; position: absolute; left: 1em; right: 1em; bottom: 14px;
    height: 3px; border-radius: 2px; background: var(--brand);
    transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
  }
  .gnav__link:hover::before,
  .gnav__link[aria-current="page"]::before,
  .gnav__item:focus-within .gnav__link::before { transform: scaleX(1); }
  .gnav__link:hover { color: var(--brand); }
  .gnav__caret {
    width: 0.5em; height: 0.5em; flex: none; margin-top: -0.2em;
    border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg); transition: transform var(--dur-fast) ease;
  }
  .gnav__item:hover .gnav__caret, .gnav__item:focus-within .gnav__caret { transform: rotate(225deg) translate(-1px, -1px); }

  /* ドロップダウン（hover / focus-within の両対応） */
  .gnav__dropdown {
    position: absolute; top: calc(100% - 6px); left: 50%;
    transform: translate(-50%, 8px);
    /* 幅は一番長い項目に合わせる（240px で止めていた頃は「環境・カーボンニュートラル」の最後の「ル」だけが2行目に落ちていた。2026-10-29） */
    width: max-content; min-width: 240px; padding: 0.6rem;
    background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  }
  .gnav__dropdown::before {
    content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
  }
  .gnav__item:hover .gnav__dropdown,
  .gnav__item:focus-within .gnav__dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .gnav__dropdown a {
    display: block; padding: 0.55em 1em; border-radius: var(--radius-sm);
    color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; white-space: nowrap;
  }
  .gnav__dropdown a:hover { background: var(--base-blue); color: var(--brand); }

  .header__cta { display: inline-flex; white-space: nowrap; flex: none; }
}

/* ナビ出現直後の中間幅（1024〜1259px）はナビを詰めて横幅超過を防ぐ。
   ここはロゴ・ナビ・CTAの3点が最も競合する帯なので、ナビを最も詰める。 */
@media (min-width: 1024px) and (max-width: 1259px) {
  .gnav__link { padding-inline: 0.4em; font-size: 0.875rem; }
  .gnav__link::before { left: 0.4em; right: 0.4em; }
}

/* ロゴの上限幅。ナビ・CTA・ハンバーガーを flex:none で固定してあるので、
   幅が足りない画面では余りに合わせてロゴだけが自動で縮む。
   そのためブレークポイントを刻む必要がなく、どの画面幅でも
   「入る範囲で最大」の大きさになる（＝社名が最も読みやすくなる）。
   PCで上限を大きくしているのは、ナビがある分だけ余りが増えるため。 */
@media (min-width: 1024px) { .header__logo img { width: 340px; } }

/* ハンバーガー */
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  flex: none; /* 幅が足りないときに縮むのはロゴ側だけにする（タップ領域48pxを守る） */
}
.hamburger span {
  display: block; width: 26px; height: 2px; background: var(--navy);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* ---- 6. モバイルドロワー ---- */
.drawer {
  position: fixed; inset: 0; z-index: 1200;
  visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__overlay {
  position: absolute; inset: 0; background: rgba(7, 13, 38, 0.55);
  opacity: 0; transition: opacity var(--dur) ease;
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px); background: #fff;
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1.2rem 2.5rem;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.drawer__head img { height: 36px; width: auto; }
.drawer__close { width: 44px; height: 44px; position: relative; }
.drawer__close::before, .drawer__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; background: var(--navy);
}
.drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.drawer__nav > li { border-bottom: 1px solid var(--line-soft); }
.drawer__nav > li > a, .drawer__acc-btn {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 0.9em 0.4em; font-size: 1rem; font-weight: 700; color: var(--ink); text-align: left;
}
.drawer__acc-btn::after {
  content: ""; width: 0.55em; height: 0.55em;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform var(--dur-fast) ease; margin-right: 0.3em;
}
.drawer__acc-btn[aria-expanded="true"]::after { transform: rotate(225deg); }
.drawer__sub { display: none; padding: 0 0.4em 0.8em; }
.drawer__sub.is-open { display: block; }
.drawer__sub a {
  /* 左右の余白は 0.6em（0.8em だと 320px の画面で「環境・カーボンニュートラル」の最後の「ル」だけが2行目に落ちた。2026-10-29） */
  display: block; padding: 0.5em 0.6em; color: var(--ink-soft); font-size: 0.92rem;
  border-left: 2px solid var(--line); margin-left: 0.4em;
}
.drawer__sub a:hover { color: var(--brand); border-left-color: var(--brand); }
.drawer__actions { display: grid; gap: 0.7rem; margin-top: 1.4rem; }
.drawer__group { margin-top: 1.6rem; }
.drawer__group-title { font-size: var(--fs-xs); color: var(--ink-muted); letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.drawer__group a { display: block; padding: 0.4em 0.2em; font-size: 0.9rem; color: var(--ink-soft); }
.drawer__tel { margin-top: 1.6rem; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
.drawer__tel strong { font-size: 1.15rem; color: var(--navy); letter-spacing: 0.05em; }
/* 新卒採用サイトの採用の連絡先（久留米本社工場・苅田工場。2026-10-31）。工場の名前を番号の上の行に出し、番号は押すと電話がかけられる */
.drawer__tel-place { display: block; margin-top: 0.6em; font-weight: 700; color: var(--ink); }
.drawer__tel-num { color: inherit; text-decoration: none; }

/* ---- 7. ヒーロー（トップページ） ---- */
.hero {
  position: relative; min-height: min(92vh, 860px); min-height: min(92svh, 860px);
  display: flex; align-items: center;
  background: var(--navy-deep);
  overflow: hidden; color: #fff;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* クロスフェードは「新しい写真だけを上に重ねてフェードイン」方式。
   前後の写真を同時に半透明にすると中間で背景の黒が透けて画面が一瞬暗く沈むため、
   前の写真（.is-prev）は不透明のまま下に敷いておく */
.hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; z-index: 0; transition: opacity 1.2s ease;
  animation: heroZoom 16s var(--ease) forwards;
}
.hero__bg img.is-active { opacity: 1; z-index: 2; }
.hero__bg img.is-prev { opacity: 1; z-index: 1; transition: none; }
/* 「動きを減らす」設定では、めまいの原因になるズーム（scale）だけを止める。
   穏やかなクロスフェード（opacity）は残す＝この設定の閲覧者にも写真の切替が伝わる。
   ★ファイル末尾の一律ルール（transition-duration: 0.01ms !important）に負けて
     実際はハードカット（瞬間切替）になっていたため、!important で 1.2s を塗り直す。
     .is-prev（下に敷く前の写真）は対象外＝両方が半透明になって画面が暗く沈むのを防ぐ */
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
  .hero__bg img:not(.is-prev) { transition-duration: 1.2s !important; }
}
/* 背景写真の進行インジケーター（Apple型：普段は小さな点、アクティブなものだけ横長のピルに伸び、
   その中が5秒かけて左から満ちる＝次の切り替えまでの残り時間。クリックで手動切り替え。
   秒数を変える場合は main.js の HERO_INTERVAL と下の heroBarFill を両方変更すること */
.hero__slidenav { display: flex; align-items: center; gap: 10px; margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.hero__slidebtn {
  position: relative; width: 12px; height: 22px; padding: 0;
  border: none; background: none; cursor: pointer;
  transition: width 0.35s var(--ease);
}
.hero__slidebtn.is-active { width: 62px; }
/* トラック（下地）。幅はボタンに追従して点⇔ピルに変形する */
.hero__slidebtn::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px;
  transform: translateY(-50%); background: rgba(255, 255, 255, 0.38); border-radius: 999px;
}
/* 進行の塗り。丸端を保つため transform ではなく width をアニメーションさせる */
.hero__slidebtn .bar {
  position: absolute; left: 0; top: 50%; width: 0; height: 6px;
  transform: translateY(-50%);
  background: var(--accent); border-radius: 999px;
}
.hero__slidebtn.is-active .bar { animation: heroBarFill 5s linear forwards; }
@keyframes heroBarFill {
  from { width: 0; }
  to   { width: 100%; }
}
.hero__slidebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 自動切替の一時停止／再開ボタン（WCAG 2.2.2）。切替ボタンの並びの右端に小さな円で置く。
   再生中は ▮▮、停止中（aria-pressed="true"）は ▶ を CSS だけで描く */
.hero__pause {
  position: relative; width: 28px; height: 28px; margin-left: 6px; padding: 0; flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
  background: rgba(255, 255, 255, 0.10); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.hero__pause:hover, .hero__pause:focus-visible { background: rgba(255, 255, 255, 0.24); border-color: #fff; }
.hero__pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero__pause-ico {
  display: block; width: 3px; height: 10px;
  border-left: 3px solid #fff; border-right: 3px solid #fff;
}
.hero__pause[aria-pressed="true"] .hero__pause-ico {
  width: 0; height: 0; margin-left: 2px; border: none;
  border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* 停止中は進行バーも止める。末尾の一律ルールより強くするため !important */
.hero.is-paused .hero__slidebtn.is-active .bar { animation-play-state: paused !important; }
/* 進行バーの塗りは「残り時間を示すステータス表示」のため、「動きを減らす」設定でも動かす。
   このファイル末尾の全アニメ一律停止ルール（* { animation-duration: 0.01ms !important }）に
   負けないよう、より高い詳細度＋!important で 5 秒アニメを塗り直す。
   点⇔ピルの幅変化（transition）だけは瞬時に切り替える。 */
@media (prefers-reduced-motion: reduce) {
  .hero__slidebtn { transition: none; }
  .hero__slidebtn.is-active .bar {
    animation-name: heroBarFill !important;
    animation-duration: 5s !important;
    animation-timing-function: linear !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: 1 !important;
  }
}
/* ゆっくりと引くズーム（高級感の演出） */
@keyframes heroZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
/* 可読性を守る暗めのグラデーション膜。スライド画像（z:0〜2）より必ず上、文字（z:5）より必ず下に置く。

   2026-08-01：右側を少し薄くした（0.25 → 0.14）。文字は横54%までしか届かないため。
   ただしヒーローは帯セクションほど余裕がない。制約になっているのは
   小さな水色の英字 .hero__eyebrow (#8FD4FF) で、4枚のスライド全部で測った最悪値が
   変更前4.9:1 → 変更後4.8:1（AA基準4.5:1）。ここを更に薄くすると基準を割る。
   もっと明るくしたい場合は、先に .hero__eyebrow の色を明るくすること
   （#B4E4FF にすれば 0.05 まで薄くしても4.9:1を保てる、と実測済み）。
   下辺の膜（2つ目）はボタンとSCROLL表示を守っているので触らない。
   背景写真そのものは他ページと共用（3〜5ページ）なので、明るさ補正はしない。 */
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(100deg, rgba(7, 13, 38, 0.84) 0%, rgba(13, 22, 66, 0.58) 50%, rgba(13, 22, 66, 0.14) 100%),
    linear-gradient(0deg, rgba(7, 13, 38, 0.75) 0%, rgba(7, 13, 38, 0) 35%);
}
/* 2026-07-30：ヒーローの流線（.hero__lines／水色の光が左→右へ流れる装飾）を削除した。
   理由：装飾の意図が伝わらず「バグでしょうか？」と受け取られたため。
   加えてヒーローには既に4種類の動き（写真のクロスフェード・背景のゆっくりズーム・
   スライダーの進行バー・SCROLLの波）があり、5つ目の動きは整理の対象と判断した。
   復元が必要なら ※バックアップ/2026-07-30_ヒーロー流線_削除前/ の style.css と index.html を参照。
   同フォルダに動作確認用ページ（ヒーロー流線_動作確認.html）も残してある。 */

.hero__inner { position: relative; z-index: 5; width: 100%; padding-block: calc(var(--header-h) + 2rem) 7rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.8em;
  font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.28em;
  color: #8FD4FF; text-transform: uppercase; margin-bottom: 1.4rem;
}
.hero__eyebrow::before { content: ""; width: 2.6em; height: 1px; background: var(--accent); }
/* 全画面ヒーローの見出しだけ明朝体にする（index.html と recruit.html の2ページ）。
   ・下層ページの見出し（.page-hero__title 等）はゴシックのまま。
     「ブランドの宣言＝明朝／機能的なページ名＝ゴシック」という役割分けにする。
   ・ウェイトは 700。600以下だと横画が細くなりすぎ、白抜き文字＋写真の上では
     スマホ（実測35.8px）で線が飛ぶ。900は太すぎて明朝の品位が出ない。
     バーチャル工場見学のヒーロー（.tour-hero__lede）も同じ 700 で、サイト内で統一される。
   ・字送りは 0.06em → 0.04em に詰める。明朝はゴシックより字面が小さく、
     同じ字送りだと間延びして見えるため。 */
.hero__title {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: var(--fs-hero); font-weight: 700; line-height: 1.35; letter-spacing: 0.04em;
  font-feature-settings: 'palt';
  text-shadow: 0 2px 30px rgba(7, 13, 38, 0.5);
}
.hero__title .accent { color: #6FC8FF; }
.hero__lead {
  margin-top: 1.6rem; max-width: 40em;
  font-size: var(--fs-md); line-height: 2.1; color: rgba(255, 255, 255, 0.92);
}
/* リード文の .nb（文節改行）は画面が広いときだけ効かせる。
   広い画面では「高精度プレ／ス加工」のようにカタカナ語の途中で割れるのを防げるが、
   箱が狭いと文節が1行に収まりきらず行数が増える（375pxで実測 5行→6行）。
   日本語はもともとどこでも折り返す組版なので、狭い画面は成り行きに任せるほうが締まる。 */
@media (max-width: 900px) {
  .hero__lead .nb { white-space: normal; }
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
  font-family: var(--ff-en); font-size: 0.68rem; letter-spacing: 0.3em; color: rgba(255,255,255,0.75);
  /* クリックで下へスクロールさせるボタン。ボタンの既定スタイルをリセットする */
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 6px 10px 0;
  cursor: pointer; transition: color var(--dur-fast) ease;
}
.hero__scroll:hover { color: #fff; }
.hero__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* スクロール誘導の縦線。うっすらした線（track）の上を、尾を引く光が波のように上→下へ流れ落ちる。
   光は background の1本のグラデーション（下が明るく上へ淡く尾を引く）で表現し、
   background-position を正弦波イージングで動かして、ゆっくり→中ほど速く→ゆっくり降ろす */
.hero__scroll::after {
  content: ""; width: 2px; height: 52px; border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.16);
  /* 明暗が連続的に上→下へ移り変わる「波」の1周期分のグラデーション。
     0%と100%を両方transparentにして継ぎ目なくタイル化できるようにする */
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 160, 233, 0.18) 16%,
    rgba(0, 160, 233, 0.55) 32%,
    var(--accent) 44%,
    #eaf7ff 50%,
    var(--accent) 56%,
    rgba(0, 160, 233, 0.55) 68%,
    rgba(0, 160, 233, 0.18) 84%,
    transparent 100%
  );
  background-repeat: repeat-y;
  background-size: 100% 68px;
  animation: scrollWave 3.4s linear infinite;
}
/* 波の1周期分（68px）だけ背景位置を動かし続ける＝継ぎ目もポーズもなく、
   上から下へなめらかに色が移り変わり続ける無限ループになる */
@keyframes scrollWave {
  from { background-position: 0 -68px; }
  to   { background-position: 0 0; }
}
/* スクロール誘導は操作の手がかりのため、末尾の全アニメ一律停止ルールより高い詳細度＋!important で動きを保つ（進行バーと同方針） */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after {
    animation-name: scrollWave !important;
    animation-duration: 3.4s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}

/* ヒーロー直下の統計バー */
.stats-bar { background: var(--navy); color: #fff; position: relative; }
.stats-bar__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-inline: 1px solid rgba(255, 255, 255, 0.12);
}
.stats-bar__item {
  padding: 1.6rem 1rem; text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.stats-bar__item:nth-child(2n) { border-right: none; }
.stats-bar__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.stats-bar__num {
  /* 数字はOswald（縦長の工業系書体）。Outfitの丸いデジットより精悍に見える */
  font-family: var(--ff-num); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 600; letter-spacing: 0.05em; line-height: 1.2; color: #fff;
}
.stats-bar__num .unit { font-size: 0.45em; font-weight: 600; color: #8FD4FF; margin-left: 0.15em; }
.stats-bar__label { margin-top: 0.3em; font-size: var(--fs-xs); color: var(--on-navy-soft); letter-spacing: 0.12em; }
@media (min-width: 768px) {
  .stats-bar__grid { grid-template-columns: repeat(4, 1fr); }
  .stats-bar__item:nth-child(-n+2) { border-bottom: none; }
  .stats-bar__item:nth-child(2n) { border-right: 1px solid rgba(255, 255, 255, 0.12); }
  .stats-bar__item:last-child { border-right: none; }
}

/* ---- 8. ページヒーロー（下層） ---- */
.page-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(240px, 36vh, 380px);
  background: linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 55%, var(--brand-deep) 100%);
  color: #fff; overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(7, 13, 38, 0.92) 10%, rgba(13, 22, 66, 0.55) 60%, rgba(44, 50, 114, 0.35) 100%);
}

/* PCでは右側の暗幕を薄くして、背景写真を見せる（2026-08-02）。

   従来は写真を opacity 0.5 にしたうえで暗幕を重ねていたため、
   最終的な色に写真が占める割合は右端でも32%しかなく、ほぼ紺の単色に見えていた。

   モバイルを据え置く理由：文字の右端は PC で59%までだが、モバイルでは94%まで回り込む。
   モバイルで右を明るくすると本文が読めなくなるので、900px以上でのみ効かせる。

   数値の根拠（使用中の背景7枚すべて・文字が届く59%までの最悪値）:
     .page-hero__en (#8FD4FF 14.4px) … 5.4:1（AA 4.5:1）★ここが一番きつい
     .page-hero__title (#fff 41.6px) … 8.8:1（大文字扱い 3.0:1）
     .page-hero__lead (白88% 16px)   … 7.2:1（AA 4.5:1）
   これより薄くする案（右端0.08）も試したが en が4.8:1まで下がるため採用しなかった。
   背景写真を追加・変更したときは、この最悪値を測り直すこと。 */
@media (min-width: 900px) {
  .page-hero__bg img { opacity: 1; }
  .page-hero__bg::after {
    background: linear-gradient(95deg,
      rgba(7, 13, 38, 0.86) 10%,
      rgba(13, 22, 66, 0.58) 62%,
      rgba(44, 50, 114, 0.15) 100%);
  }
}
.page-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: 3.2rem 2.6rem; }
.page-hero__en {
  font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: #8FD4FF;
}
.page-hero__title { font-size: var(--fs-2xl); font-weight: 900; margin-top: 0.3em; }
.page-hero__lead { margin-top: 0.8em; max-width: 44em; color: rgba(255,255,255,0.88); font-size: var(--fs-base); }

/* パンくず */
.breadcrumb { background: var(--base-soft); border-bottom: 1px solid var(--line-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4em; padding-block: 0.7em; font-size: var(--fs-xs); color: var(--ink-muted); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.4em; color: #9AA3BF; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--brand); }

/* ---- 9. セクション見出し ---- */
.sec-head { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.sec-head__en {
  display: block; font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text);
}
.section--navy .sec-head__en { color: #8FD4FF; }
.sec-head__title { font-size: var(--fs-2xl); font-weight: 900; margin-top: 0.25em; color: var(--navy); }
.section--navy .sec-head__title { color: #fff; }
.sec-head__lead { margin-top: 1em; max-width: 46em; color: var(--ink-soft); }
/* 見出しを「前半 — 後半」の形にするとき（採用情報「仕事を知る — クルマの骨格ができるまで」）。
   859px 以下は「—」を出さずに後半を次の行にする（スマホで行の終わりに「—」だけが残っていた。2026-10-29） */
@media (max-width: 859px) {
  .sec-head__dash { display: none; }
  .sec-head__rest { display: block; }
}
.section--navy .sec-head__lead { color: var(--on-navy-soft); }
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__lead { margin-inline: auto; }
/* 2カラム内の見出しはセクション用の大きな余白を使わない */
.split__body .sec-head { margin-bottom: 1.2rem; }
/* 写真帯（feature-band）上の見出し配色 */
.feature-band .sec-head__en { color: #8FD4FF; }
.feature-band .sec-head__title { color: #fff; }
.feature-band .sec-head__lead { color: rgba(255, 255, 255, 0.88); }

/* 中見出し（ページ内区切り） */
.sub-head {
  display: flex; align-items: center; gap: 0.7em;
  font-size: var(--fs-xl); font-weight: 700; color: var(--navy);
  margin-bottom: 1.2rem;
}
.sub-head::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--brand)); flex: none; }

/* ---- 10. 数字で見る ---- */
.num-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
/* 中身に合わせて列が広がらないようにする（Safari は .nb・.ph が並んだ文の「これ以上狭くならない幅」を広く数え、採用情報の「数字で見る」がスマホで横にはみ出していた。2026-10-29） */
.num-grid > * { min-width: 0; }
@media (min-width: 768px) { .num-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) and (max-width: 999px) { .num-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .num-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.num-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.6rem 1.2rem; text-align: center; box-shadow: var(--shadow-sm);
}
.num-card__icon {
  width: 48px; height: 48px; margin: 0 auto 0.7rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px; color: var(--brand);
  background: linear-gradient(135deg, var(--accent-pale), #d5e6fb);
}
.num-card__icon svg { width: 25px; height: 25px; }
.num-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.num-card__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); }
.num-card__value {
  font-family: var(--ff-num); font-size: var(--fs-num); font-weight: 600; line-height: 1.15;
  color: var(--brand); letter-spacing: 0.04em;
}
.num-card__value .unit { font-size: 0.4em; font-weight: 700; color: var(--ink-soft); margin-left: 0.1em; }
.num-card__note { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 0.3em; }
/* 「数字で見る」6カードは背景画像なし（2026-08-01 に bg-numbers-*.jpg を廃止） */
/* 「数字で見る」のみ、アイコン・タイトル・数字・注記をすべて左揃えに統一（他セクションのicon-cardパターンと統一） */
#numbers .num-card { text-align: left; padding: 1.3rem 1.2rem; }
/* スマホの2列（320〜420px）では大きな数字が「約｜610｜名」と3行に折れていた（2026-10-29）。
   1行に収め、狭い画面だけ画面幅に合わせて少し小さくする（768px 以上は今までどおり --fs-num） */
#numbers .num-card__value { white-space: nowrap; font-size: clamp(1.6rem, 8.4vw, var(--fs-num)); }
#numbers .num-card__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.8rem; }
#numbers .num-card__icon { width: 52px; height: 52px; margin: 0; flex-shrink: 0; }
#numbers .num-card__icon svg { width: 27px; height: 27px; }
#numbers .num-card__label { margin: 0; font-size: 0.95rem; }
/* 2列表示（1000px未満）はカード幅が狭く、ラベルが長いと横並びでは折り返って高さが不揃いになるため、アイコン上・ラベル下の縦並びに切り替える */
@media (max-width: 999px) {
  #numbers .num-card__head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}
/* 「数字で見る」セクション（recruit.html）はカードが6枚のため、4列だと最終行が2枚だけ余って中途半端になる。3列（2行×3列）に変更 */
@media (min-width: 1000px) { #numbers .num-grid--4 { grid-template-columns: repeat(3, 1fr); } }
/* カード全体をデザイン画像で表示する型（内容は img の alt が担う） */
.num-card--visual { padding: 0; overflow: hidden; }
.num-card--visual img { display: block; width: 100%; height: auto; }

/* ---- 10.5 データビジュアライゼーション（dviz） ---- */
.dviz-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .dviz-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .dviz-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dviz-grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* 3枚の並び（サステナビリティ。年齢構成のグラフを一旦外したため。2026-11-05）。2列の幅では3枚目を横いっぱいにして空きを作らない */
@media (min-width: 700px) { .dviz-grid--3 { grid-template-columns: repeat(2, 1fr); } .dviz-grid--3 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .dviz-grid--3 { grid-template-columns: repeat(3, 1fr); } .dviz-grid--3 > :last-child { grid-column: auto; } }
.dviz {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
}
.dviz__title { font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin-bottom: 1.1rem; }
.dviz__note { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 0.9rem; }
.dviz__note--tentative { color: var(--accent-text); }

/* ピクトグラム比率（例：男女比率） */
.dviz-picto { display: flex; justify-content: center; gap: clamp(1.4rem, 5vw, 3rem); text-align: center; }
.dviz-picto__item { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.dviz-picto__circle {
  width: clamp(68px, 9vw, 88px); height: clamp(68px, 9vw, 88px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--brand);
}
.dviz-picto__item--b .dviz-picto__circle { background: var(--accent); }
.dviz-picto__circle svg { width: 52%; height: 52%; color: #fff; }
.dviz-picto__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); }
.dviz-picto__value { font-family: var(--ff-num); font-size: clamp(1.5rem, 2vw, 2.1rem); font-weight: 600; letter-spacing: 0.04em; color: var(--navy); }

/* 積み上げバー（例：従業員内訳） */
.dviz-stack__bar { display: flex; width: 100%; height: 38px; border-radius: 999px; overflow: hidden; }
.dviz-stack__seg { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; }
.dviz-stack__legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; margin-top: 1rem; font-size: var(--fs-xs); color: var(--ink-soft); }
.dviz-stack__legend span { display: inline-flex; align-items: center; gap: 0.45em; }
.dviz-stack__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }

/* 棒グラフ（例：年齢構成・初任給・採用実績）
   棒は専用トラック（残り高さ全部）の中で伸ばす。ラベルと同じフレックス領域に置くと
   高い棒だけflex-shrinkで圧縮されて比率が崩れるため、必ず .dviz-bars__track で包むこと */
/* 2026-08-01 修正：Flexbox で組んでいたため、棒の高さが実データとズレていた。

   各列を独立した flex コンテナにしていたので、ラベルが2行に折り返した列だけ
   トラック（棒の入れ物）が縮んでいた。棒の高さは「トラックに対する%」なので、
   トラックの高さが違えば同じ%でも別の高さになる。
   実測（894px幅・年齢構成グラフ）:
     〜29歳 32%→70px / 30〜39歳 27%→46px / 40〜49歳 22%→38px / 50〜59歳 14%→24px / 60歳〜 5%→11px
     ラベル1行の列はトラック109px、2行の列は85px。中間3世代が本来より2割ほど低く描かれていた。

   Grid にして「値の行」「棒の行」「ラベルの行」を全列で共通にすれば、
   ラベルが何行になってもトラックの高さは揃う。子は display:contents で
   列のラッパーを消し、3つの要素を直接グリッドに置く。 */
.dviz-bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(0.5rem, 2vw, 1.2rem); height: 170px;
}
.dviz-bars__col { display: contents; }
.dviz-bars__value { font-size: var(--fs-xs); font-weight: 700; color: var(--navy); margin-bottom: 0.4em; white-space: nowrap; text-align: center; }
.dviz-bars__track { justify-self: center; width: 100%; max-width: 44px; height: 100%; display: flex; align-items: flex-end; }
.dviz-bars__fill { width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), var(--brand)); }
.dviz-bars__label { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 0.6em; text-align: center; }

/* 進捗バー（例：有給休暇の取得率） */
.dviz-progress__value { font-family: var(--ff-num); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: 0.04em; color: var(--navy); margin-bottom: 0.5rem; }
.dviz-progress__track { width: 100%; height: 14px; border-radius: 999px; background: var(--base-blue); overflow: hidden; }
.dviz-progress__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* 対の数字（例：賞与内訳） */
.dviz-pair { display: flex; gap: 0.9rem; text-align: center; }
.dviz-pair__item { flex: 1; padding: 1rem 0.6rem; background: var(--base-blue); border-radius: var(--radius); }
.dviz-pair__label { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }
.dviz-pair__value { font-family: var(--ff-num); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: 0.04em; color: var(--brand); }

/* ミニ財務スタット（例：会社概要ページの経営指標） */
.dviz-mini-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.dviz-mini { background: var(--base-blue); border-radius: var(--radius-lg); padding: 1.3rem 1.2rem; text-align: center; }
.dviz-mini__value { font-family: var(--ff-num); font-size: var(--fs-num); font-weight: 600; letter-spacing: 0.04em; color: var(--brand); line-height: 1.15; }
.dviz-mini__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); margin-top: 0.3em; }

.dviz-mini__value .unit,
.dviz-picto__value .unit,
.dviz-progress__value .unit,
.dviz-pair__value .unit {
  font-size: 0.4em; font-weight: 700; color: var(--ink-soft); margin-left: 0.1em;
}

/* ---- 10.6 数字グラフ（nviz）：recruit.html「数字で見る東プレ九州」専用 ----
   2026-08-01 追加／同日リデザイン。
   上の .dviz- 系は company.html / sustainability.html でも使われているため、
   そちらは一切変更せず、別クラスとして並存させている。

   設計方針（他社の「数字で見る」を調査して得た結論）:
   1. 数字だけを置かない。必ず 2〜3行の説明文（.nviz__desc）を添える。
      数字の羅列は不親切なうえ、説明が無いとカード内の余白が「空き」に見える。
   2. 4枚すべて「タイトル → 図 → 説明文 → 注記」の同じ骨格にする。
      図の領域（.nviz__fig）だけ高さを固定し、行内でグラフの高さが揃うようにする。
   3. 数字は2つ並べるときハイライン1本で区切るだけにし、箱で囲まない。
   伸びるアニメーションは JS を足さず、既存の .reveal → .is-visible に相乗りしている。
   数値は inline style のカスタムプロパティ（--h / --w / --p）で HTML 側に持たせるので、
   数字を直すときに CSS を触る必要はない。 */
.nviz-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .nviz-grid { grid-template-columns: repeat(2, 1fr); } }

.nviz {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.3rem, 2.5vw, 1.9rem) 1.3rem;
  box-shadow: var(--shadow-sm);
}
.nviz__title { text-align: center; font-size: var(--fs-md); font-weight: 700; color: var(--navy); line-height: 1.5; }
.nviz__title::after {
  content: ""; display: block; width: 34px; height: 3px; margin: 0.75em auto 0;
  border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent));
}
/* 図の領域。高さを固定して、横に並ぶカード同士でグラフの天地を揃える。
   align-items は stretch。中身を領域いっぱいに広げないと、数字が2つだけのカードで
   上下に大きな空きができてしまう（区切り線も図の高さいっぱいに通したい）。 */
.nviz__fig { min-height: 208px; margin-top: 1.5rem; display: flex; align-items: stretch; justify-content: center; }
.nviz__desc { font-size: var(--fs-sm); line-height: 1.95; color: var(--ink-soft); margin-top: 1.5rem; }
.nviz__note {
  font-size: var(--fs-xs); color: var(--ink-muted); text-align: right; line-height: 1.75;
  margin-top: auto; padding-top: 1.1rem;
}

/* 棒グラフ：Flexbox で組むと、ラベルが折り返した列だけトラックが縮んで
   棒の比率が実データとズレる（375px 幅で 50:75:86 になっていた）。
   Grid で全列のラベル行の高さを共通にして、比率を保証している。 */
.nviz-bars {
  width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  grid-template-rows: 1fr auto; gap: 0 clamp(0.6rem, 2.5vw, 1.4rem);
}
.nviz-bars__col { display: contents; }
.nviz-bars__track {
  justify-self: center; width: 100%; max-width: 68px; height: 100%;
  display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-soft);
}
.nviz-bars__fill {
  width: 100%; height: 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #6FB6EC, var(--brand));
  display: flex; align-items: flex-start; justify-content: center;
  transition: height 1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.18s;
}
.reveal.is-visible .nviz-bars__fill { height: var(--h); }
.nviz-bars__col--hi .nviz-bars__fill { background: linear-gradient(180deg, #37A0F0, var(--accent)); }
.nviz-bars__num {
  font-family: var(--ff-num); font-size: 1.45rem; font-weight: 600; color: #fff;
  letter-spacing: 0.03em; margin-top: 0.5em; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.nviz-bars__num .unit { font-size: 0.52em; margin-left: 0.12em; }
.nviz-bars__label { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 0.75em; text-align: center; font-weight: 700; }
.nviz-badge {
  display: inline-block; margin-top: 0.5em; padding: 0.28em 0.72em; border-radius: 999px;
  font-size: 0.71rem; font-weight: 700; background: var(--base-blue); color: var(--brand);
}
.nviz-badge--full { background: var(--accent); color: #fff; }

/* 2つの数字を並べる列。箱で囲まず、間にハイライン1本だけ引く */
.nviz-duo { width: 100%; display: flex; align-items: stretch; }
/* グリッドの 1fr / auto で「図の行」と「ラベルの行」を分ける。
   フレックスの中央揃えだと、背の高いリングと1行の数字とでラベルの高さがズレる。 */
.nviz-duo__item {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center; gap: 0.6rem; padding: 0.7rem 0.5rem;
}
.nviz-duo__item + .nviz-duo__item { border-left: 1px solid var(--line-soft); }
.nviz-duo__value {
  font-family: var(--ff-num); font-size: clamp(2.6rem, 5.6vw, 3.7rem); font-weight: 600;
  color: var(--brand); letter-spacing: 0.03em; line-height: 1; white-space: nowrap;
}
.nviz-duo__value .unit { font-size: 0.34em; font-weight: 700; color: var(--ink-soft); margin-left: 0.12em; }
.nviz-duo__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); text-align: center; }

/* リング（％）。同じカードの右側に並ぶ .nviz-duo__value と字の大きさを揃えること。
   リングの内径は「直径 － stroke×2」。数字がそこに収まる範囲で最大化している。 */
/* 上限150px。.nviz__fig（208px）からラベル行と余白を引いた「図の行」が約158pxなので、
   これを超えると行が押し広げられ、隣のカードとラベルの高さがズレる。 */
.nviz-ring { position: relative; width: min(150px, 100%); aspect-ratio: 1; }
.nviz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nviz-ring__bg { fill: none; stroke: var(--base-blue); stroke-width: 9; }
/* 283 ＝ 2πr（r=45）。--p に％の数値をそのまま入れると塗りの長さになる */
.nviz-ring__fg {
  fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 283px;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.18s;
}
.reveal.is-visible .nviz-ring__fg { stroke-dashoffset: calc(283px - 2.83px * var(--p)); }
.nviz-ring__val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-num); font-size: clamp(1.9rem, 4.6vw, 2.6rem); font-weight: 600;
  color: var(--brand); letter-spacing: 0.03em;
}
.nviz-ring__val .unit { font-size: 0.38em; font-weight: 700; margin-left: 0.06em; color: var(--ink-soft); }

/* 社員構成：大きな数字＋男女比の帯 */
.nviz-stat { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem; }
.nviz-stat__main { text-align: center; display: flex; flex-direction: column; gap: 0.5rem; }
.nviz-stat__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.nviz-stat__value {
  font-family: var(--ff-num); font-size: clamp(3.2rem, 6.5vw, 4.4rem); font-weight: 600;
  color: var(--brand); letter-spacing: 0.03em; line-height: 1;
}
.nviz-stat__value .unit { font-size: 0.28em; font-weight: 700; color: var(--ink-soft); margin-left: 0.12em; }
.nviz-split { width: 100%; }
.nviz-split__bar { display: flex; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; background: var(--base-blue); }
.nviz-split__seg { height: 100%; width: 0; transition: width 1s cubic-bezier(0.22, 0.9, 0.3, 1) 0.18s; }
.reveal.is-visible .nviz-split__seg { width: var(--w); }
.nviz-split__seg--m { background: linear-gradient(90deg, #6FB6EC, var(--brand)); }
.nviz-split__seg--f { background: var(--accent); }
.nviz-split__legend {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem;
  font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700;
}
.nviz-split__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.45em; vertical-align: middle; }
.nviz-split__legend i.m { background: var(--brand); }
.nviz-split__legend i.f { background: var(--accent); }

@media (max-width: 559px) {
  .nviz__fig { min-height: 190px; }
  .nviz-duo__item { padding: 0 0.35rem; }
  .nviz-stat { gap: 1.8rem; }
}

/* ---- 11. カード群 ---- */
.card-grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 680px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease;
}
a.card:hover, .card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--base-blue); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
a.card:hover .card__media img { transform: scale(1.05); }
.card__media--icon { display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, var(--base-blue) 0%, #EEF2FA 100%); padding-top: 0.6rem; }
.card__media--icon img { width: auto; height: 94%; max-width: 84%; object-fit: contain; transition: transform var(--dur-slow) var(--ease); }
a.card:hover .card__media--icon img { transform: scale(1.05) translateY(-2px); }
/* 拠点カードのGoogleマップ埋め込み */
.map-embed { aspect-ratio: 4 / 3; overflow: hidden; background: var(--base-blue); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-embed--wide { aspect-ratio: 3 / 1; }
@media (max-width: 640px) { .map-embed--wide { aspect-ratio: 4 / 3; } }
.card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card__en { font-family: var(--ff-en); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.2em; color: var(--accent-text); text-transform: uppercase; }
.card__title { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); }
a.card .card__title { color: var(--navy); }
.card__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.85; }
/* 採用情報のエントリー欄の2枚のカード（2026-10-29）：ボタンをカードの下でそろえる。新卒のカードはボタンの上にマイナビのバナー */
.entry-cards__cta { margin-top: auto; padding-top: 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.entry-cards__banner { display: block; line-height: 0; transition: opacity var(--dur) ease; }
.entry-cards__banner:hover { opacity: 0.8; }
.entry-cards__banner img { width: 200px; height: auto; }
.card__more {
  margin-top: auto; padding-top: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand);
}
.card__more::after {
  content: ""; width: 0.5em; height: 0.5em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
  transition: transform var(--dur-fast) ease;
}
a.card:hover .card__more { color: var(--accent-deep); }
a.card:hover .card__more::after { transform: rotate(45deg) translate(2px, -2px); }

/* アイコン付きミニカード（福利厚生等） */
.icon-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
}
.icon-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-pale), #d5e6fb);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); margin-bottom: 0.9rem; flex: none;
}
.icon-card__icon svg { width: 26px; height: 26px; }
.icon-card__icon--img { width: 150px; height: 150px; background: none; }
.icon-card__icon--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
/* 働く環境・保護者セクションの「左アイコン＋右にタイトルと本文」レイアウト。

   2026-08-01 修正：以前は本文だけ grid-column: 1 / -1 で全幅に伸ばしていたため、
   1枚のカードの中に左端が2つ（タイトル99px / 本文23px）できていた。
   これがカードの安っぽさの主因だったので、本文もタイトルと同じ2列目に入れて左端を1本に統一する。
   アイコンは2行ぶちぬき＋上揃えにして、タイトルの高さに頭を合わせる。 */
#workplace .icon-card,
#family .icon-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start; /* カード高さが揃えられた際、内部の2行が間延びしないよう上詰めにする */
}
#workplace .icon-card__icon,
#family .icon-card__icon {
  grid-column: 1; grid-row: 1 / 3;
  align-self: start; margin-bottom: 0;
}
#workplace .icon-card__title,
#family .icon-card__title { grid-column: 2; grid-row: 1; margin-bottom: 0; }
#workplace .icon-card__text,
#family .icon-card__text { grid-column: 2; grid-row: 2; margin-top: 0.55rem; }

#workplace .icon-card { column-gap: 1.1rem; }
#workplace .icon-card__icon { width: 50px; height: 50px; border-radius: 13px; }
#workplace .icon-card__icon svg { width: 26px; height: 26px; }
/* タイトルが2行に折り返すと行間バランスが崩れるため、この幅の3カラムカードで1行に収まるサイズに調整 */
#workplace .icon-card__title { font-size: 1.05rem; }
/* タブレット（680〜899px）は2列（3段）。1列だと6枚が横に間延びしていた（2026-10-29） */
@media (min-width: 680px) and (max-width: 899px) { #workplace .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }

#family .icon-card { column-gap: 1.25rem; }
#family .icon-card__icon { width: 58px; height: 58px; border-radius: 15px; }
#family .icon-card__icon svg { width: 30px; height: 30px; }
.icon-card__title { font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.icon-card__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.85; }
/* カード全体をデザイン画像で表示する型（内容は img の alt が担う） */
.icon-card--visual { padding: 0; overflow: hidden; border: none; }
.icon-card--visual img { display: block; width: 100%; height: auto; }
/* 上部を写真、下部をライブテキストにする型（文字位置をCSSで自由に調整できる） */
.icon-card--photo { padding: 0; overflow: hidden; border: none; }
.icon-card--photo > img { display: block; width: 100%; height: auto; }
.icon-card--photo .icon-card__body { padding: 0.9rem 1.5rem 1.6rem; }
.icon-card--photo .icon-card__title { margin-bottom: 0.5rem; }

/* ---- 12. スプリット（画像＋テキスト2カラム） ---- */
.split { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
/* 中身に合わせて列が広がらないようにする。Safari は .nb で区切った見出しの「これ以上狭くならない幅」を見出し全体の幅と数え、
   バーチャル工場見学のストップの欄が画面より広がって、ページが横にはみ出していた（スマホで約160px。2026-10-29） */
.split > * { min-width: 0; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .split__media { order: 2; }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}
.split__media { position: relative; z-index: 0; } /* z-index:0 が無いと装飾が色付き背景の裏に隠れる */
.split__media .img-frame { aspect-ratio: 4 / 3; }
@media (max-width: 859px) { .split__media { max-width: 640px; } }
.split__media--tall .img-frame { aspect-ratio: 3 / 4; }
/* 映像を2つ縦に並べる欄（バーチャル工場見学 Stop 02：技術センターの空撮と金型づくり。2026-10-31）。
   4:3 のまま2つ重ねると左の文より縦に長くなるので、どちらも 16:9 にする（映像そのものも 16:9 なので切れない） */
.split__media--stack { display: grid; gap: 14px; }
.split__media--stack .img-frame { aspect-ratio: 16 / 9; }
.split__deco {
  position: absolute; z-index: -1; inset: auto -14px -14px auto; width: 55%; height: 55%;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, var(--line-soft) 0 2px, transparent 2px 9px);
}
.split__body h3 { font-size: var(--fs-xl); color: var(--navy); margin-bottom: 0.8rem; }
.split__body p + p { margin-top: 0.9em; }

/* チェックリスト */
.check-list li {
  position: relative; padding-left: 1.9em; margin-top: 0.55em;
  font-weight: 500; color: var(--ink-soft);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: var(--brand);
}
.check-list li::after {
  content: ""; position: absolute; left: 0.30em; top: 0.68em;
  width: 0.55em; height: 0.3em;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---- 13. 帯（フィーチャー・CTA） ---- */
.feature-band { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; }
.feature-band__bg { position: absolute; inset: 0; }
.feature-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.feature-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,13,38,0.9), rgba(7,13,38,0.35)); }

/* 「左に文字・右に写真を見せる」型（2026-08-01 追加）。

   既定の帯は写真を opacity 0.35 にしたうえで暗幕を重ねているため、
   最終的な色に写真が占める割合は左端3.5%・右端22.7%しかなく、ほぼ紺の単色に見えていた。
   一方で文字のコントラスト比は13.5:1〜17.2:1あり、AA基準4.5:1の3〜4倍の余裕があった。
   そこで文字が届かない右側だけ暗幕を薄くして、写真を見せる。

   PC限定にしている理由：文字の右端は PC で62%までだが、モバイルでは94%まで回り込む。
   モバイルで右を明るくすると文字が読めなくなるので、900px以上でのみ効かせる。
   recruit.html の #entry は中央寄せで文字が20〜80%に広がるため、この型は使わない。

   数値の根拠（1470MPa帯・文字が届く62%までの最悪値で判定）:
     本文 rgba(255,255,255,.85) 通常サイズ … 6.6:1（AA基準 4.5:1）
     見出し #fff 太字            … 8.4:1（大文字扱い 3.0:1）
     大きな数字のグラデ最暗端 #6FC8FF … 4.6:1（大文字扱い 3.0:1）
   右端は写真がほぼ素の明るさ（寄与88%）で出る。 */
@media (min-width: 900px) {
  .feature-band--split .feature-band__bg img { opacity: 1; }
  .feature-band--split .feature-band__bg::after {
    background: linear-gradient(90deg,
      rgba(7, 13, 38, 0.82) 0%,
      rgba(7, 13, 38, 0.80) 55%,
      rgba(7, 13, 38, 0.48) 76%,
      rgba(7, 13, 38, 0.12) 100%);
  }
}
.feature-band__inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6rem); }
/* 何の数値かを示す小さなラベル。サイト共通のアイブロウ（.hero__eyebrow）と同じ作法 */
.feature-band__eyebrow {
  display: inline-flex; align-items: center; gap: 0.8em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.24em;
  color: #8FD4FF; margin-bottom: 1.1rem;
}
.feature-band__eyebrow::before { content: ""; width: 2.4em; height: 1px; background: var(--accent); }
/* 数字は Oswald（--ff-num）。縦長の工業系書体で、Outfitの丸いデジットより精悍に見える。
   Oswaldは weight 600 のみ読み込んでいるため、600 以外を指定しない（偽ボールドを避ける） */
.feature-band__num {
  font-family: var(--ff-num); font-weight: 600; line-height: 0.95;
  font-size: clamp(3.8rem, 2rem + 9vw, 8.5rem); letter-spacing: 0.01em;
  background: linear-gradient(96deg, #FFFFFF 12%, #DCEEFF 46%, #6FC8FF 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* 背景写真から数字を持ち上げる。text-shadow は文字が透明なため使えないので filter で掛ける */
  filter: drop-shadow(0 10px 28px rgba(7, 13, 38, 0.5));
}
/* 単位は小さく字間で効かせる。グラデーションの終端にあたるためシアンに寄って出る */
.feature-band__num .unit { font-size: 0.3em; letter-spacing: 0.06em; margin-left: 0.14em; }
.feature-band__caption { margin-top: 0.8rem; font-size: var(--fs-lg); font-weight: 700; }
.feature-band__text { margin-top: 0.8rem; max-width: 42em; color: rgba(255,255,255,0.85); font-size: var(--fs-base); }

/* コミットメント帯（サステナビリティ）: 左が暗く右に絵柄がある背景画像用 */
.feature-band--commitment .feature-band__bg img { opacity: 1; object-position: right center; }
.feature-band--commitment .feature-band__bg::after {
  /* 4段グラデーションのスクリム: 文字下は濃く、絵柄側へ自然に減衰（縞防止に同色rgbaの0で終端） */
  background: linear-gradient(100deg,
    rgba(7, 13, 38, 0.85) 0%,
    rgba(7, 13, 38, 0.70) 35%,
    rgba(7, 13, 38, 0.38) 58%,
    rgba(7, 13, 38, 0) 78%);
}
.feature-band--commitment .feature-band__inner { padding-block: clamp(4rem, 10vw, 7rem); }

/* ラベルは小さく字間で効かせ、言葉（見出し）を主役にする */
.commitment-label {
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem);
  font-weight: 600; letter-spacing: 0.22em;
  color: #8FD4FF; margin-bottom: 1rem;
}
.commitment-heading {
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700; line-height: 1.55; letter-spacing: 0.05em;
  color: #fff; max-width: 22em;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.commitment-body {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 2.0; letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.88); max-width: 34em;
}
.commitment-body p + p { margin-top: 1.5em; }
/* 文節改行はPCのみ有効（スマホでは成り行きで折り返し、半端な行を防ぐ） */
.pc-br { display: none; }
@media (min-width: 768px) { .pc-br { display: inline; } }
.commitment-sign { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.commitment-sign__role {
  display: block; font-size: 0.8125rem; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72); margin-bottom: 0.4em;
}
.commitment-sign__name {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 700; letter-spacing: 0.2em; color: #fff;
}
@media (max-width: 767px) {
  /* モバイルでは絵柄（右側）を中心に見せつつ、全面を暗くして可読性を確保 */
  .feature-band--commitment .feature-band__bg img { object-position: 70% center; }
  .feature-band--commitment .feature-band__bg::after {
    background: linear-gradient(180deg, rgba(7, 13, 38, 0.78) 0%, rgba(7, 13, 38, 0.6) 100%);
  }
}

/* クルマ社会帯（トップ・About直後の成果/受け）: 淡い画像に濃紺の左寄せ文字（1470帯とは真逆の明るい設計） */
.feature-band--society {
  display: flex; align-items: center;
  min-height: clamp(340px, 40vw, 560px);
  background: var(--base-soft); color: var(--ink);
}
.feature-band--society .feature-band__bg img { opacity: 1; object-position: right center; }
.feature-band--society .feature-band__bg::after {
  /* 左を淡く覆い文字の可読性を確保し、右の絵柄（クルマ）へ自然に減衰 */
  background: linear-gradient(90deg,
    rgba(247, 249, 252, 0.90) 0%,
    rgba(247, 249, 252, 0.72) 26%,
    rgba(247, 249, 252, 0.30) 48%,
    rgba(247, 249, 252, 0) 64%);
}
.feature-band--society .feature-band__inner { width: 100%; }
.society-band__text-wrap { max-width: 46%; }
.society-band__label {
  font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--brand);
}
.society-band__title {
  margin-top: 0.5em;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.375rem);
  font-weight: 900; line-height: 1.55; letter-spacing: 0.04em;
  color: var(--navy-deep);
}
.society-band__lead {
  margin-top: 1.1em; max-width: 24em;
  font-size: var(--fs-base); line-height: 1.9; letter-spacing: 0.02em;
  color: var(--ink-soft); line-break: strict;
}
/* 文節単位で折り返し、単語の途中や行頭の句読点で切れないようにする */
/* 文節単位で折り返す共通ユーティリティ（単語の途中や行頭の句読点で切れるのを防ぐ） */
.nb { white-space: nowrap; }
/* .ph：意味のまとまり（※素材/制作ツール/文のまとまりで折る_2026-10-29.py が入れる）。その中では折らず、まとまりの間でだけ折る。
   前の作り（.bx：文節ごとの <wbr> と word-break: keep-all）は、Safari で効き方がちがい「ここが「｜工場」「承ります｜。」と折れたため、
   2026-10-29 夜にバーチャル工場見学と採用情報をこの作りに替え、.bx は外した */
.ph { white-space: nowrap; }
/* まとまりの後ろに、折ってよい所の印（幅0の空白）を CSS で足す。Safari は印が無いと、まとまりが並んだ文の「これ以上狭くならない幅」を
   文全体の幅と数え、見学の流れの箱などが画面より広がっていた（タブレットで約130px）。画面には出ず、コピーした文にも入らない */
.ph::after { content: "\200B"; white-space: normal; }
/* .tw-balance：中央にそろえた長い文の行の長さをそろえる（621px 以上。620px 以下は .sp-left で左揃えになるので使わない）。2026-10-29 バーチャル工場見学の導入の文・注意書き */
@media (min-width: 621px) { .tw-balance { text-wrap: balance; } }
/* br.br-pc：パソコン・タブレット（621px 以上）だけで改行する。スマホは文のまとまりで自然に折る（2026-10-29 バーチャル工場見学の導入の文） */
@media (max-width: 620px) { br.br-pc { display: none; } }
/* .nb-pc：700px 以上だけ折らない（長い言葉を、狭い画面でだけ継ぎ目で折る。採用情報の職種のカード「フルオートプレス｜ライン」など。2026-10-29） */
@media (min-width: 700px) { .nb-pc { white-space: nowrap; } }
@media (max-width: 900px) {
  .society-band__text-wrap { max-width: 62%; }
}
@media (max-width: 767px) {
  .feature-band--society { align-items: flex-start; min-height: clamp(360px, 82vw, 470px); }
  .feature-band--society .feature-band__bg img { object-position: 72% center; }
  .feature-band--society .feature-band__bg::after {
    /* 本文（51〜74%位置）が明るい道路・車と重なっても読めるよう、その帯域は不透明度0.5以上を維持 */
    background: linear-gradient(180deg,
      rgba(247, 249, 252, 0.93) 0%,
      rgba(247, 249, 252, 0.80) 30%,
      rgba(247, 249, 252, 0.62) 55%,
      rgba(247, 249, 252, 0.50) 78%,
      rgba(247, 249, 252, 0.22) 100%);
  }
  .society-band__text-wrap { max-width: 100%; }
  .society-band__lead { max-width: 30em; }
}

.cta-band { background: linear-gradient(120deg, var(--brand-deep), var(--brand) 55%, var(--accent-deep)); color: #fff; }
.cta-band__inner {
  padding-block: clamp(2.8rem, 6vw, 4.2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.cta-band__title { font-size: var(--fs-xl); font-weight: 900; }
.cta-band__title small { display: block; font-family: var(--ff-en); font-size: var(--fs-xs); letter-spacing: 0.3em; color: #BCE6FF; margin-bottom: 0.5em; text-transform: uppercase; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* 認証バッジ帯 */
.cert-band { background: var(--base-blue); border-block: 1px solid var(--line-soft); }
.cert-band__inner { padding-block: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.cert-band__note { width: 100%; text-align: center; font-size: var(--fs-xs); color: var(--ink-muted); }
.cert-badge { display: flex; align-items: center; gap: 0.7em; }
.cert-badge__mark {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 2px solid var(--brand); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-en); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
}
.cert-badge__name { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.cert-badge__desc { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-muted); }

/* ---- 14. 沿革タイムライン ---- */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.timeline__item { position: relative; padding: 0 0 1.8rem 1.4rem; }
.timeline__item::before {
  content: ""; position: absolute; left: -1.6rem; top: 0.5em;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand);
}
.timeline__year { font-family: var(--ff-en); font-size: var(--fs-lg); font-weight: 700; color: var(--brand); line-height: 1.3; }
.timeline__year small { font-size: 0.6em; color: var(--ink-muted); font-weight: 500; margin-left: 0.6em; }
.timeline__body { margin-top: 0.2em; color: var(--ink-soft); }
.timeline__body strong { color: var(--ink); }

/* ---- 15. 情報テーブル ---- */
.info-table { border-top: 1px solid var(--line); }
.info-table th, .info-table td {
  padding: 1em 1.2em; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top; font-size: var(--fs-base);
}
.info-table th {
  width: 220px; background: var(--base-soft);
  font-weight: 700; color: var(--navy); white-space: nowrap;
}
@media (max-width: 620px) {
  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { padding-bottom: 0.3em; border-bottom: none; background: transparent; padding-left: 0; }
  .info-table td { padding-top: 0; padding-left: 0; }
}

/* 募集要項の表（recruit.html #requirements・2026-10-29）。「／」でつないだ長い1行をやめ、1項目1行にして小見出しを付ける。
   項目名の列は「初任給」の実績の年月を小さな2行目にして狭め、中身の欄を広げる（言葉の途中で折れないように）。 */
.info-table--req th { width: 9.5em; white-space: normal; }
.info-table--req th small { display: block; margin-top: 0.15em; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); }
.info-table--req td { line-height: 1.75; }
.info-table--req strong { color: var(--navy); font-weight: 700; }
.req-lines { margin: 0; padding: 0; list-style: none; }
.req-lines li + li { margin-top: 0.35em; }
.req-list { display: grid; grid-template-columns: 7.2em 1fr; gap: 0.35em 1em; margin: 0; }
.req-list dt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); padding-top: 0.12em; }
.req-list dd { margin: 0; }
.req-list--wide { grid-template-columns: 11.5em 1fr; }
.req-list--pay { grid-template-columns: fit-content(12em) max-content; }  /* 区分名の欄は中身に合わせて最大12字ほど。狭い画面では折る（2026-10-30。前は 5.5em） */
.req-list--pay dd { text-align: right; font-variant-numeric: tabular-nums; }
.req-list--pay strong { font-size: 1.08em; }
.req-sub { font-size: var(--fs-sm); color: var(--ink-soft); }
/* 交替勤務の時刻の一覧（2026-10-29）。名前の列をそろえて、時刻を縦に読めるようにする */
.req-shifts { margin: 0.35em 0 0.3em; padding: 0; list-style: none; }
.req-shifts li { display: grid; grid-template-columns: 6.5em 1fr; font-variant-numeric: tabular-nums; }
.req-shifts li span { font-size: var(--fs-sm); color: var(--ink-soft); padding-top: 0.12em; }
.req-note { margin-top: 0.6em; font-size: var(--fs-xs); color: var(--ink-soft); }
@media (max-width: 620px) {
  /* 共通の .info-table はスマホで左の余白を0にしているが、この表は枠（.wide-diagram）の中にあるので、文字が枠の端にくっつかないよう左右に余白を足す */
  .info-table--req th, .info-table--req td { padding-left: 1.1rem; padding-right: 1.1rem; }
  .req-list, .req-list--wide { grid-template-columns: 1fr; gap: 0; }
  .req-list dd + dt { margin-top: 0.55em; }
  .req-list--pay { grid-template-columns: fit-content(12em) max-content; gap: 0.2em 1em; }
  .req-list--pay dd + dt { margin-top: 0; }
}
/* 2つの工法の使い分けの表（business.html #method-compare・2026-10-29）。項目名の列を狭くして、比べる2列を同じ幅で広くする。
   スマホでは縦1列に並ぶので、値の上に「冷間プレス」「ホットスタンプ」の小見出し（td の data-label）を出し、どちらの値かわかるようにする */
.info-table--compare { width: 100%; table-layout: fixed; }
.info-table--compare th { width: auto; white-space: normal; }
.info-table--compare thead th:first-child { width: 10em; }
.info-table--compare thead th { border-bottom: 2px solid var(--brand); }
.info-table--compare strong { color: var(--navy); font-weight: 700; }
@media (max-width: 620px) {
  .info-table--compare thead { display: none; }
  .info-table--compare tbody th { padding: 1em 1.1rem 0.35em; }
  .info-table--compare td { padding: 0.25em 1.1rem 0.45em; border-bottom: none; }
  .info-table--compare td:last-child { padding-bottom: 1em; border-bottom: 1px solid var(--line); }
  .info-table--compare td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: 0.04em; }
}

/* まんがのページ（manga.html・2026-10-29）。スマホ向けに縦につないだまんがを、1列で読む。
   PC でも読みやすい幅（600px）にそろえ、画像のあいだにすき間ができないよう block にする */
.manga-reader { max-width: 600px; margin: 1rem auto 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.manga-reader img { display: block; width: 100%; height: auto; }
.manga-after { max-width: 600px; margin: 2.5rem auto 0; text-align: center; }
.manga-after__lead { font-weight: 700; color: var(--navy); }
.manga-after__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 1.2rem 0 1rem; }
/* 採用情報（動画で見るの下）のまんがの入口。表紙を小さく見せて、まんがのページへ */
.manga-promo { display: flex; align-items: center; gap: 1.4rem; max-width: 720px; margin: 2.5rem auto 0; padding: 1.2rem 1.4rem; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: inherit; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.manga-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, var(--shadow-md)); }
.manga-promo__img { flex: 0 0 auto; width: 120px; height: auto; border-radius: 6px; box-shadow: var(--shadow-sm); }
.manga-promo__body { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.manga-promo__en { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.2em; color: var(--brand); text-transform: uppercase; }
.manga-promo__title { font-size: var(--fs-md); font-weight: 700; color: var(--navy); }
.manga-promo__text { font-size: var(--fs-sm); color: var(--ink-soft); }
.manga-promo__more { margin-top: 0.2em; font-size: var(--fs-sm); font-weight: 700; color: var(--brand); }
@media (max-width: 620px) { .manga-promo { gap: 0.9rem; padding: 1rem; } .manga-promo__img { width: 84px; } .manga-promo__title .nb { white-space: normal; } }

/* 横スクロールが必要な表 */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 560px; }

/* ---- 16. ニュース ---- */
.news-list { border-top: 1px solid var(--line); }
.news-item {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 0.8em 1.4em;
  padding: 1.1em 0.4em; border-bottom: 1px solid var(--line);
}
@media (max-width: 620px) {
  .news-item { grid-template-columns: auto auto; }
  .news-item .news-item__title { grid-column: 1 / -1; }
}
.news-item__date { font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted); letter-spacing: 0.06em; }
.news-item__cat {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--brand); border: 1px solid currentColor; border-radius: 999px;
  padding: 0.15em 0.9em; white-space: nowrap;
}
.news-item__cat--release { color: var(--accent-text); }
.news-item__cat--recruit { color: #A05A00; }
.news-item__cat--sustain { color: #1F6B3A; }
/* ニュース一覧の年見出し（フィルタで該当記事が無い年は main.js が hidden にする） */
.news-year { font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.12em; color: var(--ink-muted); padding: 1.8em 0.4em 0.5em; border-bottom: 1px solid var(--line); }
.news-year:first-child { padding-top: 0.9em; }
/* トップ：最新ニュース1件のティッカー（stats-bar 直下） */
.news-ticker { background: var(--base-soft); border-bottom: 1px solid var(--line); }
.news-ticker__inner { display: flex; align-items: center; gap: 0.6em 1.2em; padding: 0.75em 0; font-size: var(--fs-sm); flex-wrap: wrap; }
.news-ticker__tag { font-family: var(--ff-en); font-weight: 700; letter-spacing: 0.14em; color: var(--brand); }
.news-ticker time { font-family: var(--ff-en); font-weight: 600; color: var(--ink-muted); letter-spacing: 0.06em; }
.news-ticker a { color: var(--ink); text-decoration: none; }
.news-ticker a:hover { color: var(--brand); text-decoration: underline; }
.news-ticker__all { margin-left: auto; color: var(--accent-text) !important; font-weight: 700; white-space: nowrap; }
@media (max-width: 620px) {
  .news-ticker__all { order: 1; }
  .news-ticker a:not(.news-ticker__all) { order: 2; flex-basis: 100%; }
}
/* ---- サイトマップページ ---- */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.2rem 2.5rem; }
.sitemap-group__title { font-size: var(--fs-base); font-weight: 700; color: var(--navy); padding-bottom: 0.45em; border-bottom: 2px solid var(--brand); margin-bottom: 0.8em; }
.sitemap-group__title a { color: inherit; text-decoration: none; }
.sitemap-group__title a:hover { color: var(--brand); text-decoration: underline; }
.sitemap-group ul { list-style: none; padding: 0; margin: 0; }
.sitemap-group li { padding: 0.35em 0 0.35em 1.1em; position: relative; font-size: var(--fs-base); }
.sitemap-group li::before { content: ""; position: absolute; left: 0.1em; top: 1.05em; width: 0.4em; height: 0.4em; border-top: 1.5px solid var(--accent-text); border-right: 1.5px solid var(--accent-text); transform: rotate(45deg); }
.sitemap-group a { color: var(--ink); text-decoration: none; }
.sitemap-group a:hover { color: var(--brand); text-decoration: underline; }
.news-item__title { font-size: var(--fs-base); color: var(--ink); font-weight: 500; }
/* ニュース一覧：記事全体がリンクになったアイテム */
a.news-item { color: inherit; text-decoration: none; transition: background var(--dur) var(--ease); }
a.news-item:hover { background: var(--base-soft); }
a.news-item:hover .news-item__title { color: var(--brand); text-decoration: underline; }
a.news-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- ニュース詳細記事ページ ---- */
.article-head { max-width: 760px; margin-inline: auto; text-align: left; }
.article-head__meta { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
.article-head__title { font-size: var(--fs-xl); font-weight: 900; color: var(--ink); margin-top: 0.6em; line-height: 1.5; }
.article-body { max-width: 760px; margin: 2.4rem auto 0; color: var(--ink-soft); font-size: var(--fs-base); line-height: 2; }
.article-body p { margin-bottom: 1.3em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body a { color: var(--brand); text-decoration: underline; word-break: break-all; }
.article-gallery { max-width: 760px; margin: 2rem auto 0; }
.article-nav { max-width: 760px; margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }

.news-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
.news-filter button {
  padding: 0.4em 1.3em; border-radius: 999px; border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft);
  transition: all var(--dur-fast) ease;
}
.news-filter button:hover { border-color: var(--brand); color: var(--brand); }
.news-filter button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- 17. 採用ページ用 ---- */
.recruit-hero-copy {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem); font-weight: 900; line-height: 1.6;
  color: var(--navy);
}
.recruit-hero-copy .accent { color: var(--accent-deep); }

/* 職種タブ風グリッド */
.job-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .job-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .job-grid { grid-template-columns: repeat(4, 1fr); } }
.job-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.1rem 1rem; box-shadow: var(--shadow-sm);
}
.job-card__num { font-family: var(--ff-en); font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); letter-spacing: 0.15em; }
.job-card__name { font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin: 0.15em 0 0.3em; }
.job-card__copy { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.7; }
/* 2026-10-29：採用情報「仕事を知る」の見直し（本人「この案で」）
   ・並びはカードの枚数に合わせる（job-grid--2/3/4。右や下に空きを作らない）
   ・「〜の現場を見る」のリンクはカードの下の端にそろえる
   ・スマホ（699px 以下）は番号と英語の名前を2行に分ける（「07 /」だけが1行に残らないように） */
@media (min-width: 700px) {
  .job-grid--2, .job-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .job-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) { .job-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.job-card { display: flex; flex-direction: column; }
.job-card .job-card__site { margin-top: auto; padding-top: 0.55em; align-self: flex-start; }
@media (max-width: 699px) {
  .job-card__sep { display: none; }
  .job-card__label { display: block; letter-spacing: 0.08em; }
}

/* 1日の流れ */
.day-flow { position: relative; padding-left: 1.7rem; }
.day-flow::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.day-flow__item { position: relative; padding: 0 0 1.3rem 1.2rem; }
.day-flow__item::before {
  content: ""; position: absolute; left: -1.7rem; top: 0.45em;
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-pale);
}
.day-flow__time { font-family: var(--ff-en); font-weight: 700; color: var(--brand); font-size: var(--fs-md); }
.day-flow__text { color: var(--ink-soft); font-size: var(--fs-sm); }

/* 先輩の声 */
.voice-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.voice-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--base-blue); }
.voice-card__media img { width: 100%; height: 100%; object-fit: cover; }
.voice-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.voice-card__meta { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: 0.5em; }
.voice-card__quote { font-size: var(--fs-md); font-weight: 700; color: var(--navy); line-height: 1.7; margin-bottom: 0.6em; }
.voice-card__text { font-size: var(--fs-sm); color: var(--ink-soft); }

/* 保護者・先生向けボックス */
.assure-box {
  background: #fff; border: 2px solid var(--brand); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-md);
}
.assure-box__title { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-xl); color: var(--navy); margin-bottom: 1rem; }
.assure-box__title svg { width: 1.3em; height: 1.3em; color: var(--brand); flex: none; }

/* ---- 17b. 採用ページ専用コンポーネント ---- */

/* 採用ヒーロー（トップより少し低い全幅フォトヒーロー） */
.hero--recruit { min-height: min(78vh, 720px); min-height: min(78svh, 720px); }
.hero--recruit .hero__inner { padding-block: calc(var(--header-h) + 1.5rem) 5rem; }

/* ファクトチップ（年間休日121日 等） */
.fact-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.fact-chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.45em 1.1em; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em;
}
.fact-chip strong { color: #8FD4FF; font-family: var(--ff-en); font-size: 1.15em; }

/* ページ内固定ナビ（目次バー） */
.local-nav {
  position: sticky; top: var(--header-h); z-index: 800;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
}
.local-nav__list {
  display: flex; gap: 0.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-inline: clamp(0.6rem, 3vw, 2rem);
}
.local-nav__list::-webkit-scrollbar { display: none; }
.local-nav__list a {
  flex: none; padding: 0.9em 0.9em; position: relative;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); white-space: nowrap;
}
.local-nav__list a::after {
  content: ""; position: absolute; left: 0.9em; right: 0.9em; bottom: 0;
  height: 3px; border-radius: 2px 2px 0 0; background: var(--brand);
  transform: scaleX(0); transition: transform var(--dur-fast) var(--ease);
}
.local-nav__list a:hover { color: var(--brand); }
.local-nav__list a.is-active { color: var(--brand); }
.local-nav__list a.is-active::after { transform: scaleX(1); }
/* 最後の「エントリー」はボタンの見た目にして目立たせる（採用情報・2026-10-29） */
.local-nav__list a.local-nav__cta {
  align-self: center; margin: 0.4em 0 0.4em 0.35rem; padding: 0.5em 1.05em;
  border-radius: 999px; background: var(--brand); color: #fff;
}
.local-nav__list a.local-nav__cta::after { display: none; }
.local-nav__list a.local-nav__cta:hover, .local-nav__list a.local-nav__cta.is-active { background: var(--navy); color: #fff; }
/* 続きがあるときだけ右端を薄くする（main.js 9c が has-more を付け外しする） */
.local-nav__list.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
}

/* 「選ばれる理由」ゴースト番号 */
.reason-num {
  font-family: var(--ff-en); font-weight: 700; line-height: 1;
  font-size: clamp(3.2rem, 2rem + 5vw, 5.5rem); letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 2px var(--brand-soft);
  opacity: 0.55; display: block; margin-bottom: 0.15em;
}

/* COMING SOON バッジ（社員の声 準備中） */
.voice-card__media { position: relative; }
.coming-badge {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.3em;
  background: linear-gradient(150deg, rgba(13, 22, 66, 0.82), rgba(7, 13, 38, 0.9)); color: #fff;
}
.coming-badge .en { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.28em; }
.coming-badge small { font-size: var(--fs-xs); color: rgba(255,255,255,0.85); letter-spacing: 0.1em; }

/* 職種グループ見出し用タグ */
.job-group { margin-top: 2.4rem; }
.job-group:first-of-type { margin-top: 0; }
.job-group__head { display: flex; align-items: center; gap: 0.8em; margin-bottom: 1rem; flex-wrap: wrap; }
.job-group__tag {
  display: inline-flex; align-items: center;
  padding: 0.25em 1em; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em;
  background: var(--navy); color: #fff;
}
.job-group__tag--craft { background: var(--brand); }
.job-group__tag--office { background: var(--accent-deep); }
.job-group__title { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); }
.job-group__note { font-size: var(--fs-xs); color: var(--ink-muted); }

/* 2本立ての1日の流れ */
.dayflow-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (min-width: 860px) { .dayflow-grid { grid-template-columns: 1fr 1fr; } }
.dayflow-col {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm);
}
.dayflow-col__title {
  display: flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin-bottom: 1.1rem;
}
.dayflow-col__title .job-group__tag { font-size: 0.68rem; }

/* ---- 17c. 構造部品インタラクティブ図解（business.html）
        仕様の原本: parts-interactive.html 開発議事録 v1.0 ---- */
.diagram-wrap {
  position: relative; width: 100%; max-width: 960px; margin-inline: auto;
  border-radius: var(--radius-lg); overflow: visible;
  background: linear-gradient(135deg, #f0f6fc, #e8f2fa);
  box-shadow: 0 4px 32px rgba(11, 26, 92, 0.10);
}
.diagram-wrap > img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }

.diagram-wrap .thumb-zone { position: absolute; cursor: pointer; z-index: 5; }

.diagram-wrap .hotspot {
  position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 10;
  background: none; border: none; padding: 0;
}
.diagram-wrap .hotspot-ring { position: relative; width: 26px; height: 26px; display: block; }
.diagram-wrap .hotspot-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--spot-color, var(--accent-deep)); opacity: 0.20;
  animation: partsPulse 2s ease-in-out infinite;
}
.diagram-wrap .hotspot-ring::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--spot-color, var(--accent-deep));
  box-shadow: 0 2px 6px rgba(0, 91, 172, 0.5); transition: transform 0.2s;
}
.diagram-wrap .hotspot:hover .hotspot-ring::after,
.diagram-wrap .hotspot.active .hotspot-ring::after { transform: scale(1.3); }
@keyframes partsPulse {
  0%, 100% { transform: scale(1); opacity: 0.20; }
  50%      { transform: scale(2.0); opacity: 0.06; }
}

.diagram-wrap .tooltip-card {
  position: absolute; z-index: 100; width: 280px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 8px 40px rgba(11, 26, 92, 0.18), 0 2px 8px rgba(11, 26, 92, 0.08);
  border-top: 4px solid var(--card-color, var(--accent-deep));
  padding: 16px 18px 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; transform: translateY(6px);
  text-align: left; letter-spacing: 0.02em;
}
.diagram-wrap .tooltip-card.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.diagram-wrap .card-name .ja { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.diagram-wrap .card-name .en {
  font-family: var(--ff-en); font-size: 10px; letter-spacing: 0.12em;
  color: var(--accent-text); font-weight: 600; text-transform: uppercase;
  margin-top: 2px; margin-bottom: 8px;
}
.diagram-wrap .card-desc {
  font-size: 11px; color: var(--brand); font-weight: 700;
  background: var(--accent-pale); padding: 4px 8px; border-radius: 4px; margin-bottom: 10px;
  display: inline-block;
}
.diagram-wrap .card-detail { font-size: 13px; line-height: 1.75; color: var(--ink-soft); }
.diagram-wrap .card-detail strong { color: var(--navy); font-weight: 700; }
.diagram-wrap .card-role {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--card-color, var(--accent-deep)); padding: 3px 10px; border-radius: 20px;
}
.diagram-wrap .close-btn {
  display: none; position: absolute; top: 10px; right: 10px;
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--ink-soft); padding: 2px 6px;
}

@media (max-width: 600px) {
  .diagram-wrap .tooltip-card {
    position: fixed; bottom: 20px; left: 50%; top: auto;
    transform: translateX(-50%) translateY(10px);
    width: calc(100vw - 40px); max-width: 360px; z-index: 1300;
  }
  .diagram-wrap .tooltip-card.visible { transform: translateX(-50%) translateY(0); }
  .diagram-wrap .close-btn { display: block; }
  .diagram-wrap .hotspot-ring { width: 22px; height: 22px; }
}

/* ---- 17d. サステナビリティページ専用コンポーネント ---- */

/* 環境ロードマップ（横型タイムライン。モバイルは縦積み） */
.roadmap { position: relative; display: grid; gap: 1.1rem; padding-left: 1.7rem; }
.roadmap::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}
.roadmap__item { position: relative; padding-left: 1.1rem; }
.roadmap__item::before {
  content: ""; position: absolute; left: -1.7rem; top: 0.4em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--accent-pale);
}
.roadmap__item--future::before { background: #fff; border: 3px solid var(--accent-deep); }
.roadmap__year {
  font-family: var(--ff-en); font-weight: 700; color: var(--brand);
  font-size: var(--fs-lg); line-height: 1.3;
}
.roadmap__badge {
  display: inline-block; margin-left: 0.6em; padding: 0.1em 0.8em; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; vertical-align: middle;
}
.roadmap__badge--done { background: var(--brand); color: #fff; }
.roadmap__badge--goal { background: #fff; color: var(--accent-deep); border: 1.5px solid var(--accent-deep); }
.roadmap__title { font-weight: 700; color: var(--navy); margin-top: 0.1em; }
.roadmap__text { font-size: var(--fs-sm); color: var(--ink-soft); }

@media (min-width: 900px) {
  .roadmap { grid-template-columns: repeat(5, 1fr); gap: 0; padding-left: 0; }
  .roadmap::before {
    left: 8%; right: 8%; top: 7px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
  }
  .roadmap__item { padding: 1.6rem 0.8rem 0 0; }
  .roadmap__item::before { left: 0; top: 0; }
}

/* SDGsタイル（当社の取り組みが貢献する目標）
   ★2026-09-09 に「色つき正方形の中に白文字」から「番号バッジ＋ラベル」のチップ型へ変更。
   理由：SDGs公式色の上に白の小さな文字（9.9px）を置くと、目標9=2.91／7=1.62 などAA基準（4.5）を満たせない色が半数あった。
   ・ラベルは白いチップ上に濃い文字で置く（公式色を汚さず、確実に読める）
   ・番号バッジの文字色は色ごとに白／濃紺を選ぶ（HTML側の --sdg-ink。白で4.5以上なら白、足りなければ濃紺）
   ・番号は 1.2rem（19.2px）太字＝「大きい文字」扱い。最小でも 4.86（目標5・濃紺）で基準を満たす */
.sdg-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.sdg-tile {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); box-shadow: var(--shadow-sm);
}
.sdg-tile__num {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--sdg, var(--brand)); color: var(--sdg-ink, #fff);
  font-family: var(--ff-en); font-size: 1.2rem; font-weight: 700; line-height: 1;
}
.sdg-tile__label { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; color: var(--ink-soft); letter-spacing: 0.02em; }

/* 柱の番号ラベル（4つの柱） */
.pillar-label {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text);
}
.pillar-label::before { content: ""; width: 2.4em; height: 2px; background: var(--accent); }

/* ---- 18. FAQ ---- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; gap: 0.9em; text-align: left;
  padding: 1.1em 0.4em; font-size: var(--fs-md); font-weight: 700; color: var(--navy);
  border-radius: var(--radius-sm); transition: background var(--dur-fast) ease;
}
.faq__q:hover { background: var(--base-soft); }
.faq__q::before {
  content: "Q"; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: var(--ff-en);
  display: flex; align-items: center; justify-content: center; font-size: 0.9em;
}
.faq__q::after {
  content: ""; width: 0.55em; height: 0.55em; margin-left: auto; margin-top: 0.5em; flex: none;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform var(--dur-fast) ease;
}
.faq__q[aria-expanded="true"]::after { transform: rotate(225deg); }
.faq__a { display: none; padding: 0 0.4em 1.3em 3.2em; color: var(--ink-soft); }
.faq__a.is-open { display: block; animation: faqOpen var(--dur) var(--ease); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 19. お問い合わせ ---- */
.contact-card {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow-sm); text-align: center;
}
.contact-card__title { font-size: var(--fs-lg); color: var(--navy); margin-bottom: 0.5rem; }
.contact-card__tel {
  font-family: var(--ff-en); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 700; color: var(--brand); letter-spacing: 0.04em; line-height: 1.3;
}
.contact-card__tel a { color: inherit; }
/* 電話番号は途中で折らない。3列のときはカードが狭く（900〜1440pxで箱の中が約190〜265px）、
   2.4remのままだと「093-435-／0124」のように割れるので、カードの幅に合わせて字を縮める
   （cqi＝カードの中の幅の1%。非対応のブラウザは上の clamp のままで、折り返しも許す）。 */
@supports (font-size: 1cqi) {
  .contact-card { container-type: inline-size; }
  .contact-card__tel { font-size: min(clamp(1.7rem, 1.2rem + 2vw, 2.4rem), 13.5cqi); white-space: nowrap; }
  /* 見出しの「自動車部品・お取引、」（10字）が、900px あたりの細いカードからはみ出さないようにする */
  .contact-card__title { font-size: min(var(--fs-lg), 9.5cqi); }
}
.contact-card__note { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: 0.4rem; }

/* ---- 19.2 バーチャル工場見学ヒーロー（イラスト＋明朝コピー重畳型）
   仕様の原本: ※素材/topre-kyushu-hero-copy.html（ヒーローコピー検証シート）
   文字は画像に焼き込まず、HTMLテキストとして重ねる（SEO・読み上げ・文言差替のため） ---- */
.tour-hero { position: relative; background: #fff; }
.tour-hero__media img { display: block; width: 100%; height: auto; }
.tour-hero__copy { position: absolute; left: 3.7%; top: 12%; width: 42%; }
.tour-hero__en {
  font-family: var(--ff-en); font-size: clamp(0.7rem, 1vw, 1rem); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: #0C54C9; margin-bottom: 1em;
}
.tour-hero__lede {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-weight: 700; font-size: clamp(1.5rem, 6.2vw, 7.4rem); line-height: 1.085;
  letter-spacing: -0.01em; font-feature-settings: 'palt'; color: #0A1838;
}
.tour-hero__lede .ln { display: block; white-space: nowrap; }
.tour-hero__lede em { font-style: normal; color: #0C54C9; }
.tour-hero__rule { width: clamp(44px, 6vw, 100px); height: 2px; border: none; background: #0A1838; margin: clamp(0.8rem, 2vw, 1.8rem) 0 0; }
.tour-hero__brand { margin-top: clamp(0.7rem, 1.6vw, 1.4rem); font-weight: 700; color: #0A1838; font-size: clamp(0.8rem, 1.7vw, 1.7rem); letter-spacing: 0.06em; }
.tour-hero__sub { margin-top: 0.6em; color: #222A4D; font-size: clamp(0.72rem, 1.2vw, 1.15rem); line-height: 1.8; }
.tour-hero__cta { margin-top: clamp(0.9rem, 2vw, 1.8rem); }
/* 画面幅900px未満は横長画像の白場が狭く重畳コピーが収まらないため、
   人物中心の別トリミング画像＋コピーは画像下の白場へ（検証シートの推奨構成） */
@media (max-width: 899px) {
  .tour-hero__copy { position: static; width: auto; padding: 1.7rem 1.3rem 2.3rem; }
  .tour-hero__lede { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .tour-hero__brand { font-size: var(--fs-base); }
  .tour-hero__sub { font-size: var(--fs-sm); }
}

/* ---- 19.3 バーチャル工場見学の「見学メモ」 ---- */
.tour-memo {
  margin-top: 1.4rem; padding: 0.95em 1.15em;
  background: var(--accent-pale); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9;
}
.tour-memo strong {
  display: block; margin-bottom: 0.25em;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.15em; color: var(--accent-text);
}

/* ---- 19.4 採用プロローグの「正直採用」宣言 ---- */
#prologue .prologue-declare {
  margin-top: 2.2rem; text-align: center; color: var(--on-navy-soft);
  font-size: var(--fs-md); line-height: 2;
}
#prologue .prologue-declare strong {
  display: inline-block; margin-top: 0.4em; color: #fff;
  font-size: var(--fs-xl); font-weight: 900; letter-spacing: 0.04em;
  border-bottom: 3px solid var(--accent); padding-bottom: 0.15em;
}
#prologue .prologue-links {
  margin-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
}
#prologue .prologue-links a {
  display: inline-block; padding: 0.5em 1.1em; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
#prologue .prologue-links a:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); color: #fff; }

/* ---- 19.5 お問い合わせフォーム ---- */
.contact-form {
  max-width: 680px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 1.3rem; }
.form-row label { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--navy); margin-bottom: 0.45em; }
.form-req {
  display: inline-block; margin-left: 0.5em; padding: 0.1em 0.5em;
  font-size: var(--fs-xs); font-weight: 700; color: #fff; background: #C0392B; border-radius: 3px;
}
.form-opt {
  display: inline-block; margin-left: 0.5em; padding: 0.1em 0.5em;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-muted); background: var(--base-blue); border-radius: 3px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%; padding: 0.75em 0.9em; font: inherit; color: var(--ink);
  background: var(--base-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.form-row select { cursor: pointer; }
.form-row textarea { min-height: 170px; resize: vertical; }
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px; background: #fff;
}
.form-consent { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--fs-sm); color: var(--ink-soft); }
.form-consent input { width: 1.15em; height: 1.15em; margin-top: 0.2em; flex: none; accent-color: var(--brand); }
.form-consent a { text-decoration: underline; }
.form-submit { text-align: center; margin-top: 1.8rem; }
.form-submit .btn { min-width: 240px; }

/* ---- 20. フッター ---- */
.footer { background: var(--navy-deep); color: var(--on-navy-soft); }
/* ★ボタンは除外すること。`.footer a`（詳細度0,1,1）は `.btn--accent`（0,1,0）に勝つため、
   :not(.btn) を付けないとフッターのCTAだけ文字色が上書きされる。
   実際に「お問い合わせ」ボタンが #B9C2E4 × #00A0E9 ＝ コントラスト比1.65（AA基準4.5）になっていた。 */
.footer a:not(.btn) { color: var(--on-navy-soft); }
.footer a:not(.btn):hover { color: #fff; }

.footer__cta { border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer__cta-inner {
  padding-block: 2.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.footer__cta-copy { color: #fff; font-size: var(--fs-lg); font-weight: 700; }
.footer__cta-copy small { display: block; font-size: var(--fs-xs); color: var(--on-navy-soft); font-weight: 400; margin-top: 0.3em; }

.footer__main { padding-block: 3.2rem 2rem; display: grid; gap: 2.4rem; }
@media (min-width: 860px) { .footer__main { grid-template-columns: minmax(320px, 1.7fr) 1fr 1fr 1fr; } }
.footer__brand img { height: 40px; width: auto; }
.footer__address { margin-top: 1.1rem; font-size: var(--fs-xs); line-height: 1.9; font-style: normal; }
.footer__address strong { color: #fff; font-weight: 500; }
.footer__col-title {
  font-size: var(--fs-sm); font-weight: 700; color: #fff; letter-spacing: 0.1em;
  margin-bottom: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer__col li { margin-top: 0.45em; font-size: var(--fs-sm); }
.footer__col .sub { padding-left: 1em; font-size: var(--fs-xs); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4em; }
.footer__copyright { color: rgba(185, 194, 228, 0.7); letter-spacing: 0.05em; }

/* ページトップ */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease), visibility var(--dur), background var(--dur-fast) ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand-deep); }
.to-top::before {
  content: ""; width: 12px; height: 12px; margin-top: 4px;
  border-top: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(45deg);
}

/* ---- 21. スクロールアニメーション ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.4s; }

/* YouTube フェイサード */
.video-facade {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy); box-shadow: var(--shadow-lg); cursor: pointer; border: none; width: 100%;
}
/* 画像に透明度は掛けない（背景の濃紺と混ざって写真が沈むため。濃紺は読み込み前の下地としてのみ使う） */
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
/* 暗い膜は下部の白いラベルを読ませるためのものなので、上半分は透明にして写真を活かす */
.video-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7, 13, 38, 0.55) 0%, rgba(7, 13, 38, 0.25) 30%, rgba(7, 13, 38, 0) 60%);
}
.video-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* スマホ（幅375px時）はサムネイルの高さが約188pxしかないため、
   84px固定だと円が高さの半分近くを占めて不格好になる。画面幅に合わせて伸縮させる */
.video-facade__play {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: clamp(56px, 14vw, 84px); height: clamp(56px, 14vw, 84px); border-radius: 50%;
  /* 内側の三角形を em で書けるよう、円と同じ値を font-size に持たせる */
  font-size: clamp(56px, 14vw, 84px);
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) ease;
}
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play { transform: scale(1.08); background: #fff; }
.video-facade__play::before {
  content: ""; margin-left: 0.07em;
  border-left: 0.31em solid var(--brand);
  border-top: 0.19em solid transparent; border-bottom: 0.19em solid transparent;
}
/* 暗い膜を薄くした分、ラベルは影で可読性を確保する */
.video-facade__label {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 1; text-align: center;
  color: #fff; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em;
  text-shadow: 0 1px 3px rgba(7, 13, 38, 0.9);
}
/* 再生時間と音声の有無。8分半と長めなので、押す前に分かるようにしておく。
   1行に続けるとスマホで折り返して崩れるため、必ず別行にする */
.video-facade__meta {
  display: block; margin-top: 0.35em;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 60秒ダイジェスト（自社サーバーの mp4 を直接再生・音声なし）
   YouTubeのファサードと違い、こちらは外部への通信が一切発生しない。
   音を持たない映像なので muted 固定でよく、ブラウザの自動再生制限に掛からない。 */
.movie-wrap { max-width: 860px; margin-inline: auto; }
.digest {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy); box-shadow: var(--shadow-lg);
}
.digest__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 停止中だけ暗い膜を掛けて、中央のボタンと下部の文字を読ませる。再生が始まったら映像を邪魔しない */
.digest::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 13, 38, 0.55) 0%, rgba(7, 13, 38, 0.25) 30%, rgba(7, 13, 38, 0) 60%);
  transition: opacity var(--dur-fast) ease;
}
.digest.is-playing::after { opacity: 0; }

/* 停止中は中央に大きく、再生中は右下へ小さく退く。
   再生中もボタンを消さないのは、WCAG 2.2.2（自動再生の一時停止手段）を満たすため。 */
.digest__toggle {
  position: absolute; z-index: 1; cursor: pointer; border: none; padding: 0;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(56px, 14vw, 84px); height: clamp(56px, 14vw, 84px);
  /* 内側の三角形を em で書けるよう、円と同じ値を font-size に持たせる（.video-facade__play と同じ作り） */
  font-size: clamp(56px, 14vw, 84px);
  border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.digest__toggle:hover { background: #fff; }
.digest__toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.digest.is-playing .digest__toggle {
  left: auto; right: 14px; top: auto; bottom: 14px; transform: none;
  width: 44px; height: 44px; font-size: 44px;
  background: rgba(255, 255, 255, 0.78); opacity: 0.7;
}
.digest.is-playing .digest__toggle:hover,
.digest.is-playing .digest__toggle:focus-visible { opacity: 1; background: #fff; }

/* ▶（停止中）と ▮▮（再生中）をCSSだけで描く */
.digest__icon {
  display: block; margin-left: 0.07em;
  border-left: 0.31em solid var(--brand);
  border-top: 0.19em solid transparent; border-bottom: 0.19em solid transparent;
}
.digest.is-playing .digest__icon {
  margin-left: 0; width: 0.10em; height: 0.34em;
  border: none;
  border-left: 0.09em solid var(--brand);
  border-right: 0.09em solid var(--brand);
}

/* 尺と音声の有無を、押す前に分かるようにしておく（.video-facade__label と同じ考え方） */
.digest__cap {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; text-align: center;
  color: #fff; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em;
  text-shadow: 0 1px 3px rgba(7, 13, 38, 0.9);
  transition: opacity var(--dur-fast) ease;
}
.digest.is-playing .digest__cap { opacity: 0; pointer-events: none; }
.digest__cap-sub {
  display: block; margin-top: 0.35em;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

/* ダイジェストとフル版の区切り */
.movie-more {
  margin: 2.4rem 0 1rem; text-align: center;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--ink-muted);
}
/* ★動きを減らす設定では、トランジションそのものを切る。
   末尾の一律ルールが transition-duration を 0.01ms に固定するため、
   「ほぼ0秒だが存在するトランジション」が生まれ、環境によっては完了しないまま
   暗幕とキャプションが出たままになる（実測で確認）。ここは値を即座に当てたいので none にする。 */
@media (prefers-reduced-motion: reduce) {
  .digest::after, .digest__cap, .digest__toggle { transition: none !important; }
}

/* ニュース記事の本文に置く動画（<p> で包んでいるので余白だけ整える） */
.article-movie { margin: 1.6rem 0; }

/* 工程フロー */
.flow-steps { display: grid; gap: 0.9rem; counter-reset: flow; }
@media (min-width: 860px) { .flow-steps { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 860px) { .flow-steps--4 { grid-template-columns: repeat(4, 1fr); } }
/* 番号だけの小さな流れ（採用情報「仕事を知る」の5つの箱）は、859px 以下では横長の形にする：左に番号と名前、右に説明（縦の長さを半分ほどに。2026-10-29） */
@media (max-width: 859px) {
  .flow-steps--compact { gap: 0.6rem; }
  .flow-steps--compact .flow-step {
    display: grid; grid-template-columns: 1.9rem 6.2rem 1fr; column-gap: 0.7rem; align-items: center;
    text-align: left; padding: 0.8rem 1rem;
  }
  .flow-steps--compact .flow-step__name { margin: 0; }
  .flow-steps--compact .flow-step__text { margin: 0; }
}  /* 箱が4つの流れ（採用情報の大学生・キャリアの方）。5列のままだと右に1つ分の空きができる */
.flow-step {
  counter-increment: flow; position: relative;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.2rem 1rem 1.1rem; text-align: center; box-shadow: var(--shadow-sm);
}
.flow-step::before {
  content: "0" counter(flow); display: block;
  font-family: var(--ff-en); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.15em; color: var(--accent-text);
}
/* アイコン画像付きのステップは連番を非表示にし、画像を枠いっぱいに大きく見せる */
.flow-step:has(.flow-step__icon)::before { display: none; }
.flow-step:has(.flow-step__icon) { padding-top: 1rem; }
.flow-step__icon {
  width: 100%; aspect-ratio: 1 / 1; margin: 0 auto 0.6rem; overflow: hidden;
  border-radius: var(--radius); background: linear-gradient(180deg, var(--base-blue) 0%, #EEF2FA 100%);
}
.flow-step__icon img { width: 100%; height: 100%; object-fit: cover; }
/* イラスト付きの流れ（採用情報「未経験から、一人前へ。」）は、859px 以下では横長の形にする：左に小さなイラスト、右に名前と説明（2026-10-29） */
@media (max-width: 859px) {
  .flow-steps--media { gap: 0.7rem; }
  .flow-steps--media .flow-step {
    display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 1rem;
    align-items: center; text-align: left; padding: 0.8rem;
  }
  .flow-steps--media .flow-step__icon { grid-row: 1 / span 2; width: 92px; margin: 0; }
  .flow-steps--media .flow-step__name { align-self: end; margin: 0; }
  .flow-steps--media .flow-step__text { align-self: start; margin-top: 0.2em; }
}
/* 採用の流れは線画SVGに変更（2026-08-01）。画像を敷く型ではなく、円形バッジに glyph を置く。
   成長・教育セクションの .flow-step__icon はイラスト画像のままなので、修飾子で切り分ける。 */
.flow-step__icon--svg {
  width: 76px; aspect-ratio: 1 / 1; margin: 0 auto 0.9rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--brand);
  background: linear-gradient(140deg, var(--accent-pale), #d9e8fa);
  box-shadow: inset 0 0 0 1px rgba(0, 91, 172, 0.09);
}
.flow-step__icon--svg svg { width: 36px; height: 36px; }
/* 丸いアイコン付きの流れ（採用情報「採用の流れ」の2つ）は、859px 以下では横長の形にする：左に丸いアイコン、右に名前と説明（2026-10-29） */
@media (max-width: 859px) {
  .flow-steps--icons { gap: 0.7rem; }
  .flow-steps--icons .flow-step {
    display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 1rem;
    align-items: center; text-align: left; padding: 0.9rem 1rem;
  }
  .flow-steps--icons .flow-step__icon--svg { grid-row: 1 / span 2; width: 56px; margin: 0; }
  .flow-steps--icons .flow-step__icon--svg svg { width: 28px; height: 28px; }
  .flow-steps--icons .flow-step__name { align-self: end; margin: 0; }
  .flow-steps--icons .flow-step__text { align-self: start; margin-top: 0.2em; }
}
.flow-step__name { font-size: var(--fs-md); font-weight: 700; color: var(--navy); margin: 0.2em 0; }
.flow-step__text { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.7; }
@media (min-width: 860px) {
  .flow-step:not(:last-child)::after {
    content: ""; position: absolute; right: -0.7rem; top: 50%; transform: translateY(-50%) rotate(45deg); z-index: 1;
    width: 0.7em; height: 0.7em; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand);
  }
}

/* 拠点カードの所在地 */
.loc-meta { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.8; font-style: normal; }
.loc-meta strong { color: var(--ink-soft); }

/* ギャラリーグリッド */
.gallery-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
/* 枚数に合わせた並び（工場見学・2026-10-29）：2枚・4枚の欄は PC で1行に並べ、3枚の欄はスマホ・タブレットで1枚目を大きくする（右や下に空きを作らない） */
@media (min-width: 860px) {
  .gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 859px) { .gallery-grid--3 > :first-child { grid-column: 1 / -1; } }
.gallery-grid figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; }
.gallery-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.045); }
.gallery-grid figcaption { font-size: var(--fs-xs); color: var(--ink-soft); padding: 0.5em 0.8em; }
.gallery-grid img, .article-gallery img { cursor: zoom-in; }
/* data-no-lightbox の一覧は押しても開かないので、虫めがねのカーソルとマウスを乗せたときの拡大をやめる（main.js の 11 を参照） */
.gallery-grid[data-no-lightbox] img, .article-gallery[data-no-lightbox] img { cursor: auto; }
.gallery-grid[data-no-lightbox] figure:hover img { transform: none; }
.gallery-grid img:focus-visible, .article-gallery img:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---- 写真ギャラリーのライトボックス（拡大表示） ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 1300;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--dur) ease;
  display: flex; align-items: center; justify-content: center;
}
.lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.lightbox__overlay { position: absolute; inset: 0; background: rgba(7, 13, 38, 0.92); }
.lightbox__figure {
  position: relative; z-index: 1; max-width: min(92vw, 1100px); max-height: 88vh;
  margin: 0; display: flex; flex-direction: column; align-items: center;
}
.lightbox__img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); background: #fff; }
.lightbox__caption { color: rgba(255,255,255,0.88); font-size: var(--fs-sm); text-align: center; margin-top: 0.9em; padding: 0 1em; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.12); transition: background var(--dur) ease;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,0.24); }
.lightbox__close:focus-visible, .lightbox__prev:focus-visible, .lightbox__next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__close::before, .lightbox__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: #fff;
}
.lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 1.2rem; }
.lightbox__next { right: 1.2rem; }
.lightbox__prev::before, .lightbox__next::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
}
.lightbox__prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.lightbox__next::before { transform: translate(-70%, -50%) rotate(-135deg); }
@media (max-width: 767px) {
  .lightbox__close { top: 0.7rem; right: 0.7rem; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
  .lightbox__img { max-height: 68vh; }
}

/* 理念バリューカード */
.value-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem; text-align: center; background: rgba(255,255,255,0.05);
}
.value-card__en { font-family: var(--ff-en); font-size: var(--fs-lg); font-weight: 700; color: #8FD4FF; letter-spacing: 0.12em; }
.value-card__ja { font-size: var(--fs-md); font-weight: 700; color: #fff; margin-top: 0.2em; }
.value-card__text { font-size: var(--fs-sm); color: var(--on-navy-soft); margin-top: 0.7em; line-height: 1.9; }

/* 方針リスト（品質・環境方針） */
.policy-list { counter-reset: policy; }
.policy-list li {
  counter-increment: policy; position: relative;
  padding: 0.6em 0 0.6em 2.6em; border-bottom: 1px dashed var(--line);
  color: var(--ink-soft); font-size: var(--fs-sm);
}
.policy-list li::before {
  content: counter(policy);
  position: absolute; left: 0; top: 0.7em;
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--base-blue); color: var(--brand);
  font-family: var(--ff-en); font-weight: 700; font-size: 0.85em;
  display: flex; align-items: center; justify-content: center;
}

/* ---- 22. 印刷 ---- */
@media print {
  .utility-bar, .header, .drawer, .to-top, .hero__scroll,
  .footer__cta, .cta-band, .video-facade,
  /* .pres-hero は min-height ではなく height 固定なので、中の画像だけ消しても箱が残る。
     A4縦だと1枚目の約45%がヒーローで潰れるためセクションごと消す（他ページの .page-hero__bg と同じ扱い） */
  .pres-hero,
  .hero__bg, .page-hero__bg, .feature-band__bg { display: none !important; }
  body { color: #000; }
  /* スクロール表示アニメの未表示分も必ず印刷する */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* 濃色背景は印刷されないため、文字を黒に戻す */
  .hero, .page-hero, .section--navy, .feature-band, .stats-bar, .footer {
    background: #fff !important; color: #000 !important; min-height: 0;
  }
  .hero *, .page-hero *, .section--navy *, .feature-band *, .stats-bar *, .footer * { color: #000 !important; }
  .feature-band__num {
    background: none !important; -webkit-background-clip: initial !important;
    background-clip: initial !important; color: #000 !important;
  }
}

/* ---- 23. アクセシビリティ（動きの抑制） ---- */
/* カード内の要点チップ（明るい背景用。ネイビー背景の .fact-chip とは別物） */
.card__chips { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card__chips li { font-size: 0.78rem; font-weight: 700; color: var(--accent-text); background: var(--base-blue); border-radius: 999px; padding: 0.25em 0.85em; line-height: 1.6; }

/* ---- 企業理念：東プレグループ行動指針（ネイビー背景） ---- */
.conduct { max-width: 860px; margin-inline: auto; padding: 2rem 1.5rem; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius, 12px); }
.conduct__title { text-align: center; color: #fff; font-size: var(--fs-lg); font-weight: 700; }
.conduct__lead { text-align: center; color: var(--on-navy-soft); font-size: var(--fs-sm); margin-top: 0.6em; }
.conduct__list { counter-reset: conduct; list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem 2rem; }
.conduct__list li { counter-increment: conduct; position: relative; padding-left: 2.4rem; color: #fff; font-weight: 500; line-height: 1.7; }
.conduct__list li::before { content: counter(conduct, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font-family: var(--ff-en); font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.conduct__note { text-align: center; color: var(--on-navy-soft); font-size: var(--fs-sm); margin-top: 1.3rem; }
.conduct__note a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 620px) { .conduct { padding: 1.5rem 1.1rem; } .conduct__list { grid-template-columns: 1fr; } }

/* ---- 用語解説 ---- */
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; margin: 0; }
.glossary__item { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); }
.glossary__item dt { font-weight: 700; color: var(--navy); font-size: var(--fs-base); padding-left: 0.8em; border-left: 3px solid var(--accent); line-height: 1.5; }
.glossary__item dd { margin: 0.6em 0 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.9; }

/* ---- タッチ端末：hover の浮き上がり・拡大はタップ後に残像として残るので無効化（PCのマウス操作では従来どおり） ---- */
@media (hover: none) {
  .btn:hover, a.card:hover, .card--hover:hover, a.card:hover .card__media img, a.card:hover .card__media--icon img, .gallery-grid figure:hover img { transform: none; }
  .btn:hover::after, a.card:hover .card__more::after { transform: rotate(45deg); }
}

/* ---- 19.5 バーチャル工場見学：2026-09-11 改修（見学マップ・工程クリップ・進行表示・見学案内） ---- */
/* ヒーロー：900〜1300px では白場が狭く、コピーがイラストの青い流線に重なる。左から白のグラデーションを敷いて可読性を確保 */
.tour-hero__copy { z-index: 1; }
.tour-hero__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -1.4rem -4rem -1.6rem -2rem; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.96) 62%, rgba(255,255,255,0.7) 82%, rgba(255,255,255,0) 100%);
  border-radius: 24px;
}
@media (min-width: 1400px) { .tour-hero__copy::before { opacity: 0; } }
@media (max-width: 899px) { .tour-hero__copy::before { display: none; } }
.tour-hero__en { font-size: clamp(0.76rem, 1vw, 1rem); }
.tour-hero__sub { font-size: clamp(0.84rem, 1.2vw, 1.15rem); }
.tour-hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.tour-hero__alt { font-weight: 700; font-size: var(--fs-sm); color: #0A1838; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.tour-hero__alt:hover { color: #0C54C9; }

/* ページ内ナビ（見学順路）：番号・現在地カウンタ・映像の一括停止 */
.local-nav--tour .local-nav__inner { display: flex; align-items: center; }
.local-nav--tour .local-nav__list { flex: 1 1 auto; min-width: 0; }
.local-nav__num { font-family: var(--ff-en); font-weight: 700; font-size: 0.85em; color: var(--accent-text); margin-right: 0.35em; letter-spacing: 0.04em; }
.local-nav__list a.is-active .local-nav__num { color: var(--brand); }
.local-nav__tools { flex: none; display: flex; align-items: center; gap: 0.7rem; padding-right: clamp(0.6rem, 3vw, 2rem); padding-left: 0.6rem; }
.tour-progress { font-family: var(--ff-en); font-weight: 700; font-size: var(--fs-sm); color: var(--navy); letter-spacing: 0.08em; white-space: nowrap; }
.clips-master {
  font-size: var(--fs-xs); font-weight: 700; padding: 0.45em 0.95em; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.clips-master:hover { border-color: var(--brand); color: var(--brand); }
.clips-master:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.clips-master[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
/* 自動再生はPC幅（768px以上）だけなので、一括停止スイッチもPC幅だけ出す */
@media (max-width: 767px) { .clips-master { display: none; } }
/* スマホ幅：右端をフェードさせて「まだ続く」ことを示す */
@media (max-width: 899px) {
  .local-nav--tour .local-nav__list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.6rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.6rem), transparent);
  }
}

/* ストップ見出し：番号・拠点バッジ・数字バッジ */
.stop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-bottom: 0.9rem; }
.stop-head__num { font-family: var(--ff-en); font-weight: 700; font-size: var(--fs-xl); line-height: 1; color: var(--accent-text); letter-spacing: 0.04em; }
.stop-head__num small { font-size: 0.55em; color: var(--ink-muted); margin-left: 0.25em; letter-spacing: 0.1em; }
.stop-place {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-xs); font-weight: 700; color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.28em 0.85em;
}
.stop-place::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); flex: none; }
.stop-kw {
  display: inline-flex; align-items: center; font-family: var(--ff-en); font-weight: 700; font-size: var(--fs-xs);
  color: #fff; background: var(--brand); border-radius: 999px; padding: 0.3em 0.85em; letter-spacing: 0.04em;
}

/* 工程クリップ：.img-frame の中に静止画（ポスター）と無音ループ映像を重ねる。
   映像は JS が再生するまで読み込まない。印刷・JS無効時は静止画が出る */
.clip { position: relative; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip__toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; cursor: pointer; border: none; padding: 0;
  width: 44px; height: 44px; font-size: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; opacity: 0.88;
  transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
}
.clip__toggle:hover, .clip__toggle:focus-visible { opacity: 1; background: #fff; }
.clip__toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.clip__icon {
  display: block; margin-left: 0.07em;
  border-left: 0.31em solid var(--brand);
  border-top: 0.19em solid transparent; border-bottom: 0.19em solid transparent;
}
.clip.is-playing .clip__icon {
  margin-left: 0; width: 0.10em; height: 0.34em; border: none;
  border-left: 0.09em solid var(--brand); border-right: 0.09em solid var(--brand);
}
.clip__cap {
  position: absolute; left: 12px; top: 12px; z-index: 2; pointer-events: none;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: #fff;
  background: rgba(7, 13, 38, 0.62); border-radius: 999px; padding: 0.32em 0.85em;
}
.clip__cap::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: #FF5C5C; margin-right: 0.5em; vertical-align: 0.06em; opacity: 0; transition: opacity var(--dur-fast) ease;
}
.clip.is-playing .clip__cap::before { opacity: 1; }
/* 写真の一覧（.gallery-grid）の中に置く映像（バーチャル工場見学 Stop 01 の久留米本社工場の空撮。2026-10-31）。
   写真と同じ 3:2 の枠に入る（止まった絵に .gallery-grid img の aspect-ratio が効く）。押しても大きく開かないので、虫めがねと拡大を止める。
   スマホ（620px 以下）で2列のままだと、映像の上の「映像 24秒・音声なし」が2行に折れて再生ボタンと重なるので、1列にする（.gallery-grid--stack-sp） */
.gallery-grid .clip__poster { cursor: auto; }
.gallery-grid figure:hover .clip__poster { transform: none; }
@media (max-width: 620px) { .gallery-grid--stack-sp { grid-template-columns: 1fr; } }

/* ストップ末尾の導線：持ち場・関連ページのチップと「次のストップへ」 */
.stop-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.stop-links a {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text);
  background: var(--base-blue); border-radius: 999px; padding: 0.45em 1em; text-decoration: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.stop-links a::after { content: "›"; font-weight: 700; }
.stop-links a:hover { background: var(--brand); color: #fff; }
.stop-next { margin-top: 2rem; text-align: right; }
.stop-next a {
  display: inline-flex; align-items: center; gap: 0.7em; font-weight: 700; color: var(--navy);
  text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 0.2em;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.stop-next a small { font-family: var(--ff-en); font-weight: 700; font-size: 0.8em; color: var(--accent-text); letter-spacing: 0.12em; }
.stop-next a::after { content: "→"; color: var(--accent-text); transition: transform var(--dur-fast) ease; }
.stop-next a:hover { color: var(--brand); border-color: var(--brand); }
.stop-next a:hover::after { transform: translateX(4px); }

/* 見学の前に：対象者別の案内カード（見学案内 #visit でも同じ部品を使う） */
.tour-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.tour-guide__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); }
.tour-guide__who { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--accent-text); }
.tour-guide__title { font-weight: 700; color: var(--navy); margin-top: 0.35em; font-size: var(--fs-md); line-height: 1.5; }
/* 工場見学の見出し：nb の区切りの中で、行の長さをそろえる（「…から／始まる」のように短い行が残らない。2026-10-29） */
.stop-head + .sec-head__title, .tour-guide__title { text-wrap: balance; }
.tour-guide__text { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 0.6em; line-height: 1.85; }
.tour-guide__text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
/* 案内カードの下の行き先のボタン（各ストップの最後のリンクと同じ見た目。2026-10-29） */
/* ボタンはカードの下の端でそろえる（2026-10-29。3枚の文の長さがちがっても、ボタンの高さがそろう） */
.tour-guide__card .stop-links { margin-top: auto; padding-top: 0.9rem; }

/* 見学マップ：3施設カード（写真の上に施設名と担当ストップ） */
.tour-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
/* 2026-10-29：文を空撮の上に重ねるのをやめ、写真の下の白い所に出す（本人「この案で」。前は小さな文字が写真に重なって読みにくかった）。
   スマホ（620px 以下）は、左に写真・右に文の横長の形にして、縦に長くならないようにする */
.tour-map__card {
  display: block; border-radius: var(--radius-lg); overflow: hidden; background: #fff; color: var(--navy);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none;
  transition: box-shadow var(--dur-fast) ease;
}
.tour-map__card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: filter var(--dur-fast) ease; }
.tour-map__card:hover { box-shadow: var(--shadow-md); }
.tour-map__card:hover img { filter: brightness(1.06); }
.tour-map__card:hover .tour-map__name { text-decoration: underline; text-underline-offset: 0.2em; }
.tour-map__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tour-map__body { display: block; padding: 0.9rem 1.1rem 1.1rem; }
.tour-map__name { display: block; font-weight: 700; font-size: var(--fs-md); color: var(--navy); }
.tour-map__addr { display: block; font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 0.35em; }
.tour-map__stops { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); font-family: var(--ff-en); letter-spacing: 0.04em; margin-top: 0.3em; }
@media (max-width: 620px) {
  .tour-map__card { display: grid; grid-template-columns: 42% 1fr; align-items: center; }
  .tour-map__card img { aspect-ratio: 4 / 3; height: 100%; }
  .tour-map__body { padding: 0.7rem 0.9rem; }
}

/* エピローグの復習ストリップ（8ストップのサムネイル） */
.tour-recap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 2.4rem; }
@media (max-width: 620px) { .tour-recap { grid-template-columns: repeat(2, 1fr); } }
.tour-recap a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.tour-recap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity var(--dur-fast) ease, transform var(--dur-slow) var(--ease); }
.tour-recap a:hover img { opacity: 1; transform: scale(1.04); }
.tour-recap a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* 番号と名前の下に暗いグラデーションを敷き、番号は明るい青にする（2026-10-29。明るい写真の上で「08 出荷」などが読みにくかった） */
.tour-recap a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(0deg, rgba(7, 13, 38, 0.85), rgba(7, 13, 38, 0)); pointer-events: none; }
.tour-recap span { position: absolute; z-index: 1; left: 0.7em; bottom: 0.55em; color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.tour-recap b { font-family: var(--ff-en); color: #9fd8ff; margin-right: 0.45em; }

/* 印刷（授業配布用）：ヒーロー・ナビ・映像の操作部を消し、静止画だけ残す */
@media print {
  .tour-hero, .local-nav, .clip video, .clip__toggle, .clip__cap, .stop-next, .tour-recap, .tour-hero__alt { display: none !important; }
  .stop-place, .stop-kw, .stop-links a { border: 1px solid #000; color: #000 !important; background: #fff !important; }
  .tour-map__card { aspect-ratio: auto; background: #fff; color: #000; }
  .tour-map__card img { position: static; height: auto; }
  .tour-map__body { position: static; background: none; color: #000; padding: 0.4rem 0; }
  .tour-map__stops, .tour-map__stops b { color: #000; }
}

/* ---- 19.6 バーチャル工場見学：第2弾（進行レール・移動帯・山場の暗転・「この現場で働くなら」・安全のしるし） ---- */
/* ナビ直下の進行レール（現在地までを塗る。main.js が width を更新） */
.tour-rail { display: block; height: 3px; background: var(--line-soft); }
.tour-rail__fill { display: block; height: 100%; width: 12.5%; background: linear-gradient(90deg, var(--accent), var(--brand)); transition: width 0.6s var(--ease); }
.local-nav__list a.is-visited .local-nav__num { color: var(--ink-muted); }
.local-nav__exit { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; padding-left: 0.7rem; border-left: 1px solid var(--line); }
.local-nav__exit:hover { color: var(--brand); }
/* 固定ナビ（約54px）の分、アンカー移動の着地を下げる */
#before, #arrival, #die, #coil, #press, #hotstamp, #weld, #inspect, #ship, #epilogue, #visit { scroll-margin-top: calc(var(--header-h) + 72px); }

/* 移動帯：拠点の切り替わりを一呼吸で示す（section の外に置く） */
.tour-transit-wrap { padding-block: 0.4rem; }
.tour-transit {
  display: flex; align-items: center; gap: 1rem; max-width: 900px; margin: 0 auto; padding: 0.8rem 1.1rem 0.8rem 0.8rem;
  border-radius: var(--radius-lg); background: var(--base-blue); color: var(--navy); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.tour-transit:hover { box-shadow: var(--shadow-md); }
.tour-transit img { flex: none; width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.tour-transit__body { flex: 1 1 auto; min-width: 0; }
.tour-transit__kicker { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 0.25em; }
.tour-transit__text { display: block; font-size: var(--fs-sm); line-height: 1.8; }
.tour-transit__arrow { flex: none; font-size: 1.5rem; color: var(--accent-text); transition: transform var(--dur-fast) ease; }
.tour-transit:hover .tour-transit__arrow { transform: translateX(4px); }
.tour-transit--dark { background: linear-gradient(90deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }
.tour-transit--dark .tour-transit__kicker, .tour-transit--dark .tour-transit__arrow { color: #8FD4FF; }
@media (max-width: 620px) { .tour-transit { gap: 0.7rem; padding: 0.7rem; } .tour-transit img { width: 84px; } .tour-transit__arrow { display: none; } }

/* 山場（Stop05）のネイビー背景用に、ストップ部品の配色を派生させる */
.section--navy .stop-head__num { color: #8FD4FF; }
.section--navy .stop-head__num small { color: var(--on-navy-soft); }
.section--navy .stop-place { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.section--navy .stop-kw { background: var(--accent); color: var(--navy-deep); }
.section--navy .split__body p { color: var(--on-navy-soft); }
.section--navy .split__body p a:not(.btn) { color: #9fd8ff; }
.section--navy .tour-memo { background: rgba(255, 255, 255, 0.08); color: var(--on-navy-soft); border-left-color: var(--accent); }
.section--navy .tour-memo strong { color: #8FD4FF; }
.section--navy .stop-links a { background: rgba(255, 255, 255, 0.12); color: #fff; }
.section--navy .stop-links a:hover { background: #fff; color: var(--navy); }
.section--navy .stop-next a { color: #fff; border-color: var(--accent); }
.section--navy .stop-next a small, .section--navy .stop-next a::after { color: #8FD4FF; }
.section--navy .split__deco { display: none; }
.section--navy .img-frame { background: var(--navy-deep); }
/* 熱の目盛り：常温 → 約900℃ → 1470MPa級（山場だけ暖色を1か所使う） */
.heat-gauge { margin-top: 0.9rem; }
.heat-gauge__bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.heat-gauge__bar span { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent) 0%, #FF8A3D 55%, #FFD36B 100%); }
.heat-gauge__lab { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 0.4em; font-family: var(--ff-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--on-navy-soft); }
.heat-gauge__lab span:last-child { color: #FFD36B; }
/* 静寂（Stop07）：余白を広げ、装飾を消す */
.tour-calm { padding-block: clamp(4rem, 9vw, 7.5rem); }
.tour-calm .split__deco { display: none; }

/* 「この現場で働くなら」折りたたみ（採用ページからの転記のみ） */
.post-card { margin-top: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.post-card__sum { cursor: pointer; padding: 0.75em 1em; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 0.6em; }
.post-card__sum::-webkit-details-marker { display: none; }
.post-card__sum::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); transition: transform var(--dur-fast) ease; }
.post-card[open] .post-card__sum::before { transform: rotate(45deg); }
.post-card__sum::after { content: "仕事・一日・はじめの一歩"; margin-left: auto; font-weight: 500; font-size: var(--fs-xs); color: var(--ink-muted); }
.post-card__sum:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.post-card__list { margin: 0; padding: 0 1em 0.9em; display: grid; gap: 0.55em; }
.post-card__list > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.6em; font-size: var(--fs-sm); line-height: 1.8; border-top: 1px dashed var(--line); padding-top: 0.55em; }
.post-card__list dt { font-weight: 700; color: var(--accent-text); }
.post-card__list dd { margin: 0; color: var(--ink-soft); }
.post-card__list dd a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; white-space: nowrap; margin-left: 0.4em; font-weight: 700; }
@media (max-width: 620px) { .post-card__list > div { grid-template-columns: 1fr; gap: 0.15em; } .post-card__sum::after { display: none; } }
.section--navy .post-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); }
.section--navy .post-card__sum { color: #fff; }
.section--navy .post-card__sum::after { color: var(--on-navy-soft); }
.section--navy .post-card__sum::before { border-color: #8FD4FF; }
.section--navy .post-card__list > div { border-top-color: rgba(255, 255, 255, 0.2); }
.section--navy .post-card__list dt { color: #8FD4FF; }
.section--navy .post-card__list dd { color: var(--on-navy-soft); }
.section--navy .post-card__list dd a { color: #9fd8ff; }

/* 見学の前に：安全のしるし */
.safety-signs { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.7rem; }
/* 2026-10-29：番号と見出しを1行にし、文（.safety-signs__text）はその下にカードの幅いっぱいで出す（本人「この案で」。前は文が番号の右に寄って行が細かった） */
.safety-signs li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; row-gap: 0.45rem; align-items: center; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 0.95rem; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.75; }
.safety-signs b { display: block; color: var(--navy); }
.safety-signs__text { grid-column: 1 / -1; }
.safety-signs a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; font-weight: 700; }
.safety-signs__num { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--ff-en); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; }

/* 採用ページ：職種カードへ直接飛べるように（工場見学からのリンク先） */
.job-card { scroll-margin-top: calc(var(--header-h) + 16px); }
.job-card__site { display: inline-block; margin-top: 0.55em; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); text-decoration: none; }
.job-card__site::after { content: "\00a0›"; } /* 2026-10-29：「›」だけが次の行に落ちないよう、折れない空白にした */
.job-card__site:hover { text-decoration: underline; }

@media print {
  .tour-transit-wrap, .heat-gauge, .tour-rail, .local-nav__exit { display: none !important; }
  .post-card, .safety-signs li { border: 1px solid #000; }
}

.cta-band__note { flex-basis: 100%; margin-top: 0.7rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.85); text-align: center; }

/* 実際の見学について：学校を通じた見学・応募の流れ（文字だけの5ステップ） */
.visit-flow { max-width: 900px; margin: 1.6rem auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); }
.visit-flow__title { font-weight: 700; color: var(--navy); font-size: var(--fs-md); }
/* 2026-10-29：5つの箱を横に並べると1行に6〜7文字しか入らず、「ください｜。」と句点だけが次の行に落ちていた。
   1つを1行にした縦の並びにする（621px 以上は左に番号と名前、右に説明。620px 以下は名前の下に説明） */
.visit-flow__steps { counter-reset: vf; list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 621px) {
  /* 文の中に <wbr> があるので、grid ではなく、名前を左に置いて説明を字下げする */
  .visit-flow .visit-flow__steps li { padding-left: calc(2.6rem + 9em); }
  .visit-flow .visit-flow__steps li b { position: absolute; left: 2.6rem; top: 0.7rem; width: 8.5em; margin-bottom: 0; }
}
.visit-flow__steps li { counter-increment: vf; position: relative; padding: 0.7rem 0.8rem 0.7rem 2.6rem; background: var(--base-soft); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.75; }
.visit-flow__steps li::before { content: counter(vf, decimal-leading-zero); position: absolute; left: 0.75rem; top: 0.7rem; font-family: var(--ff-en); font-weight: 700; color: var(--accent-text); letter-spacing: 0.04em; }
.visit-flow__steps b { display: block; color: var(--navy); margin-bottom: 0.15em; }
.visit-flow__note { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.visit-flow__note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
@media print { .post-card, .tour-guide__card, .safety-signs li, .visit-flow, .tour-map__card { break-inside: avoid; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- 24. 社長メッセージ ページ（message.html） ---- */
/* ヒーローは3枚のレイヤーを重ねて構成する。
     ① .pres-hero__bg      東プレブルーの幾何学バナー（文字なし）
     ② .pres-hero__label   英字ロゴタイプ「MESSAGE FROM THE PRESIDENT」（透過PNG）
     ③ .pres-hero__portrait 背景透過した社長
   ②③を独立レイヤーにしてあるため、位置も大きさも個別に調整できる。
   文字が背景に焼き込まれていないので、スマホで英字が途中で切れることもない。
   見出し（h1）とキャッチコピーは直後の .pres-lead に置く。 */
.pres-hero {
  position: relative; overflow: hidden;
  /* 原画の比率(1672:941)を保ってバナーの構図を崩さない。高すぎないよう上限を設ける。
     さらに 80vh を上限に加える（2026-07-30）。理由：
     ・従来は画面の「幅」しか見ておらず、縦の短い画面（ノートPCの表示領域は620〜950pxが主流）では
       1画面目がヒーローだけで埋まり、次のセクションの境界すら見えなかった。実測1366×768で境界0px。
     ・このページのヒーローには日本語のテキストが1文字もなく（英字ロゴは画像・aria-hidden）、
       トップページと違いスクロール誘導も無い。「ページがそこで終わっている」ように見える状態だった。
     ・80vh なら扉の淡い青の帯が画面下端に見えて「続きがある」と伝わる（1366×768で46px）。
     ・原画のトリミングは20%に留まる（63vh案では37%削れるため見送った）。
     ・画面の高さが975px以上なら従来どおり780pxのまま。大きい画面では何も変わらない。
     svh はモバイルのURLバー伸縮で高さが跳ねるのを防ぐため（.hero と同じ書き方）。
     ※767px以下は下の @media で height を上書きしているので、ここはPC・タブレット用 */
  height: min(calc(100vw * 941 / 1672), 780px, 80vh);
  height: min(calc(100vw * 941 / 1672), 780px, 80svh);
  background: #EDF1F7;
}
.pres-hero__bg { position: absolute; inset: 0; }
.pres-hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
}
/* ② 氏名＋英字ロゴタイプの枠。
   位置指定はこの枠が持ち、英字ロゴは枠の最下段に置く。
   枠の下端＝原画での英字ロゴの位置（左3.3%／下から約7%／幅45%）なので、
   上に氏名を足しても英字ロゴの位置は動かず、バナー原画の構図が保たれる。 */
.pres-hero__lead {
  position: absolute; z-index: 3; left: 3.3%; bottom: 7%; width: 45%;
  pointer-events: none;
}
/* 氏名は英字ロゴの真上。背景が濃紺のエリアなので白で置く。
   ※ 2026-11-01 に message.html から氏名を外した（英字と字体が合わず、署名と2回出ていたため）。戻すときのために残している（_before-message.html も使う）。
   明朝はこのページで読み込んでいないため本文書体（ゴシック）を使う＝追加のフォント取得は発生しない */
.pres-hero__name {
  margin: 0 0 0.7em; color: #fff; line-height: 1.3;
  text-shadow: 0 1px 6px rgba(7, 13, 38, 0.45);
}
.pres-hero__role {
  display: block; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.16em;
}
.pres-hero__person {
  display: block; margin-top: 0.2em;
  font-size: clamp(1.15rem, 0.85rem + 1.2vw, 1.75rem); font-weight: 700; letter-spacing: 0.12em;
}
.pres-hero__label { margin: 0; }
.pres-hero__label img { width: 100%; height: auto; display: block; }
/* ③ 社長の切り抜き。頭上の余白を top で固定し、脚は下端で自然に切る。
   明るい背景に浮くよう、色味を持たせない柔らかい影だけを添える */
.pres-hero__portrait {
  position: absolute; z-index: 2; right: 10%; top: 7%; height: 112%;
  pointer-events: none;
}
.pres-hero__portrait img {
  height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 18px 30px rgba(23, 40, 90, 0.22));
}
@media (max-width: 767px) {
  /* 横長のまま縮むと社長が小さくなりすぎるため、縦を伸ばして人物を大きく見せる。
     英字は独立レイヤーなので、切れないよう幅と位置だけ詰めて全文を見せる */
  .pres-hero { height: min(calc(100vw * 941 / 1672 * 1.75), 520px); }
  .pres-hero__bg img { object-position: 26% center; }
  /* 英字は社長の脚に重なると読めなくなるため、幅を詰めて左下に収める */
  .pres-hero__lead { left: 4.5%; bottom: 5%; width: 46%; }
  /* 枠は46%（375pxで166px）。氏名も役職も実測で105〜113pxに収まるため、はみ出させない */
  .pres-hero__name { margin-bottom: 0.5em; }
  /* ★スマホだけ下部に暗幕を敷く。
     スマホは object-position: 26% center で切り出すため、氏名が乗る左側が明るくなり、
     白文字のコントラストが最悪2.99（基準4.5）まで落ちる。位置を上げると背景はさらに白くなり悪化する
     （bottom 5%→50% を実測して確認済み。現在位置が最良）。
     z-index:1 は「背景より上・社長(2)と文字(3)より下」。社長は暗幕の影響を受けない。
     PCは最悪7.58で基準を満たすため、暗幕はスマホ限定にしてバナーの明るさを保つ。
     ※ 2026-11-01 に氏名を外したあとも、英字ロゴが読みやすいよう暗幕は残している */
  .pres-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top,
      rgba(7, 13, 38, 0.72) 0%, rgba(7, 13, 38, 0.50) 35%, rgba(7, 13, 38, 0) 62%);
  }
  .pres-hero__portrait { right: 2%; top: 8%; height: 100%; }
}

/* ヒーロー直下の扉。このページのタイポグラフィの頂点。
   背景は共通の .section--soft（#F5F7FB）に乗せ、上端だけ波の意匠を敷く。
   デザイン案どおり左揃え。中央揃えにすると2カラム本文（左揃え）と軸がずれるため */
.pres-lead { position: relative; overflow: hidden; }
/* 波の意匠。装飾なので aria-hidden、かつ内容の下に敷く（z-index を持たせない）。
   デザイン案では紙面の右3割・上部だけにあり、見出しの組とは重ならない。
   幅は制作側仕様の min(62vw, 980px) を踏襲。高さは SVG の固有比（1600:520）に任せる。
   ※制作側の height:100% + slice はそのまま使えない。.pres-lead は本文2カラムを含んで
     背が高く、slice が高さ律速になって絵柄が横に引き伸ばされるため。
   ※PNG（77.6KB）ではなく SVG（1.4KB）。線幅1.15pxのヘアラインだけの絵柄なので、
     PNGだと2倍表示で線が約2.7倍に太りピークが25%落ちる（実測）。 */
.pres-lead__wave {
  position: absolute; top: 0; right: 0;
  /* 上限は 62vw。頭打ちを 980px にすると、それを超える画面（1580px〜）で
     波だけが画面右端に貼りついたまま取り残され、線束の収束点がデザイン案の
     74.4% から 2560px 時に 84.1% まで右へ流れて本文の外に出てしまう。
     1200px にすると 1935px の画面まで 74.4% を保てる（＝一般的なPCはすべて設計どおり）。 */
  width: min(62vw, 1200px); aspect-ratio: 1600 / 520;
  background: url("images/wave-flow.svg") no-repeat right top / 100% auto;
  /* X：SVGは viewBox 1600 に対し線が x=1548 で終わる＝右に 3.25% の余白を内包している。
        その分だけ外へ押し出して、デザイン案どおり線が画面右端まで抜けるようにする。
     Y：SVGのパスは y=-72 から始まる＝そのままだと扇形の上側 14% が枠外に出て切れる。
        16% 下げると切れがなくなり、かつ波の中心が見出しの中心より約48px上に来て、
        デザイン案の位置関係（約50px上）と一致する。
     （はみ出しは .pres-lead の overflow:hidden で切られる） */
  transform: translate(3.25%, 16%);
  opacity: 0.55; pointer-events: none;
}
@media (max-width: 720px) {
  /* スマホでは画面外へ逃がしつつ濃度を落とす（本文の可読性を優先） */
  .pres-lead__wave { width: 92vw; right: -18%; opacity: 0.42; }
}
/* 本文は必ず波より前面に */
.pres-lead > .container { position: relative; z-index: 1; }

.pres-lead__en {
  font-family: var(--ff-en); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.28em; color: var(--accent-text);
}
.pres-lead__catch {
  margin-top: 0.9rem;
  color: var(--navy); font-weight: 900; letter-spacing: 0.06em;
  line-height: 1.35; word-break: keep-all;
}
/* 2行の級差でキャッチに抑揚をつける。2行目は hero→xl まで一気に落とし、
   「クルマの骨格を、かたちにする。」を1行に収める（2xl だと 1160px でも折り返す）。
   1行目はデザイン案の実測（送り約99px＝字送り0.23em）に合わせて字送りを広く取る。
   サイズは --fs-hero（既存トークン。他は .hero__title のみで使用）。デザイン案は
   実測80px相当だがサイトのスケールに無い値なので、既存トークン内で最も近い64pxに寄せる。 */
.pres-lead__catch-main { display: block; font-size: var(--fs-hero); letter-spacing: 0.18em; }
.pres-lead__catch-sub  { display: block; font-size: var(--fs-xl); margin-top: 0.45em; }
/* キーワードだけ色と下線で立てる。下線は文字から少し離す */
.pres-lead__catch .accent {
  color: var(--brand);
  border-bottom: 2px solid var(--accent); padding-bottom: 0.12em;
}
/* リード文。本文ではなくキャッチの補足なので、地の文より濃く・太く組む */
.pres-lead__note {
  margin-top: 1.1rem;
  font-size: var(--fs-md); font-weight: 700; line-height: 1.9;
  color: var(--navy); letter-spacing: 0.08em;
}

/* 2026-11-01：トップメッセージの文を、会社案内の配布資料にある社長のメッセージの文に差し替えた（message.html）。
   キャッチは配布資料と同じ3行で、どの行も同じ大きさ。1行が25字と長いので、前の「軽く、強く。」の --fs-hero ではなく --fs-xl。
   行（.pres-lead__ln）は、どの幅でも配布資料と同じ所で改行し、入らない幅では中の nb の間で折る。
   ※ 上の .pres-lead__catch-main・-sub・.accent・.pres-lead__note と、下の .pres-cols・.pres-col・.pres-close は、
     見比べ用の _before-message.html（公開前に消す）と、前の形に戻すときのために残している */
/* word-break は normal に戻す（.pres-lead__catch の keep-all のままだと、Safari は nb の間でも折らず、375px で見出しが294px はみ出した） */
.pres-lead__catch--msg { line-height: 1.6; letter-spacing: 0.08em; word-break: normal; }
.pres-lead__ln { display: block; font-size: var(--fs-xl); }
/* 本文（1列）。パソコン（900px 以上）は配布資料と同じ所で改行（本文の中の br）。
   899px 以下は br を出さず、文のまとまり（.ph）で自然に折る（1行が最大46字あり、狭い画面では入らないため） */
/* 幅は一番長い行（全角46字＝46×1.04em）より少しだけ広く（署名をその右端にそろえるため。画面いっぱいの右端だと本文から離れて見えた）。
   width: fit-content だと、Safari は端数で数px 足りなくなり、パソコンでも一番長い行が折れた */
.pres-letter { margin-top: clamp(2rem, 4.5vw, 3rem); font-size: var(--fs-base); max-width: 48.5em; }
.pres-letter__body p {
  font-size: inherit; line-height: 2.1; color: var(--ink-soft); letter-spacing: 0.04em;
  overflow-wrap: normal; word-break: normal; line-break: strict;
}
.pres-letter__body p + p { margin-top: 1.4em; }
@media (max-width: 899px) { .pres-letter__body br { display: none; } }
/* 署名。配布資料と同じく、メッセージのすぐ下に右寄せ */
.pres-letter__sign { margin-top: clamp(1.8rem, 4vw, 2.6rem); text-align: right; }
.pres-letter__sign .president__sign { margin-left: auto; }

/* ページ内の「構造の仕切り線」（2カラム間・本文と署名の間）。
   ※ --line(#D8DFEE) では背景に対し 1.25:1（2カラム）／1.34:1（署名）でほぼ見えない。
     同じページの2030帯だけ「--brand を40%で敷く」レシピに直してあり、残り2箇所が取り残されていた。
     border-color では不透明度を分けられないので、2030帯と同じく擬似要素で敷いて統一する。
     結果は約1.97:1（2カラム）／2.00:1（署名）で、デザイン案の実測 2.12:1 に近い。
   ※ サイト共通の --line は表・ニュース一覧・FAQ の行区切りに使うもので、そちらは変更しない
     （行の区切りは中身自体が構造を作るので、細い線で足りる）。 */
.pres-col + .pres-col,
.pres-close__sign { position: relative; }
.pres-col + .pres-col::before,
.pres-close__sign::before {
  content: ""; position: absolute; background: var(--brand); opacity: 0.4;
}
/* 横並びのときは左端に縦罫、縦積みのときは上端に横罫 */
@media (min-width: 780px) {
  .pres-col + .pres-col::before { left: 0; top: 0; bottom: 0; width: 1px; }
}
@media (max-width: 779px) {
  .pres-col + .pres-col::before { left: 0; right: 0; top: 0; height: 1px; }
}
@media (min-width: 1100px) {
  .pres-close__sign::before { left: 0; top: 0; bottom: 0; width: 1px; }
}
@media (max-width: 1099px) {
  .pres-close__sign::before { left: 0; right: 0; top: 0; height: 1px; }
}

/* 本文の2カラム。780px以上で横並び。カラム間は1本の縦罫で仕切る */
.pres-cols { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
@media (min-width: 780px) {
  /* ※ gap は使わない。gap で間隔を取ったうえで右カラムだけに padding-left を足すと、
     本文の実幅が左516px／右451px（1425px幅で実測）と65pxずれる。
     左右に同じ padding を持たせれば実幅が揃い、縦罫もコンテナのちょうど中央に乗る */
  .pres-cols { display: grid; grid-template-columns: 1fr 1fr; }
  .pres-col:first-child { padding-right: clamp(2.4rem, 5vw, 4rem); }
  .pres-col + .pres-col { padding-left: clamp(2.4rem, 5vw, 4rem); }
}
@media (max-width: 779px) {
  .pres-col + .pres-col {
    margin-top: clamp(2.4rem, 6vw, 3rem);
    padding-top: clamp(2.4rem, 6vw, 3rem);
  }
}
.pres-col p {
  font-size: var(--fs-sm); line-height: 2; color: var(--ink-soft); letter-spacing: 0.04em;
  /* body の overflow-wrap:anywhere をここだけ解除し「1470MPa級」等が途中で割れないようにする */
  overflow-wrap: normal; word-break: normal; line-break: strict;
}
.pres-col p + p { margin-top: 1.5em; }
/* 見出しとキーワードは同じ行に置き、見出しの真下だけに短い罫を敷く。
   カラム幅いっぱいの罫にすると本文と分断されて見えるため、あえて44pxで止める */
.pres-col__head {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em 1.4em;
  padding-bottom: 1.1rem; margin-bottom: 1.5rem;
}
.pres-col__head::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 2px; background: var(--accent);
}
.pres-col__title {
  font-size: var(--fs-lg); font-weight: 900; color: var(--navy);
  line-height: 1.6; letter-spacing: 0.04em;
}
/* キーワードは見出しの補足。枠で囲まず、色と級数だけで従属関係を示す */
.pres-col__tags { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; }
.pres-col__tags span {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--brand);
}
.pres-col__more { margin-top: 1.6em; }
.pres-col__more a { font-size: var(--fs-sm); font-weight: 700; }
.pres-col__more a::after { content: " →"; }

/* 2030年の目標帯。数字を主役にした横並び1行。背景は共通の .section--blue（#E7EDF8） */
.pres-goal__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}
/* 「何の分野の目標か」を示すラベル。これが無いと帯が本文から浮いて見える。
   flex-basis:100% で必ず1行目を独占し、数字と本文はその下に並ぶ */
.pres-goal__label {
  flex-basis: 100%; margin-bottom: 0.2rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em;
  color: var(--accent-text);
}
/* サイズは大きい数字の共通トークン --fs-num（.num-card__value 等と同じ）。
   独自の clamp を置くとこのページだけ数字のスケールが違う一点物になる */
.pres-goal__num {
  position: relative;
  font-family: var(--ff-num); font-weight: 600; line-height: 0.9;
  font-size: var(--fs-num); letter-spacing: 0.02em;
  color: var(--brand); flex: none;
  padding-right: clamp(1rem, 3vw, 2.2rem);
}
/* 数字と文章を仕切る縦罫（デザイン案どおり）。
   ※ border-right ＋ --line(#D8DFEE) だと帯の --base-blue に対し 1.14:1 でほぼ見えず、
     しかも行ボックス全高（約78px）に伸びる。同じ帯の .pres-goal__line と色をそろえ、
     デザイン案の高さ（38px）に合わせた短い罫にする。 */
.pres-goal__num::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 38px; background: var(--brand); opacity: 0.4;
}
/* 折り返し位置は本文中の .nb（文節単位で折り返す共通ユーティリティ）で制御する */
.pres-goal__text {
  font-size: var(--fs-lg); font-weight: 700; color: var(--navy);
  line-height: 1.7; letter-spacing: 0.04em;
}
/* 帯の右端に置く導線。同じ数値とロードマップを載せている sustainability.html へ。
   margin-left:auto で右端へ寄せる（余白を埋めるための飾りを置かない）。
   矢印はサイト共通の書式（.pres-col__more と同じ「→」）に合わせる */
.pres-goal__more { margin-left: auto; }
.pres-goal__more a { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.pres-goal__more a::after { content: " →"; }
@media (max-width: 939px) {
  /* 幅が足りず別の行に折り返すので、右端ではなく本文と同じ左端にそろえる
     （右端のままだと文章から離れて宙に浮く） */
  .pres-goal__more { margin-left: 0; flex-basis: 100%; margin-top: 0.4rem; }
}
@media (max-width: 619px) {
  /* 縦積みになるので縦罫は消す */
  .pres-goal__num { padding-right: 0; padding-bottom: 0.2em; }
  .pres-goal__num::after { display: none; }
}

/* 締めの言葉＋署名。
   横並びの分岐は 1100px。900pxまで下げると左カラムが 470px 前後まで痩せ、
   結びの一文（--fs-xl で17字）が3行に割れて「る。」だけが残ってしまうため。
   1100px 未満は縦積みにして本文に全幅を与える */
@media (min-width: 1100px) {
  .pres-close__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: clamp(2.5rem, 5vw, 4rem); align-items: start;
  }
  /* 本文と署名を縦罫で仕切る（デザイン案どおり） */
  .pres-close__sign { padding-left: clamp(2.5rem, 5vw, 4rem); }
}
/* 結びの一文だけ級数を上げて、ページの視線の終着点をつくる */
.pres-close__lead {
  font-size: var(--fs-xl); font-weight: 900; color: var(--navy);
  line-height: 1.8; letter-spacing: 0.04em;
}
.pres-close__note {
  margin-top: 1.4em;
  font-size: var(--fs-sm); line-height: 2; color: var(--ink-soft); letter-spacing: 0.04em;
}
@media (max-width: 1099px) {
  .pres-close__sign {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    padding-top: clamp(2rem, 5vw, 2.6rem);
  }
}
/* 署名ブロック。略歴（開閉式）を廃止したので、氏名を縦に積むだけの単純な箱に戻す。
   ※ 2026-07-27 まではここに details/summary の「略歴を見る」を横に並べていたが、
     同業9社が社長ページに略歴を載せていないこと・年月確定が公開の足かせだったことから廃止。
     経歴の要点は本文（.pres-cols の右カラム）に移した。
     これに伴い .pres-career / .president__career と :has() での組み替えも不要になり削除。 */

.president__company,
.president__role { display: block; font-size: var(--fs-sm); color: var(--ink-muted); letter-spacing: 0.12em; }
.president__role { margin-top: 0.2em; }
.president__name {
  display: block; font-size: var(--fs-xl); font-weight: 700;
  color: var(--navy); letter-spacing: 0.16em; margin-top: 0.5em;
}
/* 署名（仮）の画像。文字の名前（.president__name）の代わりに置く。
   幅は文字の名前の2倍ほどの高さになるように決めた（2026-10-27）。
   2026-10-30 からは、印刷の文字の名前の画像（images/president-name.png）を同じ幅で置いている */
.president__sign { display: block; width: min(15rem, 70vw); height: auto; margin-top: 0.6em; }
/* 会社情報のトップメッセージの抜粋の署名（仮）。文の下に右寄せで置き、ボタンはその下（2026-10-27） */
.excerpt-sign { margin-top: 1.4rem; text-align: right; }
.excerpt-sign .president__sign { width: min(12rem, 60vw); margin-left: auto; margin-top: 0.3em; }
.president__en {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-muted); letter-spacing: 0.22em; margin-top: 0.5em;
}

/* ---- 25. 採用情報の入口（recruit.html。2026-10-30） ----
   新卒採用（新卒採用サイト newgrad/）とキャリア採用（エントリーページ HRMOS）を選ぶ2枚。
   東プレの採用ページに倣い、上に紺の帯の見出し、下に写真と行き先。どちらも新しいタブで開く */
.recruit-gate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 700px) { .recruit-gate { grid-template-columns: minmax(0, 1fr); } }
.recruit-gate__card {
  display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--navy);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-decoration: none;
}
.recruit-gate__head { display: block; background: var(--navy); color: #fff; text-align: center; padding: 1.1rem 1rem 1rem; }
.recruit-gate__title { display: block; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; }
.recruit-gate__who { display: block; margin-top: 0.25em; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.86); }
.recruit-gate__photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.recruit-gate__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.recruit-gate__photo::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.5); transition: background 0.3s ease; }
.recruit-gate__cta {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.1em 0.4em;
  width: max-content; max-width: calc(100% - 2rem); padding: 0.8em 1.6em; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-md); font-size: var(--fs-md); font-weight: 700; color: var(--navy); text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.recruit-gate__card:hover .recruit-gate__photo img { transform: scale(1.04); }
.recruit-gate__card:hover .recruit-gate__photo::after { background: rgba(255, 255, 255, 0.3); }
.recruit-gate__card:hover .recruit-gate__cta { background: var(--navy); color: #fff; }
.recruit-gate__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.recruit-gate__links { justify-content: center; margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; padding: 0; }
.stop-links a.is-ext::after { content: none; }
.recruit-gate__contact { margin-top: 1.2rem; text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); }
/* 2枚のカードのすぐ下の PDF のリンク（採用活動のハラスメント防止の案内。2026-11-02 本人「東プレと同様に」→ 案A）。
   東プレの採用情報のページと同じく、左寄せの文字のリンクで、頭に丸い矢印、後ろに PDF の印。押すと PDF を新しいタブで開く。
   文字は nb で区切り、狭い画面では「採用活動における／ハラスメント防止の取り組みについて」のように言葉の切れ目で折る（PDF の印は最後の言葉とつなぐ） */
.pdf-links { list-style: none; margin: clamp(0.9rem, 2vw, 1.2rem) 0 0; padding: 0; }
.pdf-links a { color: var(--ink); font-size: var(--fs-base); line-height: 1.7; text-decoration: none; }
.pdf-links a::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.45em; vertical-align: -0.17em; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5.6l5.2 4.4L8 14.4z' fill='white'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.pdf-links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 0.2em; }
.pdf-links a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.pdf-ico { display: inline-block; width: 0.95em; height: 1.15em; margin-left: 0.35em; vertical-align: -0.2em; }
@media (prefers-reduced-motion: reduce) { .recruit-gate__photo img { transition: none; } .recruit-gate__card:hover .recruit-gate__photo img { transform: none; } }

/* ---- 26. 新卒採用サイト（newgrad/ の5ページ。2026-10-30） ----
   コーポレートサイトと同じ部品を使い、ヘッダーのロゴの横に「新卒採用」の札を付けて、別のサイトだと分かるようにする */
/* ロゴと札の間（2026-10-31 本人「近い」→ 案A。前は 0.7rem〈11px〉で、札がロゴより背が高く、つながって見えた）。札はロゴ（29px）より低い 27px に */
.header__logo--ng { gap: 1.4rem; }
/* ロゴの画像だけが縮む（札とメニューのボタンは縮めない）。320px でも右のメニューのボタンが画面に入るように */
.header__logo--ng img { flex: 0 1 220px; width: 220px; min-width: 0; height: auto; }
.ng-badge {
  flex: none; display: inline-flex; align-items: center; padding: 0.22em 0.85em; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap;
}
/* 狭い画面（.ng-badge の後ろに置く。前は前に置いていて、札の余白の指定が効いていなかった） */
@media (max-width: 420px) { .header__logo--ng { gap: 0.8rem; } .ng-badge { padding: 0.22em 0.65em; } }
.drawer__site { margin: 0.2rem 0 0.4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--accent-text); }
/* 次のページへ（各ページの終わり） */
.ng-next { padding-block: clamp(2rem, 5vw, 3rem); background: #fff; }
.ng-next__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 760px; margin-inline: auto; padding: 1.3rem 1.8rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm);
  color: var(--navy); text-decoration: none; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.ng-next__link::after { content: "›"; flex: none; font-size: 2rem; line-height: 1; color: var(--brand); }
.ng-next__link:hover { border-color: var(--brand); box-shadow: var(--shadow-md); color: var(--navy); }
.ng-next__label { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--accent-text); }
.ng-next__title { display: block; margin-top: 0.15em; font-size: var(--fs-lg); font-weight: 700; }

/* ---- 27. 採用情報のメニューの付け替え（2026-10-30） ----
   サイトマップの「新卒採用サイト」の下の4ページは、1段下げて並べる */
.sitemap-group li ul { margin: 0.2em 0 -0.35em; }

/* ---- 28. 会社情報の沿革の月（2026-10-30） ----
   出来事ごとに、左に月の欄を置く（月が分からない出来事は空けておく）。
   480px 以下は、月の欄を別にすると文の幅が足りずにはみ出すので、月を文の頭に並べる */
.timeline__events { list-style: none; margin: 0.3em 0 0; padding: 0; color: var(--ink-soft); }
.timeline__events li { display: flex; gap: 0.7em; padding: 0.12em 0; }
.timeline__mo { flex: none; width: 2.4em; font-family: var(--ff-en); font-weight: 700; color: var(--brand); }
.timeline__ev { flex: 1 1 auto; min-width: 0; }
.timeline__ev strong { color: var(--ink); }
@media (max-width: 480px) {
  .timeline__events li { display: block; }
  .timeline__mo { display: inline; width: auto; margin-right: 0.5em; }
  .timeline__mo:empty { display: none; }  /* 月が分からない出来事は、頭に空白を作らない */
}

/* ---- 29. 新卒採用サイトの FAQ の答え（2026-10-30） ----
   答えの文は1つずつ <span class="sent"> に入れてある（「はい。」など短い1文目は次の文と同じまとまり）。
   パソコン・タブレット（621px 以上）は文ごとに行を改め、2行になる文は2行の長さをそろえる（balance）。
   p の text-wrap: pretty のままだと、Safari は段落全体の行の長さをそろえようとして、1行に入る文まで途中で2行に分けていた。
   スマホ（620px 以下）は文を続けて、文のまとまり（.ph）で自然に折る */
@media (min-width: 621px) { .faq__a .sent { display: block; text-wrap: balance; } }

/* ---- 30. 新卒採用サイトの募集要項（2026-10-30） ----
   初任給の区分名（「大学卒・高専（専攻科）卒」など）が長くなったので、区分名の欄の幅は .req-list--pay で中身に合わせた。
   応募書類の欄に、エントリーシート（PDF・Excel）を落とすボタンを置く（本文のリンクの下線〈main dd a〉より強くするため #requirements を付けた） */
.req-dl { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.55em 0 0.15em; padding: 0; list-style: none; }
#requirements .req-dl a {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 1em; border: 1px solid var(--brand); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; color: var(--brand); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
#requirements .req-dl a::before { content: "↓"; font-weight: 700; }
#requirements .req-dl a:hover { background: var(--brand); color: #fff; }

/* ---- 31. 新卒採用サイトの募集要項の見やすさ（2026-10-30 夕方） ----
   14項目を5つのまとまり（.req-group）に分け、表の上に要点の4つの札（.req-keys）、長い列挙は1つずつの札（.req-tags）。
   表の中の小見出し（dt）の幅は、621px 以上でそろえる（前は行ごとに 7.2em・11.5em・中身なりで、値の書き出しの位置がばらばらだった） */
.req-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); padding: 0; list-style: none; }
.req-keys li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.35em; min-width: 0;
  padding: 0.95em 1.1em 1em; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); border-top: 3px solid var(--brand);
}
.req-keys__label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); letter-spacing: 0.04em; }
.req-keys__value { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.45; }
.req-keys__value strong { font-family: var(--ff-num); font-size: 1.85em; font-weight: 700; color: var(--navy); line-height: 1.1; margin-right: 0.08em; }
/* 札の並び：パソコンは4つ、タブレット（900px 以下）は2つずつ、スマホ（480px 以下）は1つずつ横長（左に見出し・右に値）。
   4つ横並びのままだと、768px で「賞与（2025｜年度実績）」と折れ、320px の2つ並びでは勤務地の値が札からはみ出した */
@media (max-width: 900px) { .req-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } }
@media (max-width: 480px) {
  .req-keys { grid-template-columns: 1fr; gap: 0.45rem; }
  .req-keys li { flex-direction: row; align-items: center; gap: 0.8em; padding: 0.6em 1em; border-top: none; border-left: 3px solid var(--brand); }
  .req-keys__value { text-align: right; }
  .req-keys__value strong { font-size: 1.6em; }
}
.req-group + .req-group { margin-top: clamp(1.8rem, 4vw, 2.4rem); }
.req-group__title { display: flex; align-items: center; gap: 0.55em; margin: 0 0 0.75em; font-size: var(--fs-md); font-weight: 700; color: var(--navy); }
.req-group__title::before { content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 2px; background: var(--brand); }
/* 表は白い地（前は背景の薄い青が透けて、文字と区切りが見えにくかった）。項目名の列の幅は、5つの表でそろえる */
.req-group .info-table--req { width: 100%; table-layout: fixed; background: #fff; }
@media (min-width: 621px) {
  .info-table--req .req-list, .info-table--req .req-list--wide { grid-template-columns: 11.5em minmax(0, 1fr); }
  .info-table--req .req-list--pay { grid-template-columns: 11.5em max-content; }
}
@media (max-width: 620px) {
  .req-group .info-table--req th { padding-top: 0.85em; }
  .req-group .info-table--req td { padding-bottom: 0.95em; }
}
.req-tags { display: flex; flex-wrap: wrap; gap: 0.45em 0.4em; margin: 0.1em 0 0; padding: 0; list-style: none; }
.req-tags li { padding: 0.18em 0.8em; border-radius: 999px; background: var(--base-blue); font-size: var(--fs-sm); line-height: 1.65; color: var(--ink); }
.req-tags li.req-tags__more { background: none; padding-left: 0.15em; padding-right: 0; color: var(--ink-soft); }
.req-more { margin-top: 0.6em; font-size: var(--fs-sm); }
/* 募集職種の「詳しくはマイナビ2027で…」のリンク（td の中なので、本文のリンクの下線〈main p a・main dd a〉が付かない）に下線を付ける（2026-10-30） */
#requirements td .req-sub a { text-decoration: underline; text-underline-offset: 0.15em; }
/* 募集職種・応募方法：1つの欄の中に、対象ごとの小見出し（● 大学生・大学院生・高専生／● 高校生）と中身を縦に並べる（2026-10-30 本人「この形で」）。
   前は対象の名前を左の細い欄に入れていて「大学生・大学院生・／高専生の方」と途中で折れていた */
.req-targets { margin: 0; }
.req-targets dt { display: flex; align-items: center; gap: 0.45em; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); line-height: 1.5; }
.req-targets dt::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--brand); }
.req-targets dd { margin: 0.25em 0 0 1em; }
.req-targets dd + dt { margin-top: 0.85em; padding-top: 0.85em; border-top: 1px dashed var(--line); }
/* FAQ「会社見学はできますか？」の電話番号（久留米本社工場・苅田工場）は、1か所1行（2026-10-30 本人「案Bで」） */
.faq__a .faq-tel { list-style: none; margin: 0.45em 0 0.55em; padding: 0 0 0 1em; }
.faq__a .faq-tel li { line-height: 1.75; }
.faq__a .faq-tel a { font-weight: 700; }
/* 480px 以下は、名前と番号を別の行にして、2か所の形をそろえる（1行のままだと、久留米本社工場の行だけ番号が次の行に落ちていた） */
@media (max-width: 480px) { .faq__a .faq-tel li > .nb:first-child { display: block; } .faq__a .faq-tel li + li { margin-top: 0.3em; } }
/* 保護者・先生の方への「学校関係者の皆様へ」の電話番号（久留米本社工場・苅田工場。2026-10-30 本人「案Bで」）も、480px 以下は名前と番号を別の行にして、2か所の形をそろえる
   （そのままだと 390〜414px で、久留米本社工場の行だけ番号が次の行に落ちていた） */
@media (max-width: 480px) { .assure-box .tel-label { display: block; } .assure-box .tel-label ~ .tel-label { margin-top: 0.3em; } }
/* お問い合わせの「採用について」のカードは、久留米本社工場と苅田工場の2つの番号（2026-10-30 本人「苅田も追加して」）。番号の上に工場の名前を小さく出す */
.contact-card__place { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.5; }
.contact-card__tel + .contact-card__place { margin-top: 0.7rem; }
/* 採用の連絡先の、工場の名前（.tel-label。2026-10-30 本人「先ほど指摘してくれたところもお願いしたい」で、苅田工場の番号を足した所）。
   名前と番号が、久留米は別の行・苅田は同じ行、とそろわなくならないよう、狭いときは名前を番号の上の行に出して、2か所の形をそろえる。
   バーチャル工場見学の見学の案内のカードは狭いので、どの幅でも。新卒採用サイトの一番下の帯は、どの幅でも1か所1行に収まるので、工場の名前と番号を1つのまとまり（nb）にしただけ */
.tour-guide__text .tel-label { display: block; }
.tour-guide__text .tel-label ~ .tel-label { margin-top: 0.25em; }
/* 応募・募集要項の「迷ったら、まず見学から。」と採用情報の入口は、工場の名前と番号を1つのまとまり（nb）に入れ、480px 以下は名前だけを上の行に出す
   （名前と番号を別のまとまりにすると、Chrome で「…（代表） 苅田工場：」の後ろで折れて、番号だけが次の行に落ちた） */
@media (max-width: 480px) { .tel-lines .tel-label { display: block; margin-top: 0.3em; } }

/* ---- 32. 設立25周年の帯とご挨拶の記事（2026-11-02） ----
   書は届いた画像のまま（黒の文字に白の地）なので、帯と記事の地は白のまま（本人「アップした画像をそのまま活用」）。
   帯はトップの写真の下のニュースの行のすぐ下。2027年3月末に外す想定 */
.anniv-band { background: #fff; border-bottom: 1px solid var(--line); }
.anniv-band__link { display: grid; grid-template-columns: minmax(0, 360px) auto; justify-content: center; align-items: center; gap: clamp(1.6rem, 5vw, 4.4rem); padding-block: clamp(1.8rem, 4vw, 2.8rem); color: var(--ink); text-decoration: none; }
.anniv-band__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
.anniv-band__sho { display: block; width: 100%; height: auto; }
.anniv-band__text { display: block; min-width: 0; }
.anniv-band__en { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em; color: var(--accent-text); margin-bottom: 0.7em; }
.anniv-band__title { display: block; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.55; margin-bottom: 0.6em; }
.anniv-band__lead { display: block; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); margin-bottom: 1.1em; }
.anniv-band__cta { display: inline-block; padding: 0.65em 1.4em; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: var(--fs-sm); transition: background 0.3s ease; }
.anniv-band__link:hover .anniv-band__cta { background: var(--brand); }
@media (max-width: 700px) {
  .anniv-band__link { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .anniv-band__sho { max-width: 280px; }
}
.anniv-letter__sho { display: block; width: min(100%, 560px); height: auto; margin: 2.2rem auto 0; }
.article-body .anniv-letter__sign { margin-top: 2.4em; text-align: right; line-height: 1.9; color: var(--ink); }
.anniv-letter__links { justify-content: center; margin: 2.4rem 0 0; padding: 0; }
@media (max-width: 899px) { .anniv-letter p:not(.anniv-letter__sign) br { display: none; } }

/* ---- 33. お問い合わせ：親会社の窓口の案内（2026-11-03）。電話番号の前に読めるよう、節の見出しの上に置く ---- */
.parent-note {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem 2.4rem;
  margin-bottom: var(--sp-5); padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2.2rem);
  background: var(--accent-pale); border-radius: var(--radius-lg);
}
.parent-note__title { font-size: var(--fs-lg); font-weight: 700; color: var(--navy); line-height: 1.6; margin: 0 0 0.3rem; }
.parent-note__lead { margin: 0; color: var(--ink-soft); }
.parent-note__list { display: grid; grid-template-columns: auto minmax(10em, 1fr); gap: 0.25em 1.6em; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.parent-note__list li { position: relative; padding-left: 1em; color: var(--ink); }
.parent-note__list li::before { content: ""; position: absolute; left: 0.1em; top: 0.75em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--brand); }
.parent-note__cta { margin: 0; }
.parent-note__where--narrow { display: none; }
@media (max-width: 999px) {
  .parent-note { grid-template-columns: minmax(0, 1fr); }
  .parent-note__cta { text-align: center; }
  /* ボタンが文の下に来るので「右記の」を「下記の」にする */
  .parent-note__where--wide { display: none; }
  .parent-note__where--narrow { display: inline; }
}
/* 電話のカードの番号の高さをそろえる（見出しが2行のカードがあるため）。flex にすると nb が折れなくなるので grid */
@media (min-width: 900px) {
  .contact-card__title { min-height: 2.8em; display: grid; align-content: center; justify-items: center; }
}
@media (max-width: 620px) {
  .parent-note__title { font-size: var(--fs-base); }
  .parent-note__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 34. 新卒採用サイトのトップの書「造」（2026-11-03）。.hero__bg::after（z-index 3）の上、.hero__inner（5）の下に置く ---- */
.hero__sho { position: absolute; z-index: 4; display: block; pointer-events: none; right: -14%; top: 52%; transform: translateY(-50%); width: 116%; max-width: 620px; opacity: 0.14; }
.hero__sho img { display: block; width: 100%; height: auto; }
/* 1024px 以上は文字の右に空きができるので、はっきり出す。文字に重ならない幅（1024〜2560px の間を 8px おきに、墨と文字の重なりを測って決めた） */
@media (min-width: 1024px) {
  .hero__sho { right: max(1.5rem, calc((100vw - 1160px) / 2 - 6rem)); top: calc(50% + 1.6rem); width: 27vw; max-width: 460px; opacity: 0.95; }
}
@media (min-width: 1200px) { .hero__sho { width: 29vw; } }
@media print { .hero__sho { display: none !important; } }

/* ---- 35. 社長メッセージの本文の右の書「造」（2026-11-03）。背景として大きく薄く置き、本文の右側に重ねる ---- */
.pres-letter__sho { display: none; }
/* 1024px より狭いと字が切れたり、薄い汚れのように見えたりするので出さない。
   大きさと位置は、1024〜2560px で署名・リンク・見出しとの重なりと、右端で切れる量を測って決めた
   （署名とリンクには重ならない。見出しには小さな墨の飛び散りだけ）。z-index は .pres-lead > .container の中で文字の下にする */
@media (min-width: 1024px) {
  .pres-letter__body { position: relative; }
  .pres-letter__sho {
    display: block; position: absolute; z-index: -1; pointer-events: none;
    top: 46%; transform: translateY(-50%);
    left: calc(100% - 16rem);
    width: min(52vw, 776px); height: auto; opacity: 0.09;
  }
}
/* この幅では本文の位置が止まる（左 32px・右 808px）ので、書の右端を画面の右端にそろえて、字が切れないようにする */
@media (min-width: 1024px) and (max-width: 1159px) {
  .pres-letter__sho { left: auto; right: calc(808px - 100vw); }
}
@media print { .pres-letter__sho { display: none !important; } }

/* ---- 36. 親会社の車の絵（2026-11-03）。トップの「1470MPa」の帯は、広い画面は文字の右に、狭い画面は文字の下に、車の全体を置く ---- */
.feature-band--car .feature-band__bg::after { content: none; }
.feature-band--car .feature-band__bg img { position: absolute; inset: auto; height: auto; object-fit: contain; opacity: 1; }
/* 文字に重ならない大きさと位置は、320〜2560px で車と文字の重なりを測って決めた。文字の大きさや長さを変えたら測り直す */
@media (min-width: 1024px) {
  .feature-band--car .feature-band__bg img { right: clamp(0.75rem, calc(50vw - 800px), 40vw); top: 50%; transform: translateY(-50%); width: min(52%, 860px); }
}
@media (max-width: 1023px) {
  .feature-band--car .feature-band__bg img { left: 50%; bottom: clamp(1.2rem, 4vw, 2.4rem); transform: translateX(-50%); width: min(92%, 640px); }
  .feature-band--car .feature-band__inner { padding-bottom: calc(min(92vw, 640px) * 0.414 + clamp(2.2rem, 6vw, 3.6rem)); }
}
/* 事業・技術紹介の事業概要：枠を絵の縦横比に合わせる（4:3 のままだと車の前後が切れる） */
.split__media .img-frame--car { aspect-ratio: 690 / 450; }
/* サステナビリティの「軽くつくる」：車の全体を見せる */
.card__media--car { background: #fff; }
.card__media--car img { object-fit: contain; }