@charset "UTF-8";

/* ============================================================
   丸幸ジオテック コーポレートサイト
   方針: 堅実・信頼のコーポレート（会社案内パンフレットの品格）
   見出し: Noto Serif JP / 本文: Noto Sans JP / 欧文・数字: EB Garamond
   オレンジはロゴ由来の効かせ色。罫・主ボタン・大型数字に限定して使う。
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: transparent; border: 0; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ---- Design tokens ---- */
:root {
  --ink: #1a1c19;
  --rock: #33362f;
  --orange: #e85a18;
  --orange-deep: #b34410;
  --snow: #f6f6f3;
  --paper: #ffffff;
  --muted: #5f635c;
  --line: #dcded9;
  --accent-text: #b34410; /* 小さな文字用オレンジ（白地コントラストAA確保） */
  --ink-soft: #3d403a;    /* 暗面上の罫線 */

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --en: "EB Garamond", "Times New Roman", serif;

  --fs-hero: clamp(2.1rem, 4.4vw, 3.5rem);
  --fs-page-h1: clamp(1.9rem, 3.8vw, 2.9rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-h3: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-num-xl: clamp(2.4rem, 4vw, 3.6rem);
  --fs-label: .78rem;

  --ls-serif: .06em;
  --ls-serif-wide: .08em;
  --ls-en: .16em;
  --lh-heading: 1.5;
  --lh-body: 1.95;

  --max: 1200px;
}

/* ---- Base ---- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  overflow-wrap: break-word;
  line-break: strict;
}
body.menu-open { overflow: hidden; }
:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
::selection { background: #f3ddd2; }

p { line-height: var(--lh-body); text-wrap: pretty; }
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-serif);
  font-feature-settings: "palt";
  text-spacing-trim: space-all;
  text-wrap: balance;
  word-break: auto-phrase;
}
h3 { font-weight: 700; line-height: 1.6; letter-spacing: .03em; text-wrap: balance; }

.container { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
.section { padding: clamp(88px, 10vw, 136px) 0; position: relative; }

.utility-label, .eyebrow {
  font-family: var(--en);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--accent-text); margin-bottom: 26px; }
.eyebrow span { width: 36px; height: 1px; background: var(--orange); }
.eyebrow.light { color: #e5a37d; }
.eyebrow.light span { background: #e5a37d; }

.section-title { max-width: 820px; }
/* 見出しブロックと後続コンテンツが詰まらないよう最低限の間隔を確保する。
   既に margin-top を持つブロック（grid類の48〜64px等）とは隣接マージン相殺で従来値のまま */
.section-title:not(:last-child) { margin-bottom: 32px; }
/* grid/flex直下では見出しと後続が横並びになる。マージンは相殺されず gap に足されるため打ち消す */
.intro-grid > .section-title,
.section-heading-row > .section-title { margin-bottom: 0; }
.section-title h2 { font-size: var(--fs-h2); }
.section-intro { max-width: 640px; margin-top: 26px; color: var(--muted); font-size: .95rem; }
.lead-copy {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: .04em;
  font-feature-settings: "palt";
}
/* 本文中の語句をオレンジ太字で立てる。暗い地のセクションは明るいオレンジに差し替える */
.copy-accent { font-weight: 700; color: var(--accent-text); }

.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 12px;
  min-height: 54px; padding: 0 36px;
  border: 1px solid transparent;
  font-size: .85rem; font-weight: 500; letter-spacing: .1em;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.button-orange { background: var(--orange); color: white; }
.button-orange:hover { background: var(--orange-deep); }
.button-outline { border-color: var(--ink); background: transparent; }
.button-outline:hover { background: var(--ink); color: white; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--rock); }
.text-link {
  display: inline-flex; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--ink);
  padding: 10px 2px; margin-top: 40px;
  font-size: .9rem; font-weight: 500; letter-spacing: .06em;
  transition: color .3s, border-color .3s;
}
.text-link span { color: var(--orange); transition: transform .3s; }
.text-link:hover { color: var(--orange-deep); border-color: var(--orange-deep); }
.text-link:hover span { transform: translateX(4px); }

/* ---- Header ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: 82px;
  padding: 0 clamp(24px, 3.5vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid rgba(26, 28, 25, .1);
  backdrop-filter: blur(14px);
  z-index: 100;
}
/* logo.png は上下に21%ずつ透明の余白が焼き込まれており、height:52px でも図版は30pxしか
   描画されずヘッダー高82pxに対して小さく見えていた。ヘッダーには余白を落とした
   logo-header.png（元画像を x63,y52 から 869×140 で切り出したもの）を使い、
   height を図版そのものの高さとして指定する。 */
.brand img { height: clamp(30px, 3.2vw, 44px); width: auto; display: block; }
.desktop-nav { display: flex; align-items: center; height: 100%; }
.desktop-nav > a {
  display: grid; place-items: center; height: 100%;
  padding: 0 clamp(10px, 1.2vw, 20px);
  font-size: .82rem; font-weight: 500; letter-spacing: .05em;
  white-space: nowrap; position: relative;
  transition: color .3s;
}
.desktop-nav > a:not(.nav-contact):hover { color: var(--orange-deep); }
.desktop-nav > a:not(.nav-contact)::after {
  content: ""; position: absolute; bottom: 0; width: 0; height: 2px;
  background: var(--orange); transition: width .3s;
}
.desktop-nav > a:hover::after, .desktop-nav > a[aria-current="page"]::after { width: 50%; }
.desktop-nav .nav-contact { height: 48px; margin-left: 14px; background: var(--orange); color: #fff; padding-inline: 26px; transition: background-color .3s; }
.desktop-nav .nav-contact:hover { background: var(--orange-deep); }
.menu-button { display: none; width: 48px; height: 48px; background: var(--ink); padding: 14px 12px; position: relative; z-index: 120; cursor: pointer; }
.menu-button span { display: block; height: 1px; margin: 7px 0; background: white; transition: transform .25s; }
.menu-scrim, .mobile-nav { display: none; }

/* ---- Image placeholders（正式素材の差し替え待ち。等高線モチーフの静かな面） ---- */
.media-placeholder {
  min-height: 300px; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 28px; overflow: hidden;
  color: var(--muted); background: var(--snow);
  box-shadow: inset 0 0 0 1px var(--line);
  isolation: isolate;
  background-size: cover;
  background-position: center;
}
.media-placeholder::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-radial-gradient(circle at 82% 118%, transparent 0 46px, rgba(26, 28, 25, .05) 46px 47px);
}
.media-placeholder.is-dark {
  color: #b6bab2; background-color: #22241f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.media-placeholder.is-dark::before {
  background: repeating-radial-gradient(circle at 82% 118%, transparent 0 46px, rgba(255, 255, 255, .05) 46px 47px);
}
.media-placeholder .placeholder-id {
  position: absolute; left: 20px; top: 18px; padding: 5px 10px;
  border: 1px solid rgba(179, 68, 16, .45); color: var(--accent-text);
  background: rgba(255, 255, 255, .82);
  font-family: var(--en); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
}
.media-placeholder.is-dark .placeholder-id {
  border-color: rgba(240, 160, 106, .45); color: #eda574; background: rgba(0, 0, 0, .35);
}
.media-placeholder strong { font-size: .95rem; font-weight: 500; letter-spacing: .04em; }
.media-placeholder small { font-size: .7rem; opacity: .65; }
.media-placeholder.has-image {
  background-color: var(--ink);
}
.media-placeholder.has-image > * {
  display: none;
}
.media-placeholder.has-image > .mg-drawing { display: block; } /* 施工図SVGは隠さない */
.media-placeholder.has-image::before {
  opacity: .14;
  mix-blend-mode: soft-light;
}
/* 人物ポートレート用。頭上の余白が少ない写真なので上端基準で切り抜く */
.media-placeholder.is-portrait-top { background-position: center top; }
.media-placeholder.has-lightbox { cursor: zoom-in; }
.map-embed { min-height: 240px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); margin-top: 26px; }
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 240px; }
/* アクセスの地図（本文の隣に置く版）。画像枠より縦を取りたいので4:3で固定する */
/* aspect-ratio と min-height を併用すると、min-height ÷ 比率 がそのまま「最小幅」として効く
   （260px ÷ 3/4 = 347px）。狭い画面ではこれがコンテナ幅を超え、ページ全体に横スクロールが出る。
   比率だけで形は保てるので高さの下限は持たせない（iframe側も同じ理由で min-height:0）。 */
.map-embed--panel { margin-top: 0; aspect-ratio: 4 / 3; min-height: 0; }
.map-embed--panel iframe { min-height: 0; }

/* 交通手段ごとのアクセス（見出し＋一文）。項目は増減しても崩れない */
.access-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.access-list > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 4px 16px; align-items: baseline; }
.access-list dt {
  font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-text); padding-left: 10px; border-left: 2px solid var(--orange);
}
.access-list dd { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.9; }

/* ---- 施工写真ライトボックス（クリックで拡大） ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px;
  background: rgba(0, 0, 0, .85);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-image {
  max-width: min(1100px, 92vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lightbox-caption {
  margin: 0; max-width: min(1100px, 92vw);
  color: var(--paper); font-family: var(--sans); font-size: .9rem; letter-spacing: .04em;
  text-align: center;
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; line-height: 1;
  color: var(--paper); font-size: 2rem; font-family: var(--sans);
  background: transparent; border: 0; cursor: pointer;
}
.lightbox-close:hover { color: var(--orange); }
body.lightbox-open { overflow: hidden; }

/* ---- 公開前プレビューの帯 ---- */
.cms-preview-banner {
  margin: 0 0 24px; padding: 12px 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: .86rem; letter-spacing: .04em; text-align: center;
}
.cms-preview-banner.is-error { background: var(--orange-deep); }
.media-placeholder.is-process-visual {
  background:
    radial-gradient(circle at 14% 50%, #e85a18 0 8px, transparent 9px),
    radial-gradient(circle at 32% 50%, #f5f0ea 0 7px, transparent 8px),
    radial-gradient(circle at 50% 50%, #f5f0ea 0 7px, transparent 8px),
    radial-gradient(circle at 68% 50%, #f5f0ea 0 7px, transparent 8px),
    radial-gradient(circle at 86% 50%, #e85a18 0 8px, transparent 9px),
    linear-gradient(90deg, transparent 14%, rgba(232, 90, 24, .85) 14% 86%, transparent 86%),
    repeating-radial-gradient(circle at 82% 118%, transparent 0 46px, rgba(255, 255, 255, .06) 46px 47px),
    #22241f;
  background-size: auto, auto, auto, auto, auto, auto 2px, auto, auto;
  background-repeat: no-repeat;
  color: #c9ccc6;
}
.media-placeholder.is-process-visual > * {
  display: none;
}

/* ---- Home hero ---- */
/* 背景（写真／将来は動画）・等高線・暗幕の3枚は position: fixed で画面に貼り付ける。
   ヒーロー本文だけがその上を流れ、ABOUTセクションが来たら不透明な背景で覆われて
   見えなくなる＝そこで固定が解けたように見える。
   overflow: clip は fixed の子孫まで切ってしまうので外してある（中身は全て
   fixed / absolute か .container 内なので、外してもはみ出さない）。 */
.home-hero {
  /* 880px上限だと縦長の画面ではヒーローがビューポートより短くなり、
     スクロール0の時点で既にABOUTが下から入ってしまう＝背景が固定されている区間が消える。
     ちょうど1画面分にして、ABOUTが来るまで背景が画面に貼り付いたままになるようにする。 */
  min-height: 100svh; padding-top: 82px;
  position: relative; display: flex; align-items: center;
  color: white; background: var(--ink);
  /* 等高線キャンバス（z-index:1）が後続セクションの上へ抜けないよう、
     ヒーローで重ね合わせコンテキストを閉じる。containing block は作らないので
     子の position: fixed はビューポート基準のまま。 */
  isolation: isolate;
}
.home-hero > .media-placeholder { position: fixed; inset: 82px 0 0; min-height: 0; padding: 0; }
.home-hero > .media-placeholder > * { display: none; }
/* 動画に差し替えたときは中の <video> だけ表示する（施工図SVGと同じ扱い） */
.home-hero > .media-placeholder > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 生成的等高線（JS注入）。写真とshade/overlayの間に置き、shadeがテキスト背後で減衰させる */
.mg-terrain-canvas { position: absolute; inset: 82px 0 0; z-index: 1; pointer-events: none; }
/* トップの等高線は固定した写真に重なるので、こちらも画面に貼り付ける */
.home-hero > .mg-terrain-canvas { position: fixed; }
@media (max-width: 560px) { .mg-terrain-canvas { inset: 70px 0 0; } }
@media print { .mg-terrain-canvas { display: none; } }
.hero-shade {
  position: fixed; inset: 82px 0 0;
  background: linear-gradient(90deg, rgba(12, 14, 11, .88) 0%, rgba(12, 14, 11, .5) 55%, rgba(12, 14, 11, .22) 100%),
    linear-gradient(0deg, rgba(12, 14, 11, .55), transparent 40%);
}
.hero-grid { display: none; }
.home-hero-content { position: relative; z-index: 2; padding-block: 40px; }
.hero-kicker {
  max-width: 560px; margin-bottom: 36px;
  color: #e5a37d; font-family: var(--en);
  font-size: clamp(.72rem, .9vw, .82rem); font-weight: 600; letter-spacing: .22em;
}
.home-hero h1 {
  max-width: 880px;
  font-size: var(--fs-hero);
  letter-spacing: var(--ls-serif-wide);
  line-height: 1.55;
}
.home-hero h1 span { display: block; }
.home-hero h1 .accent { color: #ef8a52; }
.home-hero-content > p:not(.hero-kicker) {
  max-width: 620px; margin: 38px 0 44px;
  font-size: clamp(.92rem, 1.2vw, 1.02rem); line-height: 2.1; color: #dadcd6;
}
/* ヒーロー本文の折り返し制御。
   span を inline-block にすることで、その塊の内部では折り返さない＝
   狭い画面でも文節の途中（「橋梁補/修」のような位置）で切れない。
   意図した改行は HTML 側の <br> だけ。 */
.hero-lead span { display: inline-block; }
.scroll-cue {
  position: absolute; left: 44px; bottom: 36px;
  font-family: var(--en); font-size: .68rem; letter-spacing: .24em;
  writing-mode: vertical-rl; z-index: 3; color: #b6bab2;
}
.scroll-cue span { display: inline-block; width: 1px; height: 56px; background: var(--orange); margin-top: 14px; }
.hero-fact {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  width: min(320px, 28vw); padding: 30px 40px 34px;
  background: rgba(18, 20, 16, .88); border-top: 2px solid var(--orange);
  backdrop-filter: blur(6px);
  display: grid;
}
.hero-fact small { font-family: var(--en); font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: #e5a37d; }
.hero-fact strong { margin-top: 10px; font-family: var(--en); font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 500; line-height: 1; font-feature-settings: "lnum"; }
.hero-fact span { font-size: .74rem; margin-top: 10px; color: #b6bab2; letter-spacing: .04em; }

/* ---- Home sections ---- */
/* ヒーローの背景を position: fixed にしたため、後続セクションが透明だと
   その裏に貼り付いた映像が透けてしまう。ABOUT以外には地の色を明示する
   （strengths / business / recruit / contact は元から背景色を持っている）。 */
.projects-home { background: var(--paper); }

/* ---- ABOUT: 背景はヒーローの映像そのもの ----
   固定したブラー映像の上に文字を載せるので、このセクションだけ暗地の配色にする。
   .about-home は透明のままにして映像を透かし、次の strengths（墨地）が覆うことで
   そこで映像が見えなくなる＝固定が解けたように見える。
   映像の上には .hero-shade（左が濃い暗幕）も固定で乗るので、左側の本文は読める。 */
.about-home { color: white; }
.about-home h2, .about-home .lead-copy { color: white; }
.about-home .copy-accent { color: #ef8a52; }
.about-home .split-layout > div:first-child > p { color: #cdd0ca; }
.about-home .eyebrow { color: #e5a37d; }
.about-home .eyebrow span { background: #e5a37d; }
.about-home .name-note { background: rgba(14, 16, 12, .55); }
.about-home .name-note b { color: white; }
.about-home .name-note span { color: #cdd0ca; }
.about-home .text-link { color: white; border-bottom-color: rgba(255, 255, 255, .45); }
.about-home .text-link:hover { color: #ef8a52; border-bottom-color: #ef8a52; }
/* 地層の帯は墨色だと暗地で沈むので白に反転 */
.about-home.strata-section::after {
  opacity: .08;
  background: repeating-linear-gradient(176deg, transparent 0 17px, #fff 18px 19px);
}
/* clip は hidden と同じ見た目でスクロールコンテナを生成しない。
   hidden だと内部要素の animation-timeline: view() が進捗0で固定され動かなくなる。 */
.strata-section { overflow: clip; }
.strata-section::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; opacity: .07;
  background: repeating-linear-gradient(176deg, transparent 0 17px, var(--rock) 18px 19px);
}
.split-layout { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
.split-layout > div:first-child > p { margin-top: 30px; color: var(--muted); }
.split-layout .lead-copy { color: var(--ink); }
.split-layout .media-placeholder { min-height: 620px; }
.name-note {
  margin-top: 36px; padding: 26px 28px;
  border-left: 2px solid var(--orange); background: var(--snow);
  display: grid; gap: 10px;
}
.name-note b { font-family: var(--serif); font-weight: 600; letter-spacing: .05em; font-feature-settings: "palt"; }
.name-note span { color: var(--muted); font-size: .9rem; line-height: 1.9; }

.strengths-section { background: var(--ink); color: white; }
.strengths-section .section-intro { color: #a9ada5; }
.strength-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  margin-top: 64px; background: var(--ink-soft); border: 1px solid var(--ink-soft);
}
.strength-card { grid-column: span 2; min-height: 260px; padding: 36px 34px; background: #212420; transition: background-color .3s; }
.strength-card:nth-child(4), .strength-card:nth-child(5) { grid-column: span 3; }
.strength-card:hover { background: #2a2d28; }
.strength-card > span {
  display: inline-block; color: #e5a37d;
  font-family: var(--en); font-size: .95rem; font-weight: 500; letter-spacing: .12em;
  padding-bottom: 14px; border-bottom: 1px solid var(--orange);
}
.strength-card h3 {
  margin: 40px 0 18px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: .05em;
  font-feature-settings: "palt";
}
.strength-card p { color: #a9ada5; font-size: .88rem; line-height: 1.9; }

.business-home { background: var(--snow); }
/* 1行＝1枚のパネル。写真とテキストを枠で閉じるのは、左右が交互に入れ替わる並びで
   番号がどちらの写真を指すのか読み取れなかったため（行の区切りが罫線1本では足りない） */
.business-home-grid { display: grid; gap: 20px; margin-top: 64px; }
.business-home-card { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; border: 1px solid var(--line); background: #fff; }
.business-home-card:nth-child(even) .media-placeholder { order: 2; }
.business-home-card > div { padding: clamp(30px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.business-home-card > div > span { color: var(--accent-text); font-family: var(--en); font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; }
.business-home-card small { margin: 12px 0 28px; color: var(--muted); font-family: var(--en); font-size: .72rem; font-weight: 600; letter-spacing: var(--ls-en); }
.business-home-card h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: var(--ls-serif); line-height: 1.55;
  font-feature-settings: "palt";
}
.business-home-card p { margin-top: 20px; color: var(--muted); font-size: .92rem; }
.business-home-card b { margin-top: 30px; color: var(--accent-text); font-size: .85rem; font-weight: 500; letter-spacing: .08em; transition: color .3s; }
.business-home-card:hover b { color: var(--orange); }

.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
/* 横スクロールのレール。HTML側で .container を併用し、他セクションと同じ幅・同じ左右位置に
   収めている。全幅ブリードだと左右が他とズレるうえ、スクロールバーまで画面端から端まで走って
   このセクションだけ枠から飛び出して見えるため。
   コンテナ幅に収めたことでバーも 180〜1380 の内側に収まるので、バーは出したままにする
   （マウス操作では横スクロールの手段がバーしかないので、消すと4枚目が見られなくなる）。 */
.project-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 30vw); gap: 20px;
  margin-top: 58px; padding-bottom: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.project-card { scroll-snap-align: start; padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.project-card .media-placeholder { aspect-ratio: 4/3; min-height: 0; }
.project-card > div:last-child { padding: 24px 4px 0; }
.project-card small { color: var(--accent-text); font-size: .75rem; font-weight: 500; letter-spacing: .08em; }
.project-card h3 { margin: 12px 0 10px; font-size: 1.02rem; line-height: 1.7; }
.project-card p { color: var(--muted); font-size: .8rem; font-feature-settings: "lnum"; }

.machinery-home { min-height: 640px; position: relative; display: flex; align-items: center; overflow: clip; color: white; }
.machinery-home > .media-placeholder { position: absolute; inset: 0; min-height: 0; }
.machinery-home > .media-placeholder > * { display: none; }
.machinery-home::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 18, 15, .93), rgba(16, 18, 15, .35)); }
.machinery-home-content { position: relative; z-index: 2; }
.machinery-home-content h2 { max-width: 720px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.machinery-home-content h2 em { display: block; color: #ef8a52; font-style: normal; }
.machinery-home-content > p:not(.eyebrow) { max-width: 580px; margin: 32px 0 40px; color: #cdd0ca; font-size: .95rem; }

/* 採用セクション: 画像は枠を持たず、右半分〜画面端までのフルブリード。
   テキストと重なる帯は背景色からのグラデーションで抜いて可読性を確保する。 */
.recruit-home {
  background: var(--snow);
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 800px;
}
/* テキスト側だけを重ね順で持ち上げる。container を relative にすると
   画像の絶対配置の基準が container になり、画面端まで伸びないため触らない。 */
.recruit-panel > div:first-child { position: relative; z-index: 2; }
.recruit-panel { display: grid; grid-template-columns: 1fr .86fr; gap: clamp(50px, 6vw, 80px); align-items: center; }
.recruit-panel > div:first-child > p { margin: 28px 0; color: var(--muted); }
.recruit-panel .media-placeholder {
  position: absolute;
  inset: 0 0 0 40%;
  min-height: 0;
  box-shadow: none;
  z-index: 1;
}
.recruit-panel .media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--snow) 0%,
    rgba(246, 246, 243, .92) 12%,
    rgba(246, 246, 243, .4) 28%,
    rgba(246, 246, 243, 0) 45%);
}
.check-list { margin: 34px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-list li {
  padding: 15px 14px 15px 38px; background: #fff; border: 1px solid var(--line);
  position: relative; font-size: .86rem; font-weight: 500; letter-spacing: .02em;
}
.check-list li::before { content: ""; position: absolute; left: 15px; top: 21px; width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); }

/* ---- Shared lower pages ---- */
.page-hero { min-height: 480px; padding-top: 82px; position: relative; display: flex; align-items: end; overflow: clip; color: white; background: var(--ink); }
.page-hero > .media-placeholder { position: absolute; inset: 82px 0 0; min-height: 0; }
.page-hero > .media-placeholder > * { display: none; }
.page-hero-overlay { position: absolute; inset: 82px 0 0; background: linear-gradient(90deg, rgba(12, 14, 11, .88), rgba(12, 14, 11, .35)); }
.page-hero-content { position: relative; z-index: 2; padding-bottom: 68px; }
.page-hero h1 { font-size: var(--fs-page-h1); letter-spacing: var(--ls-serif-wide); }
.page-hero-content > p:last-child { max-width: 640px; margin-top: 22px; color: #cdd0ca; font-size: .95rem; }
.strata-mark { position: absolute; right: 0; bottom: 0; width: 34%; height: 150px; z-index: 2; opacity: .25; }
.strata-mark i { display: block; height: 45px; border-top: 1px solid #ef8a52; transform: skewY(-8deg); }

/* grid項目の既定は min-width:auto ＝「中身の最小幅」より縮まない。
   word-break:auto-phrase の見出し（1文節が分割されない）や aspect-ratio 付きの枠が入ると、
   狭い画面でトラックがコンテナ幅を超え、ページ全体に横スクロールが出る。
   0にしてトラックを縮められるようにする（収まらない文字は overflow-wrap で折り返る）。 */
.split-layout > *, .intro-grid > *, .content-block-grid > *,
.contact-layout > *, .recruit-panel > * { min-width: 0; }

/* ---- 各ページ冒頭のステートメント（会社概要 / 営業品目 / 施工実績 / 重機・機材）----
   直上のページヒーローが「暗い写真＋見出し」なので、ここで写真を重ねると
   同じ表現が2連続になる。そこで写真は使わず、見出しをコンテナ幅いっぱいまで
   引き伸ばして文字そのものを図版として扱う。
   下に続くセクション（2カラムの見出し＋本文）とは組み方が変わるので、
   ページの入口でリズムが切り替わる。採用情報は構成が別なので適用しない。 */
/* 右側の余白に敷くうねる等高線（generative.js が注入）。
   本文の背後には回るが、濃度を抑えてあるので可読性は落ちない。
   clip は hidden と違いスクロールコンテナを作らないので view() の進捗を止めない。 */
.statement-section { overflow: clip; }
.statement-section > .container { position: relative; z-index: 1; }
.statement-wave { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.statement-wave path { fill: none; stroke: var(--ink); stroke-opacity: .13; stroke-width: 1; }
.statement-wave path.is-accent { stroke: var(--orange); stroke-opacity: .38; }
@media print { .statement-wave { display: none; } }

.statement-lead {
  margin-top: 4px;
  /* 2行に収まる幅では、長い行がコンテナの約9割を占めるように倍率を決めてある。
     これより大きくすると端に触れ、小さくすると行数が前後して落ち着かない。
     下限1.6remは、見出しが最も長い施工実績（12字）でも狭い画面で端に触れない値。
     ページごとに文字数が違うので占有率は61〜93%に散るが、字の大きさは全ページ共通にして
     ページを移動したときに見出しの印象が変わらないようにしている。 */
  font-size: clamp(1.6rem, 6.2vw, 5rem);
  line-height: 1.35; letter-spacing: .02em;
}
/* 文節ごとに inline-block にして、折り返しを必ず文節の切れ目で起こす。
   「集団へ。」が塊のまま動くので「へ。」だけが行に取り残されない
   （トップの hero-lead と同じ手法）。 */
.statement-lead span { display: inline-block; }
/* 480px 未満は2行だと行がコンテナ幅ぎりぎり（実測100%）になり窮屈なので、
   最後の文節をブロックにして3行に確定させる。 */
@media (max-width: 479px) {
  .statement-lead span:last-child { display: block; }
}
/* 本文は理念そのものなので、見出しと同じ明朝で読ませる。2文あるが軽重は付けない。 */
.statement-body {
  max-width: 33em; margin-top: clamp(34px, 3.6vw, 46px);
  font-family: var(--serif); font-weight: 600;
  font-size: 1.18rem; line-height: 2.05; letter-spacing: .04em;
  font-feature-settings: "palt"; color: var(--ink);
  /* 通常の折り返しだと狭い画面で末行が3〜5字になる。balance で各行の長さを
     均すと最短行が10字を下回らなくなり、行末に数文字だけ残らない（実測で確認） */
  text-wrap: balance;
}
@media (max-width: 760px) {
  .statement-body { font-size: 1.06rem; }
}

.intro-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px, 7vw, 90px); align-items: start; }
.intro-grid > p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600;
  line-height: 2.1; letter-spacing: .05em;
  font-feature-settings: "palt";
}
.content-block { padding: 80px 0; border-top: 1px solid var(--line); }
.content-block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 5vw, 70px); align-items: center; }
.content-copy h2 { font-size: var(--fs-h2); }
.content-copy h3 { margin: 24px 0 18px; font-size: var(--fs-h3); }
.content-copy p + p { margin-top: 22px; }
.content-copy p { color: var(--muted); font-size: .95rem; }
.detail-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.detail-list li { padding: 10px 14px; background: var(--snow); border-left: 2px solid var(--orange); color: var(--ink); font-size: .8rem; font-weight: 500; letter-spacing: .02em; }
/* 淡グレー地のセクション。チップが同色で背景に沈むため白へ反転させる */
.is-tinted { background: var(--snow); }
.is-tinted .detail-list li { background: white; }

/* 地層の重なり。ひとつ前のセクションの色が弧を描いて次のセクションへ垂れ込む。
   上下の境界で向きを揃えることで平行な堆積層に見せる（逆向きだと中央がくびれる）。
   弧の高さはセクションの上パディングより常に小さいので見出しには被らない。 */
.strata-edge > .container { position: relative; z-index: 1; }
.strata-edge::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0;
  height: clamp(34px, 4.5vw, 80px);
  background: var(--strata-from, var(--paper));
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}

.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: white; }
.fact { min-height: 210px; padding: 34px; border: 1px solid var(--ink-soft); display: flex; flex-direction: column; justify-content: end; }
.fact strong { font-family: var(--en); font-size: var(--fs-num-xl); font-weight: 500; color: #ef8a52; line-height: 1; font-feature-settings: "lnum"; }
.fact span { margin-top: 16px; font-size: .84rem; color: #cdd0ca; letter-spacing: .03em; }

.table-wrap { overflow-x: auto; }
.info-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.info-table th, .info-table td { border-bottom: 1px solid var(--line); padding: 22px 16px; text-align: left; vertical-align: top; line-height: 1.9; }
.info-table th { width: 190px; color: var(--ink); font-size: .85rem; font-weight: 500; letter-spacing: .06em; }
.info-table td { font-size: .92rem; }

/* 会社概要の表：min-width 680px なので、コンテナが680pxを割ると横スクロールしないと読めない。
   コンテナは「ビューポート − 縦スクロールバー(約15px) − 左右余白40px」なので、
   実測では735px あたりが境目。余裕をみて760px以下から
   「項目名の上に値」の縦積みへ組み替える（iPad縦768pxは表のまま）。
   項目名の見た目は同じページの access-list（オレンジの罫＋小さなラベル）に合わせている。 */
@media (max-width: 760px) {
  .table-wrap { overflow-x: visible; }
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: auto; }
  .info-table { min-width: 0; }
  .info-table tr { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .info-table tr:first-child { padding-top: 0; }
  .info-table th, .info-table td { border: 0; padding: 0; }
  .info-table th {
    padding-left: 10px; border-left: 2px solid var(--orange);
    color: var(--accent-text); font-size: .74rem; font-weight: 700;
    letter-spacing: .1em; line-height: 1.6;
  }
  .info-table td { margin-top: 8px; font-size: .92rem; line-height: 1.9; }
}

.name-concept { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.name-concept article { min-height: 340px; padding: clamp(40px, 4vw, 56px); background: var(--snow); }
.name-concept strong {
  display: block;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(4.5rem, 8vw, 6.5rem); line-height: 1; color: var(--ink);
}
.name-concept strong::after { content: ""; display: block; width: 44px; height: 2px; background: var(--orange); margin-top: 28px; }
/* 「丸」側は右詰め。中央で「丸」「幸」が向き合う */
.name-concept article:first-child { text-align: right; }
.name-concept article:first-child strong::after { margin-left: auto; }
.name-concept h3 { margin: 34px 0 16px; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: .05em; }
.name-concept p { color: var(--muted); font-size: .92rem; }

.timeline { border-left: 1px solid var(--line); margin-left: 14px; }
.timeline article { padding: 0 0 44px 42px; position: relative; }
.timeline article:last-child { padding-bottom: 0; }
.timeline article::before { content: ""; position: absolute; left: -6px; top: 8px; width: 11px; height: 11px; background: var(--orange); transform: rotate(45deg); }
.timeline time { font-family: var(--en); font-size: 1.35rem; font-weight: 600; letter-spacing: .04em; font-feature-settings: "lnum"; }
.timeline h3 { margin: 8px 0 10px; font-size: 1.05rem; }
.timeline p { color: var(--muted); font-size: .92rem; }

/* ---- 資料ダウンロード（沿革PDFなど） ---- */
.pdf-download {
  display: flex; align-items: center; gap: 20px; max-width: 560px;
  padding: 24px 26px; border: 1px solid var(--line); background: white;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.pdf-download:hover { border-color: var(--orange); box-shadow: 0 10px 30px rgba(26, 28, 25, .07); }
.pdf-download-icon {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--orange); color: white;
  font-family: var(--en); font-size: .82rem; font-weight: 600; letter-spacing: .08em;
}
.pdf-download-text { flex: 1 1 auto; min-width: 0; }
.pdf-download-text b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .03em; }
.pdf-download-text small { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; font-feature-settings: "lnum"; }
.pdf-download-arrow { flex: 0 0 auto; color: var(--orange); font-size: 1.3rem; transition: transform .3s; }
.pdf-download:hover .pdf-download-arrow { transform: translateY(3px); }

/* ---- Cards, filters, accordion ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 44px 0; }
.filter-bar button {
  min-height: 46px; padding: 0 22px; border: 1px solid var(--line); background: white;
  cursor: pointer; font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  transition: background-color .25s, color .25s, border-color .25s;
}
.filter-bar button.is-active, .filter-bar button:hover { background: var(--ink); color: white; border-color: var(--ink); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.catalog-card { border: 1px solid var(--line); background: white; transition: border-color .3s, box-shadow .3s; }
.catalog-card:hover { border-color: #b9bdb4; box-shadow: 0 10px 30px rgba(26, 28, 25, .07); }
.catalog-card .media-placeholder { min-height: 220px; box-shadow: inset 0 -1px 0 var(--line); }
.catalog-card-body { padding: 28px 26px; }
.catalog-card-body > small { color: var(--accent-text); font-size: .75rem; font-weight: 500; letter-spacing: .08em; }
.catalog-card h3 { margin: 12px 0 10px; font-size: 1.05rem; line-height: 1.7; }
.catalog-card p { color: var(--muted); font-size: .82rem; }
/* 排対・保有台数・メーカーの3項目を横並び1段に置く（2段だと視線が2回折り返すため） */
/* メーカー名が折り返しにくいよう、排対・保有台数を狭め、メーカー列を広く取る */
.machine-meta { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, .82fr) minmax(0, 1.5fr); gap: 6px; margin-top: 20px; }
.machine-meta span { padding: 10px 7px; background: var(--snow); font-size: .68rem; color: var(--muted); letter-spacing: .02em; }
.machine-meta b { display: block; margin-top: 4px; font-size: .78rem; font-weight: 500; color: var(--ink); font-feature-settings: "lnum"; overflow-wrap: anywhere; }

/* メーカーカタログ（PDF）。管理画面で未登録のあいだは「準備中」の無効表示にする */
.machine-catalog {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; min-height: 46px; padding: 0 16px;
  border: 1px solid var(--orange); color: var(--accent-text);
  font-size: .8rem; font-weight: 500; letter-spacing: .03em; text-align: center;
  transition: background-color .25s, color .25s;
}
.machine-catalog:hover { background: var(--orange); color: white; }
.machine-catalog::before { content: "PDF"; font-family: var(--en); font-size: .72rem; font-weight: 600; letter-spacing: .06em; }
.machine-catalog.is-empty { border-color: var(--line); background: var(--snow); color: var(--muted); cursor: default; }
.machine-catalog.is-empty:hover { background: var(--snow); color: var(--muted); }
.machine-catalog.is-empty::before { color: #9aa094; }

.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-button {
  width: 100%; min-height: 84px; padding: 22px 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  text-align: left; cursor: pointer;
  font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 700; letter-spacing: .03em;
}
.accordion-button span:last-child { color: var(--orange); font-size: 1.6rem; font-weight: 400; flex: 0 0 auto; }
.accordion-content { padding: 0 8px 36px; color: var(--muted); font-size: .95rem; }
.accordion-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.accordion-meta span { background: var(--snow); padding: 10px 14px; color: var(--ink); font-size: .8rem; font-weight: 500; font-feature-settings: "lnum"; }
.job-detail-button { margin-top: 24px; }

/* ---- 募集要項のオーバーレイ（採用ページ） ----
   ライトボックスと同じ暗幕・閉じ方だが、中身が長文なのでパネル内をスクロールさせる。 */
.job-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, .78);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.job-modal.is-open { opacity: 1; pointer-events: auto; }
.job-modal-panel {
  position: relative; width: min(760px, 100%); max-height: 88vh; overflow-y: auto;
  background: white; padding: clamp(32px, 5vw, 56px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  -webkit-overflow-scrolling: touch;
}
.job-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px; line-height: 1;
  color: var(--muted); font-size: 1.9rem; font-family: var(--sans);
  cursor: pointer;
}
.job-modal-close:hover { color: var(--orange); }
.job-modal-eyebrow {
  color: var(--accent-text); font-size: .72rem; font-weight: 500; letter-spacing: .16em;
}
.job-modal-title {
  margin: 12px 0 28px; font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.6; letter-spacing: .03em;
}
.job-modal-entry { width: 100%; }
.job-modal-list { margin: 32px 0; display: flex; flex-direction: column; gap: 2px; }
.job-modal-list > div { display: grid; grid-template-columns: 9rem 1fr; gap: 4px 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.job-modal-list > div:last-child { border-bottom: 1px solid var(--line); }
.job-modal-list dt { font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.job-modal-list dd { margin: 0; color: var(--muted); font-size: .9rem; line-height: 2; }
body.job-modal-open { overflow: hidden; }

/* ---- 採用動画（OUR WORK）----
   16:9の枠を先に確保しておき、動画が用意でき次第 .video-frame-standby を
   <video> か <iframe> に差し替えるだけで済むようにする。
   枠のサイズは中身に依存しないので、差し替えてもレイアウトは動かない。 */
.is-ink { background: var(--ink); color: white; }
.section-heading-row .detail-list { margin: 0; }
.video-frame {
  position: relative;
  margin-top: clamp(34px, 4vw, 54px);
  aspect-ratio: 16 / 9;
  /* clip は hidden と違いスクロールコンテナを作らないため view() の進捗を止めない */
  overflow: clip;
  background: #22241f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.video-frame > video,
.video-frame > iframe,
.video-frame > img {
  display: block; width: 100%; height: 100%; border: 0; object-fit: cover;
}
/* 動画が入るまでの待機表示。等高線と再生マークで「準備中」を意図した状態として見せる */
.video-frame-standby {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.2vw, 28px);
  text-align: center;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(255, 255, 255, .045) 46px 47px);
}
.video-play-mark {
  position: relative; display: block;
  width: clamp(58px, 6.5vw, 88px); aspect-ratio: 1;
  border: 1px solid rgba(232, 90, 24, .5); border-radius: 50%;
}
/* 光学的に中心へ寄せるため、三角形はわずかに右へ置く */
.video-play-mark::before {
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #ef8a52;
}
.video-frame-standby p { color: #cdd0ca; font-size: .9rem; font-weight: 500; letter-spacing: .08em; }
.video-frame-standby small { display: block; margin-top: 10px; color: #8d918a; font-size: .76rem; font-weight: 400; letter-spacing: .04em; }

/* ---- BENEFITS（採用）：地層の重なりを思わせる有機グリッド ----
   8枚を常に2列×4行で組む。育英賞与を span 2 にすると9セルとなり
   どの列数でも端数が出るため、大きさは揃えて配色で差をつける。 */
.benefits-section {
  --strata-from: var(--ink);
  background-image: repeating-radial-gradient(circle at 88% 6%, transparent 0 46px, rgba(26, 28, 25, .035) 46px 47px);
}
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 48px; }
.benefit-card {
  position: relative;
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 4px 20px; align-items: baseline;
  padding: 22px 26px 22px 44px;
  background: var(--paper); border: 1px solid var(--line);
  /* 角を対角にだけ大きく取り、直線基調のまま流れを作る */
  border-radius: 2px 22px 2px 22px;
  transition: border-color .3s, box-shadow .3s;
}
.benefit-grid > :nth-child(even) { border-radius: 22px 2px 22px 2px; }
.benefit-card:hover { border-color: #b9bdb4; box-shadow: 0 10px 30px rgba(26, 28, 25, .07); }
/* サイト共通のアンカー頭（45°の菱形）をマーカーに流用 */
.benefit-card::before {
  content: ""; position: absolute; left: 22px; top: 29px;
  width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg);
}
.benefit-card b { font-size: .95rem; font-weight: 700; letter-spacing: .04em; }
.benefit-card p { color: var(--muted); font-size: .82rem; line-height: 1.85; }
/* 育英賞与は他社にない訴求。墨地で際立たせる（オレンジは罫と菱形に限定＝冒頭の配色方針どおり） */
.benefit-card.featured { background: var(--ink); border-color: var(--ink); color: white; }
.benefit-card.featured::before { background: #ef8a52; }
.benefit-card.featured p { color: #a9ada5; }

/* ---- Contact ---- */
.contact-band { padding: clamp(80px, 9vw, 128px) 0; background: var(--rock); color: white; position: relative; overflow: clip; isolation: isolate; }
/* 背景ループ動画。最下層に敷き、暗幕（::before）で文字のコントラストを確保する */
.contact-band-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.55) saturate(.85);
  pointer-events: none;
}
.contact-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(26, 28, 25, .82) 0%, rgba(26, 28, 25, .66) 55%, rgba(26, 28, 25, .58) 100%);
}
.contact-band-inner { position: relative; z-index: 2; }
.contact-band h2 { max-width: 800px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.contact-band-inner > p:not(.eyebrow) { max-width: 640px; margin-top: 26px; color: #cdd0ca; font-size: .95rem; }
.contact-band-actions { display: flex; align-items: center; gap: 44px; margin-top: 44px; }
.contact-band-tel { display: grid; font-family: var(--en); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; color: #ef8a52; font-feature-settings: "lnum"; letter-spacing: .03em; }
.contact-band-tel small { color: #b6bab2; font-family: var(--sans); font-size: .7rem; font-weight: 400; letter-spacing: .06em; margin-bottom: 6px; }

.contact-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 6vw, 80px); align-items: start; }
.contact-aside { position: sticky; top: 120px; padding: 40px 36px; background: var(--ink); color: white; }
.contact-aside h2 { font-size: 1.1rem; margin-top: 4px; }
.contact-aside p { font-size: .84rem; color: #cdd0ca; }
.contact-aside a { display: block; margin: 18px 0 4px; color: #ef8a52; font-family: var(--en); font-size: 1.9rem; font-weight: 500; font-feature-settings: "lnum"; letter-spacing: .03em; }
.contact-form { display: grid; gap: 26px; }
.form-group { display: grid; gap: 10px; }
.form-group label, .form-label { font-size: .86rem; font-weight: 700; letter-spacing: .03em; }
.required { color: var(--accent-text); margin-left: 8px; font-size: .7rem; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; min-height: 56px; padding: 14px 16px;
  border: 1px solid var(--line); background: #fff; border-radius: 0;
  transition: border-color .25s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--ink); outline: none; }
.form-group textarea { min-height: 180px; resize: vertical; }
.type-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-options label { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px; border: 1px solid var(--line); cursor: pointer; transition: border-color .25s; }
.type-options label:hover { border-color: var(--ink); }
.privacy-check { display: flex; gap: 12px; align-items: start; font-size: .84rem; line-height: 1.8; }
.privacy-check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--orange-deep); }
.form-error { color: #b52800; font-size: .78rem; }
/* 迷惑投稿よけの罠。人には見せないが、display:none だと機械に見抜かれやすいので画面外へ逃がす */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.confirm-panel { padding: 34px 32px; background: var(--snow); }
.confirm-panel h2 { font-size: 1.35rem; margin-bottom: 10px; }
.confirm-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.confirm-row b { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 500; color: var(--accent-text); letter-spacing: .05em; }
.form-actions { display: flex; gap: 12px; }
.notice { padding: 18px; background: #faf1ea; border-left: 2px solid var(--orange); font-size: .82rem; line-height: 1.9; color: var(--rock); }

/* ---- Footer ---- */
.site-footer { background: #141612; color: white; padding: 80px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
/* 黒地のフッターに logo.png は置けない。この素材は白背景前提で作られていて、
   球体の輪郭は16%が半透明（白に対するアンチエイリアス）、さらに6%が白の不透明画素。
   暗い地に載せると輪郭が白く割れる。一部だけ切り出しても、白フィルタをかけても同じ。
   （実測：nearWhite 6% / semiTransparent 16%）
   そこでフッターの社名は画像をやめ、サイトの見出しと同じ明朝で組む。
   頭のオレンジの短い罫は name-concept と同じ、この配色での定番の効かせ方。
   ※ 暗背景用の白ヌキロゴが用意できたら、ここに画像を戻してよい。 */
.footer-brand-name {
  display: block; position: relative; padding-top: 22px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.5;
  letter-spacing: .1em; font-feature-settings: "palt"; color: white;
}
.footer-brand-name::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 44px; height: 2px; background: var(--orange);
}
.footer-top p { margin-top: 26px; color: #a9ada5; font-size: .84rem; line-height: 2; }
.footer-phone { display: block; margin-top: 20px; color: #ef8a52; font-family: var(--en); font-size: 1.8rem; font-weight: 500; font-feature-settings: "lnum"; letter-spacing: .03em; }
.footer-top small { color: #7f847b; font-size: .74rem; letter-spacing: .04em; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 40px; }
.footer-links a { padding: 15px 0; border-bottom: 1px solid var(--ink-soft); font-size: .84rem; letter-spacing: .03em; transition: color .3s; }
.footer-links a:hover { color: #e5a37d; }
.footer-bottom {
  display: flex; justify-content: space-between; margin-top: 72px; padding-top: 22px;
  border-top: 1px solid var(--ink-soft);
  color: #7f847b; font-family: var(--en); font-size: .68rem; font-weight: 500; letter-spacing: .14em;
}

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .menu-button { display: block; }
  .menu-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .54); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 105; }
  .menu-scrim.is-open { opacity: 1; pointer-events: auto; }
  .mobile-nav {
    display: flex; position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 88vw);
    padding: 110px 40px 36px; flex-direction: column;
    background: var(--ink); color: white;
    transform: translateX(102%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    z-index: 110; overflow-y: auto;
  }
  .mobile-nav.is-open { transform: translateX(0); }
  .mobile-nav > a:not(.mobile-contact) { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--ink-soft); font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; }
  .mobile-nav a small { color: #e5a37d; font-family: var(--en); font-weight: 500; letter-spacing: .1em; }
  .mobile-contact { margin-top: 28px; padding: 17px; background: var(--orange); text-align: center; font-weight: 500; letter-spacing: .08em; }
  .mobile-tel { margin-top: 22px; color: #ef8a52; font-family: var(--en); font-size: 1.4rem; font-weight: 500; line-height: 1.4; font-feature-settings: "lnum"; }
  .mobile-tel small { color: #a9ada5; font-family: var(--sans); font-size: .7rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 40px), var(--max)); }
  .section { padding: 80px 0; }
  /* 固定背景の区間を確保するため、狭い画面でもちょうど1画面分にする */
  .home-hero { min-height: 100svh; }
  .home-hero-content { padding-bottom: 90px; }
  .hero-fact { width: 220px; padding: 20px 24px; }
  .scroll-cue { display: none; }
  .split-layout, .recruit-panel, .intro-grid, .content-block-grid, .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .split-layout .media-placeholder, .recruit-panel .media-placeholder { min-height: 420px; }
  /* 縦積みではフルブリードをやめ、通常フローの画像に戻す */
  .recruit-home { display: block; min-height: 0; }
  .recruit-panel .media-placeholder { position: static; inset: auto; box-shadow: inset 0 0 0 1px var(--line); }
  .recruit-panel .media-placeholder::after { content: none; }
  .strength-grid { grid-template-columns: 1fr 1fr; }
  .strength-card, .strength-card:nth-child(4), .strength-card:nth-child(5) { grid-column: span 1; }
  .strength-card:last-child { grid-column: 1 / -1; }
  /* BENEFITSはスマホでも2列を維持し、カード内を縦積みにして高さを詰める */
  .benefit-grid { gap: 8px; }
  .benefit-card { grid-template-columns: 1fr; gap: 7px; padding: 15px 12px 17px 24px; border-radius: 2px 16px 2px 16px; }
  .benefit-grid > :nth-child(even) { border-radius: 16px 2px 16px 2px; }
  .benefit-card::before { left: 11px; top: 20px; width: 7px; height: 7px; }
  .benefit-card b { font-size: .85rem; letter-spacing: .02em; }
  .benefit-card p { font-size: .77rem; line-height: 1.75; }
  .business-home-card { grid-template-columns: 1fr; }
  .business-home-card:nth-child(even) .media-placeholder { order: 0; }
  .business-home-card .media-placeholder { min-height: 320px; }
  .section-heading-row { align-items: start; flex-direction: column; }
  .project-rail { grid-auto-columns: minmax(300px, 72vw); }
  .machinery-home { min-height: 560px; }
  .page-hero { min-height: 420px; }
  .card-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .contact-aside { position: static; }
}

@media (max-width: 560px) {
  .site-header { height: 70px; padding-inline: 16px; }
  /* 320pxではメニューボタンとの隙間が2pxまで詰まるので、狭い側だけ落とす */
  .brand img { height: clamp(30px, 7.6vw, 36px); width: auto; }
  .home-hero, .page-hero { padding-top: 70px; }
  .home-hero > .media-placeholder, .hero-shade, .page-hero > .media-placeholder, .page-hero-overlay { top: 70px; }
  .home-hero { min-height: 100svh; }
  .home-hero h1 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  .hero-fact { width: 176px; padding: 16px 18px; }
  .hero-fact strong { font-size: 1.9rem; }
  .hero-fact span { font-size: .64rem; }
  .section-title h2 { font-size: clamp(1.4rem, 6.4vw, 1.8rem); }
  .split-layout .media-placeholder, .recruit-panel .media-placeholder { min-height: 320px; }
  .strength-grid { grid-template-columns: 1fr; }
  .strength-card, .strength-card:last-child { grid-column: span 1; min-height: 200px; }
  .business-home-card > div { padding: 34px 22px; }
  .business-home-card .media-placeholder { min-height: 260px; }
  .project-rail { grid-auto-columns: 84vw; }
  .check-list { grid-template-columns: 1fr; }
  /* 交通手段のラベルを1行に持たせると本文が潰れるので、縦積みにする */
  .access-list > div { grid-template-columns: 1fr; gap: 6px; }
  .page-hero { min-height: 380px; }
  .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .page-hero-content { padding-bottom: 44px; }
  .strata-mark { width: 62%; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact { min-height: 160px; padding: 22px; }
  .name-concept { grid-template-columns: 1fr; }
  .name-concept article { min-height: 260px; padding: 36px 28px; }
  /* 縦積みでは左右で向き合う意図が働かないため左詰めに戻す */
  .name-concept article:first-child { text-align: left; }
  .name-concept article:first-child strong::after { margin-left: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .filter-bar button { flex: 0 0 auto; }
  /* 募集要項は項目名を1行に持たせると本文が潰れるので、縦積みにする */
  .job-modal-list > div { grid-template-columns: 1fr; gap: 8px; }
  .job-modal-panel { max-height: 92vh; }
  .type-options { grid-template-columns: 1fr; }
  .contact-band-actions { align-items: start; flex-direction: column; gap: 28px; }
  .form-actions { flex-direction: column; }
  .form-actions .button { width: 100%; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 10px; }
}

/* ============================================================
   画像フォーカルポイント
   data-image-id は main.js が配置ごとに付与する（同じ画像でも枠が違えば別ID）。
   枠の比率が画像と違っても被写体（人物・重機・社屋）が切れないよう、
   cover の基準点を被写体側へ寄せる。値は各画像の被写体位置の実測に基づく。
   ※ id 35（is-process-visual）は多重背景のため指定しない。
   ※ テクスチャ（10-13 / 40-46）は被写体がないため center のまま。
   ============================================================ */

/* img-01: 人物3人が右側 x63〜93% */
.media-placeholder[data-image-id="01"] { background-position: 80% 55%; }
.media-placeholder[data-image-id="30"] { background-position: 75% 50%; }

/* img-02（縦長）: 作業員と削孔機が下部 y60〜85%、上半分は空 */
.media-placeholder[data-image-id="02"] { background-position: 50% 72%; }
.media-placeholder[data-image-id="20"] { background-position: 50% 74%; }
.media-placeholder[data-image-id="22"] { background-position: 50% 72%; }

/* img-03: 人物2人が両端 x12〜40% と x58〜90%、顔は y42〜50% */
.media-placeholder[data-image-id="03"],
.media-placeholder[data-image-id="31"] { background-position: 50% 48%; }

/* img-04: 作業員2人が右寄り x63〜82% */
.media-placeholder[data-image-id="04"],
.media-placeholder[data-image-id="32"] { background-position: 70% 55%; }

/* img-05: 技術者2人 x12〜38% と削孔機 x50〜85%（両方を含む中間点） */
.media-placeholder[data-image-id="05"],
.media-placeholder[data-image-id="33"] { background-position: 45% 55%; }

/* img-06: 手前の人物2人が左〜中央 x17〜50% */
.media-placeholder[data-image-id="06"],
.media-placeholder[data-image-id="34"] { background-position: 40% 60%; }

/* img-equipment: 重機4台が横一列、車体は y40〜85%（ブーム上端は切ってよい） */
.media-placeholder[data-image-id="14"] { background-position: 50% 58%; }
.media-placeholder[data-image-id="50"] { background-position: 50% 55%; }
.media-placeholder[data-image-id="51"],
.media-placeholder[data-image-id="52"],
.media-placeholder[data-image-id="53"],
.media-placeholder[data-image-id="54"],
.media-placeholder[data-image-id="55"],
.media-placeholder[data-image-id="56"],
.media-placeholder[data-image-id="57"],
.media-placeholder[data-image-id="58"] { background-position: 50% 50%; }

/* img-15: 人物3人が右半分 x60〜100%。縦長枠では右端アンカーで3人を保持 */
.media-placeholder[data-image-id="15"] { background-position: 100% 45%; }
.media-placeholder[data-image-id="60"] { background-position: 80% 32%; }

/* img-21（縦長）: 人物シルエットが中央上部 y18〜45%。横長枠では枠比を画像に追従させる */
.media-placeholder[data-image-id="21"] {
  aspect-ratio: 4 / 5;
  min-height: 0;
  max-height: 620px;
  background-position: 50% 30%;
}

/* img-23: 社屋が左下 x2〜55%, y65〜88%。右は地図の抽象線画 */
.media-placeholder[data-image-id="23"] { background-position: 30% 72%; }

/* img-61: 人物2人が右側 x48〜98%、顔は上部 y5〜45% */
.media-placeholder[data-image-id="61"],
.media-placeholder[data-image-id="62"] { background-position: 72% 35%; }

/* img-70: 人物2人が右側 x57〜95%、顔は y28〜50% */
.media-placeholder[data-image-id="70"] { background-position: 75% 40%; }

/* ============================================================
   モーション設計「工法としてのモーション」
   ------------------------------------------------------------
   スクロールは「読み進み」ではなく【深度】。訪問者は地表から地中へ降りていく。
   「見えない場所から支える」会社なので、動きの役割は装飾ではなく“不可視の可視化”。

   語彙は3つだけ（増やすと意味が薄まりただの装飾に落ちる）:
     削孔 bore    … 垂直に穿つ      scaleY(0→1) origin:top
     定着 anchor  … 打ち込み、止まる  10px以内の移動＋fade
     測線 survey  … 地形を測る       scaleX(0→1)

   背骨: 「定着」にオーバーシュートを禁じる。グラウンドアンカーは打ち込んだら
   二度と動かない。跳ね返る定着は工学的に失敗を意味する。

   実装上の前提（いずれも踏み外すと壊れる）:
   1. 祖先の overflow は clip であること（hidden はスクロールコンテナを生成し
      view() の進捗が0で固定される）
   2. 出現系の animation-range は entry 内で完結させること。view() は双方向のため
      cover まで伸ばすと画面内で逆再生が起き、読んでいる最中に文字が消える
   3. scroll-driven では animation-delay も animation-duration も無視される。
      スタッガは range のずらしで作る
   4. 初期状態(opacity:0)は keyframes の from にのみ書く。ゲート外に置くと
      未対応ブラウザで永久に不可視＝コンテンツ喪失になる
   ============================================================ */

@keyframes mg-anchor-set { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes mg-bore       { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mg-survey     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mg-seat       { from { opacity: 0; transform: rotate(45deg) scale(.2); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
/* 潜行＝地表から地中へ。固定した背景が、ABOUTに覆われるまでに徐々に焦点を失う。
   blur は箱の外を透明としてサンプリングして縁が透けるので、scale で拡大して逃がす。 */
@keyframes mg-descend {
  from { transform: scale(1);    filter: blur(0px); }
  35%  { transform: scale(1.04); filter: blur(7px); }
  to   { transform: scale(1.10); filter: blur(20px); }
}
/* ヒーロー見出し用の暗幕（左88%）は、そのままABOUTまで乗ると映像が黒く潰れて
   ブラー動画だと分からなくなる。スクロールに合わせて薄く・均一寄りにして、
   ABOUTでは映像が見えつつ白文字が読める濃さに落とす。 */
@keyframes mg-shade-lift { from { opacity: 1; } to { opacity: .62; } }
/* 等高線はヒーローの演出。写真に固定して同じ位置に留めたまま、
   ABOUTに入る前に消えきるようにする（ABOUTの背景はブラー映像だけにする） */
@keyframes mg-terrain-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes mg-cut        { from { transform: skewY(-8deg) scaleX(0); } to { transform: skewY(-8deg) scaleX(1); } }
@keyframes mg-converge-l { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mg-converge-r { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } }

/* ページ遷移: 地面は続いている。file:// では動かない（same-origin HTTP必須） */
@view-transition { navigation: auto; }
.site-header { view-transition-name: mg-header; }
.site-footer { view-transition-name: mg-footer; }
.home-hero > .media-placeholder,
.page-hero > .media-placeholder { view-transition-name: mg-hero-media; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* 印刷時は screen ゲートにより全要素が自然状態で出る（官公庁・金融機関は刷る） */
@media screen and (prefers-reduced-motion: no-preference) {

  /* --- 時間軸アニメ（scroll-driven非対応ブラウザでも動く） --- */
  /* page-hero の切土線が引かれる */
  .strata-mark i { transform-origin: right center; animation: mg-cut .9s cubic-bezier(.2, .8, .2, 1) both; }
  .strata-mark i:nth-child(2) { animation-delay: .12s; }
  .strata-mark i:nth-child(3) { animation-delay: .24s; }
  /* 削孔が始まる。1回だけ。ループさせない（常時動くものは注意を奪い続ける） */
  .scroll-cue span { transform-origin: top center; animation: mg-bore .7s .5s cubic-bezier(.2, .8, .2, 1) both; }
  /* 地形を読む: hoverで等高線が浮かぶ。移動ゼロ＝品格を落とさない */
  .business-home-card .media-placeholder.has-image::before { transition: opacity .4s; }
  .business-home-card:hover .media-placeholder.has-image::before { opacity: .26; }

  @supports (animation-timeline: view()) {

    /* --- 定着: 打ち込まれて止まる。range は entry 内で完結 --- */
    .section-title, .name-note, .content-copy,
    .strength-card, .business-home-card, .project-card,
    .catalog-card, .benefit-card, .fact,
    .timeline article, .check-list li, .video-frame {
      animation: mg-anchor-set linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 86%;
    }

    /* スタッガは range のずらしで作る（delay は無視されるため）。
       横並びグリッドは同時に画面へ入るので、ずらすと掃引になる */
    .strength-grid .strength-card:nth-child(2),
    .facts-grid .fact:nth-child(4n+2),
    .card-grid > *:nth-child(3n+2) { animation-range: entry 17% entry 91%; }
    .strength-grid .strength-card:nth-child(3),
    .facts-grid .fact:nth-child(4n+3),
    .card-grid > *:nth-child(3n+3) { animation-range: entry 22% entry 96%; }
    .strength-grid .strength-card:nth-child(4),
    .facts-grid .fact:nth-child(4n+4) { animation-range: entry 27% entry 100%; }
    .strength-grid .strength-card:nth-child(5) { animation-range: entry 32% entry 100%; }
    /* BENEFITSは2列×4行。行単位で送って左上から立ち上げる */
    .benefit-grid > :nth-child(n+3) { animation-range: entry 17% entry 91%; }
    .benefit-grid > :nth-child(n+5) { animation-range: entry 22% entry 96%; }
    .benefit-grid > :nth-child(n+7) { animation-range: entry 27% entry 100%; }

    /* 測線: eyebrow の罫が引かれる */
    .eyebrow span {
      transform-origin: left center;
      animation: mg-survey linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 75%;
    }

    /* アンカー頭部（ひし形）が座る */
    .check-list li::before, .timeline article::before, .benefit-card::before {
      animation: mg-seat linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 80%;
    }

    /* --- 収束: 「丸」と「幸」が中央で向き合い、寄って止まる。
       動きが社名の意味そのものになる。560px以下は縦積み＝向き合わないので適用しない --- */
    @media (min-width: 561px) {
      .name-concept article:first-child strong {
        animation: mg-converge-l linear both;
        animation-timeline: view();
        animation-range: entry 20% entry 80%;
      }
      .name-concept article:last-child strong {
        animation: mg-converge-r linear both;
        animation-timeline: view();
        animation-range: entry 20% entry 80%;
      }
      /* 罫は文字が定着してから、中央から外へ引かれる */
      .name-concept strong::after {
        animation: mg-survey linear both;
        animation-timeline: view();
        animation-range: entry 62% entry 96%;
      }
      .name-concept article:first-child strong::after { transform-origin: right center; }
      .name-concept article:last-child strong::after { transform-origin: left center; }
    }

    /* --- 潜行: 地表から地中へ。h1はLCP候補なので触らない。
       ページ先頭要素には view() の entry フェーズが無いため scroll(root) を使う --- */
    .home-hero > .media-placeholder {
      animation: mg-descend linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    /* 暗幕も同じタイムラインで薄くする。宣言順は shorthand → timeline → range を厳守
       （shorthand が animation-timeline をリセットするため） */
    .hero-shade {
      animation: mg-shade-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    /* ABOUTが来る前（70vh地点）に消しきる */
    .home-hero > .mg-terrain-canvas {
      animation: mg-terrain-fade linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }

    /* --- 柱状図: 掘進に従って年表の線が下りる。
       これは「進捗」なので逆再生してよい唯一の例外 --- */
    .timeline { position: relative; border-left-color: transparent; }
    .timeline::before {
      content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
      background: var(--line); transform-origin: top center;
      animation: mg-bore linear both;
      animation-timeline: view();
      animation-range: entry 90% exit 10%;
    }

    /* --- 掘進ゲージ: 読み進み＝深度。長いページの現在地表示を兼ねる --- */
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--orange); transform-origin: left center;
      animation: mg-survey linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* 施工図（JS注入・SVG）。現場写真に薄い暗幕を敷き、工法の線画を青写真として描き込む。
   本文には重ねない。写真も透けて共存する。 */
.mg-drawing { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: rgba(20, 22, 17, .34); }
.mg-drawing .mg-draw { fill: none; }

@media print { .mg-drawing { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* View Transitions は prefers-reduced-motion を自動では尊重しないため明示的に殺す */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  /* Contactの背景動画は再生せず、無地の背景に戻す */
  .contact-band-video { display: none; }
  /* トップの背景は固定もブラーもやめ、ヒーロー内に収まる通常の背景に戻す */
  .home-hero { overflow: clip; }
  .home-hero > .media-placeholder,
  .home-hero > .mg-terrain-canvas,
  .hero-shade { position: absolute; }
}