/* 株式会社中屋 サイト共通のスタイル（デザイン案B「縦書きの粋」を土台にする） */

/* ===== 色 ===== */
.page {
  --ai: #1F3A5F;
  --accent: #9C4A2F;
  --ai-deep: color-mix(in srgb, var(--ai) 82%, #000);
  --ai-tint: color-mix(in srgb, var(--ai) 7%, #fff);
  /* 墨色: ヒーローの幕・既定のヘッダーの地（--ai から作る） */
  --sumi: color-mix(in srgb, var(--ai) 42%, #000);
  --ink: #18222D;
  --text: #2B3540;
  --sub: #5A6570;
  --line: #D7DDE3;
  --line-strong: #B9C2CB;
  --bg: #FFFFFF;
  --bg-alt: #F3F5F7;
  --ph: #E8ECF0;
  --on-ai: #FFFFFF;
  --on-ai-sub: color-mix(in srgb, var(--ai) 15%, #fff);
  --on-ai-line: rgba(255, 255, 255, .24);
  --img-label-bg: rgba(24, 34, 45, .72);
  /* 写真の上の白い文字に添える、控えめな影 */
  --on-photo-shadow: 0 1px 2px rgba(10, 16, 24, .45), 0 0 18px rgba(10, 16, 24, .35);
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-gothic: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --header-h: 80px;
}

/* ===== 基本 ===== */
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
body { margin: 0; background: #FFFFFF; }
*, *::before, *::after { box-sizing: border-box; }

.page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-gothic);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
}
:where(.page) h1, :where(.page) h2, :where(.page) h3, :where(.page) h4, :where(.page) p, :where(.page) ul, :where(.page) ol, :where(.page) dl, :where(.page) dd, :where(.page) figure { margin: 0; }
:where(.page) ul { padding: 0; list-style: none; }
:where(.page) a { color: inherit; }
:where(.page) img { display: block; max-width: 100%; }
:where(.page) svg { display: block; flex: none; }

:where(.page) h1, :where(.page) h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "palt";
}
:where(.page) h1, :where(.page) h2, :where(.page) h3, :where(.page) h4 { word-break: auto-phrase; line-break: strict; text-wrap: balance; }
:where(.page) p, :where(.page) li { text-wrap: pretty; word-break: auto-phrase; line-break: strict; }
.np { display: inline-block; }

.page :focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; }
.hero :focus-visible { outline-color: var(--on-ai); }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* スキップリンク（フォーカス時だけ表示） */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--bg);
  color: var(--ai);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--ai);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ===== 共通の部品 ===== */
.lead {
  font-size: 17px;
  line-height: 2;
  word-break: auto-phrase;
  line-break: strict;
}
.note {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sub);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  word-break: auto-phrase;
  line-break: strict;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--fill { background: var(--ai); border-color: var(--ai); color: var(--on-ai); }
.btn--fill:hover { background: var(--ai-deep); border-color: var(--ai-deep); }
.btn--outline { background: transparent; border-color: var(--ai); color: var(--ai); }
.btn--outline:hover { background: var(--ai-tint); }
/* 濃いヒーローの上のボタン */
.btn--light { background: var(--on-ai); border-color: var(--on-ai); color: var(--sumi); }
.btn--light:hover { background: var(--ai-tint); border-color: var(--ai-tint); }
.btn--ghost { background: transparent; border-color: var(--on-ai); color: var(--on-ai); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ai);
  text-decoration: none;
  text-underline-offset: 5px;
  transition: color .15s ease;
}
.more:hover { text-decoration: underline; }
.section-more { display: flex; justify-content: flex-end; margin-top: 48px; }

.fig {
  position: relative;
  overflow: hidden;
  background: var(--ph);
}
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig--3x2 { aspect-ratio: 3 / 2; }
.fig--4x3 { aspect-ratio: 4 / 3; }
.fig__label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  background: var(--img-label-bg);
  color: var(--on-ai);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
}

/* 〔 〕の仮置き: 括弧の前の空きを詰める（確定の文字には付けない） */
.ph { font-feature-settings: "palt"; }

/* 電話番号の大きな表示。
   番号が決まるまでは href の無い <a>（押しても何も起きず、フォーカスも当たらない）。
   href="tel:…" を足すと、スマホではタップで電話がかかる見た目になる */
.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-gothic);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  font-feature-settings: "palt";
  color: var(--ink);
  text-decoration: none;
}
.tel-link svg { color: var(--ai); }
.tel-link[href] {
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 8px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.tel-link[href]:hover { color: var(--ai); text-decoration-color: currentColor; }
/* 「電話をかける」の添え書き: スマホで href があるときだけ出す */
.tel-link__cta { display: none; }

/* ===== 区画（PC: 左の細い列に縦書きの見出し、右に内容） ===== */
.section { padding-block: 128px; }
.section--alt { background: var(--bg-alt); }

.sec {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 64px;
}
.sec__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sec__num {
  font-family: var(--font-mincho);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
/* 番号と縦線が続いて記号に見えないよう、間を空ける */
.sec__num + .sec__rule { margin-top: 10px; }
.sec__rule {
  display: block;
  width: 2px;
  height: 32px;
  background: var(--accent);
}
.sec__side h1,
.sec__side h2 {
  writing-mode: vertical-rl;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.5;
  letter-spacing: .18em;
  white-space: nowrap;
  /* 縦組みでは横組み用の詰め（palt）を使わない */
  font-feature-settings: normal;
}
.sec__side h1 .np,
.sec__side h2 .np { display: block; }
.sec__side h1 .np + .np,
.sec__side h2 .np + .np { margin-top: 1em; }
.sec__lead { margin-bottom: 64px; max-width: 46em; }

/* ===== ヘッダー =====
   既定（JS なし）: 墨色の半透明の地に白い文字
   JS あり（トップ）: ヒーローの上では地を透明に（is-clear）、ヒーローを過ぎたら白地（is-solid）
   下層のページ: 最初から白地（HTML に is-solid を付ける） */
.site-header {
  /* スクロール中に下のボタンや札が透けないよう、ほぼ不透明にする */
  --h-bg: color-mix(in srgb, var(--sumi) 95%, transparent);
  --h-fg: var(--on-ai);
  --h-sub: var(--on-ai-sub);
  --h-line: var(--on-ai-line);
  --h-cta-bg: var(--on-ai);
  --h-cta-fg: var(--sumi);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--h-bg);
  border-bottom: 1px solid transparent;
  color: var(--h-fg);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.site-header :focus-visible { outline-color: var(--h-fg); }
.site-header.is-clear { --h-bg: transparent; }
/* 地が透明なとき、写真の明るい空の上でも文字が読めるよう、控えめな影を添える */
.site-header.is-clear .brand__name,
.site-header.is-clear .brand__sub,
.site-header.is-clear .gnav__list a,
.site-header.is-clear .menu-btn { text-shadow: var(--on-photo-shadow); }
.site-header.is-clear .menu-btn svg { filter: drop-shadow(0 1px 2px rgba(10, 16, 24, .5)); }
.site-header.is-solid {
  --h-bg: var(--bg);
  --h-fg: var(--ink);
  --h-sub: var(--sub);
  --h-line: var(--line);
  --h-cta-bg: var(--ai);
  --h-cta-fg: var(--on-ai);
  border-bottom-color: var(--line);
}
.site-header.is-solid :focus-visible { outline-color: var(--ai); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.brand { display: flex; align-items: center; }
.brand__name {
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--h-fg);
  text-decoration: none;
  white-space: nowrap;
}
.brand__sub {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--h-line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--h-sub);
  white-space: nowrap;
}
.gnav { display: flex; align-items: center; gap: 40px; }
.gnav__list { display: flex; gap: 36px; }
.gnav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--h-fg);
  text-decoration: none;
  text-underline-offset: 6px;
}
.gnav__list a:hover,
.gnav__list a[aria-current="page"] { text-decoration: underline; }
.gnav__list a[aria-current="page"] { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.gnav .btn {
  min-height: 44px;
  background: var(--h-cta-bg);
  border-color: var(--h-cta-bg);
  color: var(--h-cta-fg);
}
.gnav .btn:hover { opacity: .88; }
/* 今いるページのボタン（お問い合わせのページ）: 下に細い線で控えめに示す */
.gnav .btn[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }

.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  margin-right: -8px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--h-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
}
.menu-btn--close { display: inline-flex; color: var(--ink); }

/* ===== スマホのメニュー ===== */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}
.sp-menu[hidden] { display: none; }
.sp-menu__top {
  flex: none;
  height: 60px;
  border-bottom: 1px solid var(--line);
}
.sp-menu__top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.sp-menu__top .brand__name { font-size: 19px; color: var(--ink); }
.sp-menu__body { width: 100%; padding-top: 8px; padding-bottom: 40px; }
.sp-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
}
.sp-menu__list a[aria-current="page"] { color: var(--ai); }
.sp-menu__list a svg { color: var(--sub); }
.sp-menu__cta { margin-top: 32px; }
.sp-menu__cta .btn { width: 100%; min-height: 56px; }

/* ===== ヒーロー（写真全面＋縦書き） =====
   6枚の写真を重ね、ゆっくり切り替える。
   次の写真を上の層でフェードインさせ、終わってから下の写真を隠す（間に墨色の地を見せない）。 */
.hero {
  position: relative;
  overflow: hidden;
  min-height: max(640px, 100vh);
  background: var(--sumi);
  color: var(--on-ai);
}
.hero__fig {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}
.hero-slide.is-leaving { opacity: 1; z-index: 1; }
.hero-slide.is-active { opacity: 1; z-index: 2; }
/* 切り替わって現れる写真（最初の1枚は、読み込み直後にすぐ見せるので動かさない） */
.hero-slide.is-active:not(.is-init) { animation: hero-fade 1.8s ease-in-out both; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-pc, 25% 50%);
  transform-origin: var(--origin, 18% 50%);
}
/* 拡大: 現れてから消えるまでの約9.6秒（フェードイン1.8＋表示6＋フェードアウト1.8）かけて、ゆっくり1.06倍まで */
.hero-slide.is-active img,
.hero-slide.is-leaving img { animation: hero-zoom 9.6s linear both; }
@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
/* 一時停止（ボタン・画面外・タブが隠れたとき）: 拡大も切り替えの途中も止める */
.hero.is-paused .hero-slide,
.hero.is-paused .hero-slide img { animation-play-state: paused; }
/* ?slide=N の確認用表示: 拡大なしで止める */
.hero.is-static .hero-slide,
.hero.is-static .hero-slide img { animation: none; }

/* 墨色の幕: 右（縦書きの下）・下（左下の文字）・上（ヘッダー）の3方向。
   昼の写真は空が明るいので、PC の右の幕は縦書きの下（右から約15〜31%）で濃くする。
   幕は文字の下の帯だけにかけ、写真の左〜中央（主な被写体）は明るいまま見せる。
   PC の上の幕は、ヘッダーの小さな文字（とび・土工工事 13px）の高さ（〜56px）で濃く保ち、背景との比 4.5 以上を確保する */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--sumi) 82%, transparent) 0, color-mix(in srgb, var(--sumi) 70%, transparent) 56px, transparent 180px),
    linear-gradient(to left, color-mix(in srgb, var(--sumi) 58%, transparent) 0%, color-mix(in srgb, var(--sumi) 46%, transparent) 22%, color-mix(in srgb, var(--sumi) 28%, transparent) 36%, transparent 52%),
    linear-gradient(to top, color-mix(in srgb, var(--sumi) 90%, transparent) 0%, color-mix(in srgb, var(--sumi) 60%, transparent) 32%, transparent 56%);
}
.hero__inner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-rows: auto minmax(40px, 1fr) auto;
  min-height: max(640px, 100vh);
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 72px;
}
/* PC: 縦書き（右）と左下の文字は横に重ならないので、同じ高さの範囲に並べる */
.hero__title {
  grid-row: 1 / 4;
  align-self: start;
  justify-self: end;
  margin-right: clamp(0px, 4vw, 72px);
  writing-mode: vertical-rl;
  font-size: min(clamp(56px, 6.2vw, 96px), 9.4vh);
  line-height: 1.3;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--on-ai);
  text-shadow: var(--on-photo-shadow);
  /* 縦組みでは横組み用の詰め（palt）を使わない */
  font-feature-settings: normal;
}
.hero__title span { display: block; }
.hero__title span + span { margin-top: 1em; }
.hero__info { grid-row: 3; grid-column: 1; justify-self: start; align-self: end; max-width: 34em; text-shadow: 0 1px 2px rgba(10, 16, 24, .35); }
.hero__actions .btn { text-shadow: none; }
.hero__name {
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
}
.hero__biz {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .12em;
  color: var(--on-ai-sub);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.hero__actions .btn { min-width: 13.5em; }

/* 右下: 一時停止のボタンと「イメージ」の札 */
.hero__tools {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__label {
  position: static;
  border: 1px solid rgba(255, 255, 255, .28);
}
.hero-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2px;
  background: color-mix(in srgb, var(--sumi) 62%, transparent);
  color: var(--on-ai);
  cursor: pointer;
  transition: background-color .15s ease;
}
.hero-toggle:hover { background: color-mix(in srgb, var(--sumi) 82%, transparent); }
.hero-toggle[hidden] { display: none; }

/* ===== 下層のページの最初（上部の帯の写真＋ページの見出し） ===== */
.page-head { padding-top: var(--header-h); }
.page-head__fig { aspect-ratio: 3 / 1; }
/* PC: 写真の帯を低くし、見出しと最初の内容（お問い合わせの電話番号など）を最初の画面に入れる */
@media (min-width: 960px) {
  .page-head__fig { aspect-ratio: 5 / 1; }
}
/* 低い帯（PC の 5:1）で、お問い合わせの写真のヘルメットの頭頂と、図面を指さす手の両方が入る縦の位置にする。
   写真の縦の中央の帯（上から約22〜78%）に主題があるので、中央より少し上の 46%（スマホ・タブレットの 3:1 は切り落としなし） */
.page-head__fig--upper img { object-position: 50% 46%; }
.page-head__main .tel-card { margin-top: 28px; }
.page-head__body { padding-block: 72px 24px; }
.page-head__main { align-self: center; }
.page-head__lead { max-width: 40em; }
.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  margin-top: 28px;
}
.page-toc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ai);
  text-decoration: none;
  text-underline-offset: 5px;
}
.page-toc a:hover { text-decoration: underline; }

/* ===== はじめに ===== */
.intro { padding-top: 128px; padding-bottom: 96px; }
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 80px;
  align-items: center;
}
.intro__text {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .06em;
  color: var(--ink);
}
/* 1文ずつ行の頭から始める（文の途中で次の文へ続けて折り返さない） */
.intro__s { display: block; text-wrap: balance; }
.fig--intro { aspect-ratio: 4 / 5; }
.fig--intro img { object-position: 64% 50%; }

/* 基本情報の帯 */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 96px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts__item { padding: 22px 24px; }
.facts__item + .facts__item { border-left: 1px solid var(--line); }
.facts dt { font-size: 13px; line-height: 1.6; color: var(--sub); }
.facts dd {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  word-break: auto-phrase;
  line-break: strict;
}

/* ===== 事業内容（トップの要約） ===== */
.biz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.biz__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 28px;
  margin-bottom: 20px;
}
.biz__head h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.tag {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--ai);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--ai);
}
.biz__list li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.biz__list li:last-child { border-bottom: 1px solid var(--line); }
.biz__name {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink);
}
.biz__desc {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

/* ===== 事業内容（会社概要のページの詳細: 6つの作業を写真つきで） ===== */
.work-group + .work-group { margin-top: 80px; }
.work-group > .biz__head { margin-top: 0; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}
.work h4 {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.work p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}

/* ===== 施工実績 ===== */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.case {
  background: var(--bg);
  border: 1px solid var(--line);
}
/* 4:3 の枠で右端の人物が切れないよう、見せる位置を右寄りにする（施工実績3: 右端で合図する職人） */
.fig--right img { object-position: 75% 50%; }
.case__body { padding: 22px 24px 26px; }
.case__meta { font-size: 13px; line-height: 1.7; color: var(--sub); }
.case h3 {
  margin: 8px 0 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.case__dl {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 6px 8px;
  font-size: 14px;
  line-height: 1.7;
}
.case__dl dt { color: var(--sub); }
.case__dl dd { color: var(--text); }

/* ===== 会社概要の表 ===== */
.profile { border-top: 1px solid var(--line-strong); }
.profile__row {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.profile dt {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--sub);
}
.profile dd { font-size: 16px; line-height: 1.8; color: var(--ink); }

/* ===== 所在地と地図のリンク ===== */
.access__addr {
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
}
.access__actions { margin-top: 24px; }
.access__note { margin-top: 12px; }

/* ===== お問い合わせ（明るい地） ===== */
.contact { background: var(--bg-alt); }
/* 同じ明るい地の区画が続くときは、白地にして上に罫線を引く */
.contact--plain { background: var(--bg); border-top: 1px solid var(--line); }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.contact__col { padding: 32px 40px; }
.contact__col + .contact__col { border-left: 1px solid var(--line); }
.contact__grid--one { grid-template-columns: minmax(0, 1fr); }
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.contact__label {
  /* 見出し（h2）に付けたときも、札としてゴシックでそろえる */
  font-family: var(--font-gothic);
  font-feature-settings: normal;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--sub);
}
.contact__tel { margin-top: 8px; }
.contact__hours {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sub);
}
.contact__col .btn { margin-top: 16px; }
.contact__row .btn { margin-top: 0; }

/* お問い合わせのページ: 電話の欄 */
.tel-card {
  padding: 40px 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ai);
}
.tel-card__dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 8px 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.8;
}
.tel-card__dl dt { color: var(--sub); }
.tel-card__dl dd { color: var(--ink); }
.tel-card__note { margin-top: 16px; }

.ask { margin-top: 64px; }
.ask:first-child { margin-top: 0; }
.ask__list {
  border-top: 1px solid var(--line);
}
.ask__list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
}
.ask__list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .7em;
  background: var(--accent);
}
.ask__list small { display: block; font-size: 14px; color: var(--sub); }

/* ===== 幾何学の部品（中屋の想い・人づくり・トップの「想いと人づくり」） =====
   足場の格子・筋交い・段を、細い線と正方形だけで表す（画像は使わない） */

/* 方眼の地: 足場の格子に見立てた、48px 角の薄い線 */
.grid-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ai) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ai) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  border-top: 1px solid var(--line);
}

/* ずらした枠: 写真の右下（--left は左下）に、色の細い枠を重ねる */
.frame-offset { overflow: visible; }
.frame-offset img { position: relative; z-index: 1; }
.frame-offset .fig__label { z-index: 2; }
.frame-offset::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.frame-offset--left::before { inset: 20px 20px -20px -20px; }

/* 大きな一文（明朝・左に色の縦線） */
.statement__copy {
  padding-left: 28px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-mincho);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.statement__line { display: block; }
.statement__body { max-width: 40em; margin-top: 56px; }
.statement__body p { font-size: 16.5px; line-height: 2.1; }
.statement__body p + p { margin-top: 1.4em; }

/* 大切にしていること: 大きな番号と、上に太い線を引いた3列 */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 0;
  list-style: none;
}
.value {
  position: relative;
  padding: 32px 28px 36px;
  background: var(--bg);
  border-top: 3px solid var(--ai);
}
/* 右上の角に小さな正方形 */
.value::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: var(--accent);
}
.value__num {
  display: block;
  font-family: var(--font-mincho);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ai);
}
.value h3 {
  margin-top: 24px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.value p { margin-top: 14px; font-size: 15px; line-height: 1.9; }

/* 代表あいさつ */
.greeting {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.greeting__fig { aspect-ratio: 4 / 5; }
.greeting__fig img { object-position: 30% 20%; }
.greeting__catch {
  font-family: var(--font-mincho);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--ink);
  font-feature-settings: "palt";
}
.greeting__body > p:not(.greeting__catch):not(.note) { margin-top: 1.4em; font-size: 16px; line-height: 2.05; }
.greeting__catch + p { margin-top: 32px !important; }
.greeting__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 16px;
  margin-top: 40px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.greeting__role { font-size: 14px; color: var(--sub); }
.greeting__name {
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink);
}

/* 人づくり: 3つの柱（ひし形の印） */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
}
.pillar { padding: 28px 28px 32px; }
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar__mark {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  transform: rotate(45deg);
}
.pillar h3 {
  margin-top: 20px;
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--ink);
}
.pillar p { margin-top: 10px; font-size: 15px; line-height: 1.9; }

/* 成長のステップ: 右へ行くほど1段ずつ高くなる階段 */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 24px 20px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ai);
}
.step + .step { border-left: 0; }
/* 段の高さ: 前の段ほど上の余白を増やして、箱の上端を階段状に上げる（下端はそろえる） */
.step:nth-child(1) { margin-top: 144px; }
.step:nth-child(2) { margin-top: 96px; }
.step:nth-child(3) { margin-top: 48px; }
.step:nth-child(4) { margin-top: 0; background: var(--ai); border-color: var(--ai); color: var(--on-ai); }
.step:nth-child(4) h3,
.step:nth-child(4) .step__no,
.step:nth-child(4) .step__time { color: var(--on-ai); }
.step__no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent);
}
.step h3 {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.step__time { margin-top: 4px; font-size: 13.5px; color: var(--sub); }
.step p:last-child { margin-top: 14px; font-size: 14.5px; line-height: 1.85; }

/* 現場の1日: 写真と、縦線にひし形の印を並べた時間割 */
.day {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.day__fig { aspect-ratio: 4 / 5; }
.day__fig img { object-position: 22% 50%; }
.timeline { position: relative; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 1px;
  background: var(--line-strong);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 28px 32px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 11px;
  height: 11px;
  background: var(--bg);
  border: 2px solid var(--accent);
  transform: rotate(45deg);
}
.timeline__time {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--ai);
  font-feature-settings: "tnum";
}
.timeline h3 { font-size: 16.5px; font-weight: 600; line-height: 1.7; color: var(--ink); }
.timeline p { margin-top: 2px; font-size: 14.5px; line-height: 1.8; color: var(--text); }

/* トップ: 2枚の大きなリンク（写真＋英字の小見出し） */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.tile {
  position: relative;
  display: block;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease;
}
.tile:hover { border-color: var(--ai); }
.tile__fig { aspect-ratio: 16 / 9; }
.tile__fig img { transition: transform .6s ease; }
.tile:hover .tile__fig img { transform: scale(1.04); }
.tile__body { display: block; padding: 24px 72px 28px 28px; }
.tile__en {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--accent);
}
.tile__title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
}
.tile__text { display: block; margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--sub); }
/* 右下の正方形の矢印 */
.tile__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--ai);
  color: var(--on-ai);
  transition: background-color .15s ease;
}
.tile:hover .tile__arrow { background: var(--ai-deep); }

.page-head__fig--dusk img { object-position: 50% 62%; }
.page-head__fig--people img { object-position: 50% 30%; }

/* PC の狭い幅: ヘッダーのメニューが5つになったので、会社名の添え書きを隠して間を詰める */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .brand__sub { display: none; }
  .gnav { gap: 24px; }
  .gnav__list { gap: 22px; }
}

@media (max-width: 959.98px) {
  .grid-bg { background-size: 32px 32px; }
  .frame-offset::before { inset: 12px -12px -12px 12px; }
  .frame-offset--left::before { inset: 12px 12px -12px -12px; }
  .statement__copy { padding-left: 16px; font-size: clamp(22px, 6.2vw, 34px); letter-spacing: .04em; }
  .statement__body { margin-top: 36px; }
  .statement__body p { font-size: 15.5px; }

  .values { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .value { padding: 28px 22px 30px; }
  .value__num { font-size: 44px; }

  .greeting { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .greeting__fig { aspect-ratio: 3 / 2; margin-right: 12px; }

  .pillars { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .pillar { display: grid; grid-template-columns: 14px auto; column-gap: 16px; align-items: center; padding: 22px 4px; }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--line); }
  .pillar h3 { margin-top: 0; font-size: 20px; }
  .pillar p { grid-column: 1 / -1; }

  /* 階段は縦に並べ、下の段ほど右へ寄せる（左の余白を段ごとに減らす＝上るほど広がる） */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step:nth-child(n) { margin-top: 0; }
  .step + .step { border-left: 1px solid var(--line); border-top-width: 3px; }
  .step:nth-child(1) { margin-left: 36px; }
  .step:nth-child(2) { margin-left: 24px; }
  .step:nth-child(3) { margin-left: 12px; }
  .step:nth-child(4) { margin-left: 0; border-left-color: var(--ai); }

  .day { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .day__fig { aspect-ratio: 3 / 2; margin-left: 12px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .tiles { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tile__title { font-size: 22px; }
}

/* ===== フッター ===== */
.site-footer {
  padding: 56px 0 32px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px 48px;
}
.site-footer__name {
  font-family: var(--font-mincho);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--ink);
}
.site-footer__biz { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--sub); }
.site-footer__addr { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--text); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px 28px;
}
.site-footer__links a {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer__links a:hover { color: var(--ai); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.site-footer__copy { font-size: 12.5px; line-height: 1.6; color: var(--sub); }

/* ===== スマホ・タブレット（960px 未満） ===== */
@media (max-width: 959.98px) {
  .page { --header-h: 60px; font-size: 15px; }
  .brand__name { font-size: 19px; }
  .brand__sub, .gnav { display: none; }
  .menu-btn { display: inline-flex; }

  .lead { font-size: 16px; line-height: 1.95; }
  .section { padding-block: 72px; }

  /* 見出しは横書きに戻す */
  .sec { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sec__side { flex-direction: row; gap: 14px; margin-bottom: 28px; }
  /* 番号と線が続いて記号に見えないよう、スマホでも線は縦のまま短くし、番号との間を空ける */
  .sec__rule { height: 22px; }
  .sec__num + .sec__rule { margin-top: 0; margin-left: 8px; }
  .sec__side h1,
  .sec__side h2 {
    writing-mode: horizontal-tb;
    font-size: 26px;
    letter-spacing: .06em;
    white-space: normal;
    font-feature-settings: "palt";
  }
  .sec__side h1 .np,
  .sec__side h2 .np { display: inline-block; }
  .sec__side h1 .np + .np,
  .sec__side h2 .np + .np { margin-top: 0; }
  .sec__lead { margin-bottom: 40px; }

  .hero { min-height: max(600px, 100svh); }
  /* 縦長の画面で写真を全面に広げると、拡大されすぎて被写体が縦書きの見出しと重なる。
     写真の箱を上の部分に限って縮め、下は墨色の地へなじませる（左下の文字が読める） */
  .hero__fig {
    bottom: auto;
    height: min(132vw, 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  /* 写真ごとに、主な被写体が左〜中央に入る位置を決める（--pos-sp） */
  .hero-slide img { object-position: var(--pos-sp, 20% 50%); }
  .hero__scrim {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--sumi) 75%, transparent) 0, transparent 130px),
      linear-gradient(to left, color-mix(in srgb, var(--sumi) 80%, transparent) 0%, color-mix(in srgb, var(--sumi) 58%, transparent) 30%, transparent 46%),
      linear-gradient(to top, color-mix(in srgb, var(--sumi) 92%, transparent) 0%, color-mix(in srgb, var(--sumi) 72%, transparent) 38%, transparent 58%);
  }
  .hero__inner {
    min-height: max(600px, 100svh);
    padding-top: calc(var(--header-h) + 28px);
    /* 右下の一時停止ボタン（44px）と、最後のボタンが重ならないようにする */
    padding-bottom: 72px;
  }
  .hero__title {
    grid-row: 1;
    margin-right: 0;
    font-size: clamp(40px, 11vw, 44px);
    line-height: 1.25;
    letter-spacing: .1em;
  }
  .hero__name { font-size: 22px; }
  .hero__biz { font-size: 13px; }
  /* 左下の文字の箱を幅いっぱいにする（ボタンを画面の幅に合わせるため） */
  .hero__info { justify-self: stretch; }
  .hero__actions { flex-direction: column; gap: 12px; margin-top: 24px; }
  .hero__actions .btn { width: 100%; }

  .page-head__body { padding-block: 48px 0; }
  .page-toc { gap: 0 24px; margin-top: 16px; }

  .intro { padding-top: 72px; padding-bottom: 64px; }
  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .intro__text { font-size: 20px; line-height: 1.95; }
  .facts { margin-top: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item { padding: 22px 16px; }
  .facts__item + .facts__item { border-left: 0; }
  .facts__item:nth-child(even) { border-left: 1px solid var(--line); }
  .facts__item:nth-child(n+3) { border-top: 1px solid var(--line); }

  .biz { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .biz__head h3 { font-size: 18px; }
  .work-group + .work-group { margin-top: 64px; }

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

  .profile__row { grid-template-columns: 6.5em 1fr; gap: 12px; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__col { padding: 32px 0; }
  .contact__col + .contact__col { border-left: 0; border-top: 1px solid var(--line); }
  .contact__row { flex-direction: column; align-items: stretch; }
  .contact__col .btn { width: 100%; }
  .contact__row .more { align-self: flex-start; }
  /* 電話のボタン（href あり）の下端と「受付時間」の間をあける */
  .contact__tel + .contact__hours { margin-top: 12px; }
  .tel-link { font-size: 26px; }
  /* 番号が決まって href が付いたら、スマホでは幅いっぱいの塗りのボタンにする（タップで電話がかかる） */
  .tel-link[href] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    border-radius: 2px;
    background: var(--ai);
    color: var(--on-ai);
    font-size: 22px;
    text-decoration: none;
  }
  .tel-link[href] svg { color: var(--on-ai); }
  .tel-link[href]:hover { background: var(--ai-deep); color: var(--on-ai); }
  .tel-link[href] .tel-link__cta {
    display: block;
    flex-basis: 100%;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: center;
  }

  .tel-card { padding: 28px 20px; }
  .tel-card__dl { grid-template-columns: 5.5em 1fr; }
  .ask { margin-top: 48px; }

  .site-footer__top { flex-direction: column; }
  .site-footer__links { justify-content: flex-start; max-width: none; gap: 0 28px; }
  .site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ===== スマホ（720px 未満）: 作業の写真は1列 ===== */
@media (max-width: 719.98px) {
  .works { grid-template-columns: minmax(0, 1fr); }
}
/* ===== タブレット（720〜959px） ===== */
@media (min-width: 720px) and (max-width: 959.98px) {
  /* はじめにの写真: 1列になると縦長の写真が高くなりすぎるので、横長にする */
  .fig--intro { aspect-ratio: 3 / 2; }
  /* 施工実績のカードは3列 */
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .case__body { padding: 18px 16px 22px; }
  /* 会社概要の6つの作業は2列（文が細切れにならない幅） */
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  /* 各群の3つ目は1枚だけ左に残らないよう、2列ぶち抜きの横長にする（写真が左・文が右） */
  .works > .work:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }
  .works > .work:nth-child(3) .fig { grid-column: 1; grid-row: 1 / span 2; }
  .works > .work:nth-child(3) h4 { grid-column: 2; margin-top: 0; }
  .works > .work:nth-child(3) p { grid-column: 2; }
}
/* PC の狭い幅: 3列の間を少し詰める */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .works { gap: 36px 20px; }
}
@media (min-width: 960px) {
  .sp-menu { display: none; }
}
/* 動きを減らす設定: 1枚目の静止画だけを出す（拡大も切り替えもしない。一時停止ボタンも出さない） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page *, .page *::before, .page *::after { transition: none !important; animation: none !important; }
  .hero-slide:not(:first-child) { display: none; }
  /* 保険: JS の切り替えの途中で設定が変わっても、1枚目は必ず見せる */
  .hero-slide:first-child { opacity: 1; z-index: 2; }
  .hero-toggle { display: none; }
}

/* ===== color-mix() が使えないブラウザ向けの代わりの指定 =====
   色の値は --ai（#1F3A5F）から計算したもの。透明との混ぜ合わせは、墨色（#0D1828）の rgba にする */
@supports not (color: color-mix(in srgb, red, blue)) {
  .page {
    --ai-deep: #19304E;   /* --ai 82% ＋ 黒 */
    --ai-tint: #EFF1F4;   /* --ai 7% ＋ 白 */
    --sumi: #0D1828;      /* --ai 42% ＋ 黒 */
    --on-ai-sub: #DDE1E7; /* --ai 15% ＋ 白 */
  }
  .site-header { --h-bg: rgba(13, 24, 40, .95); }
  .grid-bg {
    background-image:
      linear-gradient(to right, rgba(31, 58, 95, .07) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(31, 58, 95, .07) 1px, transparent 1px);
  }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(13, 24, 40, .82) 0, rgba(13, 24, 40, .7) 56px, transparent 180px),
      linear-gradient(to left, rgba(13, 24, 40, .58) 0%, rgba(13, 24, 40, .46) 22%, rgba(13, 24, 40, .28) 36%, transparent 52%),
      linear-gradient(to top, rgba(13, 24, 40, .9) 0%, rgba(13, 24, 40, .6) 32%, transparent 56%);
  }
  .hero-toggle { background: rgba(13, 24, 40, .62); }
  .hero-toggle:hover { background: rgba(13, 24, 40, .82); }
  @media (max-width: 959.98px) {
    .hero__scrim {
      background:
        linear-gradient(to bottom, rgba(13, 24, 40, .75) 0, transparent 130px),
        linear-gradient(to left, rgba(13, 24, 40, .8) 0%, rgba(13, 24, 40, .58) 30%, transparent 46%),
        linear-gradient(to top, rgba(13, 24, 40, .92) 0%, rgba(13, 24, 40, .72) 38%, transparent 58%);
    }
  }
}

/* ===== 404 ページ ===== */
.notfound__actions { margin-top: 32px; }