/* 長津製作所 コーポレート 下層ページ共通（HOME以外）。数値は tokens.css の変数のみ。文法は HOME と同じ（短い赤罫・›・ヘアライン・淡グレー帯） */

/* ---- 決定待ちの印（流し込み時に消す）---- */
mark.tbd { display: inline-block; padding: 0 var(--space-sm); border: 1px dashed var(--brand-500); border-radius: var(--radius-sm); background: var(--brand-50);
           color: var(--brand-700); font-size: var(--fs-caption); font-weight: 700; line-height: 1.8; white-space: nowrap; }
.pending { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-xl); padding: var(--space-md); border: 1px dashed var(--brand-300); background: var(--brand-50);
           font-size: var(--fs-sm); color: var(--color-text); }
.pending span { flex: 1; }
.dl dd > .wip { margin-right: var(--space-sm); } /* 表の中の未完の印（ヒアリング待ちの行） */
/* 未完のページへのリンクボタン：ボタンの右上に未完の印（ヘッダーのメニューと同じ置き方） */
.lbtn > .wip { position: absolute; top: calc(-1 * var(--space-sm)); right: var(--space-sm); line-height: 1.5; }

/* ---- 見出し帯（パンくず＋h1） ---- */
.ph { background: var(--color-bg-alt); padding: var(--space-sm) 0 var(--space-3xl); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); font-size: var(--fs-caption); color: var(--color-text-sub); }
.crumbs li + li::before { content: "›"; margin-right: var(--space-sm); color: var(--brand-500); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: inherit; text-decoration: none; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.ph-kicker { margin-top: var(--space-2xl); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-sub); }
.ph-title { margin-top: var(--space-2xl); font-size: var(--h-section); letter-spacing: -0.02em; }
.ph-kicker + .ph-title { margin-top: var(--space-sm); }
.ph-title::before { content: ""; display: block; width: var(--space-lg); height: 2px; background: var(--brand-500); margin-bottom: var(--space-md); }
.ph-kicker + .ph-title::before { display: none; }
.ph-lead { margin-top: var(--space-lg); max-width: var(--content-readable); font-size: var(--fs-md); font-weight: 700; }
.ph-q { quotes: "「" "」"; }
.anchors { border-bottom: 1px solid var(--color-line); background: var(--color-bg); }
.anchors ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); }
.anchors a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 56px; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.anchors a:hover { color: var(--brand-500); }
.anchors .chev { transform: rotate(90deg); }
/* SPの項目（事業内容・品質・生産体制・会社情報）は1行に1項目ずつ縦に並べ、∨を右端にそろえる（10/21 ユーザー指示） */
.anchors--sp ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.anchors--sp li + li { border-top: 1px solid var(--color-line); }
.anchors--sp a { display: flex; justify-content: space-between; gap: var(--space-md); width: 100%; min-height: 52px; }

/* ---- 文章 ---- */
.prose > * + * { margin-top: var(--space-md); }
.prose--lead { max-width: var(--content-readable); margin-bottom: var(--space-2xl); }
.prose--article { max-width: var(--content-readable); }
.prose--article h2 { margin-top: var(--space-2xl); font-size: var(--fs-lg); }
.prose--article h3 { margin-top: var(--space-xl); font-size: var(--fs-base); }
.prose--article figure { margin: var(--space-lg) 0; }
.prose--article ul { padding-left: var(--space-lg); list-style: disc; }
.h3 { font-size: var(--h-block); margin: var(--space-2xl) 0 var(--space-md); }
.h4 { font-size: var(--fs-base); margin: var(--space-lg) 0 var(--space-sm); }
.note, .empty { font-size: var(--fs-sm); color: var(--color-text-sub); }
.rel, .back { margin-top: var(--space-xl); }

/* ---- 定義リスト（会社概要・スペック・募集要項） ---- */
.dl { border-top: 1px solid var(--color-line); }
.dl > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); }
.dl dt { font-weight: 700; }
.dl--compact > div { grid-template-columns: 96px 1fr; gap: var(--space-md); padding: var(--space-sm) 0; font-size: var(--fs-sm); }
.dl--spec dd { font-size: var(--fs-md); font-weight: 700; }
.dl--job dd > * + * { margin-top: var(--space-sm); }
.bul { padding-left: var(--space-lg); list-style: disc; }
.tbl { border-collapse: collapse; }
.tbl th, .tbl td { padding: var(--space-xs) var(--space-lg) var(--space-xs) 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--color-line); }
.tbl td { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.job-fig { max-width: 320px; }

/* ---- 写真＋文章の行 ---- */
.mr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-lg); align-items: start; scroll-margin-top: 80px; }
.mr + .mr { margin-top: var(--space-4xl); padding-top: var(--space-4xl); border-top: 1px solid var(--color-line); }
.mr-fig { grid-column: 1 / span 5; margin: 0; }
.mr-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } /* height:auto が無いと HTML の height="800" が効いて縦長になる（10/15 修正）*/
.mr-body { grid-column: 7 / span 6; }
.mr--rev .mr-fig { grid-column: 8 / span 5; grid-row: 1; }
.mr--rev .mr-body { grid-column: 1 / span 6; grid-row: 1; }
.mr-title { font-size: var(--fs-xl); margin-bottom: var(--space-lg); }
.mr-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); margin-top: var(--space-lg); }
.points { margin-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.points > div { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-line); }
.points dt { font-weight: 700; }
.points dt::before { content: ""; display: inline-block; width: var(--space-sm); height: 2px; margin: 0 var(--space-sm) 4px 0; background: var(--brand-500); }
.points dd { margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-text-sub); }
.ph-img { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--color-bg-alt); }

/* 別サイトへのカード（部品加工） */
.ext-card { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-lg); align-items: center; padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out); }
.ext-card:hover { box-shadow: var(--shadow-md); }
.ext-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ext-card > span { display: grid; gap: var(--space-sm); }
.ext-card-meta { font-size: var(--fs-caption); color: var(--color-text-sub); }
.ext-card-title { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-lg); font-weight: 700; }
.ext-card-desc { font-size: var(--fs-sm); color: var(--color-text-sub); }

/* ---- カード（事例・コラム・インタビュー・下層への入口） ---- */
.cards { display: grid; gap: var(--space-2xl) var(--grid-gutter); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: block; text-decoration: none; }
.card[hidden] { display: none; }
.card-fig { position: relative; margin: 0; overflow: hidden; background: var(--color-bg-alt); }
.card-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-large) var(--ease-out); }
.card:hover .card-fig img { transform: scale(1.03); }
.card-meta { margin-top: var(--space-md); font-size: var(--fs-caption); color: var(--color-text-sub); }
.card-title { margin-top: var(--space-xs); font-size: var(--fs-base); line-height: 1.6; }
.card:hover .card-title { color: var(--brand-500); }
.card-desc { margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-text-sub); }
.badge { position: absolute; left: var(--space-sm); top: var(--space-sm); padding: 0 var(--space-sm); background: var(--color-bg); border: 1px dashed var(--brand-500); color: var(--brand-700); font-size: var(--fs-caption); font-weight: 700; }

/* 絞り込み（工法・業界＝選べる条件なのでチップ可：台帳18） */
.filters { margin-bottom: var(--space-2xl); } /* キーエンス採用サイトのタグ方式（10/15）：行ごとに「区分：」＋ # 付きの角丸タグ、行の間に黒い線 */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-sm); border: 0; margin: 0; padding: var(--space-lg) 0; }
.chips + .chips { border-top: 1px solid var(--color-text); }
.chips legend { float: left; width: calc(var(--space-4xl) - var(--space-md)); padding: 0; font-size: var(--fs-base); font-weight: 700; color: var(--color-text); }
.chips legend::after { content: "："; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--space-5xl) - var(--space-lg)); min-height: 36px; padding: 0 var(--space-lg); border: 1px solid var(--color-text); border-radius: var(--radius-md); background: var(--color-bg); font-size: var(--fs-caption); letter-spacing: .1em; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.chips label + label span::before { content: "#"; margin-right: .2em; }
.chips span:hover { background: var(--color-bg-alt); }
.chips input:checked + span { background: var(--color-text); color: var(--color-on-ink); font-weight: 700; }
.chips input:focus-visible + span { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---- 技術ガイド ---- */
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.gcards a { display: flex; flex-direction: column; gap: var(--space-sm); min-height: 100%; padding: var(--space-xl) 0 var(--space-lg); border-top: 2px solid var(--color-text); text-decoration: none; }
.gcards a:hover { border-top-color: var(--brand-500); }
.gcards-hub { font-size: var(--fs-caption); font-weight: 700; color: var(--color-text-sub); }
.gcards q { quotes: "「" "」"; font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; word-break: normal; word-break: auto-phrase; text-wrap: pretty; }
.gcards-title { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-lg); font-size: var(--fs-sm); }
.checks { display: grid; gap: var(--space-sm); }
.checks li { position: relative; padding-left: var(--space-xl); }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 7px; border-left: 2px solid var(--brand-500); border-bottom: 2px solid var(--brand-500); transform: rotate(-45deg); }
.sols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.sols li { padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.sols .num { font-size: var(--fs-md); font-weight: 700; color: var(--brand-500); }
.sols h3 { margin-top: var(--space-sm); font-size: var(--h-block); }
.sols p { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-text-sub); }

/* 1行＋ボタンの相談導線 */
.icta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-2xl); padding: var(--space-lg) var(--space-xl); border: 1px solid var(--color-line); background: var(--color-bg); }
.section--alt .icta { background: var(--color-bg); }
.icta p { font-weight: 700; }

/* ---- 事例（個別） ---- */
.case-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-lg); align-items: start; }
.case-top figure { grid-column: 1 / span 7; margin: 0; }
.case-top img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.case-top .dl { grid-column: 9 / span 4; }
.story { margin-top: var(--space-3xl); display: grid; gap: var(--space-xl); max-width: var(--content-readable); }
.story li { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.story-label { font-weight: 700; }
.story-label::before { content: ""; display: block; width: var(--space-md); height: 2px; margin-bottom: var(--space-sm); background: var(--brand-500); }

/* ---- 記事（コラム・お知らせ） ---- */
.article-meta { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); font-size: var(--fs-sm); color: var(--color-text-sub); }
.parent { margin-top: var(--space-3xl); padding: var(--space-lg); background: var(--color-bg-alt); max-width: var(--content-readable); }
.parent p { font-size: var(--fs-caption); color: var(--color-text-sub); }

/* ---- お知らせ（一覧の行・区分） ---- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.tab { min-height: var(--tap-min); padding: 0 var(--space-lg); border: 1px solid var(--color-line); border-radius: var(--radius-full); background: var(--color-bg); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.tab[aria-pressed="true"] { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); font-weight: 700; }
.rows { border-top: 1px solid var(--color-line); }
.rows li[hidden] { display: none; }
.rows a { display: grid; grid-template-columns: 112px 104px 1fr 16px; align-items: center; gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); text-decoration: none; }
.rows time { font-size: var(--fs-sm); color: var(--color-text-sub); }
.rows a:hover .ttl { text-decoration: underline; text-underline-offset: 4px; }
.kind { justify-self: start; padding: 0 var(--space-sm); border: 1px solid var(--brand-500); border-radius: 2px; color: var(--brand-500); font-size: var(--fs-caption); line-height: 22px; white-space: nowrap; }
.kind--exhibit { border-color: var(--color-text); color: var(--color-text); }
.kind--recruit { border-color: var(--color-text-sub); color: var(--color-text-sub); }

/* ---- 資料ダウンロード ---- */
.cover { display: flex; flex-direction: column; justify-content: space-between; width: 96px; aspect-ratio: 210 / 297; padding: var(--space-sm); background: var(--color-bg-alt); border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.cover i { display: block; width: var(--space-md); height: 2px; background: var(--brand-500); }
.cover span { font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; }
.cover--lg { width: 200px; padding: var(--space-md); margin-bottom: var(--space-lg); }
.cover--lg span { font-size: var(--fs-base); }
.docs-list { border-top: 1px solid var(--color-line); }
.docs-list a { display: grid; grid-template-columns: 96px 1fr 16px; gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); text-decoration: none; }
.docs-list b { display: block; font-size: var(--fs-md); }
.docs-list small { display: block; margin-top: var(--space-xs); font-size: var(--fs-caption); color: var(--color-text-sub); }
.docs-desc { display: block; margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-text-sub); }
.docs-list a:hover b { color: var(--brand-500); }
.dl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-2xl); align-items: start; }
.dl-info { grid-column: 1 / span 6; }
.dl-grid .form { grid-column: 8 / span 5; }
.toc { padding-left: var(--space-lg); list-style: decimal; }
.toc li + li { margin-top: var(--space-xs); }
.done { max-width: var(--content-readable); }
.done .mr-links { margin-top: var(--space-xl); }

/* ---- フォーム ---- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--grid-gutter); align-content: start; }
.form--card { grid-template-columns: 1fr; padding: var(--space-xl); background: var(--color-bg-alt); }
.form--card .h3 { margin: 0; }
.field { display: grid; gap: var(--space-sm); align-content: start; border: 0; margin: 0; padding: 0; min-width: 0; } /* 隣の項目に注記があっても、ラベルと入力欄の間を広げない */
.field--full, .form .btn, .form .consent { grid-column: 1 / -1; }
.form--card .field--full, .form--card .btn { grid-column: auto; }
.field label, .field legend { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-sm); font-weight: 700; padding: 0; }
.req, .opt { padding: 0 var(--space-xs); border-radius: 2px; font-size: var(--fs-caption); font-weight: 700; line-height: 1.6; }
.req { background: var(--brand-500); color: var(--color-on-ink); }
.opt { border: 1px solid var(--color-line); color: var(--color-text-sub); }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: var(--tap-min); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--fs-base); }
.field input[type="file"] { padding: var(--space-md); border-style: dashed; background: var(--color-bg-alt); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-color: var(--brand-500); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-error); }
.hint { font-size: var(--fs-caption); color: var(--color-text-sub); }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.choice { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--tap-min); font-weight: 400 !important; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--brand-500); }
.form .btn { justify-self: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-2xl); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-3xl); align-items: start; }
.contact-grid .form { grid-column: 1 / span 7; }
.contact-side { grid-column: 9 / span 4; }
.contact-side .h3 { margin-top: 0; }
.contact-side .steps { grid-template-columns: 1fr; gap: var(--space-md); }
.box { margin-top: var(--space-2xl); padding: var(--space-lg); border: 1px solid var(--color-line); background: var(--color-bg); }
.box .h3 { margin-top: 0; }
.box p + .btn, .box p + a { margin-top: var(--space-md); }
.box-label { font-size: var(--fs-caption); font-weight: 700; color: var(--color-text-sub); }
.tel-big { display: block; margin-top: var(--space-xs); font-size: var(--fs-xl); font-weight: 700; text-decoration: none; }

/* ---- 手順・沿革 ---- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--grid-gutter); }
.steps li { padding-top: var(--space-md); border-top: 1px solid var(--color-line); }
.steps-no { font-size: var(--fs-md); font-weight: 700; color: var(--brand-500); }
.steps-title { margin-top: var(--space-xs); font-size: var(--fs-base); }
.steps p { margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-text-sub); }
.tl { position: relative; max-width: 880px; }
.tl::before { content: ""; position: absolute; left: 76px; top: var(--space-md); bottom: var(--space-md); width: 1px; background: var(--color-line); }
.tl li { position: relative; display: grid; grid-template-columns: 64px 64px 1fr; gap: var(--space-md); padding: var(--space-md) 0; }
.tl li::before { content: ""; position: absolute; left: 72px; top: calc(var(--space-md) + 8px); width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--brand-500); }
.tl-y { font-size: var(--fs-md); font-weight: 700; color: var(--brand-500); line-height: 1.4; }
.tl-m { padding-left: var(--space-lg); font-size: var(--fs-sm); color: var(--color-text-sub); line-height: 1.9; }

/* ---- 会社情報 ---- */
.greet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-lg); align-items: start; }
.greet figure { grid-column: 1 / span 4; margin: 0; }
.greet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.greet .prose { grid-column: 6 / span 7; }
.greet-name { display: grid; justify-items: end; gap: var(--space-xs); margin-top: var(--space-xl); text-align: right; }
.greet-role { font-size: var(--fs-sm); color: var(--color-text-sub); }
.greet-person { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 var(--space-md); }
.greet-roman { font-size: var(--fs-base); font-weight: 700; }
.greet-person .brush { font-family: 'Yuji Mai', var(--font-heading), serif; font-size: var(--fs-2xl); letter-spacing: .08em; line-height: 1.2; white-space: nowrap; } /* 署名の名前だけ毛筆（10/15 ユーザー指示「書道家のような達筆に」） */
.access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--grid-gutter); }
.access .h3 { margin-top: 0; }
.map-box { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: var(--space-md); background: var(--color-bg-alt); border: 1px solid var(--color-line); }
.map-box iframe { width: 100%; height: 100%; border: 0; } /* Googleマップの埋め込み（住所で検索・APIキー不要・10/15） */

/* ---- 品質・生産体制 ---- */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); margin-top: var(--space-2xl); }
.photos figure { margin: 0; } /* figure の既定の余白で写真が小さくなっていた（10/15） */
.photos img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photos-dots { display: none; }
/* 品質保証の写真（10/21 ユーザー指示）：SPは縦に3枚並べず、横にめくるカルーセル。順番は 真ん中→下→上（PCは3枚横並びのまま） */
@media (max-width: 599px) {
  .photos--car { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .photos--car::-webkit-scrollbar { display: none; }
  .photos--car figure { flex: 0 0 100%; scroll-snap-align: start; }
  .photos--car figure:nth-child(1) { order: 3; }
  .photos--car figure:nth-child(2) { order: 1; }
  .photos--car figure:nth-child(3) { order: 2; }
  .photos-dots { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-sm); }
  .photos-dots button { width: var(--tap-min); height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
  .photos-dots button::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-radius: var(--radius-full); background: var(--color-line); }
  .photos-dots button[aria-current="true"]::before { background: var(--brand-500); }
}
.equip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--grid-gutter); }
.equip figure { margin: 0; background: var(--color-bg-alt); }
.equip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.equip p { margin-top: var(--space-sm); font-size: var(--fs-sm); font-weight: 700; }
.map { margin: 0; max-width: 880px; }
.sites { display: grid; gap: var(--space-2xl); }
.site { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-lg); padding: var(--space-lg); background: var(--color-bg); }
.site figure { grid-column: 1 / span 4; margin: 0; }
.site img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.site > div { grid-column: 5 / span 8; }
.site-name { font-size: var(--fs-lg); }
.site-area { margin: var(--space-xs) 0 var(--space-md); font-size: var(--fs-sm); color: var(--color-text-sub); }

/* ---- スタッフインタビュー ---- */
.iv-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-lg); align-items: start; }
.iv-top figure { grid-column: 1 / span 5; margin: 0; }
.iv-top img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.iv-top .prose { grid-column: 7 / span 6; }
.iv-motto { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); font-weight: 700; }
.iv-motto span { font-size: var(--fs-caption); color: var(--color-text-sub); font-weight: 700; padding-top: 2px; }
.qa { margin-top: var(--space-3xl); max-width: var(--content-readable); }
.qa > div { padding: var(--space-lg) 0; border-top: 1px solid var(--color-line); }
.qa dt { font-size: var(--fs-md); font-weight: 700; }
.qa dt::before { content: "Q"; margin-right: var(--space-sm); font-family: var(--font-num); color: var(--brand-500); }
.qa dd { margin-top: var(--space-sm); }
.qa dd > * + * { margin-top: var(--space-sm); }
.qa-fig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.qa-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---- サイトマップ ---- */
.smap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--grid-gutter); }
.smap .h3 { margin-top: 0; }
.smap li a { display: inline-flex; min-height: 32px; align-items: center; font-size: var(--fs-sm); text-decoration: none; }
.smap li a:hover { text-decoration: underline; }

/* ---- 英語版 Home ---- */
.en-hero { background: var(--color-bg-alt); }
.en-hero .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: center; min-height: 400px; }
.en-hero-title { margin-top: var(--space-sm); font-size: var(--h-page); line-height: 1.15; letter-spacing: -0.02em; }
.en-hero figure { margin: 0; height: 100%; }
.en-hero img { width: 100%; height: 100%; max-height: 400px; object-fit: cover; }
.en-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* ---- 中間幅・SP ---- */
@media (max-width: 1023px) {
  .cards--3, .cards--4, .equip, .clients-list, .smap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sols { grid-template-columns: 1fr; }
  .mr-fig, .mr-body, .mr--rev .mr-fig, .mr--rev .mr-body, .case-top figure, .case-top .dl, .dl-info, .dl-grid .form, .contact-grid .form, .contact-side,
  .greet figure, .greet .prose, .site figure, .site > div, .iv-top figure, .iv-top .prose { grid-column: 1 / -1; grid-row: auto; }
  .site { grid-template-columns: minmax(0, 1fr); } /* 12列の溝だけで320px幅をはみ出していた（10/21） */
  .greet figure { max-width: 320px; }
  .access { grid-template-columns: 1fr; }
  .en-hero .container { grid-template-columns: 1fr; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); row-gap: var(--space-xl); }
}
@media (max-width: 599px) {
  .ph { padding-bottom: var(--space-2xl); }
  .ph-title { font-size: var(--h-section-sp); margin-top: var(--space-xl); }
  .dl > div { grid-template-columns: 1fr; gap: var(--space-xs); }
  .dl--compact > div { grid-template-columns: 80px 1fr; }
  .cards--2, .cards--3, .gcards, .photos, .form, .access { grid-template-columns: 1fr; }
  .cards--4, .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
  .steps { grid-template-columns: 1fr; }
  .rows a { grid-template-columns: auto 1fr 16px; row-gap: var(--space-xs); }
  .rows .ttl { grid-column: 1 / 3; }
  .rows .chev { grid-row: 1 / 3; grid-column: 3; }
  .ext-card { grid-template-columns: 1fr; }
  .tl::before { left: 60px; }
  .tl li { grid-template-columns: 52px 1fr; }
  .tl li::before { left: 56px; }
  .tl-m { display: none; }
  .tl li p { padding-left: var(--space-md); }
  .story li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .gcards q { font-size: var(--fs-lg); }
  .en-hero-title { font-size: var(--h-page-sp); }
  .chips legend { float: none; width: 100%; }
}

/* 白地の節に置く拠点カードは罫で囲む */
.section:not(.section--alt) .site { border: 1px solid var(--color-line); }

/* ---- 掲載イメージ（sample/clients） ---- */
.smp-dl { margin-top: var(--space-lg); }
.smp-where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--grid-gutter); }
.smp-where .h3 { margin-top: 0; }
.smp-where p { margin-top: var(--space-xs); }
.smp-fig { margin: 0 0 var(--space-md); border: 1px solid var(--color-line); background: var(--color-bg); }
.smp-demo { padding: var(--space-xl); border: 1px dashed var(--brand-300); background: var(--color-bg); margin-bottom: var(--space-md); }
@media (max-width: 1023px) { .smp-where { grid-template-columns: 1fr; } }

/* ---- 事業の詳細（1-1・1-2）：キャッチ＋本文（左7列）／写真2枚（右4列） ---- */
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-xl); align-items: start; }
.svc-body { grid-column: 1 / span 7; }
.svc-catch { font-size: var(--fs-xl); line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; margin-bottom: var(--space-lg); }
.svc-catch .nw { white-space: nowrap; } /* 句の途中で折らない。折り位置は <wbr> */
.svc-catch::before { content: ""; display: block; width: var(--space-lg); height: 2px; background: var(--brand-500); margin-bottom: var(--space-md); }
.svc-figs { grid-column: 9 / span 4; display: grid; gap: var(--space-md); }
.svc-figs figure { margin: 0; }
.svc-figs img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 1023px) {
  .svc-body, .svc-figs { grid-column: 1 / -1; }
  .svc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .svc-catch { font-size: var(--fs-lg); }
}

/* ---- 事例：お客様インタビュー型（sample/case-sony・村田製作所の導入事例の構成） ---- */
.cs-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-xl); align-items: start; }
.cs-fig { grid-column: 1 / span 7; margin: 0; }
.cs-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cs-cust { grid-column: 8 / span 5; padding: var(--space-xl); border: 1px solid var(--color-line); background: var(--color-bg); }
.cs-logo { margin: 0; }
.cs-logo img { display: block; width: 160px; height: auto; }
.cs-name { margin-top: var(--space-md); font-size: var(--fs-md); font-weight: 700; }
.cs-sum { margin-top: var(--space-sm); font-size: var(--fs-sm); line-height: var(--lh-body); }
.cs-cust .dl { margin-top: var(--space-lg); }
.cs-dl { margin-top: var(--space-lg); }
.cs-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); margin-top: var(--space-2xl); padding: var(--space-xl) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.cs-nums li { display: grid; gap: var(--space-xs); }
.cs-k { font-size: var(--fs-sm); color: var(--color-text-sub); }
.cs-v { font-family: var(--font-num); font-size: var(--fs-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cs-v small { margin-left: 2px; font-family: var(--font-base); font-size: var(--fs-md); font-weight: 700; color: var(--brand-500); }
.cs-arrow { margin: 0 var(--space-sm); font-size: var(--fs-xl); color: var(--color-text-sub); }
.cs-toc { margin-top: var(--space-2xl); max-width: var(--content-readable); }
.cs-toc-h { font-weight: 700; }
.cs-toc ol { margin-top: var(--space-sm); border-top: 1px solid var(--color-line); }
.cs-toc li { border-bottom: 1px solid var(--color-line); }
.cs-toc a { display: block; padding: var(--space-sm) 0; font-size: var(--fs-sm); text-decoration: none; }
.cs-toc a:hover { color: var(--brand-500); }
.cs-body { max-width: var(--content-readable); }
.cs-ph { display: grid; place-items: center; aspect-ratio: 3 / 2; max-width: 480px; margin: 0 0 var(--space-xl); background: var(--color-bg-alt); border: 1px dashed var(--color-line); color: var(--color-text-sub); font-size: var(--fs-sm); text-align: center; padding: var(--space-md); }
.cs-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.cs-figs figure { margin: 0; }
.cs-figs img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.cs-figs figcaption { margin-top: var(--space-xs); font-size: var(--fs-caption); color: var(--color-text-sub); }
.qa > div + div { margin-top: var(--space-xl); }
.qa dt { font-weight: 700; }
.qa dt::before { content: "― "; color: var(--color-text-sub); }
.qa dd { margin-top: var(--space-sm); line-height: var(--lh-body); }
.qa-who { display: block; margin-bottom: var(--space-xs); font-size: var(--fs-caption); font-weight: 700; color: var(--brand-500); }
@media (max-width: 1023px) {
  .cs-fig, .cs-cust { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .cs-nums { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cs-v { font-size: var(--fs-3xl); }
  .cs-figs { grid-template-columns: 1fr; }
}

/* ===== 事業内容の左ナビ（キーエンスの商品カテゴリ方式・2026-10-15 ユーザー指示）
   赤の縦線は「いまどこにいるか」を示す機能なので、台帳1（装飾の左バー）には当たらない。線は現在地の1か所だけ */
.side { display: none; }
@media (min-width: 1024px) {
  .side-outer { max-width: calc(var(--container-max) + var(--space-2xl) * 2); margin: 0 auto; padding: var(--space-4xl) var(--space-2xl) 0; }
  .side-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
  .side { display: block; grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) - 40px + var(--space-xl)); }
  .side-main { grid-column: 4 / span 9; min-width: 0; padding-left: var(--space-2xl); }
  .side-main .container { max-width: none; padding: 0; }
  .side-main .section { padding: 0 0 var(--space-4xl); } /* 2列の中は淡グレーの帯を使わず、節の間隔だけで区切る */
  .side-main .section--alt { background: none; }
  .side-main .mr-fig { grid-column: 1 / span 5; }
  .side-main .mr-fig img { aspect-ratio: 2 / 3; } /* PCだけ縦長（10/15 ユーザー：縦長でよい・以前の 339×800 ほど大きくしない）。スマホは 3:2 のまま */
  .side-main .mr-body { grid-column: 7 / span 6; } /* 写真（1〜5列）と本文の間を1列あける（10/15 ユーザー「もう少し距離を」） */
  .side-main .mr--rev .mr-fig { grid-column: 8 / span 5; }
  .side-main .mr--rev .mr-body { grid-column: 1 / span 6; }
  .anchors--sp, .side-dup { display: none; }
  .side-main .dl:not(.dl--compact) > div { grid-template-columns: 8em 1fr; } /* 左ナビのある2列では項目名の列を狭め、中身を左へ寄せる（10/15 ユーザー「対応スペック早見が真ん中すぎる」） */
}
.side-title { margin-bottom: var(--space-md); font-size: var(--fs-lg); font-weight: 700; }
.side-title a { color: inherit; text-decoration: none; }
.side-title a:hover { color: var(--brand-500); }
.side-nav { border-left: 1px solid var(--color-line); }
.side-nav a { position: relative; display: flex; align-items: center; min-height: 56px; padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.side-nav a:hover { color: var(--brand-500); }
.side-nav a[aria-current] { color: var(--brand-500); font-weight: 700; }
.side-nav a[aria-current]::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--brand-500); }
.side-nav a > span { word-break: keep-all; } /* 折り位置は「・」「／」の後ろ（<wbr>）だけ */
.side-nav .ext { margin-left: var(--space-xs); vertical-align: -2px; }

/* ===== 白地の見出し（ムラタ方式・2026-10-15 ユーザー指示：事業内容の3ページ）
   ムラタ実測：h1 36/行間1.5・題の前に赤＋灰の短い横棒・文章 16/1.6・段落間16・写真は右に幅の1/4 */
.ph--plain { background: var(--color-bg); padding-bottom: 0; }
.ph-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-lg); align-items: start; margin-top: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-line); }
.ph-intro-body { grid-column: 1 / -1; }
.ph-intro--fig .ph-intro-body { grid-column: 1 / span 8; }
.ph--plain .ph-title { display: flex; align-items: center; gap: var(--space-md); margin-top: 0; font-size: var(--fs-2xl); line-height: 1.5; }
.ph--plain .ph-title::before { flex: none; width: var(--space-xl); height: calc(var(--space-xs) * 1.5); margin: 0; background: linear-gradient(90deg, var(--brand-500) 50%, var(--color-line) 50%); }
.ph-text { margin-top: var(--space-xl); }
.ph-text p { font-size: var(--fs-base); line-height: 1.6; }
.ph-text p + p { margin-top: var(--space-md); }
.ph-fig { grid-column: 10 / span 3; margin: 0; }
.ph-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* 2列の中の節見出しもムラタ方式（30/1.6・下に灰の線＋左だけ赤） */
@media (min-width: 1024px) {
  .side-main .sec-head { position: relative; padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-line); margin-bottom: var(--space-xl); }
  .side-main .sec-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: calc(var(--space-5xl) + var(--space-xl) + var(--space-sm)); height: 2px; background: var(--brand-500); }
  .side-main .sec-title { font-size: var(--fs-xl); line-height: 1.6; }
  .side-main .sec-title::before { display: none; }
}
@media (max-width: 1023px) {
  .ph-intro-body, .ph-intro--fig .ph-intro-body, .ph-fig { grid-column: 1 / -1; }
  .ph-fig { max-width: 400px; }
  .ph--plain .ph-title { font-size: var(--h-page-sp); }
}

/* ===== リンクのボタン（キーエンスの「詳しく見る」方式・10/15 改訂）：白いカード＋影、右端に丸の中のアイコン
   ふだんは文字が黒・丸が灰、マウスオンで文字と丸が赤。「詳しく見る」（主）ははじめから赤 */
.lbtns { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.lbtn { position: relative; display: inline-flex; align-items: center; min-width: calc(var(--space-5xl) + var(--space-3xl)); min-height: 56px; padding: var(--space-sm) calc(var(--space-2xl) + var(--space-sm)) var(--space-sm) var(--space-lg); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-sm); color: var(--color-text); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; text-decoration: none; transition: color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lbtn-ic { position: absolute; right: var(--space-md); top: 50%; box-sizing: border-box; width: var(--space-lg); height: var(--space-lg); padding: 6px; border-radius: var(--radius-full); background: var(--color-text-sub); color: var(--color-on-ink); transform: translateY(-50%); transition: background-color var(--dur-base) var(--ease-out); }
.lbtn:hover, .lbtn:focus-visible { color: var(--brand-500); box-shadow: var(--shadow-md); }
.lbtn:hover .lbtn-ic, .lbtn:focus-visible .lbtn-ic { background: var(--brand-500); }
/* 10/15：「詳しく見る」もふだんは灰色（ほかと同じ）。並びは横並びにそろえる＝同じ幅のマスに並べ、長い名前はボタンの中で折り返す */
.lbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-5xl) + var(--space-3xl)), 1fr)); }
.lbtns li { display: flex; }
.lbtn { flex: 1; min-width: 0; } /* マスの幅いっぱいに広げ、ボタンの幅をそろえる */
.lbtn-cap { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--color-text-sub); }
.lbtn:hover .lbtn-cap, .lbtn:focus-visible .lbtn-cap { color: inherit; }
.lbtn > span { display: block; }
@media (max-width: 599px) { .lbtns { grid-template-columns: 1fr; } }

/* ===== お問い合わせ：種類のタブで入力項目と流れを切り替える（2026-10-15） */
.ct-tabs legend { margin-bottom: var(--space-sm); } /* 10/23 ユーザー指示：見出しとタブの間が狭い（fieldset の legend には grid の gap が効かないため、ほかの項目のラベル〜入力欄と同じ間隔を足す） */
.ct-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.ct-tab { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--space-sm); background: var(--color-bg-alt); color: var(--color-text-sub); font-size: var(--fs-sm); font-weight: 700 !important; text-align: center; line-height: 1.4; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.ct-tab + .ct-tab { border-left: 1px solid var(--color-line); }
.ct-tab input { position: absolute; opacity: 0; pointer-events: none; }
.ct-tab:hover { color: var(--color-text); }
.ct-tab:has(input:checked) { background: var(--color-bg); color: var(--brand-500); box-shadow: inset 0 -3px 0 var(--brand-500); }
.ct-tab:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: -2px; }
.ct-panel { display: contents; }
.ct-panel[hidden] { display: none; }
.ct-sub { grid-column: 1 / -1; margin-top: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); font-weight: 700; }
.ct-flows { display: grid; } /* 4つの流れを同じマスに重ね、高さはいちばん高い流れにそろう（10/15 ユーザー指示） */
.ct-flows > .ct-flow { grid-area: 1 / 1; }
.ct-flow.is-off { visibility: hidden; }
.contact-side .box + .ct-flows { margin-top: var(--space-2xl); } /* 電話の枠を上に置き、流れの長さの差は下の余白に逃がす */
@media (min-width: 1024px) { .contact-side { position: sticky; top: calc(var(--header-h) - 40px + var(--space-xl)); } } /* 左の入力欄が長くても、流れと電話が横に見えたままになる */
@media (max-width: 599px) { .ct-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-tab:nth-child(3) { border-left: 0; } .ct-tab:nth-child(n+3) { border-top: 1px solid var(--color-line); } }
/* 白地の見出しの中の区分（kicker）と問い（lead）。題の前の横棒はどのページでも出す（そろえる） */
.ph--plain .ph-kicker { margin: 0 0 var(--space-sm); }
.ph--plain .ph-kicker + .ph-title::before { display: block; }
.ph--plain .ph-lead { margin-top: var(--space-lg); }

/* ===== 会社説明会・工場見学の案内（10/15：赤い丸のアイコン＋赤ボタンで目立たせる。赤の面はアイコンとボタンだけ） */
.event { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-lg) var(--space-xl); margin-top: var(--space-2xl); padding: var(--space-xl); border: 2px solid var(--brand-500); border-radius: var(--radius-sm); background: var(--color-bg); }
.event-ic { display: grid; place-items: center; width: var(--space-3xl); height: var(--space-3xl); border-radius: var(--radius-full); background: var(--brand-500); color: var(--color-on-ink); }
.event-ic svg { width: var(--space-xl); height: var(--space-xl); }
.event-title { font-size: var(--fs-lg); margin: 0 0 var(--space-sm); }
.event-body p { font-size: var(--fs-sm); color: var(--color-text-sub); }
@media (max-width: 1023px) { .event { grid-template-columns: auto 1fr; } .event-btn { grid-column: 1 / -1; justify-self: stretch; } }

/* ===== engage の求人一覧（10/15） */
.jobs { border-top: 1px solid var(--color-line); }
.jobs a { display: grid; grid-template-columns: 9em 1fr auto auto; align-items: center; gap: var(--space-xs) var(--space-lg); min-height: 64px; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; }
.jobs a:hover .jobs-title { color: var(--brand-500); text-decoration: underline; }
.jobs-place { font-size: var(--fs-caption); color: var(--color-text-sub); }
.jobs-title { font-weight: 700; }
.jobs-note { grid-column: 2; grid-row: 2; font-size: var(--fs-caption); color: var(--color-text-sub); }
.jobs-pay { grid-column: 3; grid-row: 1 / 3; font-size: var(--fs-sm); }
.jobs .ext { grid-column: 4; grid-row: 1 / 3; color: var(--brand-500); }
.jobs-more { margin-top: var(--space-md); text-align: right; }
@media (max-width: 599px) { .jobs a { grid-template-columns: 1fr auto; } .jobs-place, .jobs-title, .jobs-note, .jobs-pay { grid-column: 1; grid-row: auto; } .jobs .ext { grid-column: 2; grid-row: 1 / 5; } }
@media (max-width: 599px) {
  .event { grid-template-columns: auto 1fr; gap: var(--space-md); padding: var(--space-lg); }
  .event-ic { width: var(--space-2xl); height: var(--space-2xl); }
  .event-ic svg { width: var(--space-lg); height: var(--space-lg); }
  .event-body { display: contents; } /* スマホはアイコンの横に題、説明文とボタンは全幅 */
  .event-title { margin: 0; }
  .event-body p { grid-column: 1 / -1; }
}

/* スマホ用：左ナビの代わりに見出しの下へ入口を並べる（品質・生産体制・10/15） */
.side-sp { border-bottom: 1px solid var(--color-line); }
.side-sp ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.side-sp a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; color: var(--color-text); }
.side-sp a[aria-current] { color: var(--brand-500); }
@media (min-width: 1024px) { .side-sp { display: none; } }
/* 品質・生産体制を1ページにまとめた時の、節の中の小見出し（10/15） */
.ps-sub { margin: var(--space-2xl) 0 var(--space-lg); }
.section .container > .ps-sub:first-child { margin-top: 0; }


/* ===== ページの概要（見出しの下・10/15）：リード 20px／行間1.8／太字・濃い文字、補足 16px／灰。読みやすい幅（約40字）に収める */
.page-intro { padding: var(--space-2xl) 0 0; }
.page-intro .container > * { max-width: var(--content-readable); }
.page-intro-lead { font-size: var(--fs-md); line-height: 1.8; font-weight: 700; letter-spacing: .02em; color: var(--color-text); }
.page-intro-sub { margin-top: var(--space-md); font-size: var(--fs-base); line-height: 1.9; color: var(--color-text-sub); }
.page-intro + .side-outer, .page-intro + .section, .page-intro + .anchors--sp + .side-outer, .page-intro + .anchors--sp + .section { padding-top: var(--space-3xl); }
.page-intro + .anchors--sp { margin-top: var(--space-xl); border-top: 1px solid var(--color-line); } /* SP：説明文の下に項目（10/21 ユーザー指示） */
@media (max-width: 599px) { .page-intro-lead { font-size: var(--fs-base); } .page-intro-sub { font-size: var(--fs-sm); } }

/* ===== 新卒の募集要項（ムラタ recruit.murata.com/…/outline/ 方式・10/15）
   罫線で囲んだ表：項目名は淡グレー地で幅1/3・太字、中身は白地。罫 #CCC 系、内側の余白 20px 24px、本文16px。箇条書きは赤い点 */
.job-title { margin-bottom: var(--space-xl); font-size: var(--fs-xl); line-height: 1.6; }
.dl--job { border: 1px solid var(--color-line); border-bottom: 0; }
.dl--job > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; padding: 0; }
.dl--job dt { padding: var(--space-lg) var(--space-lg); background: var(--color-bg-alt); border-right: 1px solid var(--color-line); }
.dl--job dd { padding: var(--space-lg) var(--space-lg); background: var(--color-bg); }
.dl--job .bul { padding-left: 0; list-style: none; }
.dl--job .bul li { position: relative; padding-left: 1.2em; }
.dl--job .bul li + li { margin-top: var(--space-xs); }
.dl--job .bul li::before { content: ""; position: absolute; left: .2em; top: .7em; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--brand-500); }
.dl--job .h3 { font-size: var(--fs-md); margin-top: var(--space-lg); }
.dl--job dd > .h3:first-child { margin-top: 0; }
.dl--job .job-fig { margin-left: 0; } /* 写真を本文の左端にそろえる */
@media (max-width: 599px) {
  .dl--job > div { grid-template-columns: minmax(0, 1fr); } /* 1fr だと中の長い語（メールアドレス・表）の幅で横にはみ出す（10/27 修正） */
  .dl--job dd { overflow-wrap: anywhere; }
  .dl--job .more { white-space: normal; } /* 「仕事の内容は…」の案内リンクを折り返す（10/26 追加分がスマホで横にはみ出していた） */
  .dl--job dt { border-right: 0; border-bottom: 1px solid var(--color-line); padding: var(--space-sm) var(--space-md); }
  .dl--job dd { padding: var(--space-md); }
}

/* ===== 生産工程：4段階×12工程（10/15）。段階ごとに1行：左に段階（STEP・名前・一言）、右に工程を2列で。段階の頭に赤い線 */
.phases { display: grid; gap: var(--space-md); }
.phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto 1fr; align-content: start; column-gap: var(--space-xl); padding: var(--space-lg); border-left: 3px solid var(--brand-500); background: var(--color-bg-alt); }
.phase-no { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .1em; color: var(--brand-500); }
.phase-title { margin: var(--space-xs) 0 0; font-size: var(--fs-lg); word-break: keep-all; } /* h4 の既定の下余白を消す */
.phase-lead { margin-top: var(--space-sm); font-size: var(--fs-sm); line-height: 1.7; color: var(--color-text-sub); }
.phase-steps { grid-column: 2; grid-row: 1 / 4; align-content: start; border-top: 1px solid var(--color-line); } /* 工程は上から下へ1列（10/15）。番号・名前・説明を1行に並べて高さを抑える */
.phase-steps li { display: grid; grid-template-columns: 2em 9em 1fr; column-gap: var(--space-sm); align-items: baseline; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line); }
.phase-step-no { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-500); }
.phase-step-name { font-size: var(--fs-sm); font-weight: 700; }
.phase-step-desc { font-size: var(--fs-caption); line-height: 1.7; color: var(--color-text-sub); }
@media (max-width: 1023px) { .phase { grid-template-columns: 1fr; grid-template-rows: none; } .phase-steps { grid-column: 1; grid-row: auto; margin-top: var(--space-lg); } }
@media (max-width: 599px) { .phase-steps li { grid-template-columns: 2em 1fr; } .phase-step-desc { grid-column: 2; } }

/* ===== スタッフインタビュー記事（ムラタ recruit.murata.com/…/interview/016/ 方式・10/15）
   実測：大見出し 36/1.8 赤・所属 17 太字・本文 16/2.0・章題 32/1.6 赤・写真は 568×426 で角を大きく丸める（左右交互）・メッセージは灰色の面＋丸い顔写真
   この記事だけ見出しの文字を赤にする（案件 design.md の「赤は線と記号」の例外。ユーザー指示「ムラタの文字色のパターン」） */
.ivx-hero { padding: var(--space-sm) 0 var(--space-xl); }
.ivx-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: center; margin-top: var(--space-2xl); }
.ivx-hero-text { grid-column: 1 / span 5; }
.ivx-hero-fig { grid-column: 6 / -1; margin: 0; }
.ivx-hero-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 0 0 var(--space-5xl); }
.ivx-kicker { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; color: var(--brand-500); }
.ivx-catch { margin-top: var(--space-md); font-size: var(--fs-2xl); line-height: 1.8; letter-spacing: .02em; color: var(--brand-500); word-break: auto-phrase; }
.ivx-dept { margin-top: var(--space-xl); font-size: 17px; font-weight: 700; line-height: 2; }
.ivx-name { font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; }
.ivx-motto { display: flex; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--fs-base); line-height: 2; }
.ivx-motto span { font-size: var(--fs-caption); font-weight: 700; color: var(--color-text-sub); padding-top: 5px; }
.ivx-label { display: flex; align-items: center; gap: var(--space-md); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; color: var(--brand-500); }
.ivx-label .num { font-size: var(--fs-base); }
.ivx-profile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); margin-top: var(--space-4xl); }
.ivx-profile .ivx-label { grid-column: 1 / span 4; align-self: start; padding-top: 6px; }
.ivx-profile .prose { grid-column: 5 / -1; max-width: var(--content-readable); }
.ivx-profile .prose p { line-height: 2; }
.ivx-ch { padding: var(--space-3xl) 0; }
.ivx-ch-head { max-width: 880px; }
.ivx-ch-title { margin-top: var(--space-lg); font-size: var(--fs-xl); line-height: 1.6; color: var(--brand-500); }
.ivx-ch-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; margin-top: var(--space-2xl); }
.ivx-ch-fig { grid-column: 8 / -1; grid-row: 1; margin: 0; position: sticky; top: calc(var(--header-h) - 40px + var(--space-xl)); }
.ivx-ch-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-xl); }
.ivx-qa { grid-column: 1 / span 6; grid-row: 1; }
.ivx-ch--rev .ivx-ch-fig { grid-column: 1 / span 5; }
.ivx-ch--rev .ivx-qa { grid-column: 7 / -1; }
.ivx-qa > div + div { margin-top: var(--space-2xl); }
.ivx-qa dt { display: flex; gap: var(--space-sm); font-size: var(--fs-md); font-weight: 700; line-height: 1.6; }
.ivx-qa dt::before { content: "Q"; flex: none; font-family: var(--font-num); color: var(--brand-500); }
.ivx-qa dd { margin-top: var(--space-md); padding-left: calc(var(--fs-md) + var(--space-sm)); }
.ivx-qa dd p { line-height: 2; }
.ivx-qa dd p + p { margin-top: var(--space-sm); }
.ivx-msg-wrap { padding: var(--space-2xl) 0 var(--space-5xl); }
.ivx-msg { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xl); align-items: start; padding: var(--space-3xl) var(--space-4xl); border-radius: var(--space-5xl) 0 0 0; background: var(--color-bg-alt); }
.ivx-msg-fig { margin: 0; }
.ivx-msg-fig img { width: 144px; height: 144px; border-radius: var(--radius-full); object-fit: cover; }
.ivx-msg-title { font-size: var(--fs-lg); line-height: 1.6; color: var(--brand-500); margin-bottom: var(--space-md); }
.ivx-msg .prose p { line-height: 2; }
@media (max-width: 1023px) {
  .ivx-hero-text, .ivx-hero-fig, .ivx-profile .ivx-label, .ivx-profile .prose, .ivx-qa, .ivx-ch-fig, .ivx-ch--rev .ivx-ch-fig, .ivx-ch--rev .ivx-qa { grid-column: 1 / -1; grid-row: auto; }
  .ivx-hero-fig { margin: var(--space-xl) 0 0; }
  .ivx-ch-fig { position: static; margin-bottom: var(--space-xl); }
  .ivx-profile .prose { margin-top: var(--space-md); }
  .ivx-msg { grid-template-columns: 1fr; padding: var(--space-xl); border-radius: var(--space-2xl) 0 0 0; }
  .ivx-msg-fig img { width: 96px; height: 96px; }
}
@media (max-width: 599px) { .ivx-catch { font-size: var(--fs-lg); } .ivx-ch-title { font-size: var(--fs-lg); } .ivx-qa dt { font-size: var(--fs-base); } .ivx-qa dd { padding-left: 0; } }
/* お知らせ：マウスオンで題名と矢印を赤に（ムラタのお知らせ方式・10/15）。メディア掲載の区分は灰の地 */
.rows a .ttl, .rows a .chev { transition: color var(--dur-base) var(--ease-out); }
.rows a:hover .ttl, .rows a:focus-visible .ttl { color: var(--brand-500); text-decoration: none; }
.kind--media { border-color: var(--color-text-sub); background: var(--color-bg-alt); color: var(--color-text); }
.ps-sub[id] { scroll-margin-top: calc(var(--header-h) - 40px + var(--space-xl)); } /* HOME の拠点カードから飛んだ時に見出しがヘッダーに隠れないように */
.map img { width: 100%; height: auto; } /* 読み込み前から地図の高さを確保（ページ内リンクの着地点がずれないように） */

/* 技術ガイドの本文（10/19）：比較表・設備と体制・よくある質問 */
.cmp-wrap { margin-top: var(--space-2xl); overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-sm); }
.cmp caption { margin-bottom: var(--space-sm); text-align: left; font-size: var(--fs-base); font-weight: 700; }
.cmp th, .cmp td { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line); text-align: left; vertical-align: top; line-height: 1.7; }
.cmp thead th { background: var(--color-bg-alt); font-weight: 700; }
.cmp tbody th { width: 11em; font-weight: 700; }
.support-h { margin-top: var(--space-3xl); font-size: var(--h-block); }
.support-h + .dl { margin-top: var(--space-md); }
.faq { max-width: var(--content-readable); border-top: 1px solid var(--color-line); }
.faq > div { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); }
.faq dt { font-size: var(--fs-md); font-weight: 700; }
.faq dt::before { content: "Q"; margin-right: var(--space-sm); font-family: var(--font-num); color: var(--brand-500); }
.faq dd { margin-top: var(--space-sm); line-height: var(--lh-body); }
@media (max-width: 599px) { .faq dt { font-size: var(--fs-base); } }
@media (max-width: 599px) {
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tr { border: 1px solid var(--color-line); }
  .cmp tr + tr { border-top: 0; }
  .cmp th, .cmp td { border: 0; }
  .cmp tbody th { width: auto; background: var(--color-bg-alt); }
  .cmp td { padding-top: var(--space-xs); }
  .cmp td::before { content: attr(data-label); display: block; font-size: var(--fs-caption); color: var(--color-text-sub); }
}

/* 技術ガイド（10/19）：要点の3列＋アイコン・写真2枚・関連リンク */
.keypts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); margin-top: var(--space-lg); }
.keypts li { padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.gicon { display: block; width: 48px; height: 48px; color: var(--brand-500); }
.keypts h3 { margin-top: var(--space-md); font-size: var(--h-block); line-height: var(--lh-heading); }
.keypts p { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-text-sub); }
.gfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); max-width: 920px; margin-top: var(--space-2xl); }
.gfigs figure { margin: 0; }
.gfigs img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gfigs figcaption { margin-top: var(--space-xs); font-size: var(--fs-caption); color: var(--color-text-sub); }
.rlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.rlinks a { display: flex; flex-direction: column; gap: var(--space-xs); height: 100%; padding: var(--space-lg); border: 1px solid var(--color-line); background: #fff; color: var(--color-text); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out); }
.rlinks a:hover, .rlinks a:focus-visible { border-color: var(--brand-500); }
.rlinks-kind { font-size: var(--fs-caption); color: var(--color-text-sub); }
.rlinks-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-weight: 700; }
.rlinks a:hover .rlinks-title { color: var(--brand-500); }
.rlinks-desc { font-size: var(--fs-sm); color: var(--color-text-sub); }
@media (max-width: 1023px) { .keypts, .rlinks { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .gfigs { grid-template-columns: 1fr; } }
/* 要点の写真（10/19）。写真が無い要点は、先方にご提供をお願いする枠（中にアイコン） */
.keypts li { border-top: 0; padding-top: 0; }
.keypts-fig { margin: 0; }
.keypts-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.keypts-ask { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); aspect-ratio: 3 / 2; padding: var(--space-md); border: 1px dashed var(--color-line); background: var(--color-bg-alt); text-align: center; }
.keypts-ask p { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); font-size: var(--fs-caption); color: var(--color-text-sub); }
/* 追従する項目の帯（技術ガイド・10/19）：PCはヘッダーの下段（64px）の下、SPはヘッダー（56px）の下に止まる。押した先の見出しが帯に隠れないよう余白を足す */
.anchors--sticky { position: sticky; top: calc(var(--header-h) - 40px); z-index: 40; }
html:has(.anchors--sticky) { scroll-padding-top: calc(var(--header-h) - 40px + 57px); }
@media (max-width: 1023px) {
  .anchors--sticky { top: var(--header-h-sp); }
  .anchors--sticky ul { flex-wrap: nowrap; overflow-x: auto; gap: 0 var(--space-lg); scrollbar-width: none; }
  .anchors--sticky a { white-space: nowrap; min-height: 48px; }
  html:has(.anchors--sticky) { scroll-padding-top: calc(var(--header-h-sp) + 49px); }
}
@media (max-width: 599px) {
  .anchors--sticky ul { gap: 0 var(--space-md); justify-content: space-between; }
  .anchors--sticky .chev { display: none; } /* SPは5項目を1行に収めるため矢印を省く */
  .anchors--sticky a { font-size: 13px; } /* 採用の入口（会社のこと〜募集要項・22字）も 360px 幅で1行に収める（10/22） */
}

/* 事例のカード：白い箱＋項目のラベル（キーエンス方式・10/19）。強調＝このページの区分（#222 の塗り）、ほかは灰の枠 */
.card--boxed { display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out); }
.card--boxed:hover { box-shadow: var(--shadow-md); }
.card--boxed .card-title { margin: 0; padding: var(--space-md) var(--space-md) 0; }
.card--boxed .card-tags { padding: 0 var(--space-md) var(--space-md); }
.card-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.card-tags li { padding: 2px var(--space-sm); border: 1px solid var(--color-line); font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text); background: #fff; }
.card-tags li.is-on { border-color: var(--color-text); background: var(--color-text); color: #fff; font-weight: 700; }

/* 課題の図（10/19）：白い箱に断面の模式図＋課題の文。灰＝成形品・白＝金型・赤＝問題の箇所 */
.probs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gutter); }
.probs li { display: flex; flex-direction: column; background: #fff; box-shadow: var(--shadow-sm); }
.probs figure { margin: 0; padding: var(--space-md) var(--space-md) 0; }
.probs p { padding: var(--space-md); font-size: var(--fs-sm); font-weight: 700; line-height: 1.7; }
.dg { display: block; width: 100%; height: auto; }
.dg-part { fill: #CFCFCF; stroke: var(--color-text); stroke-width: 1.2; }
.dg-mold { fill: #fff; stroke: var(--color-text-sub); stroke-width: 1.2; }
.dg-outer { fill: none; stroke: var(--brand-500); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dg-hl { fill: rgb(216 0 15 / .25); stroke: var(--brand-500); stroke-width: 1.5; }
.dg-hl-line { fill: none; stroke: var(--brand-500); stroke-width: 2; stroke-linecap: round; }
.dg-pl { stroke: var(--color-text-sub); stroke-width: 1; stroke-dasharray: 4 3; }
.dg-arrow { fill: none; stroke: var(--color-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-text { font-size: 11px; fill: var(--color-text-sub); }
@media (max-width: 1023px) { .probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .probs { grid-template-columns: 1fr; } }
/* 大事な一文の下線（10/19）：リンクの下線と見分けるため、細い線ではなく蛍光ペン状の太い帯＋太字 */
.em { font-weight: 700; background: linear-gradient(transparent 62%, rgb(216 0 15 / .16) 62%); }
.probs .nw { white-space: nowrap; } /* 文節の途中で折らない。折り位置は <wbr> */
/* 10/19 ユーザー指示「図と文章は分けて」：白い箱は図だけ。文は箱の下（灰の地）に置く */
.probs li { background: none; box-shadow: none; }
.probs figure { padding: var(--space-md); background: #fff; box-shadow: var(--shadow-sm); }
.probs p { padding: var(--space-md) 0 0; }
@media (min-width: 600px) { .cmp tbody th { width: 14em; } } /* 10/19 「傾斜ピン（傾斜コア）」「分割・抜く向きの見直し」を PC で1行に */
.dg-ghost { fill: none; stroke: var(--color-text-sub); stroke-width: 1; stroke-dasharray: 4 3; }
.dg-dot { fill: var(--color-text); }
/* 10/19 課題の呼び名（体言止め）を見出しに、その下に概要文 */
.probs h3 { margin-top: var(--space-md); font-size: var(--fs-base); line-height: var(--lh-heading); }
.probs h3 + p { padding-top: var(--space-xs); font-weight: 400; color: var(--color-text-sub); }
/* 10/19 解決策の図：白地の節なので枠線の箱に図だけ。番号・題・文は箱の下 */
.sols-fig { margin: 0 0 var(--space-md); padding: var(--space-md); border: 1px solid var(--color-line); background: #fff; }
.sols li:has(.sols-fig) { border-top: 0; padding-top: 0; }
/* 10/19 解決策のコマ図（ユーザー選択）：1行に1つ。左＝番号・題・文、右＝3コマ（段の間に ›） */
.sols--frames { grid-template-columns: 1fr; gap: var(--space-2xl); }
.sols--frames > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-md); align-items: start; }
.sols-text { grid-column: 1 / span 3; }
.frames { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.frames li { position: relative; }
.frames li + li::before { content: "›"; position: absolute; left: calc(-1 * var(--space-xl)); top: 32%; width: var(--space-xl); text-align: center; font-size: 28px; line-height: 1; color: var(--brand-500); }
.frames figure { margin: 0; padding: var(--space-sm); border: 1px solid var(--color-line); background: #fff; }
.frames p { margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-text); }
.frames-no { display: inline-block; margin-right: var(--space-xs); font-weight: 700; color: var(--brand-500); }
@media (max-width: 1023px) {
  .sols-text, .frames { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .frames { gap: var(--space-md); }
  .frames li + li::before { left: calc(-1 * var(--space-md)); width: var(--space-md); font-size: 20px; }
  .frames p { font-size: var(--fs-caption); }
}
.frames li { border-top: 0; padding-top: 0; } /* .sols li の上線をコマには付けない */
/* 10/19 設計の段階で確認したいこと：四角の枠＋チェックボックス（押すとチェックが付く・保存はしない） */
.cbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--grid-gutter); }
.cbox label { display: flex; align-items: flex-start; gap: var(--space-md); height: 100%; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-line); background: #fff; cursor: pointer; }
.cbox input { flex: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 2px solid var(--color-text-sub); border-radius: 2px; background: #fff; cursor: pointer; }
.cbox input:checked { border-color: var(--brand-500); background: var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cbox input:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.cbox label:hover { border-color: var(--color-text-sub); }
@media (max-width: 599px) { .cbox { grid-template-columns: 1fr; } }
/* 10/19 技術コラムのカードのラベル：灰色の塗り・枠なし（ムラタの技術記事方式） */
.card-tags--gray li { border-color: transparent; background: #E4E4E4; color: var(--color-text); }
.card-desc + .card-tags { margin-top: var(--space-sm); }
/* 10/19 解決策：横並びに戻し、各カードの図をカルーセルに（‹ › と点・自動では送らない） */
.fcar { margin-bottom: var(--space-md); border: 1px solid var(--color-line); background: #fff; }
.fcar-slide figure { margin: 0; padding: var(--space-md) var(--space-md) 0; }
.fcar-slide p { padding: var(--space-xs) var(--space-md) 0; font-size: var(--fs-sm); color: var(--color-text); min-height: 3.4em; }
.fcar-no { margin-right: var(--space-xs); font-weight: 700; color: var(--brand-500); }
.fcar-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-sm); }
.fcar-btn { width: 40px; height: 40px; border: 1px solid var(--color-line); border-radius: 50%; background: #fff; color: var(--color-text); font-size: 22px; line-height: 1; cursor: pointer; }
.fcar-btn:hover, .fcar-btn:focus-visible { border-color: var(--brand-500); color: var(--brand-500); }
.fcar-dots { display: flex; gap: 6px; }
.fcar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line); }
.fcar-dot.is-on { background: var(--brand-500); }
.sols li:has(.fcar) { border-top: 0; padding-top: 0; }
/* 確認事項のチェックボックスは表示だけ（押しても動かない） */
.cbox li { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-line); background: #fff; }
.cbox-mark { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--color-text-sub); border-radius: 2px; background: #fff; }
/* 10/19 基本の考え方：文章の右の余白に写真2枚（縦並び・PCは追従）。1023px以下は文章の下 */
@media (min-width: 1024px) {
  .basics-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
  .basics-grid .prose { grid-column: 1 / span 7; }
  .basics-grid .gfigs { grid-column: 9 / -1; grid-template-columns: 1fr; max-width: none; margin-top: var(--space-xl); position: sticky; top: calc(var(--header-h) - 40px + 57px + var(--space-lg)); }
}
.points > div[id] { scroll-margin-top: var(--space-xl); } /* HOME「補正技術を見る」の着地点（10/21） */
/* 生産拠点の地図：拠点の範囲をクリックでその拠点のカードへ（2026-10-21 ユーザー指示） */
.map { position: relative; }
.map-spot { position: absolute; border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--dur-base) var(--ease-out); }
.map-spot:hover, .map-spot:focus-visible { outline-color: var(--brand-500); }
.site[id] { scroll-margin-top: var(--space-xl); }
/* サイト内検索の結果ページ（確認用サイト用・2026-10-21） */
.sr-form { display: flex; align-items: center; gap: var(--space-md); max-width: var(--content-readable); }
.sr-count { margin-top: var(--space-xl); font-weight: 700; }
.sr-list { margin-top: var(--space-md); border-top: 1px solid var(--color-line); }
.sr-list a { display: grid; gap: var(--space-xs); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; }
.sr-list a:hover .sr-title { color: var(--brand-500); text-decoration: underline; }
.sr-cat { font-size: var(--fs-caption); font-weight: 700; color: var(--color-text-sub); }
.sr-title { font-size: var(--fs-md); font-weight: 700; }
.sr-snip { font-size: var(--fs-sm); color: var(--color-text-sub); }
.sr-list mark { background: var(--brand-50); color: inherit; font-weight: 700; }
@media (max-width: 599px) { .sr-form { flex-wrap: wrap; gap: var(--space-sm); } .sr-form .ss-type { flex: 1 1 100%; } .sr-form .ss-type select { flex: 1; } .sr-form .ss-word { flex: 1; } }

/* ---- 採用の入口「長津製作所の仕事」（recruit/about/・10/22） ---- */
/* 数字：赤は使わず（赤は線と記号だけ＝design.md）、数字の大きさで見せる（台帳10） */
.rg-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--grid-gutter); margin-top: var(--space-3xl); border-top: 1px solid var(--color-line); }
.rg-nums li { padding-top: var(--space-lg); }
.rg-nums-k { display: block; font-size: var(--fs-sm); color: var(--color-text-sub); }
.rg-nums-v { display: block; margin-top: var(--space-xs); font-weight: 700; }
.rg-nums-v b { margin-right: 2px; font-size: var(--fs-4xl); line-height: 1; }
/* 6つの仕事：3列。番号→職種名→ひとこと→説明→勤務地→先輩の話 */
.rg-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl) var(--grid-gutter); }
.rg-job figure { margin: 0; background: var(--color-bg-alt); }
.rg-job img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.rg-job-body { margin-top: var(--space-md); }
.rg-job-no { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-500); }
.rg-job-title { margin-top: var(--space-xs); font-size: var(--h-block); color: var(--brand-500); } /* 10/23 ユーザー案：職種名を赤文字に */
.rg-job-catch { margin-top: var(--space-xs); font-weight: 700; }
.rg-job-desc { margin-top: var(--space-sm); font-size: var(--fs-sm); }
.rg-job-place { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-text-sub); }
.rg-job-people { margin-top: var(--space-sm); }
/* 重要な語：赤い下線（10/23 ユーザー指示）。赤は線だけ・文字は黒のまま（tokens.css の「赤の面はロゴと主CTAだけ」に沿う） */
.rg-em { font-style: normal; font-weight: 700; } /* 10/23 夜 ユーザー指示：赤の下線（マーカー）はなくす。太字だけ残す。データの **…** はそのまま（戻すときはここに線の指定を足す） */
.rg-job-people a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap-min); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.rg-job-people a:hover { text-decoration: underline; }
@media (max-width: 1023px) { .rg-jobs, .rg-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .rg-jobs { grid-template-columns: 1fr; gap: var(--space-2xl); } .rg-nums-v b { font-size: var(--fs-3xl); } }

/* ==== 採用情報トップ（recruit/・10/22 ユーザー指示でこのページだけ変則：IDAJ キャリア採用の作り）==== */
/* KV：全面の写真とフレーズの切り替え（IDAJ 型）＋赤い社名ラベルと「採用情報」（10/22）。文字は白、左と下を #222 の半透明で沈める（読める強さ＝台帳3）
   PC＝左上に社名と採用情報、左下にフレーズと操作。SP＝写真の下の濃色の面に文字をまとめる（顔に重ねない） */
.rx-hero { position: relative; height: clamp(560px, 80vh, 760px); overflow: hidden; background: var(--color-ink); color: var(--color-on-ink); }
.rx-slides, .rx-slide { position: absolute; inset: 0; }
.rx-slide { opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.rx-slide.is-on { opacity: 1; }
.rx-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; } /* 寄る動きは送りの間隔（5秒）＋フェードに合わせる */
.rx-slide.is-on img { transform: scale(1); }
.rx-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 75%, transparent) 0%, color-mix(in srgb, var(--color-ink) 40%, transparent) 50%, transparent 80%), linear-gradient(0deg, color-mix(in srgb, var(--color-ink) 50%, transparent) 0%, transparent 50%); }
.rx-hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.rx-h1 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-bottom: auto; line-height: 1.1; }
.rx-h1-co { padding: 2px var(--space-sm); background: var(--brand-500); color: var(--color-on-ink); font-size: var(--fs-md); font-weight: 700; letter-spacing: .04em; }
.rx-h1-t { font-size: clamp(36px, 4vw, var(--fs-3xl)); font-weight: 700; letter-spacing: .06em; }
.rx-copies { display: grid; }
.rx-copy { grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rx-copy.is-on { opacity: 1; transform: none; transition-delay: .3s; }
.rx-title { max-width: 13em; font-size: clamp(26px, 6.6vw, var(--fs-5xl)); font-weight: 700; line-height: 1.25; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; }
.rx-text { max-width: 40em; margin-top: var(--space-lg); line-height: var(--lh-body); text-wrap: pretty; }
.rx-ctrl { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-2xl); }
.rx-pause { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border: 1px solid var(--color-on-ink-sub); border-radius: 50%; background: transparent; color: var(--color-on-ink); cursor: pointer; }
.rx-pause svg { width: 16px; height: 16px; }
.rx-dots { display: flex; gap: var(--space-sm); }
.rx-dots button { position: relative; width: 40px; height: var(--tap-min); border: 0; background: none; cursor: pointer; }
.rx-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--color-on-ink-sub); }
.rx-dots button[aria-current]::before { background: var(--brand-500); }
/* サブメッセージを改行させない（10/22 ユーザー指示）：768px以上は1行（14〜16px）、それより狭い幅は読点・句点の後でだけ折る */
.rx-text--nw .nw { white-space: nowrap; }
@media (min-width: 768px) { .rx-text--nw { max-width: none; white-space: nowrap; font-size: clamp(14px, calc((100vw - 160px) / 46), 16px); } }
@media (max-width: 399px) { .rx-text.rx-text--nw { font-size: 13px; } }
@media (max-width: 599px) {
  .rx-hero { height: auto; }
  .rx-slides { position: relative; aspect-ratio: 4 / 3; }
  .rx-slides::after { background: linear-gradient(0deg, var(--color-ink) 0%, transparent 22%); } /* 写真の下端を下の濃色の面へなじませるだけ（文字は重ねない） */
  .rx-hero-body { height: auto; padding-top: var(--space-md); padding-bottom: var(--space-2xl); }
  .rx-h1 { margin-bottom: var(--space-xl); }
  .rx-h1-co { font-size: var(--fs-sm); }
  .rx-h1-t { font-size: var(--fs-2xl); }
  .rx-title { font-size: clamp(24px, 7.2vw, var(--fs-xl)); }
  .rx-text { margin-top: var(--space-md); }
  .rx-ctrl { margin-top: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) { .rx-slide, .rx-slide img, .rx-copy { transition: none; } .rx-slide img { transform: none; } }

/* 赤い丸ボタン・丸い矢印（このページだけ IDAJ にならって角丸を丸く） */
.rx-pill { gap: var(--space-md); border-radius: var(--radius-full); }
.rx-arrow { width: 16px; height: 16px; flex: none; }
.rx-round { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid var(--color-text); border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.rx-round svg { width: 16px; height: 16px; }
.rx-round[data-dir="-1"] svg { transform: scaleX(-1); }
.rx-round:hover, .rx-round:focus-visible { border-color: var(--brand-500); background: var(--brand-500); color: var(--color-on-ink); } /* 赤（10/22 ユーザー指示：矢印はマウスを乗せると赤） */

/* はじめての方へ：文と、ずらして重ねた写真2枚 */
.rx-guide .crumbs { margin: calc(var(--space-2xl) * -1) 0 var(--space-2xl); }
.rx-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: center; }
.rx-guide-title { font-size: var(--h-section); line-height: var(--lh-heading); }
.rx-guide .prose { margin-top: var(--space-lg); }
.rx-guide .rx-pill { margin-top: var(--space-xl); }
.rx-guide-figs { position: relative; aspect-ratio: 6 / 5; }
.rx-guide-figs figure { position: absolute; width: 62%; margin: 0; }
.rx-guide-figs figure:first-child { top: 0; left: 0; }
.rx-guide-figs figure:last-child { right: 0; bottom: 0; box-shadow: var(--shadow-md); }
.rx-guide-figs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* 長津製作所について：濃色の箱に大きな英字と一覧（HOME の締めの帯と同じ #222） */
.rx-about-wrap { padding-bottom: var(--space-4xl); }
.rx-about { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-2xl); padding: var(--space-4xl) var(--space-3xl); border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-on-ink); }
.rx-about-title { font-size: var(--h-section); line-height: var(--lh-heading); }
.rx-about-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 96px; border-bottom: 1px solid color-mix(in srgb, var(--color-on-ink) 20%, transparent); color: var(--color-on-ink); font-size: var(--fs-md); text-decoration: none; }
.rx-about-list li:first-child a { border-top: 1px solid color-mix(in srgb, var(--color-on-ink) 20%, transparent); }
.rx-about-t { transition: transform var(--dur-large) var(--ease-out); }
.rx-about-list a:hover .rx-about-t { transform: translateX(var(--space-sm)); }
.rx-about-list .chev { color: var(--color-on-ink-sub); transition: color var(--dur-base) var(--ease-out); }
.rx-about-list a { transition: color var(--dur-base) var(--ease-out); }
.rx-about-list a:hover, .rx-about-list a:focus-visible, .rx-about-list a:hover .chev, .rx-about-list a:focus-visible .chev { color: var(--brand-500); } /* 10/22 ユーザー指示：マウスを乗せると赤い文字に */

/* 新卒採用：枠の箱（文＋写真）と、ずらして並べた写真のカード2枚 */
.rx-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-bg); }
.rx-box-body { padding: var(--space-3xl); }
.rx-box-title { font-size: var(--h-section); line-height: var(--lh-heading); }
.rx-box-body p { margin-top: var(--space-md); }
.rx-box-links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.rx-box-fig { margin: 0; }
.rx-box-fig img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.rx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-3xl); }
.rx-cards li:nth-child(2) { margin-top: var(--space-3xl); }
.rx-cards a { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-md); color: var(--color-on-ink); text-decoration: none; }
.rx-cards img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-large) var(--ease-out); }
.rx-cards a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--color-ink) 70%, transparent), transparent 55%); }
.rx-cards a:hover img { transform: scale(1.04); }
.rx-cards-t { position: absolute; z-index: 1; left: var(--space-xl); bottom: var(--space-xl); font-size: var(--fs-xl); font-weight: 700; }
.rx-cards-go { position: absolute; z-index: 1; right: var(--space-xl); bottom: var(--space-lg); display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--color-on-ink-sub); border-radius: 50%; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
/* マウスを乗せると矢印の丸を赤に（10/22 ユーザー指示。最後の入口2つと同じ動き） */
.rx-cards a:hover .rx-cards-go, .rx-cards a:focus-visible .rx-cards-go { border-color: var(--brand-500); background: var(--brand-500); }

/* スタッフインタビュー：大きな英字と、縦長の写真カードの横送り（画面の端まで流す） */
.rx-people-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.rx-people-title { font-size: var(--h-section); line-height: var(--lh-heading); } /* 10/22 ユーザー指示：英字の People →「働く人たち」 */
.rx-people-sub { margin-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-text-sub); }
.rx-people-nav { display: flex; gap: var(--space-sm); }
.rx-people { --edge: max(var(--space-2xl), calc((100vw - var(--container-max)) / 2)); display: flex; gap: var(--grid-gutter); margin-top: var(--space-2xl); padding: 0 var(--edge) var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--edge); scrollbar-width: none; }
.rx-people::-webkit-scrollbar { display: none; }
.rx-people li { flex: 0 0 clamp(220px, 24vw, 288px); scroll-snap-align: start; }
.rx-people a { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-md); color: var(--color-on-ink); text-decoration: none; }
.rx-people img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-large) var(--ease-out); }
.rx-people a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--color-ink) 75%, transparent), transparent 45%); }
.rx-people a:hover img { transform: scale(1.04); }
.rx-people-meta { position: absolute; z-index: 1; left: var(--space-lg); right: var(--space-lg); bottom: var(--space-lg); }
.rx-people-dept { display: block; font-size: var(--fs-caption); color: var(--color-on-ink-sub); }
.rx-people-name { display: block; margin-top: var(--space-xs); font-size: var(--fs-md); font-weight: 700; }

/* 最後の入口2つ：大きな文字と丸い矢印。線で左右に分ける */
.rx-entry-msg { font-size: var(--fs-md); text-align: center; }
.rx-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2xl); border-block: 1px solid var(--color-line); }
.rx-entry-grid li + li { border-left: 1px solid var(--color-line); }
.rx-entry-grid a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 200px; padding: var(--space-2xl) var(--space-3xl); color: var(--color-text); text-decoration: none; }
.rx-entry-t { display: block; font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-heading); }
.rx-entry-s { display: block; margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-text-sub); }
.rx-round--lg { width: 80px; height: 80px; border-color: var(--color-line); }
.rx-entry-grid a:hover .rx-round--lg, .rx-entry-grid a:focus-visible .rx-round--lg { border-color: var(--brand-500); background: var(--brand-500); color: var(--color-on-ink); }

@media (max-width: 1023px) {
  .rx-guide-grid, .rx-about, .rx-box { grid-template-columns: 1fr; }
  .rx-about { padding: var(--space-3xl) var(--space-xl); }
  .rx-box-fig { order: -1; }
}
@media (max-width: 599px) {
  .rx-guide .crumbs { margin-top: calc(var(--space-xl) * -1); }
  .rx-box-body { padding: var(--space-xl) var(--space-lg); }
  .rx-cards { grid-template-columns: 1fr; gap: var(--space-md); }
  .rx-cards li:nth-child(2) { margin-top: 0; }
  .rx-people { --edge: var(--space-md); }
  .rx-people li { flex-basis: 70vw; }
  .rx-entry-grid { grid-template-columns: 1fr; }
  .rx-entry-grid li + li { border-left: 0; border-top: 1px solid var(--color-line); }
  .rx-entry-grid a { min-height: 140px; padding: var(--space-xl) var(--space-sm); }
  .rx-round--lg { width: 56px; height: 56px; }
  .rx-entry-t { font-size: var(--fs-md); }
}
@media (max-width: 374px) { .anchors--sticky ul { gap: 0 var(--space-sm); } } /* 360px 幅でも採用の入口の5項目を1行に（10/22） */

/* 採用の入口の冒頭KV（10/23）：青空＋社員＋精密部品の画像に、白いコピーを左上へ重ねる。SP は縦長の別画像でコピーは上 */
.rg-kv-wrap { margin-top: var(--space-2xl); }
.rg-kv { position: relative; margin: 0; overflow: hidden; }
.rg-kv img { display: block; width: 100%; height: auto; }
.rg-kv-copy { position: absolute; left: 7%; top: 18%; color: #fff; font-size: clamp(24px, 3.6vw, 52px); font-weight: 500; line-height: 1.45; letter-spacing: .08em;
  text-shadow: 0 2px 18px rgba(10, 60, 130, .28); }
.rg-kv-copy .br-sp { display: none; }
@media (max-width: 599px) { .rg-kv-wrap { margin-top: var(--space-lg); padding: 0; } .rg-kv-copy { left: 7%; top: 5%; font-size: clamp(24px, 7.4vw, 32px); } .rg-kv-copy .br-sp { display: inline; } }

/* 10/23 夜 ユーザー指示：採用の入口「長津製作所は、金型をつくる会社です」の写真を、見出し〜本文の上下中央に（このページだけ） */
#company .mr { align-items: center; }
.rg-note-top { margin-top: var(--space-xl); }
.rg-note-top + .rg-kv-wrap { margin-top: var(--space-lg); }
.rg-red { color: var(--brand-500); } /* 10/23 夜：採用の入口の見出しの一部を赤字に */

/* 採用トップ：募集の種類への入口（10/24 Gemini の指摘を反映。新卒・中途・パートへページ内で移動） */
.rx-jump ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); max-width: 720px; margin: 0 0 var(--space-2xl); padding: 0; list-style: none; }
.rx-jump a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md) 0 var(--space-lg); border: 1px solid var(--color-line); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text); font-weight: 700; text-decoration: none; transition: border-color .2s; }
.rx-jump a:hover { border-color: var(--color-text); }
.rx-jump .chev { transform: rotate(90deg); color: var(--brand-500); flex: none; }
@media (max-width: 599px) { .rx-jump ul { gap: var(--space-xs); } .rx-jump a { justify-content: center; gap: 2px; padding: 0 var(--space-xs); font-size: var(--fs-sm); white-space: nowrap; } }
/* 10/27 写真2枚：事業内容の金型トライ（成形機＋測定機）・部品加工（超精密＋一般的な部品） */
.mr-fig--duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } /* スマホ・タブレットは横に2枚、PC（左ナビあり）は縦に2枚 */
.ext-card--duo { grid-template-columns: 400px 1fr; }
.ext-card-figs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 1024px) { .side-main .mr-fig--duo { grid-template-columns: 1fr; } .side-main .mr-fig--duo img { aspect-ratio: 4 / 3; } }
@media (max-width: 1023px) { .ext-card--duo { grid-template-columns: 1fr; } }