/* ============================================================
   建設業テンプレート — site.css
   青葉建設マスター(Claude Design確定版)のデザイントークンを移植。

   マスターは固定幅1440pxのキャンバス出力(全スタイルがインライン属性)
   だったため、見た目を1:1で保ったままレスポンシブに組み直している。
   1440px幅での見えはマスターと同一。1024px / 640px で段階的に畳む。

   色・字送り・余白の数値はマスターからそのまま持ってきた値。
   勝手に変えないこと(デザイン課 CLAUDE.md 参照)。
   ============================================================ */

:root {
  /* ブランド ─ build.py が企業ごとに上書きできる */
  --navy:        #0E2740;  /* 主色・見出し */
  --navy-deep:   #0B1B29;  /* フッター・body背景 */
  --accent:      #F97316;  /* オレンジ(安全色) */
  --accent-dark: #D9560C;  /* hover */

  /* 濃い地色(--navy)の上に乗せるアクセント。採用セクション専用。
     accent をそのまま使うと、地色と同系色のブランド(青系など)のときに
     数字やボタンが背景に沈み、年配の読み手が読めなくなる。
     既定はマスターと同じオレンジなので、brief に colors.accent_on_dark を
     書かない企業は従来どおりの見た目になる。 */
  --accent-on-dark:       #F97316;
  --accent-on-dark-hover: #D9560C;
  /* accent_on_dark を明るくしたとき、白文字だと読めなくなるので
     ボタンの文字は地色(--navy)に落とす。build.py が明度から自動で決める。 */
  --accent-on-dark-ink:   #fff;

  /* 面 */
  --bg:        #FBFBFA;
  --bg-alt:    #F1F1EE;

  /* 文字 */
  --text:      #0E2740;
  --text-body: #4A5A6B;
  --text-mute: #5A6B7C;
  --text-meta: #6B7A89;

  /* 罫 */
  --rule:      rgba(14, 39, 64, .14);
  --rule-str:  rgba(14, 39, 64, .25);

  --font-head: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --font-body: 'Noto Sans JP', system-ui, sans-serif;

  /* セクション左右パディング(マスター120px → 画面幅で縮む) */
  --gutter: clamp(20px, 8.33vw, 120px);
  /* ヘッダー/ヒーローの左右パディング(マスター56px) */
  --gutter-hero: clamp(20px, 3.9vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy-deep);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; display: block; }

.page {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

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

/* ── ヘッダー ─────────────────────────────────── */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter-hero);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 26px; height: 26px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

.brand-text { display: flex; flex-direction: column; gap: 2px; }

.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .14em;
  color: #fff;
  line-height: 1;
}

.brand-name-en {
  font-size: 9px;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .55);
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: 34px; }

.site-nav a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .06em;
}
.site-nav a:hover { color: #fff; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-dark); }

/* ── ヒーロー ─────────────────────────────────── */

.hero {
  position: relative;
  height: 940px;
  background: radial-gradient(120% 90% at 62% 34%, #1B3E5C 0%, #102941 46%, #0A1826 100%);
  overflow: hidden;
}

/* 図面グリッド */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ビジュアル層(アイソメ or 動画)を入れる枠 */
.hero-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

.hero-iso {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* ステージの拡縮。幾何(900x700)には触らずここだけ動かす */
  --iso-scale: .62;
}

/* テキスト層 ─ 白カード */
.hero-card {
  position: absolute;
  left: var(--gutter-hero);
  bottom: 88px;
  width: 466px;
  max-width: calc(100% - var(--gutter-hero) * 2);
  background: rgba(251, 251, 250, .96);
  padding: 44px 44px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.hero-kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.hero-kicker::before {
  content: ""; width: 22px; height: 2px;
  background: var(--accent); flex: none;
}
.hero-kicker span {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--text-mute);
}

.hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--navy);
  text-wrap: pretty;
  /* マスターの指定。カードのパディング内(378px)より広く、10文字の見出しが
     2行に収まる。これを外すと3行になってマスターと変わってしまう */
  width: 428px;
}

.hero-lead {
  margin: 0 0 34px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-scroll {
  position: absolute;
  right: var(--gutter-hero);
  bottom: 88px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.hero-scroll span {
  font-size: 10px; letter-spacing: .3em;
  color: rgba(255, 255, 255, .5);
}
.hero-scroll::after {
  content: ""; width: 1px; height: 72px;
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

/* ── 動画ヒーロー(scroll-video-hero)の建設版チューニング ──────
   **セレクタの頭に .page を足しているのは詳細度のため。**
   template.html は site.css → hero.css の順で読み込むので、同じ詳細度で
   書くと後勝ちでモジュール側の既定が残る。素の `.hero.svh-exiting` で
   書かないこと(介護・製菓・モノ系の同名節と同じ理由)。

   **白カードは退場区間でも一切薄くしない。** かつてここで
   `opacity: calc(1 - var(--svh-exit) * .45)` を掛けていたが、2026-08-07 に
   モジュール側の指定ごと廃止した(理由は modules/scroll-video-hero/hero.css)。
   **opacity を書き戻さないこと。** SCROLL の合図だけは退場と同時に引く */
.page .hero.svh-exiting .hero-scroll { opacity: calc(1 - var(--svh-exit, 0) * 1.6); }

@media (prefers-reduced-motion: reduce) {
  .page .hero.svh-exiting .hero-card,
  .page .hero.svh-exiting .hero-scroll { opacity: 1; transform: none; }
}

/* ── ボタン ───────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.btn span { font-size: 12px; }

.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost { border: 1px solid var(--rule-str); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

.btn-on-dark { border: 1px solid rgba(255, 255, 255, .35); color: #fff !important; }
.btn-on-dark:hover { background: rgba(255, 255, 255, .08); }

.btn-lg { height: 58px; padding: 0 34px; }

/* ── セクション共通 ────────────────────────────── */

.section { padding: 130px var(--gutter); background: var(--bg); }
.section-alt { background: var(--bg-alt); }

.section-head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 64px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.section-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--navy);
}

/* ── 02 強み ─────────────────────────────────── */

#about { padding-top: 140px; }

.strengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.strength {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

/* 強みの写真。罫線のすぐ下に敷き、連番の行より前に出す。
   16:9 は事例(4:3)より浅く、3枚が横に並んでも視線を奪いすぎないため */
.strength .slot-strength { height: 168px; }

.strength-top {
  display: flex; align-items: center;
}

.strength-no {
  font-family: var(--font-head);
  font-size: 34px; font-weight: 700;
  color: rgba(14, 39, 64, .12);
  line-height: 1;
}

.strength h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 21px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
}

.strength p {
  margin: 0;
  font-size: 13.5px;
  line-height: 2;
  color: var(--text-body);
}

/* ── 03 施工事例 ──────────────────────────────── */

.works-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
}
.works-head .section-head { margin-bottom: 0; }

.link-more {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  border-bottom: 1px solid rgba(14, 39, 64, .3);
  padding-bottom: 4px;
  white-space: nowrap;
}

.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.work { display: flex; flex-direction: column; gap: 20px; }

/* 画像スロット ─ 画像が無いときはハッチングのプレースホルダーが出る */
.slot {
  background: repeating-linear-gradient(135deg, #E2E5E9 0 10px, #D8DCE2 10px 20px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #8D97A3;
  padding: 8px;
  text-align: center;
}
.slot-dark {
  background: repeating-linear-gradient(135deg, #1B3A56 0 10px, #173247 10px 20px);
}
.slot-dark .slot-label { color: rgba(255, 255, 255, .5); }

/* ストック写真を当てているときの注記。実画像があるときだけ build.py が出す */
.slot-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--text-meta);
}
.recruit-media > .slot-note { margin: 0; color: rgba(255, 255, 255, .55); }

.work .slot { height: 280px; }

.work-meta { display: flex; gap: 10px; align-items: center; }
.tag {
  font-size: 10.5px; letter-spacing: .14em;
  color: #fff; background: var(--navy);
  padding: 4px 10px;
}
.work-year {
  font-size: 10.5px; letter-spacing: .14em;
  color: var(--text-mute); padding: 4px 0;
}

.work h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px; font-weight: 700;
  color: var(--navy);
}
.work p { margin: 0; font-size: 12.5px; color: var(--text-meta); }

/* ── 04 採用 ─────────────────────────────────── */

.recruit {
  position: relative;
  padding: 150px var(--gutter) 160px;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.recruit::before {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 520px; height: 520px;
  /* 以前はマスターのオレンジ rgba(249,115,22,.28) を直書きしていたため、
     青系ブランドの会社でもここだけ橙の環が出ていた。accent-on-dark に
     連動させる。opacity は ::before 自身にしか効かないので環だけが薄まる */
  border: 1px solid var(--accent-on-dark);
  opacity: .28;
  border-radius: 50%;
}
.recruit .section-head { position: relative; margin-bottom: 60px; }
.recruit .section-head h2 { color: #fff; }
.recruit .eyebrow { color: var(--accent-on-dark); }

.recruit-body {
  position: relative;
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 80px;
  align-items: start;
}

.recruit-media { display: flex; flex-direction: column; gap: 20px; }
.recruit-media .slot-main { height: 560px; }
.recruit-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.recruit-subs .slot { height: 150px; }
.recruit-subs .slot-label { font-size: 10px; color: rgba(255, 255, 255, .45); }

.recruit-text {
  display: flex; flex-direction: column; gap: 44px;
  padding-top: 10px;
}

.recruit-text h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 42px; font-weight: 700;
  line-height: 1.5; letter-spacing: .02em;
  text-wrap: pretty;
}
.recruit-text h3 em { font-style: normal; color: var(--accent-on-dark); }

.recruit-text > p {
  margin: 0;
  font-size: 14.5px; line-height: 2.2;
  color: rgba(255, 255, 255, .78);
  max-width: 520px;
}

.recruit-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  padding: 34px 0;
}
.recruit-stat { display: flex; flex-direction: column; gap: 10px; }
.recruit-stat b {
  font-family: var(--font-head);
  font-size: 40px; font-weight: 700; line-height: 1;
  color: var(--accent-on-dark);
}
.recruit-stat b span { font-size: 18px; }
.recruit-stat small { font-size: 12px; color: rgba(255, 255, 255, .7); }

.recruit-jobs { display: flex; flex-direction: column; gap: 2px; }
.recruit-job {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.recruit-job b { font-size: 14px; font-weight: 500; }
.recruit-job span { font-size: 12px; color: var(--accent-on-dark); white-space: nowrap; }

.recruit-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.recruit-actions .btn-primary {
  background: var(--accent-on-dark);
  color: var(--accent-on-dark-ink) !important;
}
.recruit-actions .btn-primary:hover { background: var(--accent-on-dark-hover); }

/* ── 05 会社概要 ──────────────────────────────── */

.company {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
}
.company-head { display: flex; flex-direction: column; gap: 14px; }
.company-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700; font-size: 30px;
  letter-spacing: .04em; color: var(--navy);
}

.company-table { display: flex; flex-direction: column; }
.company-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.company-row:last-child { border-bottom: 1px solid var(--rule); }
.company-row dt { margin: 0; font-size: 13px; font-weight: 700; color: var(--navy); }
.company-row dd { margin: 0; font-size: 13.5px; color: var(--text-body); }

/* ── 06 お問い合わせ ──────────────────────────── */

.contact { padding: 0 var(--gutter) 120px; background: var(--bg); }

.contact-box {
  position: relative;
  background: var(--accent);
  color: #fff;
  padding: 82px 80px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 60px;
  overflow: hidden;
}
.contact-box::before {
  content: "";
  position: absolute; left: -60px; bottom: -140px;
  width: 340px; height: 340px;
  background: rgba(255, 255, 255, .08);
  transform: rotate(45deg);
}

.contact-copy {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
}
.contact-copy h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 36px; font-weight: 700;
  letter-spacing: .03em; line-height: 1.4;
}
.contact-copy p {
  margin: 0; font-size: 14px; line-height: 1.9;
  color: rgba(255, 255, 255, .9);
}

.contact-actions {
  position: relative;
  display: flex; align-items: center; gap: 36px;
  flex-wrap: wrap;
}
.contact-tel { display: flex; flex-direction: column; gap: 4px; }
.contact-tel small {
  font-size: 10.5px; letter-spacing: .2em;
  color: rgba(255, 255, 255, .8);
}
.contact-tel a {
  font-family: var(--font-head);
  font-size: 30px; font-weight: 700; letter-spacing: .02em;
  color: #fff !important;
}

.btn-contact {
  display: inline-flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 38px;
  background: var(--navy); color: #fff !important;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.btn-contact:hover { background: var(--navy-deep); }

/* ── フッター ─────────────────────────────────── */

.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .6);
  padding: 60px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand i {
  width: 18px; height: 18px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}
.footer-brand span {
  font-family: var(--font-head);
  font-weight: 700; font-size: 15px;
  letter-spacing: .14em; color: #fff;
}
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.footer-note { font-size: 11px; letter-spacing: .06em; }

/* ストック写真のクレジット。Pexels API の利用条件で
   撮影者名とPexelsへのリンクの掲示が必要なため、写真を使う号だけ出る */
.footer-credit { font-size: 10px; letter-spacing: .04em; color: rgba(255, 255, 255, .42); }
.footer-credit a { color: rgba(255, 255, 255, .62) !important; text-decoration: underline; }
.footer-credit a:hover { color: #fff !important; }

/* ============================================================
   レスポンシブ
   マスターは1440px固定だったので、ここから下は新規に起こした分。
   ============================================================ */

/* ── 〜1200px: 3カラムの余白を締める ───────────── */
@media (max-width: 1200px) {
  .strengths { gap: 36px; }
  .works { gap: 28px; }
  .recruit-body { grid-template-columns: 1fr 1fr; gap: 48px; }
  .recruit-media .slot-main { height: 440px; }
  .company { grid-template-columns: 240px 1fr; gap: 40px; }
  .hero-iso { --iso-scale: .52; --iso-tx: 90px; }
}

/* ── 〜1024px: 採用と会社概要を1カラムに ─────────── */
@media (max-width: 1024px) {
  .site-nav { gap: 22px; }
  .site-nav a:not(.nav-cta) { display: none; }

  .hero { height: 780px; }
  .hero-iso { --iso-scale: .46; --iso-tx: 40px; --iso-ty: -20px; }
  .hero h1 { font-size: 34px; width: auto; }

  .strengths { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .works { grid-template-columns: 1fr 1fr; }

  .recruit-body { grid-template-columns: 1fr; gap: 56px; }
  .recruit-media .slot-main { height: 400px; }
  .recruit-text h3 { font-size: 34px; }

  .company { grid-template-columns: 1fr; gap: 32px; }

  .contact-box {
    flex-direction: column; align-items: flex-start;
    gap: 40px; padding: 56px 48px;
  }
}

/* ── 〜640px: モバイル ─────────────────────────── */
@media (max-width: 640px) {
  .section { padding: 80px var(--gutter); }
  #about { padding-top: 88px; }
  .section-head { margin-bottom: 40px; flex-direction: column; gap: 10px; align-items: flex-start; }
  .section-head h2 { font-size: 24px; }

  .site-header { padding: 18px var(--gutter-hero); }
  .brand-mark { width: 22px; height: 22px; }
  .brand-name { font-size: 16px; }
  .nav-cta { height: 36px; padding: 0 16px; font-size: 12px; }

  /* ヒーロー: ビジュアルは上、カードは下に積む */
  .hero { height: auto; min-height: 640px; padding-top: 330px; padding-bottom: 40px; }
  .hero-visual { inset: 0 0 auto 0; height: 360px; }
  /* クレーンの先端が切れないよう、縮小率と上下位置を詰めている */
  .hero-iso { --iso-scale: .29; --iso-tx: 10px; --iso-ty: 40px; }
  .hero-card {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 var(--gutter-hero);
    padding: 32px 28px 30px;
  }
  .hero h1 { font-size: 27px; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; height: 52px; }
  .hero-scroll { display: none; }

  .strengths { grid-template-columns: 1fr; gap: 32px; }
  .strength .slot-strength { height: 200px; }
  .works { grid-template-columns: 1fr; gap: 32px; }
  .works-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
  .work .slot { height: 220px; }

  .recruit { padding: 88px var(--gutter) 96px; }
  .recruit-text { gap: 32px; }
  .recruit-text h3 { font-size: 26px; }
  .recruit-media .slot-main { height: 320px; }
  .recruit-stats { grid-template-columns: 1fr; gap: 24px; padding: 26px 0; }
  .recruit-stat b { font-size: 32px; }
  .recruit-actions .btn { flex: 1 1 100%; justify-content: center; }

  .company-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }

  .contact { padding: 0 var(--gutter) 80px; }
  .contact-box { padding: 44px 28px; gap: 32px; }
  .contact-copy h2 { font-size: 26px; }
  .contact-actions { flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
  .contact-tel a { font-size: 26px; }
  .btn-contact { width: 100%; justify-content: center; height: 58px; padding: 0 20px; }

  .site-footer { padding: 40px var(--gutter); flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-meta { align-items: flex-start; }
}

/* ── 印刷/モーション配慮 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 〜768px: 動画ヒーローは全画面(映像がビューポートを埋める) ─────────
   **640px ではなく 768px。** hero.js は `max-width: 768px` をモバイル
   (軽い抽出予算 + 画面に映る範囲だけの切り出し)と判定する。CSS 側を 640px にしていると
   641〜768px(iPad縦・iPhone横持ち)だけ別のレイアウトになる
   (2026-08-06 検品るんの指摘)。**hero.js の判定とこの値は必ず揃える。**

   ヒーローを 100svh にして .hero-visual を全面に敷くのはモジュール側
   modules/scroll-video-hero/hero.css が持つ。ここはテンプレート固有の層
   (カードの位置・ベール・フレーム)だけを合わせる。
   静止写真ヒーロー(hero_type: photo)には `:has(.svh)` で当たらない。

   経緯(逆戻りさせないために全部残す):
   1. 固定px高の縦長枠に cover →「圧縮されてすごく見づらい」(2026-08-06)
   2. 素材比率の帯 + カードの縦積み → **カードの下に濃紺が大きく余った**(同日)
   3. 100svh 全面 cover → 地色は消えたが、**16:9 を 375×812 へ cover すると
      拡大率3.85倍**になり、素材1280pxのうち中央332px(26%)しか映らない。
      2026-08-07 ゆい氏指摘(介護で先に発覚。建設も同条件なので同じ直し方を展開)

   **現行(4)は「映像パネル + 下端固定カード」**(介護テンプレと同じ考え方)。
   映像の枠を 56svh に抑えて拡大率を 2.0倍(素材の50%が映る)まで落とし、
   カードは画面下端に固定してパネルの下に余白を残さない。
   **建設はここが介護より楽。** パネルの下に出るのは `.hero` 自身の濃紺 +
   図面グリッドで、モジュールの下端スクリム(濃紺)がそのまま繋がるため、
   介護のような地色の差し替えもフェードの追加も要らない。

   **100svh 全面 cover へ戻さないこと**(3. の「拡大しすぎ」に逆戻り)。
   **パネルを縮めすぎないこと**(2. の「カードだけの画面」に逆戻り)。
   **56svh とカードの高さはセットで動かす。** */
@media (max-width: 768px) {
  /* 640px 節の「ビジュアルは上・カードは下」の考え方は残しつつ、
     カードを絶対配置に戻してヒーロー内(100svh)へ収める */
  .hero:has(.svh) { padding-top: 0; padding-bottom: 0; }
  /* 映像パネル。**ここの高さが拡大率を決める**(枠が縦長なほど拡大する)。
     canvas の cover(hero.js drawSource)もフレームの切り出し幅(cropRectFor)も
     枠の寸法から計算しているので、ここを変えれば抽出解像度もついてくる */
  .hero:has(.svh) .hero-visual { inset: 0 0 auto 0; height: 56svh; }
  /* 上端にもスクリムを足す。モジュール既定のモバイル用スクリムは下端だけで、
     全面 cover の頃は素材の中央(濃い建物)がロゴの裏に来ていたので足りていた。
     パネル化で**素材の上端(明るい空)がロゴの裏に来る**ようになり、
     白ロゴ(青葉建設 / AOBA CONSTRUCTION)が飛ぶ。
     詳細度でモジュール側に勝たせるため `.page:has(.svh)` を頭に付けている */
  .page:has(.svh) .svh-overlay {
    background:
      linear-gradient(180deg, rgba(10, 24, 38, .5) 0%, rgba(10, 24, 38, 0) 22%),
      linear-gradient(0deg,
        rgba(10, 24, 38, .62) 0%,
        rgba(10, 24, 38, .18) 42%,
        rgba(10, 24, 38, 0) 70%);
  }
  .hero:has(.svh) .hero-card {
    position: absolute;
    left: var(--gutter-hero);
    right: var(--gutter-hero);
    bottom: 32px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 26px 24px 24px;
  }
  .hero:has(.svh) .hero-scroll { display: none; }
}

/* ── 横持ちの短いビューポート(高さ480px以下) ─────────────────
   スマホ横持ち(640×360・667×375・上限768幅)では、ヒーローが 100svh =
   360px しかないのに白カードは 376px あった。カードは `bottom` 基準の
   絶対配置なので、**足りないぶんが上へ伸びてヘッダーを突き抜け**、
   見出しがロゴ(青葉建設 / AOBA CONSTRUCTION)に重なって両方読めなくなる。

   縦(360×640)は 640px の高さがあるので従来どおり。**高さでだけ分岐する。**
   ここで詰めるのは横持ち専用の値で、マスターのトークン(縦持ち・PC)には
   一切かからない。

   考え方は「まず縮めて必ず収める、それでも溢れたらカード内で送る」。
   - 余白・字送りを横持ちぶんだけ詰める(縦のリズムを1画面に畳む)
   - ボタンは縦積み(flex 1 1 100%)をやめて**横並び**にする。
     これだけで116px→44pxになり、いちばん効く
   - `max-height` + `overflow-y: auto` は保険。見出しやリード文が長い社でも
     ヘッダーへ食い込むことはなくなる(通常の brief では発火しない) */
@media (max-width: 768px) and (max-height: 480px) {
  /* ヘッダーも横持ちぶん詰める。ここが薄くなるぶんカードに高さを回せる */
  .site-header { padding-top: 10px; padding-bottom: 10px; }

  /* **横持ちは全面 cover に戻す。** 768px節のパネル(56svh)は
     「16:9 を縦長ビューポートへ cover すると拡大しすぎる」ための逃げなので、
     画面のほうが 16:9 に近い横持ちでは要らない(むしろ 56svh = 200px 程度しか
     残らず、カードとヘッダーの間に濃紺の帯が挟まる) */
  .hero:has(.svh) .hero-visual { inset: 0; height: auto; }

  .hero:has(.svh) .hero-card {
    bottom: 16px;
    padding: 16px 20px 18px;
    /* ヘッダー(最大56px)+ 余白12px + 下オフセット16px を空ける */
    max-height: calc(100svh - 84px);
    overflow-y: auto;
  }
  .hero:has(.svh) .hero-kicker { margin-bottom: 10px; }
  .hero:has(.svh) h1 { font-size: 21px; margin-bottom: 10px; }
  .hero:has(.svh) .hero-lead { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
  /* 640px 節の `flex: 1 1 100%`(縦積み)を打ち消す */
  .hero:has(.svh) .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero:has(.svh) .hero-actions .btn {
    flex: 1 1 0;
    height: 44px;
    padding: 0 14px;
  }
}