/* ============================================================
   FUKUMOKU Co., Ltd. — Corporate Site Renewal (ver.A)
   準拠：20260802_フクモク_04_デザインコンセプト（正典）
         20260802_フクモク_07_技術方針（正典）
   ------------------------------------------------------------
   カラーパレット＝正典§3.2の実測HEXをそのまま使用。
   明朝（Zen Old Mincho）は §4.3ルール2 の3箇所のみ：
     ①ヒーローの日本語キャッチ ②コンセプトの中心コピー ③沿革の西暦
   禁止事項（§10）：純白文字・影・角丸・枠線囲み・金の多用（5%以下）
   　→ 色・タイポ・余白・禁止事項は正典のまま不変。
   動き：§10.1の「動きは3つだけ」制限は、司令判断（2026-08-11
     「エフェクト系は参考サイトを丸パクリするくらいの勢いでよい」）
     によりエフェクトに限り上書き。実装は MOTION セクションに集約。
     prefers-reduced-motion では html.motion-on が付かず全停止する。
   ============================================================ */

/* ---------- tokens（正典§3.2） ---------- */
:root{
  color-scheme:dark;                 /* §9.1 スクロールバー等の白浮き防止 */

  /* 地の色 */
  --bg:      #1A1815;   /* 墨黒＝基準の背景 */
  --band:    #26231E;   /* 墨黒・明＝交互の区切り帯（3本柱の1・3本目） */
  --panel:   #3A3226;   /* 濃茶＝強調ブロック（実績カード・数値表・⑩） */
  --paper:   #E9E2D9;   /* 生成り＝明るい帯（RK9逃げ道・印刷） */

  /* 文字の色 */
  --ink:     #F5F2EC;   /* 白練＝見出し（純白は使わない §3.2） */
  --txt:     #D6D1C7;   /* 灰白＝本文 11.65:1 */
  --mut:     #A69E91;   /* 利休鼠＝補助 6.68:1 */
  --sumi:    #1F1C18;   /* 墨＝明るい帯・金ボタンの上の文字 7.01:1 */

  /* 差し色（金＋檜で1画面5%以下 §3.2） */
  --gold:    #C9A227;   /* 金＝CTA・現在地・罫線の要所 7.32:1 */
  --hinoki:  #C08B4E;   /* 檜＝図版・リンク 5.94:1（本文には不使用） */
  --uiline:  #8A8073;   /* UIの枠線（入力欄）4.57:1 */
  --deco:    #3D372F;   /* 装飾の細罫・ゴースト文字（飾り専用 1.51:1） */

  /* 意味を持つ区切り線（--deco は使わない §3.4） */
  --line:      rgba(214,209,199,.22);
  --line-soft: rgba(214,209,199,.10);

  /* フォント（§4.2。控えもゴシックで統一 §4.2★） */
  --en:     "Jost","Helvetica Neue",Arial,sans-serif;
  --mincho: "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:   "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  /* グリッドと余白（§5.4） */
  --w-max:  1280px;     /* コンテンツ最大幅 */
  --w-text: 720px;      /* 読み物の欄＝全角36文字 */
  --pad: clamp(20px,4vw,64px);
  --sec-gap: 160px;     /* セクション上下余白 PC=160 */
  --ease: cubic-bezier(.65,.02,.23,1);
  --header-h: 84px;
}
@media (max-width:1023px){ :root{--sec-gap:112px} }  /* タブレット §8.2 */
@media (max-width:767px){  :root{--sec-gap:80px}  }  /* スマホ §8.2 */

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;            /* 本文の最小サイズ §4.3ルール4 */
  line-height:1.9;           /* 本文の行間 §4.3ルール5 */
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--sumi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* §8.3 */

/* 和紙の質感＝画像でなくSVGノイズ（正典§9.2 対処6） */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main{position:relative;z-index:1}

/* ---------- typography helpers ---------- */
.t-en{font-family:var(--en);font-weight:400;letter-spacing:.16em;text-transform:uppercase}
/* ※旧 .t-mincho：明朝は3箇所限定（§4.3ルール2）のため、
   ページ内キャッチ等はゴシックのウェイト500で代替（クラス名は互換維持） */
.t-mincho{font-family:var(--body);font-weight:500}
.sec{padding-top:var(--sec-gap)}
.wrap{width:min(92%,var(--w-max));margin-inline:auto;position:relative}

/* セクション見出し（§4.4：英 Jost48px／日 Noto16px＝3:1、金の細罫48px） */
.sec-head{margin-bottom:clamp(40px,7vh,84px)}
.sec-head .en{
  font-family:var(--en);font-weight:300;text-transform:uppercase;
  font-size:clamp(32px,3.6vw,48px);line-height:1.1;letter-spacing:.12em;
  color:var(--ink);
}
.sec-head .jp{
  display:block;margin-top:10px;
  font-family:var(--body);font-size:clamp(14px,1.1vw,16px);
  letter-spacing:.14em;color:var(--mut);
}
.sec-head::after{
  content:"";display:block;width:48px;height:1px;background:var(--gold);
  margin-top:16px;
}
/* 金の細罫がスクロールで伸びる（スクロール発火の装飾） */
.motion-on .sec-head::after{width:0;transition:width .85s var(--ease) .12s}
.motion-on .sec-head.is-in::after{width:48px}

/* 巨大装飾文字＝参考サイト同様「背景に沈む塗り文字」（§5.2・§11.3差異3）
   aria-hidden 必須／同内容は .sec-head で読める形に併置 */
.ghost{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--en);font-weight:500;text-transform:uppercase;
  font-size:clamp(80px,15vw,224px);line-height:1;letter-spacing:.04em;
  color:var(--deco);opacity:.55;
  white-space:nowrap;
}

section[id]{scroll-margin-top:76px}

/* 画像コンテナ */
.iw{position:relative;overflow:hidden}

/* ============================================================
   MOTION — スクロール演出（司令判断 2026-08-11 でエフェクト解禁）
   ★すべて html.motion-on を前提にする。JS/GSAPが無い環境と
     prefers-reduced-motion では motion-on が付かない＝素の表示。
   ★色・タイポ・余白・角丸/影の禁止事項には一切触れない。
   ============================================================ */

/* --- ① フェードイン（0.9秒・下から26px。方向は data-reveal の値で） --- */
.motion-on [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.motion-on [data-reveal="left"] {transform:translateX(-30px)}
.motion-on [data-reveal="right"]{transform:translateX(30px)}
.motion-on [data-reveal="fade"] {transform:none}
.motion-on [data-reveal].is-in{opacity:1;transform:none}

/* --- ⑤ ラインマスク送り（ヒーロー／理念キャッチ／職人見出し） --- */
.lm{display:block;overflow:hidden;padding-bottom:.06em}
.lm>span{display:inline-block;will-change:transform}
.motion-on .lm>span{
  transform:translateY(112%);
  transition:transform 1.05s var(--ease);
}
.motion-on .show .lm>span{transform:translateY(0)}
.motion-on .hero .lm>span{transform:none;transition:none} /* hero はGSAP側で制御 */

/* --- ② パララックス --- */
/* 動かす前に scale で余白を作る（移動量はJSが実寸から算出） */
.motion-on [data-px]{overflow:hidden}
.motion-on [data-px] > img,
.motion-on [data-px] > picture > img,
.motion-on [data-px] video{will-change:transform;backface-visibility:hidden}

/* --- 画像の立ち上がり（覆いが下へ引いていくマスク） ---
   ★要素自身に clip-path を掛けると IntersectionObserver が
     「面積0＝画面外」と判定して発火しない（2026-08-11 実測で判明）。
     そのため覆いは ::after の別レイヤーで作る。 */
.motion-on [data-wipe]{position:relative}
.motion-on [data-wipe]::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--bg);transform-origin:bottom center;
  transition:transform 1.1s var(--ease);
}
.motion-on [data-wipe].is-in::after{transform:scaleY(0)}

/* --- ③ スクロール発火の装飾（参考サイト .circle と同等） --- */
.circle{
  position:absolute;display:block;width:8px;height:8px;border-radius:50%;
  background:var(--ink);
}
.circle--inline{
  position:relative;display:inline-block;vertical-align:middle;
  width:7px;height:7px;background:var(--hinoki);margin-right:12px;
}
.motion-on .circle{
  width:0;height:0;opacity:0;
  transition:width .55s var(--ease),height .55s var(--ease),opacity .4s ease;
}
.motion-on .circle.active_circle{width:8px;height:8px;opacity:1}
.motion-on .circle--inline.active_circle{width:7px;height:7px}


/* ============================================================
   HEADER（英語大・日本語小 §4.4：ナビ 英14px／日11px）
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(18px,3vw,44px);
  transition:background .5s ease,height .4s ease;
}
.header.is-solid{background:rgba(26,24,21,.92);height:66px}
/* ★ページ先頭ではヘッダーは透明で、ナビがヒーローの絵に直接乗る。
   ヒーローを明るくするとナビの薄い日本語ラベルが消えるため、上端だけ暗くする帯を敷く。
   実測（1440x900・格天井のコマ／文字の真下の背景で算出）：
     ナビ「設備」日本語  帯なし 3.26 → 帯あり 3.36 ／ 静止画時 4.87 → 6.47
     ナビ「TECHNOLOGY」  帯なし 6.73 → 帯あり 9.09 ／ 静止画時 12.86 → 16.74
   帯が無いまま明るくすると日本語ラベルは背景に埋没して測定不能（＝読めない）になる。
   ※日本語ラベルは帯を敷いても 3.36 と低い（AA基準4.5未満）。これは改修前からの状態で、
     色を変えるかどうかは司令判断（2026-08-11 時点で未提案）。 */
.header:not(.is-solid)::before{
  content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--header-h) + 46px);
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 46%,rgba(0,0,0,0) 100%);
  pointer-events:none;z-index:-1;
}
.header__logo img{height:44px;width:auto;transition:height .4s ease}
.header.is-solid .header__logo img{height:36px}
.header__nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px)}
.header__link{position:relative;text-align:center;padding:4px 2px}
.header__link .en{display:block;font-family:var(--en);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.header__link .jp{display:block;font-size:11px;letter-spacing:.14em;color:var(--mut);margin-top:1px}
.header__link::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.header__link:hover::after,.header__link.is-active::after{transform:scaleX(1)} /* 現在地表示＝金 */
/* お問い合わせ＝金ベタ塗り＋墨文字 7.01:1（§3.3⑤。白文字×金は禁止） */
.header__cta{
  background:var(--gold);color:var(--sumi);padding:10px 20px;
  display:inline-flex;flex-direction:column;align-items:center;line-height:1.3;
  transition:background .3s;
}
.header__cta .en{font-family:var(--en);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.header__cta .jp{font-size:10px;letter-spacing:.18em;color:var(--sumi)}
.header__cta:hover{background:#D9B342}

/* hamburger（タブレット以下 §8.2） */
.burger{display:none;width:44px;height:44px;position:relative;z-index:120}
.burger span{
  position:absolute;left:10px;width:24px;height:1px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(20deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-20deg)}

.drawer{
  position:fixed;inset:0;z-index:110;background:rgba(26,24,21,.97);
  display:flex;flex-direction:column;justify-content:center;padding:12vh 10vw;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
  overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer a{display:block;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.drawer .en{font-family:var(--en);font-size:22px;letter-spacing:.14em;text-transform:uppercase;margin-right:14px;color:var(--ink)}
.drawer .jp{font-size:12px;letter-spacing:.2em;color:var(--mut)}

/* 進捗インジケーター（サイトマップ§5.2）＝現在地表示の一部 */
.progress{position:fixed;top:0;right:0;width:2px;height:100vh;z-index:99;background:rgba(214,209,199,.07)}
.progress i{display:block;width:100%;height:0;background:var(--gold)}

/* SP固定CTA（§8.2 ⑩：画面下部に「お問い合わせ」「電話」常時表示） */
.spcta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:98;
  grid-template-columns:1fr 1fr;background:rgba(26,24,21,.95);
  border-top:1px solid var(--line-soft);
}
.spcta a{text-align:center;padding:12px 8px 14px;font-size:12px;letter-spacing:.16em;color:var(--txt)}
.spcta a .en{display:block;font-family:var(--en);font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.spcta a+a{border-left:1px solid var(--line-soft)}
.spcta .tel .en{color:var(--gold)}

/* ============================================================
   ① HERO（§6①：英キャッチ Jost56px／日キャッチ Zen Old Mincho20px
            スクリム黒40%／ロゴ縦組み 幅200px程度）
   ============================================================ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0;isolation:isolate}  /* 内部の重ね順を閉じ込める（前景テキストより下） */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}

/* ------------------------------------------------------------
   ヒーロー背景動画（音なし・クリック不可）
   中身は3段のフォールバック。JS(main.js heroVideo)が上から順に試す：
     ① assets/video/hero_test.mp4 が読めた → <video>（.hero__video.is-mp4）
     ② 読めない                            → YouTube iframe（下の 2.30 が効く）
     ③ それも駄目                          → 静止画のまま
   ★案の切り替え（YouTube時）はこの --hero-video-zoom 1行だけ：
       2.30 ＝ 案A（拡大＋上寄せ。動画に焼き込まれた文字とロゴを画面外へ追い出す）※既定
       1    ＝ 案B（等倍＝object-fit:cover 相当。焼き込み文字もそのまま映る）
     上下の合わせ位置は拡大率から自動計算されるので、他は触らなくてよい。
   ★mp4のときは下の .hero__video.is-mp4 が拡大を 1 に戻す（文字が無い＝寄る必要がない）。
     この 2.30 は mp4 が無い時のために必ず残すこと。
   静止画(.hero__bg img)は消さずに下に残してある。動画が出ない条件は
   ①reduced-motion ②画面幅767px以下 ③mp4もYouTubeも到達できない（オフライン等）。
   ------------------------------------------------------------ */
.hero__video{
  --hero-video-zoom:2.30;   /* ★ここだけ 1 にすれば案B */
  /* 縦の合わせ位置は拡大率から自動で決まる：等倍(1)＝中央合わせ、拡大時＝上端合わせ */
  --hero-video-align:clamp(0, calc(1.5 - var(--hero-video-zoom)), .5);
  --hero-video-shift:0%;    /* 微調整用。動画自身の高さに対する％（＋で下へ） */
  position:absolute;inset:0;z-index:1;
  overflow:hidden;pointer-events:none;      /* 押してもYouTubeへ飛ばない */
  container-type:size;                       /* 下の cqw/cqh はこの箱の実寸を見る */
  opacity:0;transition:opacity 1s var(--ease);
}
.hero__video.is-ready{opacity:1}
.hero__video iframe{
  /* 16:9を保ったまま箱をcoverする寸法（＝黒帯を出さない）× 拡大率 */
  --_w:calc(max(100cqw, 100cqh * 16 / 9) * var(--hero-video-zoom));
  --_h:calc(var(--_w) * 9 / 16);
  position:absolute;left:50%;
  top:calc((100cqh - var(--_h)) * var(--hero-video-align));
  width:var(--_w);height:var(--_h);
  transform:translate(-50%,var(--hero-video-shift));
  border:0;display:block;pointer-events:none;
}
/* --- mp4（司令支給・焼き込み文字なし）が読めた時だけ付く ------------------
   .is-mp4 は「動画として実際に読み込めた」時にJSが付ける。
   拡大しない＝1.0（全体を映す）。YouTube版の 2.30 は上に残したまま。
   縦横比が16:9でなくても object-fit:cover が箱を埋めるので黒帯は出ない。 */
.hero__video.is-mp4{--hero-video-zoom:1}
.hero__video video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;   /* 静止画(.hero__bg img)と同じ切り出し位置 */
  /* 将来もし寄せたくなったら --hero-video-zoom を上げるだけでよい（既定1＝等倍） */
  transform:scale(var(--hero-video-zoom,1));transform-origin:center 40%;
  border:0;display:block;pointer-events:none;    /* 触っても反応しない */
  background:transparent;
}
/* スクリム：文字が乗る下部を濃く、写真の主役部は薄く（§7.3 グラデーション方式） */
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:2;   /* 動画(z-index:1)より必ず上に重ねる */
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.5) 72%,var(--bg) 99%),
    radial-gradient(120% 90% at 78% 20%,transparent 40%,rgba(0,0,0,.4) 100%);
}
/* 動画は静止画より明るいので、動画が出ている時だけスクリムを足して可読性を戻す。
   静止画だけの状態（SP／reduced-motion／読込失敗）では opacity:0 ＝ 従来の見た目のまま。
   濃さは --hero-video-scrim の1つで決まる。既定 .63 は実測で決めた値：
   これで案A・案Bとも .hero__jp / .hero__title のコントラストが変更前(14.91:1)以上になる。 */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease);
  --sv:var(--hero-video-scrim,.63);
  background:linear-gradient(180deg,
    rgba(0,0,0,calc(var(--sv) * .42)) 0%,
    rgba(0,0,0,calc(var(--sv) * .30)) 26%,
    rgba(0,0,0,var(--sv)) 49%,
    rgba(0,0,0,var(--sv)) 100%);
}
.hero.has-video .hero__bg::before{opacity:1}

/* ★★★ mp4版のスクリム濃度 — 2026-08-11 実測済み（hero_test.mp4 992x606/9秒版）★★★
   測定：_tools/mp4_probe.js（1440x900・7コマ）→ contrast.py（文字画素の最悪値と中央値）
   ※ 同じ物差しで「変更前（静止画のみ・スクリムなし）」も測り直して比較している。

   ① まず「濃度 --sv を一律に下げる」を試した。→ 明るさが足りず、文字だけが先に壊れる。

     条件（グラデーションの形は旧・全幅一律）   最悪画素   ヒーロー明るさ  現行比
     変更前（静止画のみ）                       10.02        0.033      ← これが基準
     mp4 + スクリム .63                        12.56        0.037   1.00x
     mp4 + スクリム .55                        10.88        0.042   1.14x  ← 一律で下げられる限界
     mp4 + スクリム .50                         9.98        0.044          基準割れ
     mp4 + スクリム .45                         9.09        0.047          基準割れ
     mp4 + スクリム  0                          4.07        0.084   2.27x  文字が崩壊

   ② 採用：濃度は .63 のまま、グラデーションの「形」を変えて上半分だけ開けた（下の実装）。
     文字は下半分にしか無いので、上を薄くしても文字は痛まない。

     案                              最悪画素   明るさ  現行比  ナビ最悪
     A 現行（旧の形）                   12.56    0.037  1.00x    2.59
     B 上を開ける                      11.21    0.068  1.83x    0.00 ← ナビが消える
     B2 さらに開ける                    10.41    0.087  2.33x    0.00 ← ナビが消える
     ★B4 ＝B2＋ヘッダー帯＋動画時限定    10.41    0.085  2.27x    2.71 ← 採用
       （静止画のみの時：文字 10.02 のまま／ナビは 4.87→6.47 に改善）

   ▼ 結論：明るさ 2.27倍。ヒーロー文字は基準 10.02 を上回る 10.41 を確保。
     ナビは「ヘッダー上端の暗い帯」（.header:not(.is-solid)::before）とセットで初めて成立する。
     帯を外すと明るい木にナビが埋没する（実測で検出不能＝読めない）。セットで扱うこと。
     これ以上明るくするには文字側（影・色・置き場所）を変えるしかない。＝司令の意匠判断。
   ▼ 動画を差し替えたら、この表は無効。mp4_probe.js から測り直すこと。
     手順：① python3 -m http.server 8090 を 00_dev で起動
           ② ffmpeg -ss <秒> でコマを ver.A/_check/heroframes/f_<秒>.png に抽出
           ③ node _tools/mp4_probe.js <出力先> 8090            （mp4版）
              node _tools/mp4_probe.js <出力先> 8090 before     （変更前の基準を取り直す）
              node _tools/mp4_probe.js <出力先> 8090 play <値>  （スクリム値を変えて測る）
     ※ headless Chrome は <video> を pause+seek しても合成が更新されず先頭コマしか撮れない。
       mp4_probe.js が「コマのPNGを同じCSSの<img>に差し替えて測る」のはそのため。 */
.hero.has-video--mp4 .hero__bg::before{
  --hero-video-scrim-mp4:.63;          /* ← 実測確定（2026-08-11）。下限は .55 */
  --sv:var(--hero-video-scrim-mp4);
  /* ▼ 上半分を開ける（司令「動画がかなり暗い」2026-08-11）
     文字は下半分にしか無いので、上は濃度をほぼ0にしてよい。52〜54%から下は従来どおり濃い。
     全体を薄くする（--sv を下げる）やり方では明るさが足りず、文字も同時に読めなくなる。
     実測：--sv を 0 にしても明るさは 2.3倍止まりで、文字は 12.56 → 4.07 に崩壊した。 */
  background:linear-gradient(180deg,
    rgba(0,0,0,calc(var(--sv) * .05)) 0%,
    rgba(0,0,0,calc(var(--sv) * .02)) 32%,
    rgba(0,0,0,var(--sv)) 54%,
    rgba(0,0,0,var(--sv)) 100%);
}
/* ▼ ベースのスクリムも、動画が出ている時だけ上を開ける。
   ★必ず .has-video--mp4 を付けること。素の .hero__bg::after を明るくすると
     静止画ヒーロー（SP・reduced-motion・読込失敗）の .hero__title が
     10.02 → 7.75 に落ちる（2026-08-11 実測）。静止画は今の暗さで調整済み。 */
.hero.has-video--mp4 .hero__bg::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.48) 72%,var(--bg) 99%),
    radial-gradient(120% 90% at 78% 20%,transparent 52%,rgba(0,0,0,.24) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(80px,14vh,150px)}
.hero__title{
  font-family:var(--en);font-weight:300;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,56px);line-height:1.1;letter-spacing:.08em;color:var(--ink);
}
.hero__title .accent{color:var(--gold)}
.hero__jp{
  margin-top:clamp(18px,3vh,30px);
  font-family:var(--mincho);font-weight:500;   /* 明朝の許可箇所①（§4.3ルール2） */
  font-size:20px;letter-spacing:.42em;color:var(--ink);
}
.hero__sub{margin-top:12px;font-size:14px;letter-spacing:.24em;color:var(--txt)}
.hero__logo{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(90px,14vh,150px);z-index:2;width:clamp(110px,13vw,200px);opacity:.92}
.hero__scroll{
  position:absolute;left:50%;bottom:0;z-index:3;transform:translateX(-50%);
  font-family:var(--en);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--mut);
  padding-bottom:74px;
}
.hero__scroll::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:0;background:var(--ink);
  animation:pathmove 2.4s var(--ease) infinite;
}
@keyframes pathmove{
  0%{height:0;bottom:64px;opacity:0}
  36%{height:44px;bottom:20px;opacity:1}
  100%{height:0;bottom:0;opacity:0}
}

/* ============================================================
   ② CONCEPT（§6②：文字だけ・写真なし・中央揃え・
              中心コピー Zen Old Mincho 36px）
   ============================================================ */
.concept{position:relative;text-align:center}
.concept .ghost{top:-3vw;left:50%;transform:translateX(-50%)}
.concept .sec-head{display:inline-block}
.concept .sec-head::after{margin-inline:auto}
.concept__copy{max-width:var(--w-text);margin-inline:auto}
.concept__copy .catch{
  font-family:var(--mincho);font-weight:500;   /* 明朝の許可箇所②（§4.3ルール2） */
  font-size:clamp(26px,3vw,36px);line-height:2;letter-spacing:.18em;color:var(--ink);
  margin-bottom:clamp(16px,2.6vh,28px);
}
.concept__copy .catch em{font-style:normal;color:var(--gold)}
.concept__copy .catch-en{
  font-family:var(--en);font-weight:300;font-size:clamp(18px,2vw,26px);
  letter-spacing:.22em;color:var(--mut);margin-bottom:clamp(36px,6vh,64px);
}
.concept__copy p{color:var(--txt);margin-bottom:1.5em;text-align:left}
.concept__en{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-family:var(--en);font-weight:300;font-size:14px;line-height:1.9;letter-spacing:.05em;
  color:var(--mut);text-align:left;
}

/* ============================================================
   ③ WORKS（§6③：横3枚・濃茶#3A3226カード・写真は上辺まで断ち切り・
            枠線で囲まない・英名 Jost14px 利休鼠・説明 15px 灰白）
   ============================================================ */
.works{position:relative}
.works .ghost{top:2vw;right:-3vw;left:auto}
.works__lead{max-width:var(--w-text);color:var(--txt);margin-bottom:clamp(48px,7vh,84px)}
.works__lead strong{color:var(--ink);font-weight:500}
.works__lead .en-s{font-family:var(--en);font-size:14px;color:var(--mut);letter-spacing:.08em}
.works__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.work-c{background:var(--panel);display:flex;flex-direction:column}
.work-c .iw{aspect-ratio:3/2}   /* 640×427素材＝カード幅約400pxなら拡大しない */
/* 明るい昼間の写真が暗背景から浮かないよう軽くトーンを落とす（§7.2の方針を静的に適用） */
.work-c .iw img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.92)}
.work-c__body{padding:24px 24px 32px}
.work-c__body .name{
  font-family:var(--body);font-weight:500;font-size:clamp(19px,1.8vw,24px);
  letter-spacing:.1em;line-height:1.5;color:var(--ink);
}
.work-c__body .name-en{
  display:block;margin-top:8px;font-family:var(--en);font-weight:400;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
}
.work-c__body .desc{margin-top:14px;font-size:15px;color:var(--txt)}
.works__note{margin-top:26px;font-size:13px;color:var(--mut);letter-spacing:.08em}

/* テキストリンク（補助導線） */
.more{
  display:inline-flex;align-items:center;gap:18px;margin-top:clamp(36px,5vh,56px);
  font-family:var(--en);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
}
.more .jp{font-family:var(--body);font-size:12px;letter-spacing:.2em;color:var(--mut);text-transform:none}
.more::after{
  content:"";width:56px;height:1px;background:var(--gold);
  transition:width .4s var(--ease);
}
.more:hover::after{width:88px}

/* 金の枠線ボタン（§6③ VIEW ALL／§6④ READ MORE／§6⑦ ABOUT US） */
.btn-line{
  display:inline-flex;align-items:baseline;gap:14px;margin-top:clamp(36px,5vh,56px);
  border:1px solid var(--gold);color:var(--gold);padding:14px 32px;
  font-family:var(--en);font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.btn-line .jp{font-family:var(--body);font-size:12px;letter-spacing:.16em;color:var(--mut);transition:color .3s;text-transform:none}
.btn-line:hover{background:rgba(201,162,39,.12)}

/* ============================================================
   ④ BUSINESS — 3本柱（§6④・サイトマップ§2.4）
   帯：1本目と3本目に #26231E ／ 左右交互 ／ 写真55%幅・4:3
   番号：Jost14px 利休鼠 ／ READ MORE 金枠線ボタン
   ============================================================ */
.business{position:relative;padding-top:0}
.business .sec-head{padding-top:var(--sec-gap)}
.pillar{padding:clamp(70px,11vh,130px) 0;position:relative}
/* 交互の明度差＝1本目と3本目（参考サイトの作法・§5.1-3） */
.business .pillar:nth-of-type(1),
.business .pillar:nth-of-type(3){background:var(--band)}
.pillar__inner{display:grid;grid-template-columns:55% 1fr;align-items:center;gap:0 clamp(28px,4vw,64px)}
.pillar--rev .pillar__img{order:2}
.pillar--rev .pillar__body{order:1}
.pillar__img .iw{aspect-ratio:4/3}   /* 差し替え耐性のため4:3固定（§6④） */
.pillar__img img{width:100%;height:100%;object-fit:cover}
.pillar__num{
  font-family:var(--en);font-weight:400;font-size:14px;letter-spacing:.3em;
  color:var(--mut);
}
.pillar__en{
  margin-top:12px;font-family:var(--en);font-weight:300;font-size:clamp(26px,3vw,40px);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.2;color:var(--ink);
}
.pillar__jp{margin-top:10px;font-family:var(--body);font-size:16px;letter-spacing:.14em;color:var(--mut)}
.pillar__desc{margin-top:20px;font-size:16px;color:var(--txt);max-width:30em}
/* タグ＝枠線で囲まない（§10.2）。区切りは「／」で */
.pillar__tags{margin-top:16px;display:flex;flex-wrap:wrap;font-size:14px;color:var(--mut);letter-spacing:.08em}
.pillar__tags li+li::before{content:"／";margin:0 .5em;color:var(--deco)}

/* ============================================================
   ⑤ TECHNOLOGY（設備写真素材なし→工程写真＋設備一覧で構成）
   ============================================================ */
.tech{position:relative}
.tech .ghost{top:0;left:-2vw}
.tech__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:start}
.tech__lead{max-width:34em;color:var(--txt);margin-bottom:34px}
.tech__lead .en-s{font-family:var(--en);font-size:14px;color:var(--mut)}
.tech__list{border-top:1px solid var(--line)}
.tech__list li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px;padding:24px 4px;border-bottom:1px solid var(--line)}
/* 各行の下罫の左端に灯る点（スクロール発火の装飾） */
.tech__list li>.circle{left:0;bottom:-4px;background:var(--hinoki)}
.tech__list .no{font-family:var(--en);font-weight:400;font-size:15px;color:var(--hinoki);letter-spacing:.1em;padding-top:5px}
.tech__list h4{font-family:var(--body);font-weight:500;font-size:17px;letter-spacing:.1em;color:var(--ink)}
.tech__list h4 span{display:block;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase;margin-top:4px}
.tech__list p{font-size:15px;color:var(--txt);margin-top:8px;max-width:34em}
.tech__imgs{position:relative;padding-bottom:14vw}
.tech__imgs .im1{width:100%}
.tech__imgs .im2{position:absolute;width:56%;left:-8%;bottom:0;z-index:2}   /* 影は使わない §10.2 */
/* stats band（数値は静的表示。カウントアップ演出は§10.1により不使用） */
.stats{
  margin-top:clamp(80px,12vh,140px);border-block:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{padding:clamp(28px,4vh,46px) 10px;text-align:center;position:relative}
.stat+.stat{border-left:1px solid var(--line-soft)}
.stat .v{font-family:var(--en);font-weight:300;font-size:clamp(34px,4.6vw,60px);line-height:1.1;color:var(--ink)}
.stat .v small{font-size:.4em;letter-spacing:.14em;color:var(--gold);margin-left:4px}
.stat .l{margin-top:8px;font-size:12px;letter-spacing:.26em;color:var(--mut)}

/* ============================================================
   ⑥ HISTORY（§6⑥：縦線#3D372F 1px／点=白練8px丸／
              西暦=Zen Old Mincho 48px 金／終点2062は大きく金）
   ============================================================ */
.history{position:relative}
.history .ghost{top:0;right:-4vw;left:auto}
.timeline{position:relative;max-width:980px;margin-inline:auto;padding:20px 0 0}
/* 縦線は要素化（スクロールで描画するため。素の状態では最初から全長） */
.timeline__line{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--deco);transform-origin:top center;
}
.tl{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,90px);padding:clamp(30px,5vh,56px) 0}
.tl>.circle{
  left:50%;top:calc(clamp(30px,5vh,56px) + 14px);
  transform:translateX(-50%);
}
.tl__media{text-align:right}
.tl__media .iw{display:inline-block;max-width:320px}
.tl__media img{filter:grayscale(1) contrast(1.05) brightness(.9)}   /* 白黒 §6⑥ */
.tl__body{padding-top:2px}
.tl__year{
  font-family:var(--mincho);font-weight:500;    /* 明朝の許可箇所③＝年表の西暦 */
  font-size:clamp(36px,4vw,48px);line-height:1;letter-spacing:.05em;color:var(--gold);
}
.tl__year small{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--mut);margin-left:10px}
.tl__year--label{font-family:var(--body);font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:.2em}
.tl__ttl{margin-top:12px;font-family:var(--body);font-weight:500;font-size:clamp(16px,1.6vw,20px);letter-spacing:.14em;color:var(--ink)}
.tl__txt{margin-top:10px;font-size:15px;color:var(--txt);max-width:26em}
.tl--future .tl__year{font-size:clamp(48px,5.6vw,68px)}   /* 他の年より大きく・金 */
.tl--future>.circle{background:var(--bg);border:1px solid var(--gold)}

/* ============================================================
   ⑦ CRAFTSMEN（§6⑦：集合写真を断ち切り／「32」Jost・白練／
     スクリム黒40%＝§7.3 実計算値。
     ★支給素材は1008×756px（要件定義書の3,300pxに対し縮小版の可能性・RK11）。
       拡大の粗をトーン調整＋わずかなぼかしで緩和。元データ受領後に差し替え）
   ============================================================ */
.craftsmen{position:relative;margin-top:var(--sec-gap);height:clamp(560px,92vh,860px);overflow:hidden;display:flex;align-items:center}
.craftsmen__bg{position:absolute;inset:0}
.craftsmen__bg img{
  width:100%;height:104%;object-fit:cover;object-position:center 62%;
  filter:saturate(.78) brightness(.95) contrast(1.04) blur(1px);
  transform:scale(1.02);
}
/* スクリム：全面40%＋文字帯を濃く（§7.3 グラデーション方式が第一候補） */
.craftsmen__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.4) 18%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.62) 82%,var(--bg) 100%);
}
.craftsmen__inner{position:relative;z-index:2;width:min(92%,var(--w-max));margin-inline:auto}
.craftsmen__num{
  font-family:var(--en);font-weight:300;font-size:clamp(96px,12vw,160px);line-height:.95;
  color:var(--ink);   /* 塗りの白練。純白・アウトラインは使わない */
}
.craftsmen__num small{color:var(--ink);font-size:.16em;letter-spacing:.3em;vertical-align:super}
.craftsmen__ttl{
  margin-top:18px;font-family:var(--body);font-weight:500;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.24em;color:var(--ink);
}
.craftsmen__txt{margin-top:16px;font-size:15px;letter-spacing:.1em;color:var(--txt);max-width:34em}
.craftsmen__txt .en-s{display:block;font-family:var(--en);font-size:14px;letter-spacing:.1em;margin-top:8px;color:var(--mut)}

/* ============================================================
   ⑧ COMPANY（§6⑧：2列定義リスト・写真なし・地味に・
     許可番号と従業員数だけ金で強調）
   ============================================================ */
.company{position:relative}
.company__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,80px);align-items:start}
.ctable{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.ctable th,.ctable td{
  border-bottom:1px solid var(--line-soft);padding:15px 8px;vertical-align:top;
  font-size:15px;line-height:1.9;text-align:left;
}
.ctable th{width:9.5em;font-weight:400;letter-spacing:.2em;color:var(--mut);white-space:nowrap}
.ctable td{color:var(--txt)}
.ctable td.gold{color:var(--gold)}   /* 許可番号・従業員数のみ §6⑧ */
.ctable td .en-s{display:block;font-family:var(--en);font-size:11px;letter-spacing:.14em;color:var(--mut);text-transform:none}
.ctable td small{font-size:13px;color:var(--mut)}
.company__side .map{aspect-ratio:4/3;background:var(--band)}
.company__side .map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
.company__side .addr{margin-top:14px;font-size:14px;color:var(--txt);letter-spacing:.08em}
.certs{margin-top:30px;border-top:1px solid var(--line-soft);padding-top:18px}
.certs__note{font-size:14px;color:var(--mut);letter-spacing:.08em}

/* ============================================================
   ⑨ NEWS / INSTAGRAM（§6⑨：重要告知＝濃茶の枠／白い枠を出さない）
   ============================================================ */
.news__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,70px);align-items:stretch}
.notice{background:var(--panel);padding:clamp(24px,3.4vw,40px);position:relative}
.notice__tag{font-family:var(--en);font-size:12px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.notice__date{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--mut);margin-top:12px}
.notice__ttl{font-family:var(--body);font-weight:500;font-size:17px;letter-spacing:.12em;margin-top:8px;color:var(--ink)}
.notice__txt{font-size:15px;color:var(--txt);margin-top:10px}
.ig{
  background:var(--band);padding:clamp(24px,3.4vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
}
.ig__head .en{font-family:var(--en);font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.ig__head .jp{display:block;font-size:14px;color:var(--mut);letter-spacing:.14em;margin-top:6px}
.ig__id{font-family:var(--en);font-size:14px;letter-spacing:.12em;color:var(--txt)}

/* ============================================================
   ⑩ CONTACT（§6⑩：このセクションだけ濃茶#3A3226を全面に／
     金ベタ塗りボタン＋墨文字／電話 Jost32px／国番号併記）
   ============================================================ */
.contact-band{position:relative;margin-top:var(--sec-gap);padding:clamp(80px,13vh,150px) 0;background:var(--panel);overflow:hidden}
.contact-band .ghost{top:-2vw;left:50%;transform:translateX(-50%);opacity:.35}
.contact-band__inner{text-align:center;position:relative;z-index:1}
.contact-band .lead{font-family:var(--body);font-weight:500;font-size:clamp(15px,1.6vw,19px);letter-spacing:.26em;color:var(--txt)}
.contact-band .tel{
  display:block;margin-top:26px;font-family:var(--en);font-weight:300;
  font-size:32px;letter-spacing:.08em;line-height:1;color:var(--ink);
}
.contact-band .tel small{display:block;font-family:var(--body);font-size:13px;letter-spacing:.3em;color:var(--mut);margin-top:12px}
.contact-band .en-note{margin-top:26px;font-family:var(--en);font-size:14px;letter-spacing:.08em;color:var(--mut)}

/* 金ベタ塗りボタン（墨文字 7.01:1。白文字×金は禁止 §3.3⑤／角は直角 §10.2） */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  margin-top:clamp(30px,5vh,44px);background:var(--gold);color:var(--sumi);
  border:0;padding:18px 60px;transition:background .3s;
}
.btn:hover{background:#D9B342}
.btn .en{font-family:var(--en);font-size:14px;letter-spacing:.26em;text-transform:uppercase}
.btn .jp{font-size:11px;letter-spacing:.24em;color:var(--sumi)}

/* ============================================================
   FOOTER（§6⑪：⑩の濃茶より一段暗く戻す＝基準の墨黒）
   ============================================================ */
.footer{position:relative;margin-top:0;padding:clamp(60px,9vh,100px) 0 0;border-top:1px solid var(--line-soft);background:var(--bg)}
.footer__grid{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(36px,6vw,100px)}
.footer__id img{width:110px}
.footer__id .nap{margin-top:26px;font-size:14px;line-height:2.1;color:var(--txt);letter-spacing:.08em}
.footer__id .nap strong{color:var(--ink);font-weight:500;letter-spacing:.16em}
.footer__nav{display:grid;grid-template-columns:repeat(3,auto);gap:10px clamp(28px,4vw,64px);align-content:start}
.footer__nav h5{font-family:var(--en);font-size:12px;letter-spacing:.26em;color:var(--mut);text-transform:uppercase;margin-bottom:10px;grid-column:1/-1}
.footer__nav ul{display:contents}
.footer__nav li a{font-size:13px;letter-spacing:.1em;color:var(--txt);transition:color .3s;display:inline-block;padding:3px 0}
.footer__nav li a:hover{color:var(--hinoki)}
.footer__brands h5{font-family:var(--en);font-size:12px;letter-spacing:.26em;color:var(--mut);text-transform:uppercase;margin-bottom:10px}
.footer__brands li a{font-size:13px;letter-spacing:.08em;color:var(--txt);display:inline-block;padding:3px 0;transition:color .3s}
.footer__brands li a:hover{color:var(--hinoki)}
.footer__brands li a::after{content:"↗";font-size:10px;margin-left:6px;color:var(--mut)}
.footer__bottom{
  margin-top:clamp(44px,7vh,70px);border-top:1px solid var(--line-soft);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer__bottom .links{display:flex;gap:22px;font-size:12px;color:var(--mut);letter-spacing:.12em}
.footer__bottom .links a:hover{color:var(--ink)}
.footer__copy{font-family:var(--en);font-size:11px;letter-spacing:.18em;color:var(--mut)}

/* ============================================================
   SUBPAGES
   ============================================================ */
.page-hero{
  position:relative;padding:calc(var(--header-h) + clamp(60px,10vh,120px)) 0 clamp(48px,8vh,90px);
  border-bottom:1px solid var(--line-soft);overflow:hidden;
}
.page-hero .ghost{top:8px;right:-3vw;left:auto;font-size:clamp(64px,11vw,170px)}
.page-hero .en{
  font-family:var(--en);font-weight:300;text-transform:uppercase;
  font-size:clamp(32px,4.2vw,52px);line-height:1.1;letter-spacing:.12em;color:var(--ink);
}
.page-hero .jp{display:block;margin-top:12px;font-family:var(--body);font-size:clamp(14px,1.2vw,16px);letter-spacing:.16em;color:var(--mut)}
.page-hero .wrap>h1::after,
.page-hero h1+.breadcrumb{margin-top:20px}
.breadcrumb{margin-top:24px;font-size:12px;letter-spacing:.16em;color:var(--mut)}
.breadcrumb a:hover{color:var(--hinoki)}
.breadcrumb span{margin:0 10px;opacity:.5}

.prose{max-width:var(--w-text)}   /* 読み物の欄は720px §4.3ルール6 */
.prose h3{font-family:var(--body);font-weight:500;font-size:clamp(19px,2vw,24px);letter-spacing:.14em;margin:2.6em 0 .9em;color:var(--ink)}
.prose h3::before{content:"";display:inline-block;width:30px;height:1px;background:var(--gold);vertical-align:middle;margin-right:16px}
/* 下層ページの見出しの金罫も、トップの .sec-head::after と同じく「スクロールで伸びる」
   （幅ではなく scaleX で伸ばす＝見出し文字の位置がずれない） */
.motion-on .prose h3::before{transform:scaleX(0);transform-origin:left center;transition:transform .85s var(--ease) .1s}
.motion-on .prose h3.is-in::before{transform:scaleX(1)}
.prose p{color:var(--txt);margin-bottom:1.4em}
.prose strong{color:var(--ink);font-weight:500}
.prose a{color:var(--hinoki);text-decoration:underline;text-underline-offset:3px}
.prose .en-block{
  margin:1.6em 0;padding:1.2em 0;border-block:1px solid var(--line-soft);
  font-family:var(--en);font-weight:300;font-size:14px;line-height:1.9;color:var(--mut);
}

/* definition callout（AIO）— 檜の左罫＝図版の差し色用途 */
.define{border-left:2px solid var(--hinoki);padding:18px 26px;margin:2.2em 0;background:rgba(192,139,78,.06)}
.define dt{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.14em;margin-bottom:6px;color:var(--ink)}
.define dd{font-size:14px;color:var(--txt)}
.define .en-s{font-family:var(--en);font-size:12px;letter-spacing:.06em;color:var(--mut)}

/* photo gallery grid（ホバーは色変化のみ §10.1） */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(40px,6vh,64px)}
.gallery figure{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--band)}
.gallery figure.tall{grid-row:span 2;aspect-ratio:auto}
.gallery img{width:100%;height:100%;object-fit:cover;transition:filter .5s;filter:saturate(.85)}
.gallery figure:hover img{filter:saturate(1)}
.gallery figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:26px 14px 10px;
  font-size:12px;letter-spacing:.14em;color:var(--ink);
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
}

/* process steps — 枠線囲みでなく面（帯色）で区切る §10.2 */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:clamp(36px,5vh,56px)}
.steps li{counter-increment:s;background:var(--band);padding:26px 18px 30px;position:relative}
.steps li::before{
  content:"0" counter(s);font-family:var(--en);font-weight:300;font-size:26px;color:var(--hinoki);letter-spacing:.08em;
}
.steps h4{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.12em;margin-top:10px;color:var(--ink)}
.steps h4 span{display:block;font-family:var(--en);font-size:11px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase;margin-top:4px}
.steps p{font-size:14px;color:var(--txt);margin-top:8px;line-height:1.8}

/* FAQ */
.faq{margin-top:clamp(36px,5vh,56px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;display:grid;grid-template-columns:34px 1fr 30px;gap:12px;align-items:baseline;
  padding:22px 4px;font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.08em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--en);color:var(--hinoki)}
.faq summary .tgl{justify-self:end;font-family:var(--en);color:var(--mut);transition:transform .4s}
.faq details[open] .tgl{transform:rotate(45deg)}
.faq .a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:0 4px 24px}
.faq .a .an{font-family:var(--en);color:var(--mut)}
.faq .a p{font-size:15px;color:var(--txt)}
.faq .a a{color:var(--hinoki);text-decoration:underline;text-underline-offset:3px}

/* staff grid (about)（ホバーは色変化のみ） */
.staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:18px 14px;margin-top:clamp(40px,6vh,60px)}
.staff figure{text-align:center}
.staff .ph{aspect-ratio:1;overflow:hidden;background:var(--band)}
.staff img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.94);transition:filter .4s}
.staff figure:hover img{filter:saturate(1) brightness(1)}
.staff figcaption{margin-top:8px;font-size:13px;letter-spacing:.14em;color:var(--txt)}
.staff figcaption span{display:block;font-size:11px;color:var(--mut);letter-spacing:.16em;margin-top:2px}

/* ------------------------------------------------------------
   社員紹介：職種グループ見出し ＋ プロフィールダイアログ（2026-08-11 司令指示）
   ・並び順とグループ分けは _tools/build_staff.py が生成する（HTMLを手で触らない）
   ・PCはカーソルを合わせるだけ／スマホはタップで開く（JS: main.js staffDialog）
   ------------------------------------------------------------ */
.staff-group{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:clamp(38px,5.5vh,58px) 0 0;padding-bottom:12px;
  border-bottom:1px solid var(--uiline);
  font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.18em;color:var(--ink);
}
.staff-group span{font-size:11.5px;letter-spacing:.16em;color:var(--mut);font-weight:400}
.staff-group + .staff{margin-top:22px}
.staff-lead{font-size:13.5px;color:var(--mut);margin-top:14px}

/* 社員紹介の頭に置く集合写真（司令指示 2026-08-11）。
   素材が1008×756しかないので、横いっぱいには広げず 980px で止める（引き伸ばすと粗が出る）。 */
.staff-group-photo{margin:clamp(30px,4.5vh,46px) 0 0;max-width:980px}
.staff-group-photo .iw{aspect-ratio:4/3}
.staff-group-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.94)}
.staff-group-photo figcaption{
  margin-top:10px;font-size:10.5px;letter-spacing:.2em;color:var(--mut);
}

.staff-c{cursor:pointer}
.staff-c:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.staff-c .ph{transition:box-shadow .3s}
.staff-c.is-open .ph{box-shadow:0 0 0 2px var(--gold)}
/* 顔写真がまだ無い方の枠。仮画像は正方形SVGなので cover でぴったり収まる */
.staff-c.is-nophoto .ph img{filter:none}

.sd-back{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(10,9,8,.72);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
}
.sd-back.is-on{opacity:1;visibility:visible}
/* カーソルを合わせただけの時は板を素通りさせる（下のカードへ移れるように）。
   タップ／クリックで開いた時だけ、板を押して閉じられるようにする。 */
.sd-back{pointer-events:none}
.sd-back.is-pinned{pointer-events:auto}

.sd{
  width:min(880px,100%);max-height:min(76vh,720px);overflow:auto;
  background:var(--band);border:1px solid var(--uiline);
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  transform:translateY(10px) scale(.985);transition:transform .28s var(--ease);
}
.sd-back.is-on .sd{transform:none}
.sd__ph{background:var(--bg)}
.sd__ph img{display:block;width:100%;height:100%;max-height:min(76vh,720px);object-fit:cover}
.sd__body{padding:clamp(22px,3vw,34px);position:relative}
.sd__name{font-family:var(--body);font-weight:700;font-size:clamp(19px,2.2vw,24px);
  letter-spacing:.12em;color:var(--ink);line-height:1.5}
.sd__role{margin-top:8px;font-size:12.5px;letter-spacing:.16em;color:var(--gold)}
.sd__sec{margin-top:22px}
.sd__sec h4{font-size:12px;letter-spacing:.2em;color:var(--mut);font-weight:500;margin-bottom:8px}
.sd__sec p{font-size:14.5px;line-height:2;color:var(--txt);letter-spacing:.04em}
.sd__none{margin-top:22px;font-size:13px;color:var(--mut);line-height:1.9}
.sd__close{
  position:absolute;top:10px;right:10px;width:38px;height:38px;
  background:none;border:0;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;
}
.sd__close:hover{color:var(--ink)}
@media (max-width:720px){
  .sd{grid-template-columns:1fr;max-height:86vh}
  .sd__ph img{max-height:38vh}
}
@media (prefers-reduced-motion:reduce){
  .sd-back,.sd{transition:none}
}

/* forms（入力欄の枠＝#8A8073 4.57:1 §3.3①） */
.form{max-width:var(--w-text)}
.form .row{margin-bottom:26px}
.form label{display:block;font-size:14px;letter-spacing:.16em;margin-bottom:10px;color:var(--ink)}
.form label .en-s{font-family:var(--en);font-size:11px;color:var(--mut);margin-left:12px;letter-spacing:.14em;text-transform:uppercase}
.form label .req{color:var(--gold);font-size:11px;margin-left:10px;letter-spacing:.2em}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--uiline);color:var(--ink);
  padding:14px 16px;font:inherit;letter-spacing:.06em;transition:border-color .3s,background .3s;
  border-radius:0;appearance:none;-webkit-appearance:none;
}
.form :is(input,select,textarea):focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.06)}
.form textarea{min-height:190px;resize:vertical}
.form .agree{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--txt)}
.form .agree a{color:var(--hinoki);text-decoration:underline;text-underline-offset:3px}
.form .hp{position:absolute;left:-9999px;opacity:0}
.radio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.radio-grid label{
  display:flex;align-items:center;gap:10px;margin:0;border:1px solid var(--uiline);
  padding:13px 16px;font-size:14px;cursor:pointer;transition:border-color .3s,background .3s;letter-spacing:.08em;color:var(--txt);
}
.radio-grid label:has(input:checked){border-color:var(--gold);background:rgba(201,162,39,.08);color:var(--ink)}
.radio-grid input{accent-color:var(--gold)}

/* two-column info blocks */
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);margin-top:clamp(36px,5vh,56px)}
/* 左右の高さを揃える版（about のごあいさつ）。写真は本文と同じ高さまで伸ばす。
   ★.pres は縦フレックス。写真が残り全部を取り、キャプションは下端に置く。
     .iw に min-height:0 が要る（無いとフレックス子が縮まず、はみ出す）。 */
.info-cols--even{align-items:stretch}
/* 段の1行目を写真の上端と揃える。.prose h3 の margin-top:2.6em（＝62px）が
   そのままだと、写真だけ62px上に飛び出して見える（司令「写真の位置が高い」の実体）。 */
.info-cols--even .prose > h3:first-child{margin-top:0}
.pres{display:flex;flex-direction:column;width:100%;max-width:420px;margin-left:auto}
.pres .iw{flex:1 1 auto;min-height:0}
.pres .iw img{width:100%;height:100%;object-fit:cover}
.pres figcaption{
  flex:0 0 auto;text-align:right;font-size:10.5px;color:var(--mut);
  letter-spacing:.2em;margin-top:10px;
}
/* ★767px は .info-cols が1カラムに落ちる位置（下の @media max-width:767px と対）。
   ここを900px等にすると 768〜900px で「2カラムなのに伸ばさない」状態になる。 */
@media (max-width:767px){
  /* 1カラムに落ちたら伸ばす相手がいない。写真は素の縦横比に戻す */
  .pres{max-width:100%;margin-left:0}
  .pres .iw{flex:0 0 auto}
  .pres .iw img{height:auto}
}

/* recruit voice cards — 枠線でなく帯色の面で */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(36px,5vh,56px)}
.voice{background:var(--band);padding:clamp(24px,3vw,38px)}
.voice .who{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.14em;color:var(--ink)}
.voice .role{font-size:12px;color:var(--hinoki);letter-spacing:.2em;margin-top:4px}
.voice p{font-size:15px;color:var(--txt);margin-top:14px}

/* day schedule */
.day{border-left:1px solid var(--deco);margin:clamp(36px,5vh,56px) 0 0 8px;padding-left:0}
.day li{position:relative;padding:0 0 30px 34px}
.day li>.circle{left:-4px;top:8px}
.day .t{font-family:var(--en);font-size:15px;letter-spacing:.14em;color:var(--hinoki)}
.day h4{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.12em;margin-top:2px;color:var(--ink)}
.day p{font-size:14px;color:var(--txt);margin-top:6px;max-width:36em}

/* sustainability pledge list */
.pledges{margin-top:clamp(36px,5vh,56px);border-top:1px solid var(--line)}
.pledges li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:8px clamp(20px,3vw,44px);padding:24px 4px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.pledges li>.circle{left:0;bottom:-4px;background:var(--hinoki)}
.pledges .h{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.12em;min-width:15em;color:var(--ink)}
.pledges p{font-size:15px;color:var(--txt)}
.sdg-domains{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(36px,5vh,56px)}
.sdg-domain{background:var(--band);padding:clamp(24px,3vw,38px)}
.sdg-domain .tag{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--hinoki);text-transform:uppercase}
.sdg-domain h4{font-family:var(--body);font-weight:500;font-size:17px;letter-spacing:.12em;margin-top:8px;color:var(--ink)}
.sdg-domain ul{margin-top:14px}
.sdg-domain ul li{font-size:14px;color:var(--txt);padding:5px 0 5px 16px;position:relative}
.sdg-domain ul li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:1px;background:var(--hinoki)}

/* thanks / 404 */
.solo{min-height:72vh;display:flex;align-items:center;text-align:center}
.solo .inner{width:100%}
.solo .big{font-family:var(--en);font-weight:300;font-size:clamp(44px,7vw,72px);letter-spacing:.1em;line-height:1.05;text-transform:uppercase;color:var(--ink)}
.solo .jp-t{font-family:var(--body);font-weight:500;font-size:clamp(15px,1.8vw,20px);letter-spacing:.24em;margin-top:22px;color:var(--ink)}
.solo p{color:var(--txt);margin-top:18px;font-size:15px}

/* CV block on subpages */
.cv{margin-top:var(--sec-gap);border-block:1px solid var(--line);padding:clamp(50px,8vh,90px) 0;text-align:center}
.cv .lead{font-family:var(--body);font-weight:500;font-size:clamp(14px,1.5vw,18px);letter-spacing:.22em;color:var(--txt)}
.cv .tel{display:block;margin-top:18px;font-family:var(--en);font-weight:300;font-size:32px;letter-spacing:.08em;line-height:1;color:var(--ink)}
.cv .tel small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.26em;color:var(--mut);margin-top:10px}

/* ============================================================
   RESPONSIVE（正典§8.1：〜767 SP／768〜1023 タブレット／1024〜 PC）
   ============================================================ */
@media (max-width:1023px){
  .burger{display:block}
  /* タブレット：主要5項目＋ハンバーガー（§8.2） */
  .header__nav .header__link:nth-of-type(n+6){display:none}
  .header__cta{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  .works__cards{grid-template-columns:1fr 1fr}   /* 横2枚＋下1枚 §8.2 */
}
@media (max-width:767px){
  :root{--header-h:66px}
  .header__logo img{height:34px}
  .header__nav .header__link{display:none}       /* SP：ロゴ＋ハンバーガーのみ */
  .spcta{display:grid}
  .sec-head .en{font-size:32px}                  /* 英32px／日14px §8.2 */
  .sec-head .jp{font-size:14px}
  .concept__grid,.tech__grid,.company__grid,.news__grid,.info-cols{grid-template-columns:1fr}
  .works__cards{grid-template-columns:1fr;gap:24px}  /* 縦に1枚ずつ（横スクロール不可）§8.2 */
  .pillar__inner{grid-template-columns:1fr;gap:26px} /* 写真上・文字下 §8.2 */
  .pillar--rev .pillar__img{order:0}
  .pillar--rev .pillar__body{order:1}
  .timeline__line{left:4px}                      /* 縦線を左端へ §8.2 */
  .tl{grid-template-columns:1fr;gap:18px;padding-left:34px}
  .tl>.circle{left:4px;transform:none;top:calc(clamp(30px,5vh,56px) + 12px)}
  .tl__media{text-align:left}
  .tl__media .iw{max-width:260px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .steps{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .voices,.sdg-domains{grid-template-columns:1fr}
  .pledges .h{min-width:0}
  .pledges li{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:40px}
  .footer__nav{grid-template-columns:repeat(2,auto)}
  .radio-grid{grid-template-columns:1fr}
  .hero__logo{display:none}   /* SPはキャッチとの重なりを避けるため非表示（縦組みロゴはPCのみ） */
  /* ★SPでも動画を出す（司令A案 2026-08-11）。ただし PC用ではなくスマホ専用の
     軽い縦動画（data-mp4-sp）。display:none にすると <video> ごと消えるので外した。
     スマホ専用ファイルが無い／読めない／データセーバー時は、JS側が何も作らず静止画のまま。 */
  .hero__video video{object-position:center 45%}  /* 縦画面は少し下を見せる */
  /* ★スクリムはPC用のまま（SP専用に濃くしない）。
     縦画面では見出しの上端が高さの57%・和文が74%の位置で、どちらも
     「54%から下は濃い」区間に完全に入っている。濃くする位置を46%へ繰り上げても
     文字コントラストは 10.54 のまま1桁も動かず（実測）、絵が暗くなるだけだった。
     10.54 は基準（変更前の静止画 10.02）を上回る。スマホの静止画のみは 11.83。 */
  .hero__jp{font-size:18px;letter-spacing:.3em}
  /* SPは集合写真の中央を切り出して見せる（<picture>用の別素材が届くまでの代替 §8.2） */
  .craftsmen{height:auto;min-height:78vh;padding:16vh 0}
  .craftsmen__bg img{object-position:center 55%}
  /* 会社概要は1列（項目名の下に内容）§8.2 */
  .ctable th{display:block;width:auto;border-bottom:0;padding-bottom:0}
  .ctable td{display:block;padding-top:4px}
  .footer{padding-bottom:64px} /* SP固定バーの逃げ */
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .staff{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .hero__title{font-size:clamp(30px,9vw,40px)}
}

/* ============================================================
   PRINT — RK8：白背景・黒文字へ自動変換（正典§9.1）
   文字=墨#1F1C18 × 生成り#E9E2D9 ＝ 13.21:1（実計算）
   ============================================================ */
@media print{
  :root{--bg:#fff;--band:#f2efe9;--panel:#f2efe9;
    --ink:#1F1C18;--txt:#1F1C18;--mut:#3A3226;--sumi:#1F1C18;
    --line:#bbb;--line-soft:#ddd;--deco:#ccc}
  body{background:#fff;color:#1F1C18}
  body::before,.progress,.spcta,.hero__scroll,.burger,.drawer{display:none!important}
  .header{position:static;background:#fff}
  .ghost{display:none}
  [data-reveal]{opacity:1!important;transform:none!important}
  .lm>span{transform:none!important}
  [data-wipe]::after{display:none!important}
  [data-px] img,[data-px] video{transform:none!important}
  .circle{width:8px!important;height:8px!important;opacity:1!important}
  .timeline__line{transform:none!important}
  .prose h3::before{transform:none!important}
  .hero{height:auto;min-height:0;padding:40px 0}
  .hero__bg{display:none}
  .hero__title{color:#1F1C18}
  .craftsmen__bg{display:none}
  .craftsmen{height:auto}
  .craftsmen__num,.craftsmen__ttl,.craftsmen__txt{color:#1F1C18}
  .btn,.header__cta{background:#fff;border:1px solid #1F1C18;color:#1F1C18}
  a[href^="tel"]{color:#1F1C18}
}

/* layout-check mode (?check=1) — screenshots only */
.is-check .hero{height:900px}
.is-check .craftsmen{height:820px!important;min-height:0!important;padding:0!important}
.is-check .solo{min-height:600px}

/* ============================================================
   MOTION SAFETY（正典§9.1 prefers-reduced-motion／contrast）
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__video{display:none!important}   /* 動画は出さず静止画のまま（JS側でも読み込まない） */
  /* motion-on 自体が付かないが、二重の安全弁として素の表示を強制する */
  [data-reveal]{opacity:1!important;transform:none!important}
  .lm>span{transform:none!important}
  [data-wipe]::after{display:none!important}
  [data-px] img,[data-px] video{transform:none!important}
  .circle{width:8px;height:8px;opacity:1}
  .timeline__line{transform:none!important}
  .prose h3::before{transform:none!important}
}
@media (prefers-contrast:more){
  :root{--txt:#F5F2EC;--mut:#D6D1C7}   /* 本文を白練へ 15.85:1（§9.1） */
}