/* ============================================================
   JENIS新規HP ビジュアルモックアップ v2(トップページ)
   配色・トーンは projects/コンサル案件/（株）JENIS_コンサル/デザインコンセプト.md v2
   (`## NG回数3`を受けた全面改訂版)のパレット・レイアウト方針に準拠。
   ネイビー(信頼・大手感)+ビビッドオレンジ(訴求力・CTA)の
   高コントラスト構成、フルブリード写真+太字見出しの重ね、
   CTAの反復配置、番号付き理由カード、数字の信頼シグナルを実装した。
============================================================= */

:root {
  --color-base: #ffffff;         /* ベース: 締まった白(v1のオフホワイトから転換) */
  --color-surface-soft: #F4F6F9; /* ごく薄いグレー、白背景との区切り用 */
  --color-trust: #1B2A4A;        /* メイン/信頼: ディープネイビー */
  --color-trust-dark: #0F1A30;
  --color-trust-soft: #E7EAF1;
  --color-accent: #EA5B2F;       /* アクセント: ビビッドなオレンジ/レッド */
  --color-accent-dark: #C8431C;
  --color-text: #262B33;
  --color-text-soft: #6B7280;
  --color-text-on-dark: rgba(255, 255, 255, 0.88);
  --color-line: #E4E7EC;
  --color-photo-ph-1: #B7C3DC;   /* 実写差し替え待ちプレースホルダー用。暗い色は使わない方針のため薄い水色寄りに設定 */
  --color-photo-ph-2: #8CA0C4;   /* 同、やや濃いめ側だが暗色にはしない */
  /* 【2026-09-27 全面再設計】新設ロール(デザインコンセプト.md 10-3節)。
     用途は信頼バッジ・工程紹介カード・選ばれる理由ブロックの「アイコンの線・円背景」
     のみに限定する。CTA・大面積の塗りには使わない(3-0節の絶対制約を維持)。 */
  --color-accent-secondary: #3E7FBF;
  --color-accent-secondary-soft: rgba(62, 127, 191, 0.12);
  --color-brand-ink: #042B89;    /* オープニングの社名「JENIS」専用。キャッチ画像(lettering-headline.png)の実測色(不透明画素の中央値) */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --max-width: 1120px;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-display: "Zen Kaku Gothic New", var(--font-body);
  --font-brush: "Yuji Syuku", var(--font-body); /* 見出し専用の筆文字系フォント(社長参考画像に合わせる、2026-09-27) */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-base);
  color: var(--color-text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* 見出し類は本文と別の書体(Zen Kaku Gothic New)にして、
   システムフォントのみで揃えていた見た目の「安っぽさ」を解消する
   (2026-09-27社長指摘)。本文は引き続き可読性重視の既存書体のまま。 */
h1, h2, h3, .hero-heading, .section-title, .opening-catch, .section-deco, .hero-stat-number, .hero-stat-license, .hero-stat-text {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }

/* ---------- オープニング演出(fullcast型: 実機確認の上で再現)
   フェードイン(0-15%)→静止(15-70%)→フェードアウト(70-100%)を
   1本のCSSアニメーションで完結させる。GSAP等の外部ライブラリは使わない。
   アニメーション未対応環境でもopacity:0が初期値のため、常時表示されたまま
   固まって操作不能になることはない(壊れた時に全非表示側へ倒す設計)。 ---------- */
.opening-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  animation: openingFade 3.1s ease forwards;
}

/* キャッチ=ヒーローと同じ筆文字画像(動きは消える時の不透明度だけ)。社名の動きは「株式会社」が浮き上がり、「JENIS」が左→右にワイプ。
   0秒から白幕で覆う(ヒーローを一瞬も見せない)+キャッチが0〜0.47秒でフェードイン / 0.5〜1.0秒 株式会社 / 0.8〜1.5秒 JENIS / 2.05〜2.35秒 キャッチと社名が先に消える / 2.33秒〜 幕が上がる(全体3.1秒) */
.opening-catch {
  max-width: none;
  line-height: 0;
}
.opening-catch img {
  display: block;
  width: min(58vw, 380px);
  height: auto;
  animation: openingC 3.1s linear forwards;
}

.opening-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.opening-logo .k,
.opening-logo .j {
  display: inline-block;
  opacity: 0;
  animation-duration: 3.1s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: forwards;
}
.opening-logo .k { animation-name: openingK; font-weight: 700; margin-right: 0.12em; }
.opening-logo .j { animation-name: openingJ; color: var(--color-brand-ink); }

@media (min-width: 769px) {
  .opening-splash { gap: 28px; }
  .opening-logo { font-size: 28px; }
}

@keyframes openingFade {
  0% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes openingC { 0% { opacity: 0; } 15%, 66% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes openingK {
  0%, 16% { opacity: 0; transform: translateY(6px); }
  32%, 66% { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; transform: none; }
}
/* 「JENIS」は初期をclip-pathで全面隠しているので、opacity:1のまま0〜26%(0.8秒)を待つ */
@keyframes openingJ {
  0%, 26% { opacity: 1; clip-path: inset(-6px 100% -6px -6px); transform: translateY(6px); }
  48%, 66% { opacity: 1; clip-path: inset(-6px); transform: none; }
  76%, 100% { opacity: 0; clip-path: inset(-6px); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-splash { display: none; }
}

.section {
  position: relative;
  padding: 72px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.section-title--trust { color: var(--color-trust); }
.section-title--left { text-align: left; margin-bottom: 14px; }

.section-lead {
  text-align: center;
  color: var(--color-text-soft);
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: 15px;
  position: relative;
  z-index: 1;
}

.section-lead--left { text-align: left; margin: 0 0 0; max-width: 480px; }
.section-lead--dark { color: var(--color-text-soft); }

.placeholder-label {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-trust);
  font-size: 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.placeholder-label--dark {
  background: rgba(255, 255, 255, 0.88);
}

/* 装飾用の大きな和文タイポグラフィ(kiml型、CSSのみ・画像制作不要) */
.section-deco {
  position: absolute;
  top: -0.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(90px, 18vw, 220px);
  font-weight: 900;
  color: var(--color-trust);
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}

/* ---------- スクロール入場演出(IntersectionObserver+CSS transitionのみ) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(.22, .61, .36, 1), transform 0.6s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 見出しの入場(ラベル・大見出し・リード。js/reveal-heading.js。1回だけ・transform/opacityのみ・will-changeなし) ----------
   隠す状態 .rv-pre は、JSが「アニメを実行する」と決めた要素にだけ付く(素のCSSには opacity:0 を書かない=JS無効・reduced-motion・最初から画面内は全表示)。
   見た目(色・サイズ・余白・文言)は変えず、動きだけ足す。イージングはオープニング・ジオラマの入場と同じ。 */
[data-rv].rv-pre { opacity: 0; }
[data-rv="label"].rv-pre { transform: translateY(10px); }
[data-rv="title"].rv-pre, [data-rv="lead"].rv-pre { transform: translateY(14px); }
[data-rv].rv-pre.rv-in { opacity: 1; transform: none; }
[data-rv="label"].rv-pre.rv-in { transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); }
[data-rv="title"].rv-pre.rv-in { transition: opacity .6s cubic-bezier(.22, .61, .36, 1) .12s, transform .6s cubic-bezier(.22, .61, .36, 1) .12s; }
[data-rv="lead"].rv-pre.rv-in { transition: opacity .6s cubic-bezier(.22, .61, .36, 1) .24s, transform .6s cubic-bezier(.22, .61, .36, 1) .24s; }
@media (prefers-reduced-motion: reduce) {
  [data-rv].rv-pre { opacity: 1; transform: none; transition: none; }
}

/* ---------- アイコン(水色円背景、デザインコンセプト.md 10-3節)
   信頼バッジ・診断ティーザー・工程紹介・選ばれる理由でのみ使用する。
   CTA・大面積の塗りにはaccent-secondaryを使わない。 ---------- */

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-secondary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-circle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-accent-secondary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-circle--lg { width: 56px; height: 56px; }
.icon-circle--lg svg { width: 28px; height: 28px; }

.section-eyebrow {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-accent-secondary);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.logo-block { grid-column: 1; display: flex; flex-direction: row; align-items: center; gap: 10px; }

/* JENISロゴ画像(使用許可済み 2026-10-07社長確認)。文字ロゴ(.logo)に戻す場合は index.html のコメント参照。
   白地のまま使用。filter/transform/背景色/枠は付けない(logo-spec.md)。 */
.logo-img { display: block; height: 44px; width: auto; }
@media (max-width: 959px) { .logo-img { height: 36px; } .logo-tagline { display: none; } }

/* .logo / .logo span は画像化により未使用(文字ロゴへの戻し用に残す) */
.logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-trust);
}

.logo span { color: var(--color-accent); }

/* 【2026-09-27 全面再設計】ヘッダーのタグライン(仮、デザインコンセプト.md 10-4-1節)。
   確定はクライアント確認後のため「仮)」接頭辞を継続表示する。 */
.logo-tagline {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

.global-nav {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 28px);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.global-nav a, .btn-header-cta { white-space: nowrap; }

.global-nav a:hover { color: var(--color-accent); }

/* 【2026-09-27 全面再設計】ナビのドロップダウン(デザインコンセプト.md 10-4-1節)。
   「仕事を探す」「会社情報」の中身はサイト構成案5-3節の既存ナビに統一し、
   新規ナビ項目は作らない(単一ページのモックアップのため同一ページ内アンカーへ遷移)。 */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-parent::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.55;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 32px rgba(27, 42, 74, 0.16);
  padding: 8px 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  z-index: 10;
}

.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: flex; }
.nav-item.is-esc .nav-dropdown { display: none; }
/* 親と中身の間の隙間(14px)をマウスが通っても閉じないよう、透明な橋を掛ける */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-parent.is-off::after { display: none; }

.nav-dropdown a {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.nav-dropdown a:hover { background: var(--color-surface-soft); color: var(--color-accent); }

/* 【2026-09-27 全面再設計】ヘッダー右側(電話アイコン+CTA+ハンバーガー)。
   電話アイコンはBRIEF.mdの「電話に出られない」課題への対応として新設(10-2節)。 */
.header-right {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent-secondary-soft);
  flex-shrink: 0;
}

.header-tel svg {
  width: 17px;
  height: 17px;
  fill: var(--color-accent-secondary);
}

.btn-header-cta {
  padding: 10px 20px;
  font-size: 13px;
  box-shadow: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-trust);
  border-radius: 2px;
}

/* ---------- ファーストビュー(社長指示: 分割せず1枚の写真を背景にし、その上に文字を乗せる)
   【2026-09-27】左右分割案は「まって、分割しないで1枚の画像を背景にしてその上に
   テキストを載せて」と差し戻された。写真はフルブリードの1枚背景とし、暗い
   スクリムや半透明パネルは使わず(既存の絶対制約)、写真の中で明るく写っている
   部分(空)にネイビーの太字テキストを直接置き、ソフトな明るいtext-shadowだけで
   可読性を確保する。
   ---------- */

.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

/* 2026-09-29: SP専用の演出要素(手書き画像見出し/白いもや/粒子)はPCでは非表示。
   SP側(@media max-width:768px内)で表示に切り替える。 */
.hero-heading-img,
.hero-haze,
.hero-grain {
  display: none;
}

/* 【2026-09-28追記・新写真(hero-woman-warehouse-wide-a.jpg、縦3:4)差し替え】
   旧写真(横2.5:1)は`box_ratio(約2.4) < 画像比(2.5)`で水平方向クロップが
   主だったが、新写真は画像比(0.747、縦長)が`.hero`のどんな現実的な高さでも
   ボックス比(1440/600=2.4等)を大きく下回るため、常に「幅基準で全幅表示・
   垂直方向のみクロップ」という逆のクロップ挙動になる(object-fit:coverの
   スケール = max(box_w/img_w, box_h/img_h)が常に前者で決まるため)。
   このためX値(62%)は現在の構図では実質無効(全幅表示のため水平クロップが
   発生しない)だが、将来box高さを画像比に近づける変更が入った場合に備え
   値はそのまま残す。Y値は旧写真の35%のままだと可視window(高さ600pxの
   box→画像高の約31%相当)が女性の目のあたりで途切れ、顔の下半分(鼻から下)
   が切れて中途半端に見えたため、女性の顔中心(実測: 画像高の約48%位置)が
   可視window中央に来るよう47%へ変更した。 */
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 47%;
  display: block;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.hero-content {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* 【2026-09-27四度目の改訂・重要】社長が新たにPC実機イメージを提示し「全然違う、
   ちゃんと参考画像をみて」「ヒーロー画像一枚に収めてるでしょ」「ちょうどが
   なぜか小さくて意味がわからない」と明確な指摘。見出しを__lead(小)+__main(大)
   に分割する構成(直前のLUNAグラフィック作り込み)は、意味的に重要な語が
   小さくなり伝わりにくくなる失敗だったため撤回する。見出しは1つのサイズ・
   1つの色で統一し、代わりに英語の小さなアイキャッチ(eyebrow)を上に添える、
   という参考画像の構成に合わせる。英語eyebrow(小さく・字間を開けて)。 */
.hero-eyebrow-en {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-trust);
  text-transform: uppercase;
}

/* 2026-09-28 NG9是正: 「未経験でも、体力に自信がなくても、大丈夫。」の一文コピー
   (.hero-fact-line)は社長指示によりテキストごと削除(PC/SP共通、旧467〜472行目)。 */

/* 見出し: 筆文字系フォント(Yuji Syuku)で1つのサイズ・1つの色に統一する。
   意味の異なる語を大小で分けない(社長指摘の再発防止)。 */
.hero-heading {
  font-family: var(--font-brush);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 400;
  color: var(--color-trust);
  line-height: 1.35;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 3px 18px rgba(255, 255, 255, 0.75);
}

.hero-heading .accent {
  color: var(--color-accent);
}

/* サブコピー(2026-09-28新規追加、SP限定)。PC側ヒーローには追加しない
   (designer申し送り: 新参考画像がSP幅のみのため、PC側の見え方の参照が無い)。
   既定は非表示、SPの@media (max-width:768px)内でのみ表示に切り替える。 */
.hero-subcopy {
  display: none;
}

/* 【2026-09-27 LUNAグラフィック作り込み】SP一文内の「大丈夫」のみに適用する
   アクセント淡色マーカー。白帯の上に乗る文字のため白マーカーは機能せず、
   色を変えて効果だけ翻訳する(デザインコンセプト.md 4-1再追記B)。
   box-decoration-break:cloneでテキストの実際の幅に密着させ、画面幅いっぱいの
   帯にはしない。 */
.marker-accent {
  background-color: rgba(234, 91, 47, 0.18);
  color: inherit;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  font-weight: 800;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 【2026-09-27四度目の改訂】社長のPC参考画像は、実績バッジ3つがそれぞれ
   独立した小さな白いカード(角丸+薄い影)として写真の上に直接並んでいる
   (共有の1枚の帯ではない)。この構成に合わせる。密度の高い作り込みを
   伴う横並び・カードは本日確定した方針の通り問題ない。 */
.hero-trust-band {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  box-shadow: 0 8px 20px rgba(27, 42, 74, 0.1);
}

.trust-badge .icon-circle {
  width: 36px;
  height: 36px;
}

.trust-badge .icon-circle svg {
  width: 18px;
  height: 18px;
}

.trust-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.trust-badge-text strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-trust);
}

.trust-badge-text small {
  font-size: 11px;
  color: var(--color-text-soft);
}

/* ---------- 診断ティーザーボックス(社長モックアップの検索ボックスの視覚パターンを
   実在する機能=診断コンテンツの入り口に転用。デザインコンセプト.md 10-4-3節) ---------- */

.diagnosis-teaser-wrap {
  max-width: var(--max-width);
  margin: -64px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* 2026-09-30 LUNA仕様11-3-1/11-3-2: カードはgrid。769〜1019pxは縦積み、1020px以上は2カラム(下のmedia) */
.diagnosis-teaser {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 46px rgba(27, 42, 74, 0.16);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 18px;
}

/* ヘッダー: アイコン・見出し・リードは直接の子。PC=「アイコン56|見出し+リード」 */
.diagnosis-teaser-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
}

.diagnosis-teaser-head .icon-circle { grid-column: 1; grid-row: 1 / span 2; align-self: center; }

.diagnosis-teaser-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-trust);
  text-wrap: balance;
  /* 日本語はbalanceだけだと任意の位置で折れるため、keep-allで<wbr>(「、」の後)以外では折らない */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.diagnosis-teaser-lead {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 14.5px;
  color: var(--color-text-soft);
  text-wrap: balance;
}

.quick-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-surface-soft);
  color: var(--color-trust);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--color-line);
  transition: background 0.15s ease, border-color 0.15s ease;
  gap: 6px;
}

/* 先頭の水色丸チェック(アイコンのみ。面には使わない) */
.quick-tag__check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-accent-secondary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-tag:hover {
  background: var(--color-accent-secondary-soft);
  border-color: var(--color-accent-secondary);
}

/* CTA列: ヒーロー確定の橙に統一(.btn-ctaは他セクションでも使うためここでスコープ)。hoverで色替えしない */
.diagnosis-teaser-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.diagnosis-teaser .btn-cta {
  background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(150, 45, 0, 0.35);
  box-shadow: 0 6px 14px rgba(27, 42, 74, 0.28);
}

.diagnosis-teaser .btn-cta:hover {
  background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%);
}


.diagnosis-teaser-note {
  font-size: 12px;
  color: var(--color-text-soft);
  text-align: center;
}

/* SP専用のCTA2ボタン(社長指示2026-09-30、12章)。PCでは非表示(PCは上の1ボタン)。 */
.teaser-cta-pair { display: none; }

/* 1020px以上: 2カラム(左=ヘッダー+タグ、右=CTA列を2行にまたがる) */
@media (min-width: 1020px) {
  .diagnosis-teaser {
    grid-template-columns: 1fr 320px;
    column-gap: 40px;
    row-gap: 18px;
    align-items: center;
  }
  .diagnosis-teaser-head { grid-column: 1; grid-row: 1; }
  .quick-tag-row { grid-column: 1; grid-row: 2; }
  .diagnosis-teaser-cta { grid-column: 2; grid-row: 1 / span 2; width: 320px; max-width: none; }
}

/* 1020〜1180px: 左列を確保してタグ4つを1行に収める(1024pxで最後のタグが孤立して2行目に落ちるため) */
@media (min-width: 1020px) and (max-width: 1180px) {
  .diagnosis-teaser { padding: 32px 32px; grid-template-columns: 1fr 270px; column-gap: 32px; }
  .diagnosis-teaser-cta { width: 270px; }
  .diagnosis-teaser .btn-large { padding: 18px 16px; }
  .quick-tag-row { gap: 8px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

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

.btn-cta {
  /* 2026-09-28微修正5: 単色から同系オレンジの軽いグラデーションへ(#F0794Cは
     --color-accentを明度+12〜15%程度明るくした同系色、色相・彩度は据え置き)。 */
  background: linear-gradient(135deg, #F0794C 0%, var(--color-accent) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(234, 91, 47, 0.45);
}

.btn-cta:hover { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); }

.btn-large { padding: 18px 28px; font-size: 16px; width: 100%; }

.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ---------- ヒーローCTA ---------- */

.btn-hero-main {
  padding: 20px 32px;
  font-size: 16px;
  /* 2026-09-28 NG9是正: 微修正5(ぼかし半径・不透明度を弱める対応)後も社長から
     「にじんで見える」との継続指摘。designer診断により、原因はテキストではなく
     同系色(オレンジ)box-shadowによるハレーションと判断。数値を弱めても質的には
     解消しないため、影の色をブランドのネイビー系ニュートラル(--color-trust系)に
     変更する。他の.btn-ctaインスタンスは変更しない(このセレクタのみのスコープ)。 */
  box-shadow: 0 6px 14px rgba(27, 42, 74, 0.22);
}

/* ---------- 選ばれる3つの理由(at-cad/adecco型: 番号付きカード) ---------- */

.reasons { max-width: none; background: var(--color-surface-soft); border-radius: var(--radius-lg); margin: 0 24px; overflow: hidden; }

.reason-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.reason-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 0 0 24px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(27, 42, 74, 0.08);
  display: flex;
  flex-direction: column;
}

.reason-number {
  position: absolute;
  margin: 16px;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  background: var(--color-accent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.reason-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-photo-ph-1) 0%, var(--color-photo-ph-2) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px;
}

.reason-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-trust);
  padding: 20px 20px 8px;
}

.reason-card p {
  font-size: 14px;
  color: var(--color-text-soft);
  padding: 0 20px;
}

/* 【2026-09-27 全面再設計】選ばれる理由(3→4ブロック、アイコンベースに変更。
   デザインコンセプト.md 10-4-5節)。社長モックアップのREASON sectionは写真を
   使わずアイコン+見出し+本文のみのため、既存の写真ベースcardから切り替える。 */
.reason-grid--icon { grid-template-columns: repeat(4, 1fr); }

.reason-card--icon {
  position: relative;
  padding: 28px 22px 24px;
  align-items: flex-start;
  gap: 10px;
}

.reason-card--icon .reason-number {
  position: static;
  width: auto;
  height: auto;
  background: none;
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 2px;
}

.reason-card--icon h3 {
  padding: 0;
  font-size: 16px;
}

.reason-card--icon p {
  padding: 0;
  font-size: 13.5px;
}

/* ---------- カードグリッド(職種紹介。写真は上、説明文は白い本文エリアに配置) ---------- */

.card-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 2026-09-30 旧.job-card/.job-photo/.job-card-body系(index.htmlで未使用の死んだ規則)は、
   新設の求人紹介セクション(末尾の「求人紹介」ブロック)と同名で衝突するため削除した。 */

.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  align-self: flex-start;
}

.badge-accent {
  background: var(--color-accent);
  color: #fff;
}





/* ---------- 診断コンテンツ ---------- */











/* ---------- 応募導線(CTA高コントラスト+反復配置) ---------- */













/* ---------- フッター ---------- */

.site-footer {
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-line);
  padding: 48px 24px 24px;
  margin-top: 40px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  font-size: 13px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-trust);
  margin-bottom: 8px;
}
/* ロゴ使用許可済み(2026-10-07社長確認) */
.footer-logo-img { display: block; height: 56px; width: auto; }
@media (max-width: 768px) { .footer-logo-img { height: 48px; } }

.footer-heading {
  font-weight: 800;
  color: var(--color-trust);
  margin-bottom: 8px;
}

.footer-copyright {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-soft);
  margin-top: 32px;
}

/* ============================================================
   ヘッダー: 〜959pxはハンバーガー(2026-10-01、769〜959pxでフルナビが縦に崩れるため。
   ヒーロー等ほかの768pxの切替は変更しない)。≥960pxはフルナビ。
============================================================= */
@media (max-width: 959px) {
  .nav-toggle { display: flex; }
  .btn-header-cta { display: none; }   /* SPのヘッダー右は電話+ハンバーガー。全画面メニュー(.menu-panel)は末尾の「トップの大枠」ブロック */
}

/* ============================================================
   レスポンシブ(モバイル 〜768px)
   design-quality/CSS実装ノート: ブレークポイントは実測ビューポート
   (390px)で必ずscreenshot確認する
============================================================= */

@media (max-width: 768px) {

  /* ヘッダー(ハンバーガー+電話+ロゴ)の規則は、769〜959pxでも使うため下の `@media (max-width: 959px)` へ移した */

  /* 【2026-09-28追記・`## NG (回数: 10)`是正1】NG7〜9は「写真とテキストが技術的に
     重なっているか」「白帯を使わない」までは達成したが、見出しがCTAと同じ
     `.hero-content`フレックス列に同居しているため、常にヒーロー下部(CTA直上)に
     しか配置できず「キャッチが下すぎて見にくい」と社長から指摘された(LOG.md
     `## NG (回数: 10)`参照)。今回は`.hero-inner`を`.hero`全体を覆う透明な
     オーバーレイ(position:absolute;inset:0)に変え、内部はflexの
     justify-content:flex-endでCTAを引き続き下寄せに保ちつつ、見出しだけを
     `.hero-heading`側でposition:absoluteに切り離してヒーロー上端(空の領域)へ
     独立配置する。`align-items:flex-end`だった旧`.hero`のflex指定は
     `.hero-inner`のabsolute化により効果を持たなくなるため削除する(死んだ指定を
     残さない)。 */
  /* 【2026-09-28追記・社長指示「もっと引いてほしい」是正】object-fit:coverの
     可視幅比率は「ボックスの縦横比(幅/高さ)÷画像の縦横比(2.5)」で決まる
     (`## NG (回数: 8)`是正時に判明した式)。box幅は端末幅固定のため、box高さ
     (min-height)を下げるほどbox縦横比が画像側(2.5)に近づき可視幅比率が上がる
     (=より広い範囲が横に見える=「引き」の効果)。逆に上げるほど水平方向だけが
     強くズームされる(直感と逆、`## NG (回数: 8)`のノート参照)。
     なお垂直方向は、このbox(縦横比0.9前後)が常に画像(2.5)より"縦長"側にある
     限りobject-fit:coverは常に画像の全高(0-768px)をボックス高にぴったり
     スケールして収める(クロップ無し)ため、被写体の縦方向の写り方
     (frame高に対する比率)はbox高を変えても一定のまま = `object-position`の
     Y値は実質無効(常に全高表示のため位置指定する余地が無い)。このため
     「引き」の余地は水平方向にしかなく、box高を下げるほど男性スタッフの
     顔がテキスト帯の位置まで絶対px換算で迫り上がる。
     実機測定(`getBoundingClientRect`+スクリーンショット目視、375/390/428px)
     で400/420/440pxを比較した結果: 440pxは安全(見出し+サブコピー下端と
     目の間に十分な余白)だが可視幅比率の改善が32.5%→35.5%(+9%)に留まり
     体感差が乏しい。400pxはサブコピー最終行が男性スタッフの帽子の布地
     ぎりぎりまで迫り(既存許容基準「帽子布地への軽微な重なりは許容、目・鼻・
     口は不可」に対し安全マージンが不足)採用を見送った。420pxは可視幅比率が
     32.5%→37.1%(+14%)に改善しつつ、後述の`.hero-headline-block{top}`を
     10px→0pxに詰めた状態でも男性スタッフの帽子と文字の間に明確な余白が
     残ることを確認できたため、安全と改善幅のバランス点として採用した。
     480pxを大幅に下回る(250〜320px程度)シミュレーションでは参考画像
     (`76fe1872-image.png`)によく似た「フォークリフト・奥の作業員まで写る
     開けた構図」が得られることも画像シミュレーションで確認済みだが、
     その高さでは見出し+サブコピーの表示スペースが物理的に足りず(現状の
     オーバーレイ方式を維持する限り両立不可能)、今回は採用していない
     (詳細・数値根拠はLOG.md「SPヒーロー写真の引き対応」エントリ参照)。 */
  .hero {
    min-height: 420px;
    overflow: hidden;
  }

  /* 写真のクロップ調整(`## NG (回数: 10)`是正1、2026-09-28「引き」是正で66%→55%に
     再調整)。Y値(28%)は上記の通り`.hero{min-height}`がこのbox縦横比では常に
     画像全高をそのまま収めるため実質無効(クロップが発生しない)だが、既存の
     指定はそのまま残す(挙動を変えないため)。X値は、`.hero{min-height:420px}`
     化で可視幅比率が32.5%→37.1%に広がった分、無条件に中央へ寄せるのではなく
     66%→55%へ左シフトし、右クロップされていたフォークリフト・奥の作業員を
     新たに視野へ入れて参考画像(`76fe1872-image.png`)に近い「作業環境が
     見える」構図にした(元画像を直接クロップしてシミュレーションし、男性
     スタッフの頭部が欠けないことを事前確認済み)。実際に顔と重ならないかは
     実写真依存のため、実装後スクリーンショットで確認し、不足があれば
     `.hero-heading`側のrightを広げて幅を狭める対応を優先する
     (フォントサイズは変えない)。 */
  /* 【2026-09-28追記・社長指摘「参照画像よりも人物がひきすぎてる」対応】
     candidate A(縦長3:4)は`.hero{min-height:420px}`に対し常に幅基準で
     object-fit:coverが決まる(box_w/img_w > box_h/img_h)ため、SPでは常に
     画像の全幅が表示される。つまり被写体の左側に広がる大きな空の余白も
     常に画面内に写り込んでおり、この「使われていない余白」を
     `transform:scale`で切り詰めることで被写体を相対的に大きく・近く見せる
     調整が可能(CEO/PMが「元画像に余白の余裕があるためCSSでの微調整は可能」
     と回答した根拠)。object-position(55% 28%)はcover自体の基準点で
     transformの手前の段階のため無変更のまま維持する。
     transform-origin(65% 60%)は被写体(女性)の視覚的な重心付近を指定し、
     見出し用の空スペース(左上)を過度に侵食しないための位置。
     scale値は1.10/1.15/1.20/1.25/1.30をplaywright-coreの実レンダリングで
     比較し、1.20が「見出し・サブコピーが空領域に収まる」「CTA帯と被写体の
     間に不自然な重なりが出ない」「参考画像(`76fe1872-image.png`)の被写体
     占有感に近づく」の3条件を満たす上限に近いバランス点と判断し採用した
     (1.25以降は`.hero-heading .accent`末尾がキャップへ寄り、375px幅で
     既存の許容範囲〈布地への軽微な重なりのみ許容〉のマージンが目減りする
     ため見送った)。375/390/428pxいずれも実機スクリーンショットで
     目・鼻・口への重なりが無いことを確認済み(詳細はLOG.md参照)。 */
  .hero-photo {
    object-position: 55% 28%;
    /* 2026-09-29 社長確定(提案モック ?v=b&s=1.70&l=1): scale 1.2→1.70、origin 69% 69% */
    transform: scale(1.7);
    transform-origin: 69% 69%;
  }

  .hero-inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding: 0 20px 26px;
  }

  .hero-content {
    max-width: 100%;
    /* 2026-09-28 NG9是正: .hero-fact-line削除+.hero-trust-band非表示(微修正4)
       により見出し→CTAのみが残るため、詰まりすぎを避け10px→16pxに広げる。 */
    gap: 16px;
  }

  /* 2026-09-28社長好意的フィードバックによる微修正1: SPでは英語eyebrowを非表示
     (PC側412行目付近の基本ルールは無変更)。 */
  .hero-eyebrow-en {
    display: none;
  }

  /* 見出し+サブコピーの位置指定コンテナ(2026-09-28再構成)。
     旧実装は`.hero-heading`単体をposition:absoluteにしていたが(`## NG (回数: 10)`
     是正1)、サブコピーを見出しに追従させるため、position:absolute/top/left/right
     を`.hero-headline-block`側に集約し、`.hero-heading`はこの中の通常フローの
     子要素に戻す(`getBoundingClientRect`の再計測箇所が1つで済み、見出しの
     行数・サイズが変わってもサブコピーが自動追従する)。
     top/left/rightは`## NG (回数: 10)`是正1の出発値をそのまま踏襲(写真左上の
     空の領域、顔と重ならない位置)。
     【CEO/PM検証によるバグ修正・2026-09-28】top:28pxのままだとサブコピー3行の
     下端(旧: 絶対y≈222px)が男性スタッフの目・鼻(元画像`hero-woman-
     warehouse.jpg`を直接クロップして実測: 元画像上でcap top≈y215px・
     目≈y330-345px・鼻≈y350-370px。`.hero-photo{object-position:66% 28%}`
     +`.hero{min-height:480px}`により垂直方向は原寸そのまま0.625倍
     〈480/768〉されるだけでクロップされないため、スクリーンで
     cap top≈134px・目≈206-216px・鼻≈219-231pxに換算でき、この値は
     `.hero{min-height:480px}`が3幅共通のため375/390/428pxいずれでも
     変わらない)にまで重なってしまっていた(スクリーンショット+sharpに
     よるピクセル輝度サンプリングと元画像実測の両方で確認済み)。
     `## NG (回数: 10)`是正時の基準(「顔・目・鼻・口に重ならない」を満たせば
     帽子〈布地〉自体への軽微な重なりは許容、女性側のaccent語で既に前例あり)
     に合わせ、見出し自体のフォントサイズ・行数は変えず、ブロック全体を
     top:28→10pxへ引き上げることで、サブコピー3行(次項のmargin-top短縮と
     合わせて)の下端を目(y≈206px)より上(絶対y≈197px、余白約9px)に収め、
     帽子布地への軽微な重なりのみ残す(目・鼻・口への重なりは解消)。
     【2026-09-28追記・「引き」是正に伴う再圧縮】上記`.hero{min-height:480→420px}`
     により、目の絶対y位置が206px→(0.43×420)≈181pxへ縮む(box高が下がるほど
     顔の相対%位置は同じでも絶対px位置が上に迫る)。9pxの安全マージンを維持
     するには本ブロックの占有量をさらに削る必要があり、top:10→0pxへ詰めた
     (これ以上上げるとhero上端をoverflow:hiddenで切る可能性があるため0を下限
     とした)。次項のサブコピーmargin短縮と合わせ、実機レンダリングで
     サブコピー3行の下端が男性スタッフの帽子の上で明確な余白を保つことを
     375/390/428pxで確認済み(400pxまで詰めると帽子ぎりぎりになり不採用、
     詳細はLOG.md参照)。 */
  .hero-headline-block {
    position: absolute;
    top: 22px; /* 2026-09-29 手書き画像見出し確定に伴い 0→22px、right 104→58px */
    left: 20px;
    right: 58px;
    z-index: 2;
  }

  /* 375px幅(iPhone SE/8等)では`right:104px`だと箱幅が「ちょうどいい」(46px)の
     自然幅(約284px)より狭く、単語の途中(「ちょう」/「どいい」)で不自然に
     折り返されてしまうことを実機幅スクリーンショットで確認した(`## NG (回数: 10)`
     是正、フォントサイズは変えない制約があるため箱幅側を調整)。狭い幅でのみ
     rightを詰め、それ以外(400px超〜768px)はdesigner仕様の出発値(104px)のまま
     据え置く。
     【CEO/PM検証によるバグ修正・2026-09-28】境界値を対象実機幅ぴったりの
     390pxにしていたところ、390px幅の実機で`matchMedia('(max-width:390px)')`が
     falseを返し(ブラウザのレイアウト計算が390.xxのような端数を持つ一方
     innerWidthは丸めた整数を返すため、境界ぴったりの指定は不一致になりうる)、
     このルールが発動せず「ちょうどいい」が2行に割れる不具合が発生した。
     対象実機幅と同値を境界にするのをやめ、余裕を持たせた400pxに変更して
     375/390/428pxいずれでも同じ判定になるようにした。
     2026-09-28再構成: 対象セレクタを`.hero-heading`から`.hero-headline-block`
     (位置指定の移設先)へ変更、値は無変更。 */
  @media (max-width: 400px) {
    .hero-headline-block {
      right: 58px; /* 2026-09-29 画像見出し確定に伴い全幅共通の58pxに統一 */
    }
  }

  /* 見出し本体: 手書き風フォント(Klee One)+右肩上がりの軽い傾き(参考画像2)。
     PC側の`.hero-heading`基本ルール(476行目付近、Yuji Syuku・傾きなし)は
     変更しない、SPのみの上書き。位置指定は`.hero-headline-block`側へ移譲した
     ため、ここは`position:static`(通常フロー)に戻す。
     2026-09-28 見出し強弱の簡略化(LOG.md該当エントリ〈訂正〉の通り):
     新参考画像(`ca6c4662-image.jpg`)を社長が再精査した結果、実際は
     「ほぼ均一なサイズの本文中に1語だけ突出して大きい」というシンプルな
     構造であり、品詞ごとの規則的な段階分け(旧: accent/sub/particle/comma
     の3〜4段階)ではなかったと判明。「が」「見つかる」「、」「。」を個別
     スパン(__particle/__comma)に分ける必要が無くなったため、`.accent`+
     `.hero-heading__sub`の2種類のspanのみに統合する。
     line-height:1.4は旧__particleのtranslateY分の余白確保が目的だったが、
     全spanが同一サイズになり沈み込み調整が不要になった後も、行間としての
     見え方に支障が無いことを確認済みのためそのまま維持する。 */
  .hero-heading {
    position: static;
    font-family: "Klee One", var(--font-brush);
    transform: rotate(-3deg);
    transform-origin: left center;
    margin: 0;
    line-height: 1.4;
  }

  .hero-heading .accent {
    font-size: 46px;
    font-weight: 700;
    display: inline-block;
    /* 親.hero-headingの-3degに対し相対-1degでやや強い傾きを付ける */
    transform: rotate(-1deg) translateY(1px);
    /* Klee Oneの太さ不足(最大600)を補強。Firefox非対応時は通常太字表示に
       フォールバックするだけで崩れない。参考画像水準の太さに届かない場合は
       Mochiy Pop Oneへのフォント差し替え案あり(下記スクリーンショット比較で判断)。 */
    -webkit-text-stroke: 0.6px currentColor;
  }

  /* 「が」「見つかる」「、」「。」を統一(旧__particle/__commaを廃止して統合)。
     46px(accent)との比は約2.56倍。旧__particleにのみ付けていた
     `translateY(3px)`(サイズ差を吸収する沈み込み調整)は、全spanが同じ
     サイズになったため不要になり削除した。 */
  .hero-heading__sub {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-trust);
  }

  /* サブコピー(2026-09-28新規追加)。見出しの手書き風筆致とは明確に異なる
     ゴシック体(--font-body)、既存の`.section-lead`と同スケール(15px)を
     そのまま流用し新しい型を増やさない。
     【CEO/PM検証によるバグ修正・2026-09-28】色は当初`--color-text-soft`
     (#6B7280、薄いグレー)だったが、写真の上で読みにくいとの指摘を受け
     `--color-trust`(見出し`.hero-heading__sub`と同じネイビー)に変更。
     text-shadowも独自の弱い処方をやめ、直後の見出し用グロー(非対称ソフト
     グロー、`## NG (回数: 10)`是正2で確定した処方)のセレクタに合流させ、
     見出しと全く同じ強さを適用する(新しいトークンは増やさない)。
     margin-topは10px→3pxに詰め、前項のtop位置調整と合わせて3行の下端を
     男性スタッフの目の開始位置より上に収める。
     【2026-09-28追記・「引き」是正に伴う再圧縮】上記`.hero-headline-block{top}`と
     同じ理由でさらに3px→0pxへ詰めた。フォントサイズ・line-height(1.6)は
     変更していない(可読性・行間は維持)。 */
  .hero-subcopy {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-trust);
  }

  /* 【2026-09-28追記・`## NG (回数: 10)`是正2(2-補足含む)】NG8/9で追加した
     「4方向1pxの白ハードアウトライン」は、輪郭幅が均一でエッジが直線的な
     シール調の縁取りであり、写真側の柔らかい光(空のグラデーション等)と
     質感が衝突し「浮いて見える」原因になっていた(社長指摘)。加えて
     `.accent`だけこの縁取りが無くソフトグローのみのため、同じ見出し内で
     処理方式が不統一だった。四方向対称のハードアウトラインは今後不採用とし、
     見出し全スパンを「光源(右上)に整合した非対称のソフトグロー」に統一する。
     写真実見(`hero-woman-warehouse.jpg`)による光源方向・色温度分析:
     太陽光は右上から(女性の右頬側が最も明るい・右上の金属梁が白飛び)、
     左上(見出しの配置先)は寒色の空、右側の倉庫内部は暖色。文字色
     (ネイビー/オレンジ)自体は変更せず、グローの方向・色味のみで写真に
     馴染ませる。四方向対称のアウトラインへは戻さないこと(再発防止)。
     2026-09-28再構成: __particle/__commaの廃止に伴いセレクタリストを
     `.hero-heading, .hero-heading .accent, .hero-heading__sub`の3つに
     簡略化(数値は無変更)。
     2026-09-28追記(CEO/PM検証によるバグ修正): `.hero-subcopy`もこの
     セレクタリストに合流。従来は独自の弱いtext-shadowを持っていたが、
     写真の上で読みにくいとの指摘を受け見出しと同じ強さのグローに統一した。 */
  .hero-heading,
  .hero-heading .accent,
  .hero-heading__sub,
  .hero-subcopy {
    text-shadow:
      -2px 4px 6px rgba(15, 26, 48, 0.22),
      1px -1px 10px rgba(255, 247, 230, 0.45),
      0 0 16px rgba(214, 234, 248, 0.75),
      0 0 30px rgba(255, 255, 255, 0.45);
  }

  /* ===== 2026-09-29 社長確定: SPヒーロー見出しを手書き筆文字画像に(提案モック
     _proposal/hero-sp-proposal.html?v=b&s=1.70&l=1 を本体化)。PC(769px以上)は
     従来のYuji Syukuテキスト見出しのまま。SPではテキスト側spanを非表示にし、
     画像のalt(=見出し文言)を見出しの正とする。 ===== */
  .hero-heading { transform: none; line-height: 0; font-size: 0; text-shadow: none;
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 16px rgba(240,248,255,.75)); }
  .hero-heading-text { display: none; }
  .hero-heading-img { display: block; width: 77vw; max-width: 100%; height: auto; margin-left: -3px; }
  .hero-heading + .hero-subcopy { margin-top: -2px; }
  .hero-subcopy {
    color: #12295c; font-weight: 700;
    text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.9), 0 0 22px rgba(240,248,255,.85);
  }
  /* 白いもや(写真上部が白へ抜ける空気感)+共通粒子 */
  .hero-haze {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse 95% 46% at 28% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 38%, rgba(240,247,255,.32) 68%, rgba(255,255,255,0) 100%),
      linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%);
  }
  .hero-grain {
    display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .55; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* 信頼バッジ: 2026-09-28微修正4によりSPでは非表示(削除ではない、
     将来別要素へ置き換え予定・内容未定)。 */
  .hero-trust-band {
    display: none;
  }

  .trust-badge {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    text-align: center;
    border-radius: 14px;
  }

  .trust-badge-text {
    align-items: center;
  }

  .trust-badge-text strong {
    font-size: 11px;
    line-height: 1.3;
  }

  /* 社長モックアップのSPアイコン行は短いラベル1行のみ(小さい補足文は無い)。
     補足はPCの表示に留め、SPは簡潔にする。 */
  .trust-badge-text small {
    display: none;
  }

  .btn-hero-main {
    width: 100%;
    margin: 14px 0 0;
    padding: 16px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* 【2026-09-27三度目の改訂】信頼バッジ行と重ならないよう、負のマージンでの
     オーバーラップをやめ、通常の余白に変更した(社長実機で重なりが発覚)。 */
  /* 【2026-09-30 LUNA仕様11-3-3】信頼バッジ行はSPで非表示になったため、-10pxの食い込みを復活
     (許容-8〜-12px。検証項目1で12px未満なら margin-top:16px にフォールバック)。 */
  .diagnosis-teaser-wrap {
    margin-top: -10px;
    padding: 0 16px;
  }

  .diagnosis-teaser {
    padding: 20px 18px;
    row-gap: 14px;
  }

  /* SPヘッダー: 「アイコン44|見出し」の下にリードを全幅 */
  .diagnosis-teaser-head {
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    row-gap: 10px;
  }

  .diagnosis-teaser-head .icon-circle { width: 44px; height: 44px; grid-row: 1; }
  .diagnosis-teaser-head .icon-circle svg { width: 22px; height: 22px; }

  .diagnosis-teaser-title {
    grid-row: 1;
    align-self: center;
    font-size: 18px;
    line-height: 1.3;
  }

  .diagnosis-teaser-lead {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 13px;
    line-height: 1.7;
  }

  .quick-tag-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .quick-tag {
    justify-content: center;
    padding: 10px 8px;
    font-size: 12.5px;
  }

  .diagnosis-teaser-cta { max-width: none; }
  .diagnosis-teaser .btn-large { padding: 16px 20px; }
  .diagnosis-teaser-note { display: none; }

  .section {
    padding: 52px 20px;
  }

  .section-deco {
    font-size: clamp(70px, 26vw, 140px);
  }

  .reasons { margin: 0 16px; padding: 52px 20px; }

  .reason-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 【2026-09-27 全面再設計】選ばれる理由(4ブロック)はモバイルで2列×2段にする */
  .reason-grid--icon {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .reason-card--icon {
    padding: 20px 16px;
  }

  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .btn-tel-hero {
    width: 100%;
  }

  /* 2026-09-30 ヒーローCTAペア SP(社長決定: 書類アイコン付き案+明るい橙)。LUNA微修正版(詰まり解消)。 */
  .hero-content .btn-hero-main { display: none; }
  .cta-pair { display: flex; gap: 8px; width: 100%; margin: 14px 0 0; }
  .cta-main, .cta-sub2 {
    box-sizing: border-box; min-height: 56px; border-radius: 999px; text-decoration: none;
    display: flex; align-items: center; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .cta-main {
    flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: 4px; padding: 0 8px 0 12px;
    background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%); color: #fff;
    text-shadow: 0 1px 1px rgba(150,45,0,.35);
    box-shadow: 0 6px 14px rgba(27,42,74,.28);
  }
  .cta-main__txt { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .cta-main__txt small { font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: .04em; }
  .cta-main__txt strong { font-size: clamp(13.5px, 3.75vw, 16px); font-weight: 900; line-height: 1.1; letter-spacing: 0; }
  .cta-main__doc { flex: 0 0 auto; width: 16px; height: 16px; margin-right: 3px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cta-chev { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .cta-sub2 {
    flex: 1 1 auto; min-width: 0; justify-content: center; gap: 5px; padding: 0 8px 0 10px;
    background: #fff; color: #163F86; border: 2px solid #2A5FB8;
    font-size: clamp(13.5px, 3.6vw, 16px); font-weight: 900; letter-spacing: 0; box-shadow: 0 6px 14px rgba(27,42,74,.18);
  }
  .cta-sub2 span { flex: 1 1 auto; text-align: center; }
  .cta-sub2 .cta-search { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: #2A5FB8; stroke-width: 2.4; stroke-linecap: round; }
  .cta-sub2 .cta-chev { color: #2A5FB8; width: 11px; height: 11px; }
  /* 幅に余裕がある428px級は装飾を元のサイズへ戻す(375/390pxのみ詰めた値を使う) */
  @media (min-width: 410px) {
    .cta-main { padding: 0 10px 0 14px; }
    .cta-main__doc { width: 18px; height: 18px; margin-right: 4px; }
    .cta-chev { width: 14px; height: 14px; }
    .cta-sub2 { padding: 0 10px 0 12px; }
    .cta-sub2 .cta-search { width: 18px; height: 18px; }
    .cta-sub2 .cta-chev { width: 12px; height: 12px; }
  }

  /* 【2026-09-30 社長指示・デザインコンセプト.md 12章】SPのみ、ヒーロー内CTAペアを診断カード下部へ移す(二重表示の解消)。
     ヒーロー側は.cta-pairをdisplay:noneにするだけ(PCが同じ要素を使うためマークアップは残す)。写真・min-height・見出し・サブコピーは不変。 */
  .hero .cta-pair { display: none; }

  .diagnosis-teaser-wrap { margin-top: -28px; }
  .diagnosis-teaser { padding-bottom: 22px; }
  .diagnosis-teaser-cta { display: none; }

  .teaser-cta-pair { display: flex; flex-direction: column; gap: 10px; }
  .teaser-cta-pair .cta-main { min-height: 60px; padding: 0 14px 0 16px; }
  .teaser-cta-pair .cta-sub2 { min-height: 54px; padding: 0 14px 0 16px; }
  .teaser-cta-pair .cta-main__doc { width: 20px; height: 20px; margin-right: 6px; }
  .teaser-cta-pair .cta-main__txt small { font-size: 12px; }
  .teaser-cta-pair .cta-main__txt strong { font-size: 17px; }
  .teaser-cta-pair .cta-chev { width: 14px; height: 14px; }
  .teaser-cta-pair .cta-sub2 { font-size: 16px; }
  .teaser-cta-pair .cta-sub2 .cta-search { width: 18px; height: 18px; }
  .teaser-cta-pair .cta-sub2 .cta-chev { width: 12px; height: 12px; }
}

/* 2026-09-30 ヒーローCTAペア PC(769px以上)。LUNA案。SPの@media(max-width:768px)とは範囲が重ならない。 */
@media (min-width: 769px) {
  .hero-content .btn-hero-main { display: none; }
  .cta-pair { display: flex; align-items: stretch; gap: 14px; margin: 2px 0 0; }
  .cta-main, .cta-sub2 {
    box-sizing: border-box; min-height: 62px; border-radius: 999px; text-decoration: none;
    display: flex; align-items: center; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
  }
  .cta-main {
    gap: 14px; padding: 0 22px 0 24px;
    background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%); color: #fff;
    text-shadow: 0 1px 1px rgba(150,45,0,.35);
    box-shadow: 0 6px 14px rgba(27,42,74,.28);
  }
  .cta-main__doc { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cta-main__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
  .cta-main__txt small { font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .06em; }
  .cta-main__txt strong { font-size: clamp(18px, 1.4vw, 20px); font-weight: 900; line-height: 1.1; letter-spacing: .01em; }
  .cta-chev { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .cta-main .cta-chev { margin-left: 6px; }
  .cta-sub2 {
    gap: 10px; padding: 0 22px 0 24px;
    background: #fff; color: #163F86; border: 2px solid #2A5FB8;
    font-size: clamp(17px, 1.35vw, 19px); font-weight: 900; letter-spacing: .02em; box-shadow: 0 6px 14px rgba(27,42,74,.18);
  }
  .cta-sub2 .cta-search { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: #2A5FB8; stroke-width: 2.4; stroke-linecap: round; }
  .cta-sub2 .cta-chev { color: #2A5FB8; width: 14px; height: 14px; margin-left: 4px; }
  .cta-main:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 20px rgba(27,42,74,.3); }
  .cta-sub2:hover { transform: translateY(-2px); background: #F2F7FF; box-shadow: 0 10px 20px rgba(27,42,74,.22); }
  .cta-main:focus-visible, .cta-sub2:focus-visible { outline: 3px solid #163F86; outline-offset: 3px; }
}
/* 769〜1100px(1024px級): 写真の男性スタッフが左に寄ってくるため、ボタンを一回り小さくして顔に掛からないようにする(1024pxで右端537→約505px、顔の左端は約525px) */
@media (min-width: 769px) and (max-width: 1100px) {
  .cta-pair { gap: 10px; }
  .cta-main, .cta-sub2 { min-height: 58px; }
  .cta-main { gap: 12px; padding: 0 18px 0 20px; }
  .cta-main__doc { width: 24px; height: 24px; }
  .cta-main__txt small { font-size: 12.5px; }
  .cta-main__txt strong { font-size: 17px; }
  .cta-main .cta-chev { margin-left: 4px; width: 15px; height: 15px; }
  .cta-sub2 { gap: 8px; padding: 0 18px 0 20px; font-size: 16px; }
  .cta-sub2 .cta-search { width: 20px; height: 20px; }
  .cta-sub2 .cta-chev { width: 13px; height: 13px; margin-left: 2px; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .cta-main, .cta-sub2 { transition: none; }
  .cta-main:hover, .cta-sub2:hover { transform: none; }
}

/* PCヒーロー(769px以上)をSPヒーローと同じデザインにそろえる提案CSS v1
   2026-09-30 designer(LUNA)。本番 index.html / css/style.css は無編集。
   マークアップ変更なし(本番HTMLに、手書き見出し画像・.hero-haze・.hero-grain・サブコピーが既に入っている)。
   本番へ貼るときは style.css の末尾(既存PC用@media群の後)にこのファイルの中身をそのまま追加する。 */

@media (min-width: 769px) {
  /* SPと同じく英字キャッチ・信頼バッジは非表示(削除ではなくdisplay:none。マークアップは残す) */
  .hero-eyebrow-en { display: none; }
  .hero-trust-band { display: none; }

  /* 縦の並び: 見出し画像 → サブコピー → CTAペア */
  .hero-content { gap: 24px; }
  .hero-headline-block { display: block; }

  /* 見出し: 手書き筆文字画像(alt=見出し文言)。テキスト側spanは非表示。SPと同じ白ハロー3段(サイズに合わせ約1.4倍) */
  .hero-heading {
    font-size: 0; line-height: 0; margin: 0; text-shadow: none;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.85)) drop-shadow(0 0 22px rgba(240,248,255,.75));
  }
  .hero-heading-text { display: none; }
  .hero-heading-img {
    display: block; width: clamp(390px, 35vw, 520px); max-width: 100%; height: auto; margin-left: -6px;
  }

  /* サブコピー: SPと同じ 紺#12295c・太字・白グロー4段。改行は「、」の後の1回のみ(SPの3行→PCは2行) */
  .hero-subcopy {
    display: block; margin: 0;
    font-family: var(--font-body); font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; line-height: 1.7;
    color: #12295c;
    text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 8px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.9), 0 0 28px rgba(240,248,255,.85);
  }
  .hero-subcopy br:nth-of-type(2) { display: none; }

  /* 白いもや: 見出し・サブコピーの背後(写真の左の空)に置く。男性スタッフの顔(横約50%〜)までは白く飛ばさない */
  .hero-haze {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse 36% 62% at 17% 44%, rgba(255,255,255,.80) 0%, rgba(255,255,255,.58) 38%, rgba(240,247,255,.26) 68%, rgba(255,255,255,0) 100%),
      linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 38%);
  }

  /* ===== v2(2026-09-30 社長追加指示): PCはヒーロー直下に診断カードがあるため、診断ボタンは置かず「お仕事を探す」1ボタンだけにする。
     .cta-pair のマークアップは無変更。PCでは .cta-main(診断)を隠し、.cta-sub2 を橙の主ボタンにする。SP(768px以下)は無変更で2ボタンのまま。 ===== */
  .cta-main { display: none; }
  .cta-sub2 {
    padding: 0 30px; gap: 12px; border: 0;
    background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%); color: #fff;
    text-shadow: 0 1px 1px rgba(150,45,0,.35);
    box-shadow: 0 6px 14px rgba(27,42,74,.28);
    font-size: clamp(19px, 1.5vw, 21px); letter-spacing: .03em;
  }
  .cta-sub2 .cta-search { stroke: #fff; width: 24px; height: 24px; }
  .cta-sub2 .cta-chev { color: #fff; width: 16px; height: 16px; margin-left: 8px; }
  .cta-sub2:hover { background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%); filter: brightness(1.05); box-shadow: 0 10px 20px rgba(27,42,74,.3); }

  /* 共通粒子(SPと同一) */
  .hero-grain {
    display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .55; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
}
/* 769〜1100px: 既存の一回り小さい階層(高さ58px)に合わせる */
@media (min-width: 769px) and (max-width: 1100px) {
  .cta-sub2 { padding: 0 26px; gap: 10px; font-size: 18px; }
  .cta-sub2 .cta-search { width: 22px; height: 22px; }
  .cta-sub2 .cta-chev { width: 15px; height: 15px; margin-left: 6px; }
}

/* =========================================================================
   求人紹介セクション(#job-list) 2026-09-30 デザインコンセプト.md 13章(13-2/13-9/13-10)
   - 灰色の帯.job-bandが診断カード(.diagnosis-teaser-wrap、無変更)を包む。帯の上端=ヒーロー下端(13-9 採用案B)。
   - 新規の色・影・角丸・フォントサイズは追加していない(既存トークンの再利用)。
   - 承認済み完成イメージ(jenis-jobs-mock-*.png)との照合で、仕様の表と食い違った点は本ブロック内のコメントに理由を書いた。
   - データは js/jobs-data.js の JENIS_JOBS、描画は js/jobs-render.js。
   ========================================================================= */

/* 帯: flow-root必須(診断カードのmargin-top:-64px/-28pxが帯を突き抜けて帯ごと上へずれるのを防ぐ)。
   上余白0(カードがヒーローに重なる位置を保つ)。左右のpaddingは付けない: 診断カード側(.diagnosis-teaser-wrap)が
   既に自前のpaddingを持つため、帯に足すとカード幅が変わりヒーロー確定仕様を壊す(仕様表の`padding:0 24px 64px`からの意図的な差)。
   代わりに.job-innerの幅で左右余白を取る。 */
.job-band {
  display: flow-root;
  background: var(--color-surface-soft);
  padding: 0 0 64px;
}

.job-inner {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding-top: 56px;
}

.job-list { scroll-margin-top: 48px; }

.job-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--color-trust);
}

.job-slash { width: 14px; height: 20px; flex: 0 0 auto; fill: none; stroke: #E5561A; stroke-width: 2.4; stroke-linecap: round; }

.job-list .section-title { margin: 6px 0 0; line-height: 1.5; }

.job-lead {
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-top: 8px;
}

.job-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0; /* 下余白(28px)は注記でなくグリッド側が持つ(下の.job-grid)。注記が無くても余白が消えないように分離(NG15-1) */
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.job-note__icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--color-accent-secondary); stroke-width: 1.6; stroke-linecap: round; }

/* ---- グリッド: 1020px以上=3列。769〜1019px=1列(最大幅560px中央、カード幅が219〜303pxで窮屈になるため3列にしない)。SPは1列 ---- */
.job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* リード〜グリッド間の余白はグリッドが持つ(NG15-1)。
     注記あり(isSample:true / legalNote有): 注記の直後に28px(従来と同一: 10+注記高+28 = PC 56.4px / SP 74.8px)。
     注記なし(isSample:false かつ legalNote空): 従来のisSample:true時と同じ距離(PC 56.4px)を固定で確保する。 */
  margin-top: 56.4px;
}
.job-note + .job-grid { margin-top: 28px; }

/* ---- カード ---- */
.job-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(27, 42, 74, 0.08); /* .reason-cardと同値 */
}

.job-photo { position: relative; aspect-ratio: 2.8 / 1; overflow: hidden; background: var(--color-surface-soft); }
.job-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.job-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}
.job-badge__icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.job-badge--blue { background: #2E63B0; }
.job-badge--orange { background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%); }
.job-badge--navy { background: var(--color-trust); }

.job-sample {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-trust);
  font-size: 10px;
  line-height: 1.6;
}

.job-body { display: flex; flex-direction: column; flex: 1; padding: 14px 18px 18px; }

.job-head { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
.job-icon { width: 44px; height: 44px; }
.job-icon__svg { width: 44px; height: 44px; }
.job-head h3 { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--color-trust); }
.job-head p { font-size: 12.5px; line-height: 1.5; color: var(--color-text-soft); margin-top: 2px; }

/* スペック行。承認済みイメージでは行の罫線が無い(仕様表のborderは採用せず、イメージを優先)。 */
.job-spec { margin: 12px 0 0; }
.job-row { display: grid; grid-template-columns: 70px 1fr; column-gap: 16px; align-items: center; min-height: 31px; padding: 2px 0; margin: 0; }
.job-row dt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--color-trust); }
.job-row__icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--color-accent-secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.job-row dd { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--color-trust); }
.job-row s { text-decoration: none; margin-right: 4px; font-size: 10px; color: var(--color-text-soft); }
.job-row b { font-size: 20px; font-weight: 900; color: #E5561A; }
.job-row u { text-decoration: none; font-size: 12.5px; font-weight: 700; color: #E5561A; }
.job-row em { font-style: normal; font-weight: 700; margin: 0 2px; color: #E5561A; }
.job-area { font-size: 14.5px; font-weight: 800; color: var(--color-trust); }
.job-area small { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--color-text-soft); }

.job-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 14px; }
.job-tags li { padding: 3px 12px; border-radius: 999px; background: var(--color-accent-secondary-soft); color: var(--color-trust); font-size: 12px; font-weight: 700; line-height: 1.5; }

.job-cta {
  position: relative;
  margin-top: auto; /* カード下端をそろえる */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, #F3731F 0%, #F06A1E 30%, #E5561A 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(150, 45, 0, 0.35);
  box-shadow: 0 6px 14px rgba(27, 42, 74, 0.28);
  transition: transform 0.15s ease;
}
.job-cta:hover { transform: translateY(-2px); }
.job-cta:focus-visible { outline: 3px solid #163F86; outline-offset: 3px; }
.job-cta__chev { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 769〜1019px: 1列・最大幅560px中央。(<=768のSPも幅が560を超える場合は同じ上限を掛ける=仕様表からの小さな追加。
        561〜768pxでカードが横に間延びしないように) ---- */
@media (max-width: 1019px) {
  .job-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* 769〜849pxはヘッダーのナビが折り返して高さが105〜130pxになる(既存の挙動、ヘッダーは対象外)。
   そのままだと#job-listへ飛んだ時に見出しがヘッダーに隠れるため、この幅だけ着地位置を下げる。 */
@media (min-width: 769px) and (max-width: 849px) {
  .job-list { scroll-margin-top: 88px; }
}

/* 位置ドットは>=732pxでは出さない(<=731pxのカルーセルの@media内で表示に切り替える。13-11-5)。
   ドットの部品(.job-dot等)は入れ物が非表示の間は見えないので、幅に関係なくここに置く。
   「幅広い年代」セクション(.job-dots--always)も同じ部品を全幅で使う(2026-09-30)。 */
.job-dots { display: none; }
.job-dot {
  width: 26px; height: 26px; padding: 0; border: 0; margin: 0;
  display: grid; place-items: center;
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.job-dot::before {
  content: "";
  width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--color-accent-secondary);
  background: transparent;
}
.job-dot[aria-current="true"]::before { background: #E5561A; border-color: #E5561A; }
.job-dot:focus-visible { outline: 3px solid #163F86; outline-offset: -3px; border-radius: 50%; }
.job-dots__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.job-dots--always:not([hidden]) { display: flex; justify-content: center; position: relative; }

/* ---- SP(<=768px): 横スワイプのカルーセル(gap14)、バッジ右上、写真2.7:1 ---- */
@media (max-width: 768px) {
  .job-band { padding-bottom: 48px; }
  .job-inner { width: calc(100% - 32px); padding-top: 40px; }
  .job-list { scroll-margin-top: 56px; }
  .job-eyebrow { font-size: 14px; }
  .job-list .section-title { font-size: 22px; }
  .job-lead { font-size: 13.5px; }
  .job-grid { gap: 18px; margin-top: 74.8px; } /* 注記なし時のSP距離(注記2行ぶん。注記ありは.job-note + .job-gridの28px)。732〜768pxはこのまま1列560px中央 */
  .job-photo { aspect-ratio: 2.7 / 1; }
  .job-badge { left: auto; right: 10px; }
  .job-row b { font-size: 19px; }
}

/* ---- 横スワイプのカルーセル(デザインコンセプト.md 13-11、2026-09-30)。<=731pxだけ。
        境界が731pxなのは、カードが340pxで頭打ちになる幅では2枚目のスナップ位置(346px)がスクロール上限-2px以上になり、
        ドットが「2件目」を「3件目」と判定して「2件目へ」が効かなくなるため(実測: 732px以上で発生、731px以下は正常)。
        732〜768pxは既存の1列560px中央(769〜1019pxと同じ表示)のまま。
        >=732pxの1列・>=1020pxの3列には一切影響しない。標準のスクロールスナップのみ、ライブラリ・自動送りなし。
        JSが動かなくても横スクロール・スナップはこのCSSだけで成立する(ドットだけ出ない)。
        JSの境界(jobs-carousel.jsのmatchMedia)と必ず同じ値にすること。 ---- */
@media (max-width: 731px) {
  .job-grid {
    display: flex;
    align-items: stretch;             /* 3枚の高さを最も高いものに揃える(CTAはmargin-top:autoで下に固定) */
    gap: 14px;
    max-width: none;                  /* 1019px以下の560px上限を解除 */
    margin-left: -16px;               /* フルブリード: .job-inner(画面幅-32px)の左右16pxを打ち消し、画面端まで見せる */
    margin-right: -16px;
    margin-bottom: -14px;             /* 下パディング28pxのうち14pxを打ち消し、カード〜ドットの見た目の間隔を14pxに詰める */
    padding: 8px 16px 28px;           /* 上8px/下28px=カードの影が切れないための余白。左右16pxは1枚目を帯の左端に揃える */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;      /* 2枚目以降のスナップ位置。前のカードが約9px見える(16pxだと2pxの「欠け」に見える) */
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;   /* 端で親ページが戻る動きを防ぐ */
    -webkit-overflow-scrolling: touch;
  }
  .job-grid::-webkit-scrollbar { display: none; }
  .job-grid:focus-visible { outline: 3px solid #163F86; outline-offset: -3px; }
  .job-card {
    flex: 0 0 min(calc(100% - 44px), 340px);  /* 100%=画面幅-32px。44px引く=次のカードを見せる固定量。340pxで頭打ち */
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;         /* 1回のスワイプで2枚飛ばさない */
  }
  /* 入場演出(.reveal、IntersectionObserver threshold 0.2)は横に隠れたカード・端に見えるカードを拾えず、
     次のカードが透明のままになるためカルーセルでは外す(カードの見た目自体は変えない) */
  .job-grid .job-card.reveal { opacity: 1; transform: none; transition: none; }

  /* 位置ドット(JSが件数から生成。jobs-carousel.js)。現在=橙の塗り、他=青の輪郭。直径9px・押せる領域26px */
  .job-dots { display: flex; justify-content: center; position: relative; }
  .job-dots[hidden] { display: none; }
}

@media (max-width: 731px) and (prefers-reduced-motion: reduce) {
  .job-grid { scroll-behavior: auto; }
}

/* =========================================================================
   「幅広い年代のスタッフが活躍中!」セクション(#age-list) 2026-09-30 社長承認済みR3画像
   - 求人紹介(.job-band、灰色の帯)の外に置く白背景の独立セクション。順序を入れ替えるときは<section class="age-band">ごと動かす。
   - 新規の色・影・角丸は追加していない(既存トークン+求人カード/仮写真で既に使っている#8DB8E4)。
   - カードは求人カード(.job-card 以下)をそのまま使い、年代ピル(.job-age)と声の吹き出し(.job-voice)だけを足した。
   - データは js/ages-data.js の JENIS_AGES、描画は js/ages-render.js、横スワイプ/矢印/ドットは js/jobs-carousel.js(求人と共有)。
   - 1画面のカード数は --pv(1=SP <=731px / 2=732〜1019px / 3=1020px以上)。JS(ページ数の計算)もこの値を読む。
   ========================================================================= */
.age-band { background: var(--color-base); scroll-margin-top: 48px; }
.age-inner {
  --age-gutter: 24px;               /* 横スワイプ枠の左右余白(カードの影が切れないための余白)。.age-innerの左右余白と同じ値 */
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 64px;
}

/* ---- 見出し部 ---- */
.age-kicker { justify-content: flex-start; }
.age-title { margin: 6px 0 0; font-size: 22px; font-weight: 800; line-height: 1.5; color: var(--color-trust); }
.age-lead { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--color-text); }

/* ---- 年代構成ドーナツ(SVG+HTMLラベル。外部チャートライブラリなし) ---- */
.age-chartcol { display: flex; flex-direction: column; align-items: center; margin-top: 3px; }
.age-chart {
  --box: 300px;
  --ro: 84.5px;                     /* 見える環の外半径(SVG 300単位のうち) */
  --gap: 12px;                      /* 環とラベルの間 */
  --lr: calc(var(--ro) + var(--gap));
  position: relative;
  width: var(--box);
  height: var(--box);
  margin: 0 auto -25px;             /* 箱の下端は空きが大きいので、注記を詰めて置く */
}
.age-chart--low { margin-bottom: -2px; }   /* 真下にラベルが来る割合のとき(JSが付ける)。下の注記に重ならないよう間隔を広げる */
.age-chart__svg { display: block; width: 100%; height: 100%; }
.age-seg { stroke: #fff; stroke-width: 3; stroke-linejoin: miter; }
.age-seg--dark { fill: var(--color-accent-secondary); }
.age-seg--light { fill: #8DB8E4; }
.age-chart__center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; white-space: nowrap; line-height: 1.4;
}
.age-chart__top { font-size: 11px; font-weight: 700; color: var(--color-text-soft); }
.age-chart__main { font-size: 19px; font-weight: 800; color: var(--color-trust); }
.age-chart__kari { margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--color-text-soft); }
/* ラベル: 環の外側、区分の中央の向き(--ux,--uy=単位ベクトル)へ置く。自分の大きさの半分ぶん外へずらすので、どの向きでも環に重ならない */
.age-lbl {
  position: absolute;
  left: calc(50% + var(--ux) * var(--lr));
  top: calc(50% + var(--uy) * var(--lr));
  transform: translate(calc(-50% + var(--ux) * 50%), calc(-50% + var(--uy) * 50%));
  display: flex; flex-direction: column; align-items: center;
  text-align: center; white-space: nowrap; line-height: 1.2;
}
.age-lbl__age { font-size: 12px; font-weight: 700; color: var(--color-text-soft); }
.age-lbl__pct { font-size: 22px; font-weight: 800; color: var(--color-trust); }
.age-lbl__pct small { font-size: 13px; font-weight: 800; }

/* ドーナツの下: 統計の1行と出典(実データ化 2026-10-01) */
.age-stats { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--color-text); }
.age-stats b { font-size: 15px; font-weight: 800; color: var(--color-trust); }
.age-stats__sep { margin: 0 4px; color: var(--color-text-soft); }
.age-source { margin: 10px 0 0; text-align: center; font-size: 11.5px; line-height: 1.7; color: var(--color-text-soft); text-wrap: balance; }
.age-source__l { display: block; }
.age-source__s { display: inline; }
.age-note__l { display: inline; }
@media (max-width: 768px) { .age-source__s, .age-note__l { display: block; } }
.age-pager + .age-note { justify-content: center; margin-top: 8px; text-align: center; text-wrap: balance; }
.age-note {
  align-self: stretch;
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 6px;
  margin: 0;
  font-size: 11.5px; line-height: 1.6; color: var(--color-text-soft);
}

/* ---- 年代タブ ---- */
.age-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.age-tab {
  flex: 0 0 calc((100% - 24px) / 4);  /* SP: 1行に4個(2行目は中央寄せ) */
  height: 37px; padding: 0; border: 0; border-radius: 999px;
  background: var(--color-accent-secondary-soft); color: var(--color-trust);
  font: inherit; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.age-tab[aria-selected="true"] { background: var(--color-trust); color: #fff; }
.age-tab:focus-visible { outline: 3px solid #163F86; outline-offset: 3px; }

/* ---- カード(横スワイプ枠) ---- */
.age-panel { margin-top: 6px; }
.age-grid {
  --pv: 1;
  display: flex;
  align-items: stretch;              /* 高さをそろえる(CTAはmargin-top:autoで下に固定) */
  gap: 24px;
  margin: 0 calc(-1 * var(--age-gutter)) -14px;
  padding: 8px var(--age-gutter) 28px;  /* 上8px/下28px=カードの影が切れないための余白。下の14pxはmarginで詰める */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--age-gutter);
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.age-grid::-webkit-scrollbar { display: none; }
.age-grid:focus-visible { outline: 3px solid #163F86; outline-offset: -3px; }
.age-grid .job-card {
  flex: 0 0 calc((100% - (var(--pv) - 1) * 24px) / var(--pv));
  min-width: 0;
  scroll-snap-align: start;
}
.age-grid .job-card[hidden] { display: none; }   /* .job-card の display:flex が hidden 属性に勝つのを防ぐ */
/* 絞り込みで枚数が少ないとき: 表示中の先頭/末尾のカードの外側余白をautoにして中央へ(枠より広いときはautoは0になり、通常どおり左から) */
.age-grid .job-card[data-edge~="first"] { margin-left: auto; }
.age-grid .job-card[data-edge~="last"] { margin-right: auto; }
@media (min-width: 732px) {
  .age-grid { --pv: 2; }
  /* 次のページのカード(枠の外)の影が、左右の余白(--age-gutter)の端で切れて薄い縦線に見えるのを防ぐ: 余白の部分だけ横方向にフェードさせる */
  .age-grid {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--age-gutter), #000 calc(100% - var(--age-gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--age-gutter), #000 calc(100% - var(--age-gutter)), transparent 100%);
  }
}
@media (min-width: 1020px) { .age-grid { --pv: 3; } }
@media (prefers-reduced-motion: reduce) { .age-grid { scroll-behavior: auto; } .age-grid .job-cta { transition: none; } .age-grid .job-cta:hover { transform: none; } }

.age-empty { margin: 0; padding: 28px 0 8px; text-align: center; font-size: 13.5px; color: var(--color-text-soft); }

/* 求人カードに足した部品: 見出し行右端の年代ピル・声の吹き出し */
.job-head--age { grid-template-columns: 44px minmax(0, 1fr) auto; }
.job-age {
  align-self: start;
  padding: 4px 12px; border-radius: 999px;
  background: var(--color-trust); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap;
}
.job-voice {
  position: relative;
  margin: 0 0 16px; padding: 11px 14px 11px 38px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-size: 12px; line-height: 1.7; color: var(--color-text);
}
.job-voice::before {
  content: "\201C";
  position: absolute; left: 12px; top: 2px;
  font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--color-accent-secondary);
}
/* 声の吹き出しは、カード間の高さの差(タグ/副題/見出しの折り返し)の余りを箱の中に吸収し、CTAとの間隔を常に16pxに保つ(余りが0の幅では見た目は変わらない)。
   .job-voice は <br> を含むので、flex化しても文字列が分裂しないよう中身を .job-voice__t(block)で包む */
.age-grid .job-voice { flex: 1 0 auto; display: flex; align-items: center; }
.age-grid .job-voice__t { display: block; }

/* ---- 前へ/次へ+ドット(矢印は732px以上のみ。SPはドットだけ) ---- */
.age-pager { display: flex; align-items: center; justify-content: center; gap: 20px; }
.age-pager[hidden] { display: none; }
.age-arrow {
  display: none;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--color-accent-secondary); background: #fff;
  place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.age-arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--color-accent-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.age-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.age-arrow:focus-visible { outline: 3px solid #163F86; outline-offset: 3px; }

/* ---- SP(<=768px) ---- */
@media (max-width: 768px) {
  .age-inner { --age-gutter: 16px; width: calc(100% - 32px); padding: 40px 0 48px; }
  .age-band { scroll-margin-top: 56px; }
  .age-title { font-size: 22px; }   /* 他セクションのSP見出し(求人紹介)と同じ22px */
  .age-lead { margin-top: 17px; font-size: 13.5px; }
  .age-lead__l { display: block; }
}
/* ---- 横スワイプ(<=731px): 求人紹介のカルーセルと同じ寸法(カード幅min(100%-44px,340px)・gap14・次のカードを見せる) ---- */
@media (max-width: 731px) {
  .age-grid { gap: 14px; scroll-padding-inline: 24px; }
  .age-grid .job-card { flex: 0 0 min(calc(100% - 44px), 340px); scroll-snap-stop: always; }
}
/* ---- 375〜389px: 年代ピルと並ぶ見出し(倉庫内ピッキング等)が2行に落ちないよう、カード内見出しだけ17pxに ---- */
@media (min-width: 375px) and (max-width: 389px) {
  .age-grid .job-head--age h3 { font-size: 17px; }
}
/* ---- 732px以上: 矢印を出す ---- */
@media (min-width: 732px) {
  .age-arrow { display: inline-grid; }
  .age-pager { margin-top: 14px; }
}
@media (min-width: 769px) {
  .age-tabs { margin-top: 30px; }
  .age-tab { flex: 0 0 auto; height: 39px; padding: 0 28px; font-size: 14px; }
  .age-panel { margin-top: 29px; }
  .age-lead { max-width: 530px; }
  .age-note { justify-content: center; font-size: 11px; }
}
/* ---- PC(>=1020px): 左に見出し、右にドーナツ ---- */
@media (min-width: 1020px) {
  .age-top { display: grid; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; column-gap: 24px; }
  .age-t { display: block; }
  .age-text { margin-top: 34px; }      /* 左の見出しブロックの中心を、注記を含む右列の中心ではなくドーナツの中心に合わせる */
  .age-title { margin-top: 9px; font-size: 26px; }   /* 他セクションのPC見出し(26px)に統一 */
  .age-chartcol { margin-top: 0; }
  .age-chart { --box: 450px; --ro: 126.7px; --gap: 14px; margin-bottom: -42px; }
  .age-chart--low { margin-bottom: -26px; }
  .age-chart__top { font-size: 12px; }
  .age-chart__main { font-size: 26px; }
  .age-chart__kari { font-size: 11px; }
  .age-lbl { line-height: 1.25; }
  .age-lbl__age { font-size: 13px; }
  .age-lbl__pct { font-size: 26px; }
  .age-lbl__pct small { font-size: 15px; }
}

/* =========================================================================
   「どんな職場か、のぞいてみよう」セクション(#workplace) 2026-09-30 社長承認済みの倉庫アイソメ画像(n-R1)
   - 淡灰(--color-surface-soft)の全幅の帯。順序を入れ替えるときは<section class="diorama-band">ごと動かす。
   - 新規の色・影・角丸は追加していない(既存トークン+#8DB8E4/#2E63B0/#163F86は年代セクション・求人カードで使用済み。パネル背景の半透明は--color-trust-darkのアルファ)。
   - 画像の中身(段ボールの茶など)はCG調の自然色(社長決定)。画面のUI(背景・見出し・凡例・注記・ピン)は既存トークンだけ。**画像の上に文字は載せない**(名前は画像の外の凡例)。
   - 動きは transform / opacity のみ。画面に入っている間だけ再生(.is-live、js/diorama-render.js のIntersectionObserverが付け外し)。prefers-reduced-motion では静止。
   - データ・座標は js/diorama-data.js、描画・動画パネルは js/diorama-render.js。
   ========================================================================= */
.diorama-band { position: relative; overflow: hidden; background: var(--color-surface-soft); scroll-margin-top: 48px; }
.dio-inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 44px;
  text-align: center;
}
/* 見出し(参照画像の再現): 英字ラベル → 斜線ラベル → 大見出し(後半だけ青)。サブテキスト(.dio-lead/.dio-more/.dio-note)は従来のまま */
.dio-title { margin: 6px 0 0; font-size: 38px; font-weight: 900; letter-spacing: -.01em; line-height: 1.25; color: var(--color-trust); }
.dio-title__a, .dio-title__b { display: block; }
.dio-title__b { color: var(--color-accent-secondary); }
/* 見出しの入場アニメーション(テキストのみ・1回だけ)。隠す状態は JS が「アニメを実行する」と決めたとき(.dio-rv-ready)だけに書く。
   素のCSSは全表示のまま=JS無効・reduced-motion・IntersectionObserver非対応・すでに画面内のときは最初から全表示。transform / opacity と青い語1つのclip-pathだけ。will-changeは付けない。 */
.dio-rv-ready .job-eyebrow { opacity: 0; transform: translateY(10px); }
.dio-rv-ready .dio-title__a { opacity: 0; transform: translateY(14px); }
.dio-rv-ready .dio-title__b { display: inline-block; opacity: 0; transform: translateY(8px); clip-path: inset(-.1em 100% -.1em -.05em); }
.dio-rv-in .job-eyebrow { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1); }
.dio-rv-in .dio-title__a { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22, .61, .36, 1) .12s, transform .6s cubic-bezier(.22, .61, .36, 1) .12s; }
.dio-rv-in .dio-title__b { opacity: 1; transform: none; clip-path: inset(-.1em); transition: opacity .7s cubic-bezier(.22, .61, .36, 1) .38s, transform .7s cubic-bezier(.22, .61, .36, 1) .38s, clip-path .7s cubic-bezier(.22, .61, .36, 1) .38s; }
@media (prefers-reduced-motion: reduce) {
  .dio-rv-ready .job-eyebrow, .dio-rv-ready .dio-title__a, .dio-rv-ready .dio-title__b { opacity: 1; transform: none; clip-path: none; transition: none; }
}
.dio-lead { margin: 14px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--color-text); }

/* ---- 画像+ピン+タップ領域(全部が同じ座標系。SPは画像を114%に拡大して左右の余白を詰める=元画像の島の幅は約83%) ---- */
.dio-frame { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 3.4; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent); } /* SPは画像の左右を切り詰めるので、切り口(島の影の続き)を淡灰の背景へ溶かす */
.dio-stage { position: absolute; left: -7%; top: 50%; width: 114%; transform: translateY(-50%); }
.dio-float { position: relative; }
.dio-img { display: block; width: 100%; height: auto; }

/* コードだけの演出3つ(js/diorama-data.js の fx。画像・ピン・領域・縁の光の線は不変。すべて .dio-float の内側、pointer-events:none・aria-hidden。transform/opacity のみ) */
.dio-float { isolation: isolate; }
/* ① ミニチュア風の被写界深度: 静止画の複製を重ね、blur+縦のmaskで上端・下端だけ見せる(中央は鮮明) */
.dio-dof { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; filter: blur(var(--dof-blur, 2px)); -webkit-mask-image: var(--dof-mask); mask-image: var(--dof-mask); }
/* ② 床を横切る弱い光の掃引(床の菱形でクリップした帯。たまに通る=周期の前半だけ動く) */
.dio-sweep { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; opacity: var(--sw-op, .16); mix-blend-mode: screen; }
.dio-sweep__g { opacity: 0; animation: dioSweep var(--sw-p, 14s) linear infinite; }
@keyframes dioSweep {
  0% { opacity: 0; transform: translate(var(--sw-x0), var(--sw-y0)); }
  8% { opacity: 1; }
  42% { opacity: 1; }
  50% { opacity: 0; transform: translate(var(--sw-x1), var(--sw-y1)); }
  100% { opacity: 0; transform: translate(var(--sw-x1), var(--sw-y1)); }
}
/* ③ 島の上空のほこり・光の粒(青みの点がゆっくり右上へ漂う。▶ピンより下の重なり順) */
.dio-dust { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #8DB8E4; box-shadow: 0 0 3px rgba(141, 184, 228, .8); opacity: 0; pointer-events: none; animation: dioDust var(--p) ease-in-out var(--d) infinite; }
@keyframes dioDust {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: var(--o); }
  80% { opacity: var(--o); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
.dio-stage.dio-lite .dio-sweep, .dio-stage.dio-lite .dio-dust { display: none; } /* 重い端末・低速のときは②③を外す(①・縁の光・箱・ピンの脈動は残す) */

/* 島の縁の光の呼吸(画像の縁の光の上に重ねる細い線。不透明度だけ。画像は不変。島の浮き沈み(.dio-float)と同じコンテナの内側) */
.dio-glow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: blur(3px); mix-blend-mode: screen; opacity: .3; animation: dioRim 3.6s ease-in-out infinite; }
.dio-glow path { fill: none; stroke: #8DB8E4; stroke-width: var(--gw-sp, 2.5px); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } /* 太さは画面上のpx(拡縮しない) */
@media (min-width: 769px) { .dio-glow path { stroke-width: var(--gw-pc, 4.5px); } }
@keyframes dioRim { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
/* ▶ピン(人物の頭上。画像の中に文字は無く、▶アイコンと脈動リングだけ) */
.dio-pin {
  --pin: 34px;
  position: absolute; width: var(--pin); height: var(--pin); transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--color-base);
  display: grid; place-items: center; pointer-events: none;
}
.dio-pin::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--color-accent-secondary-soft); }
.dio-pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent-secondary); opacity: 0; animation: dioPulse 1.8s ease-out infinite; }
/* 凡例/領域にフォーカス・ホバーしたとき、対応するピンの外にもう1重の青い輪(既存の青のみ) */
.dio-pin.is-active::before { border-color: var(--color-accent-secondary); }
.dio-pin__tri { width: 56%; height: 56%; fill: var(--color-accent-secondary); }

/* タップ領域(矩形全体が押せる。隣と重なる部分は後ろのコーナー=台車が優先) */
.dio-zone {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dio-zone:hover { background: transparent; } /* 画像の中に四角い枠を出さない(強調はピン・線・カード) */
.dio-zone:focus-visible, .dio-modal__close:focus-visible { outline: 3px solid #163F86; outline-offset: 2px; }

/* ベルトの上を流れる箱(既存の箱の切り出し。位置・向きはdiorama-data.jsのbelt) */
.dio-flow { position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: dioFlow 8s linear infinite; }
.dio-flow--2 { animation-delay: -4s; }
.dio-box { position: absolute; height: auto; transform: translate(-50%, -92%); }

/* ---- ボード(島+カード+線。島の浮き沈みはこのボード全体=カード・線も一緒に動く) ---- */
.dio-board { position: relative; margin: 28px auto 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 4px; row-gap: 14px; animation: dioFloat 6s ease-in-out infinite; }
.dio-board:not(.is-live) { animation-play-state: paused; }
.dio-cards { display: contents; list-style: none; margin: 0; padding: 0; }
.dio-card-li { min-width: 0; }
.dio-card-li[data-row="top"] { grid-row: 1; grid-column: span 3; order: var(--ord); }
.dio-card-li[data-row="bottom"] { grid-row: 3; grid-column: span 2; order: var(--ord); }
.dio-frame { grid-row: 2; grid-column: 1 / -1; }
.dio-card-li[data-row="top"][data-pos="first"] { margin-right: 4px; }
.dio-card-li[data-row="top"][data-pos="last"] { margin-left: 4px; }
.dio-card-li[data-row="bottom"][data-pos="first"] { margin-right: 2px; }
.dio-card-li[data-row="bottom"][data-pos="mid"] { margin-inline: 2px; }
.dio-card-li[data-row="bottom"][data-pos="last"] { margin-left: 2px; }
.dio-card {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 80px; margin: 0; padding: 12px 14px;
  border: 0; border-radius: var(--radius-md); background: var(--color-base); box-shadow: 0 6px 24px rgba(27, 42, 74, .08);
  color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease;
}
.dio-card:hover, .dio-card:focus-visible, .dio-card.is-active { box-shadow: 0 6px 24px rgba(27, 42, 74, .14); }
.dio-card:focus-visible { outline: 3px solid #163F86; outline-offset: 2px; }
.dio-card-li[data-row="bottom"] .dio-card { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 8px; text-align: center; }
.dio-card--accent .dio-card__icon { stroke: #E5561A; } /* 社長の明示指示による例外: ピッキング・梱包のアイコンの線だけ橙(線・点・ピン・文字は青/紺のまま) */
.dio-card__icon { flex: 0 0 auto; width: 28px; height: 28px; fill: none; stroke: var(--color-accent-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dio-card__t b { display: block; font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--color-trust); }
.dio-card__t span { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.55; color: var(--color-text-soft); text-wrap: balance; }
/* カードとピンをつなぐ細い曲線(JSが座標を測って描く。ピンの円の中は隠す) */
.dio-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dio-line { fill: none; stroke: #8DB8E4; stroke-width: 1.25px; stroke-linecap: round; }
.dio-line.is-active { stroke: var(--color-accent-secondary); stroke-width: 1.75px; }
.dio-line__d--card { fill: #8DB8E4; }
.dio-line__d--pin { fill: var(--color-accent-secondary); }
/* 背景の波形(装飾・静止。画像の箱と重ならない位置だけ) */
.dio-waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dio-wave { position: absolute; display: block; }
.dio-wave--a path { fill: rgba(141, 184, 228, .22); }
.dio-wave--b path { fill: rgba(62, 127, 191, .08); }
.dio-wave--a { right: -18%; top: 0; width: 62%; height: 140px; transform: scale(-1, -1); } /* SPは右上(上端・右端が画面外に接する)=上下左右反転 */
.dio-wave--b { left: -20%; bottom: 0; width: 70%; height: 150px; }
.dio-more { margin: 20px 0 0; }
.dio-more__a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 6px;
  font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--color-trust);
  text-decoration: underline; text-decoration-color: var(--color-accent-secondary); text-underline-offset: 3px;
}
.dio-more__arrow { color: var(--color-accent-secondary); text-decoration: none; display: inline-block; }
.dio-more__a:focus-visible { outline: 3px solid #163F86; outline-offset: 2px; border-radius: var(--radius-sm); }
.dio-note { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--color-text-soft); text-wrap: balance; }
.dio-note__l { display: inline; }
@media (max-width: 480px) { .dio-note__l { display: block; } } /* SPは「です。」の後で改行(最終行が1〜2文字だけにならないように) */

/* ---- 動画パネル(<dialog>) ---- */
.dio-modal {
  width: min(calc(100% - 32px), 640px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: auto;
  background: var(--color-base); color: var(--color-text);
}
.dio-modal::backdrop { background: rgba(15, 26, 48, 0.6); } /* --color-trust-dark(#0F1A30)のアルファ */
.dio-modal__in { position: relative; padding: 28px 20px 22px; text-align: left; }
.dio-modal__title { margin: 0; padding-right: 48px; font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--color-trust); }
.dio-modal__desc { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.dio-modal__media { margin-top: 16px; }
.dio-modal__ph {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  text-align: center; border-radius: var(--radius-md); background: var(--color-accent-secondary-soft); border: 1px solid var(--color-line); color: var(--color-trust);
}
.dio-modal__ph b { font-size: 15px; font-weight: 800; }
.dio-modal__ph span:not(.dio-modal__ph-icon) { font-size: 12.5px; line-height: 1.6; color: var(--color-text-soft); }
.dio-modal__ph-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-base); }
.dio-modal__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--color-trust-dark); }
.dio-modal__close {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid var(--color-accent-secondary); border-radius: 50%; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dio-modal__close svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent-secondary); stroke-width: 2; stroke-linecap: round; }
html.dio-open { overflow: hidden; }

/* ---- 動き(transform / opacity のみ)。画面外では止める ---- */
@keyframes dioFloat { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }
@keyframes dioPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes dioFlow {
  0% { opacity: 0; transform: translate(0, 0); }
  6% { opacity: 1; transform: translate(calc(var(--dx) * .06), calc(var(--dy) * .06)); }
  92% { opacity: 1; transform: translate(calc(var(--dx) * .92), calc(var(--dy) * .92)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
.dio-stage:not(.is-live) * { animation-play-state: paused; }
.dio-stage:not(.is-live) .dio-pin::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .dio-board, .dio-pin::after, .dio-glow { animation: none; }
  .dio-glow { opacity: .5; }
  .dio-flow { animation: none; opacity: 1; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)); } /* 静止画=箱がベルト中央に1個 */
  .dio-flow--2 { display: none; }
  .dio-sweep, .dio-dust { display: none; } /* ②③は非表示(①のぼかしは動かないのでそのまま) */
  .dio-zone, .dio-card { transition: none; }
}

/* ---- PC(>=769px) ---- */
@media (min-width: 769px) {
  .dio-inner { padding: 56px 0 56px; }
  .dio-title { font-size: clamp(44px, 4.4vw, 62px); }
  .dio-title__a, .dio-title__b { display: inline-block; } /* 入場アニメ(transform/clip-path)を効かせるため。レイアウトは変えない */
  .dio-title__a { margin-right: -.5em; } /* 「、」の右側の空きを詰める */
  .dio-lead { font-size: 15px; }
  .dio-board { width: min(880px, 100%); margin-top: 32px; }
  .dio-frame { aspect-ratio: auto; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .dio-card__t b { font-size: 16px; }
  .dio-card__t span { font-size: 12px; }
  .dio-card__icon { width: 30px; height: 30px; }
  .dio-stage { position: relative; left: 0; top: 0; width: 100%; transform: none; }
  .dio-pin { --pin: 40px; }
  .dio-pin::before { inset: -10px; }
  .dio-modal__in { padding: 32px 32px 28px; }
  .dio-modal__title { font-size: 22px; }
}

/* ---- 769〜1023px: 画像の外の行レイアウトのまま、波形は出さない(箱の周りに四角い境目が出るため) ---- */
@media (min-width: 769px) and (max-width: 1299px) { .dio-waves { display: none; } }
@media (min-width: 1300px) {
  .dio-wave--a { left: -16%; right: auto; top: auto; bottom: 0; width: 28%; height: 160px; transform: none; }
  .dio-wave--b { right: -16%; left: auto; bottom: 0; top: auto; width: 28%; height: 160px; transform: scaleX(-1); }
  .dio-wave { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%); mask-image: linear-gradient(to bottom, transparent 0, #000 55%); } /* 上端を透明へ溶かす */
  .dio-wave--a path { fill: rgba(141, 184, 228, .14); }
}
/* ---- PC(>=1024px): カードを画像(ステージ)の周りに%で絶対配置 ---- */
@media (min-width: 1024px) {
  .dio-board { display: block; width: min(1000px, 100%); margin-top: 44px; }
  .dio-cards { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .dio-card-li, .dio-card-li[data-row][data-pos] { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; pointer-events: auto; }
  .dio-card, .dio-card-li[data-row="bottom"] .dio-card { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; height: auto; padding: 18px 22px; text-align: left; }
  .dio-card__icon { width: 38px; height: 38px; }
  .dio-card__t b { font-size: 18px; }
  .dio-card__t span { font-size: 13px; }
}

/* ---- 769〜1023px: 行レイアウトのカードは横に伸ばしすぎない(上=最大320px、下=最大240px。行ごとに中央寄せ) ---- */
@media (min-width: 769px) and (max-width: 1023px) {
  .dio-card-li[data-row="top"] .dio-card { max-width: 320px; margin-inline: auto; }
  .dio-card-li[data-row="bottom"] .dio-card { max-width: 240px; margin-inline: auto; }
}

/* ---- ヘッダーが〜959pxでハンバーガーになるため、固定ヘッダーの下に見出しが着地するようscroll-margin-topをSP値にそろえる ---- */
@media (max-width: 959px) {
  .age-band, .job-list, .diorama-band, .reasons { scroll-margin-top: 56px; }
}

/* =========================================================================
   「JENISが選ばれる理由」セクション(#reasons) 2026-10-01 グラフ付き(各理由に数字の裏付けを足した拡張版。designer案)
   - 既存トークンのみ(新色・新しい影・角丸なし)。大きな数字はロゴ色(--color-brand-ink)、バーは--color-accent-secondary、橙は番号(.reason-number)だけ。
   - 数字・バーは入場(.rs-pre → .rs-in)でカウントアップ/左から伸びる。.rs-pre はJSが実行を決めたときだけ付く(素のCSSは最終値の表示)。
   - SP(<=731px)は横スワイプ(年代・求人と同じ共有部品。ドットはjobs-carousel.jsが生成)、732px以上は2×2。データは js/reasons-data.js、描画は js/reasons-render.js。
   ========================================================================= */
@media (min-width: 960px) { .reasons { scroll-margin-top: 48px; } } /* アンカー(#reasons)で、固定ヘッダーの下に斜線ラベルが隠れないように(他節と同じ値。≤959pxは上の56px) */
.reasons .section-title { margin: 6px 0 0; line-height: 1.5; color: var(--color-trust); } /* 見出しは兄弟節(求人・年代)と同じ: 紺・ラベルとの間6px */
.rs-inner { position: relative; z-index: 1; width: min(calc(var(--max-width) - 48px), 100%); /* パネルは全幅−48px、中身は従来のカード幅(1120−48)で中央 */ margin: 0 auto; text-align: center; }
.rs-inner .section-lead { margin-bottom: 0; }
.rs-noscript { list-style: none; margin: 20px 0 0; padding: 0; font-size: 14px; line-height: 1.9; color: var(--color-text); text-align: left; }
.rs-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: left; }
.rs-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--color-base); border-radius: var(--radius-md); box-shadow: 0 6px 24px rgba(27, 42, 74, 0.08); /* .reason-cardと同値 */
  padding: 28px 28px 22px;
}
.rs-head { display: flex; align-items: baseline; gap: 12px; }
.rs-card .reason-number { position: static; width: auto; height: auto; margin: 0; background: none; color: var(--color-accent); font-size: 15px; font-weight: 900; }
.rs-card h3 { margin: 0; padding: 0; font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--color-trust); text-wrap: balance; }
.rs-text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--color-text); text-wrap: balance; }
.rs-chart { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.rs-cap { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--color-text-soft); text-wrap: balance; }
.rs-fig { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 12px; line-height: 1; font-weight: 900; color: var(--color-brand-ink); }
.rs-kari { margin-right: 4px; font-size: 15px; font-weight: 800; color: var(--color-text); }
.rs-num { font-size: 44px; font-variant-numeric: tabular-nums; }
.rs-unit { font-size: 18px; }
.rs-cardnote { margin: auto 0 0; padding-top: 16px; font-size: 11.5px; line-height: 1.6; color: var(--color-text-soft); }
.rs-foot { margin: 24px 0 0; font-size: 12px; line-height: 1.7; color: var(--color-text-soft); text-wrap: balance; }
/* バー(進捗・横棒・2色の帯・線) */
.rs-bar { position: relative; display: block; height: 14px; overflow: hidden; border-radius: 999px; background: var(--color-accent-secondary-soft); }
.rs-bar--s { height: 12px; }
.rs-fill { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--color-accent-secondary); transform-origin: left center; }
.rs-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--color-text-soft); }
.rs-split { display: flex; height: 30px; overflow: hidden; border-radius: var(--radius-sm); }
.rs-seg { flex: 0 0 auto; width: var(--w); height: 100%; border-radius: 0; }
.rs-seg--b { background: #8DB8E4; }
.rs-splitl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--color-trust); }
.rs-rows { display: grid; gap: 8px; }
.rs-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 38px; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 800; color: var(--color-trust); }
.rs-row__v { text-align: right; }
.rs-flow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.rs-line { display: block; height: 2px; border-radius: 2px; background: #8DB8E4; transform-origin: left center; }
.rs-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent-secondary-soft); }
.rs-dot svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs-dot--end { background: var(--color-accent-secondary); }
.rs-dot--end svg { stroke: #fff; }
.rs-flowl { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--color-trust); }
/* 入場: .rs-pre(隠す)→ .rs-in(伸ばす)。帯の2区画は順に、横棒は0.12秒ずつ、線は伸びてから時計の丸が現れる */
.rs-pre:not(.rs-in) .rs-fig { visibility: hidden; } /* 未再生のカード(SPで右に覗くカード等)は、0%が見えないよう数字を隠す(静止状態では最終値が出る) */
.rs-pre .rs-fill, .rs-pre .rs-line { transform: scaleX(0); }
.rs-pre .rs-dot--end { opacity: 0; }
.rs-pre.rs-in .rs-fill, .rs-pre.rs-in .rs-line { transform: scaleX(1); transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.rs-pre.rs-in .rs-seg--b { transition-delay: .5s; }
.rs-pre.rs-in .rs-row .rs-fill { transition-delay: calc(var(--i, 0) * .12s); }
.rs-pre.rs-in .rs-line { transition-duration: .6s; }
.rs-pre.rs-in .rs-dot--end { opacity: 1; transition: opacity .4s ease .6s; }
@media (prefers-reduced-motion: reduce) {
  .rs-pre .rs-fill, .rs-pre .rs-line { transform: none; transition: none; }
  .rs-pre .rs-dot--end { opacity: 1; transition: none; }
}
/* SP(<=731px): 横スワイプ(年代・求人と同じ共有部品)。カード幅=min(100%-44px,340px)で次のカードが覗く */
@media (max-width: 731px) {
  .rs-grid { --pv: 1; display: flex; align-items: stretch; gap: 14px; margin: 28px -20px 0; padding: 8px 20px 28px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .rs-grid::-webkit-scrollbar { display: none; }
  .rs-grid:focus-visible { outline: 3px solid #163F86; outline-offset: -3px; }
  .rs-card { flex: 0 0 min(calc(100% - 44px), 340px); scroll-snap-align: start; scroll-snap-stop: always; padding: 24px 22px 20px; }
  .rs-card h3 { font-size: 16px; }
  .reasons .section-title { font-size: 22px; }
  .rs-text { font-size: 13px; }
  .rs-num { font-size: 40px; }
  .rs-grid + .job-dots { margin-top: -10px; }
}
@media (max-width: 731px) and (prefers-reduced-motion: reduce) { .rs-grid { scroll-behavior: auto; } }

@media (max-width: 768px) { .reasons .section-title { font-size: 22px; } } /* 他節(求人・年代)のSP見出しと同じ22px */

/* 2×2(>=732px)では、同じ行のカードの見出し・短文・グラフ・注記の高さをsubgridでそろえる(短文の行数が違っても区切り線・グラフの高さが行内でそろう)。非対応ブラウザは従来の縦積み */
@media (min-width: 732px) {
  @supports (grid-template-rows: subgrid) {
    .rs-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .rs-head { grid-row: 1; }
    .rs-text { grid-row: 2; }
    .rs-chart { grid-row: 3; }
    .rs-cardnote { grid-row: 4; align-self: end; margin: 0; }
  }
}

/* ---- #jobs(仕事の流れ)を削除した(2026-10-01)ので、淡灰のジオラマ帯の直後に淡灰の「選ばれる理由」パネルが続いて溶けないよう、パネルの上に白い余白を入れる(削除した節の上下paddingと同じ呼吸) ---- */
.reasons { margin-top: 72px; }
@media (max-width: 768px) { .reasons { margin-top: 52px; } }

/* 年代ドーナツの入場(js/ages-render.js。1回だけ)。隠す状態 .age-pre はJSが実行を決めたときだけ付く(素のCSSは完成状態)。外ラベル・「登録スタッフ」はopacityのみ、掃引はSVGマスクのstroke-dashoffset */
.age-pre .age-lbl, .age-pre .age-chart__top { opacity: 0; }
.age-in .age-lbl { opacity: 1; transition: opacity .4s ease var(--d, .3s); }
.age-in .age-chart__top { opacity: 1; transition: opacity .4s ease .25s; }
.age-in .age-sweep-c { animation: ageSweep 1.3s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes ageSweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---- 求人カードの拡張(2026-10-01 実求人化。後方互換: 年代セクションのカードは月収の幅・勤務行なしのまま) ---- */
.job-row--ex, .job-row--hours { align-items: start; }
.job-row--ex dt, .job-row--hours dt { padding-top: 4px; }
.job-ex { display: grid; gap: 2px; }
.job-ex__r { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.3; }
.job-ex__l { font-size: 13px; font-weight: 500; color: var(--color-text-soft); }
.job-ex__v b { font-size: 17px; font-weight: 800; }
.job-row--hours dd { display: grid; gap: 2px; padding-top: 4px; }
.job-hours__t { font-size: 13.5px; font-weight: 800; line-height: 1.4; color: var(--color-trust); }
.job-hours__n { font-size: 12.5px; line-height: 1.5; color: var(--color-text-soft); }
/* 注記が複数行のとき(各行を1文ずつ) */
.job-note__l { display: block; }
.job-note > span:not(.job-note__l) { text-align: left; }
/* 確認用の帯(公開前に review.enabled=false で外す) */
.job-review { display: flex; justify-content: center; margin: 12px 0 0; }
.job-review span { padding: 4px 14px; border-radius: 999px; background: var(--color-accent-secondary-soft); color: var(--color-trust); font-size: 12px; font-weight: 700; line-height: 1.6; text-align: center; text-wrap: balance; }
.job-list .job-head h3, .job-hours__t, .job-hours__n { text-wrap: balance; } /* 実求人の長い職種名・勤務の行が1〜2文字だけ残って折り返さないように(求人一覧だけ。年代カードは不変) */
.job-list .job-head p, .job-list .job-area, .job-note__l { text-wrap: balance; }
.job-list .job-area { display: inline-block; }

/* ---- 求人一覧の全件対応(2026-10-01 版u)。新しい色・影・角丸は作らない(既存トークン内)。年代カード(.age-grid)には影響しない ---- */
.job-tabs { margin-top: 24px; }
.job-tabs .age-tab { flex: 0 0 auto; padding: 0 16px; white-space: nowrap; }
.job-tab__n { margin-left: 2px; font-weight: 700; }
.job-tabs + .job-panel .job-grid { margin-top: 20px; }
.job-card[hidden] { display: none; }
@media (min-width: 732px) { .job-card[data-late] { display: none; } }
@media (max-width: 731px) {
  .job-tabs + .job-panel .job-grid { margin-top: 8px; }
  .job-more { display: none !important; }
}
.job-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.job-more[hidden], .job-more__btn[hidden] { display: none; }
.job-more__btn {
  min-height: 46px; padding: 0 40px; border: 2px solid var(--color-trust); border-radius: 999px;
  background: #fff; color: var(--color-trust); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.job-more__btn:hover { background: var(--color-accent-secondary-soft); }
.job-more__btn:focus-visible { outline: 3px solid #163F86; outline-offset: 3px; }
.job-more__st { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-soft); }
.job-counter { font-size: 13px; font-weight: 800; line-height: 26px; color: var(--color-trust); letter-spacing: .04em; }

/* 条件ラベル(紺枠チップ)・ご注意・掲載元 */
.job-cond { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.job-cond__i { padding: 2px 10px; border: 1.5px solid var(--color-trust); border-radius: 999px; background: #fff; color: var(--color-trust); font-size: 12px; font-weight: 700; line-height: 1.5; }
.job-cond__i--confirm { white-space: nowrap; border-style: dashed; background: var(--color-accent-secondary-soft); }
.job-caution { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--color-text-soft); text-wrap: pretty; }
.job-caution b { margin-right: 6px; font-weight: 800; color: var(--color-trust); }
.job-source { margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: var(--color-text-soft); }
.job-ex__b { flex-basis: 100%; font-size: 11.5px; line-height: 1.4; color: var(--color-text-soft); }
.job-ask { font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--color-trust); }
.job-wage__n { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--color-text-soft); text-wrap: balance; }
.job-hours__p { white-space: nowrap; }
.job-spec .job-row--hours + .job-row--hours { margin-top: 0; }

/* 確認事項(review.enabled のときだけ。公開前に外す) */
.job-confirm { width: min(100%, 760px); margin: 32px auto 0; padding: 12px 16px; border: 1.5px dashed var(--color-accent-secondary); border-radius: 14px; font-size: 12.5px; line-height: 1.6; color: var(--color-trust); background: #fff; }
.job-confirm summary { cursor: pointer; font-weight: 800; }
.job-confirm ul { margin: 8px 0 0; padding-left: 1.2em; }
.job-confirm li ul { margin-top: 2px; color: var(--color-text-soft); }
@media (max-width: 768px) { .job-review span { border-radius: 14px; padding: 8px 14px; } }

.job-ask, .job-ex__l { text-wrap: balance; }
.job-ask { display: block; }
@media (max-width: 768px) { .job-tabs { gap: 6px; } .job-tabs .age-tab { padding: 0 12px; font-size: 12.5px; } }

/* ---- 版v(2026-10-01 デザイナー調整A〜H)。年代カード(.age-grid)には影響しない(求人一覧の部品だけ) ---- */
/* A: 月収例は1例=2行(1行目 ラベル+右寄せの金額 / 2行目 前提)。PC=2例、SP(<=731px)=1例、残りは<details> */
.job-ex { display: grid; gap: 6px; }
.job-ex__i, .job-ex__pc, .job-ex__sp { display: block; }
.job-ex__r { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.job-ex__l { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--color-text-soft); text-wrap: balance; }
.job-ex__v { flex: 0 0 auto; white-space: nowrap; }
.job-ex__v b { font-size: 17px; font-weight: 800; }
.job-ex__b { display: block; flex-basis: auto; margin-top: 1px; font-size: 10.5px; line-height: 1.4; color: var(--color-text-soft); }
.job-exm summary { display: inline-block; cursor: pointer; font-size: 12px; line-height: 1.6; color: #3E7FBF; text-decoration: underline; list-style: none; }
.job-exm summary::-webkit-details-marker { display: none; }
.job-exm summary:focus-visible { outline: 3px solid #163F86; outline-offset: 2px; }
.job-exm[open] summary { margin-bottom: 4px; }
.job-exm > .job-ex__i, .job-exm > .job-ex__sp { margin-top: 6px; }
.job-ex__sp, .job-exm__sp { display: none; }
.job-exm--sp { display: none; }
@media (max-width: 731px) {
  .job-ex__pc, .job-exm__pc { display: none; }
  .job-ex__sp { display: block; }
  .job-exm__sp { display: inline; }
  .job-exm--sp { display: block; }
}
/* B: 勤務の時間は「・」区切りの句単位で1段落 */
.job-hours__p { display: inline-block; white-space: nowrap; }
/* E: cold/lift/night は紺の塗り・白文字・アイコン(橙は使わない) */
.job-cond__i--cold, .job-cond__i--lift, .job-cond__i--night { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 8px; background: var(--color-trust); color: #fff; font-weight: 800; }
.job-cond__icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* F: ご注意 */
.job-caution { padding-left: 10px; border-left: 3px solid #8DB8E4; color: var(--color-text); font-size: 12px; line-height: 1.6; }
.job-caution b { color: var(--color-trust); font-weight: 800; }
/* H: SP上部の注記は1文目だけ常時表示、2〜4文目は<details>(PCは従来どおり) */
.job-note-d { display: none; }
@media (max-width: 768px) {
  .job-note__x { display: none; }
  .job-note-d { display: block; width: fit-content; max-width: 100%; margin: 6px auto 0; }
  .job-note-d summary { cursor: pointer; text-align: center; font-size: 12px; line-height: 1.6; color: #3E7FBF; text-decoration: underline; list-style: none; }
  .job-note-d summary::-webkit-details-marker { display: none; }
  .job-note-d p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--color-text-soft); }
  .job-note + .job-note-d + .job-tabs { margin-top: 16px; }
}
/* C/D: SPのカードを縮める。カルーセルのカードは行の最大高さに伸ばさず、CTAの上の空白を出さない */
@media (max-width: 731px) {
  .job-list .job-body { padding: 16px 16px 14px; }
  .job-list .job-row { min-height: 24px; padding: 0; }
  .job-list .job-spec { margin-top: 8px; }
  .job-list .job-grid { align-items: flex-start; }
  .job-list .job-card .job-cta { margin-top: 0; }
}
.job-ex__b { text-wrap: balance; }
.job-list .job-hours__t { font-size: 13px; letter-spacing: -.01em; }
.job-list .job-ex__r { flex-wrap: wrap; }
.job-list .job-ex__l { flex: 1 1 11em; min-width: 11em; }
.job-list .job-ex__v { margin-left: auto; }

/* =========================================================================
   診断フォーム(dialog.dg、2026-10-01 版w。js/diagnosis-render.js / diagnosis-data.js。デザインコンセプト.md 13-17)
   - PC=中央パネル幅640px(max-height 90vh)、SP(<=731px)=全画面シート。色・影・角丸は既存トークンのみ。橙は結果のLINEボタン1つだけ(既存の.btn-cta)。
   - 動きは opacity/transform のみ。reduced-motion では動きなし。
   ========================================================================= */
html.dg-open { overflow: hidden; scrollbar-gutter: stable; }
.dg {
  width: 640px; max-width: calc(100% - 32px); max-height: 90vh; padding: 0; margin: auto;
  border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--color-text);
  box-shadow: 0 6px 24px rgba(27, 42, 74, 0.08), 0 24px 60px rgba(27, 42, 74, 0.25);
  overflow: auto; overscroll-behavior: contain;
}
.dg::backdrop { background: rgba(27, 42, 74, 0.55); }
.dg[open] { animation: dgIn .2s ease-out; }
@keyframes dgIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.dg__panel { padding: 24px 48px 32px; }
.dg__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; }
.dg__back { justify-self: start; min-height: 44px; padding: 0 10px 0 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 1; color: var(--color-trust); cursor: pointer; }
.dg__count { font-size: 14px; font-weight: 700; color: var(--color-text); text-align: center; min-width: 3em; }
.dg__close { justify-self: end; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.dg__close svg { width: 22px; height: 22px; fill: none; stroke: var(--color-trust); stroke-width: 2; stroke-linecap: round; }
.dg__close:hover { background: var(--color-surface-soft); }
.dg :focus-visible { outline: 2px solid var(--color-trust); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.dg h2:focus { outline: none; }
.dg__seg { display: flex; gap: 6px; height: 8px; margin-top: 8px; }
.dg__seg span { flex: 1; background: var(--color-trust-soft); box-shadow: inset 0 0 0 1px var(--color-line); border-radius: 4px; position: relative; }
.dg__seg span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-trust); opacity: 0; transition: opacity .28s ease; }
.dg__seg span.is-on::after { opacity: 1; }
.dg--result .dg__seg { visibility: hidden; }
.dg__dur { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-text-soft); }
.dg__dur[hidden], .dg__priv[hidden] { display: none; }
.dg__view { margin-top: 18px; }
.dg-in { animation: dgView .28s cubic-bezier(.22, .61, .36, 1); }
@keyframes dgView { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dg__q { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.55; color: var(--color-text); text-wrap: balance; }
.dg__hint { margin: 10px 0 20px; font-size: 14px; line-height: 1.6; color: var(--color-text-soft); }
.dg__opts { display: grid; gap: 12px; }
.dg__opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 16px 18px;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-md); background: #fff; color: var(--color-text);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.55; text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease; -webkit-tap-highlight-color: transparent;
}
.dg__opt:hover { border-color: var(--color-accent-secondary); background: var(--color-surface-soft); }
.dg__mark { flex: 0 0 22px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--color-text-soft); border-radius: 50%; display: grid; place-items: center; background: #fff; }
.dg__mark svg { width: 14px; height: 14px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg__opt[aria-pressed="true"] { background: var(--color-trust); border-color: var(--color-trust); color: #fff; }
.dg__opt[aria-pressed="true"] .dg__mark { border-color: #fff; background: #fff; }
.dg__opt[aria-pressed="true"] .dg__mark svg { stroke: var(--color-trust); }
.dg__priv { word-break: auto-phrase; margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-text-soft); }

/* 結果(designer 仕様 diagnosis-ui-spec.md 2-2〜2-5) */
.dg__kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--color-trust); }
.dg__rt { margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--color-text); text-wrap: balance; }
.dg__rt-pre, .dg__rt-post { display: block; font-size: 15px; font-weight: 700; color: var(--color-text); }
.dg__rt-type { display: block; margin: 2px 0; font-size: 36px; font-weight: 800; line-height: 1.3; color: var(--color-brand-ink); text-wrap: balance; }
.dg__lead { margin: 14px 0 0; font-size: 17px; font-weight: 800; line-height: 1.7; color: var(--color-trust); }
.dg__body { margin: 10px 0 0; font-size: 15px; line-height: 1.85; color: var(--color-text); }
.dg__jobs { margin-top: 24px; }
.dg__jobs-l { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--color-trust); }
.dg__jlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dg__jc { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 8px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; color: inherit; text-decoration: none; }
.dg__jc:hover { border-color: var(--color-accent-secondary); background: var(--color-surface-soft); }
.dg__jc-i { flex: 0 0 72px; height: 48px; border-radius: var(--radius-sm); background-size: cover; background-position: center; background-color: var(--color-surface-soft); }
.dg__jc-b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dg__jc-t { font-size: 14px; font-weight: 800; line-height: 1.4; color: var(--color-trust); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg__jc-m { font-size: 13px; line-height: 1.5; color: var(--color-text-soft); }
.dg__jc-n { font-size: 13px; line-height: 1.5; font-weight: 700; color: var(--color-text); }
.dg__jc-c { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: var(--color-trust); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dg__sub { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--color-accent-secondary); background: var(--color-surface-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.dg__go { margin-top: 24px; display: grid; justify-items: stretch; gap: 10px; }
.dg__go-l { display: none; }
.dg__job, .dg__line { width: 100%; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.dg__go:not(.dg__go--c) .dg__job { min-height: 56px; background: var(--color-trust); color: #fff; border: 2px solid var(--color-trust); }
.dg__go:not(.dg__go--c) .dg__job:hover { background: var(--color-brand-ink); border-color: var(--color-brand-ink); }
.dg__go:not(.dg__go--c) .dg__line, .dg__go:not(.dg__go--c) .dg__line:hover { min-height: 52px; background: #fff; color: var(--color-trust); border: 2px solid var(--color-trust); box-shadow: none; }
.dg__go:not(.dg__go--c) .dg__line:hover { background: var(--color-trust-soft); }
.dg__go--c .dg__line { min-height: 56px; }
.dg__go--c .dg__job { min-height: 52px; background: #fff; color: var(--color-trust); border: 2px solid var(--color-trust); }
.dg__go--c .dg__job:hover { background: var(--color-trust-soft); }
.dg__copyrow { display: grid; justify-items: center; gap: 4px; margin-top: 2px; }
.dg__copy-h { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-soft); text-align: center; }
.dg__copy { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--color-trust); border-radius: 999px; background: #fff; color: var(--color-trust); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dg__copy:hover { background: var(--color-trust-soft); }
.dg__toast { min-height: 20px; font-size: 13px; line-height: 1.5; color: var(--color-trust); opacity: 0; transition: opacity .2s ease; }
.dg__toast.is-on { opacity: 1; }
.dg__tel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; min-height: 44px; margin-top: 4px; padding: 8px 0 0; color: var(--color-trust); font-size: 13px; line-height: 1.5; }
.dg__tel b { font-size: 18px; font-weight: 800; }
.dg__tel:hover b { text-decoration: underline; }
.dg__rnote { margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-text-soft); }
.dg__again { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--color-trust); text-decoration: underline; cursor: pointer; }
.dg--result .dg__view > * { animation: dgView .4s cubic-bezier(.22, .61, .36, 1) both; }
.dg--result .dg__view > :nth-child(2) { animation-delay: .08s; }
.dg--result .dg__view > :nth-child(3), .dg--result .dg__view > :nth-child(4) { animation-delay: .16s; }
.dg--result .dg__view > :nth-child(5) { animation-delay: .24s; }
.dg--result .dg__view > :nth-child(n+6) { animation-delay: .32s; }
.dg__rt-type { animation: dgView .4s cubic-bezier(.22, .61, .36, 1) .08s both; }
.dg__jc { animation: dgView .4s cubic-bezier(.22, .61, .36, 1) calc(.32s + var(--i, 0) * .06s) both; }

@media (max-width: 731px) {
  .dg { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .dg::backdrop { background: none; }
  .dg__panel { padding: 8px 20px 28px; min-height: 100%; }
  .dg__q { font-size: 22px; line-height: 1.5; }
  .dg__rt-type { font-size: 30px; }
  .dg__lead { font-size: 16px; }
  .dg__view { margin-top: 14px; }
  .dg__hint { margin-bottom: 16px; }
  .dg__opt { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dg[open], .dg-in, .dg--result .dg__view > *, .dg__rt-type, .dg__jc { animation: none; }
  .dg__seg span::after, .dg__opt, .dg__toast { transition: none; }
}

/* JS無効時の代替(#diagnosis節): 5問を読み物として一覧(結果は出さない) */
.dg-ns { margin: 24px auto 0; max-width: 640px; padding: 20px 24px; border-radius: var(--radius-md); background: #fff; text-align: left; font-size: 14px; line-height: 1.8; }
.dg-ns__lead { margin: 0 0 10px; font-weight: 700; color: var(--color-trust); }
.dg-ns ol { margin: 0; padding-left: 1.4em; }
.dg-ns li > strong { color: var(--color-text); }
.dg-ns ul { margin: 2px 0 10px; padding-left: 1.2em; color: var(--color-text-soft); }
.dg-ns__tel { margin: 8px 0 0; font-weight: 700; }
.dg-ns__tel a { color: var(--color-trust); text-decoration: underline; }

@media (max-width: 731px) { html.dg-open { scrollbar-gutter: auto; } }
.dg__q, .dg__rt, .dg__rt-type, .dg__lead, .dg__body { word-break: auto-phrase; }

/* ---- 診断フォーム調整(2026-10-02 版x) ---- */
.dg--result .dg__seg { display: none; }
.dg--result .dg__view { margin-top: 2px; }
.dg__bar { position: sticky; top: 0; z-index: 2; background: #fff; }
.dg__priv, .dg__rnote, .dg__hint { text-wrap: balance; word-break: auto-phrase; }
/* #interview・#line: 固定ヘッダーの下に見出しが着地するように(他節と同じ値) */
#interview, #line { scroll-margin-top: 48px; }
@media (max-width: 959px) { #interview, #line { scroll-margin-top: 56px; } }
.dg--result .dg__view { margin-top: 17px; }

/* =========================================================================
   「JENISが選ばれる5つの特徴」(#reasons) 完成版 2026-10-05(designer案S。_proposal/reasons-S-handoff.md)
   - 現行の #reasons 用CSS(上の「JENISが選ばれる理由」節)の上に重ねる上書き。クラスは .rs-* / .rsx-* / .reasons 配下に限定(他節に影響しない)。
   - このセクション限定の色・値は変数 --rs-*(.reasons内)。社長確認済みの既定(青 #2F7BFF / #5B9BFF)。サイト全体のトークンは書き換えない。
   - 幅の切り替え: PC=1280px以上 / 中間=732〜1279px / SP=731px以下。SPの横スワイプは jobs-carousel.js の共有部品。
   - 動き(背景の光・登場・ドットの切替)は prefers-reduced-motion で止まる。
   ========================================================================= */
.reasons { --rs-navy: var(--color-trust); --rs-num: var(--color-brand-ink); --rs-orange: var(--color-accent); --rs-soft: var(--color-text-soft); --rs-dot: #B9C9DD; --rs-rad: 28px;
  --rs-blue: #2F7BFF; --rs-bar-a: #2F7BFF; --rs-bar-b: #5B9BFF; --rs-track: rgba(47,123,255,.16); }
.rs-curve { display: none; }

.reasons { position: relative; overflow: hidden; margin: 0; border-radius: 0; max-width: none; padding: 40px 0 30px;
  background: radial-gradient(ellipse 56% 46% at 2% 40%, rgba(141,184,228,.5), rgba(141,184,228,0) 70%), radial-gradient(ellipse 70% 38% at 60% 108%, rgba(141,184,228,.55), rgba(141,184,228,0) 70%), linear-gradient(180deg, #fff 0%, #E9F2FC 100%); }
.reasons .rs-inner { position: relative; z-index: 3; width: 100%; max-width: none; padding: 0; }
/* ---- 背景: 上部の大きな写真面(ダミー)+光の帯+丸い光 ---- */
.rs-bgph { position: absolute; z-index: 0; right: 0; top: 0; width: 100%; height: 230px; pointer-events: none; opacity: .38;
  -webkit-mask-image: linear-gradient(270deg, #000 15%, transparent 90%); mask-image: linear-gradient(270deg, #000 15%, transparent 90%); }
.rs-bgph div { position: absolute; inset: 0; background-size: cover; background-position: 70% 30%; filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.rs-bl { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(6px); will-change: transform; }
.rs-bl--a { width: 300px; height: 300px; left: -160px; top: -90px; background: rgba(141,184,228,.26); animation: rsFloatA 24s ease-in-out infinite; }
.rs-bl--b { width: 320px; height: 320px; left: -280px; top: 300px; background: rgba(141,184,228,.3); animation: rsFloatB 28s ease-in-out infinite; }
.rs-bl--d { width: 340px; height: 340px; right: -170px; bottom: -190px; background: rgba(229,86,26,.08); animation: rsFloatA 30s ease-in-out infinite reverse; }
@keyframes rsFloatA { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14px,-10px,0) scale(1.05); } }
@keyframes rsFloatB { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12px,9px,0) scale(1.04); } }
.rs-waves { position: absolute; left: -10%; bottom: 60px; width: 120%; height: 200px; z-index: 0; pointer-events: none; animation: rsFlow 30s ease-in-out infinite alternate; }
.rs-waves path { fill: none; stroke: #8DB8E4; stroke-width: 1.6; opacity: .5; }
@keyframes rsFlow { from { transform: translate3d(-1.5%,0,0); } to { transform: translate3d(1.5%,-10px,0); } }
/* ---- 巨大「Why」: 太い斜体の欧文(薄い白青)。人物(写真)の背後 ---- */
.rs-whyb { position: absolute; z-index: 1; margin: 0; left: 36%; top: 12px; font-family: "Montserrat", "Arial Black", sans-serif; font-style: italic; font-weight: 800; font-size: 150px; line-height: 1; letter-spacing: -.02em; color: rgba(255,255,255,.7); text-shadow: 0 0 40px rgba(47,107,232,.25); pointer-events: none; user-select: none; }
/* ---- 見出し部(斜線ラベル・見出し・リード。SPは中央) ---- */
.reasons .job-eyebrow { font-size: 16px; color: var(--rs-navy); }
.reasons .section-title { margin: 12px 0 0; padding: 0 8px; font-size: 34px; font-weight: 900; line-height: 1.16; color: var(--rs-navy); letter-spacing: .005em; }
.reasons .section-title .rs-t-accent { display: inline-block; color: var(--rs-blue); }
.reasons .rs-inner .section-lead { margin: 10px auto 0; font-size: 15px; line-height: 1.6; color: var(--rs-soft); }
.rs-ph { background-size: cover; background-position: center; }
/* ---- カード ---- */
.reasons .rs-grid { margin: 18px 0 0; padding: 70px 34px 30px; gap: 16px; scroll-padding-inline: 34px; }
.reasons .rs-card { flex: 0 0 280px; position: relative; overflow: visible; min-height: 470px; padding: 28px 24px 16px; border-radius: var(--rs-rad); display: flex; flex-direction: column;
  background: radial-gradient(circle at 0 100%, rgba(141,184,228,.4) 0 80px, rgba(141,184,228,0) 81px), rgba(255,255,255,.95);
  box-shadow: 0 28px 50px -10px rgba(47,107,232,.26), 0 0 0 1px #fff, 0 0 0 2px rgba(160,190,232,.5);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
.rs-card::before, .rs-card::after { display: none; }
.rs-card > * { position: relative; z-index: 2; }
.reasons .rs-card.is-active { transform: translateY(-8px); box-shadow: 0 34px 56px -8px rgba(47,107,232,.34), 0 0 28px rgba(47,107,232,.36), 0 0 0 1.5px rgba(47,107,232,.75), 9px 8px 0 0 rgba(255,255,255,.9), 9px 8px 0 1.5px rgba(141,184,228,.9); }
.rs-pop { position: absolute !important; z-index: 1 !important; top: -38px; right: -8px; width: 52%; height: 178px; pointer-events: none;
  clip-path: polygon(22% 4%, 100% 0, 100% 84%, 78% 100%, 4% 62%, 6% 22%); -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 100%); mask-image: linear-gradient(180deg, #000 64%, transparent 100%); }
.rs-pop div { position: absolute; inset: 0; }
.reasons .rs-head { flex-direction: column; align-items: flex-start; gap: 0; }
.reasons .rs-card .reason-number { display: flex; align-items: center; gap: 8px; font-size: 50px; line-height: 1; font-weight: 800; letter-spacing: 0; color: #86B6FF; }
.reasons .rs-card .reason-number::before { content: "特徴"; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--rs-soft); align-self: flex-end; padding-bottom: 5px; }
.reasons .rs-card .reason-number::after { content: ""; flex: none; width: 1.5px; height: 40px; margin-left: 6px; background: linear-gradient(180deg, rgba(27,42,74,.35), rgba(27,42,74,0)); }
.reasons .rs-card h3 { margin-top: 14px; font-size: 20px; font-weight: 900; line-height: 1.25; color: var(--rs-navy); word-break: auto-phrase; text-wrap: balance; max-width: 62%; }
.reasons .rs-text { margin-top: 14px; font-size: 13px; line-height: 1.75; color: var(--color-text); }
.reasons .rs-cap { padding-right: 54px; }
.reasons .rs-chart { position: relative; margin-top: auto; padding: 12px 14px 10px; border: 1px solid rgba(47,107,232,.2); border-radius: var(--radius-md); background: rgba(134,182,255,.14); }
.reasons .rs-cap { display: block; font-size: 11.7px; font-weight: 700; color: var(--rs-soft); }
.reasons .rs-cap::before { display: none; }
.reasons .rs-fig { margin: 8px 0 8px; align-items: flex-end; line-height: .9; color: var(--rs-num); }
.reasons .rs-kari { align-self: flex-start; margin: 2px 8px 0 0; padding: 2px 9px; border: 1px solid #8DB8E4; border-radius: 999px; background: #fff; font-size: 10.5px; font-weight: 700; color: var(--rs-soft); line-height: 1.5; }
.reasons .rs-num { font-size: 56px; font-weight: 900; letter-spacing: -.01em; }
.reasons .rs-unit { font-size: 24px; font-weight: 800; color: var(--rs-num); padding-bottom: 5px; }
.rs-ico { position: absolute !important; right: 12px; top: 10px; width: 52px; height: 46px; z-index: 3; }
.rs-ico svg { width: 100%; height: 100%; overflow: visible; }
.rs-ico .ln { fill: none; stroke: var(--rs-blue); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.reasons .rs-bar { height: 15px; background: var(--rs-track); }
.reasons .rs-fill { background: linear-gradient(90deg, var(--rs-bar-a) 0%, var(--rs-bar-a) 30%, var(--rs-bar-b) 100%); }
.reasons .rs-scale { margin-top: 5px; font-size: 11px; font-weight: 500; color: var(--rs-soft); }
/* 下の枠(左に小さな写真+事実の一言。スタッフの声ではない) */
.rs-box { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 8px 12px 8px 8px; border-radius: var(--radius-md); background: rgba(134,182,255,.12); border: 1px solid rgba(47,107,232,.14); }
.rs-box .th { flex: none; width: 54px; height: 46px; border-radius: 12px; background-size: cover; background-position: center; border: 2px solid #fff; }
.rs-box p { margin: 0; font-size: 12.5px; line-height: 1.6; font-weight: 600; color: var(--rs-navy); }
.reasons .rs-cardnote { margin: 0; padding-top: 8px; text-align: right; font-size: 11px; color: var(--rs-soft); }
.reasons .rs-foot { margin: 4px auto 0; max-width: 290px; padding: 0 8px; font-size: 11px; line-height: 1.65; color: var(--rs-soft); text-align: center; }
/* 矢印とドット */
.rsx-nav { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 0; }
.rsx-nav .job-dots { margin: 0 !important; }
.rsx-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #CFE0F5; background: #fff; box-shadow: 0 8px 18px rgba(47,107,232,.2); display: grid; place-items: center; cursor: pointer; color: var(--rs-blue); padding: 0; }
.rsx-btn:focus-visible { outline: 3px solid #163F86; outline-offset: 2px; }
.rsx-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reasons .job-dot::before { border: 0; background: var(--rs-dot); }
.reasons .job-dot[aria-current="true"]::before { background: var(--rs-orange); }
/* 動き */
.rs-pre .rs-pop { opacity: 0; transform: scale(1.06); }
.rs-pre.rs-in .rs-pop { opacity: 1; transform: none; transition: opacity .9s ease .1s, transform 1.5s cubic-bezier(.22,.61,.36,1) .1s; }
.rs-pre .rs-head, .rs-pre .rs-text { opacity: 0; transform: translateY(10px); }
.rs-pre.rs-in .rs-head, .rs-pre.rs-in .rs-text { opacity: 1; transform: none; transition: opacity .6s ease .25s, transform .6s ease .25s; }
.rs-pre.rs-in .rs-text { transition-delay: .35s; }
@media (max-width: 731px) {
  @supports (animation-timeline: view(inline)) { .rs-card:not(.is-active) { animation: rsDim linear both; animation-timeline: view(inline); animation-range: entry 10% entry 100%; } @keyframes rsDim { from { opacity: .62; } to { opacity: 1; } } }
}
/* 732〜1099px: 横スワイプ(320px幅) */
@media (min-width: 732px) and (max-width: 1279px) {
  .reasons { padding-top: 56px; }
  .reasons .section-title { font-size: 48px; } .reasons .rs-inner .section-lead { font-size: 17px; }
  .reasons .rs-grid { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 80px 34px 36px; gap: 22px; }
  .reasons .rs-card { flex: 0 0 340px; grid-row: auto; scroll-snap-align: start; min-height: 520px; }
  .rs-whyb { font-size: 220px; left: 44%; }
  .rs-bgph { height: 360px; opacity: .6; }
  .rs-pop { width: 58%; height: 240px; }
  .reasons .rs-card h3 { font-size: 24px; }
}
/* PC(1100px〜): 左揃えの大見出し、右上に大きな写真面、3枚の大きなカード(左右いっぱい) */
@media (min-width: 1280px) {
  .reasons { padding: 70px 0 40px; }
  .rs-bgph { height: 560px; width: 64%; opacity: .8; }
  .rs-whyb { font-size: 330px; left: 27%; top: 10px; }
  .reasons .rs-inner { padding: 0 4vw; }
  .reasons .rs-inner > .job-eyebrow { justify-content: flex-start; font-size: 20px; }
  .reasons .section-title { text-align: left; padding: 0; font-size: clamp(56px, 5.8vw, 84px); margin-top: 14px; }
  .reasons .rs-inner .section-lead { text-align: left; margin: 14px 0 0; font-size: clamp(16px, 1.45vw, 21px); max-width: none; }
  .reasons .rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2vw; margin-top: 26px; padding: 90px 0 24px; overflow: visible; align-items: start; }
  .reasons .rs-card { flex: initial; min-height: 640px; padding: 40px 2.4vw 22px; }
  .reasons .rs-card:nth-child(2) { margin-top: 26px; } .reasons .rs-card:nth-child(3) { margin-top: 52px; }
  .rs-pop { top: -52px; right: -10px; width: 60%; height: 300px; }
  .reasons .rs-card h3 { max-width: 64%; } .reasons .rs-cap { padding-right: 70px; }
  .reasons .rs-card .reason-number { font-size: clamp(54px, 4.6vw, 70px); }
  .reasons .rs-card .reason-number::after { height: 52px; }
  .reasons .rs-card h3 { font-size: clamp(24px, 2.1vw, 31px); margin-top: 22px; max-width: 64%; }
  .reasons .rs-text { font-size: clamp(14px, 1.15vw, 17px); max-width: 100%; margin-top: 24px; }
  .reasons .rs-chart { padding: 16px 20px 14px; }
  .reasons .rs-num { font-size: clamp(56px, 4.6vw, 68px); }
  .rs-box { padding: 10px 16px 10px 10px; gap: 16px; } .rs-box .th { width: 78px; height: 64px; } .rs-box p { font-size: 14px; }
  .rs-ico { right: 16px; width: 66px; height: 58px; }
  .reasons .rs-foot { max-width: 640px; font-size: 12px; margin-top: 10px; }
  .rsx-nav { margin-top: 6px; }
  .rs-card.rs-pre { opacity: 0; transform: translateY(20px); }
  .rs-card.rs-pre.rs-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
  .rs-bl, .rs-waves, .rs-card, .rs-card * { animation: none !important; transition: none !important; }
  .rs-card.rs-pre, .rs-pre .rs-pop, .rs-pre .rs-head, .rs-pre .rs-text { opacity: 1; transform: none; }
}

/* ===== M: 参考の実測色による背景(参考1536x1024の座標を割合に換算) ===== */
.reasons { background:
  radial-gradient(ellipse 34% 16% at 100% 3%, #C2E7FD 0%, rgba(194,231,253,0) 72%),            /* 右上の光 #C2E7FD */
  radial-gradient(ellipse 22% 22% at 0% 30%, #CEE7FD 0%, rgba(206,231,253,0) 72%),              /* 左中(y300) #CEE7FD */
  radial-gradient(ellipse 30% 18% at 0% 78%, #C6E2FD 0%, rgba(198,226,253,0) 72%),              /* 左下(y800) #C6E2FD */
  radial-gradient(ellipse 34% 10% at 0% 99%, #A1CAF4 0%, rgba(161,202,244,0) 72%),              /* 左下端(y950) #A1CAF4 */
  radial-gradient(ellipse 22% 8% at 52% 97%, #F7FAFE 0%, rgba(247,250,254,0) 75%),              /* 下部中央の白い光 #F7FAFE */
  radial-gradient(ellipse 26% 9% at 74% 100%, #C5E3FD 0%, rgba(197,227,253,0) 75%),             /* 下部の空色 #C5E3FD */
  linear-gradient(180deg, #F4F8FE 0%, #F1F7FE 14%, #E7F2FE 34%, #DCEDFD 52%, #D8EAFC 70%, #CBE4FC 88%, #C6E2FD 100%); }
.rs-bl--a { background: rgba(194,231,253,.45); } .rs-bl--b { background: rgba(198,226,253,.5); }
.rs-bl--d { background: rgba(229,86,26,.04); }
.rs-bgph { opacity: .55; }
/* ===== 1 カード=半透明のガラス板(背景の光や青が透ける) ===== */
.reasons .rs-card { background: radial-gradient(circle at 0 100%, rgba(184,219,253,.55) 0 80px, rgba(184,219,253,0) 81px), rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  /* 2・3枚目: 縁は淡く、青い光は弱い */
  box-shadow: 0 0 0 1px rgba(255,255,255,.95), 0 0 0 2.5px rgba(184,219,253,.75), 0 0 34px 4px rgba(184,219,253,.7), 0 24px 44px -10px rgba(108,169,231,.4); }
/* ===== 2 縁: 現在地のカードは 外側に水色の太め(約3px)+内側に白い細線+右辺・下辺に濃い青の線+ずれた第2の縁 ===== */
.reasons .rs-card.is-active { background: radial-gradient(circle at 0 100%, rgba(184,219,253,.6) 0 80px, rgba(184,219,253,0) 81px), rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,1), inset -1.5px -1.5px 0 1.5px rgba(47,107,232,.4),
    0 0 0 3px rgba(108,169,231,.7), 2.5px 2.5px 0 3px rgba(47,107,232,.45),
    /* 3 影=黒でなく青い光が下・左右に回り込む(#B8DBFD〜#C6E2FD) */
    0 0 40px 8px rgba(184,219,253,.95), 0 30px 54px -6px rgba(108,169,231,.55); }
.reasons .rs-card.is-active::before { display: block; content: ""; position: absolute; z-index: -1; left: 12px; top: 12px; right: -11px; bottom: -11px; border-radius: 0 0 var(--rs-rad) 0;
  border-right: 1.5px solid rgba(47,107,232,.75); border-bottom: 1.5px solid rgba(47,107,232,.75); pointer-events: none; }
/* ===== 4 内側の面: 枠線なしの淡い青の半透明面 ===== */
.reasons .rs-chart, .rs-box { border: 0; background: rgba(232,241,252,.94); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.rs-box { padding: 8px 12px 8px 8px; } .rs-box .th { border-radius: 14px; }
/* ===== 5 写真: 外周にガラスのような白〜水色の縁(斜めの辺にも)、角丸、下端はカード面に半透明で溶ける ===== */
.rs-pop { clip-path: none; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 0 1.5px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(108,169,231,.85)); }
.rs-pop > div { border-radius: 22px; clip-path: polygon(22% 4%, 100% 0, 100% 84%, 78% 100%, 4% 62%, 6% 22%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(180deg, #000 60%, rgba(0,0,0,.25) 100%); }
/* ===== 6 2・3枚目は少し透明で低い(L継承)。光る縁は現在地だけ ===== */
.reasons .rs-card:not(.is-active) { background: radial-gradient(circle at 0 100%, rgba(184,219,253,.45) 0 80px, rgba(184,219,253,0) 81px), rgba(255,255,255,.42); }
@media (max-width: 731px) { .reasons .rs-card.is-active::before { left: 9px; top: 9px; right: -8px; bottom: -8px; } }

/* ===== N: 5つの特徴のための追加(見た目はMのまま) ===== */
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 30px 0 2px; padding: 0; list-style: none; }
.rs-tags li { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #8DB8E4; font-size: 12.5px; font-weight: 800; line-height: 1.4; color: var(--rs-navy); }
.reasons .rs-text { margin-bottom: 14px; }
.rs-asof { margin: 0; font-size: 11.5px; color: var(--rs-soft); }
.rs-contact { margin-top: 8px; display: grid; gap: 2px; }
.rs-crow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 8px 0; }
.rs-crow + .rs-crow { border-top: 1px solid rgba(47,107,232,.15); }
.rs-crow .k { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--rs-blue); color: #fff; font-size: 11.5px; font-weight: 800; }
.rs-crow b { font-size: 19px; font-weight: 900; letter-spacing: .01em; color: var(--rs-num); }
.rs-crow small { font-size: 11.5px; font-weight: 700; color: var(--rs-soft); }
.rs-box.rs-clients { display: block; padding: 12px 14px; }
.rs-clients p { margin: 0; font-size: 12.5px; line-height: 1.8; font-weight: 600; color: var(--rs-navy); }
.rs-clients b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--rs-soft); }
.rs-clients .sep { color: #8DB8E4; }
.reasons .rs-card h3 { font-size: clamp(20px, 1.75vw, 25px); max-width: 60%; letter-spacing: 0; }
.reasons .rs-card .reason-number::before { content: "特徴"; }
@media (min-width: 1280px) {
  /* PC: 3枚が見えて、残りが右端から覗く。矢印とドットで進める(参考画像と同じ) */
  .reasons .rs-grid { display: flex !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 4vw; scrollbar-width: none; gap: 2.2vw; padding: 100px 4vw 70px; margin-top: 8px; align-items: flex-start; }
  .reasons .rs-grid::-webkit-scrollbar { display: none; }
  .reasons .rs-inner { padding: 0 4vw; }
  .reasons .rs-card { flex: 0 0 28.5vw !important; scroll-snap-align: start; min-height: 620px; }
  .reasons .rs-card:nth-child(n+4) { margin-top: 52px; }
  .reasons .rs-inner .rs-grid { margin-left: -4vw; margin-right: -4vw; width: calc(100% + 8vw); }
}

/* ===== O: 写真(参考の実測: カード幅335pxに対し 写真幅220px=66%、高さ215px≒1:1、右端=カードの右端、上端はカードより約20px上、左下だけ斜めに切る) ===== */
.rs-pop { top: -20px !important; right: 0 !important; width: 66% !important; height: auto !important; aspect-ratio: 1 / 1;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px rgba(108,169,231,.85)) drop-shadow(0 8px 14px rgba(47,107,232,.2)) !important; }
.rs-pop > div { border-radius: 22px !important; transform: none !important; background-size: cover; background-position: center;
  /* 左上は垂直、右側は角丸、左下だけ大きく斜め(左辺の約56%の高さから、下辺の約45%の位置へ) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%, 0 56%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,0) 100%) !important; mask-image: linear-gradient(180deg, #000 68%, rgba(0,0,0,0) 100%) !important; }
/* 見出し・短文は写真の左と斜めの下を回り込む(見出しは写真より左、短文は写真の下から幅いっぱい) */
.reasons .rs-card h3 { max-width: 60% !important; margin-top: 36px !important; } /* 参考: 見出しは写真の下の約20%(斜めに切れた部分)に位置する。写真の高さに合わせて下げる */
@media (min-width: 1280px) { .reasons .rs-card h3 { margin-top: 70px !important; } }
@media (min-width: 732px) and (max-width: 1279px) { .reasons .rs-card h3 { margin-top: 56px !important; } }
.reasons .rs-card .rs-text { max-width: none !important; }
.reasons .rs-card .reason-number { color: #7DB2FF; }
/* ===== カード: ほぼ白の半透明のすりガラス。光が主役(青く光る縁・外へのにじみ) ===== */
.reasons .rs-card { background: radial-gradient(circle at 0 100%, rgba(150,200,255,.4) 0 80px, rgba(150,200,255,0) 81px), linear-gradient(160deg, rgba(255,255,255,.72), rgba(240,247,255,.52));
  -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.95), 0 0 0 2px rgba(120,180,255,.45), 0 0 26px rgba(120,180,255,.3), 0 28px 52px -24px rgba(47,123,255,.3); }
/* 現在地のカード: 縁が青く光る+左辺に光の帯+右・下に平行な第2の青い線 */
.reasons .rs-card.is-active { background: radial-gradient(circle at 0 100%, rgba(150,200,255,.45) 0 80px, rgba(150,200,255,0) 81px), linear-gradient(160deg, rgba(255,255,255,.82), rgba(240,247,255,.6));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,1), inset 10px 0 22px -8px rgba(170,210,255,.95), inset -1.5px -1.5px 0 1px rgba(47,123,255,.35),
    0 0 0 2px #2F7BFF, 0 0 10px 2px rgba(47,123,255,.75), 0 0 46px 6px rgba(120,180,255,.5), 0 34px 64px -20px rgba(47,123,255,.4) !important; }
.reasons .rs-card.is-active::before { display: block !important; content: ""; position: absolute; z-index: -1; left: 16px; top: 16px; right: -10px; bottom: -10px; border-radius: 0 0 28px 0;
  border-right: 2px solid #2F7BFF; border-bottom: 2px solid #2F7BFF; filter: drop-shadow(0 0 5px rgba(47,123,255,.8)); pointer-events: none; }
.reasons .rs-card.is-active::after { display: block !important; content: ""; position: absolute; z-index: 1; left: 2px; top: 5%; bottom: 5%; width: 20px; border-radius: 28px 0 0 28px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(160,205,255,.45) 45%, rgba(160,205,255,0)); filter: blur(.6px); }
.reasons .rs-card h3 { max-width: 54% !important; }
@media (max-width: 731px) { .reasons .rs-card h3 { max-width: 46% !important; margin-top: 46px !important; } }
.reasons .rs-chart, .rs-box { background: rgba(232,241,252,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.reasons .rs-fill { background: linear-gradient(90deg, #2F7BFF 0%, #2F7BFF 22%, #5B9BFF 100%); box-shadow: 0 0 10px rgba(47,123,255,.4); }
/* ===== 写真枠: ガラスのレンズ ===== */
.rs-pop { filter: drop-shadow(0 0 5px rgba(47,123,255,.55)) drop-shadow(0 10px 18px rgba(47,123,255,.22)) !important; }
.rs-pop > .rs-ph { border-radius: 0 !important; clip-path: url(#rsLens) !important; -webkit-mask-image: none !important; mask-image: none !important; }
.rs-lens-gl { position: absolute; inset: 0; clip-path: url(#rsLens); pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 44%), linear-gradient(0deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%); }
.rs-lens-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rs-lens-svg path { fill: none; vector-effect: non-scaling-stroke; }
.rs-lens-svg .o { stroke: #2F7BFF; stroke-width: 2px; filter: drop-shadow(0 0 3px #2F7BFF); }
.rs-lens-svg .i { stroke: rgba(255,255,255,.95); stroke-width: 1.5px; }
@media (min-width: 1280px) {
  .reasons .rs-card h3 { margin-top: 86px !important; }
}
/* ===== 2 カード1の光: 左辺の光の帯を強く+曲線の細い光の筋(白と水色が絡む) ===== */
.reasons .rs-card.is-active::after { width: 30px !important; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(170,210,255,.7) 40%, rgba(160,205,255,0)) !important; filter: blur(.5px) !important; }
.rs-cv { position: absolute; z-index: 1; left: 3px; top: 3%; height: 94%; width: 46px; opacity: 0; transition: opacity .5s ease; pointer-events: none; overflow: visible; }
.rs-card.is-active .rs-cv { opacity: 1; }
.rs-cv path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.rs-cv .w { stroke: #fff; stroke-width: 1.5px; filter: drop-shadow(0 0 3px #fff); }
.rs-cv .b { stroke: #8EC1FF; stroke-width: 1.4px; filter: drop-shadow(0 0 3px #5B9BFF); }
/* ===== 3・4 カードを縦に長く、写真は上へ約24pxはみ出す。1枚目の背後にもう一段の青いグロー。2・3枚目は少し小さく淡く ===== */
.rs-pop { top: -24px !important; }
@media (min-width: 1280px) { .reasons .rs-card { min-height: 720px !important; } }
@media (max-width: 731px) { .reasons .rs-card { min-height: 520px !important; } .reasons .rs-card h3 { max-width: 62% !important; margin-top: 52px !important; } }
.reasons .rs-card.is-active { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,1), inset 12px 0 26px -8px rgba(170,210,255,1), inset -1.5px -1.5px 0 1px rgba(47,123,255,.35),
    0 0 0 2px #2F7BFF, 0 0 10px 2px rgba(47,123,255,.8), 0 0 48px 8px rgba(120,180,255,.55), 0 0 110px 26px rgba(120,180,255,.34), 0 34px 64px -20px rgba(47,123,255,.42) !important; }
.reasons .rs-card:not(.is-active) { transform: scale(.97); opacity: .93; transform-origin: 50% 30%; }
/* 隣の節との境目で浮かないよう、節の下端に白〜淡色のぼかしを敷く */
.reasons { -webkit-mask-image: none; }
/* 合成素材(heroComposite)がある時: 四辺を霞で溶かして全体を1枚として置く */
.rs-comp { display: none; }
@media (min-width: 1280px) {
  .rs-has-comp .rs-comp { display: block; position: absolute; z-index: 3; left: 60vw; top: 20px; width: 34vw; height: 34vw; max-width: 500px; max-height: 500px; pointer-events: none;
    background-size: cover; background-position: center; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
}
/* S2 骨格を参考に合わせる(1440幅。参考1100幅の値×1.309): カード行を約72px上へ、カード幅 439/393/386、送り幅 478/419、y差 0/+20/+34、高さ 720/668/641、見出しを左へ */
@media (min-width: 1280px) {
  .reasons .rs-inner .rs-grid { padding-top: 28px !important; padding-left: 4.5vw !important; gap: 0 !important; align-items: flex-start !important; }
  .reasons .rs-card { margin-top: 0 !important; }
  .reasons .rs-card:nth-child(1) { flex: 0 0 30.5vw !important; min-height: 720px !important; margin-right: 2.7vw; }
  .reasons .rs-card:nth-child(2) { flex: 0 0 27.3vw !important; min-height: 668px !important; margin-top: 20px !important; margin-right: 1.8vw; }
  .reasons .rs-card:nth-child(3) { flex: 0 0 26.8vw !important; min-height: 641px !important; margin-top: 34px !important; margin-right: 2.2vw; }
  .reasons .rs-card:nth-child(n+4) { flex: 0 0 26.8vw !important; min-height: 641px !important; margin-top: 34px !important; margin-right: 2.2vw; }
  .reasons .rs-inner > .job-eyebrow, .reasons .section-title, .reasons .rs-inner .section-lead { margin-left: 4.6vw !important; }
  /* 合成素材: 人物が参考の枠(x969〜1348, y52〜432)に来るよう、約520pxの正方形を中心(1158, 242)に */
  .rs-has-comp .rs-comp { left: 62.4vw !important; top: -58px !important; width: 36vw !important; height: 36vw !important; max-width: none !important; max-height: none !important; }
  /* S3(1) 見出し: 参考は「JENISが」約60px・「選ばれる理由」約62px(1100幅)=1440幅で約80px。Whyは見出しの右・人物の背後へ */
  .reasons .section-title { font-size: 78px !important; line-height: 1.08 !important; }
  .rs-whyb { left: 55vw !important; font-size: 250px !important; top: 24px !important; z-index: 1 !important; opacity: .55 !important; }
  /* S3(2) 写真のはみ出し: 参考は約20px(1100幅)=1440幅で約26px。幅66%・1:1(約288px) */
  .reasons .rs-card .rs-pop { top: -4px !important; }
  .reasons .rs-card:nth-child(1) .rs-pop { translate: 0 -40px; }
  .reasons .rs-card:nth-child(2) .rs-pop { translate: 32px -7px; }
  .reasons .rs-card:nth-child(3) .rs-pop { translate: 13px 0; }
  /* S3(3) 短文とグラフ面の間を詰める(カード高さは min-height のまま。余りは下へ) */
  .reasons .rs-card .rs-chart { margin-top: 22px !important; }
  /* S3(4) 幅の不足(291/286 → 300/295)を補う */
  .reasons .rs-card:nth-child(2) { flex-basis: 28.2vw !important; }
  .reasons .rs-card:nth-child(3), .reasons .rs-card:nth-child(n+4) { flex-basis: 27.7vw !important; }
}
/* S4(1) 見出し: 参考は約66px(1100幅)=88px(1440幅)。位置は参考(JENISの頭 y117、リード y262)へ */
@media (min-width: 1280px) {
  .reasons .rs-inner { padding-top: 14px !important; }
  .reasons .section-title { font-size: min(88px, 6.1vw) !important; line-height: 1.2 !important; margin-top: 7px !important; color: #03174D !important; }
  .reasons .section-title .rs-t-accent { color: #0B5AF5 !important; }
  .reasons .section-title .rs-t-navy { color: #03174D !important; }
  .reasons .rs-inner .section-lead { margin-top: 0 !important; font-size: 26px !important; color: #64708A !important; }
  .reasons .rs-inner .rs-grid { padding-top: 46px !important; }
  .reasons .rs-inner .rs-grid { padding-left: calc(4.5vw + 8px) !important; scroll-padding-left: 65.5px !important; scroll-padding-inline-start: 65.5px !important; }
  .reasons .rs-card:nth-child(1) { margin-right: calc(2.7vw - 6.5px) !important; }
  .reasons .rs-card:nth-child(2) { margin-top: 6px !important; margin-right: calc(1.8vw - 14px) !important; min-height: 712px !important; }
  .reasons .rs-card:nth-child(3), .reasons .rs-card:nth-child(n+4) { min-height: 692px !important; }
  .reasons .rs-card:nth-child(3), .reasons .rs-card:nth-child(n+4) { margin-top: 12px !important; }
  /* Why: 参考は x420〜790・幅370(1100幅)=484px(1440幅)、左端 38vw */
  .rs-whyb { left: 38vw !important; font-size: 200px !important; top: 30px !important; opacity: .5 !important; }
  /* 合成素材: 人物の頭の大きさを参考に合わせる(頭 155px@1100 → 素材の約30% → 約676px)。向きは参考(左上を見る)に合わせ左右反転 */
  .rs-has-comp .rs-comp { left: 46.4vw !important; top: -33px !important; width: 50vw !important; height: 50vw !important; -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%) !important; mask-image: radial-gradient(closest-side, #000 78%, transparent 100%) !important; }
}
/* S9 面と背景を参考へ: カードは白に近いすりガラス(参考のカード面 #F4F8FC〜#FAFCFD)、縁は「白い縁取り+細い青線」、背景は下中央を白く・左中段の青い光を除く */
@media (min-width: 1280px) {
  .reasons { background-image:
    radial-gradient(34% 16% at 100% 3%, rgb(194,231,253) 0%, rgba(194,231,253,0) 72%),
    radial-gradient(22% 22% at 0% 30%, rgb(206,231,253) 0%, rgba(206,231,253,0) 72%),
    radial-gradient(30% 9% at 14% 100%, rgb(146,198,252) 0%, rgba(146,198,252,0) 78%),
    radial-gradient(16% 16% at 0% 98%, rgb(140,190,246) 0%, rgba(140,190,246,0) 80%),
    radial-gradient(42% 13% at 62% 97%, rgb(250,252,255) 0%, rgba(250,252,255,0) 80%),
    radial-gradient(26% 9% at 80% 100%, rgb(197,227,253) 0%, rgba(197,227,253,0) 75%),
    linear-gradient(rgb(244,248,254) 0%, rgb(241,247,254) 14%, rgb(236,244,254) 40%, rgb(232,242,253) 70%, rgb(222,237,252) 100%) !important; }
  .reasons .rs-card.is-active { background-image: linear-gradient(160deg, rgba(255,255,255,.96), rgba(247,251,255,.9)) !important;
    box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 8px rgba(255,255,255,.7), inset 12px 0 22px -8px rgba(185,218,255,.9),
      0 0 0 1.5px #2F7BFF, 0 0 0 4px rgba(255,255,255,.7), 0 0 14px 4px rgba(47,123,255,.5), -16px 0 34px -2px rgba(150,200,255,.7), 0 0 46px 10px rgba(140,195,255,.45), 0 30px 60px -26px rgba(47,123,255,.3) !important; }
  .reasons .rs-card:not(.is-active) { background-image: none !important; background-color: rgba(255,255,255,.8) !important; -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(255,255,255,.9), 0 0 0 2.5px rgba(170,208,252,.7), 0 0 22px rgba(150,200,252,.35), 0 26px 50px -28px rgba(47,123,255,.22) !important; }
  .reasons .rs-card::before { clip-path: inset(0 0 0 52%); }
  /* 写真枠の外周: 参考は淡い青の細線(#8FB8F5)+白い光沢。写真は白い霞をかけて少し淡く */
  .rs-lens-svg .o { stroke: #7CAEF7 !important; stroke-width: 1.4px !important; }
}
/* S10 下部の操作: 前へボタンは参考どおりカード1の左縁に重ねた白い丸、ドットは大きな現在地(青18px)+淡い青12px、間隔43px(1100幅) */
@media (min-width: 1280px) {
  .reasons .rsx-nav { position: static !important; margin-top: -31px !important; padding-left: 160px !important; }
  .reasons .rsx-nav .rsx-btn[data-d="-1"] { position: absolute !important; z-index: 8; left: 29px; top: 677px; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.95) !important; border: 1.5px solid rgba(255,255,255,1) !important; box-shadow: 0 6px 22px rgba(47,123,255,.25), 0 0 0 1px rgba(170,208,252,.6) !important; color: #1E6BFF !important; }
  .reasons .rsx-nav .rsx-btn[data-d="-1"] svg { width: 26px; height: 26px; }
  .reasons .rsx-nav .rsx-btn[data-d="-1"] svg path { stroke: #1E6BFF !important; stroke-width: 2.6 !important; }
  .reasons .job-dot { width: 56px !important; }
  .reasons .job-dot::before { width: 12px !important; height: 12px !important; }
  .reasons .job-dot[aria-current="true"]::before { width: 19px !important; height: 19px !important; }
}
/* S11 文字の大きさを参考へ(見出し h3: 参考 約24.6px/1100幅=約32px、短文: 約15.2px=約20px、番号: 縦長の「01」) */
@media (min-width: 1280px) {
  .reasons .rs-card .rs-head h3 { font-size: 30px !important; line-height: 1.32 !important; max-width: 62% !important; }
  .reasons .rs-card:nth-child(n+2) .rs-head h3 { max-width: 82% !important; }
  .reasons .rs-card .rs-text { font-size: 19.5px !important; line-height: 1.52 !important; color: #4A566E !important; }
  .reasons .rs-card .reason-number { font-size: 84px !important; font-weight: 700 !important; position: relative; top: 40px; display: block !important; height: 66px !important; line-height: 66px !important; transform: scaleX(.62); transform-origin: 0 50%; letter-spacing: .02em; }
  .reasons .rs-card .reason-number::before { display: none !important; }
  .reasons .rs-card .rs-head { position: relative; }
  .reasons .rs-card .rs-head::after { content: ""; position: absolute; left: 126px; top: 38px; width: 1.5px; height: 62px; background: linear-gradient(180deg, rgba(150,190,240,0), rgba(150,190,240,.9), rgba(150,190,240,0)); }
}
/* S12 SP(参考の右側。390幅): 見出しは約44px・中央、カードは幅342で白いすりガラス(PCのようなネオンは無い)、写真は約217px、番号は縦長の「01」、操作は白い丸+大きな現在地ドット */
@media (max-width: 731px) {
  .rs-whyb { display: none !important; }
  .reasons .rs-bgph { opacity: .16 !important; }
  .reasons { background-image: radial-gradient(40% 12% at 100% 4%, rgba(210,232,253,.9) 0%, rgba(210,232,253,0) 75%), radial-gradient(40% 10% at 0% 99%, rgb(190,218,248) 0%, rgba(190,218,248,0) 75%), linear-gradient(rgb(245,249,254) 0%, rgb(240,246,254) 30%, rgb(234,243,254) 70%, rgb(226,239,253) 100%) !important; }
  .rs-lens-svg .o { stroke: #8FB8F5 !important; stroke-width: 1.3px !important; }
  .rsx-mid { position: absolute; z-index: 9; right: 10px; top: 546px; width: 61px; height: 61px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(47,123,255,.22); display: flex; align-items: center; justify-content: center; }
  .rsx-mid svg { width: 24px; height: 24px; } .rsx-mid path { fill: none; stroke: #1E6BFF; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
  .reasons .job-eyebrow { margin-top: 14px !important; color: #4C86E6 !important; }
  .reasons .section-title { font-size: 40px !important; line-height: 1.375 !important; color: #03174D !important; margin-top: 13px !important; }
  .reasons .section-title .rs-t-accent { color: #0B5AF5 !important; }
  .reasons .section-title .rs-t-navy { color: #03174D !important; }
  .reasons .rs-inner .section-lead { font-size: 17px !important; margin-top: 7px !important; color: #64708A !important; }
  .reasons .rs-inner .rs-grid { padding-left: 33px !important; scroll-padding-left: 28px !important; scroll-padding-inline-start: 28px !important; padding-top: 35px !important; gap: 0 !important; align-items: flex-start !important; }
  .reasons .rs-card { flex: 0 0 342px !important; margin-right: 16px !important; margin-top: 0 !important; min-height: 603px !important; border-radius: 26px !important; }
  .reasons .rs-card.is-active { background-image: linear-gradient(160deg, rgba(255,255,255,.97), rgba(247,251,255,.92)) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.95), 0 0 0 2.5px rgba(196,224,252,.8), 0 22px 44px -22px rgba(47,123,255,.3), 0 0 36px rgba(160,205,252,.35) !important; }
  .reasons .rs-card.is-active::after { display: none !important; }
  .reasons .rs-card::before, .reasons .rs-card.is-active::before, .reasons .rs-card:not(.is-active)::before { display: none !important; content: none !important; }
  .reasons .rs-cv { display: none !important; }
  .reasons .rs-card .rs-chart { margin-top: 8px !important; }
  .reasons .rs-card { padding-bottom: 26px !important; }
  .reasons .rsx-nav { margin-top: -45px !important; }
  .reasons .rs-card .rs-pop { width: 217px !important; height: 217px !important; top: -1px !important; right: 4px !important; left: auto !important; }
  .reasons .rs-card .reason-number { font-size: 60px !important; font-weight: 700 !important; display: block !important; height: 44px !important; line-height: 44px !important; transform: scaleX(.62); transform-origin: 0 50%; position: relative; top: 32px; }
  .reasons .rs-card .reason-number::before { display: none !important; }
  .reasons .rs-card .rs-head h3 { font-size: 27px !important; line-height: 1.3 !important; max-width: 70% !important; margin-top: 84px !important; }
  .reasons .rs-card .rs-text { font-size: 16.4px !important; line-height: 1.6 !important; color: #4A566E !important; max-width: none !important; }
  .reasons .rsx-nav .rsx-btn { width: 45px !important; height: 45px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 6px 18px rgba(47,123,255,.18) !important; }
  .reasons .rsx-nav .rsx-btn svg path { stroke: #0B1F4F !important; stroke-width: 2.6 !important; }
  .reasons .job-dot { width: 22px !important; }
  .reasons .job-dot::before { width: 10px !important; height: 10px !important; }
  .reasons .job-dot[aria-current="true"]::before { width: 18px !important; height: 18px !important; }
}
/* 見出し上のラベル: 参考は淡い青。橙の斜線を青へ */
.reasons .job-eyebrow { color: #4C86E6 !important; }
/* SP: カード右縁の「次へ」(参考どおり。押すと下の次へボタンと同じ動き) */
.rsx-mid { display: none; }
@media (max-width: 731px) { .rsx-mid { display: flex; } }
@media (min-width: 1280px) {
  .rs-curve { display: block; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; overflow: visible; }
  .rs-curve path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .reasons .section-title .rs-jen { font-family: "Plus Jakarta Sans", Montserrat, sans-serif; font-style: normal !important; font-weight: 800; letter-spacing: .05em; }
}
/* SP: 背景のぼかし写真は消す。次のカードは見せない */
@media (max-width: 731px) {
  .reasons .rs-bgph { opacity: 0 !important; display: none !important; }
  .reasons .rs-card { margin-right: 44px !important; }
} /* v3は帯・フレア・ガラス板を素材が持つ */
/* S15 カードの浮き上がり(参考の実測): 1枚目は上辺に鮮やかな青線(#86AEF9)、下辺に水色の白線(#BEEFFD)、左右は淡い縁。外のにじみは淡く短く(左 約12px)、影は下に長く淡く。2・3枚目は縁がほぼ無く、白い面だけ */
@media (min-width: 1280px) {
  .reasons .rs-card.is-active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 2px 0 rgba(255,255,255,1), inset 0 0 0 9px rgba(255,255,255,.55), inset 10px 0 18px -10px rgba(200,228,255,.9),
      0 8px 10px -4px rgba(60,140,245,.22), 0 30px 38px -22px rgba(40,100,220,.26) !important; }
  .reasons .rs-card:not(.is-active) { background-color: rgba(255,255,255,.88) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 2px rgba(205,230,253,.55), 0 10px 22px -12px rgba(90,150,235,.3) !important; }
  .reasons .rs-card::before { border-color: #9FEAFE !important; opacity: .9; }
}
/* S16 写真の形: 直線の斜めでなく、緩やかなS字の下辺(参考の実測。左上は丸み、上辺は右へ少し上がる) */
.rs-pop .rs-ph, .rs-pop .rs-lens-gl { -webkit-clip-path: url(#rsLensW) !important; clip-path: url(#rsLensW) !important; }
/* SP: 背景の色のぼかしを外し、淡い水色〜白へ */
@media (max-width: 731px) {
  .reasons .rs-bl, .reasons [class*="rs-bl--"] { display: none !important; }
  .reasons .rs-bgph { display: none !important; }
  .reasons .rs-pop::after { display: none !important; }
  .reasons { background-image: linear-gradient(rgb(246,250,254) 0%, rgb(241,247,254) 35%, rgb(236,244,254) 70%, rgb(228,240,253) 100%) !important; }
}
/* S17 写真と文字が交差しないように(DOM矩形で確認: _fid/overlap.js) */
@media (min-width: 732px) and (max-width: 1279px) { .reasons .rs-card .rs-text { margin-top: 38px !important; } .reasons .rs-card .rs-head h3 { max-width: 60% !important; } }
@media (max-width: 731px) { .reasons .rs-card:nth-child(n+2) .rs-head h3 { font-size: 24px !important; max-width: 66% !important; margin-top: 104px !important; } }
/* S18 素材(card-frame.webp)の9スライス: 現在地のカードのみ。縁の線(素材で端から約75px)がカードの縁に来るよう、素材の1/2.2の縮尺(slice130→幅59px)・外へ34px。上下の縁は強く、左右の縁の中央は弱く(参考) */
.rs-glass { display: none; }
@media (min-width: 1280px) {
  .reasons .rs-card.is-active > .rs-glass { display: block; position: absolute; z-index: 0; inset: -30px; pointer-events: none; border: 59px solid transparent;
    }
  .reasons.rs-near .rs-card.is-active > .rs-glass { border-image: url('../img/reasons/card-frame-v2.webp') 130 / 59px stretch; }
}
/* S19 カード1の面を参考の実測へ: 面の上端 y337・下端 y890(1100幅)=案Sは約14px上・下は約16px上だった。中身の位置は変えず、面の上端を下げ下端を延ばす */
@media (min-width: 1280px) {
  .reasons .rs-card:nth-child(1) { margin-top: 18px !important; min-height: 728px !important; padding-top: 10px !important; }
  /* カード直下の背景の青(参考 y898 #95C8FD → y946 #CDE7FC) */
  .reasons { background-image:
    radial-gradient(13% 6% at 2% 85.5%, rgb(104,162,247) 0%, rgba(104,162,247,0) 100%),
    radial-gradient(30% 7.5% at 5% 88%, rgb(112,168,247) 0%, rgba(112,168,247,0) 100%),
    radial-gradient(42% 7% at 4% 99%, rgb(172,210,248) 0%, rgba(172,210,248,0) 100%),
    radial-gradient(34% 16% at 100% 3%, rgb(194,231,253) 0%, rgba(194,231,253,0) 72%),
    radial-gradient(22% 22% at 0% 30%, rgb(206,231,253) 0%, rgba(206,231,253,0) 72%),
    radial-gradient(42% 13% at 62% 97%, rgb(250,252,255) 0%, rgba(250,252,255,0) 80%),
    radial-gradient(26% 9% at 80% 100%, rgb(197,227,253) 0%, rgba(197,227,253,0) 75%),
    linear-gradient(rgb(244,248,254) 0%, rgb(241,247,254) 14%, rgb(236,244,254) 40%, rgb(232,242,253) 70%, rgb(222,237,252) 100%) !important; }
}
/* S20 写真の縁を面に溶かす(参考): 外周の線を細く淡く、下端のS字(左下)を面へ向けてグラデーションで消す。素材の枠 v2 に合わせ、カードの縦の光の筋は弱める */
@media (min-width: 1280px) {
  .rs-pop .rs-ph, .rs-pop .rs-lens-gl, .rs-pop .rs-lens-svg { -webkit-mask-image: linear-gradient(48deg, rgba(0,0,0,0) 8%, #000 34%); mask-image: linear-gradient(48deg, rgba(0,0,0,0) 8%, #000 34%); }
  .rs-lens-svg .o { stroke: #9CC3F8 !important; stroke-width: 1.1px !important; stroke-opacity: .85; }
  .reasons .rs-card.is-active .rs-cv { opacity: .45; }
}
@media (max-width: 1279px) { .rs-whyb { display: none !important; } }
/* S1(2) ドット: 現在地=青の大きな丸、他は淡い青(参考) */
.reasons .job-dot[aria-current="true"]::before { background: #2F7BFF !important; box-shadow: 0 0 8px rgba(47,123,255,.7); }
.reasons .job-dot::before { background: #B7D3F7 !important; }
/* S1(3) 写真枠の外周: 青の細線(1.5px)+内側の白線+ずれた第2の枠 */
.rs-lens-svg .o { stroke-width: 1.6px !important; }
.rs-pop::after { content: ""; position: absolute; right: -9px; top: 10px; bottom: 6px; width: 9px; border-right: 1.6px solid #2F7BFF; border-radius: 0 20px 20px 0; opacity: .8; filter: drop-shadow(0 0 3px rgba(47,123,255,.8)); }
/* S1(4) カード2の写真の右下に橙の帯 */
.rs-card:nth-child(2) .rs-pop .rs-or { position: absolute; right: -2px; bottom: 6%; width: 60%; height: 16%; transform: skewX(-38deg); background: linear-gradient(90deg, rgba(247,146,46,0), rgba(247,146,46,.9)); border-radius: 0 12px 12px 0; pointer-events: none; }

/* ===== 完成版の動作の補正(2026-10-05 QA NG#23。値は変えず、動作・読み込み・JS無効の見え方のみ) ===== */
@media (min-width: 732px) { .reasons .rsx-btn[data-d="1"][aria-disabled="true"] { opacity: .35; pointer-events: none; } } /* 最後の枚まで送ったら「次へ」を無効の表示に */
@media (min-width: 1280px) { .reasons.rs-scrolled .rs-grid { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40px, #000 150px); mask-image: linear-gradient(90deg, transparent 0, transparent 40px, #000 150px); } } /* 送ったあと、左端に覗く前のカードの切れた文字が「前へ」ボタンに重ならないよう薄く消す */
/* JS無効時(#reasons の <noscript>): 左右の余白・見出しを句の切れ目で折る */
.reasons .rs-ns { padding: 8px 24px 16px; text-align: left; }
.reasons .rs-ns .job-eyebrow { justify-content: center; }
.reasons .rs-ns .section-title { font-size: 28px !important; line-height: 1.45 !important; margin: 10px 0 0 !important; text-align: center !important; word-break: keep-all; text-wrap: balance; color: #03174D !important; }
.reasons .rs-ns .section-lead { margin: 10px 0 0 !important; font-size: 15px !important; text-align: center !important; }
.reasons .rs-ns .rs-noscript { margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.8; }
.reasons .rs-ns .rs-noscript li { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.7); }
.reasons .rs-ns .rs-noscript b { color: #03174D; }
/* PC: 下の操作(ドット・次へ)が、カードの影・余白の下に隠れてマウスで押せないことがあったため、重なり順を上げる(見た目は変えない) */
@media (min-width: 732px) { .reasons .rsx-nav .job-dots, .reasons .rsx-nav .rsx-btn[data-d="1"] { position: relative; z-index: 9; } }

/* ===== 完成時QA(NG#23)への designer 指定の反映(_proposal/reasons-S-qafix-spec.md。2026-10-05) ===== */
/* 1 SPの「次へ」丸ボタン: カードの右縁に半分かかる白い丸(44px)。本文と交差しない位置。最後のカードでは隠す */
@media (max-width: 731px) {
  .rsx-mid[hidden] { display: none !important; }
  .rsx-mid { width: 44px; height: 44px; left: calc(1px + min(100vw - 48px, 342px)); right: auto; top: 552px; }
  .rsx-mid svg { width: 20px; height: 20px; }
  .reasons .rs-card { flex: 0 0 calc(100vw - 48px) !important; max-width: 342px; } /* カード幅は画面幅に連動(390で342) */
}
@media (max-width: 374px) { /* カードが312pxに縮むため、写真と見出しを一段小さく */
  .reasons .rs-card .rs-pop { width: 188px !important; height: 188px !important; }
  .reasons .rs-card .rs-head h3 { font-size: 24px !important; }
  .reasons .rs-card:nth-child(n+2) .rs-head h3 { font-size: 22px !important; }
}
/* 2 小さい文字とコントラスト(最小12px。注記は #4B5563 = 白に対して 7.56:1) */
.reasons .rs-cap { font-size: 13px; color: #4B5563; }
.reasons .rs-asof, .reasons .rs-clients b { font-size: 12.5px; color: #4B5563; }
.reasons .rs-scale { font-size: 12px; color: #4B5563; }
.reasons .rs-cardnote { font-size: 12px; color: #4B5563; }
.reasons .rs-foot { font-size: 12px; line-height: 1.6; color: #4B5563; }
.reasons .rs-kari { font-size: 12px; color: #5B6472; }
.reasons .rs-crow small { font-size: 14px; font-weight: 500; color: #4B5563; } /* 「(営業時間内)」は条件を伝える文言のため14px */
.reasons .rs-crow .k { font-size: 13px; font-weight: 700; background: #1D5FD6; } /* 電話・LINEのラベル(白 on #1D5FD6 = 5.74:1) */
/* 3 短文の改行: 文節単位(未対応のブラウザは keep-all。文言の文節の切れ目に ZWSP を入れてある) */
.reasons .rs-text, .reasons .rs-cap, .reasons .rs-box, .reasons .rs-cardnote, .reasons .rs-foot { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
@supports not (word-break: auto-phrase) { .reasons .rs-text, .reasons .rs-cap, .reasons .rs-box { word-break: keep-all; } }
/* 4 SPのドットの当たり判定(28×44px。見た目の丸は変えない) */
@media (max-width: 731px) { .reasons .job-dot { width: 28px !important; height: 44px !important; } }
.reasons .rs-inner .section-lead { word-break: auto-phrase; text-wrap: balance; } /* リードの最終行が1〜2文字だけ残らないように(文言変更で長くなったため) */

/* ===== 再QA(NG#24)への designer 指定の反映(_proposal/reasons-S-qafix-spec.md 末尾。2026-10-05) ===== */
/* 新1: 1441px以上は「1440幅の見た目を舞台として固定し、中央に置く」(1440以下は変えない)。本体は 1440幅で行が全幅(1440px)・カード1の左66px のため、舞台の幅は1440px */
@media (min-width: 1441px) {
  .reasons { --off: calc((100vw - 1440px) / 2); }
  .reasons .rs-inner { padding-left: 57.6px; padding-right: 57.6px; }
  .reasons .rs-inner .rs-grid { width: 1440px; max-width: none; margin-left: calc(var(--off) - 57.6px); margin-right: auto; padding-left: 72.8px !important;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); } /* 右端はやわらかく消す */
  .reasons.rs-scrolled .rs-grid { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40px, #000 150px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent 0, transparent 40px, #000 150px, #000 calc(100% - 56px), transparent); } /* 2枚目以降: 左端の薄いマスクと合成 */
  .reasons .rs-card:nth-child(1) { flex: 0 0 439px !important; margin-right: 32.4px !important; }
  .reasons .rs-card:nth-child(2) { flex: 0 0 406px !important; margin-right: 11.9px !important; }
  .reasons .rs-card:nth-child(3), .reasons .rs-card:nth-child(n+4) { flex: 0 0 399px !important; margin-right: 31.7px !important; }
  .reasons .rs-inner > .job-eyebrow, .reasons .section-title, .reasons .rs-inner .section-lead { margin-left: calc(66.2px + var(--off)) !important; }
  .rs-whyb { left: calc(547px + var(--off)) !important; }
  .rs-has-comp .rs-comp { left: calc(668px + var(--off)) !important; width: 720px !important; height: 720px !important; }
  .reasons .rsx-nav .rsx-btn[data-d="-1"] { left: calc(29px + var(--off)) !important; }
  .rs-curve { left: var(--off); width: 1440px; }
}
/* 見出し・本文との余裕(写真の斜めの辺との交差を確実に0にする) */
@media (min-width: 1280px) { .reasons .rs-card:nth-child(n+2) .rs-head h3 { max-width: 74% !important; position: relative; top: 6px; } }
@media (max-width: 731px) { .reasons .rs-card .rs-head h3 { position: relative; top: 10px; } .reasons .rs-card:nth-child(n+2) .rs-head h3 { max-width: 76% !important; } }
/* 新3: 732〜1279pxで写真を右へ12px(番号が写真の縁に触れないように) */
@media (min-width: 732px) and (max-width: 1279px) { .reasons .rs-card .rs-pop { translate: 12px 0; } }
/* 新4: 375〜389pxの見出しを一段小さく */
@media (min-width: 375px) and (max-width: 389px) { .reasons .rs-card:nth-child(1) .rs-head h3 { font-size: 25px !important; } .reasons .rs-card:nth-child(n+2) .rs-head h3 { font-size: 23px !important; } }
/* 新5: 見出しも文節で折る。JS無効時(noscript)は keep-all + <wbr> */
.reasons .rs-head h3 { word-break: auto-phrase; line-break: strict; }
.reasons .rs-ns { word-break: keep-all; line-break: strict; text-wrap: pretty; }
/* 新6: 無効の「前へ」「次へ」は同じ表示(色・形は変えない) */
.reasons .rsx-btn[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: none !important; }

/* ===== 最終QA(NG#25): 1441px以上でカード内も「1440幅の計算値」の固定pxに(vw連動を外す)・見出しの折り方・noscriptの電話・曲線の左端 ===== */
@media (min-width: 1441px) {
  .reasons .rs-card { padding: 40px 34.56px 22px; }                 /* 2.4vw @1440 */
  .reasons .rs-num { font-size: 66.24px; }                           /* clamp(56px,4.6vw,68px) @1440 */
  .reasons .rs-card .reason-number { font-size: 66.24px; }           /* 4.6vw @1440(S11が84pxで上書きするため実際は84px) */
  .reasons .section-title { font-size: 87.84px !important; }         /* min(88px,6.1vw) @1440 */
  .rs-curve { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px); mask-image: linear-gradient(90deg, transparent 0, #000 160px); } /* 舞台の左端で曲線が突然始まらないよう、やわらかく出す */
}
/* 1280〜1440: 特徴2の見出しが「ライフスタイルに/合った働き方」(1440と同じ折り方)になるよう、見出しの最小幅を確保 */
@media (min-width: 1280px) { .reasons .rs-card:nth-child(n+2) .rs-head h3 { max-width: max(74%, 246px) !important; } }
/* JS無効時: 電話番号は途中で折らない */
.reasons .rs-ns .rs-nw { white-space: nowrap; }

/* ===== 「働いているスタッフの声を、動画で。」(#interview。designer案S。_proposal/media-S-handoff.md): 「働いているスタッフの声を、動画で。」(動画+声を1つの節に)。接頭辞 .mv-*。分解は media-S-decomp.md =====
   色は「選ばれる理由」の変数(--rs-*)と同じ値を、この節の中で再宣言(青 #2F7BFF / #0B5AF5・紺 #03174D・灰 #4B5563)。新色は、フィルムの濃紺(--mv-film: 紺 #03174D を明るく混ぜた #0B2A5E)のみ=要確認。橙は使わない。 */
.mv { --rs-navy: #03174D; --rs-blue: #2F7BFF; --rs-blue-d: #0B5AF5; --rs-link: #1D5FD6; --rs-sub: #4B5563; --mv-film: #0B2A5E; --mv-film-hi: #123873; --mv-film-lo: #08204B; --mv-grad: linear-gradient(180deg, #4A93FF, #0B5AF5); --mv-script: "Allura", "Snell Roundhand", cursive;
  position: relative; overflow: hidden; margin: 0; font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; color: var(--rs-navy);
  background: linear-gradient(180deg, #EEF5FD 0%, #E8F1FC 100%); }
.mv *, .mv *::before, .mv *::after { box-sizing: border-box; }
.mv button { font: inherit; color: inherit; }
.mv-sec { position: relative; max-width: 1100px; margin: 0 auto; }

/* --- ヒーロー(動画プレーヤーが背景。見出しを重ねる) --- */
.mv-hero { position: relative; height: 372px; margin: 0 calc(50% - 50vw); }
.mv-player { position: absolute; inset: 0; overflow: hidden; background: #CFE2F7; }
.mv-player__bg { position: absolute; inset: 0; background: #CFE2F7; filter: saturate(1.4) contrast(1.1) brightness(.96); }
.mv-player__fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240,247,255,.97) 0, rgba(240,247,255,.9) 30%, rgba(240,247,255,0) 62%); }
.mv-player::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 90% at 72% 45%, rgba(25,60,130,.5), rgba(25,60,130,0) 78%); mix-blend-mode: multiply; pointer-events: none; }
.mv-hero__in { position: relative; z-index: 2; max-width: 1100px; height: 100%; margin: 0 auto; padding: 29px 0 0 85px; pointer-events: none; }
.mv-hero__in > * { pointer-events: auto; }
.mv-eyebrow { margin: 0; display: flex; align-items: center; gap: 16px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .3em; color: var(--rs-blue-d); }
.mv-eyebrow::after { content: ""; width: 50px; height: 1.5px; background: var(--rs-blue-d); opacity: .7; }
.mv-script { position: absolute; left: 420px; top: 4px; margin: 0; font-family: "Allura", "Snell Roundhand", cursive; font-style: normal; font-size: 54px; line-height: .92; letter-spacing: .01em; color: rgba(255,255,255,.96); text-shadow: 0 2px 12px rgba(30,70,150,.5); transform: rotate(-9deg); width: 150px; height: 100px; pointer-events: none; }
.mv-title { margin: 12px 0 0; font-size: 48px; line-height: 1.2; font-weight: 900; letter-spacing: .01em; color: var(--rs-navy); }
.mv-title__acc { display: inline; margin-top: 2px; font-size: 58px; line-height: 1.1; color: var(--rs-blue-d); }
.mv-lead--sp { display: none; }
.mv-lead { margin: 14px 0 0; max-width: 520px; font-size: 15px; line-height: 1.72; color: #1B2A4A; word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
/* 再生ボタン・キャッチ・ラベル・次の動画 */
.mv-play { position: absolute; z-index: 3; left: calc(50% - 550px + 698px); top: 233px; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #4A93FF, #0B5AF5); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 7px rgba(255,255,255,.35), 0 16px 32px -10px rgba(10,60,170,.65); }
.mv-play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.mv-play:disabled { cursor: not-allowed; background: linear-gradient(180deg, #8DB8FA, #5B8FE6); }
.mv-prep { position: absolute; z-index: 3; left: calc(50% - 550px + 698px); top: 233px; margin: 56px 0 0; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: rgba(3,23,77,.62); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mv-catch { position: absolute; z-index: 3; left: calc(50% - 550px + 560px); top: 108px; margin: 0; padding: 8px 20px 11px; border-radius: 16px; background: rgba(3,23,77,.58); color: #fff; transform: rotate(-14deg); transform-origin: left bottom;
  font-family: "Klee One", "Yu Kyokasho", "Hiragino Maru Gothic ProN", cursive; font-weight: 600; font-size: 29px; line-height: 1.32; text-shadow: 0 1px 6px rgba(0,0,0,.35); box-shadow: 0 10px 24px -14px rgba(3,23,77,.7); }
.mv-catch::after { content: ""; display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, #8DB8FA, rgba(141,184,250,0)); }
.mv-plabel { position: absolute; z-index: 3; left: calc(50% - 550px + 488px); top: 270px; margin: 0; padding: 3px 11px; border-radius: 999px; background: rgba(3,23,77,.58); color: #fff; font-size: 13.5px; font-weight: 700; }
.mv-count { display: none; margin: 0; }
.mv-mini { position: absolute; z-index: 3; left: calc(50% - 550px + 843px); top: 287px; width: 231px; height: 68px; padding: 7px 12px 7px 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(3,23,77,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; gap: 10px; text-align: left; cursor: default; color: #fff; }
.mv .mv-mini { color: #fff; }
.mv-mini__th { flex: 0 0 56px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, #9DB9DF, #5F85BE); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); }
.mv-mini__th svg { width: 26px; height: 26px; }
.mv-mini__t { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; font-weight: 700; line-height: 1.4; }
.mv-mini__a { flex: 0 0 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.mv-mini__a svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mv-video { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; object-fit: cover; background: #000; }
.mv-player.is-playing .mv-catch, .mv-player.is-playing .mv-play, .mv-player.is-playing .mv-prep, .mv-player.is-playing .mv-plabel, .mv-player.is-playing .mv-mini { display: none; }

/* --- カテゴリのチップ(すりガラスの帯) --- */
.mv-band { position: relative; z-index: 4; margin: 0 min(0px, calc(550px - 50vw)) 0 38px; height: 77px; padding: 10px 0 0 34px; border-radius: 30px 0 0 30px; background: rgba(255,255,255,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 18px 30px -24px rgba(40,100,220,.5); }
.mv-chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.mv-chips::-webkit-scrollbar { display: none; }
.mv-chip { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px 0 14px; border: 0; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 8px 18px -12px rgba(40,100,220,.45); cursor: pointer; white-space: nowrap; text-align: left; color: var(--rs-navy); }
.mv-chip__i { width: 30px; height: 30px; flex: 0 0 30px; color: var(--rs-blue-d); }
.mv-chip__t { display: flex; flex-direction: column; line-height: 1.2; }
.mv-chip__t b { font-size: 15px; font-weight: 700; }
.mv-chip__t i { font-style: normal; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #4B5563; }
.mv-chip[aria-pressed="true"] { background: linear-gradient(135deg, #3E86FF, #0B5AF5); color: #fff; box-shadow: 0 12px 22px -10px rgba(11,90,245,.7); }
.mv-chip[aria-pressed="true"] .mv-chip__i, .mv-chip[aria-pressed="true"] .mv-chip__t i { color: #fff; }

/* --- 動画カード(上=サムネ、下=声) --- */
.mv-listwrap { position: relative; margin: 7px 0 0; padding: 0 50px; }
.mv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 327px); gap: 15px; }
.mv-card { position: relative; display: flex; flex-direction: column; width: 327px; min-height: 302px; max-height: 302px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 22px 38px -26px rgba(30,80,170,.55), 0 0 0 1px rgba(255,255,255,.9) inset; }
.mv-card__sel { position: absolute; inset: 0; z-index: 4; border: 0; background: none; cursor: pointer; }
.mv-card__sel:focus-visible { outline: 3px solid var(--rs-blue-d); outline-offset: -3px; border-radius: 20px; }
.mv-card.is-cur { box-shadow: 0 0 0 2px var(--rs-blue), 0 22px 38px -26px rgba(30,80,170,.55); }
.mv-card__img { position: relative; flex: 0 0 178px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #A6C1E4, #5F85BE); background-size: cover; background-position: center; overflow: hidden; }
.mv-card__img:not(.has)::before { content: ""; position: absolute; inset: 0; background: 60% 40%/cover; opacity: .5; mix-blend-mode: soft-light; }
.mv-card__ic { position: absolute; left: 20px; top: 18px; width: 54px; height: 54px; color: rgba(255,255,255,.6); stroke-width: 1.5; }
.mv-card__catch { position: absolute; z-index: 2; right: 16px; top: 36px; margin: 0; padding: 5px 12px 7px; border-radius: 12px; background: rgba(3,23,77,.58); color: #fff; transform: rotate(-12deg); text-align: left; font-family: "Klee One", cursive; font-weight: 600; font-size: 18px; line-height: 1.3; }
.mv-cplay { position: absolute; z-index: 2; left: 50%; top: 80%; margin: -27px 0 0 -27px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(180deg, #4A93FF, #0B5AF5); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px rgba(255,255,255,.4), 0 10px 20px -8px rgba(10,60,170,.7); }
.mv-cplay svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.mv-cplay.is-off { background: linear-gradient(180deg, #A3C4F7, #7FA8EC); }
.mv-dur { position: absolute; z-index: 2; right: 12px; bottom: 10px; padding: 1px 9px; border-radius: 7px; background: rgba(3,23,77,.75); color: #fff; font-size: 13px; font-weight: 700; }
.mv-pill { position: absolute; z-index: 2; left: 12px; bottom: 10px; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,.92); color: #3F4A5F; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; }
.mv-card__b { padding: 8px 16px 6px 50px; position: relative; }
.mv-role { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--rs-link); letter-spacing: .02em; }
.mv-q { position: relative; margin: 3px 0 0; font-size: 17px; line-height: 1.4; font-weight: 800; color: var(--rs-navy); word-break: auto-phrase; line-break: strict; }
.mv-q em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--rs-sub); }
.mv-q__m { position: absolute; left: -30px; top: -6px; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1; color: #6FA3F5; font-weight: 700; }
.mv-tags { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mv-tags li { padding: 3px 14px; border-radius: 999px; background: #E6F0FE; font-size: 12.5px; font-weight: 700; color: var(--rs-link); }
.mv-arrow { position: absolute; z-index: 5; top: 98px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 20px -8px rgba(47,123,255,.5); }
.mv-arrow--prev { left: 25px; } .mv-arrow--next { right: 25px; }
.mv-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--rs-blue-d); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mv-arrow[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: none; }
.mv-listwrap.has-arrows .mv-arrow { display: flex; }
.mv-listwrap.is-one .mv-cards { grid-template-columns: 327px; }
.mv-listwrap.is-few .mv-cards { justify-content: center; grid-template-columns: repeat(2, 327px); }
.mv-listwrap.is-few.is-one .mv-cards { grid-template-columns: 327px; }
.mv-note { margin: 2px 50px 0; font-size: 12px; line-height: 1.2; color: var(--rs-sub); }
.mv-cta { display: none; }

/* --- フィルムストリップ(4本以上のとき) --- */
.mv-film { position: relative; height: 139px; margin: 0 calc(50% - 50vw) 0; background: linear-gradient(180deg, var(--mv-film-hi), var(--mv-film) 40%, var(--mv-film-lo)); overflow: hidden; }
.mv-film::before, .mv-film::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, rgba(226,238,255,.7) 0 12px, transparent 12px 24px); -webkit-mask: linear-gradient(#000, #000); border-radius: 2px; opacity: .7; }
.mv-film::before { top: 6px; } .mv-film::after { bottom: 7px; }
.mv-film__holes { display: none; }
.mv-film__ths { position: absolute; left: 50%; top: 21px; margin: 0 0 0 -550px; padding: 0 0 0 27px; width: 960px; overflow: hidden; list-style: none; display: flex; gap: 10px; }
.mv-fth { display: block; width: 131px; padding: 0; border: 0; background: none; cursor: pointer; }
.mv-fth__img { display: flex; align-items: center; justify-content: center; width: 131px; height: 82px; border-radius: 4px; background: linear-gradient(135deg, #7E9FCB, #3F6AA6); position: relative; overflow: hidden; background-size: cover; background-position: center; border: 2px solid rgba(255,255,255,.2); }
.mv-fth__img:not(.has)::before { content: ""; position: absolute; inset: 0; background: center/cover; opacity: .45; mix-blend-mode: soft-light; }
.mv-fth__ic { position: relative; width: 32px; height: 32px; color: rgba(255,255,255,.8); }
.mv-fth[aria-current="true"] .mv-fth__img { border-color: #fff; box-shadow: 0 0 0 2px var(--rs-blue); }
.mv-fth:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mv-film__title { position: absolute; left: 50%; top: 84px; margin: 0 0 0 -180px; font-family: "Allura", "Snell Roundhand", cursive; font-style: normal; font-size: 44px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); transform: rotate(-3deg); pointer-events: none; }
.mv-viewall { position: absolute; left: 50%; top: 15px; margin-left: 427px; width: 163px; height: 106px; border-radius: 26px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
.mv-viewall i { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #4A93FF, #0B5AF5); display: flex; align-items: center; justify-content: center; margin-bottom: 7px; }
.mv-viewall i svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
.mv-viewall b { font-size: 13px; font-weight: 700; } .mv-viewall span { font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.85); }

.mv.is-in .mv-player__bg { background-image: url('../img/reasons/hero.webp'); background-position: 70% 38%; background-size: cover; }
.mv.is-in .mv-card__img:not(.has)::before, .mv.is-in .mv-fth__img:not(.has)::before { background-image: url('../img/reasons/hero.webp'); }
/* VIEW ALL が未設定の間は薄く */
.mv-viewall.is-off { opacity: .9; cursor: not-allowed; }

/* --- SP・中間(〜1099px): 見出し→大きな動画→チップ→声の縦リスト→青いボタン --- */
@media (max-width: 1099px) {
  .mv-sec { max-width: 720px; padding: 0 16px 28px; }
  .mv-hero { height: auto; margin: 0; padding-top: 22px; display: flex; flex-direction: column; }
  .mv-hero__in { order: 1; padding: 0 6px; height: auto; max-width: none; margin: 0; width: 100%; }
  .mv-script { display: none; }
  .mv-eyebrow { font-size: 12.5px; gap: 12px; letter-spacing: .24em; } .mv-eyebrow::after { width: 40px; }
  .mv-title { font-size: clamp(30px, 8.4vw, 40px); margin-top: 8px; line-height: 1.16; }
  .mv-title__acc { font-size: clamp(34px, 9.4vw, 44px); margin-top: 0; }
  .mv-lead--pc { display: none; } .mv-lead--sp { display: block; }
  .mv-lead { max-width: 340px; margin-top: 10px; font-size: 14px; line-height: 1.55; }
  .mv-player { position: relative; inset: auto; order: 2; margin-top: 14px; width: 100%; aspect-ratio: 357 / 201; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 18px 34px -22px rgba(30,80,170,.55); }
  .mv-player__fade { background: linear-gradient(180deg, rgba(3,23,77,0) 45%, rgba(3,23,77,.5)); }
  .mv-play { left: 60%; top: 62%; width: 60px; height: 60px; margin: -30px 0 0 -30px; box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 12px 24px -8px rgba(10,60,170,.65); } .mv-play svg { width: 26px; height: 26px; }
  .mv-prep { left: auto; right: 12px; top: 12px; margin: 0; transform: none; font-size: 12px; }
  .mv-catch { left: 14px; top: 20%; font-size: 18px; padding: 6px 12px 8px; border-radius: 12px; }
  .mv-plabel { left: 14px; top: auto; bottom: 14px; font-size: 13.5px; background: none; padding: 0; text-shadow: 0 1px 8px rgba(3,23,77,.7); }
  .mv-count { display: block; position: absolute; z-index: 3; right: 16px; bottom: 14px; font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(3,23,77,.7); font-family: "Plus Jakarta Sans", sans-serif; } .mv-count i { font-style: normal; font-weight: 600; opacity: .85; }
  .mv-mini { display: none; }
  .mv-band { margin: 14px 0 0; height: auto; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
  .mv-chips { gap: 8px; }
  .mv-chips li { flex: 1 0 76px; } .mv-chip { width: 100%; flex-direction: column; justify-content: center; gap: 4px; height: 66px; padding: 0 6px; border-radius: 14px; text-align: center; }
  .mv-chip__i { width: 24px; height: 24px; flex-basis: 24px; } .mv-chip__t { align-items: center; } .mv-chip__t b { font-size: 12.5px; } .mv-chip__t i { display: none; }
  .mv-listwrap { margin-top: 14px; padding: 0; }
  .mv-arrow { display: none !important; }
  .mv-cards, .mv-listwrap.is-one .mv-cards, .mv-listwrap.is-few .mv-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mv-card.is-cur { box-shadow: 0 0 0 1.5px rgba(47,123,255,.55), 0 22px 38px -26px rgba(30,80,170,.4); }
  .mv-card { width: 100%; min-height: 0; max-height: none; flex-direction: row; border-radius: 16px; padding: 7px; gap: 12px; align-items: stretch; }
  .mv-card__img { flex: 0 0 127px; min-height: 96px; border-radius: 11px; }
  .mv-card__ic { width: 28px; height: 28px; left: 8px; top: 8px; }
  .mv-card__catch { display: none; }
  .mv-cplay { position: relative; left: auto; top: auto; margin: -22px 0 0; width: 38px; height: 38px; box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 6px 14px -6px rgba(10,60,170,.7); } .mv-cplay svg { width: 16px; height: 16px; }
  .mv-pill { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: 6px; font-size: 12px; padding: 2px 8px; white-space: nowrap; } .mv-pill br { display: none; }
  .mv-card__img .mv-cplay { margin-top: -22px; }
  .mv-dur { right: 6px; bottom: 6px; font-size: 12px; padding: 0 6px; }
  .mv-card__b { padding: 3px 4px 4px 4px; flex: 1 1 auto; min-width: 0; }
  .mv-q { font-size: 15px; margin-top: 4px; } .mv-q__m { display: none; }
  .mv-tags { margin-top: 7px; gap: 6px; } .mv-tags li { padding: 2px 10px; font-size: 12px; }
  .mv-note { margin: 12px 4px 0; }
  .mv-cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; margin: 18px 0 0; border-radius: 999px; background: linear-gradient(90deg, #2F7BFF, #0B5AF5); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 16px 28px -14px rgba(11,90,245,.7); }
  .mv-cta svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .mv-cta.is-off { opacity: .7; }
  .mv-film { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mv * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ===== 動画+声の節 QA(NG#27): 動作・実装 + designer指定(_proposal/media-S-qafix-spec.md。2026-10-05) ===== */
/* 1100〜1280px: 「すべての動画を見る」の箱が右端で切れないよう、枠の右端から内側に収める(1440以上は従来どおり=中央+427px)。サムネの列も箱の手前まで */
.mv-viewall { left: min(calc(50% + 427px), calc(100% - 175px)); margin-left: 0; }
.mv-film__ths { width: min(960px, calc(50% + 363px)); }
/* NG6 Webフォントの削減: 本文はサイト共通のフォント、見出しは共通の表示用フォント、Plus Jakarta Sans は 800 のみ */
.mv { font-family: var(--font-body); }
.mv-title { font-family: var(--font-display); }
.mv-q { font-weight: 700; }
.mv-eyebrow, .mv-chip__t i, .mv-viewall span { font-weight: 800; }
/* NG3 カード: 高さは可変(最も高い1枚にそろう)。声は3行で止める。タグは3つまで(JS)・折り返し可 */
.mv-card { min-height: 302px; max-height: none; }
.mv-q__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mv-q, .mv-role, .mv-note, .mv-chip, .mv-tags li { word-break: auto-phrase; line-break: strict; }
.mv-more { display: none; }
.mv-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1100px) {
  .mv-plabel { top: 342px; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 「動画は準備中です」のピルに接しない */
  .mv-hero + .mv-listwrap { margin-top: 24px; }                                                           /* チップが無いとき、動画枠の下端に接しない */
  .mv-arrow--prev[aria-disabled="true"] { visibility: hidden; }                                           /* 1ページ目は「前へ」を隠す(カード1のピルに重ならない) */
  .mv-count { display: block; position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* PCは読み上げ用(見えない) */
}
/* NG2 SP・中間(〜1099px): 声は「もっと見る」で3件ずつ、チップは右端のフェードと次の一部で「まだある」と分かる */
@media (max-width: 1099px) {
  .mv-chips { gap: 8px; padding: 0 16px 2px 0; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .mv-chips.is-fit { -webkit-mask-image: none; mask-image: none; }
  .mv-chips li { flex: 0 0 78px; } .mv-chip { width: 100%; }
  .mv-listwrap.is-few.is-one .mv-cards, .mv-listwrap.is-few .mv-cards { grid-template-columns: minmax(0, 1fr); }
  .mv-more:not([hidden]) { display: block; width: 100%; height: 44px; margin: 12px 0 0; border: 1.8px solid #2F7BFF; border-radius: 999px; background: #fff; color: #1D5FD6; font-size: 15px; font-weight: 800; cursor: pointer; }
  .mv-more:active { background: #EAF2FF; }
  .mv-plabel { background: rgba(3,23,77,.72); padding: 3px 11px; border-radius: 999px; text-shadow: none; white-space: nowrap; max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; }  /* 白文字のコントラストを確保(約7:1) */
}
/* 軽微: 面の濃さ・選択中チップ・無効表示・フォーカス枠 */
.mv-catch, .mv-card__catch { background: rgba(3,23,77,.66); }
.mv-prep { background: rgba(3,23,77,.72); }
.mv-chip[aria-pressed="true"] { background: linear-gradient(135deg, #2C6EF0, #0B5AF5); }
.mv-viewall.is-off, .mv-cta.is-off, .mv-mini[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: none; pointer-events: none; } /* 押しても何も起きないもの(href/src が入ると自動で解除) */
.mv :is(button, a):focus-visible { outline: 3px solid #0B5AF5; outline-offset: 3px; border-radius: inherit; }
.mv-film :is(button, a):focus-visible { outline-color: #fff; }
.mv .mv-card__sel:focus-visible { outline-offset: -3px; }
/* #interview へのアンカー着地: ラベル「STAFF VOICE」がヘッダーの下に隠れない */
#interview { scroll-margin-top: 72px; }

/* ===== トップの大枠(designer案S。_proposal/top-frame-handoff.md): (1) よくある質問 .faq-* (2) メニュー .menu-* (3) 運営会社の帯 .co-band =====
   色は「選ばれる理由」「動画+声」と同じ値(紺 #03174D・青 #2F7BFF/#0B5AF5・リンク #1D5FD6・灰 #4B5563)。新色なし。橙は使わない(ヘッダーの既存CTA・斜線ラベルのみ)。 */
.faq, .menu-panel { --t-navy: #03174D; --t-blue: #2F7BFF; --t-blue-d: #0B5AF5; --t-link: #1D5FD6; --t-sub: #4B5563; --t-line: #DCE7F6; font-family: var(--font-body); color: var(--t-navy); }
.faq *, .menu-panel * { box-sizing: border-box; }
:is(.faq, .menu-panel, .global-nav) :is(.is-off, [aria-disabled="true"]) { opacity: .35; cursor: default; box-shadow: none; pointer-events: none; }
.menu-link:focus-visible { outline-offset: -3px !important; }
.faq :is(button, a):focus-visible, .menu-panel :is(button, a):focus-visible { outline: 3px solid var(--t-blue-d); outline-offset: 3px; border-radius: 12px; }

/* ---------- (1) よくある質問: 静かな節(白い角丸の面+青の細いアクセント) ---------- */
.faq { max-width: none; padding: 64px 20px 72px; background: linear-gradient(180deg, #F3F8FE, #EEF5FD); }
.faq-sec { max-width: 880px; margin: 0 auto; padding: 40px 44px 34px; border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 40px -32px rgba(40,100,220,.45), 0 0 0 1px #E6EEF9; }
.faq-eyebrow { margin: 0; display: flex; align-items: center; gap: 14px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .3em; color: var(--t-blue-d); }
.faq-eyebrow::after { content: ""; width: 40px; height: 1.5px; background: var(--t-blue-d); opacity: .6; }
.faq-title { margin: 10px 0 0; font-family: var(--font-display); font-size: 34px; line-height: 1.25; font-weight: 900; letter-spacing: .01em; color: var(--t-navy); }
.faq-lead { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var(--t-sub); }
.faq-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--t-line); }
.faq-item { border-bottom: 1px solid var(--t-line); }
.faq-q { margin: 0; font-size: inherit; }
.faq-btn { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 12px 6px; border: 0; background: none; text-align: left; font: inherit; color: var(--t-navy); cursor: pointer; }
.faq-badge { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg, #4A93FF, #0B5AF5); color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.faq-badge--a { background: #E6F0FE; color: var(--t-link); }
.faq-qt { flex: 1; font-size: 17px; font-weight: 700; line-height: 1.5; word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.faq-chev { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #EEF5FF; transition: transform .22s ease, background .22s ease; }
.faq-chev svg { width: 16px; height: 16px; fill: none; stroke: var(--t-blue-d); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-btn:hover .faq-chev { background: #DCEAFF; }
.faq-item.is-open .faq-chev { transform: rotate(180deg); background: var(--t-blue-d); }
.faq-item.is-open .faq-chev svg { stroke: #fff; }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.faq-panel__in { overflow: hidden; min-height: 0; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-a { display: flex; gap: 14px; padding: 2px 6px 20px; }
.faq-a p { margin: 0; font-size: 15px; line-height: 1.85; color: #1B2A4A; word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.faq-a .faq-badge { margin-top: 1px; }
.faq-tent { font-style: normal; font-weight: 700; color: var(--t-sub); }
.faq-note { margin-top: 4px !important; font-size: 12.5px !important; line-height: 1.6 !important; color: var(--t-sub) !important; }
.faq-foot { margin-top: 24px; display: flex; justify-content: center; }
.faq-all { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; min-width: 244px; padding: 0 26px; border-radius: 999px; border: 1.8px solid var(--t-blue); background: #fff; color: var(--t-link); font-size: 15.5px; font-weight: 700; text-decoration: none; }
.faq-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.faq-ns { line-height: 1.9; }
.nb { white-space: nowrap; }
/* JS無効時: ハンバーガー(動かない)の代わりに、リンク一覧をヘッダー下に出す */
.ns-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; background: #F6FAFF; font-size: 14px; font-weight: 700; }
@media (min-width: 960px) { .ns-nav { display: none; } }
@media (max-width: 768px) {
  .faq { padding: 44px 14px 52px; }
  .faq-sec { padding: 28px 18px 24px; border-radius: 22px; }
  .faq-title { font-size: 28px; }
  .faq-qt { font-size: 16px; }
  .faq-all { width: 100%; min-width: 0; }
}

/* ---------- (2) ヘッダーのナビ(PC=既存を維持。整理のみ)+ SPの全画面メニュー ---------- */
@media (max-width: 959px) {
  .global-nav { display: none !important; }
  .nav-toggle { width: 44px; height: 44px; padding: 13px 9px; margin: -8px -8px -8px 0; box-sizing: border-box; }
  .nav-toggle span { transition: transform .22s ease, opacity .18s ease; }
  html.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  html.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  html.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
html.menu-open { overflow: hidden; }
.menu-panel { position: fixed; z-index: 99; left: 0; right: 0; bottom: 0; top: 67px; overflow-y: auto; overscroll-behavior: contain; display: none; background: linear-gradient(180deg, #F6FAFF, #EAF2FD); opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }
.menu-panel:not([hidden]) { display: block; }
.menu-panel.is-open { opacity: 1; transform: none; }
.menu-in { max-width: 560px; margin: 0 auto; padding: 22px 20px 0; }
.menu-group + .menu-group { margin-top: 24px; }
.menu-en { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .28em; color: var(--t-blue-d); }
.menu-h { margin: 2px 0 0; font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--t-navy); }
.menu-list { list-style: none; margin: 10px 0 0; padding: 0; border-radius: 18px; background: #fff; box-shadow: 0 14px 28px -22px rgba(40,100,220,.5), 0 0 0 1px #E6EEF9; overflow: hidden; }
.menu-list li + li { border-top: 1px solid #E8F0FB; }
.menu-link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; font-size: 16.5px; font-weight: 700; color: var(--t-navy); text-decoration: none; }
.menu-link svg { width: 18px; height: 18px; fill: none; stroke: var(--t-blue-d); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.menu-link:active { background: #EEF5FF; }
.menu-cta { margin: 28px -20px 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(234,242,253,0), #EAF2FD 26px); } /* 縦に収まらないときは項目だけスクロールし、LINE・電話は下に固定 */
.menu-line { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 16.5px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 24px -14px rgba(234,91,47,.7); }
.menu-tel { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 999px; border: 1.8px solid var(--t-blue); background: #fff; color: var(--t-link); font-size: 15.5px; font-weight: 700; text-decoration: none; }
@media (min-width: 960px) { .menu-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .menu-panel, .nav-toggle span, .faq-panel, .faq-chev { transition: none !important; } }

#faq { scroll-margin-top: 72px; }
/* ---------- (3) 運営会社の短い帯(フッターの手前。目立たせない) ---------- */

/* ===== トップの残り3節(designer案S。_proposal/top-rest-handoff.md): 診断の入口 .tr-diag / ご応募・お問い合わせ .tr-contact / 運営会社の帯 .tr-co ===== */
/* ===== 提案S: トップの残り3節。接頭辞 .tr-*(本体の .diagnosis / .apply / .co-band と置き換え)。分解は top-rest-decomp.md =====
   色は既存トークン+「選ばれる理由」系の変数と同値(紺 #03174D・青 #2F7BFF/#0B5AF5・灰 #4B5563・橙=既存 --color-accent)。
   新色(別提案): LINEの緑 #06C755 / 淡い緑 #E9F8EF(LINEのカードとボタンだけ)。「60秒」の橙の文字は参考どおり(CTAと斜線以外の橙の使用=要確認)。 */
.tr { --t-navy: #03174D; --t-blue: #2F7BFF; --t-blue-d: #0B5AF5; --t-sub: #4B5563; --t-o: var(--color-accent, #EA5B2F); --t-o2: #FF7A2F; --t-g: #06C755; --t-g-d: #07793A; --t-gbg: #EAF8F0;
  position: relative; overflow: hidden; font-family: var(--font-body); color: var(--t-navy); background: linear-gradient(180deg, #F2F8FE 0%, #EAF3FD 60%, #E6F0FC 100%); }
.tr *, .tr *::before, .tr *::after { box-sizing: border-box; }
.tr h2, .tr h3, .tr p, .tr ul { margin: 0; padding: 0; }
.tr ul { list-style: none; }
.tr-wrap { position: relative; }
.tr-in { position: relative; width: 1100px; margin: 0 auto; }
.tr :is(a,button):focus-visible { outline: 3px solid var(--t-blue-d); outline-offset: 3px; border-radius: 12px; }
.tr .is-off, .tr [aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; box-shadow: none; }
.tr svg { display: block; }

/* 写真の枠(src が空=人物・建物を写さないやわらかい面) */
.tr-ph { background-size: cover; background-position: center; }
.tr-ph--empty { position: relative; overflow: hidden; background: linear-gradient(160deg, #C9DDF6 0%, #9FBEE8 55%, #7FA3D6 100%); }
.tr-ph--empty::before { content: ""; position: absolute; inset: 0; background: url('../img/reasons/hero.webp') 55% 45%/cover; opacity: .38; mix-blend-mode: soft-light; filter: blur(1.5px); }
.tr-ph--empty::after { content: ""; position: absolute; left: 50%; bottom: -6%; width: 70%; height: 78%; transform: translateX(-50%); background: radial-gradient(circle at 50% 24%, rgba(255,255,255,.55) 0 17%, transparent 17.5%), radial-gradient(ellipse 52% 44% at 50% 100%, rgba(255,255,255,.5) 0 99%, transparent 100%); opacity: .75; }
.tr-ph__t { position: absolute; z-index: 2; left: 50%; top: 10px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #3F4A5F; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- 診断の入口 ---------- */
.tr-diag { position: relative; height: 436px; }
.tr-diag__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 70% at 62% 40%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%), radial-gradient(circle at 4% 70%, rgba(190,235,205,.7) 0 5%, transparent 5.2%), radial-gradient(circle at 3% 42%, rgba(255,214,176,.8) 0 2.2%, transparent 2.4%), radial-gradient(ellipse 30% 60% at 0% 60%, rgba(205,228,250,.9), transparent 70%); }
.tr-diag__in { height: 100%; }
.tr-eyebrow { display: flex; align-items: center; gap: 12px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .26em; color: var(--t-blue-d); }
.tr-eyebrow--o { color: var(--t-o); letter-spacing: .2em; }
.tr-slash { width: 12px; height: 18px; fill: none; stroke: var(--t-o); stroke-width: 1.8; stroke-linecap: round; }
.tr-diag__copy { position: absolute; z-index: 3; left: 58px; top: 38px; width: 520px; }
.tr-h { margin-top: 12px; font-family: var(--font-display); font-weight: 900; letter-spacing: .01em; line-height: 1.12; }
.tr-h span { display: block; }
.tr-h1 { font-size: 38px; color: var(--t-navy); } .tr-h1 .tr-o { color: var(--t-o); font-size: 46px; font-family: "Plus Jakarta Sans", var(--font-display); font-weight: 800; }
.tr-h2 { margin-top: 4px; font-size: 43px; color: var(--t-navy); }
.tr-h3 { margin-top: 4px; font-size: 56px; color: var(--t-blue-d); line-height: 1.1; }
.tr-lead { margin-top: 14px; max-width: 360px; font-size: 15px; line-height: 1.7; color: #1B2A4A; word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.tr-chips { display: flex; gap: 10px; margin-top: 14px; }
.tr-chip { display: flex; align-items: center; gap: 9px; height: 58px; padding: 0 14px 0 10px; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 8px 18px -12px rgba(40,100,220,.45), 0 0 0 1px rgba(255,255,255,.9) inset; font-size: 12.5px; font-weight: 800; line-height: 1.3; color: var(--t-navy); }
.tr-chip__i { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #E8F1FF; color: var(--t-blue-d); }
.tr-chip__i svg { width: 22px; height: 22px; }
.tr-btn-o { display: flex; align-items: center; justify-content: center; gap: 14px; width: 470px; height: 55px; margin-top: 14px; border-radius: 999px; background: linear-gradient(90deg, #CF4517, #BF3B10); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 16px 26px -14px rgba(234,91,47,.75); border: 0; padding: 0; }
.tr-btn-o svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-diag__vis { position: absolute; inset: 0; pointer-events: none; }
.tr-main { position: absolute; left: 432px; top: 8px; width: 414px; height: 430px; border-radius: 46% 40% 0 0 / 22% 22% 0 0; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.tr-main--sp { display: none; }
.tr-script { position: absolute; left: 440px; top: 92px; font-family: "Klee One", var(--font-body); font-weight: 600; font-size: 31px; line-height: 1.32; color: var(--t-navy); transform: rotate(-18deg); transform-origin: left bottom; text-shadow: 0 0 10px rgba(255,255,255,.8); }
.tr-script2 { z-index: 3; position: absolute; left: 735px; top: 285px; font-family: "Allura", cursive; font-size: 40px; color: #fff; transform: rotate(-24deg); text-shadow: 0 2px 10px rgba(20,60,140,.55); white-space: nowrap; }
.tr-tile { position: absolute; border-radius: 22px; border: 3px solid #fff; background: #fff; box-shadow: 0 18px 30px -18px rgba(20,60,140,.5); }
.tr-tile__img { position: absolute; inset: 0; border-radius: 19px; }
.tr-tile--1 { left: 790px; top: 12px; width: 284px; height: 160px; transform: rotate(-4deg); }
.tr-tile--2 { left: 834px; top: 140px; width: 262px; height: 164px; transform: rotate(3deg); }
.tr-tile--3 { left: 834px; top: 312px; width: 224px; height: 120px; transform: rotate(-3deg); }
.tr-tile--1 .tr-tag { right: auto; left: 10px; bottom: 40px; max-width: none; white-space: nowrap; } /* 1枚目は2枚目の写真と重ならない左上寄りに1行で(2026-10-05 QA) */
.tr-tag { position: absolute; z-index: 2; right: 8px; bottom: 10px; max-width: 82%; padding: 5px 12px 6px; border-radius: 12px; background: rgba(3,23,77,.72); color: #fff; font-family: "Klee One", var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.3; transform: rotate(-6deg); }

/* ---------- ご応募・お問い合わせ ---------- */
.tr-contact { position: relative; height: 362px; }
.tr-contact__in { height: 100%; }
.tr-contact .tr-eyebrow { position: absolute; left: 14px; top: 8px; }
.tr-ch { position: absolute; left: 14px; top: 28px; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.2; letter-spacing: .01em; color: var(--t-navy); }
.tr-clead { position: absolute; left: 14px; top: 84px; font-size: 13.5px; line-height: 1.6; color: #1B2A4A; }
.tr-script3 { position: absolute; left: 850px; top: 28px; font-family: "Klee One", var(--font-body); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--t-navy); transform: rotate(-14deg); }
.tr-cards { position: absolute; inset: 0; }
.tr-line { position: absolute; left: 40px; top: 122px; width: 548px; height: 232px; border-radius: 26px; background: linear-gradient(135deg, #F1FBF5, var(--t-gbg)); box-shadow: 0 0 0 1px #D4EFDF, 0 20px 34px -26px rgba(5,140,70,.5); }
.tr-phone { position: absolute; left: 14px; top: 20px; width: 150px; height: 190px; overflow: hidden; border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 0 0 5px #243349, 0 12px 20px -10px rgba(20,40,80,.5); transform: rotate(-6deg); transform-origin: bottom center; background-image: linear-gradient(180deg, #C9E8D5, #E6F5EC); }
.tr-phone__n { position: absolute; left: 50%; top: 4px; width: 40px; height: 8px; margin-left: -20px; border-radius: 6px; background: #243349; }
.tr-bub { position: absolute; padding: 6px 9px; border-radius: 10px; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: #1B2A4A; }
.tr-bub--1 { left: 12px; top: 40px; background: #fff; } .tr-bub--2 { right: 8px; top: 92px; background: #8DE0A7; }
.tr-mascot { position: absolute; z-index: 2; left: 6px; bottom: 12px; width: 100px; height: auto; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(5,140,70,.25)); } /* ゼロ君(.tr-line の直下の子)。designer 改訂2 */
.tr-line__b { position: absolute; left: 176px; top: 16px; right: 18px; }
.tr-line__t { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; color: var(--t-g-d); font-family: var(--font-display); white-space: nowrap; }
.tr-line__logo { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--t-g); color: #fff; font-style: normal; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.tr-badge { font-style: normal; padding: 3px 12px; border-radius: 999px; background: var(--t-g-d); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 800; }
.tr-line__row { margin-top: 8px; }
.tr-checks li { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: #1B2A4A; }
.tr-checks svg { width: 18px; height: 18px; color: var(--t-g); flex: 0 0 18px; }
.tr-btn-g { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 330px; height: 46px; margin-top: 6px; border-radius: 999px; background: linear-gradient(90deg, #09873C, #07793A); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 22px -14px rgba(5,140,70,.8); }
.tr-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--t-sub); } /* 旧版と同じ文言の注記(AI利用の開示) */
.tr-btn-g svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-tel { position: absolute; left: 611px; top: 114px; width: 484px; height: 240px; border-radius: 26px; background: rgba(255,255,255,.88); box-shadow: 0 0 0 1px #E3ECF8, 0 20px 34px -26px rgba(40,100,220,.45); overflow: hidden; }
.tr-tel__b { position: absolute; left: 38px; top: 28px; }
.tr-tel__t { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 900; font-family: var(--font-display); color: var(--t-navy); }
.tr-tel__ic { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(180deg, #4A93FF, #0B5AF5); display: flex; align-items: center; justify-content: center; } .tr-tel__ic svg { width: 22px; height: 22px; }
.tr-tel__n { margin-top: 12px; font-family: "Plus Jakarta Sans", var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: .01em; line-height: 1.1; white-space: nowrap; } .tr-tel__n a { color: var(--t-navy); text-decoration: none; }
.tr-tel__h { margin-top: 6px; font-size: 14px; color: #1B2A4A; }
.tr-btn-b { display: flex; align-items: center; justify-content: center; gap: 10px; width: 262px; height: 48px; margin-top: 12px; border-radius: 999px; border: 1.8px solid var(--t-blue); background: #fff; color: var(--t-blue-d); font-size: 16px; font-weight: 800; text-decoration: none; }
.tr-btn-b svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
@media (min-width: 1100px) and (max-width: 1180px) { .tr-tel { width: min(484px, calc(100vw - 634px)); } } /* 実ブラウザのスクロールバー(約17px)込みでも右端が切れない */
.tr-tel__ph { position: absolute; right: 0; bottom: 0; width: 150px; height: 190px; border-radius: 80px 80px 0 0; }

 



 




  


 

/* ---------- SP・中間(〜1099px): 縦積み ---------- */
@media (max-width: 1099px) {
  .tr-in { width: auto; max-width: 560px; padding: 0 16px; }
  .tr-diag { height: auto; padding: 30px 0 34px; }
  .tr-diag__in { display: flex; flex-direction: column; height: auto; }
  .tr-diag__copy { position: static; width: auto; }
  .tr-diag__vis { position: absolute; inset: 0 0 auto 0; height: 0; }
  .tr-main--sp { display: block; left: auto; right: 0; top: 0; width: 168px; height: 172px; border-radius: 0 0 0 46px; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
  .tr-script, .tr-script2, .tr-main--pc, .tr-tile--2, .tr-tile--3 { display: none; }
  .tr-tile--1 { display: none; }
  .tr-eyebrow--o { font-size: 10px; gap: 8px; letter-spacing: .14em; }
  .tr-h { line-height: 1.2; }
  .tr-h1 { font-size: 23px; } .tr-h1 .tr-o { font-size: 28px; }
  .tr-h2 { font-size: 24px; } .tr-h3 { font-size: 33px; }
  .tr-lead { max-width: 250px; font-size: 13px; line-height: 1.65; margin-top: 12px; }
  .tr-chips { margin-top: 40px; gap: 8px; }
  .tr-chip { flex: 1 1 0; flex-direction: column; justify-content: center; text-align: center; gap: 6px; height: 88px; padding: 6px; font-size: 11.5px; }
  .tr-btn-o { width: 100%; margin-top: 14px; font-size: 16px; }
  .tr-contact { height: auto; padding: 8px 0 16px; }
  .tr-contact__in { height: auto; }
  .tr-contact .tr-eyebrow, .tr-ch, .tr-clead, .tr-cards, .tr-line, .tr-tel, .tr-script3 { position: static; }
  .tr-ch { margin-top: 6px; font-size: 28px; } .tr-clead { margin-top: 8px; font-size: 12.5px; }
  .tr-script3 { display: none; }
  .tr-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
  .tr-line { width: auto; height: auto; padding: 16px 14px 16px; }
  .tr-phone { display: none; }
  .tr-line__b { position: static; }
  .tr-line__t { font-size: 17px; gap: 8px; flex-wrap: wrap; }
  .tr-line__logo { flex-basis: 32px; height: 32px; }
  .tr-line__row { margin-top: 10px; }
  .tr-checks li { font-size: 12.5px; }
  .tr-btn-g { max-width: none; margin-top: 10px; }
  .tr-tel { width: auto; height: auto; min-height: 188px; padding: 18px 14px; }
  .tr-tel__b { position: static; }
  .tr-tel__t { font-size: 16px; } .tr-tel__ic { width: 36px; height: 36px; }
  .tr-tel__n { font-size: 25px; margin-top: 8px; } .tr-tel__h { font-size: 12.5px; }
  .tr-btn-b { width: 100%; max-width: 250px; }
  .tr-tel__ph { width: 110px; height: 130px; border-radius: 50px 50px 0 0; }
  
  
  
    
  
     
  
}
@media (max-width: 389px) { .tr-main--sp { width: 128px; height: 140px; } .tr-lead { max-width: 230px; } .tr-h2 { font-size: 22px; } .tr-h1 { font-size: 21px; } .tr-h1 .tr-o { font-size: 26px; } .tr-h3 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .tr * { transition: none !important; animation: none !important; } }

/* ===== top-rest 改善(designer仕様 _proposal/top-rest-sp-spec.md、2026-10-06): 余白バグ(.tr p/h2/ul の margin:0 が後ろの規則に勝っていた)の回復、PC診断舞台466px、中間幅、LINEカード再設計(QR枠は社長判断で削除)、最小文字サイズ ===== */
/* SP・中間(〜1099px) */
@media (max-width: 1099px) {
  .tr .tr-lead { margin-top: 14px; max-width: 206px; font-size: 13px; line-height: 1.75; }
  .tr .tr-chips { margin-top: 24px; gap: 8px; }
  .tr .tr-ch { margin-top: 8px; }
  .tr .tr-clead { margin-top: 10px; font-size: 13px; line-height: 1.75; }
  .tr .tr-note { margin-top: 12px; font-size: 12px; line-height: 1.65; }
  .tr .tr-tel__n { margin-top: 4px; } .tr .tr-tel__h { margin-top: 2px; font-size: 13px; }
  .tr .tr-tel__n a { display: inline-block; padding: 6px 0; line-height: 32px; }
  .tr .tr-tel { position: relative; left: auto; top: auto; }
  
  .tr .tr-eyebrow--o { font-size: 11px; }
  .tr .tr-chip { height: auto; min-height: 92px; padding: 12px 8px; gap: 8px; font-size: 12px; line-height: 1.4; }
  .tr .tr-diag { padding: 32px 0 36px; }
  .tr .tr-btn-o { font-size: 19px; }
  .tr .tr-contact { padding: 16px 0 20px; }
  .tr .tr-cards { gap: 16px; margin-top: 18px; }
  .tr .tr-line { padding: 20px 16px 20px; }
  .tr .tr-line__row { display: block; margin-top: 14px; }
  .tr .tr-checks li { font-size: 14px; line-height: 1.45; margin-bottom: 10px; }
  .tr .tr-checks li:last-child { margin-bottom: 0; }
  .tr .tr-btn-g { margin-top: 20px; max-width: none; height: 48px; }
  .tr .tr-tel { padding: 20px 16px 22px; min-height: 204px; }
  .tr .tr-btn-b { margin-top: 16px; max-width: calc(100% - 118px); }
  
  
  
  
  
}
@media (min-width: 390px) and (max-width: 1099px) {
  .tr .tr-h1 { font-size: 24px; } .tr .tr-h1 .tr-o { font-size: 30px; }
  .tr .tr-h2 { font-size: 25px; } .tr .tr-h3 { font-size: 34px; }
}
@media (max-width: 389px) { .tr .tr-lead { max-width: 190px; } }
/* 中間(768〜1099px) */
@media (min-width: 768px) and (max-width: 1099px) {
  .tr .tr-diag__vis { left: 50%; right: auto; width: 560px; margin-left: -280px; }
  .tr .tr-lead { max-width: 360px; font-size: 14px; }
  .tr .tr-chip { min-height: 88px; font-size: 13px; }
  .tr .tr-btn-g { max-width: 360px; }
  .tr .tr-btn-b { max-width: min(320px, calc(100% - 138px)); }
  .tr .tr-note { max-width: 420px; }
  .tr .tr-tel__ph { width: 130px; height: 150px; }
}
/* PC(1100px〜) */
@media (min-width: 1100px) {
  .tr .tr-lead { margin-top: 14px; line-height: 1.75; }
  .tr .tr-chips { margin-top: 16px; }
  .tr .tr-btn-o { margin-top: 18px; font-size: 19px; }
  .tr .tr-clead { margin-top: 0; top: 86px; max-width: none; }
  .tr .tr-line { top: 126px; } .tr .tr-tel { top: 118px; }
  .tr .tr-note { margin-top: 10px; }
  .tr .tr-tel__n { margin-top: 12px; } .tr .tr-tel__h { margin-top: 8px; }
  
  .tr .tr-diag { height: 466px; } .tr .tr-diag__copy { top: 34px; }
  .tr .tr-line__row { display: block; margin-top: 12px; }
  .tr .tr-checks li { font-size: 14px; line-height: 1.4; margin-bottom: 7px; }
  .tr .tr-checks li:last-child { margin-bottom: 0; }
  .tr .tr-btn-g { margin-top: 16px; max-width: none; }
  .tr .tr-line { height: 272px; } .tr .tr-tel { height: 280px; } .tr .tr-contact { height: 418px; }
  .tr .tr-line__b { top: 20px; } .tr .tr-tel__b { top: 36px; } .tr .tr-btn-b { margin-top: 18px; }
}
.tr .tr-clead { word-break: auto-phrase; line-break: strict; text-wrap: pretty; } /* 非対応ブラウザは <wbr>(データの | )が効く */
/* ゼロ君(designer 改訂2): SP・中間はスマホのモックが無いので、チェック3項目の右の空きに置く */
@media (max-width: 1099px) {
  .tr .tr-line { position: relative; left: auto; top: auto; } /* PC用の left/top(40/126)が position:relative で効かないように */
  .tr .tr-mascot { left: auto; right: 14px; top: 64px; bottom: auto; width: 74px; } /* 仕様は78px(比0.85:1想定)。実素材は241x302(0.8:1)で高さ98になりボタンと5pxに近づくため、高さ92px相当の74pxに */
}
@media (min-width: 768px) and (max-width: 1099px) { .tr .tr-mascot { right: 28px; top: 64px; width: 96px; } } /* 仕様は top:56(見出し行との間隔4px)。SPと同じ12pxに */
@media (max-width: 369px) { .tr .tr-mascot { top: 100px; width: 68px; } } /* 見出しの行が折り返す幅(360でも折り返す)。仕様は ≤359・top:76 */

/* 2026-10-12 電話カード: 幅が狭いとき(〜430px)、営業時間の文が右下の写真に隠れて「（土日祝日は…」で切れていた。写真の幅ぶんだけ右を空けて折り返す */
@media (max-width: 430px) {
  .tr .tr-tel__h { padding-right: 112px; word-break: auto-phrase; line-break: strict; }
  .tr-tel__hn { white-space: nowrap; }  /* （土日祝日は休み）を折り返さず、1つのまとまりで次の行へ送る */
}
@media (max-width: 360px) { .tr .tr-tel__h { padding-right: 98px; font-size: 12px; } }
.job-t, .jm-row__b b { word-break: auto-phrase; }
.job-t { text-wrap: balance; }
.rs-t-accent, .rs-t-navy { white-space: nowrap; }
.bl-jrow__t { word-break: auto-phrase; text-wrap: balance; }

/* =========================================================================
   2026-10-12 NG42: 狭い幅(320〜390)で文字が箱の内側に収まるようにする
   - 求人カード: 1fr(=min-content以下に縮まない)を minmax(0,1fr) にし、勤務時間・職種名・補足は折り返せるようにする。
     勤務時間は「・」の句ごとのまとまり(inline-block)で、収まらないときだけ（実働○時間）の前で折れる。
   ========================================================================= */
.job-card, .job-body, .job-head > div { min-width: 0; }
.job-head:not(.job-head--age) { grid-template-columns: 44px minmax(0, 1fr); }
.job-head--age { grid-template-columns: 44px minmax(0, 1fr) auto; }
.job-row { grid-template-columns: 70px minmax(0, 1fr); }
.job-row dd, .job-hours__t, .job-hours__n, .job-head h3, .job-head p, .job-area, .job-ask, .job-caution, .job-ex__l, .job-ex__b, .job-wage__n { min-width: 0; overflow-wrap: break-word; }
.job-hours__p { display: inline-block; max-width: 100%; white-space: normal; vertical-align: top; }
.job-hours__nw { display: inline-block; white-space: nowrap; }
.job-hours__t, .job-hours__n { text-wrap: pretty; }
.job-hours__n, .job-head h3, .job-head p { word-break: auto-phrase; }
.job-cta__t { display: inline-block; text-align: center; line-height: 1.35; }
.job-cta__w { display: inline-block; }
.job-cta { padding-left: 32px; padding-right: 36px; }
@media (max-width: 400px) {
  .job-row { column-gap: 10px; }
  .job-list .job-head h3 { font-size: 17px; }
}

/* 診断の箱(トップ): 幅320で見出し・ボタン・チップが箱の内側に収まるように(幅360以上は従来の値のまま) */
@media (max-width: 400px) {
  .diagnosis-teaser-title { font-size: min(18px, 5vw); }
  .teaser-cta-pair .cta-main__txt strong { font-size: min(17px, 4.1vw); white-space: nowrap; }
  .quick-tag { white-space: nowrap; }
}
@media (max-width: 340px) {
  .quick-tag { gap: 0; padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .quick-tag__check { display: none; }
}