@charset "UTF-8";

/* ============================================================
   村上ハウジング 採用サイト ／ 共通ベース
   ヒーローのレイアウトは assets/css/hero-*.css 側に分離している。
   案が確定したら、選ばれた hero-*.css をこのファイルへ統合する。

   1. トークン
   2. ベース（自前の最小リセット）
   3. 部品：ボタン／プレースホルダー／寸法線
   4. ヘッダー（通常／反転）
   5. 全画面メニュー
   6. ヒーロー共通のタイポと下端の継ぎ目
   7. 動きの抑制
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  /* color */
  --paper:       #FFFFFF;
  --mortar:      #F1F1EF;
  --mortar-d:    #E4E4DF;  /* モルタルを一段沈めた写真面の地 */
  --ink:         #101315;
  --ink-sub:     #5E6468;
  --rule:        #D7D7D3;
  --blueprint:   #2A4A7B;
  --blueprint-d: #1C3457;

  /* type */
  --font-head: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono: "Roboto Mono", "Noto Sans JP", monospace;

  /* space : 4px ベース / 8px グリッド */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 40px;
  --s-7: 56px;
  --s-8: 72px;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
  --header-h: 64px;

  --dur: 200ms;

  /* 面ごとに切り替わる役割色。セクションの地色クラスが上書きする。
     個別に色指定を書かずに済ませるための仕組みで、値は上のトークンのみ */
  --surface:  var(--paper);      /* いま乗っている地の色 */
  --line:     var(--rule);       /* 罫線・寸法線の線 */
  --text-sub: var(--ink-sub);    /* 補助テキスト */
  --tick:     var(--blueprint);  /* 寸法線の端部のヒゲ */
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

/* フォーカスリングは消さない */
:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.site-header--invert:not(.is-scrolled):not(.is-menu-open) :focus-visible {
  outline-color: var(--paper);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--blueprint);
  color: var(--paper);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.skip-link:focus { top: 12px; }

/* 本文中の数値も図面の数値記入として Roboto Mono で組む。
   ラベル用の 0.18em ではなく、和文に混ぜても間延びしない詰めにする */
.num {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0.04em;
}

/* ---------- 3. 部品 ---------- */

/* ボタン：角丸なし・影なし */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  transition: background-color var(--dur) linear,
              border-color var(--dur) linear,
              color var(--dur) linear;
}
.btn--fill { background: var(--blueprint); color: var(--paper); }
.btn--fill:hover { background: var(--blueprint-d); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { border-color: var(--blueprint); color: var(--blueprint); }
.btn--block { width: 100%; }

/* 画像プレースホルダー
   実写差し替え時は figure の中身を img に置換する。
   地の濃さは 3 段：mortar / mortar-d / ink */
.ph {
  aspect-ratio: var(--ratio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--mortar);
  border: 1px dashed var(--rule);
  color: var(--ink-sub);
  text-align: center;
}
/* 実写が入った状態。プレースホルダーの地と破線を外し、写真を面いっぱいに敷く */
.ph--img {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}
.ph--img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ph--deep { background: var(--mortar-d); }
.ph--ink {
  background: var(--ink);
  border-color: var(--ink-sub);
  color: var(--rule);
}
/* 全面に敷く写真は、ラベルを中央ではなく右肩へ逃がす。
   ヒーローの文字は常に左なので、ここだけは右に置けばぶつからない */
.ph--corner {
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--s-1);
  padding: clamp(20px, 4vw, 40px);
  text-align: right;
}
/* 幅が狭いと説明文がキャッチにかぶるので、狭い画面では ID だけ残す */
@media (max-width: 767.98px) {
  .ph--corner .ph__desc { display: none; }
}
.ph__id {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
}
.ph__desc {
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: inherit;
}

/* 寸法線：1px の線＋両端の直交ヒゲ＋線上の数値ラベル */
.dim {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}
.dim__line { position: relative; height: 1px; background: var(--line); }
.dim__line--start { flex: 0 0 clamp(32px, 6vw, 88px); }
.dim__line--end   { flex: 1 1 auto; }

/* 端部のヒゲ（擬似要素） */
.dim__line--start::before,
.dim__line--end::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--tick);
}
.dim__line--start::before { left: 0; }
.dim__line--end::after { right: 0; }

.dim__label {
  padding: 0 var(--s-3);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;   /* 面の地色に応じて反転させる */
}

/* 濃い面の上に置く寸法線 */
.dim--on-ink .dim__label { background: var(--ink); color: var(--paper); }
.dim--on-ink .dim__line--start::before,
.dim--on-ink .dim__line--end::after { background: var(--paper); }
.dim--on-blueprint .dim__label { background: var(--blueprint); color: var(--paper); }
.dim--on-blueprint .dim__line--start::before,
.dim--on-blueprint .dim__line--end::after { background: var(--paper); }

/* ---------- 4. ヘッダー ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) linear,
              border-color var(--dur) linear,
              color var(--dur) linear;
}
.site-header.is-scrolled,
.site-header.is-menu-open {
  background: var(--paper);
  border-bottom-color: var(--rule);
  color: var(--ink);
}

.site-header__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.logo { display: block; margin-right: auto; }
.logo__ja {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.logo__en {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-sub);
}
@media (min-width: 768px) {
  .logo__en { font-size: 10px; letter-spacing: 0.18em; }
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.nav__list a {
  display: block;
  padding: var(--s-2) 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) linear, border-color var(--dur) linear;
}
.nav__list a:hover { color: var(--blueprint); border-bottom-color: var(--blueprint); }

.site-header__entry {
  display: none;
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: 14px;
}

/* ハンバーガー：1px の線2本のみ */
.burger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 2px;
  margin-right: -2px;
}
.burger__bars { position: relative; display: block; width: 26px; height: 11px; }
.burger__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) linear;
}
.burger__bars i:nth-child(1) { top: 0; }
.burger__bars i:nth-child(2) { bottom: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ラベルは開閉で MENU / CLOSE を入れ替える */
.burger__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-sub);
}
.burger__label::after { content: "MENU"; }
.burger[aria-expanded="true"] .burger__label::after { content: "CLOSE"; }

/* 濃い写真の上に乗るときのヘッダー反転。
   スクロールで地色が付いたら通常配色へ戻す */
.site-header--invert:not(.is-scrolled):not(.is-menu-open) { color: var(--paper); }
.site-header--invert:not(.is-scrolled):not(.is-menu-open) .logo__en,
.site-header--invert:not(.is-scrolled):not(.is-menu-open) .burger__label { color: var(--rule); }
.site-header--invert:not(.is-scrolled):not(.is-menu-open) .nav__list a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.site-header--invert:not(.is-scrolled):not(.is-menu-open) .site-header__entry {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}
.site-header--invert:not(.is-scrolled):not(.is-menu-open) .site-header__entry:hover {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- 5. 全画面メニュー ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur) linear;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }

.menu__inner {
  min-height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--s-8)) var(--gutter) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.menu__list { border-top: 1px solid var(--rule); }
.menu__list li { border-bottom: 1px solid var(--rule); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(22px, 4.6vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  transition: color var(--dur) linear;
}
.menu__list a:hover { color: var(--blueprint); }
.menu__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-sub);
}
.menu__foot { margin-top: auto; }
.menu__meta {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-sub);
}

/* ---------- 6. ヒーロー共通 ---------- */
.hero__index {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-sub);
}
.hero__index-key { color: var(--blueprint); }

.hero__catch {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 4.3vw, 60px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.hero__catch-2 { display: inline-block; padding-left: 0.4em; }

.hero__lead {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink-sub);
}

/* 濃い面に乗るヒーローの文字 */
.on-dark .hero__index { color: var(--rule); }
.on-dark .hero__index-key { color: var(--paper); }
.on-dark .hero__catch { color: var(--paper); }
.on-dark .hero__lead { color: var(--rule); }

/* ヒーロー下端：次セクションの気配（罫線＋見出しの上端のみ）
   次セクション実装時にこのブロックごと差し替える */
.hero__seam {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(64px, 9vw, 120px) auto 0;
  padding: var(--s-4) var(--gutter) 0;
  border-top: 1px solid var(--rule);
  height: clamp(76px, 9vw, 104px);
  overflow: hidden;
}
.hero__seam-label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-sub);
}
.hero__seam-title {
  margin-top: var(--s-3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  :root { --header-h: 80px; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .site-header__entry { display: inline-flex; }
  .burger { display: none; }
  .menu { display: none; }
  .hero__lead { font-size: 16px; }
}

/* ============================================================
   8. ページ共通コンポーネント
   ============================================================ */

/* ---- 面（セクションの地色） ----
   地色ごとに、線・補助文字・寸法線の地とヒゲをまとめて切り替える。
   個々の要素に色を書かないための仕組みで、値はトークンのみを使う */
.section--mortar {
  background: var(--mortar);
  --surface: var(--mortar);
}
.section--ink,
.site-footer {
  background: var(--ink);
  color: var(--paper);
  --surface: var(--ink);
  --line: var(--ink-sub);
  --text-sub: var(--rule);
  --tick: var(--paper);
}
.section--blueprint {
  background: var(--blueprint);
  color: var(--paper);
  --surface: var(--blueprint);
  --line: var(--rule);
  --text-sub: var(--rule);
  --tick: var(--paper);
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(88px, 12vw, 168px) 0; }
.section--tight { padding: clamp(64px, 8vw, 112px) 0; }

/* セクションは1pxの罫線から始める。折り返し位置で次があると分かる */
.section__head {
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}
.section__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.section__title {
  margin-top: var(--s-4);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.section__lede {
  margin-top: var(--s-4);
  max-width: 34em;
  font-size: 15px;
  color: var(--text-sub);
}
.section__body { margin-top: clamp(40px, 5vw, 72px); }

/* 小ブロックを積むときの間隔 */
.stack > * + * { margin-top: clamp(56px, 7vw, 104px); }

/* 本文まとまり */
.prose { max-width: 34em; }
.prose p + p { margin-top: 1.4em; }
.prose--wide { max-width: 42em; }

.h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* テキストリンク（罫線1本で示す） */
.link {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color var(--dur) linear, border-color var(--dur) linear;
}
.link:hover { color: var(--blueprint); border-bottom-color: var(--blueprint); }
.section--ink .link:hover,
.section--blueprint .link:hover { color: var(--paper); border-bottom-color: var(--paper); }
.btn--invert { background: var(--paper); color: var(--ink); }
.btn--invert:hover { background: var(--rule); }

/* ---- 下層ページの見出し ---- */
.page-head {
  background: var(--mortar);
  --surface: var(--mortar);
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(48px, 7vw, 96px);
}
.page-head__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.page-head__title {
  margin-top: var(--s-4);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.page-head__lede {
  margin-top: var(--s-5);
  max-width: 34em;
  font-size: 15px;
  color: var(--text-sub);
}

/* ---- 数値（寸法線を主役にするブロック） ---- */
.stats {
  display: grid;
  gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 48px);
}
.stat__label { font-size: 14px; color: var(--text-sub); }
.stat__dim { margin-top: var(--s-3); }
.stat__dim .dim__line--start { flex: 0 0 clamp(12px, 2vw, 28px); }
.stat__dim .dim__label {
  padding: 0 var(--s-3);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: inherit;
  letter-spacing: 0;
}
.stat__num {
  font-family: var(--font-mono);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: 0;
}
.stat__unit {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0;
}
.stat__note {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-sub);
}

/* ---- 垂直の寸法線（沿革などで縦方向を測る） ---- */
.dim--v { flex-direction: column; align-items: center; }
.dim--v .dim__line { width: 1px; height: auto; }
.dim--v .dim__line--start { flex: 0 0 clamp(24px, 5vw, 72px); }
.dim--v .dim__line--start::before,
.dim--v .dim__line--end::after {
  top: 0;
  left: -5px;
  width: 11px;
  height: 1px;
}
.dim--v .dim__line--end::after { top: auto; bottom: 0; right: auto; }
.dim--v .dim__label { writing-mode: vertical-rl; padding: var(--s-3) 0; }

/* ---- 左テキスト／右写真の組（1024px 未満は縦積み） ---- */
.split__media { margin-top: clamp(32px, 5vw, 56px); }

/* ---- カード ---- */
.cards { display: grid; gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 48px); }
.card { display: block; }
.card__media { margin-bottom: var(--s-4); }

/* 1pxの枠で囲む版。情報のまとまりを目で分けるために使う（影・角丸は無し） */
.card--box {
  --pad: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  padding: var(--pad);
  background: var(--surface);
}
.card--box .card__media {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
}
.card--box > :last-child { margin-bottom: 0; }
.card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.card__title {
  margin-top: var(--s-2);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.card__text { margin-top: var(--s-3); font-size: 15px; color: var(--text-sub); }
.card__more { margin-top: var(--s-4); }
a.card:hover .card__title { color: var(--blueprint); }
a.card:hover .card__more .link { color: var(--blueprint); border-bottom-color: var(--blueprint); }

/* ---- 罫線で区切る一覧 ---- */
.list { border-top: 1px solid var(--line); }
.list li {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: 15px;
  line-height: 1.8;
}

/* ---- 表 ---- */
.table,
.table tbody,
.table tr { border-color: var(--line); }   /* UA既定のグレーを残さない */
.table { width: 100%; border-collapse: collapse; }
.table th,
.table td {
  border-top: 1px solid var(--line);
  padding: var(--s-4) 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.table tr:last-child th,
.table tr:last-child td { border-bottom: 1px solid var(--line); }
.table th {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
}
.table td { font-size: 15px; line-height: 1.9; }
/* 1つのセルに複数行を入れるときだけ明示的に改行する。
   .num を含むインラインのspanを巻き込まないよう、専用クラスにしている */
.table td .tline { display: block; }
.table td .tline + .tline { margin-top: var(--s-1); }

/* ---- 沿革（左に縦の寸法線を通して20年の幅を測る） ---- */
.history { position: relative; }
.history__dim { display: none; }
.history__list { border-top: 1px solid var(--line); }
.history__item {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.history__year {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  padding-top: 2px;
}
.history__text { font-size: 15px; }

/* ---- 1日の流れ（時系列。寸法線とは別物なのでヒゲは付けない） ---- */
.flow {
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 3vw, 36px);
}
.flow__item { position: relative; padding-bottom: var(--s-6); }
.flow__item:last-child { padding-bottom: 0; }
.flow__item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(-1 * clamp(20px, 3vw, 36px) - 1px);
  width: 9px;
  height: 1px;
  background: var(--line);
}
.flow__time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-sub);
}
.flow__title { margin-top: var(--s-1); }
.flow__text { margin-top: var(--s-2); font-size: 14px; color: var(--text-sub); }

/* ---- Q&A（社員インタビュー） ---- */
.qa__item { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-5); }
.qa__q { display: grid; grid-template-columns: 2.6em 1fr; gap: var(--s-3); align-items: baseline; }
.qa__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--blueprint);
}
.qa__a { margin-top: var(--s-3); padding-left: 0; font-size: 15px; }

/* ---- 引用（長文の代わりに、一言だけを大きく見せる） ---- */
.quote {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.65;
  letter-spacing: -0.01em;
}
.quote + .prose,
.quote + .card__text { margin-top: var(--s-5); }

/* ---- 開閉ブロック（長い本文を畳んでおく） ---- */
.acc { border-top: 1px solid var(--line); margin-top: var(--s-5); }
.acc > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: block;
  padding: var(--s-4) 32px var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color var(--dur) linear;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--blueprint); }
.acc__body { padding-bottom: var(--s-6); }

/* ＋／− は1pxの線2本で作る（アイコンセットは使わない） */
.faq__mark,
.acc__mark {
  position: absolute;
  right: 0;
  width: 13px;
  height: 13px;
}
.acc__mark { top: 50%; margin-top: -6px; }
.faq__mark::before, .faq__mark::after,
.acc__mark::before, .acc__mark::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.faq__mark::before, .acc__mark::before { left: 0; top: 6px; width: 13px; height: 1px; }
.faq__mark::after,  .acc__mark::after {
  left: 6px;
  top: 0;
  width: 1px;
  height: 13px;
  transition: transform var(--dur) linear;
}
.faq__item[open] .faq__mark::after,
.acc[open] .acc__mark::after { transform: scaleY(0); }

/* ---- 数値の要点（表より軽く、拾い読みできる形） ---- */
.facts { margin: var(--s-4) 0 0; display: grid; gap: 0; }
.facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line);
  padding: var(--s-3) 0;
}
.facts dt { flex: 0 0 5.5em; font-size: 12px; color: var(--text-sub); }
.facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.5vw, 16px);
  letter-spacing: 0.02em;
}
.facts dd .u { font-family: var(--font-head); font-weight: 500; font-size: 0.85em; }

/* ---- 工程を1行で示す（順序はあるが、番号を振るほどではないもの） ---- */
.trail {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: var(--text-sub);
}

/* ---- 手順（選考フロー。順序に意味があるので番号を使う） ---- */
.steps { display: grid; gap: clamp(24px, 3vw, 40px); }
.step { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.step__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--blueprint);
}
.step__title { margin-top: var(--s-2); }
.step__text { margin-top: var(--s-2); font-size: 14px; color: var(--text-sub); }
.step__body { margin-top: var(--s-3); font-size: 15px; }   /* 本文サイズで読ませる版 */

/* ---- よくある質問 ---- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-4) 40px var(--s-4) 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--blueprint);
}
.faq__mark { top: calc(var(--s-4) + 0.7em); }
.faq__a {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: var(--s-3);
  padding: 0 40px var(--s-5) 0;
  font-size: 15px;
}

/* ---- フォーム ---- */
.form { max-width: 720px; }
.form__row { display: grid; gap: var(--s-5); }
.form__row + .form__row { margin-top: var(--s-5); }
.field label,
.fieldset__legend {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.field__req {
  margin-left: var(--s-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--blueprint);
  vertical-align: 1px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  transition: border-color var(--dur) linear;
}
.field input:hover,
.field textarea:hover { border-color: var(--ink-sub); }
.field textarea { min-height: 160px; resize: vertical; }
.field__note { margin-top: var(--s-2); font-size: 12px; color: var(--ink-sub); }

fieldset { margin: 0; padding: 0; border: 0; }

/* 選択肢は面で選ぶ形にする。
   小さな四角だけだと押す範囲が狭く、選択済みかどうかも分かりにくいため、
   区画そのものをボタンにして、選ぶと地色が反転する */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: var(--s-3);
}
/* .field label の共通指定より強くしておく（label 側が display:block を持つため） */
.field .choice,
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  margin-bottom: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-color: var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--dur) linear,
              border-color var(--dur) linear,
              color var(--dur) linear;
}
.field .choice:hover,
.choice:hover { border-color: var(--ink-sub); }
.choice input {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}
.choice__box {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink-sub);
}
.choice__text { display: block; }
.choice__ja {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.choice__en {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;   /* 折り返すと選択肢どうしの高さが揃わなくなる */
  color: var(--ink-sub);
}

/* 選択済み：区画を塗り、四角も塗る（色だけに頼らない） */
.choice input:checked + .choice__box { border-color: var(--blueprint); }
.choice input:checked + .choice__box::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--blueprint);
}
.field .choice:has(input:checked),
.choice:has(input:checked) {
  background: var(--blueprint);
  border-color: var(--blueprint);
  color: var(--paper);
}
.choice:has(input:checked) .choice__box { border-color: var(--paper); }
.choice:has(input:checked) .choice__box::after { background: var(--paper); }
.choice:has(input:checked) .choice__en { color: var(--rule); }

.choice input:focus-visible + .choice__box { outline: none; }
.choice:has(input:focus-visible) {
  outline: 2px solid var(--blueprint);
  outline-offset: 3px;
}

.form__submit { margin-top: var(--s-7); }
.form__result {
  margin-top: var(--s-4);
  border: 1px solid var(--blueprint);
  padding: var(--s-4);
  font-size: 14px;
}
.form__result[hidden] { display: none; }

/* ---- エントリー導線（写真を敷いた面） ---- */
.cta {
  position: relative;
  --surface: var(--ink);
  --line: var(--ink-sub);
  --text-sub: var(--rule);
  --tick: var(--paper);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(88px, 11vw, 152px) 0;
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border: 0;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(20px, 4vw, 40px);
  text-align: right;
}
/* 実写が入ったら、プレースホルダーのID表示用に空けていた内側余白は不要。
   .cta__bg / .hero-a__bg 側の padding より強くしておく */
.ph--img.cta__bg,
.ph--img.hero-a__bg { padding: 0; }

/* 全面に敷く写真の上には白文字が乗る。空が明るい写真だと読めなくなるため、
   露出を落として下げる。半透明パネルやグラデーションは使わない方針のため、
   写真そのものの明度で解決する */
.cta__bg > img { filter: brightness(0.55); }

.cta__inner { position: relative; z-index: 1; }
.cta__title {
  margin-top: var(--s-4);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.cta__text { margin-top: var(--s-4); max-width: 30em; font-size: 15px; color: var(--text-sub); }
.cta__actions { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- フッター ---- */
.site-footer { padding: clamp(56px, 7vw, 96px) 0 var(--s-6); }
.site-footer__inner { display: grid; gap: clamp(40px, 5vw, 64px); }
.footer__logo-ja {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.footer__logo-en {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.footer__address { margin-top: var(--s-5); font-style: normal; font-size: 14px; line-height: 2; color: var(--text-sub); }
.footer__nav-title,
.footer__meta-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.footer__nav { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.footer__nav a {
  font-size: 15px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur) linear;
}
.footer__nav a:hover { border-bottom-color: var(--paper); }
.footer__bottom {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-sub);
}

/* ---- ヘッダーの状態（下層ページは常に地色を敷く） ---- */
.site-header--solid {
  background: var(--paper);
  border-bottom-color: var(--rule);
}
.nav__list a[aria-current="page"] { border-bottom-color: currentColor; }
.menu__list a[aria-current="page"] .menu__num { color: var(--blueprint); }

/* ---- 8-b. 768px 以上 ---- */
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--2,
  .steps--3,
  .steps--4,
  .steps--5 { grid-template-columns: repeat(2, 1fr); }
  .form__row--2 { grid-template-columns: repeat(2, 1fr); }
  .qa__a { grid-template-columns: 2.6em 1fr; }
  .history { padding-left: clamp(48px, 7vw, 96px); }
  .history__dim { display: flex; position: absolute; left: 0; top: 0; bottom: 0; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer__nav { grid-template-columns: repeat(2, auto); gap: var(--s-3) clamp(32px, 4vw, 64px); }
}

/* ---- 8-c. 1024px 以上 ---- */
@media (min-width: 1024px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
  .steps--5 { grid-template-columns: repeat(5, 1fr); }

  /* 段違いグリッド。3枚を同じ高さに揃えない */
  .cards--stagger > :nth-child(2) { margin-top: clamp(32px, 4vw, 64px); }
  .cards--stagger > :nth-child(3) { margin-top: clamp(64px, 8vw, 128px); }

  /* 左テキスト／右写真の非対称2カラム */
  .split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(24px, 3vw, 48px); }
  .split__text { grid-column: 1 / 7; }
  .split__media { grid-column: 8 / 13; }
  .split--flip .split__text { grid-column: 7 / 13; }
  .split--flip .split__media { grid-column: 1 / 6; grid-row: 1; }
  .split__media { margin-top: 0; }
}

/* ---------- 7. 動きを抑える指定を尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}