/* ══════════════════════════════════════════════════════════
   明朝＝FOT-TsukuMin Pr5N（Fontworks・有料）
   ウェイトごとに別ファミリー名で入るため local() で1つに束ねる。
   未導入の環境では自動的に Noto Serif JP へフォールバックする。
══════════════════════════════════════════════════════════ */
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 300; src: local("FOT-TsukuMin Pr5N L"), local("FOT-TsukuMin Pr6N L"), local("FOT-筑紫明朝 Pr5N L"); }
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 400; src: local("FOT-TsukuMin Pr5N R"), local("FOT-TsukuMin Pr6N R"), local("FOT-筑紫明朝 Pr5N R"); }
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 500; src: local("FOT-TsukuMin Pr5N M"), local("FOT-TsukuMin Pr6N M"), local("FOT-筑紫明朝 Pr5N M"); }
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 600; src: local("FOT-TsukuMin Pr5N D"), local("FOT-TsukuMin Pr6N D"), local("FOT-筑紫明朝 Pr5N D"); }
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 700; src: local("FOT-TsukuMin Pr5N D"), local("FOT-TsukuMin Pr6N D"), local("FOT-筑紫明朝 Pr5N D"); }
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 800; src: local("FOT-TsukuMin Pr5N E"), local("FOT-TsukuMin Pr6N E"), local("FOT-筑紫明朝 Pr5N E"); }
@font-face { font-family: "TsukuMin"; font-style: normal; font-weight: 900; src: local("FOT-TsukuMin Pr5N B"), local("FOT-TsukuMin Pr6N B"), local("FOT-筑紫明朝 Pr5N B"); }

/* ── Lenis smooth scroll 必須CSS ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* SPA時代の名残（.page 切替）。WPの固定ページは body に「page」クラスを付けるため
   .page { display:none } が body 自体に当たって真っ白になる（2026-08-18 固定ページ化で顕在化）。
   セレクタを div に限定して body には当てない。 */
div.page { display: none; }
div.page.active { display: block; }

/* === top === */

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--sans);
  background: #1a1a1a;
  color: #f5f3ef;
  overflow-x: clip;
  cursor: default;
}

:root {
  --black:  #1a1a1a;
  --black-soft: #2a2a2e;
  /* サイトの「黒」の正。TOPのヒーロー／OUR BUSINESS と同じ濃さ（松尾FB：eat-play-sleep.org 実測の黒）。
     下層ページの地の黒・ヒーローの黒はページごとにバラついていたので、すべてこれに統一した。 */
  --kuro:   #080706;
  --gold:   #c8a96e;
  --gold-bright: #d4b87a;
  --ecru:   #f5f3ef;
  --ecru-dim: #ede9e2;
  --serif: "FOT-TsukuMin Pr5N", "TsukuMin", 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', sans-serif;

  /* 下層ページ共通のヒーロー寸法（基準＝会社概要 .cp-hero の写真面）
     写真面は左右93pxずつ空けた1734px幅。お知らせ／お問い合わせ／プライバシーも同値。 */
  /* ヘッダーのロゴ看板はナビ帯より下へはみ出しているので、その下端を実寸で持っておく。
     ＝ .gnav__logo の top + min-height（1440pxで25.3+113.5＝138.8px）。 */
  --logo-bottom: calc(clamp(14px, 1.76vw, 33.8px) + clamp(86px, 7.88vw, 151.3px));
  /* ヒーロー写真の上の余白。旧 clamp(42px,4.69vw,90px) だとロゴ看板が写真に被っていた
     （1440pxで写真上端86px vs ロゴ下端139px）。ロゴ下端＋14pxまで下げる。 */
  --hero-gap:   calc(var(--logo-bottom) + 14px);
  --hero-media: clamp(240px, 31.04vw, 596px); /* 596 / 1920 */
  --hero-inset: min(93px, 4.844vw);           /*  93 / 1920（写真面の左右余白） */
}

/* ═══════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════ */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 9999;
  transition: width .08s linear;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   GLOBAL NAV
═══════════════════════════════════════════ */
#global-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  opacity: 0;
  transition: opacity .8s ease, background .4s ease;
  pointer-events: none;
}
#global-nav.show { opacity: 1; pointer-events: auto; }
#global-nav.scrolled {
  background: rgba(26,26,26,.92);
  backdrop-filter: blur(8px);
  padding: 16px 48px;
  border-bottom: 1px solid rgba(200,169,110,.12);
}

.nav-logo {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--ecru);
  font-weight: 400;
  text-decoration: none;
}
.nav-logo span {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(245,243,239,.55);
  text-decoration: none;
  transition: color .25s;
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════
   SECTION 1 : HERO（パーティクル + タグライン）
═══════════════════════════════════════════ */
#hero {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #080706;   /* 松尾FB：eat-play-sleep.org 実測の黒（ほぼ無彩色・RGB12前後） */
  display: flex;
  align-items: center;
  justify-content: center;
  /* GIFがまだ拡大している最中に退場を始めるので、フェードは短くして「止まって見える」時間を作らない */
  transition: opacity .6s cubic-bezier(.4,0,.2,1), visibility .6s;
}
#hero.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }

#particle-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.hero-tagline {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 2s ease, transform 2s ease;
}
.hero-tagline.show { opacity: 1; transform: translateY(0); }

.hero-tagline-main {
  font-family: var(--serif);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ecru);
  line-height: 1;
  margin-bottom: 24px;
}
.hero-tagline-sub {
  font-family: var(--sans);
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: .3em;
  color: var(--gold);
  font-weight: 300;
}

/* ── HERO GIF メディアパネル（ストップモーション背景） ── */
.hero-media {
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1.02);
  width: 876px;
  max-width: 92vw;
  height: 497px;
  overflow: hidden;
  /* パネルのドロップシャドウは無し（周囲の黒地に暗い輪ができて見えるため） */
  opacity: 0;
  /* フェードは0.9s（旧1.6s）。文字が出そろってから出す順番にしたので、
     ここが長いと「パネルが出きるのを待つ」時間がそのまま導入の長さになる。 */
  transition: opacity .9s ease, transform 6s ease;
}
.hero-media.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* パネル無し版（?fvpanel=off）。動画そのものを止めて負荷も消す */
.hero-media.is-off { display: none; }
/* 松尾FB：参考動画(Lark20260806-104930.gif)のパネル退場をフレーム実測して再現。
   実測（15.75fps・パネル基準1.0）：
     5.13s 倍率1.00 / 不透明度1.00
     5.19s 倍率1.385 / 0.43
     5.26s 倍率1.45  / 0.18
     5.32s 消滅
   ＝「1.5倍までを190msで一気に広げながら、同時に猛烈にフェードして消える」。
   ゆっくり大きくするのではなく“弾けて消える”動き。 */
.hero-media.is-zoom {
  transform: translate(-50%, -50%) scale(var(--hm-zoom, 1.5));
  opacity: 0;
  transition: opacity .2s cubic-bezier(.25,.6,.5,1), transform .2s cubic-bezier(.12,.85,.3,1);
}
.hero-media__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.64) contrast(1.04) saturate(.9);
}
/* 内側ビネット（縁を黒に溶かす） */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 110% at 50% 45%, transparent 34%, rgba(17,17,17,.5) 76%, rgba(17,17,17,.92) 100%);
  pointer-events: none;
}
/* 松尾FB：「静かに、燃えろ。」の背後を走るゴールドラインは削除（.hero-rule ごと廃止） */

/* ═══════════════════════════════════════════
   FILM GRAIN（ジャミジャミ／全画面フィルムノイズ）
═══════════════════════════════════════════ */
/* 松尾FB：じりじりは「黒背景のセクションだけ」＋「写真の上には乗せない」。
   全画面固定の .film-grain は廃止。写真が全面に出るセクション（課題バンド/CASE/採用）は対象外とし、
   残る対象では z-index:0（写真=z1 より下）に敷いて黒ベタ部分にだけ見えるようにする。
   mix-blend-mode:screen のため白い要素（OUR BUSINESSの白カード等）の上では自然に消える。 */
.film-grain { display: none; }
#hero::after,
#fv .fv-stage::after,
.obn__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                     /* 写真(.hero-media/.fv-photo=z1)より下＝黒背景の上だけに出る */
  pointer-events: none;
  /* しきい値リニア変換＝ノイズの下半分を完全な0に潰す：地の黒は沈んだまま、明るい粒だけがはっきり光る（eat-play-sleepの見え方） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;   /* 粒を大きく＝荒いじりじり */
  opacity: .24;                   /* 松尾FB：全セクション共通でこの強さ（.5はやりすぎ） */
  mix-blend-mode: screen;
  animation: grainJitter .3s steps(1) infinite;
}
.site-footer { position: relative; }
/* ── HERO/FV は「写真の上にもジャミジャミを乗せる」（ユーザー指示）──
   他セクションは黒地の上だけに出す方針（z-index:0）だが、この2つは写真そのものに
   フィルムグレインを載せたいので写真より前に出す。文字より後ろに置くのは維持する。
     HERO : .hero-media=z1 の上、.hero-copy=z3 の下 → z2
     FV   : .fv-photo=z1 / .fv-overlay=z2 の上、#fv-scroll-overlay=z8・.fv-about-right=z9・
            .fv-copy=z495・.fv-strength=z498 の下 → z3
   FVは暗色オーバーレイ(.fv-overlay 58%黒)より前に出たぶん減衰しなくなるので、
   補正の .55 をやめて他セクションと同じ .24 に戻す。 */
#hero::after { z-index: 2; }
#fv .fv-stage::after { z-index: 3; opacity: .24; }
@keyframes grainJitter {
  0%   { background-position: 0 0; }
  10%  { background-position: -120px -80px; }
  20%  { background-position: -240px 120px; }
  30%  { background-position: 150px -180px; }
  40%  { background-position: -90px 240px; }
  50%  { background-position: 210px 90px; }
  60%  { background-position: -180px -60px; }
  70%  { background-position: 120px 180px; }
  80%  { background-position: -150px -210px; }
  90%  { background-position: 180px 60px; }
  100% { background-position: 0 0; }
}
/* 松尾FB：SPは画面が小さいぶん同じタイルサイズだとグレインが粗く見える（500pxタイル＝画面幅の128%。PCは31%）。
   粒を細かく・薄くしてPCと同じ見え方に揃える */
@media (max-width: 767px) {
  /* 松尾FB：SPは粒をさらに細かく。
     PC用テクスチャを縮小して使うと1粒が1px未満になり、アライアシングで逆に塊って粗く見えるため、
     SPは「ノイズ周波数を上げた専用テクスチャ」を等倍(300px=SVG実寸)で敷く＝縮小によるにじみが出ない。 */
  #hero::after, #fv .fv-stage::after, .obn__stage::after, .trp::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-1'/%3E%3CfeFuncG type='linear' slope='2' intercept='-1'/%3E%3CfeFuncB type='linear' slope='2' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)'/%3E%3C/svg%3E");
    background-size: 300px 300px;   /* SVG実寸と1:1＝縮小しない */
    opacity: .15;
  }
  /* FVも導入(hero)と同じ薄さに揃える */
  #fv .fv-stage::after { opacity: .15; }
  /* 信頼の背景だけはPCと同じ理由で半分（写真の上ではなく地の黒へじかに乗るため） */
  .trp::after { opacity: .08; }
}
@media (prefers-reduced-motion: reduce) {
  #hero::after, #fv .fv-stage::after, .obn__stage::after, .trp::after { animation: none; }
}

/* ═══════════════════════════════════════════
   SECTION 2 : FV
═══════════════════════════════════════════ */
#fv {
  position: relative;
  width: 100%;
  background: #080706;   /* 松尾FB：eat-play-sleep.org 実測の黒 */
}
/* ピン留めステージ（sticky固定） */
.fv-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.fv-spacer { height: 300vh; pointer-events: none; }  /* 旧500vh。過大な高さがholdを数十vhの死区間に膨張させ「スクロールが止まる」感の原因だった → 圧縮 */

/* GIFと同サイズ(876x497)で始まり、スクロールで拡大する画像パネル */
.fv-photo {
  position: absolute;
  left: 50%; top: 50%;
  width: 876px;
  max-width: 92vw;
  height: 497px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  overflow: hidden;
  will-change: transform;
  z-index: 1;
  /* ドロップシャドウは無し（.hero-media と揃える） */
}
/* 写真は「タイトルが出きってから」遅れて現れる（front-page.php の onIntroComplete が .loaded を付ける）。
   JSが .fv-photo 本体の transform を毎フレーム書き換えるので、登場演出は内側ラッパーに載せて競合を避ける。 */
.fv-photo-inner {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(26px) scale(1.05);
  transition: opacity 1.15s ease, transform 1.4s cubic-bezier(.22,1,.36,1);
}
.fv-photo.loaded .fv-photo-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fv-photo-inner { opacity: 1; transform: none; transition: none; }
}
.fv-images { position: absolute; inset: 0; }
.fv-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}
.fv-img.is-active { opacity: 1; }

/* 暗オーバーレイ（画像全体を均一に暗くする＝明るい箇所だけ浮かないように。トップ状態でも沈むよう常時強め） */
.fv-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(rgba(13,13,16,.58), rgba(13,13,16,.58)),
    radial-gradient(150% 120% at 50% 45%, transparent 55%, rgba(13,13,16,.3) 100%);
}
#fv .fv-copy { z-index: 495; }  /* タイトル/サブコピーを最前面へ（グレイン490・暗転オーバーレイ8より前）＝スクロールしても暗くならない・グレインで霞まない */
#fv .fv-about-right { z-index: 9; }

/* FVコピー（takedahp方式）：
   外側 .fv-copy = スクロール連動の退場のみ（トランジション無し）
   内側 .fv-copy__inner = 「少しでもスクロールしたら0.8sで左上へ移動＋0.75に縮小」（スクロール量に連動しない） */
.fv-copy {
  position: absolute;
  inset: 0;
  z-index: 495;                 /* 最前面（グレイン/暗転オーバーレイより前）。#fv .fv-copy と一致させる */
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: left top;
}
.fv-copy__inner {
  position: absolute; inset: 0;
  transform-origin: left top;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);   /* takedahp実測：0.8s / ease(.25,.46,.45,.94) */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .fv-copy__inner { transition: none; } }

/* FV ABOUT（タイトルロック後、右下からせり上がる大型明朝ブロック） */
.fv-about-right {
  position: absolute;
  right: 6.4vw;
  bottom: 7vh;
  left: auto;
  top: auto;
  width: min(58vw, 760px);
  z-index: 6;
  opacity: 1;                     /* 常に濃く（薄くしない）。下からスライドして現れる */
  transform: translateY(calc(100% + 20vh));  /* 初期は完全に画面外（下）＝トップでは覗かない。JSで3枚目の写真タイミングからせり上がる */
  will-change: transform;
  pointer-events: auto;
}
.fv-about__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: clamp(8px, 1vw, 14px);
}
.fv-about__group { margin-bottom: clamp(36px, 4vw, 56px); }  /* Figma：2グループ間に空行1つ分の余白 */
.fv-about__group:last-of-type { margin-bottom: clamp(10px, 1.2vw, 16px); }
/* FV内はブロックごとせり上がるので、行マスクは無効化（常に見える状態） */
.fv-about-right .asl { overflow: visible; }
.fv-about-right .asl__in { transform: none; transition: none; opacity: 1; }  /* 文字の透明度100% */
/* Figma実寸：冒頭のヒーロー宣言=45px、それ以外の本文=33px（デスクトップで実寸・狭幅は縮小） */
.fv-about-right .asl--gold .asl__in  { font-size: clamp(33px, 3.55vw, 50px); line-height: 72px; font-weight: 500; letter-spacing: 0; }  /* 線を細く（旧700→500・指定維持）／字間0（Figma準拠）／文字サイズは一回り大きく（45→50px）／行間65→72px（本人FB 2026-09-07「行間が狭い」） */
.fv-about-right .asl--white .asl__in { font-size: clamp(22px, 2.35vw, 33px); line-height: 76px; color: #F5F3EF; font-weight: 500; letter-spacing: .6px; }  /* 線を細く（旧800→500・指定維持）／字間Figma準拠0.6px／行間64→76px（本人FB 2026-09-07「行間が狭い」。33px本文で1.94→2.3倍） */
.fv-about-right .asl--gold  { margin-bottom: clamp(34px, 3.6vw, 56px); }   /* 松尾FB：見出しと本文の間の余白をさらに広く（18-30px→34-56px） */
.fv-about-right .asl--white { margin-bottom: clamp(10px, 1.1vw, 16px); }   /* 行間を広げた分、段落の切れ目も少し広げて段落として読めるようにする（4-8px→10-16px） */
/* 「誠実に、ひたむきに。」は本文サイズ(33px)・白（冒頭宣言だけ45pxで、他は33pxに揃える） */
.fv-about-right .asl--gold.asl--w .asl__in { color: #F5F3EF; font-size: clamp(22px, 2.35vw, 33px); line-height: 76px; font-weight: 500; letter-spacing: .6px; }
.strength-cta {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 7% 80px;
  text-align: center;
}
.strength-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  border: 1px solid rgba(26,26,26,.2);
  padding: 24px 48px;
  background: transparent;
  transition: background .25s ease, border-color .25s ease;
}
.strength-cta__btn:hover { background: rgba(26,26,26,.04); border-color: rgba(26,26,26,.4); }
.strength-cta__label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--gold);
}
.strength-cta__text {
  font-family: var(--serif);
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--black);
  letter-spacing: .04em;
}
.strength-cta__arrow {
  font-size: 18px;
  color: #1A1A1A;
  transition: transform .25s ease;
}
.strength-cta__btn:hover .strength-cta__arrow { transform: translateX(4px); }

.fv-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(245,243,239,.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,169,110,.35);
  padding-bottom: 4px;
  transition: color .25s ease, border-color .25s ease;
}
.fv-about-btn:hover { color: var(--gold); border-color: var(--gold); }
.fv-about-btn span { font-size: 13px; }

/* 行：マスク（overflow:hidden）＋内側を下からスライドアップ */
/* SP専用の改行。PCでは無視され、SPでだけ効く（PCの改行位置は変えない） */
.br-sp { display: none; }
/* 語の途中で泣き別れさせたくない箇所に使う。
   使い方：<span class="nw">技術</span>で社会に貢献する
   （長い語に付けると幅からあふれるので、2〜4文字の語にだけ使うこと） */
.nw { white-space: nowrap; }

.asl { overflow: hidden; }
.asl__in {
  display: block;
  font-family: var(--serif);
  transform: translateY(116%);
  transition: transform 1.15s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}
/* ゴールドの強調行（45px / weight700 / lh1.44） */
.asl--gold { margin-bottom: clamp(20px, 2vw, 30px); }
.asl--gold .asl__in {
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(27px, 2.344vw, 48px);
  line-height: 1.444;
  letter-spacing: .02em;
}
/* 白の本文行（33px / weight800 / rgba.75 / ls0.6px） */
.asl--white { margin-bottom: clamp(8px, .9vw, 16px); }
.asl--white .asl__in {
  color: rgba(255, 255, 255, .75);
  font-weight: 800;
  font-size: clamp(20px, 1.719vw, 35px);
  line-height: 1.7;
  letter-spacing: .6px;
}

@media (max-width: 768px) {
  .asl--white .asl__in { line-height: 1.85; }
  .asl__in br { display: none; } /* スマホは折返しをブラウザ任せに */
}

/* 明朝タイトル（Figma実寸 1920基準 → vw）＋ 行マスクのワイプ表示（武田病院ライク） */
.fv-line {
  position: absolute;
  left: 11.25vw;            /* 216px */
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;   /* ディセンダのクリップ防止 */
  pointer-events: none;
}
.fv-line--l1 { bottom: 18.75vw; }  /* 360px */
.fv-line--l2 { bottom: 13.80vw; }  /* 265px */
.fv-main-copy,
.fv-line__in {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.271vw;       /* 82px@1920 */
  line-height: 6.615vw;     /* 127px */
  letter-spacing: 0.256vw;  /* 4.92px */
  color: #F5F3EF;
  white-space: nowrap;
  transform: translateY(115%);
  transition: transform 1.15s cubic-bezier(.19,1,.22,1);
}
.fv-main-copy em { font-style: normal; color: var(--gold); }
.fv-copy.is-in .fv-line--l1 .fv-line__in { transform: translateY(0); transition-delay: .05s; }
.fv-copy.is-in .fv-line--l2 .fv-line__in { transform: translateY(0); transition-delay: .22s; }

/* ── 1文字ずつ下からせり上がる（matsuo-komuten.co.jp「可能性を実現する、技術と人。」実測値）──
   JSで分割できたときだけ .is-split が付く＝分割に失敗しても上の行単位ワイプで表示される。
   .fvc がマスク、その中の span が字。マスクごと20px上げつつ、字を .9em 下から戻す二段構え。 */
.fv-line__in.is-split { transform: none; transition: none; }
.fv-line__in.is-split .fvc {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.fv-line__in.is-split .fvc > span {
  display: inline-flex;
  padding-bottom: .1em;            /* ディセンダと濁点がマスクで切れないように */
  transform-origin: left top;
  transform: translate3d(0, .9em, 0);
  backface-visibility: hidden;
}
.fv-copy.is-in .fv-line__in.is-split .fvc {
  opacity: 1;
  transform: translateZ(0);
  transition: transform .8s cubic-bezier(.16, .64, .32, 1),
              opacity   .8s cubic-bezier(.18, .06, .23, 1);
}
.fv-copy.is-in .fv-line__in.is-split .fvc > span {
  transform: translateZ(0);
  transition: transform .8s cubic-bezier(.16, .64, .32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .fv-line__in.is-split .fvc,
  .fv-line__in.is-split .fvc > span { opacity: 1; transform: none; transition: none; }
}

/* サブコピー（bottom-right・Figma実寸）＋ 遅れてフェードアップ */
.fv-sub-copy {
  position: absolute;
  right: 6.406vw;           /* 123px */
  bottom: 7.5vw;            /* 144px */
  width: 81.875vw;          /* 1572px */
  overflow: hidden;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.198vw;       /* 23px */
  line-height: 2.552vw;     /* 49px */
  letter-spacing: .04em;
  color: #F5F3EF;
  pointer-events: none;
}
.fv-sub__in {
  display: block;
  opacity: 0;
  transform: translateY(1.2vw);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.19,1,.22,1);
}
/* サブコピーはタイトルと“ほぼ同時”にふわっと出す（松尾工務店の出方）。
   旧2.05sはタイトルが出終わるのを待つ設定で、写真・タイトルと合わせて3段階に見えていた。
   0.35sだけ遅らせて、1文字ずつのタイトルに対して柔らかく後追いする程度にとどめる。 */
.fv-copy.is-in .fv-sub__in { opacity: 1; transform: none; transition-delay: .35s; }

/* ゴールドライン */
.gold-line-wrap {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 44%;
  height: 2px;
  overflow: visible;
  opacity: 0;
  transition: opacity .8s ease;
  z-index: 10;
}
.gold-line-wrap.show { opacity: 1; }
.gold-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 45%, rgba(200,169,110,.25) 100%);
}
.gold-dot {
  position: absolute;
  left: 42%;
  top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 14px 5px rgba(200,169,110,.55), 0 0 44px 12px rgba(200,169,110,.22);
  animation: pulse-glow 2.6s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 14px 5px rgba(200,169,110,.55), 0 0 44px 12px rgba(200,169,110,.22); }
  50%      { box-shadow: 0 0 22px 7px rgba(200,169,110,.8),  0 0 64px 18px rgba(200,169,110,.38); }
}
.gold-line-circuit {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.circuit-dot {
  width: 4px; height: 4px;
  border: 1px solid rgba(200,169,110,.5);
  border-radius: 50%;
}

/* スクロールインジケーター */
.scroll-indicator {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 10;
}
.scroll-indicator.show { opacity: 1; }
.scroll-indicator span {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .24em;
  color: rgba(245,243,239,.38);
}
.scroll-arrow {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(200,169,110,.65), transparent);
  animation: scroll-drop 2s ease-in-out infinite;
}
@keyframes scroll-drop {
  0%,100% { transform: scaleY(1); opacity: .65; }
  50%      { transform: scaleY(.5); opacity: .25; }
}

/* ═══════════════════════════════════════════
   FV後グラデ遷移用オーバーレイ
═══════════════════════════════════════════ */
#fv-scroll-overlay {
  position: absolute;
  inset: 0; z-index: 8;
  background: linear-gradient(to bottom, var(--black) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .04s linear;
}

/* ═══════════════════════════════════════════
   共通セクションスタイル
═══════════════════════════════════════════ */
.section-dark  { background: var(--black); color: var(--ecru); }
.section-light { background: var(--ecru); color: var(--black); }
.section-soft  { background: var(--black-soft); color: var(--ecru); }

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 7%;
}
.section-inner-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 7%;
}

.section-en {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .38em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}
.section-num {
  font-family: var(--serif);
  font-size: clamp(72px, 10vw, 110px);
  font-weight: 900;
  color: var(--gold);
  opacity: .18;
  line-height: 1;
  margin-bottom: -12px;
  letter-spacing: -.02em;
  display: block;
}
.section-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: .05em;
  line-height: 1.45;
  margin-bottom: 20px;
}
.section-lead {
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 2;
  opacity: .78;
  max-width: 640px;
}

/* スクロールアニメーション（松尾フィードバック：ゆっくり・ふわんと＝炎の立ち上りイメージ） */
.anim-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.5s cubic-bezier(.22,.61,.21,1), transform 1.5s cubic-bezier(.22,.61,.21,1);
}
.anim-up.show { opacity: 1; transform: translateY(0); }
.anim-up-d1 { transition-delay: .1s; }
.anim-up-d2 { transition-delay: .2s; }
.anim-up-d3 { transition-delay: .3s; }
.anim-up-d4 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .anim-up { opacity: 1; transform: none; transition: none; } }

/* ゴールドディバイダー */
.gold-divider {
  width: 40px; height: 1px;
  background: var(--gold);
  opacity: .5;
  margin: 36px 0;
}
.gold-divider-full {
  width: 100%; height: 1px;
  background: linear-gradient(to right, rgba(200,169,110,.35), transparent);
  margin: 48px 0;
}

/* ═══════════════════════════════════════════
   SECTION 3 : GATEWAY（ENTRANCE）
═══════════════════════════════════════════ */
#gateway {
  background: var(--ecru);
  color: var(--black);
}

.gateway-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 7% 80px;
}

/* 導入ヘッダー */
.gateway-header {
  margin-bottom: 56px;
}
.gateway-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .38em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 22px;
}
.gateway-label span {
  font-family: var(--serif);
  letter-spacing: .12em;
  color: #1A1A1A;
  font-weight: 400;
  margin-left: 12px;
}
.gateway-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 20px;
}
.gateway-sub {
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.9;
  color: #1A1A1A;
  max-width: 560px;
}

/* フォトカード 2×2 グリッド */
.gateway-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.gateway-photo-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.gateway-photo-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .7s ease;
}
.gateway-photo-card:hover .gateway-photo-card__bg {
  transform: scale(1.04);
}
/* 写真プレースホルダー（実写差し替え前） */
.gateway-photo-card:nth-child(1) .gateway-photo-card__bg {
  background-image: linear-gradient(135deg, #2c2c2c 0%, #4a4a4a 40%, #3a3a3a 100%);
}
.gateway-photo-card:nth-child(2) .gateway-photo-card__bg {
  background-image: linear-gradient(135deg, #1e2a2a 0%, #2e4040 40%, #253535 100%);
}
.gateway-photo-card:nth-child(3) .gateway-photo-card__bg {
  background-image: linear-gradient(135deg, #1c2030 0%, #2a3050 40%, #1e2535 100%);
}
.gateway-photo-card:nth-child(4) .gateway-photo-card__bg {
  background-image: linear-gradient(135deg, #2a1e1e 0%, #3e2a2a 40%, #2e2020 100%);
}
/* 下グラデオーバーレイ */
.gateway-photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.22) 40%,
    rgba(0,0,0,.72) 100%);
  transition: opacity .3s;
}
.gateway-photo-card:hover::after {
  background: linear-gradient(to bottom,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.28) 40%,
    rgba(0,0,0,.78) 100%);
}
/* テキストオーバーレイ */
.gateway-photo-card__text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 28px 32px 32px;
}
.gateway-photo-card__for {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .32em;
  color: rgba(245,243,239,.65);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.gateway-photo-card__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--ecru);
  letter-spacing: .04em;
  line-height: 1.35;
  margin-bottom: 10px;
}
.gateway-photo-card__link {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(245,243,239,.6);
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .25s;
}
.gateway-photo-card__link::after {
  content: '→';
  font-size: 13px;
  transition: transform .25s;
}
.gateway-photo-card:hover .gateway-photo-card__link {
  color: var(--gold);
}
.gateway-photo-card:hover .gateway-photo-card__link::after {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════
   数値プレートバー（FV直下・暗色）
═══════════════════════════════════════════ */
#numbers-bar {
  position: relative;
  background: #0A0806;
  padding-top: clamp(40px, 6vw, 90px);
  overflow: hidden;
}
#numbers-bar::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(13,13,16,.66), rgba(13,13,16,.78)), url(../images/fv4.webp) center/cover no-repeat;
  filter: grayscale(.2);
  pointer-events: none;
}
/* STRENGTH 見出しマーキー（Figma 72:4803：金アウトライン約177pxを横スクロール） */
.strength-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  margin-bottom: clamp(24px, 4vw, 56px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.strength-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 64px);
  width: max-content;
  animation: strengthScroll 56s linear infinite;   /* 松尾FB：スライドのスピードをゆっくり（旧32s） */
  will-change: transform;
}
.strength-marquee__track span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 11.5vw, 178px);
  line-height: 1.05;
  letter-spacing: -.026em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;                      /* フィルタのSourceAlpha用（描画はリングのみ＝中は透過） */
  filter: url(#goldOutline);        /* 合体シルエットの縁だけゴールド（内部輪郭線が出ない） */
  /* 松尾FB：カンプの「かすれ」質感＝ノイズαマスクで輪郭を所々欠けさせる（α=1.9*noise-0.35 → 大半は不透明・ノイズの暗部だけ欠ける） */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  -webkit-mask-size: 300px 300px;
          mask-size: 300px 300px;
}
@keyframes strengthScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .strength-marquee__track { animation: none; } }
/* STRENGTHマーキーの写真カード（文字と一緒に横へ流れる）
   align-items:center だけだと行ボックス基準で揃うため、写真が文字より上に浮いて
   「天端合わせ」に見える。実測でゴールド文字のインクの中心は行ボックス中心より
   16.5px（＝0.093em）下にあるので、そのぶん写真を下げて文字の胴と中心を合わせる。 */
.strength-marquee__photo {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(clamp(6px, 1.07vw, 16.5px));
  z-index: 2;
  width: 288px;
  height: 135.254px;
  overflow: hidden;
  border: 1px solid rgba(200,169,110,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  pointer-events: none;
}
.strength-marquee__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.numbers-bar-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 7%;
}

/* STRENGTH フィナーレ：FV内でピン留めし、スクロール最後に下からせり上がる固定ビュー（fv4背景） */
.fv-strength {
  position: absolute; inset: 0; z-index: 498;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Figma 72:4737 準拠の縦位置：数値はビュー下端付近（下端から約13vh）、マーキーはその上（gap約11vh）＝マーキー中心≈48%。
     旧 justify-content:center は数値が中央に来てFigmaと「場所がかなり違う」原因だった */
  gap: clamp(48px, 13vh, 180px);      /* 松尾FB：マーキーと数値の間にもう少し余白（旧11vh） */
  padding-bottom: 21vh;               /* 松尾FB：数値と下端（次セクション境界）の余白をさらに広く（13vh→15vh→21vh） */
  /* 背景画像もスクリムも持たない＝FVの fv-photo(fv4) をそのまま共有。別画像の継ぎ目が出ない。
     下からスクロールインして現れる（フェードしない） */
  background: none;
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}
.fv-strength .strength-marquee { margin-bottom: 0; }
/* STRENGTH-INK（2026-11-06 夜・本人「動いてるやつがアイフォンだと見切れてる」）: iPhone の書体（TsukuMin が無く次の候補で描く）は字の上下が行の箱（1.05em）より出て、
   span の mask（かすれ）・filter（金の縁）・帯の overflow:hidden が箱の外を切っていた＝字の上下がまっすぐ切れ、切り口に縁の線が出る。
   span と帯の箱を上下に広げ（padding）、同じだけ margin を詰める＝並び・高さ・位置は今のまま */
.strength-marquee__track span { padding-block: .22em; margin-block: -.22em; }
.strength-marquee { padding-block: clamp(15px, 2.6vw, 40px); margin-top: calc(-1 * clamp(15px, 2.6vw, 40px)); }
.fv-strength .strength-marquee { margin-bottom: calc(-1 * clamp(15px, 2.6vw, 40px)); }   /* 上の margin-bottom: 0 より後に置く */
.fv-strength__plates {
  position: relative; z-index: 1;
  max-width: 980px; width: 100%; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 15.7%; row-gap: 40px;
  align-items: start; justify-items: center;
}
/* Figma 72:4737 準拠：カード無し・各数値の背後に炎S・ゴールド数字＋白ラベル＋白desc */
.fv-strength .number-plate {
  opacity: 0; transform: translateY(56px);   /* 下からフェイドイン：初期は下・透明 */
  transition: opacity 1.5s cubic-bezier(.22,.61,.21,1), transform 1.7s cubic-bezier(.22,.61,.21,1);   /* 松尾FB：ゆっくりふわん（炎の立ち上り） */
  position: relative;
  background: none; border: none; border-radius: 0;
  padding: 0; text-align: center; overflow: visible; width: 100%;
}
.fv-strength.is-revealed .number-plate { opacity: 1; transform: none; }
.fv-strength.is-revealed .number-plate:nth-child(1) { transition-delay: .05s; }
.fv-strength.is-revealed .number-plate:nth-child(2) { transition-delay: .18s; }
.fv-strength.is-revealed .number-plate:nth-child(3) { transition-delay: .31s; }
@media (prefers-reduced-motion: reduce) {
  .fv-strength .number-plate { opacity: 1; transform: none; transition: none; }
}
.fv-strength .number-plate__flame {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  width: clamp(140px, 100%, 210px); height: auto;
  opacity: .9;                 /* 新PNG(鯖江精機炎 2)は元から淡いクリーム＝高opacityで実寸表示 */
  z-index: 0; pointer-events: none; user-select: none;
}
/* 炎のホバー：ふわっと大きくなる。
   炎自体は pointer-events:none なので、数値プレートのどこにカーソルが乗っても反応させる。
   親の .fv-strength が pointer-events:none なので、プレートだけ受け取りに戻す。
   タッチ端末は hover が張り付くので、マウス環境のみに限定する。 */
@media (hover: hover) and (pointer: fine) {
  .fv-strength .number-plate { pointer-events: auto; }
  .fv-strength .number-plate__flame {
    transition: transform .8s cubic-bezier(.22, .61, .21, 1), opacity .8s ease, filter .8s ease;
  }
  .fv-strength .number-plate:hover .number-plate__flame {
    transform: translate(-50%, -57%) scale(1.2);   /* 少し上へ立ち上りながら拡大 */
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(200, 169, 110, .32));
  }
}
@media (prefers-reduced-motion: reduce) {
  .fv-strength .number-plate__flame,
  .fv-strength .number-plate:hover .number-plate__flame { transition: none; transform: translate(-50%, -54%); }
}
.fv-strength .number-plate__val {
  position: relative; z-index: 1;
  display: inline-flex; align-items: baseline; justify-content: center;
  white-space: nowrap;
  font-family: var(--serif); font-weight: 900; color: var(--gold);
  font-size: clamp(52px, 4.8vw, 92px); line-height: .95; letter-spacing: -.01em;
}
.fv-strength .number-plate__unit {
  font-size: .32em; font-weight: 900; margin-left: .08em; letter-spacing: 0;
  white-space: nowrap;
}
.fv-strength .number-plate__label {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 400; color: #fff;   /* opacity:.7で半透明だったのを白ベタに */
  font-size: clamp(16px, 1.25vw, 23px); line-height: 1.4; letter-spacing: .037em;
  margin: clamp(10px, 1vw, 16px) 0 0;
}
.fv-strength .number-plate__desc {
  position: relative; z-index: 1;
  font-family: var(--sans); font-weight: 400; color: #fff;   /* 900は太すぎたのでラベルと同じRegularに */
  font-size: clamp(12px, .82vw, 15px); line-height: 1.5; letter-spacing: .028em;
  margin: clamp(4px, .5vw, 8px) 0 0;
}
@media (max-width: 640px) {
  /* 松尾FB(SP)：すきまをあけて、ひとつひとつ大きく */
  .fv-strength__plates { grid-template-columns: 1fr; column-gap: 0; row-gap: 52px; max-width: 360px; }
  .fv-strength .number-plate__val   { font-size: clamp(64px, 17vw, 78px); }
  .fv-strength .number-plate__label { font-size: clamp(18px, 4.6vw, 21px); }
  .fv-strength .number-plate__desc  { font-size: clamp(13.5px, 3.5vw, 16px); }
}

/* ═══════════════════════════════════════════
   SECTION 4 : OUR BUSINESS
═══════════════════════════════════════════ */
#business {
  background: var(--ecru);
  color: var(--black);
}

.business-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  flex-wrap: wrap;
  gap: 24px;
}
.business-header-left { flex: 1; }
.business-header-copy {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
}
.business-header-sub {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.9;
  color: #1A1A1A;
  max-width: 480px;
  margin-top: 14px;
}

/* ─── 3つの力：セクションヘッダー ─── */
.strength-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 96px;
}
.strength-header .section-num {
  display: block;
  margin-bottom: -4px;
}
.strength-header .section-title {
  font-size: clamp(26px, 3.5vw, 44px);
  margin-bottom: 20px;
}
.strength-header .section-lead {
  text-align: center;
  max-width: 100%;
}

/* REPRO バナー */
.repro-banner {
  background: #0A0806;
  border: 1px solid rgba(200,169,110,.15);
  border-radius: 2px;
  overflow: hidden;
}
.repro-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 80px);
}
.repro-banner__label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}
.repro-banner__title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  color: var(--ecru);
  line-height: 1.4;
  margin-bottom: 16px;
}
.repro-banner__body {
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.9;
  color: rgba(245,243,239,.65);
  max-width: 560px;
}
.repro-banner__action {
  flex-shrink: 0;
}
.repro-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--black);
  background: var(--gold);
  padding: 16px 32px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.repro-banner__btn:hover { opacity: .82; }
.repro-banner__btn-arrow { font-size: 14px; }

/* プロセスフロー図 */
.process-flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  background: var(--black-soft);
  padding: 48px 40px;
  min-height: 480px;
}
.process-flow__label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .38em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 40px;
  text-align: center;
}
.process-flow__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 320px;
}
.process-step {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,169,110,.2);
  border-left: 3px solid var(--gold);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.process-step__num {
  font-family: var(--serif);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: .2em;
  min-width: 24px;
}
.process-step__name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ecru);
  letter-spacing: .06em;
}
.process-step__sub {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(245,243,239,.45);
  letter-spacing: .06em;
  margin-left: auto;
}
.process-arrow {
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(200,169,110,.5), rgba(200,169,110,.2));
  position: relative;
}
.process-arrow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(200,169,110,.4);
}
.process-flow__note {
  margin-top: 28px;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(245,243,239,.3);
  letter-spacing: .12em;
  line-height: 1.8;
}

/* レスポンシブ */
@media (max-width: 860px) {
  .process-flow { min-height: auto; padding: 48px 7%; }
}

/* ═══════════════════════════════════════════
   SECTION 5 : TECHNOLOGY
═══════════════════════════════════════════ */
#technology {
  background: var(--ecru);
  color: var(--black);
}

/* Techカード 4枚 */
.tech-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(26,26,26,.1);
  margin-bottom: 48px;
}
.tech-card {
  background: var(--ecru);
  padding: 36px 28px;
  border-top: 2px solid transparent;
  transition: border-color .3s;
}
.tech-card:hover { border-top-color: var(--gold); }
.tc-en {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.tc-title {
  font-family: var(--serif);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--black);
  margin-bottom: 12px;
  line-height: 1.55;
}
.tc-body {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.9;
  color: #1A1A1A;
}

/* REPRO補足 */
.tech-repro {
  padding: 32px 36px;
  border: 1px solid rgba(200,169,110,.3);
  border-left: 3px solid var(--gold);
  background: rgba(200,169,110,.05);
}
.tech-repro__en {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(160,120,40,.8);
  margin-bottom: 10px;
  display: block;
}
.tech-repro__title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
}
.tech-repro__body {
  font-size: 13px;
  line-height: 1.85;
  color: #1A1A1A;
}

/* ═══════════════════════════════════════════
   SECTION 6 : TRUST
═══════════════════════════════════════════ */
#trust {
  background: var(--black);
  color: var(--ecru);
}

.trust-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.trust-copy-main {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.65;
  margin-bottom: 24px;
}
.trust-body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 2.1;
  color: #1A1A1A;
  margin-bottom: 20px;
}

.trust-blocks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-block {
  padding: 28px 32px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid rgba(200,169,110,.25);
  transition: border-left-color .3s;
}
.trust-block:hover { border-left-color: var(--gold); }
.trust-block__en {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.trust-block__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
}
.trust-block__body {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.85;
  color: #1A1A1A;
}

.trust-num-big {
  font-family: var(--serif);
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.trust-num-label {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(245,243,239,.55);
  letter-spacing: .1em;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════
   SECTION 7 : CASE STUDIES
═══════════════════════════════════════════ */
#cases {
  background: var(--ecru);
  color: var(--black);
}

/* 宇宙案件 特別扱い */
.case-space {
  background: var(--black);
  padding: 52px 48px;
  border-left: 3px solid var(--gold);
  margin-bottom: 56px;
}
.case-space__en {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
}
.case-space__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--ecru);
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.case-space__body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.9;
  color: rgba(245,243,239,.75);
  max-width: 600px;
}
.case-space__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .1em;
  text-decoration: none;
}
.case-space__link::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--gold);
}

/* 数値プレート（生成り面） */
.case-plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 48px;
}
.case-plate {
  background: var(--black);
  padding: 32px 24px;
  text-align: center;
}
.case-plate__val {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: var(--gold);
  line-height: 1.1;
  display: block;
  margin-bottom: 8px;
}
.case-plate__label {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ecru);
  opacity: .7;
  margin-bottom: 6px;
}
.case-plate__desc {
  font-size: 10px;
  color: rgba(245,243,239,.4);
  line-height: 1.6;
  font-family: var(--sans);
}

/* 業界タグ */
.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.industry-tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .18em;
  padding: 6px 18px;
  border: 1px solid rgba(200,169,110,.4);
  color: var(--gold);
  background: transparent;
  transition: background .25s, color .25s;
}
.industry-tag:hover {
  background: var(--gold);
  color: var(--black);
}

/* 守秘案件 */
.case-confidential {
  padding: 32px 36px;
  background: rgba(200,169,110,.05);
  border-left: 2px solid rgba(200,169,110,.3);
}
.case-confidential p {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--black);
  margin-bottom: 12px;
  line-height: 1.7;
}
.case-confidential small {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.8;
  color: #1A1A1A;
}

/* ═══════════════════════════════════════════
   SECTION 8 : ABOUT US
═══════════════════════════════════════════ */
#about {
  background: var(--ecru);
  color: var(--black);
  padding: 144px 0;              /* 上下144pxパディング */
  /* カバー演出：見えきった位置でピン留めし、後続のRECRUITが上に覆いかぶさる。
     固定範囲は .cover-recruit 内のみ。ビューポートより背が高い時の top はJSが負値に更新 */
  position: sticky;
  top: 0;
}

/* About split layout */
.about-split {
  display: grid;
  grid-template-columns: 48% 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 7%;                 /* 下80pxは#aboutの144pxに一本化 */
  gap: 64px;
  align-items: center;
}
.about-split__photo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #1a1a1a;
  aspect-ratio: 3 / 4;
}
/* 松尾FB：会社概要/沿革ホバーで写真がマスク内で入れ替わる（直しカンプ準拠） */
.about-split__photo .about-photo--alt {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
}
#about:has(.cbrow--profile:hover) .about-photo--profile { opacity: 1; }
#about:has(.cbrow--history:hover) .about-photo--history { opacity: 1; }
.about-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate;
}
.about-split__label {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--black);
  display: block;
  margin-bottom: 6px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.about-split__label-sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .24em;
  color: rgba(26,26,26,.45);
  display: block;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.about-split__heading {
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--black);
  line-height: 1.9;
  letter-spacing: .04em;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.about-split__desc {
  display: none;
}
.about-split__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  position: relative;
  z-index: 1;
}
.about-split__flame {
  position: absolute;
  top: -74.7px;                /* Figma: 本文上端より上へ */
  right: -23px;                /* Figma: 本文右端を23px超える */
  width: 180.7px;              /* Figma 180.7×265.7（比率でheight自動） */
  height: auto;
  opacity: .59;                /* Figma opacity 0.59 */
  /* 松尾FB：炎はフェードしながら下から上へ立ち上る */
  transition: opacity 1.8s cubic-bezier(.22,.61,.21,1) .4s, transform 1.8s cubic-bezier(.22,.61,.21,1) .4s;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 860px) {
  .about-split__flame { width: 120px; top: -40px; right: -6px; }
}
/* 松尾FB：炎の入場初期状態（親 .about-split(.anim-up) の .show で下から上へフェード） */
.about-split.anim-up .about-split__flame { opacity: 0; transform: translateY(64px); }
.about-split.anim-up.show .about-split__flame { opacity: .59; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .about-split.anim-up .about-split__flame { opacity: .59; transform: none; transition: none; } }
/* COMPANY：コーナーブラケット付き READ MORE 行（Figma 72:5102 準拠） */
.cbrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 61px;                       /* Figma gap */
  width: 100%; max-width: 588px;   /* Figma 588 */
  height: 64px;                    /* Figma 64 */
  padding: 0 44px;                 /* 文字の左右インセット（枠は箱の四隅） */
  text-decoration: none;
}
/* 四隅ブラケット（Figma frame-btn__corner 準拠） */
.cbrow::before, .cbrow::after,
.cbrow__more::before, .cbrow__more::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 0 solid rgba(26,26,26,.45);
  transition: transform .3s ease-out, border-color .3s ease;
}
.cbrow::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.cbrow::after  { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.cbrow__more::before { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.cbrow__more::after  { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
/* ホバー：四隅が外へ広がる */
.cbrow:hover::before { transform: translate(-7px,-7px); }
.cbrow:hover::after  { transform: translate(7px,7px); }
.cbrow:hover .cbrow__more::before { transform: translate(7px,-7px); }
.cbrow:hover .cbrow__more::after  { transform: translate(-7px,7px); }
/* ホバー：色がゴールドに */
.cbrow:hover .cbrow__label,
.cbrow:hover .cbrow__more { color: var(--gold); }
.cbrow:hover::before, .cbrow:hover::after,
.cbrow:hover .cbrow__more::before, .cbrow:hover .cbrow__more::after { border-color: var(--gold); }

.cbrow__label {
  font-family: var(--serif); font-weight: 700;
  font-size: 26px;                     /* 一回り小さく（Figma30.9→26） */
  line-height: 1;
  letter-spacing: 3px;
  color: var(--black);
  white-space: nowrap;
  transition: color .3s ease;
}
.cbrow__more {
  font-family: var(--sans); font-weight: 500;
  font-size: 16px;                     /* 一回り小さく（Figma18.9→16） */
  line-height: 1;
  letter-spacing: 3px;
  color: #1A1A1A; display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  transition: color .3s ease;
}
.cbrow__arrow { width: 42px; height: auto; flex: 0 0 auto; transition: transform .25s ease; }
.cbrow:hover .cbrow__arrow { transform: translateX(5px); }
/* アクティブ（1行目）：初期からゴールド */
.cbrow--active .cbrow__label,
.cbrow--active .cbrow__more { color: var(--gold); }
.cbrow--active::before, .cbrow--active::after,
.cbrow--active .cbrow__more::before, .cbrow--active .cbrow__more::after {
  border-color: var(--gold);
}
@media (max-width: 620px) {
  .cbrow { height: 56px; padding: 0 20px; gap: 16px; }
  .cbrow__label { font-size: 21px; letter-spacing: 2px; }
  .cbrow__more { font-size: 12px; letter-spacing: 2px; }
  .cbrow__arrow { width: 32px; }
}
/* 松尾FB(SP)：390px幅では「代表メッセージ」行が 20+160+16+128+20=344px と枠(343px)を超えて
   右端に余白がなくなっていた。狭い画面だけ文字・矢印を詰めて右のアキを確保する */
@media (max-width: 460px) {
  .cbrow { padding: 0 18px; }
  .cbrow__label { font-size: 19px; letter-spacing: 1.2px; }
  .cbrow__more { font-size: 11px; letter-spacing: 1.2px; }
  .cbrow__arrow { width: 26px; }
}
.recruit-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .34em;
  color: rgba(245,243,239,.85);
  max-width: 560px;
  margin: 0 auto clamp(26px,3vw,38px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(245,243,239,.28);
}
.recruit-cta {
  display: inline-block;
  margin-top: clamp(34px, 4vw, 52px);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: .2em;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(200,169,110,.6);
  padding: 1.1em 3.6em;
  transition: background .3s, color .3s, border-color .3s;
}
.recruit-cta:hover { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }

/* NEWS（Figma 149:5424 準拠：クリーム地・見出し＋一覧） */
/* ══════ NEWS：toyokoh.com TOP News セクション完全準拠（実測 2026-07） ══════
   bg#F8F9FA / ラベル"( News )" Cabinet Grotesk 18.4px / 行=日付+黒チップ+タイトル(1行clamp)
   罫線1px rgba(0,0,0,.2) / 出現=マスク内 translateY(110%)→0 1.2s cubic-bezier(.85,0,.15,1)
   View all=黒ピル198×40・hoverで白反転＋テキスト上スライド */
#news.nwt { background: var(--ecru-dim); color: #000; padding: clamp(110px,13.4vw,215px) 0 clamp(104px,12.9vw,207px); }   /* 松尾FB：背景に色（周囲より一段深いエクリュ #ede9e2） */
/* 松尾FB：見出しはカンプ準拠＝明朝の大きな NEWS＋小さな お知らせ */
.nwt-head { margin: 0 0 clamp(28px,3vw,48px); }
.nwt-head__en { display: block; font-family: var(--serif); font-weight: 900;
  font-size: clamp(56px, 5.47vw, 105px); line-height: 1; letter-spacing: .02em; color: #1A1A1A; }
.nwt-head__ja { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(14px, 1.35vw, 26px); letter-spacing: .08em; color: #1A1A1A; opacity: .5; }
.nwt__inner { max-width: 1369px; margin: 0 auto; padding: 0 clamp(20px,3vw,48px); }
.nwt-label { display: flex; align-items: center; margin: 0 0 clamp(32px,3.1vw,49px);
  font-family: var(--sans);
  font-weight: 700; font-size: clamp(14px,1.15vw,18.4px); line-height: 1; color: #000; }
.nwt-label__text { text-transform: uppercase; padding-inline: clamp(8px,.75vw,12px); }
.nwt-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(0,0,0,.2); }
.nwt-item { border-top: 1px solid rgba(0,0,0,.2); }
.nwt-link { display: flex; align-items: center; gap: clamp(24px,5vw,80px);
  padding: clamp(22px,2.15vw,34px) 0 clamp(20px,2vw,32px); text-decoration: none; color: #000; }
.nwt-info { display: flex; align-items: center; gap: clamp(12px,1.5vw,24px); flex: 0 0 auto; }
/* マスク出現（toyokoh方式）：wrapper=overflow hidden / 中身=110%下げ→.is-showで0 */
.nwt-dateWrap, .nwt-tagWrap, .nwt-ttlWrap { display: block; overflow: hidden; }
.nwt-date, .nwt-tag, .nwt-ttl { display: block; transform: translateY(110%); }
.nwt-item.is-show .nwt-date, .nwt-item.is-show .nwt-tag, .nwt-item.is-show .nwt-ttl {
  transform: translateY(0); transition: transform 1.2s cubic-bezier(.85,0,.15,1); }
.nwt-date { font-family: var(--sans); font-weight: 700; font-size: clamp(12px,.86vw,13.8px); color: #000; }
.nwt-tag { display: flex; align-items: center; justify-content: center; min-width: clamp(72px,5.75vw,92px);
  height: clamp(23px,1.75vw,28px); padding: 0 clamp(10px,.9vw,14px); background: #000; border-radius: 4.6px; }
.nwt-tagText { font-family: var(--sans); font-weight: 700; font-size: clamp(11px,.86vw,13.8px); color: #fff; }
.nwt-ttl { font-family: var(--sans); font-weight: 500; font-size: clamp(14px,1.01vw,16.1px);
  letter-spacing: .06em; line-height: 1.8; padding: .36em 0; color: #000;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.nwt-item--empty { padding: 24px 0; font-family: var(--sans); font-size: 14px; color: rgba(0,0,0,.5); }
/* View all（FillButton準拠：黒ピル→hoverで白反転＋枠出現＋テキスト上スライド） */
.nwt-more { margin-top: clamp(36px,3.6vw,57px); display: flex; justify-content: center; }
.nwt-btn { position: relative; display: flex; align-items: center; justify-content: center;
  width: clamp(160px,12.4vw,198px); height: clamp(36px,2.5vw,40px); background: #000; border-radius: 24px;
  text-decoration: none; transition: background-color .6s cubic-bezier(0,.55,.45,1); }
.nwt-btn::before { content: ""; position: absolute; inset: 0; border: 1px solid #000; border-radius: 24px;
  opacity: 0; transition: opacity .6s cubic-bezier(0,.55,.45,1); }
.nwt-btn__inner { display: block; overflow: hidden; height: 1.2em; font-size: clamp(10.5px,.72vw,11.5px); line-height: 1.2; }
.nwt-btn__text { display: block; font-family: var(--sans); font-weight: 700;
  font-size: clamp(10.5px,.72vw,11.5px); line-height: 1.2; color: #fff;
  transition: transform .6s cubic-bezier(0,.55,.45,1), color .6s cubic-bezier(0,.55,.45,1); }
.nwt-btn:hover { background: #fff; }
.nwt-btn:hover::before { opacity: 1; }
.nwt-btn:hover .nwt-btn__text { color: #000; transform: translateY(-100%); }
@media (max-width: 767px) {
  .nwt-link { flex-direction: column; align-items: flex-start; gap: 9px; padding: 28px 0 27px; }
  .nwt-date { font-size: 13px; }
  .nwt-tag { min-width: 80px; height: 23px; }
  .nwt-tagText { font-size: 11.5px; }
  .nwt-ttl { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nwt-date, .nwt-tag, .nwt-ttl { transform: none; transition: none; }
  .nwt-btn, .nwt-btn__text { transition: none; }
}

/* 課題バンド（Figma 72:4821 section#page-hero）＝フルブリード写真＋中央メッセージ＋CTA */
/* 事業内容→課題バンドの切り替わり（参考: toyokoh.com/coollaser の CoollaserTechnology01→02）
   次セクションを z-index で背後に置き、margin-top:-100vh で 1画面ぶん先に潜り込ませる。
   前セクションの sticky が外れて上へ抜けると、すでに定位置に貼り付いた次セクションが現れる。 */
#challenge-band.chband { position: relative; z-index: 4; margin-top: -100vh; height: 200vh; background: #0A0806; }
.chband__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chband__bg { position: absolute; inset: 0; z-index: 0; }
/* PCは支給写真（1920×546）をそのまま中央 cover で全面に敷く（初期状態のまま） */
.chband__bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.8) grayscale(.1); }
.chband__overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(110% 100% at 50% 50%, rgba(13,13,16,.22) 0%, rgba(13,13,16,.5) 75%, rgba(13,13,16,.62) 100%); }
.chband__inner { position: relative; z-index: 2; text-align: center; max-width: 1240px; padding: clamp(70px,8vw,110px) clamp(24px,4vw,56px); }
/* 「ですます」化で18文字になり64pxだと .chband__inner の内寸1128pxに収まらず2行に割れるため上限を60pxへ。
   下限32pxは、SPで2行目「一緒に向き合います。」が内寸342pxを超えて3行に割れるのを防ぐ値。 */
.chband__title { font-family: var(--serif); font-weight: 900; font-size: clamp(34px,4.8vw,60px); line-height: 1.3; letter-spacing: .03em; color: var(--ecru); margin: 0 0 clamp(20px,2.4vw,32px); }
/* SPのみ「あなたの課題に、／一緒に向き合います。」で改行（デスクトップは1行に固定） */
.chband__title-br { display: none; }
@media (min-width: 768px) { .chband__title { white-space: nowrap; } }
@media (max-width: 767px) {
  .chband__title-br { display: inline; }
  /* SPは支給の縦位置カット（1339×1638／暗幕が焼き込まれた状態）を全面に敷く。
     縦位置なので全面 cover でも横56%が映り、拡大トリミングにならない。
     素材側で既に暗いので明るさフィルタと暗幕はほぼ外す。 */
  /* 52%＝支給カットの構図（社員の顔＋手元のフランジ）が両方残る位置 */
  .chband__bg img { object-position: 52% center; filter: none; }
  .chband__overlay {
    background: linear-gradient(180deg,
      rgba(13,13,16,0) 0%,
      rgba(13,13,16,.04) 40%,
      rgba(13,13,16,.20) 70%,
      rgba(13,13,16,.28) 100%);
  }
  /* 2行目「一緒に向き合います。」が内寸（100vw − 左右24px）に収まる上限で止める。
     幅の狭い端末で3行に割れるのを防ぐ（320pxまで2行を維持） */
  .chband__title { font-size: min(clamp(34px, 4.8vw, 60px), calc(9.4vw - 4px)); }
}
.chband__lead { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 2; color: var(--ecru); margin: 0 auto clamp(30px,3.6vw,46px); max-width: 1100px; }   /* ですます化で1行目が伸びたため拡幅（「〜ありま/す。」の中折れ防止） */
.chband__cta { display: inline-block; font-family: var(--serif); font-weight: 700; font-size: clamp(14px,1.3vw,18px); letter-spacing: .2em; color: var(--gold); text-decoration: none; border: 1px solid rgba(200,169,110,.6); padding: 1.05em 3.2em; transition: background .3s, color .3s, border-color .3s; }
.chband__cta:hover { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }
/* 事業内容を見るボタン：松尾FB「ボタンはABOUT SABAE SEIKIのサイズ感・文字色に全統一」→ .frame-btn 基準に一本化 */
#challenge-band .chband__btn { text-transform: none; }

/* 会社ナビカード */
.about-nav-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.about-nav-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 48px 40px 44px;
  background: var(--black);
  text-decoration: none;
  border-top: 1px solid rgba(200,169,110,.2);
  transition: background .25s ease;
}
.about-nav-card:hover { background: #222; }
.about-nav-card__num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold);
}
.about-nav-card__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--ecru);
  line-height: 1.3;
}
.about-nav-card__en {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(245,243,239,.4);
  text-transform: uppercase;
}
.about-nav-card__link {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-top: auto;
  padding-top: 24px;
}

/* 社長メッセージ */
.about-message {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: start;
  margin-bottom: 80px;
}
.message-text {
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 2.4;
  letter-spacing: .04em;
  color: #1A1A1A;
  margin-bottom: 20px;
}
.message-name {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(26,26,26,.45);
  letter-spacing: .1em;
  margin-top: 24px;
}
.message-name strong {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--black);
  margin-top: 4px;
  letter-spacing: .06em;
}
.about-photo-placeholder {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #2a2a2a, #1a1a1a);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.about-photo-caption {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(200,169,110,.5);
  letter-spacing: .12em;
}

/* OUR CODE（MVC）深黒ブロック */
.our-code {
  background: var(--black);
  padding: 64px 7%;
  margin: 0 -7%;
  margin-bottom: 80px;
}
.our-code-inner { max-width: 900px; margin: 0 auto; }
.mvc-item {
  display: flex;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(200,169,110,.08);
  align-items: flex-start;
}
.mvc-item:last-child { border-bottom: none; }
.mvc-key {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  width: 96px;
  min-width: 96px;
  padding-top: 4px;
  font-weight: 700;
}
.mvc-val {
  font-family: var(--serif);
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.9;
  color: var(--ecru);
  letter-spacing: .04em;
}
.mvc-val strong {
  display: block;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 6px;
}

/* 会社概要テーブル */
.about-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 60px;
}
.about-table th,
.about-table td {
  padding: 16px 20px;
  border: 1px solid rgba(200,169,110,.2);
  font-family: var(--sans);
  font-size: 14px;
  vertical-align: top;
  line-height: 1.7;
}
.about-table th {
  background: rgba(200,169,110,.08);
  color: rgba(160,120,40,.9);
  font-weight: 700;
  letter-spacing: .06em;
  width: 180px;
}
.about-table td { color: #1A1A1A; }

/* 沿革タイムライン */
.timeline {
  list-style: none;
  position: relative;
  margin-bottom: 64px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 88px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(200,169,110,.2);
}
.timeline li {
  display: flex;
  gap: 40px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(200,169,110,.07);
}
.tl-year {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  width: 88px;
  min-width: 88px;
  padding-top: 2px;
}
.tl-content { flex: 1; padding-left: 40px; }
.tl-event {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.tl-comment {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold);
  opacity: .75;
  font-style: italic;
}

/* ═══════════════════════════════════════════
   SECTION 9 : CONTACT
═══════════════════════════════════════════ */
/* ── CONTACT（Figma 1:7050 準拠：ライト面／ゴールド明朝CONTACT／4カード） ── */
#contact {
  background: var(--ecru);           /* #f5f3ef */
  color: var(--black);
  padding-inline: clamp(20px,2.4vw,40px);
}
#contact .contact-inner {
  width: 100%; max-width: 1410px; margin-inline: auto;
  padding: clamp(72px,7.5vw,120px) 0 clamp(96px,9.6vw,184px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(36px,3.3vw,64px);
  text-align: center;
}
/* 大見出し CONTACT（Figma 143 gold serif） */
.contact-title {
  font-family: var(--serif);
  font-weight: 900;                  /* Figma 1000 */
  font-size: clamp(48px,7.45vw,143px);
  line-height: .646;                 /* 92.4/143 */
  letter-spacing: 1.76px;
  color: var(--gold);
  text-align: center;
  margin: 0;
}
/* サブ見出しブロック（Figma Frame43：gap8） */
.contact-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; text-align: center; }
.contact-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px,2.3vw,44px);  /* Figma 44 */
  line-height: 1.4;                   /* 61.6/44 */
  letter-spacing: 2.2px;
  color: var(--black);
  margin: 0;
}
.contact-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;                    /* Figma 15 */
  line-height: 2;                     /* 30/15 */
  letter-spacing: 0;
  color: var(--black);
  margin: 0;
}

/* 4カード（Figma div.contact-cards：gap57 / card 309・fill白3%・gold枠0.2） */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(20px,3vw,57px);
  width: 100%;
  margin: 0;
}
/* CASE STUDIESのカード（.cs-card）と同じ作りに揃える：
   内側フルボーダー＋外側コーナーブラケットの二重枠、ホバーで四つ角が外へ開く。
   線はゴールド。通常は薄めにしておき、ホバーで濃い金へ変わる。 */
.contact-card { --ccc: rgba(200,169,110,.65); --ccl: 30px;
  position: relative;
  display: flex; flex-direction: column;
  gap: 16px;
  padding: clamp(32px,2.8vw,54px) clamp(22px,2.2vw,42px) clamp(44px,4vw,78px);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,169,110,.4);
  text-decoration: none;
  transition: background-color .3s, border-color .3s;
}
.contact-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--ccc),var(--ccc)), linear-gradient(var(--ccc),var(--ccc)),
    linear-gradient(var(--ccc),var(--ccc)), linear-gradient(var(--ccc),var(--ccc)),
    linear-gradient(var(--ccc),var(--ccc)), linear-gradient(var(--ccc),var(--ccc)),
    linear-gradient(var(--ccc),var(--ccc)), linear-gradient(var(--ccc),var(--ccc));
  background-repeat: no-repeat;
  background-size: var(--ccl) 2px, 2px var(--ccl), var(--ccl) 2px, 2px var(--ccl), var(--ccl) 2px, 2px var(--ccl), var(--ccl) 2px, 2px var(--ccl);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  transition: inset .3s ease-out; }
.contact-card:hover {
  --ccc: var(--gold);
  border-color: rgba(200,169,110,.75);
}
.contact-card:hover::before { inset: -7px; }
@media (prefers-reduced-motion: reduce) { .contact-card, .contact-card::before { transition: none; } }
.contact-card__photo {
  aspect-ratio: 217 / 122;                       /* 箱の寸法はFigma準拠のまま。写真はこの枠にcoverで収める */
  background: linear-gradient(135deg,#2a2a2e,#1a1a1a);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  overflow: hidden;
}
.contact-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.contact-card__en {
  font-family: var(--sans);
  font-size: clamp(11px,0.7vw,13.5px); /* Figma 13.5 */
  letter-spacing: .35em;             /* Figma 4.73/13.5 */
  white-space: nowrap;               /* 1行固定（折返し防止） */
  color: var(--gold);
  text-align: left;
  margin: 0;
}
.contact-card__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(19px,1.25vw,24px); /* Figma 24 */
  line-height: 1.55;                  /* 37.23/24 */
  letter-spacing: .96px;
  color: var(--black);
  text-align: center;
  margin: 0;
}
.contact-card__link {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: clamp(13px,0.86vw,16.5px); /* Figma 16.5 */
  letter-spacing: .08em;              /* Figma 1.32/16.5 */
  white-space: nowrap;                /* 1行固定 */
  color: var(--black);
  margin-top: 4px;
  transition: color .3s ease;
}
/* ホバー：下のリンク文字がゴールドに（デザイナー承認：②案） */
.contact-card:hover .contact-card__link { color: var(--gold); }

/* ── TOP Contact 登場演出（松尾FB 2026-08-10 改：もっと分かりやすく）──
   ①「Contact」は1文字ずつマスクからせり上がる（FVタイトルと同じ出方・55ms/文字）
   ② カードは70px下から大きく浮上（130ms刻み）→ 着地しつつ写真が下から上へワイプで現れる二段構え */
.contact-title.anim-up { opacity: 1; transform: none; transition: none; }
/* line-height .646 の見出しは字面が行ボックスからはみ出すため、文字マスクは padding/負margin で逃がしてから隠す */
/* 上下とも .34em 逃がす（lh .646 のため丸文字の下端・上端が行ボックスを大きくはみ出す）。
   左右も .04em 逃がして serif の払いの見切れを防ぐ */
.ct-ch { display: inline-block; overflow: hidden; padding: .34em .04em .34em; margin: -.34em -.04em -.34em; }
.ct-ch i {
  display: inline-block; font-style: normal;
  transform: translateY(220%);   /* 逃がし(.34em)を広げたぶん、待機位置も深く（マスク窓から覗かせない） */
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0s);
}
.contact-title.anim-up.show .ct-ch i { transform: none; }
/* カード4枚 */
.contact-cards.anim-up { opacity: 1; transform: none; transition: none; }
.contact-cards.anim-up:not(.show) .contact-card { opacity: 0; }
.contact-cards.anim-up.show .contact-card { animation: ccIn 1s cubic-bezier(.16,1,.3,1) backwards; }
.contact-cards.anim-up.show .contact-card:nth-child(2) { animation-delay: .13s; }
.contact-cards.anim-up.show .contact-card:nth-child(3) { animation-delay: .26s; }
.contact-cards.anim-up.show .contact-card:nth-child(4) { animation-delay: .39s; }
@keyframes ccIn { from { opacity: 0; transform: translateY(72px) scale(.95); } to { opacity: 1; transform: none; } }
/* 写真はカード着地に少し遅れて、下から上へのワイプで現れる */
.contact-cards.anim-up:not(.show) .contact-card__photo img { opacity: 0; }
.contact-cards.anim-up.show .contact-card__photo img { animation: ccPhoto .8s cubic-bezier(.65,0,.35,1) backwards; }
.contact-cards.anim-up.show .contact-card:nth-child(1) .contact-card__photo img { animation-delay: .25s; }
.contact-cards.anim-up.show .contact-card:nth-child(2) .contact-card__photo img { animation-delay: .38s; }
.contact-cards.anim-up.show .contact-card:nth-child(3) .contact-card__photo img { animation-delay: .51s; }
.contact-cards.anim-up.show .contact-card:nth-child(4) .contact-card__photo img { animation-delay: .64s; }
@keyframes ccPhoto { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* ホバー：写真がゆっくり寄る */
.contact-card__photo img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.contact-card:hover .contact-card__photo img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .ct-ch i { transform: none; transition: none; }
  .contact-cards.anim-up:not(.show) .contact-card,
  .contact-cards.anim-up:not(.show) .contact-card__photo img { opacity: 1; }
  .contact-cards.anim-up.show .contact-card,
  .contact-cards.anim-up.show .contact-card__photo img { animation: none; }
  .contact-card__photo img { transition: none; }
}

/* CTAボタン */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-block;
  padding: 18px 52px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-decoration: none;
  transition: background .3s, color .3s;
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--black);
}
.btn-ghost {
  display: inline-block;
  padding: 18px 52px;
  background: transparent;
  border: 1px solid rgba(245,243,239,.3);
  color: rgba(245,243,239,.65);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-decoration: none;
  transition: border-color .3s, color .3s;
}
.btn-ghost:hover {
  border-color: var(--ecru);
  color: var(--ecru);
}

/* ═══════════════════════════════════════════
   FV → GATEWAY グラデーション遷移（黒→黒）
═══════════════════════════════════════════ */
#fv::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, #111111);
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════
   SECTION 03-06 写真スペース
═══════════════════════════════════════════ */
.section-photo {
  width: 100%;
  aspect-ratio: 21/9;
  background: linear-gradient(135deg, #2a2a2e 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.section-photo::after {
  content: 'PHOTO';
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(245,243,239,.15);
}
.section-photo--light {
  background: linear-gradient(135deg, #ede9e2 0%, #e8e4dc 100%);
}
.section-photo--light::after {
  color: rgba(26,26,26,.12);
}

/* ═══════════════════════════════════════════
   HERO 導入コピー「静かに、燃えろ。」
   松尾FB：出はCome Join Usの逆（下→上に1文字ずつせり上がる）／
          消えは粒子霧散をやめて自然なフェードアウト（GIFの拡大と同時）
═══════════════════════════════════════════ */
.hero-copy {
  position: relative;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1.35;
  letter-spacing: .06em;
  color: var(--ecru);
  text-shadow: 0 8px 40px rgba(0,0,0,.55);
  pointer-events: none;
  opacity: 1;
  transition: opacity .65s cubic-bezier(.4,0,.2,1);   /* 参考動画実測：文字は約0.65秒かけて消える */
}
.hero-copy.is-out { opacity: 0; }
/* 行ごとのマスク窓。line-height 1.35 でも上下にはみ出さないよう .18em 拡張（負マージンでレイアウト不変） */
.hero-copy__line {
  display: inline-block;
  overflow: hidden;
  padding: .18em 0;
  margin: -.18em 0;
  vertical-align: top;
}
.hero-copy__ch {
  display: inline-block;
  white-space: pre;
  transform: translateY(130%);        /* 拡張窓の外＝完全に隠れる位置から上へ */
  transition: transform 1s cubic-bezier(.85,0,.15,1);
  will-change: transform;
}
.hero-copy.is-in .hero-copy__ch { transform: translateY(0); }
@media (max-width: 767px) {
  .hero-copy { font-size: clamp(30px, 10vw, 52px); }
  .hero-copy__line { display: block; }   /* SPは「静かに、／燃えろ。」の2行 */
}

/* ── モーション版（デザイン .ai から起こしたGIF/WebM/APNG）2026-09-10 検証用 ──
   1600×338px 1行。テキスト版と見え方を揃えるため、字の高さが同じになる幅にしてある。
   （画像の中で字のインクは幅の約90%を占める＝ .ai のアートボードそのまま） */
.hero-copy--motion { line-height: 0; }
.hero-copy__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hero-copy__motion {
  display: block;
  width: clamp(300px, 58vw, 720px);
  height: auto;
  margin: 0 auto;
  min-height: 1px;
  /* フェードインはCSSで持つ。GIFは半透明を持てないので、素材側で薄くすると
     フェード中が粗いドットになる（実測済み）。素材は不透明のまま再生させ、
     ここで opacity を上げる＝どの形式でも滑らかに出る。 */
  opacity: 0;
  transition: opacity .5s cubic-bezier(.4,0,.2,1);
}
.hero-copy--motion.is-in .hero-copy__motion { opacity: 1; }
@media (max-width: 767px) {
  .hero-copy__motion { width: min(92vw, 460px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy__ch { transform: none !important; transition: none; }
  .hero-copy { transition: none; }
}

/* ═══════════════════════════════════════════
   FOOTER（Figma 504:2821「フッターつくった」準拠）接頭辞 ft-
   構成：上段=ロゴ＋ワードマーク／CTA2つ、中段=サイトマップ6列、
         下段=TEL／プライバシー＋コピーライト、背景右に炎
   サイズ：Figmaは1080px高カンプの1画面デザインで実寸だと大きすぎるため、
           比率を保ったまま全体を約0.78倍に縮小（コメントはFigma実寸）
═══════════════════════════════════════════ */
#footer.site-footer {
  position: relative;
  background: #09090B;                              /* Figma App fill */
  /* 上の余白は松尾FBで 84px→100px（1920時）。左右・下はFigmaのまま */
  padding: clamp(48px, 5.21vw, 100px) clamp(24px, 9.115vw, 175px) clamp(32px, 3.75vw, 72px);
  overflow: hidden;
  display: block;
}
/* 背景の炎（Figma：x=1283 y=318 / 498×732。下端から95pxはみ出して切れる） */
.ft-flame {
  position: absolute;
  right: 7.24vw;                                    /* 1920-1283-498=139 */
  bottom: calc(-1 * clamp(32px, 3.96vw, 76px));     /* はみ出し95×0.78 */
  width: clamp(180px, 20.83vw, 400px);              /* 498×0.78 */
  pointer-events: none;
  z-index: 0;
}
.ft-flame img { width: 100%; height: auto; display: block; }

.ft-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

/* ── 上段：ロゴ＋ワードマーク ／ CTA ── */
.ft-top { display: flex; justify-content: space-between; align-items: center; gap: clamp(24px, 3.2vw, 60px); }
.ft-brand { display: inline-flex; align-items: center; gap: clamp(16px, 2.6vw, 48px); text-decoration: none; min-width: 0; }
/* 白のロゴパネル（Figma 126.3×124.1。ロゴ支給までヘッダーと同じテキスト仮置き） */
.ft-brand__box {
  flex: 0 0 auto;
  width: clamp(60px, 5.2vw, 100px);
  min-height: clamp(58px, 5.1vw, 98px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  background: #fff; padding: 8px 4px;
}
.ft-brand__box-en {
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 700;
  font-size: clamp(10px, .73vw, 14px); line-height: 1.25; letter-spacing: .12em; color: #1a1a1a; text-align: center;
}
.ft-brand__box-ja { font-family: var(--sans); font-weight: 500; font-size: 7px; letter-spacing: .08em; color: #6b6055; }
/* ワードマーク（Figma：ベクター文字 848.7×83.4） */
.ft-brand__wordmark {
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: clamp(28px, 4.27vw, 82px); line-height: 1; letter-spacing: .08em;
  color: #fff; white-space: nowrap;
}

/* CTAボタン（Figma：377.6×75.8 / bg #121212 / 枠 #C8A96E 1.17px / 四隅32px） */
.ft-cta { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 30px); flex: 0 0 auto; }
#footer .ft-cta__btn {
  --fb-size: clamp(20px, 1.56vw, 30px);
  --fb-offset: clamp(6px, .52vw, 10px);
  display: flex; justify-content: space-between; align-items: center;
  width: clamp(210px, 15.6vw, 300px);
  height: clamp(44px, 3.13vw, 60px);
  padding: 0 clamp(16px, 2.5vw, 48px);
  background: #121212;
  border: 1.17px solid var(--gold);
  text-transform: none; overflow: visible;
}
#footer .ft-cta__btn:hover { background: rgba(200,169,110,.12); }
#footer .ft-cta__label {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(12px, .94vw, 18px); letter-spacing: .2em; color: var(--gold); white-space: nowrap;
}
#footer .ft-cta__arrow { flex-shrink: 0; width: clamp(26px, 1.98vw, 38px); height: auto; }
/* 四つ角を強調：共通.frame-btnの70%透かし＋細線だと沈むため、不透明の金＋太線に */
#footer .ft-cta__btn .frame-btn__corner { color: var(--gold); }
#footer .ft-cta__btn .frame-btn__corner svg { stroke-width: 2.6; }
#footer .ft-cta__btn:hover .frame-btn__corner { color: var(--gold-bright, #d4b87a); }

/* ── 中段：サイトマップ6列（Figma：見出しTsukuMin25・サブNoto Sans20.5／行ピッチ43） ── */
.ft-nav {
  display: flex; justify-content: space-between; gap: clamp(18px, 1.8vw, 48px);
  margin-top: clamp(24px, 2.3vw, 44px);
  flex-wrap: wrap;
}
.ft-col { min-width: 0; }
.ft-col__head {
  display: inline-block;
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: clamp(14px, 1.07vw, 20.5px); line-height: 1.35; color: #fff;
  text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.ft-col__head:hover { color: var(--gold); }
.ft-col__list { list-style: none; margin: clamp(8px, .63vw, 12px) 0 0; padding: 0; }
.ft-col__list a {
  display: inline-block;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(11px, .86vw, 16.5px); line-height: 2.1;
  color: rgba(255,255,255,.6); text-decoration: none; white-space: nowrap;   /* 見出しより薄く */
  transition: color .25s;
}
.ft-col__list a:hover { color: var(--gold); }

/* ── 下段：TEL ／ プライバシー＋コピーライト ── */
.ft-bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(24px, 3.2vw, 64px);
  margin-top: clamp(20px, 1.77vw, 34px);
}
.ft-tel { display: flex; flex-direction: column; }
.ft-tel__label {
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: clamp(13px, 1.25vw, 24px); letter-spacing: .037em; color: #fff;
}
.ft-tel__num {
  margin-top: clamp(8px, 1.25vw, 24px);
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: clamp(30px, 3.23vw, 62px); letter-spacing: .0375em; line-height: 1;
  color: #fff; text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.ft-tel__num:hover { color: var(--gold); }
.ft-tel__hours {
  margin-top: clamp(6px, .63vw, 12px);
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: clamp(14px, 1.67vw, 32px); letter-spacing: .026em; color: rgba(255,255,255,.55);
}
.ft-legal { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(6px, .52vw, 10px); }
.ft-legal__privacy {
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: clamp(12px, 1.2vw, 23px); letter-spacing: .031em; color: rgba(255,255,255,.55); text-decoration: none;
  transition: color .25s;
}
.ft-legal__privacy:hover { color: var(--gold); }
.ft-legal__copy {
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 400;
  font-size: clamp(11px, 1.15vw, 22px); letter-spacing: .032em; color: rgba(255,255,255,.5);
  white-space: nowrap;
}

/* レスポンシブ */
@media (max-width: 1100px) {
  .ft-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .ft-cta { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .ft-nav { justify-content: flex-start; gap: 24px 40px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ft-legal { align-items: flex-start; }
  .ft-legal__copy { white-space: normal; }
  .ft-flame { right: -10vw; bottom: -8vw; width: 50vw; opacity: .5; }
}
@media (max-width: 640px) {
  #footer .ft-cta__btn { width: 100%; }
  .ft-brand__wordmark { font-size: clamp(26px, 7vw, 36px); }
}
/* ═══════════════════════════════════════════
   COUNTER ANIMATION
═══════════════════════════════════════════ */
.counter { display: inline-block; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tech-cards { grid-template-columns: repeat(2,1fr); }
  .gateway-photo-card__title { font-size: clamp(18px, 2vw, 24px); }
  .contact-cards { grid-template-columns: repeat(2,1fr); }
  .trust-layout { grid-template-columns: 1fr; gap: 48px; }
  .about-message { grid-template-columns: 1fr; }
  .about-photo-placeholder { display: none; }
}
@media (max-width: 768px) {
  #global-nav { padding: 18px 24px; }
  #global-nav.scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  /* FVタイトル：モバイルは大きめvw＋左寄せ、サブは左下 */
  .fv-line { left: 7vw; }
  .fv-line--l1 { bottom: 30vw; }
  .fv-line--l2 { bottom: 20vw; }
  .fv-main-copy, .fv-line__in { font-size: 8vw; line-height: 12vw; letter-spacing: .06em; }
  .fv-sub-copy { left: 7vw; right: auto; bottom: 9vw; width: 86vw; font-size: 3.4vw; line-height: 6vw; }
  .section-inner, .section-inner-narrow { padding: 80px 6%; }
  .gateway-inner { padding: 72px 6% 64px; }
  .business-cards { grid-template-columns: 1fr; }
  .gateway-photo-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card__photo { display: none; }
  .case-plates { grid-template-columns: repeat(2,1fr); }
  .business-header { flex-direction: column; }
  .about-table th { width: 100px; }
  .timeline::before { display: none; }
  .timeline li { flex-direction: column; gap: 4px; }
  .tl-content { padding-left: 0; }
  .mvc-item { flex-direction: column; gap: 6px; }
  .mvc-key { width: auto; min-width: auto; }
  .our-code { margin: 0 -6%; padding: 56px 6%; }
  .fv-photo { width: 92vw; height: 52.2vw; opacity: 1; box-shadow: none; }
  .fv-overlay { background: radial-gradient(140% 120% at 50% 50%, transparent 30%, rgba(17,17,17,.62) 100%); }
  #footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { flex-wrap: wrap; gap: 16px; }
}

/* === company === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--sans);
  background: #f5f3ef;
  color: #1a1a1a;
  overflow-x: clip;
}
:root {
  --black:      #1a1a1a;
  --black-soft: #2a2a2e;
  --gold:       #c8a96e;
  --gold-bright:#d4b87a;
  --ecru:       #f5f3ef;
  --ecru-dim:   #ede9e2;
  --serif: "FOT-TsukuMin Pr5N", "TsukuMin", 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', sans-serif;
}

/* ── Progress bar ── */
#progress-bar {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 9999; transition: width .08s linear; pointer-events: none;
}

/* ── Nav ── */
#global-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 48px;
  background: rgba(26,26,26,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,169,110,.12);
  transition: padding .4s ease;
}
#global-nav.scrolled { padding: 16px 48px; }
.nav-logo {
  font-family: var(--serif); font-size: 11px; letter-spacing: .28em;
  color: var(--ecru); font-weight: 400; text-decoration: none;
}
.nav-logo span {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: .22em; color: var(--gold); margin-top: 2px;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-family: var(--sans); font-size: 10px; letter-spacing: .16em;
  color: rgba(245,243,239,.55); text-decoration: none;
  transition: color .25s; text-transform: uppercase;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }

/* ── Page Hero ── */
#page-hero {
  background: var(--black); padding: 160px 7% 100px;
  position: relative; overflow: hidden;
}
#page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 20% 60%, rgba(200,169,110,.05), transparent);
  pointer-events: none;
}
.hero-inner { max-width: 1100px; margin: 0 auto; }
.hero-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 24px;
}
.hero-title {
  font-family: var(--serif); font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 900; color: var(--ecru); line-height: 1.2; margin-bottom: 32px;
}
.hero-body {
  font-size: clamp(14px, 1.6vw, 16px); color: rgba(245,243,239,.6);
  line-height: 2; max-width: 560px;
}

/* ── Page Nav ── */
.page-nav {
  background: var(--ecru-dim); border-bottom: 1px solid rgba(26,26,26,.08);
  position: sticky; top: 64px; z-index: 100;
}
.page-nav__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 7%;
  display: flex; overflow-x: auto;
}
.page-nav__item {
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  color: #1A1A1A; text-decoration: none; padding: 18px 20px;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap;
}
.page-nav__item:hover, .page-nav__item.active { color: var(--black); border-bottom-color: var(--gold); }

/* ── Shared ── */
.section { padding: clamp(80px, 10vw, 140px) 7%; }
.section--light { background: var(--ecru); }
.section--dim   { background: var(--ecru-dim); }
.section--dark  { background: var(--black); color: var(--ecru); }
.section--black { background: #0A0806; color: var(--ecru); }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-num {
  font-family: var(--serif); font-size: clamp(48px, 6vw, 80px); font-weight: 900;
  color: rgba(200,169,110,.12); display: block; line-height: 1; margin-bottom: -12px;
}
.section-num--light { color: rgba(200,169,110,.18); }
.section-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px;
}
.section-title {
  font-family: var(--serif); font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700; line-height: 1.4;
}

/* ═══════════════════════════════════════════
   01: 代表メッセージ
═══════════════════════════════════════════ */
.message-layout {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 80px; align-items: start; margin-top: 64px;
}
.message-photo { position: sticky; top: 120px; }
.message-photo__img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 70% top;
  display: block; border-radius: 4px; background: #2a2a2a;
}
.message-photo__caption { margin-top: 20px; }
.message-photo__name {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--black); display: block; margin-bottom: 4px;
}
.message-photo__role { font-size: 11px; letter-spacing: .1em; color: #1A1A1A; }
.message-body { padding-top: 8px; }
.message-lead {
  font-family: var(--serif); font-size: clamp(20px, 2.5vw, 28px); font-weight: 700;
  line-height: 1.7; color: var(--black); margin-bottom: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(26,26,26,.1);
}
.message-lead em { font-style: normal; color: var(--gold); }
.message-text {
  font-size: 15px; line-height: 2.2; color: #1A1A1A; margin-bottom: 28px;
}
.message-sign { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(26,26,26,.1); }
.message-sign__role {
  font-size: 11px; letter-spacing: .12em; color: rgba(26,26,26,.4); display: block; margin-bottom: 8px;
}
.message-sign__name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--black); }

/* ═══════════════════════════════════════════
   02: 企業理念（Mission / Vision / Value）
═══════════════════════════════════════════ */

/* --- MISSION --- */
.mission-block {
  margin-top: 64px;
}
.mission-tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 28px;
}
.mission-statement {
  font-family: var(--serif); font-size: clamp(22px, 3.2vw, 38px); font-weight: 900;
  color: var(--ecru); line-height: 1.65; margin-bottom: 40px;
  border-left: 3px solid var(--gold); padding-left: 28px;
  max-width: 820px;
}
.mission-body {
  padding-left: 31px; max-width: 720px;
}
.mission-body p {
  font-size: 15px; line-height: 2.1; color: rgba(245,243,239,.65); margin-bottom: 16px;
}
.mission-body p:last-child { margin-bottom: 0; }

/* --- VISION (coming soon) --- */
.vision-block {
  margin-top: 80px; padding-top: 56px;
  border-top: 1px solid rgba(200,169,110,.12);
}
.vision-coming {
  display: flex; align-items: center; gap: 32px;
  padding: 40px 48px;
  border: 1px dashed rgba(200,169,110,.25);
  border-radius: 4px; max-width: 680px;
}
.vision-coming__label {
  font-family: var(--serif); font-size: 11px; letter-spacing: .3em;
  color: var(--gold); text-transform: uppercase; display: block; flex-shrink: 0;
}
.vision-coming__text {
  font-size: 14px; color: rgba(245,243,239,.35); line-height: 1.8;
}

/* --- VALUE --- */
.value-block {
  margin-top: 80px; padding-top: 56px;
  border-top: 1px solid rgba(200,169,110,.12);
}
.value-tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 40px;
}
.value-list {
  display: flex; flex-direction: column; gap: 2px;
}
.value-item {
  display: grid; grid-template-columns: 80px 1fr;
  background: rgba(255,255,255,.03); border: 1px solid rgba(200,169,110,.1);
  transition: background .3s;
  position: relative; overflow: hidden;
}
.value-item:hover { background: rgba(255,255,255,.06); }
.value-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--gold);
  transform: scaleY(0); transform-origin: top; transition: transform .4s ease;
}
.value-item:hover::before { transform: scaleY(1); }
.value-item__num {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 900;
  color: rgba(200,169,110,.2); padding: 40px 20px;
  border-right: 1px solid rgba(200,169,110,.1);
  flex-shrink: 0;
}
.value-item__body { padding: 40px 48px; }
.value-item__title {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 26px); font-weight: 900;
  color: var(--ecru); margin-bottom: 16px; line-height: 1.4;
}
.value-item__text {
  font-size: 14px; line-height: 2; color: rgba(245,243,239,.6);
}

@media (max-width: 768px) {
  .mission-statement { font-size: clamp(18px, 5vw, 26px); padding-left: 18px; }
  .mission-body { padding-left: 21px; }
  .value-item { grid-template-columns: 56px 1fr; }
  .value-item__body { padding: 28px 24px; }
  .vision-coming { flex-direction: column; gap: 12px; padding: 28px 24px; }
}

/* ═══════════════════════════════════════════
   03: 会社概要
═══════════════════════════════════════════ */
.profile-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start; margin-top: 64px;
}
.profile-table { width: 100%; border-collapse: collapse; }
.profile-table tr { border-bottom: 1px solid rgba(26,26,26,.08); }
.profile-table th {
  font-size: 11px; letter-spacing: .1em; color: rgba(26,26,26,.45);
  font-weight: 400; text-align: left; padding: 20px 24px 20px 0;
  white-space: nowrap; width: 120px; vertical-align: top;
}
.profile-table td { font-size: 14px; color: var(--black); line-height: 1.8; padding: 20px 0; }

/* ═══════════════════════════════════════════
   04: 沿革（物語風）
═══════════════════════════════════════════ */
.history-story {
  max-width: 840px;
  margin: 64px auto 0;
}
.history-chapter {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
  margin-bottom: 72px;
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(26,26,26,.08);
}
.history-chapter:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.history-chapter__left { padding-top: 4px; }
.history-chapter__era {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 900;
  color: var(--gold); line-height: 1; display: block; margin-bottom: 8px;
}
.history-chapter__years {
  font-size: 11px; letter-spacing: .1em; color: rgba(26,26,26,.4); display: block;
}
.history-chapter__right {}
.history-chapter__heading {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 24px); font-weight: 700;
  color: var(--black); line-height: 1.5; margin-bottom: 16px;
}
.history-chapter__body {
  font-size: 14px; line-height: 2.1; color: #1A1A1A; margin-bottom: 20px;
}
.history-chapter__milestones {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.history-chapter__tag {
  font-size: 11px; letter-spacing: .08em;
  border: 1px solid rgba(200,169,110,.35); color: rgba(200,169,110,.8);
  padding: 4px 12px; border-radius: 2px;
}

/* ═══════════════════════════════════════════
   05: 組織図（CSS Tree）
═══════════════════════════════════════════ */
.org-wrap {
  margin-top: 64px;
  overflow-x: auto;
  padding-bottom: 24px;
}

/* ── ツリーの基本構造 ── */
.org-tree,
.org-tree ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; justify-content: center;
}
.org-tree li {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 6px; position: relative;
}

/* 親ノードの下から伸びる縦線（ul の上部） */
.org-tree li > ul {
  padding-top: 20px; position: relative;
}
.org-tree li > ul::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 20px; background: rgba(26,26,26,.25);
}

/* 兄弟ノードをつなぐ横線 + 各ノードへの縦ドロップ */
.org-tree li > ul > li {
  padding-top: 20px; position: relative;
}
.org-tree li > ul > li::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(26,26,26,.25);
}
.org-tree li > ul > li:first-child::before { left: 50%; }
.org-tree li > ul > li:last-child::before  { right: 50%; }
.org-tree li > ul > li:only-child::before  { display: none; }
.org-tree li > ul > li::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 20px; background: rgba(26,26,26,.25);
}

/* ── ノードボックス共通 ── */
.ob {
  border: 1px solid rgba(26,26,26,.3);
  text-align: center; white-space: nowrap;
  font-family: var(--sans); font-size: 12px; color: var(--black);
  padding: 8px 14px; background: var(--ecru);
  line-height: 1.4; border-radius: 2px; min-width: 72px;
}

/* 最上位：株主総会 */
.ob--top {
  background: var(--black); color: var(--ecru);
  font-weight: 700; font-size: 13px; padding: 10px 24px;
  border-color: var(--black);
}
/* 取締役会・監査役 */
.ob--board {
  background: #3a3a3a; color: var(--ecru);
  font-weight: 700; font-size: 12px; padding: 8px 18px;
  border-color: #3a3a3a;
}
/* 代表取締役社長 */
.ob--president {
  background: var(--gold); color: var(--black);
  font-weight: 900; font-family: var(--serif); font-size: 13px;
  padding: 10px 28px; border-color: var(--gold);
  min-width: 160px;
}
/* 本部 */
.ob--honbu {
  background: rgba(26,26,26,.08); border-color: rgba(26,26,26,.35);
  font-weight: 700; font-size: 12px; padding: 8px 16px;
}
/* 部 */
.ob--bu {
  background: rgba(200,169,110,.12); border-color: rgba(200,169,110,.4);
  font-weight: 700; font-size: 12px; padding: 7px 12px;
}
/* 課 */
.ob--ka {
  background: var(--ecru-dim); border-color: rgba(26,26,26,.2);
  font-size: 11px; padding: 6px 10px;
}
/* 係（縦書き） */
.ob--kakari {
  background: var(--ecru); border-color: rgba(26,26,26,.18);
  font-size: 10px; padding: 8px 6px;
  writing-mode: vertical-rl; min-width: 30px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
}
/* スタッフ（直轄） */
.ob--staff {
  background: rgba(200,169,110,.08); border-color: rgba(200,169,110,.3);
  font-size: 11px; padding: 7px 12px;
}

/* ═══════════════════════════════════════════
   06: 拠点・アクセス
═══════════════════════════════════════════ */
.location-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 0; margin-top: 64px; border: 1px solid rgba(200,169,110,.15); border-radius: 4px;
  overflow: hidden;
}
.location-tabs {
  background: var(--black-soft);
  border-right: 1px solid rgba(200,169,110,.12);
}
.location-tab {
  width: 100%; padding: 24px 28px; text-align: left;
  background: none; border: none; cursor: pointer;
  border-bottom: 1px solid rgba(200,169,110,.08);
  transition: background .2s;
  position: relative;
}
.location-tab:last-child { border-bottom: none; }
.location-tab::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 3px; background: var(--gold);
  transform: scaleY(0); transition: transform .3s;
}
.location-tab.active { background: rgba(200,169,110,.1); }
.location-tab.active::after { transform: scaleY(1); }
.lt-num {
  font-family: var(--serif); font-size: 10px; letter-spacing: .2em;
  color: var(--gold); display: block; margin-bottom: 6px;
}
.lt-name {
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  color: var(--ecru); display: block; margin-bottom: 4px;
}
.lt-type { font-size: 10px; letter-spacing: .08em; color: rgba(245,243,239,.4); }

.location-main { display: flex; flex-direction: column; }
.location-map {
  display: none; flex-direction: column; height: 100%; min-height: 480px;
}
.location-map.active { display: flex; }
.location-map iframe {
  flex: 1; width: 100%; border: none; display: block; min-height: 340px;
}
.location-info {
  background: var(--ecru); padding: 24px 28px;
  border-top: 1px solid rgba(26,26,26,.08);
  display: flex; gap: 40px; flex-wrap: wrap;
}
.location-info__item { }
.li-label {
  font-size: 10px; letter-spacing: .12em; color: rgba(26,26,26,.4);
  display: block; margin-bottom: 4px; text-transform: uppercase;
}
.li-value { font-size: 13px; color: var(--black); line-height: 1.7; }

/* ═══════════════════════════════════════════
   CTA
═══════════════════════════════════════════ */
.cta-section { background: var(--black); padding: clamp(80px,10vw,120px) 7%; text-align: center; }
.cta-section__label {
  font-size: 10px; letter-spacing: .28em; color: var(--gold);
  text-transform: uppercase; display: block; margin-bottom: 24px;
}
.cta-section__title {
  font-family: var(--serif); font-size: clamp(26px,3.5vw,44px);
  font-weight: 900; color: var(--ecru); line-height: 1.4; margin-bottom: 48px;
}
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-btn {
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em;
  text-decoration: none; padding: 16px 36px; border-radius: 2px;
  transition: opacity .25s, border-color .25s, color .25s; text-transform: uppercase;
}
.cta-btn--primary { background: var(--gold); color: var(--black); }
.cta-btn--primary:hover { opacity: .85; }
.cta-btn--outline { background: transparent; color: var(--ecru); border: 1px solid rgba(245,243,239,.3); }
.cta-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Footer ── */
footer {
  background: #0A0806; padding: 48px 7%;
  border-top: 1px solid rgba(200,169,110,.1);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.footer-logo {
  font-family: var(--serif); font-size: 11px; letter-spacing: .28em;
  color: var(--ecru); text-decoration: none;
}
.footer-logo span {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: .2em; color: var(--gold); margin-top: 3px;
}
.footer-copy { font-size: 10px; letter-spacing: .08em; color: rgba(245,243,239,.3); }

/* ── Animation ── */
.anim-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.anim-up.visible { opacity: 1; transform: translateY(0); }
.anim-up-d1 { transition-delay: .1s; }
.anim-up-d2 { transition-delay: .2s; }
.anim-up-d3 { transition-delay: .3s; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .message-layout { grid-template-columns: 1fr; gap: 48px; }
  .message-photo { position: static; }
  .profile-layout { grid-template-columns: 1fr; gap: 48px; }
  .mvv-grid { grid-template-columns: 1fr; }
  .history-chapter { grid-template-columns: 100px 1fr; gap: 28px; }
  .location-layout { grid-template-columns: 1fr; }
  .location-tabs { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(200,169,110,.12); }
  .location-tab { flex-shrink: 0; border-bottom: none; border-right: 1px solid rgba(200,169,110,.08); }
  .location-tab::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; transform: scaleX(0); }
  .location-tab.active::after { transform: scaleX(1); }
}
@media (max-width: 768px) {
  #global-nav { padding: 16px 24px; }
  .nav-links { display: none; }
  #page-hero { padding: 120px 6% 72px; }
  .section { padding: 72px 6%; }
  .history-chapter { grid-template-columns: 1fr; gap: 16px; }
  .group-branches { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
}

/* === business === */

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--sans);
  background: #f5f3ef;
  color: #1a1a1a;
  overflow-x: clip;
}

:root {
  --black:      #1a1a1a;
  --black-soft: #2a2a2e;
  --gold:       #c8a96e;
  --gold-bright:#d4b87a;
  --ecru:       #f5f3ef;
  --ecru-dim:   #ede9e2;
  --serif: "FOT-TsukuMin Pr5N", "TsukuMin", 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', sans-serif;
}

/* ═══════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════ */
#progress-bar {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 9999;
  transition: width .08s linear;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   GLOBAL NAV
═══════════════════════════════════════════ */
#global-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  background: rgba(26,26,26,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,169,110,.12);
}
#global-nav.scrolled { padding: 16px 48px; }

.nav-logo {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--ecru);
  font-weight: 400;
  text-decoration: none;
}
.nav-logo span {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold);
  margin-top: 2px;
}

.nav-links {
  display: flex; gap: 32px; list-style: none;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(245,243,239,.55);
  text-decoration: none;
  transition: color .25s;
  text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

/* ═══════════════════════════════════════════
   PAGE HERO
═══════════════════════════════════════════ */
#page-hero {
  background: var(--black);
  padding: 160px 7% 100px;
  position: relative;
  overflow: hidden;
}
#page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(200,169,110,.06), transparent);
  pointer-events: none;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hero-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 900;
  color: var(--ecru);
  line-height: 1.2;
  margin-bottom: 32px;
}
.hero-body {
  font-family: var(--sans);
  font-size: clamp(14px, 1.6vw, 16px);
  color: rgba(245,243,239,.65);
  line-height: 2;
  max-width: 580px;
}

/* ═══════════════════════════════════════════
   PAGE NAV（目次）
═══════════════════════════════════════════ */
.page-nav {
  background: var(--ecru-dim);
  border-bottom: 1px solid rgba(26,26,26,.08);
  position: sticky;
  top: 64px;
  z-index: 100;
}
.page-nav__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 7%;
  display: flex;
  gap: 0;
}
.page-nav__item {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  color: #1A1A1A;
  text-decoration: none;
  padding: 18px 24px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.page-nav__item:hover,
.page-nav__item.active {
  color: var(--black);
  border-bottom-color: var(--gold);
}

/* ═══════════════════════════════════════════
   SHARED SECTION
═══════════════════════════════════════════ */
.section {
  padding: clamp(80px, 10vw, 140px) 7%;
}
.section--dark {
  background: var(--black);
  color: var(--ecru);
}
.section--mid {
  background: #0A0806;
  color: var(--ecru);
}
.section--light { background: var(--ecru); color: var(--black); }
.section--dim { background: var(--ecru-dim); color: var(--black); }

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.section-num {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 900;
  color: rgba(200,169,110,.12);
  display: block;
  line-height: 1;
  margin-bottom: -12px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
}
.section-sub {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 2;
  opacity: .7;
  max-width: 600px;
}

/* ═══════════════════════════════════════════
   SECTION 01: よくある相談例
═══════════════════════════════════════════ */
.cases-header {
  margin-bottom: 64px;
}
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
}

.case-card {
  background: #111;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.case-card:hover { background: #1D1710; }
.case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--gold);
  transition: height .4s ease;
}
.case-card:hover::before { height: 100%; }

.case-num {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--gold);
  display: block;
  margin-bottom: 20px;
}
.case-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(200,169,110,.7);
  border: 1px solid rgba(200,169,110,.3);
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.case-q {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--ecru);
  line-height: 1.5;
  margin-bottom: 20px;
}
.case-a {
  font-size: 13px;
  color: rgba(245,243,239,.6);
  line-height: 1.9;
}
.case-arrow {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold);
  margin-top: 28px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.case-card:hover .case-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════
   SECTION 02: 製品化までの流れ
═══════════════════════════════════════════ */
.flow-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .flow-intro { grid-template-columns: 1fr; gap: 40px; }
}
.flow-intro__lead {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--ecru);
}
.flow-intro__body {
  font-size: 14px;
  line-height: 2;
  color: rgba(245,243,239,.6);
  padding-top: 8px;
}

#page-business .flow-steps {
  position: relative;
}
#page-business .flow-steps::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(200,169,110,.1));
}

#page-business .flow-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 32px;
  margin-bottom: 0;
  position: relative;
}
#page-business .flow-step + .flow-step {
  margin-top: 0;
}

#page-business .flow-step__dot {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
}
#page-business .flow-step__circle {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  flex-shrink: 0;
}
#page-business .flow-step__circle--active {
  background: var(--gold);
}

#page-business .flow-step__body {
  padding: 16px 0 56px;
  border-bottom: 1px solid rgba(200,169,110,.08);
}
#page-business .flow-step:last-child .flow-step__body {
  border-bottom: none;
  padding-bottom: 0;
}

#page-business .flow-step__phase {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
#page-business .flow-step__title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--ecru);
  margin-bottom: 12px;
}
#page-business .flow-step__desc {
  font-size: 14px;
  color: rgba(245,243,239,.6);
  line-height: 1.9;
}
#page-business .flow-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
#page-business .flow-step__tag {
  font-size: 10px;
  color: rgba(200,169,110,.7);
  border: 1px solid rgba(200,169,110,.25);
  padding: 4px 10px;
  border-radius: 2px;
  letter-spacing: .08em;
}

/* ═══════════════════════════════════════════
   SECTION 03: FAQ
═══════════════════════════════════════════ */
.faq-header {
  margin-bottom: 64px;
}
.faq-list {
  max-width: 800px;
}
.faq-item {
  border-top: 1px solid rgba(26,26,26,.1);
}
.faq-item:last-child { border-bottom: 1px solid rgba(26,26,26,.1); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  text-align: left;
}
.faq-question__text {
  font-family: var(--serif);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.faq-question__q {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.faq-icon {
  width: 24px; height: 24px;
  border: 1px solid rgba(26,26,26,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s, background .3s, border-color .3s;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--black);
  border-radius: 2px;
  transition: opacity .3s, transform .3s;
}
.faq-icon { position: relative; }
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 10px; }

.faq-item.open .faq-icon {
  background: var(--gold);
  border-color: var(--gold);
  transform: rotate(45deg);
}
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background: var(--black); }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .3s;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer__inner {
  padding: 0 0 28px 36px;
  font-size: 14px;
  color: #1A1A1A;
  line-height: 2;
}

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta-section {
  background: var(--black);
  padding: clamp(80px, 10vw, 120px) 7%;
  text-align: center;
}
.cta-section__label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}
.cta-section__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 900;
  color: var(--ecru);
  line-height: 1.4;
  margin-bottom: 16px;
}
.cta-section__sub {
  font-size: 14px;
  color: rgba(245,243,239,.55);
  line-height: 2;
  margin-bottom: 48px;
}
.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 2px;
  transition: opacity .25s, background .25s;
  text-transform: uppercase;
}
.cta-btn--primary {
  background: var(--gold);
  color: var(--black);
}
.cta-btn--primary:hover { opacity: .85; }
.cta-btn--outline {
  background: transparent;
  color: var(--ecru);
  border: 1px solid rgba(245,243,239,.3);
}
.cta-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  background: #0A0806;
  padding: 48px 7%;
  border-top: 1px solid rgba(200,169,110,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-logo {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--ecru);
  text-decoration: none;
}
.footer-logo span {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-top: 3px;
}
.footer-copy {
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(245,243,239,.3);
}

/* ═══════════════════════════════════════════
   ANIMATION
═══════════════════════════════════════════ */
.anim-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.anim-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.anim-up-d1 { transition-delay: .1s; }
.anim-up-d2 { transition-delay: .2s; }
.anim-up-d3 { transition-delay: .3s; }
.anim-up-d4 { transition-delay: .4s; }
.anim-up-d5 { transition-delay: .5s; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  #global-nav { padding: 16px 24px; }
  #global-nav.scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  #page-hero { padding: 120px 6% 72px; }
  .section { padding: 72px 6%; }
  .page-nav__inner { padding: 0 6%; overflow-x: auto; }
  .cases-grid { grid-template-columns: 1fr; }
  .flow-steps::before { left: 24px; }
  .flow-step { grid-template-columns: 48px 1fr; gap: 20px; }
  .faq-answer__inner { padding-left: 0; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
}

/* === trust === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: var(--sans); background: #1a1a1a; color: #f5f3ef; overflow-x: clip; }
:root {
  --black: #1a1a1a; --black-soft: #2a2a2e;
  --gold: #c8a96e; --gold-bright: #d4b87a;
  --ecru: #f5f3ef; --ecru-dim: #ede9e2;
  --serif: "FOT-TsukuMin Pr5N", "TsukuMin", 'Noto Serif JP', serif; --sans: 'Noto Sans JP', sans-serif;
}

#progress-bar {
  position: fixed; top: 0; left: 0; width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 9999; transition: width .08s linear; pointer-events: none;
}

/* ── Nav ── */
#global-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 48px;
  background: rgba(26,26,26,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,169,110,.12);
  transition: padding .4s ease;
}
#global-nav.scrolled { padding: 16px 48px; }
.nav-logo { font-family: var(--serif); font-size: 11px; letter-spacing: .28em; color: var(--ecru); font-weight: 400; text-decoration: none; }
.nav-logo span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .22em; color: var(--gold); margin-top: 2px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { font-family: var(--sans); font-size: 10px; letter-spacing: .16em; color: rgba(245,243,239,.55); text-decoration: none; transition: color .25s; text-transform: uppercase; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }

/* ── Hero ── */
#page-hero {
  background: var(--black); padding: 160px 7% 100px; position: relative; overflow: hidden;
}
#page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 75% 50%, rgba(200,169,110,.05), transparent);
  pointer-events: none;
}
.hero-inner { max-width: 1100px; margin: 0 auto; }
.hero-label { font-family: var(--sans); font-size: 10px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 24px; }
.hero-title { font-family: var(--serif); font-size: clamp(36px,5.5vw,72px); font-weight: 900; color: var(--ecru); line-height: 1.2; margin-bottom: 32px; }
.hero-body { font-size: clamp(14px,1.6vw,16px); color: rgba(245,243,239,.6); line-height: 2; max-width: 560px; }

/* ── Page Nav ── */
.page-nav { background: #111; border-bottom: 1px solid rgba(200,169,110,.1); position: sticky; top: 64px; z-index: 100; }
.page-nav__inner { max-width: 1100px; margin: 0 auto; padding: 0 7%; display: flex; overflow-x: auto; }
.page-nav__item { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; color: rgba(245,243,239,.4); text-decoration: none; padding: 18px 20px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.page-nav__item:hover, .page-nav__item.active { color: var(--ecru); border-bottom-color: var(--gold); }

/* ── Shared ── */
.section { padding: clamp(80px,10vw,140px) 7%; }
.section--dark  { background: var(--black); }
.section--black { background: #0A0806; }
.section--mid   { background: #111; }
.section--light { background: var(--ecru); color: var(--black); }
.section--dim   { background: var(--ecru-dim); color: var(--black); }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-num { font-family: var(--serif); font-size: clamp(48px,6vw,80px); font-weight: 900; color: rgba(200,169,110,.1); display: block; line-height: 1; margin-bottom: -12px; }
.section-label { font-family: var(--sans); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; }
.section-title { font-family: var(--serif); font-size: clamp(26px,3.5vw,44px); font-weight: 700; line-height: 1.4; }

/* ═══════════════════════════════════
   01: 数字で見る信頼
═══════════════════════════════════ */
.numbers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 64px;
}
.np-sub { font-size: 10px; color: rgba(200,169,110,.6); letter-spacing: .1em; display: block; margin-top: 8px; }

/* ═══════════════════════════════════
   02: 選ばれ続ける理由
═══════════════════════════════════ */
.reasons-intro { max-width: 680px; margin-top: 16px; margin-bottom: 64px; }
.reasons-intro p { font-size: 15px; line-height: 2.1; color: rgba(245,243,239,.65); margin-top: 16px; }

.reasons-list { display: flex; flex-direction: column; gap: 2px; }
.reason-item {
  display: grid; grid-template-columns: 72px 1fr;
  background: rgba(255,255,255,.02); border: 1px solid rgba(200,169,110,.1);
  overflow: hidden; transition: background .3s; position: relative;
}
.reason-item:hover { background: rgba(255,255,255,.05); }
.reason-item::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .4s;
}
.reason-item:hover::after { transform: scaleY(1); }
.reason-item__num {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(28px,3.5vw,40px); font-weight: 900;
  color: rgba(200,169,110,.18); padding: 40px 16px;
  border-right: 1px solid rgba(200,169,110,.08); flex-shrink: 0;
}
.reason-item__body { padding: 40px 48px; }
.reason-item__title { font-family: var(--serif); font-size: clamp(18px,2.2vw,26px); font-weight: 700; color: var(--ecru); margin-bottom: 16px; }
.reason-item__text { font-size: 14px; line-height: 2; color: rgba(245,243,239,.6); }
.quote-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(200,169,110,.12);
  padding: 40px 36px; border-radius: 4px; position: relative;
}
.quote-card::before {
  content: '\201C'; font-family: var(--serif); font-size: 80px; font-weight: 900;
  color: rgba(200,169,110,.15); position: absolute; top: 12px; left: 24px; line-height: 1;
}
.quote-text { font-size: 14px; line-height: 2; color: rgba(245,243,239,.7); margin-bottom: 28px; padding-top: 32px; }
.quote-source { font-size: 11px; letter-spacing: .1em; color: rgba(200,169,110,.7); border-top: 1px solid rgba(200,169,110,.12); padding-top: 20px; }
.quote-source span { display: block; font-size: 10px; color: rgba(245,243,239,.35); margin-top: 4px; }

/* ═══════════════════════════════════
   04: 認証・受賞
═══════════════════════════════════ */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin-top: 64px; }
.cert-card {
  border: 1px solid rgba(26,26,26,.15); background: var(--ecru);
  padding: 36px 28px; text-align: center; border-radius: 4px; transition: box-shadow .3s;
  position: relative; overflow: hidden;
}
.cert-card:hover { box-shadow: 0 8px 32px rgba(200,169,110,.15); }
.cert-card__mark {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-family: var(--serif); font-size: 18px; font-weight: 900; color: var(--gold);
}
.cert-card__name { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 8px; line-height: 1.5; }
.cert-card__year { font-size: 11px; letter-spacing: .08em; color: rgba(26,26,26,.45); }
.cert-card__type { display: inline-block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; margin-bottom: 16px; }
.cert-card__type--cert { background: rgba(200,169,110,.12); color: var(--gold); }
.cert-card__type--award { background: rgba(26,26,26,.07); color: #1A1A1A; }

/* ═══════════════════════════════════
   05: CSR
═══════════════════════════════════ */
.csr-intro { max-width: 680px; margin-top: 16px; margin-bottom: 64px; }
.csr-intro p { font-size: 15px; line-height: 2.1; color: rgba(245,243,239,.65); margin-top: 16px; }
.csr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.csr-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(200,169,110,.1);
  border-radius: 4px; overflow: hidden; transition: background .3s;
}
.csr-card:hover { background: rgba(255,255,255,.06); }
.csr-card__header {
  padding: 28px 28px 20px; border-bottom: 1px solid rgba(200,169,110,.1);
  display: flex; align-items: center; gap: 16px;
}
.csr-card__icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(200,169,110,.3); display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.csr-card__category { font-family: var(--sans); font-size: 10px; letter-spacing: .16em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 4px; }
.csr-card__htitle { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ecru); }
.csr-card__body { padding: 24px 28px 28px; }
.csr-card__text { font-size: 13px; line-height: 2; color: rgba(245,243,239,.6); }
.csr-card__list { list-style: none; margin-top: 16px; }
.csr-card__list li { font-size: 12px; color: rgba(245,243,239,.5); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; align-items: flex-start; gap: 8px; }
.csr-card__list li::before { content: '—'; color: var(--gold); flex-shrink: 0; font-size: 10px; margin-top: 2px; }

/* ── CTA ── */
.cta-section { background: var(--black); padding: clamp(80px,10vw,120px) 7%; text-align: center; border-top: 1px solid rgba(200,169,110,.1); }
.cta-section__label { font-size: 10px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 24px; }
.cta-section__title { font-family: var(--serif); font-size: clamp(26px,3.5vw,44px); font-weight: 900; color: var(--ecru); line-height: 1.4; margin-bottom: 48px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-btn { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-decoration: none; padding: 16px 36px; border-radius: 2px; transition: opacity .25s, border-color .25s, color .25s; text-transform: uppercase; }
.cta-btn--primary { background: var(--gold); color: var(--black); }
.cta-btn--primary:hover { opacity: .85; }
.cta-btn--outline { background: transparent; color: var(--ecru); border: 1px solid rgba(245,243,239,.3); }
.cta-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Footer ── */
footer { background: #0A0806; padding: 48px 7%; border-top: 1px solid rgba(200,169,110,.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-logo { font-family: var(--serif); font-size: 11px; letter-spacing: .28em; color: var(--ecru); text-decoration: none; }
.footer-logo span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .2em; color: var(--gold); margin-top: 3px; }
.footer-copy { font-size: 10px; letter-spacing: .08em; color: rgba(245,243,239,.3); }

/* ── Animation ── */
.anim-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.anim-up.visible { opacity: 1; transform: translateY(0); }
.anim-up-d1 { transition-delay: .1s; } .anim-up-d2 { transition-delay: .2s; } .anim-up-d3 { transition-delay: .3s; }

/* ── Counter ── */
.counter-wrap { display: block; }

@media (max-width: 900px) { .numbers-grid { grid-template-columns: repeat(2,1fr); } .csr-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  #global-nav { padding: 16px 24px; } .nav-links { display: none; }
  #page-hero { padding: 120px 6% 72px; } .section { padding: 72px 6%; }
  .page-nav__inner { padding: 0 6%; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .reason-item { grid-template-columns: 52px 1fr; }
  .reason-item__body { padding: 28px 20px; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
}

/* === works === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: var(--sans); background: #1a1a1a; color: #f5f3ef; overflow-x: clip; }
:root {
  --black: #1a1a1a; --black-soft: #2a2a2e;
  --gold: #c8a96e; --gold-bright: #d4b87a;
  --ecru: #f5f3ef; --ecru-dim: #ede9e2;
  --serif: "FOT-TsukuMin Pr5N", "TsukuMin", 'Noto Serif JP', serif; --sans: 'Noto Sans JP', sans-serif;
}

#progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg,var(--gold),var(--gold-bright)); z-index: 9999; transition: width .08s linear; pointer-events: none; }

/* ── Nav ── */
#global-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; background: rgba(26,26,26,.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(200,169,110,.12); transition: padding .4s ease; }
#global-nav.scrolled { padding: 16px 48px; }
.nav-logo { font-family: var(--serif); font-size: 11px; letter-spacing: .28em; color: var(--ecru); font-weight: 400; text-decoration: none; }
.nav-logo span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .22em; color: var(--gold); margin-top: 2px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { font-family: var(--sans); font-size: 10px; letter-spacing: .16em; color: rgba(245,243,239,.55); text-decoration: none; transition: color .25s; text-transform: uppercase; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }

/* ── Page Nav ── */
#page-nav { position: sticky; top: 65px; z-index: 400; background: rgba(26,26,26,.97); border-bottom: 1px solid rgba(200,169,110,.1); }
.page-nav__inner { max-width: 1100px; margin: 0 auto; padding: 0 7%; display: flex; gap: 0; overflow-x: auto; }
.page-nav__item { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; color: rgba(245,243,239,.45); text-decoration: none; text-transform: uppercase; padding: 16px 24px; white-space: nowrap; transition: color .25s; border-bottom: 2px solid transparent; }
.page-nav__item:hover { color: var(--ecru); }
.page-nav__item.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Hero ── */
#page-hero { background: var(--black); padding: 160px 7% 100px; position: relative; overflow: hidden; }
#page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 75% 40%, rgba(200,169,110,.06), transparent); pointer-events: none; }
.hero-inner { max-width: 1100px; margin: 0 auto; }
.hero-label { font-family: var(--sans); font-size: 10px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 24px; }
.hero-title { font-family: var(--serif); font-size: clamp(36px,5.5vw,72px); font-weight: 900; color: var(--ecru); line-height: 1.2; margin-bottom: 32px; }
.hero-body { font-size: clamp(14px,1.6vw,16px); color: rgba(245,243,239,.6); line-height: 2; max-width: 560px; }

/* ── Shared ── */
.section { padding: clamp(80px,10vw,140px) 7%; }
.section--dark { background: var(--black); }
.section--mid  { background: #111; }
.section--light { background: var(--ecru); color: var(--black); }
.section--dim   { background: var(--ecru-dim); color: var(--black); }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-num { font-family: var(--serif); font-size: clamp(48px,6vw,80px); font-weight: 900; color: rgba(200,169,110,.1); display: block; line-height: 1; margin-bottom: -12px; }
.section-label { font-family: var(--sans); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; }
.section-title { font-family: var(--serif); font-size: clamp(26px,3.5vw,44px); font-weight: 700; line-height: 1.4; }
.section-lead { font-size: 15px; line-height: 2; color: rgba(245,243,239,.6); margin-top: 16px; max-width: 680px; }
.section-lead--dark { color: #1A1A1A; }

/* ══════════════════════════════════════
   01: 宇宙・衛星プロジェクト
══════════════════════════════════════ */
.space-hero {
  margin-top: 64px; position: relative;
  background: linear-gradient(135deg, #0a0a12 0%, #12121e 50%, #1a1a2a 100%);
  border: 1px solid rgba(200,169,110,.15); border-radius: 4px; overflow: hidden;
  padding: 0;
}
.space-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 85% 50%, rgba(200,169,110,.06) 0%, transparent 70%),
    radial-gradient(circle 3px at 20% 20%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(circle 2px at 70% 15%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(circle 1px at 40% 70%, rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(circle 2px at 55% 85%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(circle 1px at 90% 60%, rgba(255,255,255,.3) 0%, transparent 100%);
  pointer-events: none;
}
.space-hero__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; z-index: 1;
}
.space-hero__content { padding: 64px 56px 64px 56px; }
.space-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid rgba(200,169,110,.4); color: var(--gold);
  padding: 6px 16px; border-radius: 2px; margin-bottom: 32px;
}
.space-hero__badge::before { content: '★'; font-size: 8px; }
.space-hero__title { font-family: var(--serif); font-size: clamp(22px,2.8vw,34px); font-weight: 900; color: var(--ecru); line-height: 1.5; margin-bottom: 24px; }
.space-hero__text { font-size: 14px; line-height: 2.1; color: rgba(245,243,239,.65); margin-bottom: 40px; }
.space-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid rgba(200,169,110,.12); background: rgba(200,169,110,.12); }
.space-stat { background: rgba(10,10,18,.8); padding: 24px 20px; text-align: center; }
.space-stat__num { font-family: var(--serif); font-size: 28px; font-weight: 900; color: var(--gold); display: block; line-height: 1; }
.space-stat__label { font-size: 10px; letter-spacing: .1em; color: rgba(245,243,239,.4); margin-top: 8px; display: block; }
.space-hero__visual {
  background: linear-gradient(135deg, rgba(200,169,110,.04), rgba(200,169,110,.01));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; min-height: 400px;
  border-left: 1px solid rgba(200,169,110,.1);
}
.space-icon { position: relative; z-index: 1; text-align: center; }
.space-icon__main { font-size: 80px; line-height: 1; display: block; filter: drop-shadow(0 0 24px rgba(200,169,110,.3)); }
.space-icon__orbit {
  width: 180px; height: 180px; border: 1px solid rgba(200,169,110,.15);
  border-radius: 50%; margin: 20px auto; position: relative; animation: orbit-spin 12s linear infinite;
}
.space-icon__orbit::after {
  content: '⬟'; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--gold);
}
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.space-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.space-tag {
  font-size: 10px; letter-spacing: .1em; padding: 5px 14px; border-radius: 2px;
  border: 1px solid rgba(200,169,110,.2); color: rgba(245,243,239,.5);
}

.space-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.space-detail-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(200,169,110,.1); border-radius: 4px; padding: 32px 28px;
  position: relative; transition: background .3s;
}
.space-detail-card:hover { background: rgba(255,255,255,.05); }
.space-detail-card__num { font-family: var(--serif); font-size: 11px; letter-spacing: .14em; color: var(--gold); margin-bottom: 20px; display: block; }
.space-detail-card__title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ecru); margin-bottom: 16px; line-height: 1.5; }
.space-detail-card__text { font-size: 13px; line-height: 2; color: rgba(245,243,239,.55); }

.industry-panel { display: none; }
.industry-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 48px; align-items: start; }
.industry-panel__photo {
  aspect-ratio: 4/3; background: #d8d4ce; border-radius: 2px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.industry-panel__photo-ph { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(26,26,26,.25); text-transform: uppercase; }
.industry-panel__content {}
.industry-panel__tag { display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(200,169,110,.6); color: #c8a96e; padding: 4px 12px; border-radius: 2px; margin-bottom: 20px; }
.industry-panel__title { font-family: var(--serif); font-size: clamp(20px,2.5vw,28px); font-weight: 700; color: var(--black); line-height: 1.5; margin-bottom: 20px; }
.industry-panel__text { font-size: 14px; line-height: 2.1; color: #1A1A1A; margin-bottom: 32px; }
.industry-panel__specs { border-top: 1px solid rgba(26,26,26,.1); padding-top: 24px; }
.industry-panel__spec { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(26,26,26,.07); }
.industry-panel__spec-key { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,26,26,.4); width: 120px; flex-shrink: 0; }
.industry-panel__spec-val { font-size: 13px; color: var(--black); line-height: 1.6; }

/* ══════════════════════════════════════
   03: オーダーメイド実績
══════════════════════════════════════ */
.custom-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 64px; background: rgba(200,169,110,.06); }
.custom-card {
  background: rgba(255,255,255,.025); padding: 40px 36px;
  border: 1px solid rgba(200,169,110,.08); transition: background .3s;
  position: relative; overflow: hidden;
}
.custom-card:hover { background: rgba(255,255,255,.06); }
.custom-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent); opacity: 0; transition: opacity .3s;
}
.custom-card:hover::before { opacity: 1; }
.custom-card__num { font-family: var(--serif); font-size: 10px; letter-spacing: .18em; color: rgba(200,169,110,.5); display: block; margin-bottom: 20px; }
.custom-card__title { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ecru); line-height: 1.6; margin-bottom: 16px; }
.custom-card__text { font-size: 13px; line-height: 2; color: rgba(245,243,239,.5); margin-bottom: 28px; }
.custom-card__meta { display: flex; flex-direction: column; gap: 8px; }
.custom-card__meta-item { display: flex; align-items: center; gap: 10px; }
.custom-card__meta-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(200,169,110,.6); width: 56px; flex-shrink: 0; }
.custom-card__meta-val { font-size: 12px; color: rgba(245,243,239,.6); }

.custom-highlight {
  margin-top: 2px; background: rgba(200,169,110,.04);
  border: 1px solid rgba(200,169,110,.2); padding: 48px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center;
}
.custom-highlight__label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px; }
.custom-highlight__num { font-family: var(--serif); font-size: clamp(56px,7vw,96px); font-weight: 900; color: var(--gold); line-height: 1; }
.custom-highlight__unit { font-family: var(--serif); font-size: 20px; font-weight: 700; color: rgba(200,169,110,.6); }
.custom-highlight__caption { font-size: 13px; color: rgba(245,243,239,.45); margin-top: 12px; line-height: 1.8; }
.custom-highlight__text { font-family: var(--serif); font-size: clamp(18px,2.2vw,26px); font-weight: 700; color: var(--ecru); line-height: 1.7; }
.custom-highlight__sub { font-size: 14px; line-height: 2; color: rgba(245,243,239,.55); margin-top: 16px; }

/* ══════════════════════════════════════
   04: ご依頼から納品までの流れ（横軸）
══════════════════════════════════════ */
.flow-track { position: relative; margin-top: 72px; padding-bottom: 16px; overflow-x: auto; }
#page-works .flow-steps { display: flex; gap: 0; position: relative; min-width: 900px; }

/* 横ライン */
#page-works .flow-steps::before {
  content: ''; position: absolute;
  top: 44px; left: 44px; right: 44px; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(200,169,110,.25) 100%);
  z-index: 0;
}

#page-works .flow-step { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
#page-works .flow-step__dot {
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(200,169,110,.25); background: var(--ecru-dim);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: border-color .3s, background .3s; flex-shrink: 0;
}
#page-works .flow-step:hover .flow-step__dot { border-color: var(--gold); background: var(--ecru); }
#page-works .flow-step__dot-num { font-family: var(--serif); font-size: 10px; letter-spacing: .12em; color: rgba(26,26,26,.4); }
#page-works .flow-step__dot-icon { font-size: 22px; margin-top: 2px; }

#page-works .flow-step__body { padding: 24px 8px 0; text-align: center; }
#page-works .flow-step__title { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 8px; }
#page-works .flow-step__text { font-size: 11px; line-height: 1.8; color: #1A1A1A; }
#page-works .flow-step__days {
  display: inline-block; font-size: 9px; letter-spacing: .1em;
  border: 1px solid rgba(200,169,110,.5); color: #c8a96e;
  padding: 3px 10px; border-radius: 2px; margin-bottom: 8px;
}

.flow-note { margin-top: 40px; text-align: center; }
.flow-note p { font-size: 12px; color: rgba(26,26,26,.4); line-height: 1.8; }

/* ── CTA ── */
.cta-section { background: var(--black); padding: clamp(80px,10vw,120px) 7%; text-align: center; border-top: 1px solid rgba(200,169,110,.1); }
.cta-section__label { font-size: 10px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 24px; }
.cta-section__title { font-family: var(--serif); font-size: clamp(26px,3.5vw,44px); font-weight: 900; color: var(--ecru); line-height: 1.4; margin-bottom: 16px; }
.cta-section__sub { font-size: 14px; color: rgba(245,243,239,.5); line-height: 2; margin-bottom: 48px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-btn { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-decoration: none; padding: 16px 36px; border-radius: 2px; transition: opacity .25s, border-color .25s, color .25s; text-transform: uppercase; }
.cta-btn--primary { background: var(--gold); color: var(--black); }
.cta-btn--primary:hover { opacity: .85; }
.cta-btn--outline { background: transparent; color: var(--ecru); border: 1px solid rgba(245,243,239,.3); }
.cta-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Footer ── */
footer { background: #0A0806; padding: 48px 7%; border-top: 1px solid rgba(200,169,110,.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-logo { font-family: var(--serif); font-size: 11px; letter-spacing: .28em; color: var(--ecru); text-decoration: none; }
.footer-logo span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .2em; color: var(--gold); margin-top: 3px; }
.footer-copy { font-size: 10px; letter-spacing: .08em; color: rgba(245,243,239,.3); }

/* ── Animation ── */
.anim-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.anim-up.visible { opacity: 1; transform: translateY(0); }
.anim-up-d1 { transition-delay: .1s; } .anim-up-d2 { transition-delay: .2s; } .anim-up-d3 { transition-delay: .3s; }

@media (max-width: 960px) {
  .space-hero__inner { grid-template-columns: 1fr; }
  .space-hero__visual { display: none; }
  .space-detail-grid { grid-template-columns: 1fr 1fr; }
  .industry-panel.active { grid-template-columns: 1fr; }
  .custom-grid { grid-template-columns: 1fr 1fr; }
  .custom-highlight { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) {
  #global-nav { padding: 16px 24px; } .nav-links { display: none; }
  #page-hero { padding: 120px 6% 72px; } .section { padding: 72px 6%; }
  .space-detail-grid { grid-template-columns: 1fr; }
  .custom-grid { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
}

/* === contact === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--sans);
  background: #f5f3ef;
  color: #1a1a1a;
  overflow-x: clip;
}
:root {
  --black:      #1a1a1a;
  --black-soft: #2a2a2e;
  --gold:       #c8a96e;
  --gold-bright:#d4b87a;
  --ecru:       #f5f3ef;
  --ecru-dim:   #ede9e2;
  --serif: "FOT-TsukuMin Pr5N", "TsukuMin", 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', sans-serif;
}

/* ── Progress bar ── */
#progress-bar {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  z-index: 9999; transition: width .08s linear; pointer-events: none;
}

/* ── Nav ── */
#global-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 48px;
  background: rgba(26,26,26,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,169,110,.12);
  transition: padding .4s ease;
}
#global-nav.scrolled { padding: 16px 48px; }
.nav-logo {
  font-family: var(--serif); font-size: 11px; letter-spacing: .28em;
  color: var(--ecru); font-weight: 400; text-decoration: none;
}
.nav-logo span {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: .22em; color: var(--gold); margin-top: 2px;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-family: var(--sans); font-size: 10px; letter-spacing: .16em;
  color: rgba(245,243,239,.55); text-decoration: none;
  transition: color .25s; text-transform: uppercase;
}
.nav-links a:hover { color: var(--gold); }
.nav-contact {
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--black);
  background: var(--gold); padding: 10px 24px;
  text-decoration: none; white-space: nowrap;
  pointer-events: none;
}

/* ── Page Hero ── */
#page-hero {
  background: var(--black); padding: 160px 7% 100px;
  position: relative; overflow: hidden;
}
#page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 60%, rgba(200,169,110,.07), transparent);
  pointer-events: none;
}
.hero-inner { max-width: 1100px; margin: 0 auto; }
.hero-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 24px;
}
.hero-title {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 64px);
  font-weight: 900; color: var(--ecru); line-height: 1.3; margin-bottom: 28px;
  letter-spacing: .03em;
}
.hero-body {
  font-size: clamp(14px, 1.6vw, 16px); color: rgba(245,243,239,.6);
  line-height: 2; max-width: 560px;
}

/* ── Page Nav ── */
.page-nav {
  background: var(--ecru-dim); border-bottom: 1px solid rgba(26,26,26,.08);
  position: sticky; top: 64px; z-index: 100;
}
.page-nav__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 7%;
  display: flex; overflow-x: auto;
}
.page-nav__item {
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  color: #1A1A1A; text-decoration: none; padding: 18px 20px;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap;
}
.page-nav__item:hover, .page-nav__item.active { color: var(--black); border-bottom-color: var(--gold); }

/* ── Shared section ── */
.section { padding: clamp(80px, 10vw, 120px) 7%; }
.section--light { background: var(--ecru); }
.section--dim   { background: var(--ecru-dim); }
.section--dark  { background: var(--black); color: var(--ecru); }
.section-inner  { max-width: 1100px; margin: 0 auto; }

.section-num {
  font-family: var(--serif); font-size: clamp(48px, 6vw, 80px); font-weight: 900;
  color: rgba(200,169,110,.12); display: block; line-height: 1; margin-bottom: -12px;
}
.section-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px;
}
.section-title {
  font-family: var(--serif); font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700; line-height: 1.4; margin-bottom: 16px;
}
.section-sub {
  font-size: clamp(13px, 1.5vw, 15px); line-height: 2; opacity: .65; max-width: 560px;
}

/* ── Animation ── */
.anim-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.anim-up.visible { opacity: 1; transform: translateY(0); }
.anim-up-d1 { transition-delay: .1s; }
.anim-up-d2 { transition-delay: .2s; }

/* ════════════════════════════════════
   01: 問い合わせ種別カード
════════════════════════════════════ */
.contact-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 64px;
}
.contact-type {
  background: var(--black);
  padding: 52px 48px;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background .3s;
}
.contact-type:hover { background: #222228; }
.contact-type::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s ease;
}
.contact-type:hover::before { transform: scaleX(1); }
.contact-type__num {
  font-family: var(--serif); font-size: 10px; letter-spacing: .22em;
  color: rgba(200,169,110,.4); display: block; margin-bottom: 20px;
}
.contact-type__icon {
  font-size: 28px; display: block; margin-bottom: 24px;
}
.contact-type__title {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700; color: var(--ecru); line-height: 1.4;
  margin-bottom: 14px; letter-spacing: .03em;
}
.contact-type__desc {
  font-family: var(--sans); font-size: 13px;
  color: rgba(245,243,239,.5); line-height: 1.9;
  margin-bottom: 24px;
}
.contact-type__examples {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px;
}
.contact-type__tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: .08em;
  color: rgba(200,169,110,.6); border: 1px solid rgba(200,169,110,.2);
  padding: 4px 10px; border-radius: 2px;
}
.contact-type__link {
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  color: var(--gold); display: flex; align-items: center; gap: 8px;
  text-transform: uppercase;
}
.contact-type__link::after {
  content: ''; display: block; width: 24px; height: 1px;
  background: var(--gold); transition: width .3s;
}
.contact-type:hover .contact-type__link::after { width: 36px; }

/* ════════════════════════════════════
   02: お問い合わせフォーム
════════════════════════════════════ */
.form-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: start;
  margin-top: 64px;
}
.form-group { margin-bottom: 32px; }
.form-label {
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
  color: #1A1A1A; display: block; margin-bottom: 10px;
  text-transform: uppercase;
}
.form-label span { color: var(--gold); margin-left: 4px; font-size: 10px; }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--sans); font-size: 14px;
  color: var(--black);
  background: #fff;
  border: 1px solid rgba(26,26,26,.15);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,169,110,.12);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(26,26,26,.3); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.form-textarea { min-height: 180px; resize: vertical; line-height: 1.8; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-check-group { display: flex; flex-direction: column; gap: 12px; }
.form-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--gold);
  cursor: pointer; flex-shrink: 0; margin-top: 1px;
}
.form-check__label { font-family: var(--sans); font-size: 13px; color: #1A1A1A; line-height: 1.6; }
.form-privacy {
  font-family: var(--sans); font-size: 12px;
  color: #1A1A1A; line-height: 1.8;
  padding: 20px; background: var(--ecru-dim);
  border: 1px solid rgba(26,26,26,.08);
  border-radius: 2px; margin-bottom: 32px;
}
.form-privacy a { color: var(--gold); text-decoration: underline; }
.form-submit { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.btn-submit {
  font-family: var(--sans); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--black);
  background: var(--gold); border: none;
  padding: 18px 52px; cursor: pointer;
  transition: opacity .25s, transform .2s;
}
.btn-submit:hover { opacity: .85; transform: translateX(2px); }
.form-note { font-family: var(--sans); font-size: 11px; color: rgba(26,26,26,.4); line-height: 1.7; }

/* サイドパネル */
.sidebar-block { padding: 36px 32px; margin-bottom: 2px; }
.sidebar-block--dark { background: var(--black); }
.sidebar-block--light { background: var(--ecru-dim); border: 1px solid rgba(26,26,26,.08); }
.sidebar-block__label {
  font-family: var(--sans); font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 20px;
}
.sidebar-block__title {
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  color: var(--ecru); margin-bottom: 10px; line-height: 1.5;
}
.sidebar-block--light .sidebar-block__title { color: var(--black); }
.sidebar-info { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.si-label {
  font-family: var(--sans); font-size: 9px; letter-spacing: .2em;
  color: rgba(245,243,239,.35); text-transform: uppercase; display: block; margin-bottom: 4px;
}
.sidebar-block--light .si-label { color: rgba(26,26,26,.35); }
.si-value { font-family: var(--sans); font-size: 13px; color: var(--ecru); line-height: 1.7; }
.sidebar-block--light .si-value { color: var(--black); }
.sidebar-divider { height: 1px; background: rgba(200,169,110,.12); margin: 20px 0; }

/* ════════════════════════════════════
   03: FAQ
════════════════════════════════════ */
.faq-list { max-width: 800px; margin-top: 64px; }
.faq-item { border-top: 1px solid rgba(26,26,26,.1); }
.faq-item:last-child { border-bottom: 1px solid rgba(26,26,26,.1); }
.faq-question {
  width: 100%; background: none; border: none;
  padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  cursor: pointer; text-align: left;
}
.faq-q-wrap { display: flex; align-items: flex-start; gap: 16px; }
.faq-q-letter {
  font-family: var(--serif); font-size: 20px; font-weight: 900;
  color: var(--gold); line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.faq-q-text {
  font-family: var(--serif); font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700; color: var(--black); line-height: 1.6;
}
.faq-icon {
  width: 24px; height: 24px; border: 1px solid rgba(26,26,26,.2);
  border-radius: 50%; position: relative; flex-shrink: 0;
  transition: transform .3s, background .3s, border-color .3s;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--black); border-radius: 2px;
  transition: opacity .3s;
}
.faq-icon::before { width: 10px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-icon::after  { width: 1.5px; height: 10px; transform: translate(-50%,-50%); }
.faq-item.open .faq-icon { background: var(--gold); border-color: var(--gold); transform: rotate(45deg); }
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background: var(--black); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer__inner {
  padding: 0 0 28px 36px;
  font-family: var(--sans); font-size: 14px;
  color: #1A1A1A; line-height: 2;
}

/* ════════════════════════════════════
   CTA
════════════════════════════════════ */
.cta-section { background: var(--black); padding: clamp(80px,10vw,120px) 7%; text-align: center; }
.cta-section__label {
  font-size: 10px; letter-spacing: .28em; color: var(--gold);
  text-transform: uppercase; display: block; margin-bottom: 24px;
}
.cta-section__title {
  font-family: var(--serif); font-size: clamp(26px,3.5vw,44px);
  font-weight: 900; color: var(--ecru); line-height: 1.4; margin-bottom: 48px;
}
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-btn {
  font-family: var(--sans); font-size: 12px; letter-spacing: .14em;
  text-decoration: none; padding: 16px 36px; border-radius: 2px;
  transition: opacity .25s; text-transform: uppercase;
}
.cta-btn--primary { background: var(--gold); color: var(--black); }
.cta-btn--primary:hover { opacity: .85; }
.cta-btn--outline { background: transparent; color: var(--ecru); border: 1px solid rgba(245,243,239,.3); }
.cta-btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Footer ── */
footer {
  background: #0A0806; padding: 48px 7%;
  border-top: 1px solid rgba(200,169,110,.1);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.footer-logo {
  font-family: var(--serif); font-size: 11px; letter-spacing: .28em;
  color: var(--ecru); text-decoration: none;
}
.footer-logo span {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: .2em; color: var(--gold); margin-top: 3px;
}
.footer-copy { font-size: 10px; letter-spacing: .08em; color: rgba(245,243,239,.3); }

/* ── Responsive ── */
@media (max-width: 960px) {
  .form-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-types { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #global-nav { padding: 18px 24px; }
  #global-nav.scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  #page-hero { padding: 120px 6% 72px; }
  .section { padding: 72px 6%; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .contact-type { padding: 40px 32px; }
  footer { flex-direction: column; gap: 16px; }
}

/* ── サブページ FV タイトル ── */
.subpage-fv {
  position: relative;
  background: var(--black);
  padding: 140px 48px 80px;
  overflow: hidden;
}
.subpage-fv::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(200,169,110,.07) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(200,169,110,.04) 59px, rgba(200,169,110,.04) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(200,169,110,.04) 59px, rgba(200,169,110,.04) 60px);
  pointer-events: none;
}
.subpage-fv::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(200,169,110,.15) 50%, transparent);
}
.subpage-fv__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.subpage-fv__en {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.subpage-fv__title {
  font-family: var(--serif);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 900;
  color: var(--ecru);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.subpage-fv__deco {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,169,110,.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .subpage-fv { padding: 120px 24px 60px; }
  .subpage-fv__deco { display: none; }
}

/* ═══════════════════════════════════════════
   TRUST：3つの信頼（tx-*／既存クラスと非衝突）
═══════════════════════════════════════════ */
.trustx { background: var(--ecru); color: var(--black); padding: clamp(90px,12vw,180px) 0; position: relative; overflow: clip; }
/* 背景装飾（Mask group / trust_bg）：セクション左上 x0,y0 に 855×963。
   トラック（absolute）の下端をレイアウト末尾（＝セクション下パディングの手前）に合わせ、
   中の100vhスティッキー箱で追従させる。→ 解除タイミングが .tx-left（見出し）と一致し、
   最下部では「鯖江精機の3つの信頼」と一緒に上へ抜けていく。*/
.tx-bg { position: absolute; left: 0; top: 0; bottom: clamp(90px,12vw,180px); width: 855px;
  z-index: 0; pointer-events: none; }
.tx-bg__img { position: sticky; top: 0; display: block; height: 100vh; }
.tx-bg__img::before { content: ""; position: absolute; left: 0; top: 0; width: 855px; height: 963px;
  background: url(../images/trust_bg.jpg) no-repeat left top; background-size: 855px 963px; }
.trustx__inner { position: relative; z-index: 1; max-width: none; margin: 0 auto; padding: 0 273px; }

.tx-head { position: relative; margin-bottom: clamp(120px,20vw,260px); container-type: inline-size; }
/* 松尾FB：見出し「3つの信頼」だけあとからフェード（l1/l2→少し遅れてl3） */
.tx-head .tx-l3 { opacity: 0; transform: translateY(26px);
  transition: opacity 1.3s cubic-bezier(.22,.61,.21,1) .65s, transform 1.3s cubic-bezier(.22,.61,.21,1) .65s; }
.tx-head.show .tx-l3 { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tx-head .tx-l3 { opacity: 1; transform: none; transition: none; } }
/* 松尾FB：左の見出し→右の内容の順は保ちつつ、待たせない程度の小さな遅延（旧.55sは遅すぎ） */
.tx-blocks .tx-block:first-child { transition-delay: .18s; }
.tx-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: .34em; color: var(--gold); font-weight: 700; display: block; margin-bottom: 1.4em; }
/* 見出し：Figma 72:4843 準拠（FOT-TsukuMin Pr5N / 無い環境は Noto Serif JP へフォールバック）
   左カラム幅にコンテナクエリで追従。広い画面ではFigma実測px（45/83px）に到達し、
   狭い画面ではカラムに収まるよう縮小（折り返さない）。*/
.tx-title { font-family: var(--serif); color: var(--black); position: relative; z-index: 1; letter-spacing: normal; }
.tx-title .tx-l1,
.tx-title .tx-l2,
.tx-title .tx-l3 { display: block; white-space: nowrap; }
.tx-title .tx-l1 { font-weight: 700; line-height: 115%; letter-spacing: -0.9px;
  font-size: clamp(30px,3.4vw,45px); font-size: min(45px,9.2cqi); }
.tx-title .tx-l2 { font-weight: 900; line-height: 107%; margin-top: min(35px,6cqi);
  font-size: clamp(52px,6.3vw,83px); font-size: min(83px,17cqi);
  letter-spacing: clamp(6px,.8vw,10.79px); letter-spacing: min(10.79px,2.2cqi); }
.tx-title .tx-l3 { font-weight: 900; line-height: 107%; color: var(--gold);
  font-size: clamp(52px,6.3vw,83px); font-size: min(83px,17cqi);
  letter-spacing: clamp(6px,.8vw,10.79px); letter-spacing: min(10.79px,2.2cqi); }
/* 炎S字（鯖江精機炎 5 / Figma 72:4846）：列幅582px内で left307px=52.7%, 幅221px=38%,
   上端は見出しのすぐ上（≒列見出し高さの10.5%）。見出し右側に重ねる。*/
.tx-flame { position: absolute; z-index: 0; left: 52.7%; top: 10.5%; width: 38%; height: auto; opacity: .9; pointer-events: none; }

.tx-layout { display: grid; grid-template-columns: minmax(0,45fr) minmax(0,55fr); gap: clamp(28px,5vw,80px); align-items: start; }
/* 左カラム：ビューポート中央でスティッキー固定（上にズレてから固定される挙動を解消）。
   ※背景は .tx-bg（セクション左上）へ分離。*/
.tx-left { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.tx-side { }
/* 「鯖江精機の信頼の背景」：四隅コーナーブラケット（黒）。ホバーで枠が外へ広がる（四隅が拡張）。
   背景グラデ8枚で4隅のL字を描画。ホバーは padding 拡大＋負マージンで相殺（レイアウト不変）。*/
.tx-side__label {
  position: relative; display: inline-block; cursor: pointer; text-decoration: none;   /* <a> 化（信頼の背景ページへ）に伴い下線を消す */
  /* 松尾FB：ボタンの文字カンプ通り＝Noto Sans JP 500（直しカンプ 18.9px/w500） */
  font-family: var(--sans); font-weight: 500; font-size: clamp(13px, .98vw, 18.9px); letter-spacing: .18em; color: #1A1A1A;
  padding: 1.1em 1.5em;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#1A1A1A,#1A1A1A), linear-gradient(#1A1A1A,#1A1A1A),
    linear-gradient(#1A1A1A,#1A1A1A), linear-gradient(#1A1A1A,#1A1A1A),
    linear-gradient(#1A1A1A,#1A1A1A), linear-gradient(#1A1A1A,#1A1A1A),
    linear-gradient(#1A1A1A,#1A1A1A), linear-gradient(#1A1A1A,#1A1A1A);
  background-size:
    12px 1px, 1px 12px,  12px 1px, 1px 12px,
    12px 1px, 1px 12px,  12px 1px, 1px 12px;
  background-position:
    left top, left top,  right top, right top,
    left bottom, left bottom,  right bottom, right bottom;
  transition: padding .3s ease-out, margin .3s ease-out;
}
.tx-side__label:hover {
  padding: calc(1.1em + 7px) calc(1.5em + 7px);
  margin: -7px;
}
@media (prefers-reduced-motion: reduce) { .tx-side__label { transition: none; } }

.tx-blocks { display: flex; flex-direction: column; gap: clamp(64px,8vw,120px);
  /* 松尾FB：「断らない姿勢と」を左の「半世紀、選ばれ続けた」と同じ高さから開始
     （左=100vhスティッキー中央固定のため、右先頭を 50vh-260px 分下げると入場中〜ピン開始まで行が揃う） */
  padding-top: max(0px, calc(50vh - 260px)); }
.tx-block__over { font-family: var(--serif); font-weight: 700; font-size: 34.4px; line-height: 35.496px; letter-spacing: 0.979px; color: #1A1A1A; margin: 0 0 .5em; }
/* 帯（01/02/03タグ）：スクロールで帯ごと（黒帯＋文字）を左→右にワイプして出す。
   文字はフェードではなく、帯が広がる動きそのものに露出される（clip-path）。色/サイズは Figma 72:4885 準拠。*/
.tx-tag { position: relative; z-index: 2; display: inline-flex; align-items: center;
  gap: clamp(6px,.6vw,10px); padding: clamp(9px,.9vw,14px) clamp(14px,1.4vw,23px); background: var(--black);
  clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.76,0,.24,1); }   /* 松尾FB：ワイプを見えるように少しゆっくり（旧.6s） */
html.js-bandrev .tx-tag { clip-path: inset(0 100% 0 0); }              /* 初期：左端0幅＝透明 */
html.js-bandrev .tx-tag.is-revealed { clip-path: inset(0 0 0 0); transition-delay: .3s; }   /* 親ブロックが見えてから左→右に開く */
@media (prefers-reduced-motion: reduce) {
  .tx-tag { transition: none; }
  html.js-bandrev .tx-tag { clip-path: inset(0 0 0 0); }
}
/* ── 帯リビール（全ページ共通ユーティリティ） ──
   上の .tx-tag（TOP）と同じ左→右ワイプを、他ページの黒帯見出しにも使えるようにしたもの。
   対象：.bz-ttl span（事業内容）/ .trp-chip（信頼の理由）/ .tr-tag（実績）
   使い方：帯そのものの要素に .js-band-reveal を付けるだけ（発火は assets/js/smooth.js）。*/
.js-band-reveal { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.76,0,.24,1); }
html.js-bandrev .js-band-reveal { clip-path: inset(0 100% 0 0); }
html.js-bandrev .js-band-reveal.is-revealed { clip-path: inset(0 0 0 0); transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .js-band-reveal { transition: none; }
  html.js-bandrev .js-band-reveal { clip-path: inset(0 0 0 0); }
}
/* ── clip-path をインライン要素に掛けたときの落とし穴（2026-08 SP整備で発覚） ──
   display:inline の要素に clip-path を掛けると、Chromeは最初の行ボックスの範囲でしか
   描画を残さず、2行目以降が丸ごと消える。
   事業内容の帯見出し（.bz-ttl > span）はPCでは1行に収まるため露見しなかったが、
   SPで折り返した瞬間に「よくある相談と、／鯖江精機の答え方」の後半が消えていた。
   → inline-block にして帯を1つの矩形にすればclip-pathが全体に正しく効く。
     信頼(.trp-chip)・実績(.tr-tag)は元から inline-block で、この問題は起きていない。
   ※ワイプ用のclip-pathを親h2へ移す案は不可。h2自身が出現アニメの監視対象で、
     clipで見えなくすると IntersectionObserver が発火せず、永久に出てこなくなる。
   　実際の指定は .bz-ttl span 本体（下方）で display:inline-block にしてある。 */
/* Figma 72:4885：01=Noto Serif JP 92.7px/900/金 #C8A96E、課題解決力=TsukuMin 53.2px/800/白 */
.tx-num { font-family: var(--serif); font-weight: 900; font-size: clamp(42px,5.3vw,76px); line-height: .75;
  letter-spacing: -.02em; color: var(--gold); }
.tx-ttl { font-family: var(--serif); font-weight: 800; font-size: clamp(24px,3.1vw,44px);
  line-height: 1; letter-spacing: .08em; color: #FFFFFF; }
/* タグを写真左上に食い込ませる図版ブロック */
.tx-figure { position: relative; }
.tx-figure .tx-tag { margin-left: 0; }
.tx-media { margin-top: -1.4em; overflow: hidden; }   /* ホバー時に中身だけ寄るよう、枠でクリップする */
.tx-media img { display: block; width: 100%; aspect-ratio: 792 / 430; object-fit: cover; }
/* ホバー：枠の大きさは変えず、写真だけゆっくり寄る。
   タッチ端末は hover が張り付くのでマウス環境のみ。 */
@media (hover: hover) and (pointer: fine) {
  .tx-media img { transition: transform .9s cubic-bezier(.22, .61, .21, 1); will-change: transform; }
  .tx-media:hover img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .tx-media img, .tx-media:hover img { transition: none; transform: none; }
}
.tx-lead { margin: 1.8em 0 0; max-width: 792px; font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 35px; color: #1A1A1A; }

.tx-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 16/7;
  background: repeating-linear-gradient(45deg, rgba(26,26,26,.05) 0 10px, transparent 10px 20px), #dcd6c8;
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em; color: rgba(26,26,26,.32); }
/* サムネ四角：Figma 317:8438 準拠 → 124角(≈34.6%)の無地グレー #D9D9D9 */
.tx-ph--sm { width: 35cqi; max-width: 124px; aspect-ratio: 1/1; margin: 0 auto; background: #D9D9D9; }

/* アイコン入り（Figma 504-2428完コピ・柔軟性/想像力）：グレー地をやめて線画をそのまま置く */
.tx-ph--icon { background: none; }
.tx-ph--icon svg { display: block; height: 100%; width: auto; overflow: visible; }
/* ホバー演出①柔軟性：電球がピカピカ（ガラスが明滅＋周囲のきらめきが交互に瞬く） */
.tx-sub:hover .jx-bulb { animation: txBulb 1.15s ease-in-out infinite; }
@keyframes txBulb {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6) drop-shadow(0 0 5px rgba(200,169,110,.9)) drop-shadow(0 0 12px rgba(200,169,110,.45)); }
}
.tx-sub:hover .jx-tw  { animation: txTwinkle 1.5s ease-in-out infinite; }
.tx-sub:hover .jx-tw2 { animation-delay: .5s; }
.tx-sub:hover .jx-tw3 { animation-delay: 1s; }
@keyframes txTwinkle {
  0%, 100% { opacity: 1; }
  55%      { opacity: .1; }
}
/* ホバー演出②想像力：歯車が回りチェーン（破線）が流れる。
   回転周期は半径比（19:13:21.5）で揃え、大左=反時計・中小/上=時計回り */
.tx-sub .ig-gear { transform-box: fill-box; transform-origin: center; }
.tx-sub:hover .ig-g1 { animation: igRotCCW 2.8s linear infinite; }
.tx-sub:hover .ig-g2 { animation: igRotCW 1.9s linear infinite; }
.tx-sub:hover .ig-g3 { animation: igRotCW 3.2s linear infinite; }
@keyframes igRotCW  { to { transform: rotate(360deg); } }
@keyframes igRotCCW { to { transform: rotate(-360deg); } }
/* dasharray 3.36+3.36=周期6.72 → 33.6(5周期)ずらすとシームレスに循環 */
.tx-sub:hover .ig-chain { animation: igChain 1.5s linear infinite; }
@keyframes igChain { to { stroke-dashoffset: 33.6; } }
@media (prefers-reduced-motion: reduce) {
  .tx-sub:hover .jx-bulb, .tx-sub:hover .jx-tw,
  .tx-sub:hover .ig-gear, .tx-sub:hover .ig-chain { animation: none; }
}

.tx-subs { margin: 2.4em 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.4vw,32px); }
/* カード：Figma button.frame-btn(358x302) 準拠。白地＋細い金枠＋四隅の金コーナーブラケット。
   文字・余白・サムネはカード幅(cqi)に追従させ、狭い列でも1行に収まる。*/
.tx-sub { position: relative; container-type: inline-size;
  border: 1px solid var(--gold); background: #fff; text-align: center;
  padding: 11% 7%; }
.tx-sub::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold));
  background-size:
    min(20px,5.6cqi) 2px, 2px min(20px,5.6cqi),  min(20px,5.6cqi) 2px, 2px min(20px,5.6cqi),
    min(20px,5.6cqi) 2px, 2px min(20px,5.6cqi),  min(20px,5.6cqi) 2px, 2px min(20px,5.6cqi);
  background-position: left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom;
  transition: inset .3s ease-out;
}
/* 松尾FB：ホバーで四隅のかっこが外へ広がる（ボタンと同じ動き：静止の -1px から 7px 外へ＝-8px） */
.tx-sub:hover::before {
  inset: -8px;
}
@media (prefers-reduced-motion: reduce) { .tx-sub::before { transition: none; } }
.tx-sub__ttl { font-family: var(--serif); font-weight: 800; color: #C8A96E; line-height: 1;
  font-size: min(43px,12cqi); letter-spacing: .2em; text-indent: .2em; margin: 3.6cqi 0 0; white-space: nowrap; }
.tx-sub__txt { margin: 3.2cqi 0 0; font-family: var(--sans); font-weight: 700; color: #1A1A1A;
  font-size: min(20px,5.4cqi); white-space: nowrap; }

/* Integrated Production Flow は削除（PC/SP共通・2026-07 決定） */

/* REPROバナー：Figma 317:8498 準拠（792×265 / 細い金枠 / pad 46×58 / タイトル Noto Serif JP 27.4px 1行 /
   本文 15px lh32 / ボタンは frame-btn（金枠アウトライン＋四隅ブラケット・矢印なし））*/
.tx-repro { margin-top: 2.4em; border: 1px solid rgba(200,169,110,.55); background: #0A0806; container-type: inline-size;
  padding: clamp(28px,5.8%,46px) clamp(30px,7.3%,58px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(20px,3.6%,29px); align-items: center; }
/* REPROボタン：松尾FB「ボタンはABOUTのサイズ感に全統一」→ .frame-btn 基準に一本化 */
.tx-repro .frame-btn { text-transform: none; }
.tx-repro__label { font-family: var(--sans); font-size: 12px; letter-spacing: .162em; color: var(--gold); font-weight: 400; }
.tx-repro__ttl { font-family: var(--serif); font-weight: 700; font-size: min(27.4px,3.5cqi); line-height: 1.4;
  margin: 11px 0 10px; color: #F5F3EF; white-space: nowrap; }
.tx-repro__txt { font-family: var(--sans); font-size: clamp(13px,1.9cqi,15px); line-height: 2.13; color: #F5F3EF; max-width: 416px; }
.tx-repro__btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--sans);
  font-size: clamp(13px,1.9cqi,15px); letter-spacing: .18em; font-weight: 400; color: #1A1A1A; background: var(--gold);
  padding: clamp(14px,2.5cqi,20px) clamp(26px,5cqi,40px); text-decoration: none; transition: opacity .25s; }
.tx-repro__btn:hover { opacity: .85; }
.tx-repro__btn-arrow { font-size: 1.17em; line-height: 1; }

@media (max-width: 1400px) { .trustx__inner { padding: 0 clamp(24px,7vw,273px); } }
@media (max-width: 900px) {
  /* SP：見出し → 本文ブロック → 「鯖江精機の信頼の背景」(最下部・中央) の順に並び替え */
  .tx-layout { display: flex; flex-direction: column; align-items: stretch; }
  .tx-left { display: contents; }
  .tx-head { order: 1; margin-bottom: clamp(32px,9vw,48px); }
  .tx-blocks { order: 2; padding-top: 0; }   /* SPは縦積みのため高さ合わせ不要 */
  .tx-side { order: 3; position: static; margin: clamp(40px,11vw,64px) 0 0; text-align: center; }
  .tx-bg { width: 88vw; }
  .tx-bg__img::before { width: 88vw; height: 99vw; background-size: 88vw 99vw; }
  .tx-subs { grid-template-columns: 1fr; max-width: none; }
  .tx-repro { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   OUR BUSINESS（事業内容）接頭辞 ob-
   明るい面：ecru背景 / 黒文字 / 差し色ゴールド
══════════════════════════════════════ */
#business-sec.obx { background: var(--ecru) url(../images/business-bg.jpg) center/cover no-repeat; color: var(--black); padding: clamp(90px,12vw,180px) 0; position: relative; overflow: hidden; }
.obx__inner { max-width: none; margin: 0; padding: 0 265px; }
@media (max-width: 1400px) { .obx__inner { padding: 0 clamp(24px,7vw,265px); } }

.ob-head { position: relative; }
.ob-eyebrow { font-family: var(--serif); font-weight: 700; font-size: clamp(26px,4vw,39.461px); line-height: 1.15; letter-spacing: .02em; color: #1A1A1A; display: block; margin-bottom: .15em; }
.ob-en { font-family: var(--serif); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(2.6rem,7vw,5.4rem); line-height: 1; display: block;
  background: linear-gradient(100deg,#e3c98d 0%,#c8a96e 52%,#a07c37 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.ob-body { margin-top: clamp(48px,7vw,88px); max-width: 820px; }
.ob-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: .04em; line-height: 1.5; margin: 0 0 1.1em; }
.ob-lead { font-family: var(--sans); font-size: 14px; line-height: 2.1; color: #1A1A1A; margin: 0 0 1.4em; }
.ob-lead:last-child { margin-bottom: 0; }

.ob-figure { margin-top: clamp(48px,7vw,80px); display: grid; place-items: center; width: 100%; aspect-ratio: 12/5;
  background: repeating-linear-gradient(45deg, rgba(26,26,26,.05) 0 12px, transparent 12px 24px), #dcd6c8; }
.ob-figure__label { font-family: var(--serif); font-weight: 700; font-size: clamp(1.1rem,2.4vw,1.7rem); letter-spacing: .18em; color: #1A1A1A; }

@media (max-width: 767px) {
  .ob-figure { aspect-ratio: 4/3; }
}

/* ══════════════════════════════════════════════════════════
   TRUST：信頼の背景（Figma決定稿準拠）接頭辞 tr-
   背景=黒 / カード=白・クリーム / 差し色=gold
══════════════════════════════════════════════════════════ */
.trust2 { background: var(--kuro); color: var(--ecru); }   /* 旧 #000＝TOPより締まりすぎ。TOPの黒に統一 */
.tr-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.tr-reveal.is-in { opacity: 1; transform: none; }

/* ① Hero */
/* 寸法は会社概要（.cp-hero）に統一：上の余白＋写真面＝686px（1920時） */
/* Figma 110:809 決定稿：全幅ブリードではなく、左右を空けた写真帯（他の下層ページと同じ組み）。
   スクリムも横グラデではなく会社概要と同じ均一の暗幕。 */
.tr-hero { position: relative; padding-top: var(--hero-gap); }
.tr-hero__media { position: relative; width: min(1734px, 95.2vw); height: var(--hero-media); margin-inline: auto; overflow: hidden; }
.tr-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-hero__scrim { position: absolute; inset: 0; background: rgba(26,26,26,.66); opacity: .8; }
.tr-hero__overlay { position: absolute; z-index: 2; }
.tr-hero__eyebrow { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(13px,1.4vw,18px); letter-spacing: .5em; color: var(--gold); margin-bottom: .7em; }
.tr-hero__title { margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(46px,8.5vw,120px); line-height: 1; color: #fff; letter-spacing: .06em; }
/* 「紹介」の半透明ハイライトは決定稿(110:809)に無いため廃止 */

.tr-hero__foot { max-width: 1000px; margin: 0 auto; padding: clamp(60px,9vw,120px) 6% clamp(50px,7vw,90px); text-align: center; }
.tr-hero__q { font-family: var(--serif); font-weight: 700; font-size: clamp(24px,4.4vw,58px); line-height: 1.5; letter-spacing: .08em; color: #fff; margin: 0 0 clamp(30px,4vw,54px); }
.tr-hero__lead { position: relative; border: 1px solid rgba(200,169,110,.4); padding: clamp(22px,3vw,34px) clamp(20px,4vw,48px); }
.tr-hero__lead::before, .tr-hero__lead::after { content: ""; position: absolute; width: 18px; height: 18px; }
.tr-hero__lead::before { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.tr-hero__lead::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.tr-hero__lead p { margin: 0; font-family: var(--sans); font-size: clamp(13px,1.15vw,15px); line-height: 1.9; color: rgba(245,243,239,.75); }

/* ② Body：sticky索引 + 本文 */
.tr-body { padding: clamp(20px,4vw,60px) 0 clamp(80px,10vw,150px); }
.tr-inner { max-width: var(--pgnav-maxw); margin: 0 auto; padding: 0 var(--pgnav-pad); display: grid; grid-template-columns: var(--pgnav-w) minmax(0,1fr); gap: var(--pgnav-gap); align-items: start; }

/* z-index：01セクションの全幅背景（.wk-space__bg）が後ろのDOM順で上に来るので、索引を明示的に前へ */
.tr-nav { position: sticky; top: 110px; z-index: 2; background: #fff; border: 1px solid rgba(200,169,110,.35); }
.tr-nav__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(18px,1.6vw,24px) clamp(20px,1.8vw,28px); text-decoration: none; border-bottom: 1px solid rgba(26,26,26,.1); transition: background .3s, color .3s; }
.tr-nav__item:last-child { border-bottom: 0; }
.tr-nav__label { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--black); letter-spacing: .04em; transition: color .3s; }
.tr-nav__arrow { font-size: 15px; color: rgba(26,26,26,.4); transition: color .3s, transform .3s; }
.tr-nav__item.is-active { background: #faf8f5; }
.tr-nav__item.is-active .tr-nav__label { color: var(--gold); font-weight: 700; }
.tr-nav__item.is-active .tr-nav__arrow { color: var(--gold); }
.tr-nav__item:hover .tr-nav__arrow { transform: translateY(3px); color: var(--gold); }

/* section shells */
.tr-sec { scroll-margin-top: 100px; padding: clamp(48px,7vw,110px) 0 0; }
.tr-sec:first-child { padding-top: clamp(20px,3vw,40px); }
.tr-head { margin-bottom: clamp(34px,4vw,60px); }
.tr-eyebrow { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(12px,1vw,15px); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .9em; }
.tr-tag { display: inline-block; margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(28px,3.8vw,53px); line-height: 1.15; letter-spacing: .06em; color: #fff; background: #0A0806; padding: .28em .5em; }
.tr-sub { margin: 1.4em 0 0; font-family: var(--sans); font-size: clamp(13px,1.05vw,15px); line-height: 2; color: rgba(245,243,239,.5); }

/* 数字で見る */
.tr-numgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,24px); }
.tr-numcard { background: #fbfaf7; border: 1px solid var(--gold); padding: clamp(24px,2.4vw,38px) clamp(18px,2vw,28px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.tr-numcard__label { font-family: var(--sans); font-size: clamp(12px,1vw,15px); font-weight: 700; color: var(--black); letter-spacing: .04em; }
.tr-numcard__icon { width: clamp(120px,13vw,190px); aspect-ratio: 1; border-radius: 50%; background: #d9d9d9; margin: clamp(20px,2.4vw,34px) 0; }
.tr-numcard__val { font-family: var(--serif); font-weight: 900; font-size: clamp(34px,4.2vw,58px); line-height: 1; color: var(--gold); }
.tr-numcard__val small { font-size: .5em; font-weight: 900; }
.tr-numcard__cap { margin-top: 1.2em; font-family: var(--sans); font-size: clamp(11px,.95vw,13px); color: #1A1A1A; line-height: 1.7; }

/* 選ばれる理由 */
.tr-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(20px,2.4vw,40px); }
.tr-reason { display: grid; grid-template-columns: clamp(84px,9vw,150px) 1fr; align-items: stretch; background: #fff; }
.tr-reason__no { display: flex; align-items: flex-start; justify-content: center; padding: clamp(28px,3vw,48px) 0 0; font-family: var(--serif); font-weight: 900; font-size: clamp(30px,3.4vw,49px); color: var(--gold); line-height: 1; border-right: 1px solid rgba(200,169,110,.6); }
.tr-reason__body { padding: clamp(28px,3vw,48px) clamp(26px,3vw,54px); }
.tr-reason__ttl { margin: 0 0 .8em; font-family: var(--serif); font-weight: 700; font-size: clamp(19px,2.3vw,35px); line-height: 1.45; letter-spacing: .06em; color: var(--black); }
.tr-reason__txt { margin: 0; font-family: var(--sans); font-size: clamp(13px,1.05vw,15px); line-height: 2; color: #1A1A1A; }

/* 認証・受賞 */
.tr-certgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,26px); }
.tr-cert { background: #e6e4da; padding: clamp(16px,1.4vw,22px); text-align: center; }
.tr-cert__img { aspect-ratio: 3/2; background: #fff; overflow: hidden; margin-bottom: clamp(14px,1.4vw,22px); }
.tr-cert__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-cert__ttl { margin: 0 0 .4em; font-family: var(--serif); font-weight: 700; font-size: clamp(20px,2vw,30px); color: var(--black); letter-spacing: .04em; }
.tr-cert__cap { margin: 0; font-family: var(--sans); font-size: clamp(11px,.9vw,13px); color: #1A1A1A; line-height: 1.7; }

/* CSR */
.tr-csrlist { display: flex; flex-direction: column; gap: clamp(20px,2.4vw,40px); }
.tr-csr { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); background: #fff; overflow: hidden; }
.tr-csr__img { position: relative; min-height: 260px; }
.tr-csr__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-csr__body { padding: clamp(30px,3.4vw,56px) clamp(28px,3.4vw,60px); }
.tr-csr__head { display: flex; align-items: center; gap: .7em; margin-bottom: .6em; }
.tr-csr__icon { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid rgba(200,169,110,.6); font-size: 1em; }
.tr-csr__en { font-family: var(--sans); font-size: clamp(11px,.95vw,13px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.tr-csr__ttl { margin: 0 0 .7em; font-family: var(--serif); font-weight: 700; font-size: clamp(20px,2.2vw,32px); letter-spacing: .04em; color: var(--black); }
.tr-csr__txt { margin: 0 0 1.6em; font-family: var(--sans); font-size: clamp(13px,1.05vw,15px); line-height: 1.95; color: #1A1A1A; }
.tr-csr__list { list-style: none; margin: 0; padding: 0; }
.tr-csr__list li { position: relative; padding: .9em 0 .9em 1.6em; border-bottom: 1px solid rgba(26,26,26,.12); font-family: var(--sans); font-size: clamp(12px,1vw,14px); color: var(--black); }
.tr-csr__list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* responsive */
@media (max-width: 900px) {
  .tr-inner { grid-template-columns: 1fr; }
  .tr-nav { position: static; display: grid; grid-template-columns: repeat(2,1fr); }
  .tr-nav__item:nth-child(1), .tr-nav__item:nth-child(2) { border-bottom: 1px solid rgba(26,26,26,.1); }
  .tr-nav__item:nth-child(odd) { border-right: 1px solid rgba(26,26,26,.1); }
  .tr-numgrid { grid-template-columns: repeat(2,1fr); }
  .tr-certgrid { grid-template-columns: repeat(2,1fr); }
  .tr-csr { grid-template-columns: 1fr; }
  .tr-csr__img { min-height: 220px; aspect-ratio: 16/10; }
}
@media (max-width: 560px) {
  .tr-numgrid { grid-template-columns: 1fr; }
  .tr-certgrid { grid-template-columns: 1fr; }
  .tr-reason { grid-template-columns: 64px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   CASE STUDIES（実績）Figma 72:4987 準拠 / 接頭辞 cs-
   ダーク面：黒背景＋写真＋白アウトライン見出し
══════════════════════════════════════════════════════════ */
#cases.csx { background: #0A0806; color: var(--ecru); position: relative; overflow: clip; }
.cs-after { position: relative; z-index: 2; padding: clamp(60px,8vw,120px) 6% clamp(20px,3vw,40px); }

/* 「実績が、技術を語る。」は CASE STUDIES の右横ではなく真下（SPと同じ縦並び）。
   横並びだと大見出しのベースラインに揃うため、和文がタイトルの右下に取り残されて見えていた。 */
.cs-titlerow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px,1.3vw,18px); }
.cs-title { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  font-size: clamp(38px,8vw,100px); color: #000; filter: url(#ecruOutline); }  /* 合体シルエットの縁のみ白（内部輪郭線が出ない） */
.cs-title__ja { font-family: var(--serif); font-weight: 700; font-size: clamp(15px,1.9vw,26px); letter-spacing: .1em; color: #fff; position: relative; padding-bottom: .2em; }
.cs-title__ja::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(245,243,239,.6); }
.cs-lead { margin: clamp(20px,3vw,40px) 0 clamp(40px,5vw,70px); font-family: var(--serif); font-weight: 700; font-size: clamp(14px,1.5vw,18px); letter-spacing: .06em; color: rgba(255,255,255,.92); }
.cs-br-sp { display: none; } /* SP専用改行（松尾FB：「出さずに、」で折る） */

.cs-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,24px); max-width: 900px; margin: 0 auto; }
/* Figma準拠：内側フルボーダー＋外側コーナーブラケットの二重枠（ホバーで四つ角が外へ開くアニメ） */
.cs-card { --csc: rgba(255,255,255,.92); --csl: 30px;
  position: relative; display: block; text-decoration: none;
  border: 1px solid rgba(255,255,255,.55);
  background-color: rgba(0,0,0,.45);
  padding: clamp(24px,2.6vw,38px) clamp(18px,2vw,30px); text-align: center;
  transition: background-color .3s, border-color .3s, transform .4s cubic-bezier(.22,1,.36,1); }
.cs-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--csc),var(--csc)), linear-gradient(var(--csc),var(--csc)),
    linear-gradient(var(--csc),var(--csc)), linear-gradient(var(--csc),var(--csc)),
    linear-gradient(var(--csc),var(--csc)), linear-gradient(var(--csc),var(--csc)),
    linear-gradient(var(--csc),var(--csc)), linear-gradient(var(--csc),var(--csc));
  background-repeat: no-repeat;
  background-size: var(--csl) 2px, 2px var(--csl), var(--csl) 2px, 2px var(--csl), var(--csl) 2px, 2px var(--csl), var(--csl) 2px, 2px var(--csl);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  transition: inset .3s ease-out; }
/* 注意: translateY等は入れない。左右カードは.is-spread側のtransform指定が勝つため、
   ここに動きを足すと真ん中だけ動いて位置がずれる */
.cs-card:hover { --csc: var(--gold); border-color: rgba(200,169,110,.75); background-color: rgba(0,0,0,.58); }
.cs-card:hover::before { inset: -7px; }
@media (prefers-reduced-motion: reduce) { .cs-card, .cs-card::before { transition: none; } }
/* 出現アニメ(.anim-up)との両立：.cs-card固有transitionが後勝ちするため opacity を含めて再定義 */
.cs-card.anim-up { transition: opacity .8s ease, transform .55s cubic-bezier(.22,1,.36,1), background-color .3s, border-color .3s; }
/* サムネ＝Figma書き出しのラインアイコン（504-2601完コピ・正方形の枠もSVG内に含む）。
   通常はシルバー、ホバーでゴールドへ。発光は枠CSSではなくアイコン(svg)だけに掛ける。 */
.cs-card__thumb { display: grid; place-items: center; width: clamp(72px,7vw,104px); aspect-ratio: 1; margin: 0 auto clamp(14px,1.6vw,20px);
  color: #c6cbd2;
  transition: color .42s ease; }
.cs-card__thumb svg { display: block; width: 100%; height: 100%; overflow: visible;
  transition: filter .45s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.cs-card:hover .cs-card__thumb { color: var(--gold-bright); }
/* transition で発光を立ち上げ、遅延0.5s後に同じ値から始まる呼吸アニメへ繋ぐ（段差なし） */
.cs-card:hover .cs-card__thumb svg { transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(212,184,122,.55)) drop-shadow(0 0 15px rgba(200,169,110,.3));
  animation: csIconGlow 2.6s ease-in-out .5s infinite; }
@keyframes csIconGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(212,184,122,.55)) drop-shadow(0 0 15px rgba(200,169,110,.3)); }
  50%      { filter: drop-shadow(0 0 11px rgba(212,184,122,.8)) drop-shadow(0 0 24px rgba(200,169,110,.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card__thumb svg { transition: none; }
  .cs-card:hover .cs-card__thumb svg { transform: none; animation: none; }
}
.cs-card__ttl { font-family: var(--serif); font-weight: 800; font-size: clamp(16px,1.6vw,23px); line-height: 1.35; letter-spacing: .1em; color: #fff; margin: 0 0 .9em; transition: color .38s ease; }
.cs-card:hover .cs-card__ttl { color: var(--gold-bright); }
.cs-card__txt { font-family: var(--sans); font-size: clamp(11px,.95vw,12px); line-height: 1.9; color: rgba(255,255,255,.85); margin: 0; text-align: left; transition: color .38s ease; }
.cs-card:hover .cs-card__txt { color: var(--gold-bright); }

.cs-btn { display: inline-block; margin-top: clamp(36px,5vw,64px); font-family: var(--serif); font-weight: 800; font-size: clamp(14px,1.4vw,20px); letter-spacing: .24em; color: var(--ecru); text-decoration: none; border: 1px solid rgba(245,243,239,.5); padding: 1em 3.4em; transition: background .3s, color .3s, border-color .3s; }
.cs-btn:hover { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }

.cs-band { position: relative; z-index: 2; max-width: 1500px; margin: 0 auto; padding: 0 clamp(16px,3vw,40px) clamp(40px,6vw,90px); display: flex; flex-direction: column; gap: clamp(10px,1.4vw,20px); }
.cs-band__wide { aspect-ratio: 21/9; overflow: hidden; }
.cs-band__wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-band__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px,1.4vw,20px); }
.cs-band__cell { aspect-ratio: 16/10; overflow: hidden; }
.cs-band__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 結晶装飾（低ポリ） */
.cs-crystal { position: absolute; z-index: 1; pointer-events: none; height: auto; opacity: .8; }
.cs-crystal--l { left: -9%; bottom: -4%; width: clamp(220px,28vw,560px); }
.cs-crystal--r { right: -8%; top: 40%; width: clamp(180px,22vw,460px); }
@media (max-width: 767px) { .cs-crystal { display: none; } }

@media (max-width: 767px) {
  .cs-cards { grid-template-columns: 1fr; max-width: 380px; }
  .cs-band__pair { grid-template-columns: 1fr; }
  .cs-band__wide { aspect-ratio: 16/9; }
}

/* ══════════════════════════════════════════════════════════
   WORKS（実績紹介）Figma Case&Products 110:805 準拠 / 接頭辞 wk-
══════════════════════════════════════════════════════════ */
/* セクション番号（02・03 で使用） */
.wk-secnum { position: relative; }
.wk-secnum__big { position: absolute; right: 0; top: -.35em; font-family: var(--serif); font-weight: 900; font-size: clamp(80px,13vw,220px); line-height: 1; color: rgba(200,169,110,.12); pointer-events: none; z-index: 0; }

/* ── 01 宇宙・衛星プロジェクト（Figma 115:1742 / 72:6469 決定稿）──────────
   数値はすべて 1920px 基準（例：70px の見出し → 70/1920 = 3.646vw）。
   背景は本文カラムを飛び出して画面幅いっぱいに敷く。左のはみ出し量 --wk-bleed は
   works.php の JS が実測して上書きするので、ここの値は初回描画用のフォールバック。 */
.tr-sec.wk-space {
  position: relative;
  --wk-bleed: calc(50vw - 220px);   /* .tr-inner=1360 / padding80 / nav300 / gap80 のとき */
  --wk-vw: 100vw;
  padding: clamp(56px,6vw,110px) 0 clamp(60px,7vw,120px);
}
@media (max-width: 1600px) { .tr-sec.wk-space { --wk-bleed: calc(60vw - 380px); } }
@media (max-width: 1360px) { .tr-sec.wk-space { --wk-bleed: calc(10vw + 300px); } }
@media (max-width: 900px)  { .tr-sec.wk-space { --wk-bleed: 5vw; } }
@media (max-width: 480px)  { .tr-sec.wk-space { --wk-bleed: 24px; } }

/* セクション全体の下地。決定稿は #1A1A1A ベタ（115:1740）。
   本サイトの .trust2 は地の黒（--kuro）なので、上下端だけそこへ溶かして継ぎ目を消している。 */
.wk-space__bg {
  position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0;
  left: calc(-1 * var(--wk-bleed)); width: var(--wk-vw);
  background: linear-gradient(to bottom, var(--kuro) 0%, #1a1a1a 5%, #1a1a1a 93%, var(--kuro) 100%);
  isolation: isolate;   /* overlay 合成をこの箱の中だけで効かせる */
}
/* 宇宙×地球（決定稿 317:9382）。決定稿は blendMode=OVERLAY で #1A1A1A の下地に乗せており、
   そのままの明るさで敷くと画像が3倍近く明るくなってしまう。上端のフェードは
   決定稿のグラデーションマスク（alpha 0 → 1 @46%）をそのまま mask で再現。 */
.wk-space__sky {
  position: absolute; left: 0; right: 0; top: 29.3%; bottom: 0;
  background: url(../images/wk_space_bg.webp) center / cover no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 46%);
}
/* 決定稿では本文カラムの右に 23% はみ出す（122:3530） */
.wk-space__num {
  position: absolute; z-index: 0; right: -15%; top: -.12em;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(76px,14.55vw,279px); line-height: 1; letter-spacing: -.02em;
  color: rgba(200,169,110,.12); pointer-events: none;
}
/* 中間幅は本文カラムの右に余白がほとんど無く、23%はみ出させると画面外へ出るので抑える */
@media (max-width: 1600px) { .wk-space__num { right: -3%; } }
.wk-space__head, .wk-space__badge, .wk-space__story,
.wk-space__panel, .wk-space__cases { position: relative; z-index: 1; }

/* 見出し：中央寄せ＋金→褐色のグラデーション罫（決定稿 122:3538） */
.wk-space__head { margin-bottom: clamp(30px,3.6vw,64px); }
.wk-space__ttl {
  margin: 0; text-align: center;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px,3.65vw,70px); line-height: 1.12; letter-spacing: .031em;
  color: var(--ecru);
}
.wk-space__ttl::after {
  content: ""; display: block; height: 1px; margin-top: clamp(12px,1.2vw,23px);
  background: linear-gradient(90deg, var(--gold) 0%, rgba(100,85,55,.5) 87%, rgba(100,85,55,0) 100%);
}
.wk-space__lead {
  max-width: 805px; margin: clamp(14px,1.25vw,24px) 0 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(13px,.83vw,16px); line-height: 2.19; letter-spacing: .06em;
  color: var(--ecru);
}

/* Satellite Project Team の帯（決定稿 72:6482） */
.wk-space__badge {
  display: block; margin: 0 0 clamp(26px,2.4vw,46px); text-align: center;
  border: 1.74px solid rgba(200,169,110,.4); border-radius: 3.5px;
  padding: 0 1.1em;
  font-family: var(--serif); font-weight: 400; text-transform: uppercase;
  font-size: clamp(13px,1.33vw,25.5px); line-height: 2;
  /* 字送りは最後の1文字の後ろにも入るので、中央寄せだと ls/2 だけ左にずれる。その半分を戻す */
  letter-spacing: .22em; text-indent: .11em;
  color: var(--gold);
}

/* ストーリー：左に本文、右に模型写真（決定稿 317:9279） */
.wk-space__story {
  display: grid; grid-template-columns: minmax(0,434fr) minmax(0,395fr);
  gap: clamp(20px,2.1vw,40px); align-items: center;
  margin: 0 0 clamp(26px,2.2vw,42px);
}
.wk-space__txt h3 {
  margin: 0 0 clamp(6px,.63vw,12px);
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(19px,1.46vw,28px); line-height: 1.36; color: var(--ecru);
}
.wk-space__txt p {
  margin: 0; font-family: var(--sans); font-weight: 500;
  font-size: clamp(12.5px,.78vw,15px); line-height: 2.13; color: var(--ecru);
}
.wk-space__fig { position: relative; margin: 0; aspect-ratio: 395/338; overflow: hidden; }
.wk-space__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-space__fig figcaption {
  position: absolute; right: clamp(8px,.68vw,13px); bottom: clamp(6px,.52vw,10px);
  font-family: var(--sans); font-weight: 500; font-size: clamp(9px,.52vw,10px);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* 歩み：左＝ステップ（開閉）／右＝写真スタック（決定稿 115:1588） */
.wk-space__panel {
  display: grid; grid-template-columns: minmax(0,329fr) minmax(0,538fr);
  align-items: stretch; margin: 0 0 clamp(26px,2.2vw,42px);
  border: 1px solid rgba(0,0,0,.04);
}
/* パネル高さは決定稿の 415px（1920時）で固定。開いた項目によって本文の行数が前後しても
   箱が伸び縮みしないようにする。 */
.wk-steps {
  background: #171717; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(10px,.99vw,19px);
  padding: clamp(24px,2.7vw,52px) clamp(14px,1.6vw,31px);
  min-height: clamp(300px,21.6vw,415px);
  container-type: inline-size;   /* 見出しを1行に収めるため、字の大きさをこの箱幅基準にする */
}
/* 見出しは折り返さない。本文カラムが決定稿(869px)より狭い画面では cqi 側が効いて自動で縮む。
   最長の「製造から試験まで、一社で完結」(14文字) が 1 行で収まる係数にしてある。 */
.wk-step__btn {
  display: grid; place-items: center; width: 100%;
  min-height: clamp(38px,2.6vw,50px); padding: .5em .62em; cursor: pointer;
  background: transparent; border: .9px solid rgba(255,255,255,.3);
  font-family: var(--serif); font-weight: 800;
  font-size: min(13.44px, 5.46cqi); line-height: 1.43; letter-spacing: -.021em;
  white-space: nowrap;
  /* 決定稿は非アクティブを opacity .25（実効15%の白）まで落としていたが、それだと読めないので
     文字は不透明の白のまま、枠線の濃さだけで開閉の差を付ける */
  text-align: center; color: #fff;
  transition: background .35s, color .35s, border-color .35s;
}
.wk-step__btn:hover, .wk-step__btn:focus-visible { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); }
.wk-step__btn[aria-expanded="true"] {
  background: #fff; border-color: #fff; color: var(--gold);
  font-size: min(16px, 6.5cqi);
}
.wk-step__body p {
  margin: clamp(5px,.47vw,9px) 0 0; min-height: 6.28em;   /* 4行分 */
  font-family: var(--sans); font-size: clamp(12px,.73vw,14px); line-height: 1.57;
  color: var(--gold);
}
.wk-stack {
  position: relative; overflow: hidden;
  background: rgba(236,238,242,.4); border-left: 1px solid rgba(0,0,0,.02);
}
.wk-stack__card {
  position: absolute; top: 50%; left: 50%; display: block;
  background: #fff; padding: clamp(3px,.3vw,5.8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.wk-stack__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-stack__card--l, .wk-stack__card--r {
  width: 48%; aspect-ratio: 258/315; opacity: .4; filter: blur(2.3px);
}
.wk-stack__card--l { z-index: 1; transform: translate(-50%,-50%) translateX(-26%) rotate(-3deg); }
.wk-stack__card--r { z-index: 2; transform: translate(-50%,-50%) translateX(26%) rotate(3deg); }
/* 手前の写真＝歩みの見出しごとに差し替わる。素材は白フチと傾きを焼き込んだ透過WebPなので、
   CSS側では枠も回転も付けない（影だけ drop-shadow でアルファ形状に沿わせる）。 */
.wk-shot {
  position: absolute; z-index: 3; top: 50%; left: 50%; width: 73.4%;
  transform: translate(-50%,-50%) scale(.97); transform-origin: 50% 50%;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
  transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.wk-shot img { display: block; width: 100%; height: auto; }
.wk-shot.is-in { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* CASE カード（決定稿 72:6527） */
.wk-space__cases { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.25vw,24px); }
/* 本文カラムが決定稿(869px)より狭いぶん、見出しは 23px→22px・左右パディングは 28px→24px に詰めて
   「衛星光学センサー用」(9文字) が1行で収まるようにしている */
.wk-case {
  background: rgba(19,21,23,.64); border: 1px solid rgba(200,169,110,.1); border-radius: 4px;
  padding: clamp(20px,1.67vw,32px) clamp(14px,1.25vw,24px);
  container-type: inline-size;   /* 見出しの1行を守るため、字の大きさをカード幅基準にする */
}
.wk-case__no { display: block; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(12px,.83vw,16px); line-height: 1.44; letter-spacing: .096em; color: var(--gold); }
/* 最長行「衛星光学センサー用」(9文字) が必ず1行に収まる係数。決定稿の22pxが上限。 */
.wk-case__ttl { margin: clamp(10px,.83vw,16px) 0 0; text-align: center; font-family: var(--serif); font-weight: 700; font-size: min(22px, 10.6cqi); line-height: 1.48; color: var(--ecru); }
.wk-case__txt { margin: clamp(10px,.83vw,16px) 0 0; font-family: var(--sans); font-weight: 400; font-size: clamp(11.5px,.68vw,13px); line-height: 2; color: var(--ecru); }

/* ── 02/03 ライトゾーン（Figma Make 決定稿 dLwIZznsLh0lUKUBBibSJo v15）──
   黒ページの中に白い紙面を全幅で敷き、02業界別・03オーダーメイドを載せる。
   全幅は calc(50%-50vw) でなく、JSが実測した --wk-bleed / --wk-vw を使う（カラム内で親が中央にないため） */
.wk-lightzone { position: relative; z-index: 0; color: var(--black); padding-bottom: clamp(48px,6vw,96px); }
.wk-lightzone::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(-1 * var(--wk-bleed, 0px)); width: var(--wk-vw, 100vw);
  background: #fff;
}
.wk-lightzone .tr-sub { color: rgba(18,14,9,.55); }
.wk-lightzone .wk-secnum__big { color: rgba(200,169,110,.12); }
/* 透かし番号はセクション面の内側に収める（Figma: 見出しブロックの真横。
   既定の top:-.35em だと面の切り替わり線をまたいでしまう）。tr-sec の上パディング分だけ下げる */
.wk-lightzone .wk-secnum__big { top: calc(clamp(48px,7vw,110px) - .06em); }
/* 白面の先頭セクション（#wk-industry「業界別導入事例」）は、ページ先頭用の縮小ルール .tr-sec:first-child が
   白面ラッパーの中でも効いてしまい、上パディングが clamp(20px,3vw,40px) に縮んでいた（1440pxで40px。03・制作の流れは101px）。
   2026-09-11 本人指示「ここのパディングが欲しい」→ 他のセクションと同じ標準値に戻す。
   透かし番号も上の標準の式（.wk-lightzone .wk-secnum__big）で見出しと一緒に下がるので、先頭専用の top 上書きは外した
   （2026-09-07「02を上げて下が見切れないように」は、パディングが縮んでいたことへの回避策だった）。 */
.wk-lightzone > .tr-sec:first-child { padding-top: clamp(48px,7vw,110px); }

/* ── 業界フィルタ（Figma 120:1502 決定稿）──
   白パネル 1px #E5E7EB / r10、内側 padding 12px（上下）+48px（左）/16px（右）、ラベルとの間39px。
   選択中のピルだけ 30px高（padding 6/16・墨ベタ）、未選択は 26px高（padding 4/10・1px #DDD）。
   ピル間 6px、「すべて」と業界群のあいだ 16px。 */
.wk-ifilter {
  /* 背後の巨大な章番号（.wk-secnum__big は z-index:0 の absolute）が白パネルの上に
     乗ってしまうので、こちらを positioned にして前に出す */
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 39px);
  margin: 0 0 clamp(28px,3vw,48px);
  padding: 19px 16px 19px clamp(20px, 3.2vw, 48px);
  background: #fff; border: 1px solid #E5E7EB; border-radius: 10px;
}
.wk-ifilter__label {
  flex: 0 0 auto;
  font-family: var(--sans); font-weight: 500; font-size: clamp(14px,1.1vw,16px);
  line-height: 1; color: #1A1A1A;
}
.wk-ifilter__list { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-width: 0; }
.wk-ifilter__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-ichip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 16px;
  color: #555555; background: #fff; border: 1px solid #DDDDDD; border-radius: 999px;
  padding: 4px 10px; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, color .25s ease, padding .25s ease;
}
@media (hover: hover) and (pointer: fine) { .wk-ichip:hover { border-color: #BBBBBB; color: #1A1A1A; } }
.wk-ichip.is-on { background: #1A1A1A; border-color: #1A1A1A; color: #fff; padding: 6px 16px; }
.wk-ichip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 767px) {
  .wk-ifilter { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  /* 折り返す幅では「すべて」だけが独立した行になるので、群を展開して一続きに流す */
  .wk-ifilter__list { gap: 6px; }
  .wk-ifilter__group { display: contents; }
}

/* 業界の帯：白/クリーム交互。クリーム面(--alt)は全幅に敷く */
.wk-ind { position: relative; z-index: 0; padding: clamp(28px,3.2vw,52px) 0; scroll-margin-top: 110px; }
.wk-ind--alt::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(-1 * var(--wk-bleed, 0px)); width: var(--wk-vw, 100vw);
  background: #FAF9F6;
}
.wk-ind__head { display: flex; align-items: center; gap: clamp(10px,1.1vw,16px); margin: 0 0 clamp(20px,2.2vw,34px); }
.wk-ind__icon {
  flex: 0 0 auto; width: clamp(38px,3.1vw,48px); height: clamp(38px,3.1vw,48px);
  border-radius: 50%; background: #FAF9F6; border: 1px solid rgba(200,169,110,.33);
  display: grid; place-items: center; color: var(--gold);
}
.wk-ind--alt .wk-ind__icon { background: #fff; }
.wk-ind__icon svg { width: 45%; height: 45%; }
.wk-ind__eyebrow { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(10px,.72vw,12px); letter-spacing: .18em; color: rgba(200,169,110,.85); margin: 0 0 .2em; }
.wk-ind__ttl { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(17px,1.6vw,25px); letter-spacing: .06em; color: var(--black); }
.wk-ind__rule { flex: 1 1 auto; height: 1px; background: linear-gradient(to right, rgba(200,169,110,.27), transparent); }
.wk-ind__count { flex: 0 0 auto; font-family: var(--sans); font-size: clamp(10px,.8vw,12px); color: rgba(18,14,9,.45); }
.wk-ind__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.15vw,18px); }

/* 事例カード（Make: 上2px金.33＋他1px金.22 / 連番＋線＋点 / ホバーで浮き＋金下線スライドイン） */
.wk-cardx {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(8px,.7vw,12px);
  background: #FAF9F6;
  border: 1px solid rgba(200,169,110,.22); border-top: 2px solid rgba(200,169,110,.33);
  padding: clamp(16px,1.4vw,22px) clamp(16px,1.4vw,22px) clamp(20px,1.7vw,26px);
  transition: transform .2s ease;
}
.wk-cardx:hover { transform: translateY(-2px); }
.wk-cardx::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.wk-cardx:hover::after { transform: scaleX(1); }
.wk-cardx__top { display: flex; align-items: center; }
.wk-cardx__no { font-family: var(--serif); font-size: clamp(10px,.72vw,12px); letter-spacing: .18em; color: rgba(200,169,110,.65); }
.wk-cardx__line { flex: 1 1 auto; height: 1px; background: rgba(200,169,110,.13); margin: 0 clamp(8px,.8vw,12px); }
.wk-cardx__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(200,169,110,.53); transition: background .2s; }
.wk-cardx:hover .wk-cardx__dot { background: var(--gold); }
.wk-cardx__ttl { margin: 0; font-family: var(--sans); font-weight: 700; font-size: clamp(13.5px,1.05vw,16px); line-height: 1.4; color: var(--black); }
.wk-cardx__txt { margin: 0; font-family: var(--sans); font-size: clamp(11px,.85vw,12.5px); line-height: 1.85; color: rgba(18,14,9,.5); }

/* 03 オーダーメイド実績（Figma 504:66186）：クリーム面＋写真×白パネル交互 */
.wk-cus { z-index: 0; }
.wk-cus::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(-1 * var(--wk-bleed, 0px)); width: var(--wk-vw, 100vw);
  background: #F4F1EA;              /* 白パネルよりひと段深いクリーム */
}
.wk-cus { padding-bottom: clamp(48px,6vw,96px); }
/* 見出し下の罫線（03/04共通。Figma: 1056×1px） */
.wk-rule { height: 1px; background: rgba(26,26,26,.14); margin: calc(-1 * clamp(14px,1.8vw,30px)) 0 clamp(28px,3vw,48px); }
/* 交互ロウ（Figma: 528/528の2分割・ギャップなし・行間65px。白パネルは写真より23px背が高く金の下線） */
.wk-cus__list { display: flex; flex-direction: column; gap: clamp(34px,3.4vw,65px); }
/* 行の高さは白パネル（本文量）が決め、写真は行いっぱいに追従する＝どの横幅でも上下端がピッタリ揃う。
   Figmaには「写真がパネルより23px短い」段差があるが、本人FBで揃える方針に変更（2026-08-10）。
   ％min-heightでパネルを行から溢れさせる方式は、グリッドの%が行確定後に解決されて行をはみ出すので使わない */
.wk-cs { display: grid; grid-template-columns: 1fr 1fr; }
.wk-cs:nth-child(even) .wk-cs__photo { order: 2; }
.wk-cs__photo {
  margin: 0;
  min-height: clamp(200px,20vw,340px);  /* 本文が短い行でも写真がつぶれない保険 */
  overflow: hidden; background: #ddd; position: relative;
}
.wk-cs__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-cs__body {
  background: #fff; border-bottom: 2px solid var(--gold);
  padding: clamp(26px,2.35vw,45px) clamp(28px,2.5vw,48px) clamp(20px,1.8vw,34px);
  display: flex; flex-direction: column; gap: clamp(8px,.75vw,14px);
}
.wk-cs__no { font-family: var(--serif); font-weight: 400; font-size: clamp(11px,.99vw,15px); letter-spacing: .13em; color: var(--gold); }
.wk-cs__ttl { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(18px,1.49vw,26px); line-height: 1.25; letter-spacing: .14em; color: var(--black); }
.wk-cs__txt { margin: .2em 0 0; font-family: var(--sans); font-size: clamp(12px,.73vw,14px); line-height: 1.95; color: #6A7282; }
.wk-spec { display: flex; align-items: center; gap: 10px; }
.wk-spec__k { flex: 0 0 auto; font-family: var(--sans); font-size: clamp(10.5px,.8vw,12px); letter-spacing: .14em; color: var(--gold); }
.wk-spec__dash { flex: 0 0 16px; height: 1px; background: rgba(200,169,110,.25); }
.wk-spec__v { font-family: var(--sans); font-size: clamp(10.5px,.8vw,12px); color: #4A5565; }

/* 実績紹介：ライトゾーンで終わるため、.tr-body の下パディング（黒地が80〜150px見えていた）は不要（松尾FB 2026-08-10） */
#page-works .tr-body { padding-bottom: 0; }
/* 2026-08-25 本人FB「実績紹介の凡例を事業内容と同じくらいの位置(本文上端から150px)から始めたい」。
   .tr-body の上padding(51px)との差を凡例側の margin で足す（sticky の張り付き位置 top は変えない）。 */
@media (min-width: 901px) { #page-works .tr-nav { margin-top: 100px; } }

/* 04 流れ：リード文を1行に収める（松尾FB 2026-08-10。56文字がカラム幅に収まるようcqiで自動縮小） */
#wk-flow .tr-head { container-type: inline-size; }
#wk-flow .tr-sub { white-space: nowrap; font-size: min(clamp(13px, 1.05vw, 15px), 1.72cqi); }
@media (max-width: 767px) {
  #wk-flow .tr-sub { white-space: normal; font-size: clamp(13px, 3.5vw, 15px); }
}

/* 04 ご依頼から納品までの流れ（Figma 504:66295）：金丸アイコン3×2段＋回り込み接続線 */
.pf-steps { position: relative; margin-top: clamp(28px,3vw,44px); }
.pf-conn { position: absolute; inset: 0; pointer-events: none; }
.pf-conn i { position: absolute; display: block; background: var(--gold); }   /* 5セグメントの座標はJSが実測配置 */
.pf-row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.pf-row + .pf-row { margin-top: clamp(56px,5vw,96px); }   /* Figma: 段間125px（回り込み線が通る余白） */
.pf-step { width: 27.5%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf-step__c { width: clamp(84px,6.9vw,132px); height: auto; display: block; }   /* Figma 170px の0.78スケール */
.pf-step__ttl { margin: clamp(14px,1.25vw,24px) 0 0; font-family: var(--serif); font-weight: 800; font-size: clamp(14px,.94vw,18px); line-height: 1.5; color: #2D3748; }
.pf-step__bar { width: clamp(30px,2vw,38px); height: 2px; background: var(--gold); margin: clamp(8px,.7vw,13px) 0 clamp(10px,.9vw,17px); }
/* 折り返しはマークアップの <wbr> を入れた位置だけ。keep-all で語中の分断を止め、
   万一その塊すら収まらないときだけ anywhere で緊急改行させる */
.pf-step__txt { margin: 0; font-family: var(--sans); font-size: clamp(11px,.65vw,12.5px); line-height: 2.1; color: #1A1A1A;
  word-break: keep-all; overflow-wrap: anywhere; }
.pf-arrow { align-self: flex-start; margin-top: calc(clamp(84px,6.9vw,132px) / 2); transform: translateY(-50%); font-family: var(--sans); font-size: clamp(16px,1.25vw,24px); color: var(--gold); }
.pf-note { margin: clamp(30px,3vw,52px) 0 0; text-align: center; font-family: var(--sans); font-size: clamp(11px,.73vw,14px); line-height: 1.85; color: #1A1A1A; }

/* 歩みは左に索引がある分カラムが狭く、2カラムのままだと見出しの字が読めない大きさまで縮むので、
   1200px 以下で上下2段に切り替える（写真は下、見出しの列は中央に寄せる）。 */
@media (max-width: 1200px) {
  .wk-space__panel { grid-template-columns: 1fr; }
  .wk-steps > .wk-step { width: 100%; max-width: 560px; margin-inline: auto; }
  .wk-stack { aspect-ratio: 538/420; border-left: 0; border-top: 1px solid rgba(0,0,0,.02); }
}
@media (max-width: 900px) {
  .wk-space__story, .wk-space__cases { grid-template-columns: 1fr; }
  .wk-space__story { gap: clamp(18px,3vw,28px); }
  .wk-space__ttl { font-size: clamp(26px,5.6vw,44px); }
  .wk-space__num { font-size: clamp(72px,20vw,150px); right: -4%; }
  .wk-space__badge { font-size: clamp(12px,2.6vw,20px); }
  .wk-ind__grid { grid-template-columns: repeat(2,1fr); }
  /* 03: 写真上・白パネル下の縦積み（縦積みでは stretch が効かないので比率固定に戻す）。
     偶数行のPC用 order:2 を打ち消し、写真を常に先頭へ */
  .wk-cs { grid-template-columns: 1fr; }
  .wk-cs .wk-cs__photo,
  .wk-cs:nth-child(even) .wk-cs__photo { order: -1; }
  .wk-cs__photo { aspect-ratio: 528 / 360; min-height: 0; margin-bottom: 0; }
  /* 04: 縦積み。回り込み線と矢印は畳む */
  .pf-conn, .pf-arrow { display: none; }
  .pf-row { flex-direction: column; align-items: center; gap: clamp(28px,5vw,40px); }
  .pf-row + .pf-row { margin-top: clamp(28px,5vw,40px); }
  .pf-step { width: 100%; max-width: 340px; }
  .pf-step__c { width: clamp(84px,18vw,110px); }
}
@media (max-width: 560px) {
  .wk-ind__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   FrameButton（四隅シェブロンマーカー付き 共通ボタン）＝サイト標準ボタン
   使い方: <a class="frame-btn frame-btn--outline frame-btn--glow" href="#">…</a>
   コーナーマーカー(SVG)＋glowレイヤーは footer.php の自動注入JSが挿入する。
   既定はダーク面向け（outline）。明るい面では frame-btn--on-light を併用。
══════════════════════════════════════════════════════════ */
:root {
  --fb-accent:       var(--gold, #c8a96e);        /* 枠・マーカーの基調色 */
  --fb-accent-hover: var(--gold-bright, #d4b87a); /* ホバー時のマーカー色 */
  --fb-offset:       7.5px;                        /* マーカーの外側オフセット */
  --fb-hover-offset: 7px;                          /* ホバーで開く距離 */
  --fb-size:         20px;                          /* マーカーのサイズ */
}
.frame-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 1rem 2rem;
  border: 1.5px solid color-mix(in srgb, var(--fb-accent) 40%, transparent);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ecru);
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, color .3s ease, transform .12s ease, border-color .3s ease;
}
.frame-btn:hover  { background: color-mix(in srgb, var(--fb-accent) 12%, transparent); }
.frame-btn:active { transform: scale(0.985); }
.frame-btn:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 4px; }

/* variant: default（塗り） */
.frame-btn--default { background: var(--ecru); color: var(--black); border-color: var(--ecru); }
.frame-btn--default:hover { background: var(--gold-bright, #d4b87a); border-color: var(--gold-bright, #d4b87a); color: var(--black); }

/* variant: secondary（ホバーで反転） */
.frame-btn--secondary { color: var(--ecru); }
.frame-btn--secondary:hover { background: var(--ecru); color: var(--black); border-color: var(--ecru); }

/* variant: outline（枠だけ） */
.frame-btn--outline { background: transparent; }

/* glow（ホバーで背後がぼんやり光る） */
.frame-btn__glow {
  position: absolute; inset: 0; z-index: -1;
  background: var(--fb-accent);
  filter: blur(28px);
  opacity: 0; transform: scale(1);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.frame-btn--glow:hover .frame-btn__glow { opacity: 0.4; transform: scale(1.1); }

/* 四隅のシェブロンマーカー（JSで挿入） */
.frame-btn__corner {
  position: absolute;
  width: var(--fb-size); height: var(--fb-size);
  color: color-mix(in srgb, var(--fb-accent) 70%, transparent);
  pointer-events: none;
  transition: transform .3s ease-out, color .3s ease-out;
}
.frame-btn:hover .frame-btn__corner { color: var(--fb-accent-hover); }
.frame-btn__corner svg { display: block; width: 100%; height: 100%; }
.frame-btn__corner--tl { top: calc(-1 * var(--fb-offset)); left:  calc(-1 * var(--fb-offset)); }
.frame-btn__corner--tr { top: calc(-1 * var(--fb-offset)); right: calc(-1 * var(--fb-offset)); }
.frame-btn__corner--br { bottom: calc(-1 * var(--fb-offset)); right: calc(-1 * var(--fb-offset)); }
.frame-btn__corner--bl { bottom: calc(-1 * var(--fb-offset)); left:  calc(-1 * var(--fb-offset)); }
.frame-btn:hover .frame-btn__corner--tl { transform: translate(calc(-1 * var(--fb-hover-offset)), calc(-1 * var(--fb-hover-offset))); }
.frame-btn:hover .frame-btn__corner--tr { transform: translate(var(--fb-hover-offset), calc(-1 * var(--fb-hover-offset))); }
.frame-btn:hover .frame-btn__corner--br { transform: translate(var(--fb-hover-offset), var(--fb-hover-offset)); }
.frame-btn:hover .frame-btn__corner--bl { transform: translate(calc(-1 * var(--fb-hover-offset)), var(--fb-hover-offset)); }

/* default はマーカーを暗色に */
.frame-btn--default .frame-btn__corner { color: color-mix(in srgb, var(--black) 55%, transparent); }
.frame-btn--default:hover .frame-btn__corner { color: var(--black); }

/* 明るい面向け：本文・枠・マーカーを黒系に（outlineと併用） */
.frame-btn--on-light { color: var(--black); border-color: color-mix(in srgb, var(--black) 30%, transparent); }
.frame-btn--on-light:hover { background: color-mix(in srgb, var(--black) 6%, transparent); }
.frame-btn--on-light .frame-btn__corner { color: color-mix(in srgb, var(--black) 55%, transparent); }
.frame-btn--on-light:hover .frame-btn__corner { color: var(--fb-accent-hover); }

/* ══════════════════════════════════════════════════════════
   RECRUIT（toyokoh風 3カラム視差ギャラリー）接頭辞 rcx-
   中央カラム=下へ／左右カラム=上へ、スクロール連動で流れる（左右は引き目scale）
══════════════════════════════════════════════════════════ */
#recruit.rcx {
  position: relative;
  z-index: 2;                    /* ピン留めされたCOMPANY(#about sticky)の上に覆いかぶさる */
  background: #0A0806;
  height: 300vh;                 /* FV(300vh)/CASE(320vh)とスクロール尺を統一（旧500vh＝ここだけ重かった） */
}
.rcx__pin {
  position: sticky; top: 0;
  height: 100vh;                 /* ピン留めするフルビューポート */
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.rcx__gallery {
  position: absolute; inset: 0; z-index: 0;
  display: flex; justify-content: center; align-items: center;   /* 3カラム中央寄せ・上下中央（上下均等にはみ出す） */
  gap: 5.79vw;                   /* カラム間の横ギャップ（toyokoh実測110px≒5.79vw） */
  transform-origin: 50% 50%;     /* ズームアウトは画面中央基点 */
  will-change: transform;
}
.rcx__col {
  flex: 0 0 24.47vw;             /* カラム幅＝画像幅（toyokoh実測465px≒24.47vw・3カラム等幅） */
  display: flex; flex-direction: column;
  gap: 4.37vw;                   /* 画像間の縦ギャップ（toyokoh実測83px≒4.37vw） */
  will-change: transform;
}
/* SPだけ写真を差し替えるための <picture>。display:contents にすると中の <source> まで
   flex item として数えられ、その本数ぶん gap が余分に入る（中央カラムだけ252px高くなった）。
   picture 自体をブロックの flex item にして、子は img 1つだけという扱いに揃える。 */
.rcx__col picture { display: block; }
.rcx__col img {
  width: 100%; aspect-ratio: 465 / 643; object-fit: cover; display: block;   /* toyokoh実測アスペクト0.723 */
  filter: grayscale(.18) brightness(.72);
}

/* SP：toyokoh SP方式＝PCと同じ3カラムコラージュ（中央=下へ/両サイド=上へ＋ズームアウト）。
   1枚スライド式(rcx__sp-slides)は廃止。カラム幅はtoyokoh SP実測 190px/375vw≒50.7vw（左右が見切れて中央が主役） */
.rcx__sp-slides { display: none; }
@media (max-width: 767px) {
  .rcx__gallery { gap: 2.7vw; }
  .rcx__col { flex: 0 0 50.7vw; gap: 2.7vw; }
}

/* 中央テキストを浮かせる暗幕 */
.rcx__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(54% 66% at 50% 50%, rgba(13,13,16,.86) 0%, rgba(13,13,16,.52) 52%, rgba(13,13,16,.24) 100%),
    linear-gradient(rgba(13,13,16,.18), rgba(13,13,16,.18));
}
/* 中央コンテンツ（Figma div.recruit-banner__body 準拠：gap75 / max1200） */
.rcx__inner {
  position: relative; z-index: 2; text-align: center;
  width: 100%; max-width: 1200px;
  padding: clamp(48px,6vw,80px) clamp(20px,2vw,36px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(34px,3.9vw,75px);
}
/* アイブロウ「採用情報」＋横線（1127px・中央寄せ／ラベルは左寄せ） */
.rcx__eyebrow {
  align-self: center;
  width: 1127px; max-width: 100%;
  margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(9px,.9vw,15px);
}
.rcx__eyebrow-label {
  font-family: var(--sans);
  font-size: clamp(14px,1.04vw,20px);   /* Figma 20 */
  font-weight: 400;
  letter-spacing: 3.3px;                /* Figma 3.3px */
  line-height: normal;
  color: #FFF;
  text-align: left;
}
.rcx__eyebrow-rule { height: 1px; width: 100%; background: #fff; }
/* 「採用情報」→ その下の線、の順に出す。
   まとめてフェードアップすると線が最初から全幅で見えてしまうので、
   入れ物自体は動かさず、中の2つを別々に動かす。線は左から右へ伸びる。 */
/* トリガーは .is-show（Come Join Us と同一）。IntersectionObserver の .anim-up は使わない。 */
.rcx__eyebrow .rcx__eyebrow-label {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.22,.61,.21,1), transform .8s cubic-bezier(.22,.61,.21,1);
}
.rcx__eyebrow .rcx__eyebrow-rule {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(.22,.61,.21,1) .85s;   /* ラベルが出きった直後から */
}
.rcx__eyebrow.is-show .rcx__eyebrow-label { opacity: 1; transform: none; }
.rcx__eyebrow.is-show .rcx__eyebrow-rule  { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .rcx__eyebrow .rcx__eyebrow-label,
  .rcx__eyebrow .rcx__eyebrow-rule { opacity: 1; transform: none; transition: none; }
}
.rcx__title {
  font-family: var(--serif);            /* Figma: FOT-TsukuMin Pr5N → Noto Serif JP 代替 */
  font-weight: 900;                     /* Figma 1000 */
  font-size: clamp(48px,7.45vw,143px);  /* Figma 143 */
  line-height: .646;                    /* Figma 92.4/143 */
  letter-spacing: 1.76px;               /* Figma 1.76px */
  color: #FFF;
  text-align: center;
  margin: 0;
  white-space: nowrap;                  /* 常に1行 */
  text-shadow: 0 8px 40px rgba(0,0,0,.5);
}
/* リード＋ボタン（Figma right block：desc→btn gap≒48） */
.rcx__right { display: flex; flex-direction: column; align-items: center; gap: clamp(24px,2.5vw,48px); }
.rcx__lead { margin: 0; max-width: 940px; display: flex; flex-direction: column; }
.rcx__br-sp { display: none; } /* SP専用改行（PCでは1行のまま） */
/* 松尾FB：文字の出方＝toyokoh.com 方式
   タイトルは1文字ずつマスクからせり上がり（JSで文字分割・時差はJSがインライン指定）、リードは行マスクのスタガー */
.rcx__title, .rcx__lead p { overflow: hidden; }
/* 見出しは line-height .646 でグリフが行箱の上下にはみ出すため、マスク窓を上下.4emずつ拡張（負マージンでレイアウト不変）。
   文字の初期位置はこの拡張窓のさらに外（-280%）に置く */
.rcx__title { padding: .4em 0; margin: -.4em 0; }
.rcx__reveal { display: inline-block; transform: translateY(140%);
  transition: transform 1s cubic-bezier(.85,0,.15,1); will-change: transform; }   /* toyokoh実測：1s / ease(.85,0,.15,1)。マスクの下から上へ */
/* リードは本家の [data-mask-text-item=clip] 方式（下からクリップが開く）に置換 */
.rcx__lead .rcx__reveal { transform: none; transition: none; }
.rcx__lead p { overflow: visible; clip-path: inset(0% 0% 100% 0%);
  transition: clip-path 1s cubic-bezier(.85,0,.15,1) .2s; }
.rcx__lead p:nth-child(2) { transition-delay: .3s; }
.rcx__lead p:nth-child(3) { transition-delay: .4s; }
.rcx__lead.is-show p { clip-path: inset(0% 0% 0% 0%); }
/* ボタンは本家の [data-mask-text-item=block] 方式（マスク窓の下からブロックごとせり上がる） */
.rcx__btnwrap { display: block; overflow: hidden; }
.rcx__btn { transform: translateY(110%); transition: transform 1s cubic-bezier(.85,0,.15,1) .35s; }
.rcx__right.is-show .rcx__btn { transform: translateY(0); }
/* せり上がり用のマスク(overflow:hidden)は、四隅ブラケットがボタンの外側7pxに置かれるため
   そのままだとブラケットごと切り取ってしまう（ホバーで広がる動きが見えなくなる）。
   せり上がり（0.35s待ち＋1s）が終わった時点でマスクを解除する。
   overflow は補間できないがキーフレームなら離散的に切り替わるので、
   0秒アニメ＋遅延＋forwards で「終わったら visible」を実現している。 */
.rcx__right.is-show .rcx__btnwrap { animation: rcxUnmask 0s linear 1.45s forwards; }
@keyframes rcxUnmask { to { overflow: visible; } }
@media (prefers-reduced-motion: reduce) { .rcx__btnwrap { overflow: visible; } }
/* タイトル側：外側スパンは動かさず、中の1文字スパンが個別に上から降りてくる（toyokoh RECRUITセクション実測） */
.rcx__title .rcx__reveal { transform: none; transition: none; }
/* toyokoh実測：マスクの【下】に隠しておき、1s / cubic-bezier(.85,0,.15,1) でせり上がる。
   line-height .646 で行箱よりグリフが大きいため、280%＝拡張マスク窓(+.4em)の外まで完全に逃がす */
.rcx__ch { display: inline-block; transform: translateY(280%); white-space: pre;
  transition: transform 1s cubic-bezier(.85,0,.15,1); will-change: transform; }
.rcx__title.is-show .rcx__ch { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) { .rcx__reveal, .rcx__ch, .rcx__btn { transform: none !important; transition: none; } .rcx__lead p { clip-path: none !important; } }
.rcx__lead p {
  font-family: var(--serif);            /* Figma: FOT-TsukuMin Pr5N → Noto Serif JP 代替 */
  font-weight: 400;
  font-size: clamp(16px,1.56vw,30px);   /* Figma 30 */
  line-height: 2.2667;                  /* Figma 68/30 */
  letter-spacing: 1.5px;                /* Figma 1.5px */
  color: #FFF;
  text-align: center;
  margin: 0;
}
/* 「採用情報を見る」ボタン（Figma: serif gold / 326x85 / 暗fill / gold枠） */
/* 採用情報を見る：松尾FB「文字ゴシックで」＋「ボタンはABOUTのサイズ感・文字色に全統一」→ .frame-btn 基準（ゴシック/ecru文字） */
#recruit .rcx__btn { text-transform: none; }
@media (max-width: 767px) {
  .rcx__title { font-size: clamp(40px, 13vw, 68px); }
}
@media (prefers-reduced-motion: reduce) {
  .rcx__col { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CASE STUDIES ピン留めヒーロー（positive.co.jp風・スクロールで背景切替 / ダーク面）
   見出し＋カード固定・背景写真(case_p1→p2→p3)がクロスフェード
══════════════════════════════════════════════════════════ */
.cs-pin { position: relative; height: 320vh; }              /* スクロール量＝3画面ぶん */
/* 左右の余白にはライトなクリスタル背景(Mask group 65)＋#F5F3EF を敷く */
.cs-pin__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; background: #F5F3EF url(../images/cs_crystal_bg.jpg) center/cover no-repeat; }
/* 写真パネルは左右87px（＋上下）の余白で中央に収める */
.cs-pin__frame { position: absolute; inset: 0 87px 0; z-index: 0; overflow: hidden; background: #000; } /* Figma準拠：上下は余白なし（旧・上clamp(36px,6vh,72px)がクリーム地の「上の隙間」の原因）。左右87pxのみ */
/* 窓（クリップ）：下からスライドアップ */
.cs-pin__bg { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.cs-pin__ph2 { transform: translateY(101%); }
.cs-pin__ph3 { transform: translateY(101%); }
/* 内側画像：scale 1.8→1.0 でズームアウト＝奥行き（参考サイト positive.co.jp と同方式） */
/* 松尾FB：写真をレタッチ版(明るい)に差し替えたため、旧来の brightness(1.55) では白飛びして
   見出し・カードが読めなくなった。持ち上げをやめて黒靄をかける方向へ反転。 */
.cs-pin__bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.5) contrast(1.06) saturate(.92); will-change: transform; transform: scale(1); }
.cs-pin__ph1 .cs-pin__bgimg { background-image: url(../images/case_p1.webp); }
.cs-pin__ph2 .cs-pin__bgimg { background-image: url(../images/case_p2.webp); transform: scale(1.8); }
.cs-pin__ph3 .cs-pin__bgimg { background-image: url(../images/case_p3.webp); transform: scale(1.8); }
/* 写真は明るく見せつつ、上下だけ軽く暗くして白文字の可読性を確保（中央は明るいまま＝切替が分かりやすい） */
/* 黒靄：上下を濃く、中央も十分に落として文字の可読性を確保する */
.cs-pin__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.42) 30%, rgba(8,8,8,.38) 58%, rgba(8,8,8,.72) 100%); }
.cs-pin__content { position: relative; z-index: 2; text-align: center; padding: clamp(40px,6vh,80px) clamp(28px,4vw,56px); max-width: 1040px; width: 100%; }
/* コンパクト化：ボタン下に黒余白を確保しつつタイトルをナビからクリア */
.cs-pin .cs-title { font-size: clamp(44px,9vw,108px); }   /* 松尾FB 2026-08-10：もう一回り大きく（90px→108px）。SPは下の767px以下の指定が別に効く */
.cs-pin .cs-lead { margin: clamp(14px,1.8vw,24px) 0 0; }
/* Figma準拠：縦長カード（本文の下に余白）／内容は上寄せ */
.cs-pin .cs-cards { max-width: 820px; }
.cs-pin .cs-card { min-height: clamp(270px,31vh,340px); padding: clamp(18px,2.2vw,30px) clamp(18px,1.8vw,26px) clamp(26px,3vw,40px); }
.cs-pin .cs-card__thumb { width: clamp(72px,7vw,100px); margin-bottom: clamp(12px,1.4vw,18px); }
.cs-pin .cs-titlerow { justify-content: center; }
.cs-pin .cs-cards { margin-top: clamp(26px,3.4vw,46px); }
/* 写真を暗くせず白文字を読ませるための影 */
.cs-pin .cs-titlerow { filter: drop-shadow(0 3px 14px rgba(0,0,0,.6)); }
.cs-pin .cs-lead { text-shadow: 0 2px 14px rgba(0,0,0,.75); }
/* スクロールヒント */
.cs-pin__btn { margin-top: clamp(28px,4vw,48px); }   /* 旧インラインstyle。SPの短い画面でCSSから上書きできるようにクラス化 */
.cs-pin__hint { position: absolute; left: 50%; bottom: clamp(18px,3vw,40px); transform: translateX(-50%); z-index: 2; font-family: var(--sans); font-size: 11px; letter-spacing: .25em; color: rgba(245,243,239,.5); }
.cs-pin__hint::after { content: ""; display: block; width: 1px; height: 36px; margin: 9px auto 0; background: linear-gradient(rgba(245,243,239,.5), transparent); }
@media (prefers-reduced-motion: reduce) {
  .cs-pin { height: auto; }
  .cs-pin__stage { position: static; height: auto; min-height: 90vh; }
}
/* SPスライドキャプション＆カウンター（positive.co.jp SP風）— PCでは非表示 */
.cs-sp-caps { display: none; }
.cs-pin__counter { display: none; }
@media (max-width: 767px) {
  .cs-pin { height: 280vh; }
  .cs-pin__content { padding-top: clamp(60px,10vh,90px); }
  .cs-pin__frame { inset: 0; } /* 松尾FB(SP)：左右の隙間をうめて全幅（positive.co.jp と同様） */
  /* タイトル行：SPは縦積みで中央（横はみ出し防止） */
  .cs-pin .cs-titlerow { flex-direction: column; align-items: center; gap: 10px; }
  .cs-pin .cs-title { font-size: clamp(30px,9vw,40px); letter-spacing: .02em; }   /* 松尾FB(SP)：文字サイズ大きく */
  .cs-pin .cs-lead { font-size: 14px; line-height: 1.9; padding: 0 4px; }
  .cs-br-sp { display: inline; } /* 松尾FB(SP)：「出さずに、」で改行 */
  .cs-pin__content { padding-inline: 22px; }
  /* PC版の四角ボックス（コーナーブラケット付き）をSPでは横長にして縦3つ並べる */
  /* 松尾FB(SP)：カードは画面幅の約75%にして左右の余白を広げる */
  .cs-pin .cs-cards { grid-template-columns: 1fr; gap: 12px; width: 75vw; max-width: 75vw;
    margin: clamp(16px,3vh,26px) auto 0; }
  .cs-pin .cs-card { min-height: 0; padding: 14px 16px; display: grid; grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto; gap: 4px 14px; align-items: center; text-align: left; }
  .cs-pin .cs-card__thumb { width: 52px; margin: 0; grid-row: 1 / 3; align-self: center; }
  .cs-pin .cs-card__ttl { font-size: 16.5px; letter-spacing: .08em; margin: 0 0 .35em; }   /* 松尾FB(SP)：文字サイズ大きく */
  .cs-pin .cs-card__ttl br { display: none; } /* 横長カードでは1行に */
  .cs-pin .cs-card__txt { font-size: 12px; line-height: 1.65; }
  .cs-sp-caps { display: none; } /* キャプション切替は廃止（カード表示に戻したため） */
  .cs-pin__counter { display: block; position: absolute; left: clamp(26px,8vw,44px); bottom: 22px; z-index: 2;
    font-family: var(--sans); font-size: 12px; letter-spacing: .2em; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.6); }
  .cs-pin__counter #cs-pin-cur { font-size: 14px; }
}
/* 松尾FB(SP)：縦の短い端末（iPhone SE/Android 640〜720px級）で「事例一覧へ」ボタンが
   ピン枠の下から見切れていたため、短い画面だけ各要素を詰めて1画面に必ず収める。
   実測：360×640 でボタン下端 729px vs 枠640px＝89pxはみ出し / 390×667 でぴったり接触 */
@media (max-width: 767px) and (max-height: 800px) {
  .cs-pin__content { padding-top: clamp(30px,5vh,58px); padding-bottom: clamp(46px,7vh,64px); }
  .cs-pin .cs-titlerow { gap: 6px; }
  .cs-pin .cs-title { font-size: clamp(26px,7.6vw,34px); }
  .cs-pin .cs-lead { font-size: 12.5px; line-height: 1.72; margin-top: 8px; }
  .cs-pin .cs-cards { gap: 8px; margin-top: 12px; }
  .cs-pin .cs-card { padding: 10px 13px; gap: 2px 11px; grid-template-columns: 44px 1fr; }
  .cs-pin .cs-card__thumb { width: 44px; }
  .cs-pin .cs-card__ttl { font-size: 14.5px; margin: 0 0 .25em; }
  .cs-pin .cs-card__txt { font-size: 11px; line-height: 1.55; }
  .cs-pin__btn { margin-top: 14px; padding: 12px 26px; font-size: 12px; }
  .cs-pin__hint { display: none; }   /* ボタンと重なるので短い画面では出さない */
  .cs-pin__counter { bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   SP RESPONSIVE PASS（モバイル最適化＋ハンバーガーメニュー）
   ─ SPデザイン非提供のため、PC版のトーン（黒×ゴールド×明朝）を
     保ったままモバイル向けに再構成 ─
═══════════════════════════════════════════════════════════ */

/* ── ハンバーガーボタン（≦768で表示） ── */
.nav-burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-left: 8px; padding: 0;
  background: transparent;
  border: 1px solid rgba(200,169,110,.45);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-burger span {
  position: absolute; left: 12px; right: 12px; height: 1.6px;
  background: var(--ecru);
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 27px; }
.nav-burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ── フルスクリーンメニュー ── */
#sp-menu {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,12,.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 7vw 40px;
}
#sp-menu.open { opacity: 1; pointer-events: auto; }
.sp-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7vh; }
.sp-menu__logo { font-family: var(--serif); letter-spacing: .28em; font-size: 13px; color: var(--ecru); }
.sp-menu__close { background: none; border: none; color: var(--gold); font-size: 32px; line-height: 1; cursor: pointer; padding: 6px 10px; }
.sp-menu__nav { display: flex; flex-direction: column; gap: clamp(18px,3.4vh,30px); overflow-y: auto; }
.sp-menu__item {
  display: flex; align-items: baseline; gap: 14px; text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}
#sp-menu.open .sp-menu__item { opacity: 1; transform: none; }
.sp-menu__en { font-family: var(--serif); font-size: clamp(28px,4.2vh,36px); color: var(--ecru); letter-spacing: .06em; }
.sp-menu__jp { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.sp-menu__item:active .sp-menu__en { color: var(--gold); }
html.sp-menu-open, html.sp-menu-open body { overflow: hidden; }
/* 新ヘッダー（Figma 504:1651）はPCでもハンバーガーを出すため、769px以上でも隠さない。
   #sp-menu は opacity/pointer-events で閉じているので display 指定は不要。 */

/* ── COMPANY（about-split）1カラム化 ── */
@media (max-width: 860px) {
  #about { padding: 88px 0; }
  .about-split { grid-template-columns: 1fr; gap: 44px; padding: 0 6%; }
  /* 原本は縦長(3:4)。SPはスクエアで顔まわりを広く見せる */
  .about-split__photo { aspect-ratio: 1/1; max-height: 460px; }
  .about-split__photo img { object-position: 50% 20%; }
  .cbrow { max-width: 100%; }
}
/* 松尾FB(SP)：COMPANYの写真は非表示にしてテキストだけを見せる */
@media (max-width: 767px) {
  .about-split__photo { display: none; }
  .about-split { gap: 0; }

  /* 松尾FB(SP)：写真を消したぶん文字が小さく見えるので、見出し・本文を一回り大きくする。
     リンク行（代表メッセージ／会社概要／沿革）は右のアキを確保した調整済みなのでサイズを変えない。 */
  .about-split__label     { font-size: 38px; }                       /* COMPANY：30→38px */
  .about-split__label-sub { font-size: 14px; letter-spacing: .2em; margin-bottom: 24px; }  /* 会社案内：12→14px */
  .about-split__heading   { font-size: 18px; line-height: 1.95; }    /* 本文：15→18px */
}

/* ── ≦768px：FV・ナビ・各セクション ── */
@media (max-width: 768px) {
  #global-nav > a:not(.nav-logo) { display: none; }  /* Contactチップはメニュー内へ */
  .nav-burger { display: block; }

  /* ── FVフォト：松尾FB「写真横のままにできないかな？」＝PCと同じ横長比率（876:497）を維持 ── */
  .fv-photo { width: 88vw; height: 49.9vw; max-width: none; }

  /* ── FVフォト登場（Matsuo風：フェード＋上昇＋内部ゆっくりズーム）──
     JSは .fv-photo 本体のtransformを操作するため、演出は内側ラッパーに載せて競合を回避 */
  .fv-photo .fv-photo-inner {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.1s ease, transform 1.25s cubic-bezier(.22,1,.36,1);
  }
  .fv-photo.loaded .fv-photo-inner { opacity: 1; transform: none; }
  .fv-photo.loaded .fv-images { animation: fvKenburnsSP 8.5s cubic-bezier(.16,1,.3,1) both; }

  /* ── FVタイトル（Takeda SP実挙動：行マスクは使わず、ブロック全体をやわらかくフェード＋微上昇）──
     ※JSが.fv-copy本体のtransformを書くため、上昇は行スパン側に載せる */
  .fv-line { overflow: visible; }
  .fv-main-copy, .fv-line__in {
    transform: translateY(16px);
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(.25,.46,.45,.94), transform 1.1s cubic-bezier(.25,.46,.45,.94);
  }
  .fv-copy.is-in .fv-line--l1 .fv-line__in,
  .fv-copy.is-in .fv-line--l2 .fv-line__in { transform: translateY(0); opacity: 1; transition-delay: .15s; }  /* 2行同時 */
  .fv-sub__in { transition: opacity 1.4s cubic-bezier(.25,.46,.45,.94), transform 1.4s cubic-bezier(.25,.46,.45,.94); }
  .fv-copy.is-in .fv-sub__in { transition-delay: .35s; }  /* SPもタイトル・写真とほぼ同時 */

  /* FV ABOUT（右コラム）→ 全幅・1画面に収まるサイズに再構成（タイトルはJSでフェードアウトして交代）
     松尾FB(SP)：文字を大きく（matsuo-komuten.co.jp くらい） */
  .fv-about-right { left: 6.5vw; right: 6.5vw; width: auto; bottom: 2.2vh; }
  /* 松尾工務店サイト(SP)の実測に合わせる：幅390pxで20.8px＝5.333vw／行間1.6／字間0.01em。
     向こうは見出しも本文も同じ大きさなので、こちらも金色見出し・本文・「誠実に、」を同寸に揃える
     （見出しは色とウェイトで見分けがつく）。 */
  .fv-about-right .asl--gold .asl__in,
  .fv-about-right .asl--white .asl__in,
  .fv-about-right .asl--gold.asl--w .asl__in { font-size: clamp(17px, 5.333vw, 24px); line-height: 1.6; letter-spacing: .01em; }
  /* 金色の見出しだけ一回り大きく（本文の約1.2倍・幅390pxで25px）。
     「誠実に、ひたむきに。」は .asl--w が付いた本文扱いなので対象外にする。 */
  .fv-about-right .asl--gold:not(.asl--w) .asl__in { font-size: clamp(20px, 6.4vw, 28px); }
  /* 改行はHTMLの<br>どおり。文字を松尾サイトと同寸にすると1行は約16文字までなので、
     長い行には <br class="br-sp"> をSPだけ追加して行末の泣き別れを防いでいる。 */
  .fv-about-right .asl__in br,
  .fv-about-right .asl__in .br-sp { display: inline; }
  /* 文字を大きくした分、段落まわりの余白を詰めて1画面に収める（上が見切れないように） */
  .fv-about__group { margin-bottom: 8px; }
  .fv-about-right .asl--gold  { margin-bottom: 14px; }   /* 松尾FB：見出しと本文の間は広めを維持 */
  .fv-about-right .asl--white { margin-bottom: 3px; }

  /* RECRUIT：Come Join Us！を1行で収める＋リードを引き締め */
  .rcx__title { font-size: clamp(30px, 10.5vw, 143px); letter-spacing: 1px; }
  .rcx__lead p { font-size: 14.5px; line-height: 2; letter-spacing: .5px; }
  .rcx__br-sp { display: inline; } /* SPは「誠実に、そして本気で／向き合える〜」で改行 */

  /* CONTACT：見出しを1行で収める */
  .contact-headline { font-size: 22px; letter-spacing: 1px; }

  /* FOOTER：ナビ列を3列グリッドで整列 */
  .ft-nav { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px 14px; }
  .ft-col__list a { white-space: normal; }

  /* STRENGTH フィナーレ（松尾FB(SP)：すきまをあけて、ひとつひとつ大きく） */
  .strength-marquee__photo { width: 170px; height: 80px; }
  .fv-strength { gap: clamp(30px, 6.5vh, 64px); padding-bottom: 9vh; }
  .fv-strength__plates { row-gap: 80px; }   /* 炎205pxがプレート間隔を超えて連結しないよう拡大（46px→80px＝間隔217px） */
  .fv-strength .number-plate__val { font-size: clamp(56px, 16vw, 72px); }
  .fv-strength .number-plate__label { font-size: clamp(18px, 4.8vw, 21px); }
  .fv-strength .number-plate__desc  { font-size: clamp(13.5px, 3.6vw, 16px); }
  .fv-strength .number-plate__flame { width: auto; height: 205px; opacity: .95; }  /* 松尾FB：SPの炎が小さく見にくいので拡大（128px→205px）。プレート間隔(約230px)より小さく保ち連結を防ぐ */

  /* 課題バンド */
  #challenge-band .chband__btn { padding: 16px 26px; font-size: 15px; letter-spacing: .14em; }
  .chband__lead { font-size: 14px; line-height: 1.95; }
  .chband__lead br { display: none; }
}

/* FVフォトSPエントリー用：内部ゆっくりズーム（1.1→1.0） */
@keyframes fvKenburnsSP {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

/* ── ≦420px：最小画面の微調整 ── */
@media (max-width: 420px) {
  /* FVコピーのサイズ指定はここでは打ち消さない（松尾サイト実測の 5.333vw をそのまま効かせる） */
  .sp-menu__en { font-size: 27px; }
  .fv-strength .number-plate__val { font-size: 56px; }
}

/* ── ≦360px：見出しを大きくした分、余白を詰めて1画面に収める（文字サイズは変えない） ── */
@media (max-width: 360px) {
  .fv-about-right { bottom: 1.2vh; }
  .fv-about-right .asl--gold  { margin-bottom: 10px; }
  .fv-about-right .asl--white { margin-bottom: 1px; }
  .fv-about__group { margin-bottom: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   OUR BUSINESS（直しカンプ 504:1857 / 521系 準拠）接頭辞 obn-
   動き：subculture.makery.co.jp 方式
   ・白ポリゴンパネルが全画面→中央574pxカードへ縮む（JS駆動）
   ・カード着地後、左右に Approach 01/02（金アウトライン数字）→ 詳細が段階表示
   ・寸法は 1920カンプ実測 × var(--obn-s)（=カード幅/574）で相似縮小
═══════════════════════════════════════════════════════════ */
.obn { background: #080706; --obn-s: 1; position: relative; z-index: 5; }   /* 松尾FB：eat-play-sleep.org 実測の黒／次セクションを背後に潜らせるため z-index */
.obn__spacer { height: 350vh; }   /* 2026-09-04 演出完了後にスクロールしても画面が動かない区間があったため 430→350vh。JS側の段階割りも同率で伸ばし、各フェーズの実スクロール量は据え置き */
.obn__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.obn__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 100vh;
  background: #F5F3EF url(../images/obn_bg.jpg?v=3) center / cover no-repeat;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.obn__head { position: absolute; top: clamp(160px, 27vh, 320px); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }   /* 松尾FB：OUR BUSINESSの上にパディング（旧7vh） */
.obn__title { margin: 0; font-family: var(--serif); font-weight: 800;
  font-size: clamp(40px, 4.31vw, 83px); line-height: 1.15; letter-spacing: .02em; color: var(--gold); text-transform: uppercase; }
.obn__title-ja { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 700;
  font-size: clamp(14px, 1.35vw, 26px); letter-spacing: .12em; color: #1A1A1A; }
.obn__lead { position: relative;   /* top は JS が全画面時のみ下げる（カード化で 0 = 中央） */
  margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: calc(30px * var(--obn-s)); line-height: 2.14; letter-spacing: 0; color: #1A1A1A; text-align: center;
  white-space: nowrap; }   /* 松尾FB：カード縮小時に勝手に改行させない（あふれた分はパネル側でクリップ） */
/* カード着地後に出る金の外枠（カード+20px） */
.obn__frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid var(--gold); opacity: 0; z-index: 1; pointer-events: none; }
/* APPROACH 列（カンプ：カード中心基準で 左=中心-754px / 右=中心+381px、幅380px） */
.obn__ap { position: absolute; width: calc(380px * var(--obn-s)); opacity: 0; z-index: 3; will-change: transform, opacity; }
.obn__ap--l { left: calc(50% - 754px * var(--obn-s)); }
.obn__ap--r { left: calc(50% + 381px * var(--obn-s)); }
/* 松尾FB：左右列のデザインをカンプに一致させる＝ラベルは淡く中央/数字は暗めのアウトラインで背面/本文は行間ゆったり/タグは暗色塗り＋金枠 */
.obn__ap-label { position: absolute; top: calc(-34px * var(--obn-s)); left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-weight: 500; font-size: calc(20px * var(--obn-s));
  letter-spacing: .45em; text-indent: .45em; text-transform: uppercase; color: rgba(200,169,110,.5); white-space: nowrap; }
.obn__ap-num { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  /* 松尾FB：01/02はSTRENGTHマーキーと同じフォント・色（明るいゴールドの輪郭線） */
  font-family: var(--serif); font-weight: 500; font-size: calc(187px * var(--obn-s));
  line-height: 1.085; letter-spacing: -.026em; color: transparent; -webkit-text-stroke: 1.8px var(--gold); }
.obn__ap-detail { position: absolute; left: 0; right: 0; top: calc(64px * var(--obn-s)); opacity: 0; will-change: transform, opacity; }
.obn__ap-ttl { margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: calc(32.9px * var(--obn-s)); line-height: 1.15; color: #FFF; text-align: center; white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.obn__ap-en { display: block; margin-top: calc(26px * var(--obn-s)); font-family: var(--serif);
  font-weight: 700; font-size: calc(24.6px * var(--obn-s)); letter-spacing: .09em; color: #FFF; text-align: center; }
/* 説明ボックス：細い金枠＋四隅の小さなコーナーティック（カンプ準拠） */
.obn__ap-desc { position: relative; margin: calc(43px * var(--obn-s)) auto 0; width: calc(363px * var(--obn-s));
  padding: calc(46px * var(--obn-s)) calc(28px * var(--obn-s)); border: 1px solid rgba(200,169,110,.45); }
.obn__ap-desc::before {
  content: ""; position: absolute; inset: calc(-8px * var(--obn-s)); pointer-events: none; background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold));
  background-size:
    calc(10px * var(--obn-s)) 1.4px, 1.4px calc(10px * var(--obn-s)),
    calc(10px * var(--obn-s)) 1.4px, 1.4px calc(10px * var(--obn-s)),
    calc(10px * var(--obn-s)) 1.4px, 1.4px calc(10px * var(--obn-s)),
    calc(10px * var(--obn-s)) 1.4px, 1.4px calc(10px * var(--obn-s));
  background-position: left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom;
  transition: inset .45s cubic-bezier(.22,.61,.36,1), background-size .45s cubic-bezier(.22,.61,.36,1);
}
/* 松尾FB：ホバーで四つ角が外へ開く（ボタン/柔軟性カードと同じ動き） */
.obn__ap-desc:hover::before {
  inset: calc(-18px * var(--obn-s));
  background-size:
    calc(18px * var(--obn-s)) 1.4px, 1.4px calc(18px * var(--obn-s)),
    calc(18px * var(--obn-s)) 1.4px, 1.4px calc(18px * var(--obn-s)),
    calc(18px * var(--obn-s)) 1.4px, 1.4px calc(18px * var(--obn-s)),
    calc(18px * var(--obn-s)) 1.4px, 1.4px calc(18px * var(--obn-s));
}
@media (prefers-reduced-motion: reduce) { .obn__ap-desc::before { transition: none; } }
.obn__ap-desc p { margin: 0; font-family: var(--sans); font-weight: 400; font-size: calc(16.5px * var(--obn-s));
  line-height: 2; color: #FFF; }
.obn__ap-tags { display: flex; justify-content: center; gap: calc(14px * var(--obn-s));
  margin: calc(36px * var(--obn-s)) 0 0; padding: 0; list-style: none; }
.obn__ap-tags li { display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(110px * var(--obn-s)); height: calc(52px * var(--obn-s)); padding: 0 calc(16px * var(--obn-s));
  background: linear-gradient(180deg, #2A2216 0%, #191410 100%);
  border: 1px solid rgba(200,169,110,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.4);
  font-family: var(--serif); font-weight: 800; font-size: calc(21.5px * var(--obn-s));
  letter-spacing: .13em; color: #FFF; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .obn__spacer { height: auto; }
  .obn__stage { position: static; height: auto; }
  /* obn の固定が無いので、次セクションの潜り込みも解除する */
  #challenge-band.chband { margin-top: 0; height: auto; }
  .chband__sticky { position: static; min-height: clamp(420px, 50vw, 620px); }
}
/* ── SP（≦767px）：Figma 549:204「TOP_事業内容SP」(750px幅) 準拠 ──
   動きはPCと同じ（白パネル全画面→中央カード→APPROACH展開）。配置だけ縦に組み替え、
   01はカードの【上】、02はカードの【下】に置く。寸法は750pxコンプ実測×var(--obn-s)（=画面幅/750）で相似縮小。 */
.obn__br-sp { display: none; }
/* PCは1行なので OUR と BUSINESS の間に語間を入れる（SPは <br> で改行するので消す）。
   マークアップに生の空白を置くと、SPで行頭の空白として残り中央揃えがずれる。 */
.obn__gap { display: inline-block; width: .3em; }
@media (max-width: 767px) {
  .obn__gap { display: none; }
  .obn { --obn-s: .52; }                  /* JS実行前の既定値（390px幅想定）＝初期描画で巨大化しない */
  .obn__br-sp { display: inline; }        /* 見出しは「OUR / BUSINESS」の2行 */
  .obn__spacer { height: 464vh; }   /* 2026-09-04 PCと同じく完了後の無反応区間を圧縮（520→464vh） */
  .obn__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

  .obn__panel { padding: 0; }
  .obn__head { top: clamp(104px, 20vh, 190px); }
  .obn__title { font-size: calc(82.8px * var(--obn-s)); line-height: 1.2; letter-spacing: .03em; }
  .obn__title-ja { margin-top: calc(18px * var(--obn-s)); font-size: calc(37px * var(--obn-s)); }
  .obn__lead { font-size: calc(36px * var(--obn-s)); line-height: 2.14;
    transform-origin: center; will-change: transform; }   /* カード縮小に追従して縮める（JSがscaleを指定） */

  /* APPROACH列：カードの上下に絶対配置（topはJSが算出）。数字は見出しの背面に重ねる */
  .obn__ap { position: absolute; left: 50%; right: auto; transform: translateX(-50%);
    width: calc(663px * var(--obn-s)); min-height: calc(303px * var(--obn-s));
    text-align: center; padding: 0; }
  .obn__ap-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    font-size: calc(23.6px * var(--obn-s)); letter-spacing: .45em; text-indent: .45em; }
  .obn__ap-num { position: absolute; top: calc(63px * var(--obn-s)); left: 50%; transform: translateX(-50%);
    font-size: calc(221px * var(--obn-s)); line-height: 1; z-index: 0; }
  .obn__ap-detail { position: relative; z-index: 1; top: auto; left: auto; right: auto;
    padding-top: calc(114px * var(--obn-s)); }
  .obn__ap-ttl { font-size: calc(44px * var(--obn-s)); white-space: nowrap; }   /* OBN-SP-FIT（2026-11-06・本人「タイトルがスマホサイズによっては見切れる」）: 49.4 → 44。箱は 663 なので 15 文字（図面をかたちに、完璧に仕上げる）まで 1 行に収まる（49.4 だと 741＝箱より広く、縦長の iPhone で右が切れていた） */
  .obn__ap-en { margin-top: calc(16px * var(--obn-s)); font-size: calc(29px * var(--obn-s)); }
  .obn__ap-desc { width: calc(635px * var(--obn-s)); margin: calc(42px * var(--obn-s)) auto 0;
    padding: calc(26px * var(--obn-s)); }
  .obn__ap-desc::before { inset: calc(-9px * var(--obn-s));
    background-size:
      calc(14px * var(--obn-s)) 1.4px, 1.4px calc(14px * var(--obn-s)),
      calc(14px * var(--obn-s)) 1.4px, 1.4px calc(14px * var(--obn-s)),
      calc(14px * var(--obn-s)) 1.4px, 1.4px calc(14px * var(--obn-s)),
      calc(14px * var(--obn-s)) 1.4px, 1.4px calc(14px * var(--obn-s)); }
  .obn__ap-desc p { font-size: max(13px, calc(24px * var(--obn-s))); line-height: 1.8; text-align: justify; text-justify: inter-character;
    word-break: normal; text-wrap: wrap; }   /* OBN-SP-FIT（2026-11-06・本人「改行が iPhone で変なところで」「右に変な余白」）: SP 共通の文節折り（auto-phrase）・行ならし（pretty）を外し、行末まで詰めて両端そろえ（元 text-align: left。禁則の line-break: strict は SP 共通のまま） */
  .obn__ap-tags { justify-content: center; gap: calc(16px * var(--obn-s)); margin-top: calc(22px * var(--obn-s)); }
  .obn__ap-tags li { min-width: calc(159px * var(--obn-s)); height: calc(71px * var(--obn-s));
    padding: 0 calc(14px * var(--obn-s)); font-size: calc(30.2px * var(--obn-s)); }
}

/* ── CASEカード：EP参考の「中央1枚→左右がせり出して3枚」展開（松尾FB rec12・PCのみ） ── */
@media (min-width: 768px) {
  .cs-pin .cs-card { will-change: transform, opacity; }
  .cs-pin .cs-card:nth-child(2) { position: relative; z-index: 2; }   /* 中央カードが手前＝左右は背面から出てくる */
  .cs-pin .cs-card:nth-child(1),
  .cs-pin .cs-card:nth-child(3) {
    opacity: 0; z-index: 1;
    transition: transform 1.2s cubic-bezier(.22,.61,.21,1) .5s, opacity .9s ease .5s;
  }
  .cs-pin .cs-card:nth-child(1) { transform: translateX(calc(100% + clamp(14px,1.6vw,24px))); }
  .cs-pin .cs-card:nth-child(3) { transform: translateX(calc(-100% - clamp(14px,1.6vw,24px))); }
  .cs-pin .cs-cards.is-spread .cs-card:nth-child(1),
  .cs-pin .cs-cards.is-spread .cs-card:nth-child(3) { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-pin .cs-card:nth-child(1), .cs-pin .cs-card:nth-child(3) { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════
   BUSINESS PAGE（事業内容 / Figma 89:2374 準拠）接頭辞 bz-
═══════════════════════════════════════════ */
.bz { background: var(--kuro); }   /* 旧 #0f0d0b＝TOPよりわずかに明るい。TOPの黒に統一 */

/* HERO */
/* 寸法は会社概要（.cp-hero）に統一：上の余白 --hero-gap ＋ 写真面 --hero-media、左右 --hero-inset
   Figma 89:2374 実測でも写真面は x=93 / w=1734（＝左右93px）で一致 */
.bz-hero { position: relative; height: calc(var(--hero-gap) + var(--hero-media)); overflow: hidden; background: var(--kuro); }
.bz-hero__media { position: absolute; top: var(--hero-gap); bottom: 0; left: 50%; transform: translateX(-50%); width: min(1734px, 95.2vw); }
.bz-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
/* 松尾FB 2026-08-10：左寄りグラデ（左端は地の黒ベタ）だと写真の左側が「ぼやけて」見える。
   会社概要ヒーロー（.cp-hero__scrim）と同じ均一スクリムに統一 */
.bz-hero__media::before { content: ""; position: absolute; inset: 0; background: rgba(26,26,26,.66); opacity: .8; }
.bz-hero__inner { position: absolute; left: clamp(24px, 7vw, 132px); bottom: clamp(28px, 6vh, 64px); z-index: 2; }
.bz-hero__eyebrow { display: block; font-family: var(--sans); font-weight: 500; font-size: clamp(14px, 1.4vw, 27px); letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.bz-hero__title { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 4.1vw, 79px); line-height: 1.2; color: #fff; margin: 0; }

/* キャッチ帯 */
.bz-catch { background: var(--kuro); text-align: center; padding: clamp(44px, 5vw, 84px) 6% clamp(56px, 6vw, 104px); }
.bz-catch__title { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 46px); line-height: 1.6; color: #f5f3ef; margin: 0 0 clamp(24px, 2.6vw, 44px); }
/* 会社概要ヒーローの枠（.cp-hero__box）と同じ意匠：細い金枠＋四隅の太いブラケット */
.bz-catch__box { position: relative; display: flex; justify-content: center; align-items: center;
  width: min(1272px, 92vw); margin: 0 auto; border: 1px solid rgba(200,169,110,.85); padding: 20px 26px; }
.bz-catch__box p { margin: 0; font-family: var(--sans); font-weight: 500; font-size: min(20px, 1.08vw); letter-spacing: .04em; line-height: 1.8; color: #F5F3EF; }

/* BODY（クリーム・ポリゴン背景） */
/* 背景：Figma支給のローポリテクスチャ。上下ミラー結合版のため repeat-y で継ぎ目なくタイル */
.bz-body { background: var(--ecru) url(../images/bz-body-bg.jpg) center top / 100% auto repeat-y; }
.bz-body__inner { max-width: var(--pgnav-maxw); margin: 0 auto; padding: 150px var(--pgnav-pad) clamp(80px, 9vw, 160px);
  display: grid; grid-template-columns: var(--pgnav-w) minmax(0, 1fr); gap: var(--pgnav-gap); align-items: start; }

/* 左固定ナビ */
/* z-index は必須。無指定だと .bz-strip__track（transform のアニメーション＝スタッキング
   コンテキスト）と同じ階層に並び、DOM順で後ろにある写真の帯がナビの上に描かれる。 */
.bz-nav { position: sticky; top: 104px; z-index: 3; display: flex; flex-direction: column; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.bz-nav__item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 15px 16px; text-decoration: none;
  font-family: var(--sans); font-size: 14px; color: #444; border-bottom: 1px solid rgba(0,0,0,.08); transition: color .25s, background .25s; }
.bz-nav__item:last-child { border-bottom: none; }
.bz-nav__arrow { font-size: 12px; color: #999; transition: color .25s; }
.bz-nav__item:hover, .bz-nav__item.is-active { color: var(--gold); font-weight: 600; }
.bz-nav__item.is-active .bz-nav__arrow { color: var(--gold); }

/* セクション共通 */
.bz-sec { margin-bottom: clamp(80px, 9vw, 160px); }
.bz-sec:last-child { margin-bottom: 0; }
.bz-eyebrow { display: block; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
/* 帯は下の共通レシピ（#trp-numbers 準拠）で行ボックスからはみ出さなくなったので、
   上のeyebrowを避けるための追い足し（旧 margin-top:32px）は不要になった。
   上の余白は .bz-eyebrow の margin-bottom だけで決まる */
.bz-ttl { margin: 0 0 clamp(38px, 2.6vw, 44px); line-height: 1.5; }
/* 帯見出しの文字組は指定値どおり（Figma実寸）。SPは下の @media で縮小 */
/* inline ではなく inline-block。inlineのままだと clip-path が最初の行しか残さず、
   SPで折り返したときに見出しの後半が丸ごと消える（詳細は上の帯リビールの注記） */
.bz-ttl span { display: inline-block; max-width: 100%; background: #111; color: #FFF;
  font-family: var(--serif); font-style: normal; font-weight: 800;
  /* 行送り・字間は px 直打ちをやめて em に。下の「1行に収める」で文字サイズが縮んでも比率が保たれる
     （53.204px 時点の値は 52.459px / 4.256px ＝ .986em / .08em で従来と同一） */
  font-size: 53.204px; line-height: .986em; letter-spacing: .08em;
  padding: .1em .38em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 松尾FB 2026-08-13：帯見出しはPCで必ず1行に収める。
   --bz-n（＝1行に必要な幅が文字サイズの何倍か）は functions.php の sbs_band_title() が文字数から算出。
   桁が足りるときは従来どおり 53.204px、足りないときだけ収まるサイズまで落とす。
   SP（767px以下）は行ごとに帯を分ける設計なので対象外。 */
@media (min-width: 768px) {
  .bz-ttl { container-type: inline-size; }
  .bz-ttl span { white-space: nowrap; font-size: min(53.204px, calc(100cqi / var(--bz-n, 18.1))); }
}
/* max-width 920px だとリード文が折り返していたため、本文カラム幅いっぱいまで使う */
.bz-lead { font-family: var(--sans); font-size: 15px; line-height: 2.1; color: #3a3630; max-width: none; margin: 0 0 clamp(28px, 3vw, 48px); }
/* 松尾FB 2026-08-13：リード文も桁が足りる幅では1行に収める。
   --bz-ln（1行に必要な幅が文字サイズの何倍か）は functions.php の sbs_lead() が文字数から算出。
   セクション幅が 900px 未満だと 13px を切って読めなくなるので、そこから下は従来どおり折り返す。 */
@media (min-width: 768px) {
  .bz-sec { container-type: inline-size; }
  @container (min-width: 900px) {
    .bz-lead { white-space: nowrap; font-size: min(15px, calc(100cqi / var(--bz-ln, 65))); }
  }
}

/* 事業概要：5 POINT */
.bz-points { background: rgba(255,255,255,.71); box-shadow: 0 18px 50px rgba(0,0,0,.08); padding: clamp(32px, 4vw, 64px) clamp(24px, 3.4vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 52px); row-gap: clamp(36px, 4vw, 64px); }
.bz-point { position: relative; }
.bz-point:not(:nth-child(3n+1))::before { content: ""; position: absolute; left: calc(clamp(24px, 3vw, 52px) / -2); top: 8%; height: 84%; width: 1px;
  background: #d9d4cb; transform: rotate(10deg); }
.bz-point__num { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 3vw, 58px); line-height: 1; color: var(--gold); }
.bz-point__po { display: block; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--gold); margin: 6px 0 14px; }
.bz-point__ttl { font-family: var(--serif); font-weight: 800; font-size: clamp(15px, 1vw, 17px); color: #1c1913; margin: 0 0 10px; }
.bz-point__txt { font-family: var(--sans); font-size: 13.5px; line-height: 1.95; color: #55504a; margin: 0; }

/* よくある相談：FAQカード（支給デザイン FAQ.html を1:1移植。数値はすべて原本準拠） */
.bz-qas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; align-items: start; }
.bz-qa { position: relative; display: block; width: 100%; text-align: left; padding: 26px 0 0; margin: 0;
  background: none; border: 0; cursor: pointer; font-family: var(--sans); -webkit-appearance: none; appearance: none; }
/* 番号バッジ：外周のリングはページ背景色で抜いて、カードとの隙間をつくる */
.bz-qa__badge { position: absolute; top: 0; left: 18px; width: 42px; height: 42px; border-radius: 50%;
  background: #1a1712; border: 1.5px solid #B8934A; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff; letter-spacing: .08em; z-index: 2;
  box-shadow: 0 0 0 4px var(--ecru); transition: box-shadow .35s; }
.bz-qa.is-open .bz-qa__badge { box-shadow: 0 0 0 4px #1C1814; }   /* 展開時はカード背景色に合わせる */
/* カード本体：閉=白／開=ダーク */
.bz-qa__inner { display: block; background: #fff; border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.08); transition: background .4s ease; }
.bz-qa.is-open .bz-qa__inner { background: #1C1814; }
.bz-qa__front { display: block; padding: 32px 22px 0; }
.bz-qa__tag { display: inline-block; font-size: 10px; letter-spacing: .1em; color: #6b6055;
  border: 1px solid #b0a08e; border-radius: 2px; padding: 3px 10px; margin-bottom: 16px;
  transition: color .35s, border-color .35s; }
.bz-qa.is-open .bz-qa__tag { color: #7a6e60; border-color: #4a433b; }
.bz-qa__q { display: block; font-size: 15px; font-weight: 700; line-height: 1.65; color: #1a1a1a;
  letter-spacing: .02em; min-height: 52px; transition: color .35s; }
.bz-qa.is-open .bz-qa__q { color: #ffffff; }
.bz-qa__chev { display: block; text-align: center; padding: 14px 0 16px; font-size: 13px; color: #a09080;
  letter-spacing: .05em; user-select: none; transition: color .3s; }
.bz-qa.is-open .bz-qa__chev { color: #6e6258; }
.bz-qa__a { display: block; max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.4, 0, .2, 1); }
.bz-qa.is-open .bz-qa__a { max-height: 400px; }
.bz-qa__divider { display: block; margin: 0 22px; height: 1px; background: #3a342c; opacity: 0; transition: opacity .35s .1s; }
.bz-qa.is-open .bz-qa__divider { opacity: 1; }
.bz-qa__abody { display: block; padding: 24px 22px 32px; }
.bz-qa__abody span { display: block; font-size: 13px; line-height: 2; color: #b8afa4; letter-spacing: .04em; }
@media (max-width: 900px) { .bz-qas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }
@media (max-width: 560px) { .bz-qas { grid-template-columns: 1fr; } }

/* 写真帯（フルブリード・無限スライド）
   速度は参考サイト https://www.cki-group.jp/service/ の実測値 36px/秒。
   幅が変わっても同じ速度になるよう、再生時間は JS が --bz-strip-dur に流し込む。 */
.bz-strip { width: 100vw; margin: clamp(56px, 7vw, 120px) 0 clamp(56px, 7vw, 120px) calc(50% - 50vw); overflow: hidden; }
.bz-strip__track { display: flex; width: max-content;
  animation: bz-strip-scroll var(--bz-strip-dur, 44.4s) linear infinite; }
.bz-strip__set { display: flex; flex: 0 0 auto; }
/* 写真は4枚1セット。同じ写真どうしの間隔は 4枚ぶん（4w）なので、
   画面に同時に2枚出ないための条件は「4w ≧ 画面幅 + w」＝ 3w ≧ 100vw、
   つまり1枚が 33.4vw 以上。1セットを画面幅より広くするだけ（1枚>25vw）では、
   左端と右端にスライバーとして同じ写真が同時に出てしまう。
   旧値は上限400pxだったため1920pxで 4×400=1600px しかなく、両端に同じ写真が見えていた。
   高さは従来の縦横比（400:280 = 1.4286）を保ち、超広幅では伸びすぎないよう上限を置く。 */
.bz-strip img { width: max(240px, 34.5vw); height: max(168px, min(24.15vw, 470px)); object-fit: cover; display: block; flex: 0 0 auto; }
@keyframes bz-strip-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .bz-strip__track { animation: none; } }

/* 製品化の流れ：ダークパネル */
.bz-flowpanel { background: #17130e; max-width: 920px; padding: clamp(36px, 4.6vw, 80px) clamp(24px, 4vw, 72px); margin-top: clamp(28px, 3vw, 48px); }
.bz-flowpanel { --bz-step-pad: clamp(36px, 4vw, 60px); --bz-step-no: 40px; }
.bz-step { position: relative; padding: var(--bz-step-pad) 0; }
.bz-step:first-child { padding-top: 0; }
/* 縦の連結線：番号バッジ（左端0〜40px）の中心 20px に合わせ、上下を突き抜けさせて一本につなぐ。
   バッジは .bz-step__head(z-index:1) が上に乗るので線は背面を通る */
.bz-step::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--bz-step-no) / 2); width: 1px;
  transform: translateX(-50%); background: rgba(200,169,110,.28); }
/* 先頭は1番の中心から下へ、最後は最終番号の中心で止める */
.bz-step:first-child::after { top: calc(var(--bz-step-no) / 2); }
.bz-step:last-child::after { bottom: auto; height: calc(var(--bz-step-pad) + var(--bz-step-no) / 2); }
.bz-step__head { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; }
.bz-step__no { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #17130e;
  font-family: var(--serif); font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.bz-step__ttl { font-family: var(--serif); font-weight: 800; font-size: clamp(20px, 1.5vw, 27px); color: #fff; margin: 0; }
/* 松尾FB 2026-08-13：見出しだけ、他が下から出そろってから左へワイプして現れる。
   .bz-step 全体の .tr-reveal（下から）が .9s なので、その後半に重ねて開始する。
   clip-path は「左から出る」ワイプ、translateX は文字自体の寄り。番号バッジは動かさない。 */
.bz-step .bz-step__ttl {
  /* 切り抜き位置を文字の外へ逃がすための余白。同じ量の負マージンで打ち消すのでレイアウトは動かない */
  padding: .12em .22em .12em 0; margin: -.12em -.22em -.12em 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-.35em);
  transition: clip-path .85s cubic-bezier(.76,0,.24,1) .5s,
              transform .85s cubic-bezier(.16,1,.3,1) .5s;
}
.bz-step.is-in .bz-step__ttl { clip-path: inset(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bz-step .bz-step__ttl { clip-path: none; transform: none; transition: none; }
}
.bz-step__txt { font-family: var(--sans); font-size: 14px; line-height: 2.05; color: rgba(255,255,255,.82); margin: 16px 0 0 60px; max-width: 640px; }
.bz-step__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0 60px; }
.bz-step__tags span { font-family: var(--sans); font-size: 12px; color: var(--gold); border: 1px solid rgba(200,169,110,.55); padding: 4px 12px; }
.bz-step__media { margin: 22px 0 0 60px; max-width: 640px; }
/* ホバーで写真だけを拡大する。枠（.bz-step__zoom）が固定寸法＋overflow:hidden なので
   カードの大きさは変わらず、中の写真がズームインして見える。 */
.bz-step__zoom { display: block; overflow: hidden; }
.bz-step__media img { width: 100%; display: block; transition: transform .7s cubic-bezier(.22,.61,.21,1); }
@media (hover: hover) and (pointer: fine) {
  .bz-step__zoom:hover img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bz-step__media img { transition: none; }
  .bz-step__zoom:hover img { transform: none; }
}
.bz-step__media--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

/* 設備一覧 */
.bz-tabs { display: flex; gap: 4px; margin-top: clamp(24px, 2.6vw, 40px); }
.bz-tab { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .04em; padding: 13px 22px; border: none; cursor: pointer;
  background: transparent; color: #9a938a; transition: background .3s, color .3s; }
.bz-tab.is-on { background: #fff; color: #17130e; box-shadow: 0 -6px 18px rgba(0,0,0,.05); }
/* 白カードは表の範囲まで。ページャは地の背景の上に置くので .bz-eqwrap は透明 */
.bz-eqwrap { background: transparent; }
.bz-eqpane { display: none; }
.bz-eqpane.is-on { display: block; }
/* 横スクロールはテーブルだけに閉じ込める（ページャは常に定位置） */
.bz-eqscroll { overflow-x: auto; background: #fff; box-shadow: 0 16px 44px rgba(0,0,0,.08); }
.bz-eqtable { width: 100%; border-collapse: collapse; min-width: 760px; }
.bz-eqtable th { background: #17130e; color: #fff; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .06em; padding: 14px 16px; text-align: left; white-space: nowrap; }
.bz-eqtable td { font-family: var(--sans); font-size: 14px; color: #2c2822; padding: 14px 12px; border-bottom: 1px solid #eee9e0; }
.bz-eqtable td:nth-child(4), .bz-eqtable td:nth-child(5) { text-align: center; }
/* メーカー名・型番は途中で折り返さない（「ヤマザキマザ/ック」のような分断を防ぐ） */
.bz-eqtable td:nth-child(2), .bz-eqtable td:nth-child(3) { white-space: nowrap; }
/* 用途は「外径・内径・段/・穴・溝」のような途中改行が読みにくいので折り返さない */
.bz-eqtable th:nth-child(7), .bz-eqtable td:nth-child(7) { white-space: nowrap; }
.bz-eqtable tbody tr:nth-child(even) td { background: #f8f5f0; }
/* ページ送り時は「表示中の行」だけで縞を作り直す */
.bz-eqpane[data-eqpage] .bz-eqtable tbody tr:nth-child(even) td { background: transparent; }
.bz-eqpane[data-eqpage] .bz-eqtable tbody tr.is-alt td { background: #f8f5f0; }

/* 「もっと見る」（10件ずつ追加表示） */
.bz-eqpager { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 16px 30px; }
/* .frame-btn（四つ角ブラケット付き）を明るい地の上で使うための上書き。
   .frame-btn は暗い面向けに color:var(--ecru)／大文字化が入っているので、そこだけ差し替える。 */
.bz-eqmore.frame-btn {
  min-width: 300px; min-height: 52px; padding: 16px 34px; gap: 12px;
  font-size: 14px; letter-spacing: .1em; text-transform: none;
  color: #2c2822;
}
.bz-eqmore.frame-btn:hover { color: #17130e; }
.bz-eqmore__label { display: inline-block; }
.bz-eqmore::after { content: "＋"; font-size: 13px; line-height: 1; color: var(--gold); }
.bz-eqmore[hidden] { display: none; }
.bz-eqcount { flex: 0 0 100%; text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: #77716a; margin-top: 10px; }
.bz-eqempty { font-family: var(--sans); font-size: 14px; color: #77716a; padding: 56px 24px; text-align: center; margin: 0; }

/* SP */
@media (max-width: 767px) {
  .bz-hero__media { width: 100%; }   /* SPは全幅（93pxの余白はPC用） */
  .bz-hero__media::before { background: rgba(26,26,26,.66); opacity: .8; }   /* SPも会社概要と同じ均一スクリム */
  .bz-catch__title { font-size: 20px; }
  /* 帯見出し：SPは指定値の比率（行間98.6%／字間.08em）を保ったまま縮小 */
  .bz-ttl span { font-size: 26px; line-height: .986em; letter-spacing: .08em; }
  /* 1fr だと設備一覧テーブル(min-width:760px)が列を押し広げて横スクロールが出るため minmax(0,1fr) */
  .bz-body__inner { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  /* 4項目を必ず1行に収める。flex:0 0 auto だと合計379pxで335pxの枠からあふれ、
     横スクロールバーが出ていた。ラベル幅に比例して余りを分け合わせ、
     文字と左右パディングは画面幅に追従させて小さい端末でも収まるようにする。
     overflow-x はごく狭い端末のための保険（通常は収まるのでバーは出ない）。 */
  .bz-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .bz-nav::-webkit-scrollbar { display: none; }
  .bz-nav__item { flex: 1 1 auto; justify-content: center; text-align: center; white-space: nowrap;
    border-bottom: none; border-right: 1px solid rgba(0,0,0,.08);
    padding: 12px clamp(3px, 1.8vw, 10px); font-size: clamp(9.5px, 3vw, 12.5px); }
  .bz-nav__item:last-child { border-right: none; }
  .bz-nav__arrow { display: none; }
  .bz-points { grid-template-columns: 1fr; }
  .bz-point:not(:nth-child(3n+1))::before { display: none; }
  .bz-strip img { width: 240px; height: 150px; }
  .bz-step__txt, .bz-step__tags, .bz-step__media { margin-left: 0; }
  .bz-step::after { display: none; }
  .bz-tab { padding: 11px 12px; font-size: 12px; }
  /* SPは元々横スクロールなので、PCと同じ列幅を確保して「横型/中ぐ/りフラ/イス盤」の刻み折返しを防ぐ */
  .bz-eqtable { min-width: 960px; }
}
/* ══════════════════════════════════════════════════════════
   COMPANY（会社概要）ページ — Figma 256:204 決定稿準拠 / 接頭辞 cp-
══════════════════════════════════════════════════════════ */
.cp-inner { max-width: 1232px; margin: 0 auto; padding: 0 clamp(20px,4vw,48px); position: relative; z-index: 1; }
.cp-head { position: relative; margin-bottom: clamp(36px,4.5vw,72px); }
.cp-head__en { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(12px,1vw,15px); letter-spacing: .19em; color: var(--gold); margin-bottom: .6em; }
.cp-head__ttl { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(34px,4vw,60px); letter-spacing: .037em; line-height: 1.03; color: var(--black); }
.cp-head__rule { display: block; height: 1px; margin-top: clamp(20px,2.2vw,33px); background: linear-gradient(90deg, rgba(200,169,110,.8), rgba(200,169,110,.15)); }
/* 企業理念（暗い面）の見出し下線は無し */
.cp-head--light .cp-head__rule { display: none; }
.cp-head--light .cp-head__ttl { color: #fff; }

/* ── HERO ── */
.cp-hero { background: var(--kuro); padding: clamp(70px,6vw,90px) 0 clamp(60px,6.5vw,104px); }   /* 旧 #141414＝TOPよりかなり明るい。TOPの黒に統一 */
.cp-hero__photo { position: relative; width: min(1734px, 95.2vw); margin: 0 auto; }
.cp-hero__photo > img { display: block; width: 100%; aspect-ratio: 1734/596; object-fit: cover; }
.cp-hero__scrim { position: absolute; inset: 0; background: rgba(26,26,26,.66); opacity: .8; }
.cp-hero__ttlwrap { position: absolute; left: clamp(24px,8.7vw,168px); bottom: clamp(20px,4vw,77px); }
.cp-hero__en { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(15px,1.67vw,32px); letter-spacing: .3em; color: var(--gold); margin-bottom: .5em; }
.cp-hero__ttl { margin: 0; font-family: var(--serif); font-weight: 900; font-size: clamp(38px,4.93vw,94.6px); letter-spacing: .02em; line-height: 1.06; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.cp-hero__copyarea { text-align: center; padding: clamp(44px,4.4vw,84px) 6% 0; }
.cp-hero__copy { margin: 0 0 clamp(28px,2.9vw,56px); font-family: var(--serif); font-weight: 600; font-size: clamp(22px,2.87vw,55.2px); letter-spacing: .06em; color: #fff; }
/* この旧指定は下の共通ブロック（下層ページ共通：金枠リード）が上書きする。幅の考え方もそちらに合わせてある */
.cp-hero__box { position: relative; display: flex; justify-content: center; align-items: center; width: min(1272px, 100%); margin: 0 auto; border: 1px solid rgba(200,169,110,.85); padding: 20px 26px; }
.cp-hero__box p { margin: 0; font-family: var(--sans); font-weight: 500; font-size: min(20px, 1.08vw); letter-spacing: .04em; line-height: 1.8; color: #F5F3EF; white-space: nowrap; }
/* 四隅の太いブラケット（会社概要ヒーロー＋事業内容キャッチ枠で共用） */
.cp-hero__corner, .bz-catch__corner { position: absolute; width: 30px; height: 30px; pointer-events: none; --ctk: 5.583px; }
.cp-hero__corner::before, .cp-hero__corner::after,
.bz-catch__corner::before, .bz-catch__corner::after { content: ""; position: absolute; background: #C8A96E; border-radius: calc(var(--ctk) / 2); }
.cp-hero__corner::before, .bz-catch__corner::before { width: 100%; height: var(--ctk); }  /* 横バー */
.cp-hero__corner::after,  .bz-catch__corner::after  { width: var(--ctk); height: 100%; }  /* 縦バー */
.cp-hero__corner--tl, .bz-catch__corner--tl { top: calc(var(--ctk) / -2); left: calc(var(--ctk) / -2); }
.cp-hero__corner--tl::before, .bz-catch__corner--tl::before { top: 0; left: 0; }
.cp-hero__corner--tl::after,  .bz-catch__corner--tl::after  { top: 0; left: 0; }
.cp-hero__corner--tr, .bz-catch__corner--tr { top: calc(var(--ctk) / -2); right: calc(var(--ctk) / -2); }
.cp-hero__corner--tr::before, .bz-catch__corner--tr::before { top: 0; right: 0; }
.cp-hero__corner--tr::after,  .bz-catch__corner--tr::after  { top: 0; right: 0; }
.cp-hero__corner--br, .bz-catch__corner--br { bottom: calc(var(--ctk) / -2); right: calc(var(--ctk) / -2); }
.cp-hero__corner--br::before, .bz-catch__corner--br::before { bottom: 0; right: 0; }
.cp-hero__corner--br::after,  .bz-catch__corner--br::after  { bottom: 0; right: 0; }
.cp-hero__corner--bl, .bz-catch__corner--bl { bottom: calc(var(--ctk) / -2); left: calc(var(--ctk) / -2); }
.cp-hero__corner--bl::before, .bz-catch__corner--bl::before { bottom: 0; left: 0; }
.cp-hero__corner--bl::after,  .bz-catch__corner--bl::after  { bottom: 0; left: 0; }

/* ── 代表挨拶 ── */
.cp-message { position: relative; background: var(--ecru) url(../images/business-bg.jpg) center/cover no-repeat; padding: clamp(70px,6.3vw,120px) 0 clamp(80px,7.5vw,144px); }
/* 左サイドナビ：レール（絶対配置・セクション全高）内を JS で追従
   （position:sticky は Lenis が html/body の overflow を切り替える都合で効かないため transform 制御） */
.cp-sidenav__rail { position: absolute; left: clamp(16px,6vw,117px); top: clamp(70px,6.3vw,120px); bottom: clamp(80px,7.5vw,144px); width: var(--pgnav-w); z-index: 2; pointer-events: none; }
.cp-sidenav { position: absolute; top: 0; left: 0; width: var(--pgnav-w); background: #fff; box-shadow: 0 10px 34px rgba(26,26,26,.08); pointer-events: auto; will-change: transform; }
/* 代表挨拶〜組織図までページ全体を追従させる（レール内だけだと代表挨拶を過ぎた時点で消えていた）。
   fixed ＋ JS の translateY で位置を決める。左位置はレールと同じ値、重なりは固定ヘッダー(z500)より下。 */
/* 2026-08-17 本人指示：凡例はSP以外（768px〜）で常に表示（旧1281→1101→768） */
@media (min-width: 768px) {
  .cp-sidenav { position: fixed; top: 0; left: clamp(16px,6vw,117px); z-index: 300; }
}
.cp-sidenav__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--black); text-decoration: none; border-bottom: 1px solid rgba(26,26,26,.1); transition: color .25s, background .25s; }
.cp-sidenav__item:last-child { border-bottom: 0; }
.cp-sidenav__item span { font-size: 12px; color: var(--gold); }
.cp-sidenav__item:hover, .cp-sidenav__item.is-active { color: var(--gold); }
@media (max-width: 767px) { .cp-sidenav__rail { display: none; } }
/* サイドナビがある幅では本文をFigma準拠で右へ寄せる（コンテンツ左端=27.6vw） */
@media (min-width: 768px) { .cp-message .cp-inner { max-width: 1136px; margin: 0 auto 0 clamp(240px,27.6vw,530px); } }
.cp-message__lead { margin: 0 0 clamp(34px,3.5vw,64px); font-family: var(--serif); font-weight: 700; font-size: clamp(20px,1.98vw,38px); letter-spacing: .06em; line-height: 1.7; color: var(--black); }
.cp-message__lead em { font-style: normal; color: var(--gold); }
/* 本人指示 2026-08-17：どの画面幅でも「文字6：写真4」の比率で固定し、
   写真の下端は本文（署名行）に揃える（下は stretch＋絶対配置coverで実現） */
.cp-message__cols { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,4fr); gap: clamp(28px,4vw,78px); align-items: stretch; }
.cp-message__body p { margin: 0 0 1.6em; font-family: var(--sans); font-size: clamp(13px,1vw,15px); line-height: 2.1; color: var(--black); }
.cp-message__sign { display: flex; align-items: baseline; gap: 1.8em; margin-top: clamp(28px,3vw,52px); }
.cp-message__role { font-family: var(--serif); font-size: clamp(13px,.94vw,18px); letter-spacing: .07em; color: var(--black); }
.cp-message__name { font-family: var(--serif); font-weight: 700; font-size: clamp(20px,1.56vw,30px); letter-spacing: .16em; color: var(--black); }
.cp-message__photo { margin: 0; overflow: hidden; }   /* ホバー時に中身だけ寄るよう、枠でクリップする */
.cp-message__photo img { display: block; width: 100%; aspect-ratio: 490/735; object-fit: cover; }
/* PC：写真の高さ＝本文列の高さ（署名行の下端で揃う）。
   figureを絶対配置の器にして固有高さを持たせない＝行の高さは本文だけで決まり、写真がそこへcoverで収まる
   ※961px〜。タブレット帯（〜960px）は写真を本文の下に置くため対象外（本人指示 2026-08-17） */
@media (min-width: 961px) {
  .cp-message__photo { position: relative; height: 100%; min-height: 300px; }
  /* 切り抜き基準（本人指摘 2026-08-17・2回の調整を経た最終形）：
     横は 100%＝右端固定。人物は原板の右寄りで、68%基準だと切り抜きが狭い幅で後頭部が右で削れた。
     原板は後頭部の右にも余白があるため、右端を常に保持すれば頭の右側は絶対に切れない（削れるのは左の窓側だけ）。
     縦は 0%＝上端固定。頭上の余白7.7%が常に残り、はみ出しは必ず下（机側）で吸収する */
  .cp-message__photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 100% 0; }
}
/* ホバー：枠の大きさは変えず、写真だけゆっくり寄る（TOPの .tx-media と同じ作り）。
   タッチ端末は hover が張り付くのでマウス環境のみ。
   拡大の起点は右上（transform-origin: 100% 0）。中心起点だと拡大分が上と右へはみ出して
   頭と後頭部を削るので、右上を固定して左（窓側）と下（机側）だけを飲み込ませる（本人指摘 2026-08-17）。 */
@media (hover: hover) and (pointer: fine) {
  .cp-message__photo img { transition: transform .9s cubic-bezier(.22, .61, .21, 1); will-change: transform; transform-origin: 100% 0; }
  .cp-message__photo:hover img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-message__photo img, .cp-message__photo:hover img { transition: none; transform: none; }
}

/* ── 企業理念（黒面） ── */
/* 企業理念 → 沿革は「下のセクションが上にかぶさる」切り替え。
   .cp-phil は最後の1画面ぶんだけ貼り付き（--cp-stick = 100vh − セクション高、負値。JSが実測）、
   その上を .cp-history がせり上がって覆う。
   .cp-cover は貼り付きの可動域を作るためだけの箱で、余分に足した1画面ぶんは
   .cp-history の負マージンで打ち消しているので、レイアウト位置とページ全長は変わらない。
   ※可動域は「親のコンテンツボックス」で決まるため、padding では伸びない。::after を1画面ぶんの
     中身として置くこと。padding-bottom:100vh にすると可動域ゼロ＝まったく貼り付かない。
   ※position:sticky は z-index の指定に関わらず「重なり階層」を作る。全画面レイヤ .cp-blinds
     （position:fixed / z-index:-1 / クリーム色）はページ全体の背面に居ることで成立しているので、
     .cp-phil の中に置いたままだとこの階層に閉じ込められ、ヒーローの上へ浮き上がって最初の
     セクションを塗りつぶす。そのため .cp-blinds は .cp-phil の外（.cp-cover 直下）に置く。 */
.cp-cover::after { content: ""; display: block; height: 100vh; }
.cp-phil { position: sticky; top: var(--cp-stick, 0px);
  background: transparent; padding: clamp(80px,7.2vw,138px) 0 clamp(160px,14vw,270px); overflow: hidden; }   /* 下余白 2026-09-11 本人指示「沿革が来るのが早くて余韻がない」→ 旧 clamp(90px,8vw,154px) */
@media (prefers-reduced-motion: reduce) {
  .cp-cover::after { display: none; }
  .cp-phil { position: relative; top: 0; }
}
.cp-phil::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 40% at 20% 10%, rgba(200,169,110,.05), transparent 70%),
  radial-gradient(50% 36% at 85% 70%, rgba(200,169,110,.045), transparent 70%); pointer-events: none; }
/* ── 背景ブラインドワイプ（代表挨拶=明 → 企業理念=暗）
      参考: toyokoh.com/recruit の .Background
      ・position:fixed / inset:0 / z-index:-1 のビューポート全面レイヤ
      ・横スラット50枚を 0.01s ずつ遅らせて scaleY(0)→(1)（transform-origin なし＝中心から開く）
      ・遅延は状態非依存なので、行き・戻りとも波は「上→下」に流れる
      #mvv は背景を transparent にして、このレイヤを透かせている
      （前後の .cp-message / .cp-history は不透明なので、そこでは隠れる＝参考サイトと同じ挙動）
      ※置き場所は #mvv の外（.cp-cover 直下）。#mvv は sticky ＝重なり階層を作るので、中に置くと
        このレイヤが階層に閉じ込められてヒーローの上へ出てしまう。状態クラスは JS が
        #mvv と .cp-cover の両方に付ける。 */
.cp-blinds { position: fixed; inset: 0; z-index: -1;
  display: flex; flex-direction: column; overflow: hidden; pointer-events: none;
  background-color: var(--cp-blind-from, #F5F3EF); }
.cp-blinds__line { flex: 0 0 auto; width: 100%; height: calc(2% + 2px); margin-top: -1px;
  background-color: var(--cp-blind-to, var(--kuro)); transform: scaleY(1); }
/* JS 未実行時はスラットが開いたまま＝最初から暗い（正しい見た目） */
.cp-cover.js-blinds .cp-blinds__line {
  transform: scaleY(0);
  transition: transform .6s cubic-bezier(0,.55,.45,1);
  transition-delay: calc(var(--i, 0) * .01s);
}
.cp-cover.js-blinds.is-bgin .cp-blinds__line { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .cp-cover.js-blinds .cp-blinds__line { transform: scaleY(1); transition: none; }
}

/* ── 情報はブラインドが閉じきってから（松尾FB 2026-08-10）──
   スラット全閉は .6s＋50枚×.01s≒1.1s。is-bgin から1.15s後にJSが .blinds-done を付け、
   それまで見出し・MVVブロック・両サイド写真を伏せておく（.show が先に付いても出さない） */
.cp-phil.js-blinds:not(.blinds-done) .cp-inner .anim-up {
  opacity: 0 !important; transform: translateY(28px) !important; transition: none !important;
}
.cp-phil__side { transition: opacity .9s ease .15s; }
.cp-phil.js-blinds:not(.blinds-done) .cp-phil__side { opacity: 0; }

/* ── 背景のじゃみじゃみ（粒状ノイズ。暗転にあわせてフェードイン）──
   SVG feTurbulence のノイズタイルを steps() で小刻みに揺らす（じゃみじゃみ感）。
   overlay合成・低不透明度のフィルムグレインなので文字の可読性は落とさない */
.cp-phil::after {
  content: ""; position: absolute; inset: -140px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='260'%20height='260'%20filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;                 /* 暗背景で見えるように（overlayは#191510上ではほぼ消える） */
  opacity: 0; transition: opacity 1s ease .4s;
  animation: cpGrain .48s steps(1) infinite;
}
.cp-phil.is-bgin::after { opacity: .13; }
@keyframes cpGrain {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-38px, 22px); }
  25%   { transform: translate(20px, -34px); }
  37.5% { transform: translate(-14px, -12px); }
  50%   { transform: translate(32px, 18px); }
  62.5% { transform: translate(-26px, 36px); }
  75%   { transform: translate(12px, -28px); }
  87.5% { transform: translate(-34px, -6px); }
  100%  { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-phil::after { animation: none; }
}

.cp-phil__side { position: absolute; z-index: 0; opacity: .5; filter: brightness(.75) saturate(.85); pointer-events: none; }
/* 差し替えた写真が旧画像より縦長（3:2 → ほぼ正方形）になり、同じtopだと下へはみ出して
   低い位置に見えていたため、VALUEカードの帯に収まるよう引き上げている。 */
/* Figma実測：右の大写真は右へ129pxはみ出し(6.7vw)・898px幅／左は左へ293px(15vw)・1060px幅 */
.cp-phil__side--r { right: -6.7vw; top: 47%; width: clamp(280px,46.8vw,898px);
  -webkit-mask-image: linear-gradient(270deg,#000 55%,transparent); mask-image: linear-gradient(270deg,#000 55%,transparent); }
.cp-phil__side--l { left: -15vw; top: 55%; width: clamp(300px,55vw,1060px);
  -webkit-mask-image: linear-gradient(90deg,#000 55%,transparent); mask-image: linear-gradient(90deg,#000 55%,transparent); }
/* PC：Figma実測から換算（右＝VALUE見出しの112px上／左＝VALUE見出しの228px下） */
@media (min-width: 1101px) {
  .cp-phil__side--r { top: 46.6%; }
  .cp-phil__side--l { top: 57.7%; }
}
.cp-mvv { position: relative; margin-top: clamp(48px,4.5vw,86px); }
/* PC：ブロック間の余白をカンプに合わせて広めに取る。
   MISSIONの説明文とVISION見出しのあいだに3枚目の写真が入るため、この空きが必要。 */
@media (min-width: 1101px) {
  /* Figma実測：MISSION説明文の下端→VISION見出しまで174px(9.06vw@1920) */
  .cp-mvv + .cp-mvv { margin-top: clamp(130px,9.5vw,183px); }
}
/* カンプ準拠の配置。横並びのflexだと3枚の位置関係を再現できないため、1枚ずつ絶対配置する。
   left はブロック幅に対する割合、top は見出しからの相対（vw）。 */
.cp-mvv__photos { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 0; }
/* 写真はスクロール連動で縦にフロート（参考: humaneyes.co.jp 採用セクション）
   --ptr = 移動量 / --pratio = JS が 1→-n で動かす（既定 0 = 定位置） */
/* 外側 .cp-mvv__ph ＝ スクロール連動の縦フロート（JSが --pratio を毎フレーム更新するのでtransitionは付けない） */
.cp-mvv__ph { position: absolute; display: block;
  /* 移動量は控えめに。大きいと説明文の帯に触れる（Figmaの写真下端→説明文の余白が16px程度のため） */
  --ptr: clamp(8px,1.2vh,14px); --pratio: 0;
  transform: translateY(calc(var(--ptr) * var(--pratio)));
  will-change: transform; }
/* Figma実測（1920基準）：
   1枚目 x1137(コンテナ54%)・MISSION見出しの129px上(6.7vw)
   2枚目 画面右端から3px・見出しの54px下(2.8vw) */
.cp-mvv__photos--mission .cp-mvv__ph:nth-child(1) { left: 54%; top: -7vw; }
.cp-mvv__photos--mission .cp-mvv__ph:nth-child(2) {
  left: auto;
  right: calc(50% - 50vw + 3px);   /* コンテナ基準ではなく「画面右端」に張り付ける（Figmaは右端3px） */
  top: 2.8vw;
}
/* 内側 img ＝ 登場アニメ（下からふわっと現れる）。
   時差は CSS の transition-delay ではなく JS が1枚ずつ .is-in を付けて作る。
   時間で遅らせると、1枚目が出た直後に残り2枚も出そろってしまうため。 */
/* Figma実測は1枚目364px(19vw)だが、松尾FBで一回り小さく（-12%） */
.cp-mvv__photos img { display: block; width: clamp(160px,16.7vw,320px); height: auto; filter: brightness(.9);
  opacity: 0; transform: translateY(56px);
  transition: opacity 1s cubic-bezier(.22,.61,.21,1), transform 1.1s cubic-bezier(.22,.61,.21,1); }
.cp-mvv__ph.is-in img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-mvv__photos img { opacity: 1; transform: none; transition: none; }
}
/* 3枚目はMISSIONの本文とVISION見出しのあいだ（約190px）に、やや中央寄りで置く（カンプ準拠）。
   すき間が写真の高さ＋数十pxしかないため、この1枚だけ上下フロートを止めて固定する。 */
/* Figma実測：x1211(コンテナ60.8%)・VISION見出しの161px上(8.4vw→当実装の行間に合わせ9.2vw)。
   上下の帯とのすき間が狭いためフロートは無し。 */
.cp-mvv__photos--vision .cp-mvv__ph { left: 60.8%; top: -9.2vw; --ptr: 0px; }
/* Figma実測：2枚目356px(18.5vw)・3枚目470px(ここでは収まり優先で23vw) */
.cp-mvv__photos--mission .cp-mvv__ph:nth-child(2) img { width: clamp(150px,16.3vw,313px); }
.cp-mvv__photos--vision img { width: clamp(176px,20.2vw,389px); }
.cp-mvv__row .cp-mvv__desc { max-width: 500px; }
/* PC：カンプは説明文が1行約29文字（≒400px）の細い段組。
   これで右列の説明文の右側に2枚目の写真が入る余地ができる。SPは従来の500pxのまま。 */
@media (min-width: 1101px) {
  /* Figma実測：説明文の段組は501px幅(26vw@1920) */
  .cp-mvv__row .cp-mvv__desc { max-width: clamp(300px,26vw,501px); }
}
/* 写真はSP・タブレットのみ非表示（本人指示 2026-08-17：ノートPC帯でも見せる） */
@media (max-width: 1100px) { .cp-mvv__photos { display: none; } }
/* ── ノートPC帯（1101〜1280px）の調整（本人指示 2026-08-17）──
   ①本文が画面幅いっぱいに広がるのをやめる：内箱を92vwに絞り左右に余白を作る
   ②できた右余白ぶん、右端ピン留めの写真(float2)が本文から離れて広い画面と同じ関係に戻る
   ③MISSION/VISIONの2列は左右均等割だと中央の空きが広く見える（広い画面では写真が
     埋める空間）。左列を狭め・列間も詰めて、説明文を statement 側へ寄せる。
     連動して1枚目のフロート写真を少し上げ、説明文の1行目と擦らないようにする */
@media (min-width: 1101px) and (max-width: 1280px) {
  #page-company .cp-inner { max-width: min(1232px, 92vw); }
  /* 左列（MISSION=ステートメント／VISION=説明文）を内容のぴったり幅にして、
     中央の空きを列間ギャップだけにする（本人指示 2026-08-17：隙間を詰める） */
  .cp-mvv__row { grid-template-columns: max-content minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
  .cp-mvv__photos--mission .cp-mvv__ph:nth-child(1) { top: -10.5vw; }  /* 写真拡大（24vw）後も説明文の1行目と重ならない高さ */
  /* 代表挨拶：列比率はベース側の6:4（全幅共通）を使うため帯別の上書きはしない（2026-08-17） */
  /* MISSION/VISIONの散らし写真：帯では小さすぎて他ページと不揃い（208/252→300前後へ） */
  .cp-mvv__photos img { width: clamp(200px, 24vw, 300px); }
  .cp-mvv__photos--vision img { width: clamp(220px, 26vw, 326px); }
  /* 2枚目のフロート写真（2人の作業写真）：この帯は ナビ192px＋本文2列＋写真 の横幅が
     物理的に収まらない（どこかが必ず重なる）。実測で説明文との共存が不可能と確認したため
     この帯だけ非表示にする。MISSION/VISION見出し横の写真と1・3枚目は表示される */
  .cp-mvv__photos--mission .cp-mvv__ph:nth-child(2) { display: none; }
}
.cp-mvv__tag { position: relative; z-index: 1; margin: 0 0 clamp(28px,3vw,58px); display: flex; align-items: baseline; gap: clamp(14px,1.6vw,30px); font-weight: 400; }
.cp-mvv__tag-en { font-family: var(--serif); font-size: clamp(34px,3.54vw,68px); letter-spacing: .04em; color: var(--gold); line-height: 1; }
.cp-mvv__tag-ja { font-family: var(--serif); font-size: clamp(14px,1.15vw,22px); letter-spacing: .18em; color: var(--gold); }
.cp-mvv__tagph { display: none; }   /* 見出し行内の写真。1100px以下で表示（下のブロック参照） */
/* ── 861〜1100px帯：浮遊写真が非表示になる帯でも写真を見せる（本人指示 2026-08-17）。
   SPと同じく見出し行の右側に1枚置く（MISSION=機械 / VISION=CAD） */
@media (min-width: 861px) and (max-width: 1100px) {
  .cp-mvv__tag--ph { display: grid; grid-template-columns: minmax(0,1fr) clamp(240px, 34vw, 360px);
    grid-template-areas: "en ph" "ja ph"; align-items: center;
    column-gap: clamp(20px,4vw,40px); row-gap: .45em; }
  .cp-mvv__tag--ph .cp-mvv__tag-en { grid-area: en; }
  .cp-mvv__tag--ph .cp-mvv__tag-ja { grid-area: ja; }
  .cp-mvv__tagph { grid-area: ph; display: block; }
  .cp-mvv__tagph img { display: block; width: 100%; height: auto; filter: brightness(.9); }
  /* 地図カードの「Google Mapsで見る」：横並びだと住所に被るため縦積みへ */
  .cp-linfo { flex-direction: column; align-items: stretch; }
  .cp-linfo__btn { width: 100%; }
}
/* 代表挨拶：961〜1100pxは文字5：写真5（本人指示 2026-08-17。写真の縦長トリミングが浅くなり頭も収まる） */
@media (min-width: 961px) and (max-width: 1100px) {
  .cp-message__cols { grid-template-columns: 1fr 1fr; }
}
/* タブレット帯（768〜960px）：写真は本文の下へ・中央置き（本人指示 2026-08-17「大体900pxぐらい」） */
@media (min-width: 768px) and (max-width: 960px) {
  .cp-message__cols { grid-template-columns: 1fr; }
  .cp-message__photo { width: min(70%, 400px); margin: 0 auto; }
}
.cp-mvv__row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px,4vw,76px); align-items: center; }
.cp-mvv__statement { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(20px,1.77vw,34px); letter-spacing: .08em; line-height: 2.2; color: #fff; }
/* VISION のステートメント（問いを立て、／創造する会社へ）だけ一段大きく（本人指示 2026-09-04）。
   MISSION 側は3行あるので現状維持し、--rev（VISION の行）に限定して上書きする。 */
.cp-mvv__row--rev .cp-mvv__statement { font-size: clamp(26px,2.3vw,44px); }
/* 縦線＋その先端に灯る炎（Figma決定稿）。炎は信頼の背景ページ（.trp-reason__rail）と同じ素材・同じ寸法。
   線は上端で切らずに炎まで通し、下端だけ地に溶かす。 */
.cp-flameline { padding-left: clamp(20px,2vw,38px); position: relative; }
.cp-flameline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 4%; width: 1.5px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 86%, transparent); border-radius: 2px; }
.cp-flameline::after { content: ""; position: absolute; left: .75px; top: 0;
  width: 15px; height: 35px; transform: translate(-50%,-50%);   /* 線の先端を炎の中心に重ねる */
  background: url("../images/trustpg_flame.svg") center / contain no-repeat; }
.cp-flameline--r { padding-left: 0; padding-right: clamp(20px,2vw,38px); }
.cp-flameline--r::before { left: auto; right: 0; }
.cp-flameline--r::after { left: auto; right: .75px; transform: translate(50%,-50%); }
/* Figma実測（1920px時）：Noto Sans JP / 17px / weight400 / line-height 45px(=2.647) / letter-spacing 0.34px(=.02em) / #FFF。
   このページの他の指定と同じく clamp(最小, 実測px÷1920 vw, 実測px) で相似縮小させる（17/1920 = .885vw）。 */
.cp-mvv__desc { margin: 0; font-family: var(--sans); font-size: clamp(15px,.885vw,17px); font-weight: 400; line-height: 2.647; letter-spacing: .02em; color: #FFF; max-width: 600px; }
.cp-values { display: grid; gap: clamp(20px,2.2vw,42px); max-width: 1120px; margin-inline: auto; justify-items: center; }   /* 松尾FB 2026-08-10：左寄り→中央揃え */
/* 金のフチはホバーのときだけ出す。1px ぶんは最初から透明の枠で確保しておき、枠が出ても寸法が動かないようにする。
   （カンプは1枚目にフチが乗っているが、あれはホバー状態の作例なので常時は出さない） */
.cp-value { position: relative; width: min(828px,100%); background: linear-gradient(126deg, #34281A 0%, #221910 42%, #15100A 100%); padding: clamp(28px,3.2vw,60px) clamp(22px,3.6vw,70px) clamp(30px,3.4vw,64px); overflow: hidden;
  border: 1px solid transparent; }
/* ホバー：金のフチが立ち上がり、外側へ三段のぼかしでぼんやり光る。
   タッチ端末は hover が張り付くのでマウス環境のみ。 */
@media (hover: hover) and (pointer: fine) {
  .cp-value { transition: border-color .45s ease, box-shadow .45s ease; }
  .cp-value:hover {
    border-color: rgba(200,169,110,.95);
    box-shadow: 0 0 12px rgba(200,169,110,.42), 0 0 36px rgba(200,169,110,.28), 0 0 80px rgba(200,169,110,.14);
  }
}
@media (prefers-reduced-motion: reduce) { .cp-value { transition: none; } }
.cp-value__body { position: relative; z-index: 1; max-width: 545px; }
.cp-value__ttl { margin: 0 0 .6em; font-family: var(--serif); font-weight: 900; font-size: clamp(22px,1.82vw,35px); letter-spacing: .02em; color: #F5F3EF; }
.cp-value__sub { margin: 0 0 1.3em; font-family: var(--sans); font-size: clamp(11.5px,.73vw,14px); line-height: 2; color: rgba(245,243,239,.95); }
.cp-value__txt { margin: 0; font-family: var(--sans); font-size: clamp(11.5px,.73vw,14px); line-height: 2; color: rgba(245,243,239,.7); }
.cp-value__num { position: absolute; right: clamp(14px,2vw,40px); top: clamp(-6px,-.2vw,0px); z-index: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(70px,6.7vw,128px); letter-spacing: -.027em; line-height: 1.33; color: rgba(200,169,110,.6); }

/* ── 沿革（HISTORY） ── */
/* 企業理念の上にせり上がって覆う側。負マージンで .cp-cover の余白1画面ぶんを打ち消す。 */
.cp-history { position: relative; z-index: 1; margin-top: -100vh;
  background: linear-gradient(180deg, #E7DCC2 0%, #EFE8D8 46%, #F5F3EF 100%); padding: clamp(70px,6.5vw,124px) 0 clamp(80px,7.5vw,140px); overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cp-history { margin-top: 0; } }
.cp-history__head { text-align: right; padding-right: min(250px, 20vw); margin-bottom: clamp(40px,4.2vw,80px); }
.cp-history__ttl { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(42px,5.4vw,104px); letter-spacing: .135em; line-height: 1; color: #C8A96E; }
.cp-history__sub { display: block; margin-top: 1em; font-family: var(--serif); font-weight: 600; font-size: clamp(12px,1.05vw,20px); letter-spacing: .55em; color: #C8A96E; }
.cp-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(200,169,110,.7) transparent; outline: none; cursor: grab; }
.cp-hscroll.is-drag { cursor: grabbing; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.cp-hscroll img { -webkit-user-drag: none; user-select: none; }
.cp-hscroll__track { display: flex; align-items: flex-start; gap: clamp(60px,6vw,116px); width: max-content; padding: clamp(28px,2.6vw,50px) clamp(24px,7vw,130px) clamp(24px,2.2vw,42px); }
.cp-hpick { position: relative; width: min(1150px,86vw); display: grid; grid-template-columns: minmax(0,58%) minmax(0,38%); gap: 4%; align-items: start; }
.cp-hpick__year { position: absolute; top: -.32em; left: clamp(-10px,-.4vw,-6px); z-index: 2; font-family: var(--serif); font-weight: 400; font-size: clamp(54px,5.6vw,108px); letter-spacing: .022em; line-height: .62; color: var(--gold); text-shadow: 0 1px 2px rgba(18,14,9,.35);  /* 2026-08-25 桐山さん指示「透過・乗算をとる」: mix-blend-mode:multiply を外し不透明の金に。薄い影は写真上の可読性用 */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;     /* カウントアップ中に桁幅がブレないよう等幅数字 */
  transition: opacity .25s ease; }
/* 待機中（idle）は「0000」が見えてしまうので隠し、カウントアップが始まる瞬間から表示する。
   textContentは0000のまま残すので、出現時に桁幅ぶんのレイアウトずれは起きない。
   JS無効／prefers-reduced-motion では data-state が付かないため、そのまま西暦が出る。 */
.cp-hpick__year[data-state="idle"] { opacity: 0; }
/* 2026-08-25 本人FB「年号が見づらい」の真因: 沿革はpin固定で横流れするため、年号(カード左端)が常に
   左上固定のサイドナビ(.cp-sidenav, z300, 右端≒6vw+192px)の裏に来ていた。→ 一旦 left:200px で右へ逃がしていた。
   2026-09-04 クライアントFB①②「凡例にかぶらないように」「数字は写真の左端らへんに」:
   逃がし方をやめ、レーン自体を索引の右で切り取る方式へ変更（下の #page-company .cp-hscroll）。
   潜り込みはレーン側で断てるので、年号は本来の位置＝写真の左端に戻す。 */
@media (min-width: 768px) { .cp-hpick__year { left: 0; } }
.cp-hpick__photos { position: relative; }
.cp-hpick__ph1 { display: block; width: 87%; height: auto; }
.cp-hpick--single .cp-hpick__ph1 { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
/* 2026-09-04 沿革ピックアップの単体写真は、素材の縦横比がまちまち（3:2／4:3 など）で
   1枚ごとに高さが 402〜453px とばらついていた。比率を 3:2 に固定して高さを揃える。
   写真の差し替えで比率が変わってもレイアウトが崩れないよう、CSS側で吸収する。 */
img.cp-hpick__ph2 { position: absolute; right: 0; bottom: clamp(-32px,-1.6vw,-24px); width: 42%; height: auto; box-shadow: 0 14px 34px rgba(26,26,26,.18); }
/* 1956・1963は「大きい写真＋重ねた小さい写真＋影」を1枚のWebP（透過）に焼き込んである。
   画像の右下には影のはみ出しぶんの透明余白があるので、その分(5.62%)だけ広く貼ると
   写真の実寸がカラム幅ちょうどに揃う。 */
.cp-hpick__combo { display: block; width: 105.62%; max-width: none; height: auto; }
.cp-hpick__ph--tbd { display: flex; align-items: center; justify-content: center; aspect-ratio: 665/498; background: #D9D9D9; font-family: var(--sans); font-weight: 700; font-size: clamp(14px,1.3vw,24px); letter-spacing: .1em; color: rgba(26,26,26,.55); }
.cp-hpick__body { padding-top: clamp(36px,4vw,88px); }
.cp-hpick__body h3 { margin: 0 0 .9em; font-family: var(--serif); font-weight: 700; font-size: clamp(17px,1.25vw,24px); letter-spacing: .05em; line-height: 1.5; color: var(--black); }
.cp-hpick__body p { margin: 0; font-family: var(--sans); font-size: clamp(12.5px,.78vw,15px); line-height: 1.95; color: var(--black); max-width: 433px; }
/* DRAG/SCROLLヒントは本人指示で廃止（2026-08-10）。年表との間隔はこの余白で維持 */
.cp-hpin { margin-bottom: clamp(40px,4vw,72px); }
/* ── 沿革レーンのピン留め（縦スクロール→横送り）──
   ステージを画面内に固定したまま横へ送り、右端まで送り切ったら通常の縦スクロールへ復帰する。
   position:sticky は親の overflow:hidden（.cp-history）で効かないため、
   サイドナビと同じく absolute + translateY をJSで制御する。
   .is-pinned はJSが対応環境でのみ付与。付かない場合は従来どおりの横スクロール領域として動く。 */
.cp-hpin { position: relative; }
.cp-hpin__stage { position: relative; }
.cp-hpin.is-pinned .cp-hpin__stage {
  position: absolute; top: 0; left: 0; width: 100%;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  /* will-change / translate3d でレイヤー昇格させると、内側の年号の mix-blend-mode が
     トラック全幅（約7700px）のレンダーサーフェスを要求してタブが落ちる。2D transform のままにする */
}
.cp-hpin.is-pinned .cp-hscroll { overflow-x: hidden; scrollbar-width: none; }   /* 横位置は縦スクロールが決めるのでネイティブの横スクロールは殺す */
.cp-hpin.is-pinned .cp-hscroll::-webkit-scrollbar { display: none; }
/* 沿革：ピン留めレーンの下側の余白に敷く火の粉ループ映像。
   透過WebM（黒地はアルファで抜いてある）なので背景色は持たせない。写真面と同じ
   min(1734px, 95.2vw) 幅にして横位置をページ全体と揃え、写真より下のレイヤーに置く。
   縦位置（top）と、ステージに追従させる translateY は JS（measure / apply）が当てる。
   ここの top は JS が走る前の保険。
   横位置は left:50% + translateX(-50%) で取る。left/right:0 + margin-inline:auto だと、
   SPのように幅がステージより広い（132%）ときに過剰指定となり、Chrome が margin-left:0 /
   margin-right:負値 と解決して左端寄せ＋右へはみ出す（中央にならない）。 */
.cp-hvideo {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: 40vh;
  width: min(1734px, 95.2vw); pointer-events: none;
  /* Figma と同じ「スクリーン」合成。素材はアルファで割り戻してあるので
     （α=輝度・色=S/α）、screen 合成の結果は B+S−B·S と厳密に一致する。
     暗い所ほど光り、明るい所では効きが弱まる＝加算光の正しい振る舞いになる。 */
  mix-blend-mode: screen;
}
/* メタデータ読み込み前に高さ0でレイアウトが暴れないよう素材の比率を先に与える */
/* 松尾FB 2026-08-13：光の色をどこでも同じ淡いクリームに保つ。
   素材そのものは金色（#FADC92／彩度0.41）で、スクリーン合成のため
   「クリームの地の上＝白っぽく」「暗い写真の上＝金色が強く」と見え方が変わっていた。
   素材の彩度を落として淡いクリームにしておけば、背後が何であっても同じ色に見える。 */
.cp-hvideo__media { display: block; width: 100%; height: auto; aspect-ratio: 960 / 162;
  filter: saturate(.3); }
/* 素材の上下端で淡いハローが切れるので、境界に線が出ないようフェードで逃がす。
   左右端も弧の先端が硬く見切れるため（松尾FB 2026-08-10）、横フェードを media 側に掛けて交差させる */
.cp-hvideo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
             mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
.cp-hvideo__media { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }
.cp-hpin .cp-hscroll { position: relative; z-index: 1; }
/* 松尾FB 2026-08-10：火の粉は写真より前面に重ねる（旧: 背面）。pointer-events:none なので操作は阻害しない。
   スクリーン合成のため .cp-hpin__stage の外（兄弟）に置いてあり、DOM順で写真より後＝前面になる */
/* SPは画面幅ぶんだと弧が細くなりすぎるので、少しはみ出させて拡大する（.cp-history が overflow:hidden） */
@media (max-width: 767px) { .cp-hvideo { width: 132%; } }
/* ピン留めしない環境（reduced-motion）ではステージに余白が無く写真と重なるので出さない */
@media (prefers-reduced-motion: reduce) { .cp-hvideo { display: none; } }
/* 年表は内容幅で中央寄せ（本人指示 2026-08-17：狭い幅で左に張り付いて見えた） */
.cp-nenpyo { width: fit-content; max-width: min(920px, 100%); margin: 0 auto; padding: 0 clamp(20px,4vw,48px); }
/* 画面中央への寄せだとナビ（凡例）の下へ潜る幅がある（本人指摘 2026-08-17）。
   ナビが年表に届きうる 768〜1150px では「ナビ右側の残り幅の中で中央」に置く */
@media (min-width: 768px) and (max-width: 1150px) {
  #page-company .cp-nenpyo {
    width: auto; max-width: none; margin: 0;
    padding-left: var(--cp-navclear);
    display: flex; flex-direction: column; align-items: center;
  }
}
.cp-nenpyo__list { list-style: none; margin: 0; padding: 0; position: relative; }
.cp-nenpyo__list::before { content: ""; position: absolute; left: calc(clamp(70px,9vw,128px) + clamp(16px,2vw,24px) + 8px); top: 10px; bottom: 10px; width: 1px; background: rgba(160,140,100,.5); }
.cp-nenpyo__row { position: relative; display: grid; grid-template-columns: clamp(70px,9vw,128px) 18px minmax(0,1fr); gap: 0 clamp(16px,2vw,24px); align-items: baseline; padding: clamp(14px,1.6vw,24px) 0; }
.cp-nenpyo__year { font-family: var(--serif); font-weight: 500; font-size: clamp(20px,2.2vw,28px); letter-spacing: .02em; color: var(--gold); text-align: left; }
.cp-nenpyo__dot { position: relative; top: -2px; width: 10px; height: 10px; margin: 0 auto; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(200,169,110,.25); justify-self: center; }
.cp-nenpyo__txt { margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(13px,1vw,16px); line-height: 1.8; color: #1E1C19; }
/* 和暦（年号の下に小さく） */
.cp-nenpyo__era { display: block; font-family: var(--sans); font-weight: 400; font-size: clamp(10px,.72vw,12px); letter-spacing: .06em; color: rgba(30,28,25,.55); margin-top: .1em; }
/* 補足行（※注記・面積など。本文より一段小さく薄い） */
.cp-nenpyo__note { display: block; font-size: clamp(11px,.83vw,13px); line-height: 1.75; color: rgba(30,28,25,.6); }
.cp-nenpyo__more { text-align: center; margin-top: clamp(26px,2.6vw,44px); }
.cp-nenpyo__more .frame-btn { color: var(--gold); --fb-accent: #C8A96E; font-family: var(--serif); font-weight: 800; letter-spacing: .2em; }
/* 折りたたみ：最初は5件だけ。「もっと見る」で全件展開（本人指示 2026-08-10） */
.cp-nenpyo:not(.is-open) .cp-nenpyo__row:nth-child(n+6) { display: none; }
.cp-nenpyo.is-open .cp-nenpyo__more { display: none; }
.cp-nenpyo.is-open .cp-nenpyo__row:nth-child(n+6) { animation: nenpyoIn .5s ease backwards; }
@keyframes nenpyoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-nenpyo.is-open .cp-nenpyo__row:nth-child(n+6) { animation: none; } }

/* ── 会社概要 ── */
.cp-profile { background: var(--ecru); padding: clamp(70px,6.5vw,124px) 0 clamp(70px,6.5vw,124px); }
.cp-table { margin: 0; }
.cp-table__row { display: grid; grid-template-columns: clamp(110px,10vw,140px) minmax(0,1fr); gap: 0 clamp(20px,3vw,60px); padding: clamp(14px,1.3vw,20px) 0; border-bottom: 1px solid rgba(26,26,26,.14); }
.cp-table__row dt { font-family: var(--sans); font-size: clamp(13px,.78vw,15px); letter-spacing: .07em; color: #000; padding-top: .1em; }
.cp-table__row dd { margin: 0; font-family: var(--sans); font-size: clamp(13px,.78vw,15px); line-height: 1.65; color: var(--black); }

/* ── 拠点・アクセス ── */
.cp-access { background: var(--ecru); padding: 0 0 clamp(80px,7.5vw,140px); }
/* 決定稿：白カードの中に「左＝拠点リスト／右＝地図＋情報パネル」を収める */
.cp-access__card { display: grid; grid-template-columns: clamp(210px,21.6%,318px) minmax(0,1fr);
  background: #fff; border: 1px solid #E9E4DA; box-shadow: 0 18px 48px rgba(26,22,16,.07); overflow: hidden; }
.cp-access__tabs { display: flex; flex-direction: column; border-right: 1px solid #E9E4DA; }
.cp-ltab { appearance: none; -webkit-appearance: none; position: relative;
  flex: 1 1 auto;   /* 4項目でカードの高さを分け合い、リスト下に余白が残らないようにする */
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #EDE9E1;
  padding: clamp(16px,1.75vw,26px) clamp(16px,1.7vw,26px); min-height: clamp(76px,8.7vw,131px);
  cursor: pointer; transition: background .25s ease; }
.cp-ltab::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.cp-ltab:last-child { border-bottom: 0; }
.cp-ltab:hover { background: #FAF8F4; }
.cp-ltab__txt { display: flex; flex-direction: column; gap: clamp(5px,.5vw,8px); min-width: 0; }
.cp-ltab__num { font-family: var(--serif); font-size: clamp(11px,.86vw,13px); letter-spacing: .16em; color: #A79D8B; transition: color .25s ease; }
.cp-ltab__name { font-family: var(--serif); font-weight: 700; font-size: clamp(15px,1.26vw,19px); letter-spacing: .05em; color: #6E6455; transition: color .25s ease; }
.cp-ltab__arrow { flex: 0 0 auto; display: flex; width: clamp(14px,1.13vw,17px); color: #C3BAA9; transition: color .25s ease, transform .25s ease; }
.cp-ltab__arrow svg { width: 100%; height: auto; }
.cp-ltab:hover .cp-ltab__arrow { transform: translateX(3px); }
/* 他ページ用の汎用 .location-tab スタイル（右端の金バー・選択時のベージュ地）を打ち消す */
.cp-access .cp-ltab::after { display: none; }
/* 選択中は黒地に反転させて、どこを見ているかを一目で分かるようにする */
.cp-access .location-tab.active { background: #120E09; }
.cp-access .location-tab.active:hover { background: #120E09; }
.cp-access .location-tab.active::before { transform: scaleX(1); }
.cp-access .location-tab.active .cp-ltab__num { color: var(--gold); }
.cp-access .location-tab.active .cp-ltab__name { color: #F5F3EF; }
.cp-access .location-tab.active .cp-ltab__arrow { color: var(--gold); }
.cp-lmap { display: none; }
.cp-lmap.active { display: block; }
.cp-lmap iframe { display: block; width: 100%; height: clamp(300px,32.5vw,492px); border: 0; }
/* 地図の下：拠点名＋住所/TEL/アクセス と Google Maps ボタン */
.cp-linfo { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: clamp(20px,3vw,48px);
  border-top: 1px solid #E9E4DA; padding: clamp(24px,2.6vw,40px) clamp(22px,3.2vw,48px); }
/* 住所・アクセスは途中で折り返さない。幅が足りないときはボタンを下に落とさず、
   ボタン側を縮めて必ず右に並べる（テキストは伸ばさないので base 幅ぶんだけ確保される）。 */
.cp-linfo__body { flex: 0 1 auto; min-width: 0; }
.cp-linfo__name { position: relative; margin: 0 0 clamp(14px,1.3vw,20px); padding-left: 16px;
  font-family: var(--serif); font-weight: 700; font-size: clamp(17px,1.46vw,22px); letter-spacing: .06em; color: var(--black); }
.cp-linfo__name::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 3px; background: var(--gold); }
.cp-linfo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px,.86vw,13px); }
.cp-linfo__row { display: flex; align-items: center; gap: clamp(10px,1vw,15px); }
.cp-linfo__ico { flex: 0 0 auto; display: flex; width: clamp(17px,1.33vw,20px); color: var(--gold); }
.cp-linfo__ico svg { width: 100%; height: auto; }
.cp-linfo__txt { font-family: var(--sans); font-size: clamp(13px,1.06vw,16px); line-height: 1.7; color: #2C2822; white-space: nowrap; }
.cp-linfo__txt b { font-weight: 500; letter-spacing: .1em; margin-right: .9em; }
.cp-linfo__txt a { color: inherit; text-decoration: none; }
.cp-linfo__txt a:hover { text-decoration: underline; }
.cp-linfo__btn { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  width: clamp(210px,25.2vw,380px); min-width: 200px; min-height: clamp(52px,4.24vw,64px); padding: 0 clamp(14px,1.6vw,24px);
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: clamp(13px,1.06vw,16px); letter-spacing: .06em;
  transition: background .3s ease, color .3s ease; }
.cp-linfo__btn:hover { background: var(--gold); color: #fff; }
.cp-linfo__btn-ico { display: flex; width: 1.05em; }
.cp-linfo__btn-ico svg { width: 100%; height: auto; }

/* ── 組織図 ──
   本体は1枚画像（cp_orgchart.webp）。下の .cp-tree 系は画像の元になった旧マークアップ用で、
   画像を作り直すとき用に残してある（現在ページ側では使っていない）。 */
.cp-org { background: var(--ecru); padding: 0 0 clamp(90px,8.5vw,160px); }
.cp-org__fig { margin: 0 auto; padding-top: clamp(10px,1.5vw,24px); max-width: 1128px; }
/* 拡大表示はSPだけ。PCでは JS が disabled にするので、押せない・カーソルも変わらない */
.cp-org__open { display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; position: relative; cursor: default; }
.cp-org__open:disabled { opacity: 1; color: inherit; }
.cp-org__img { display: block; width: 100%; height: auto; }
/* 画像が小さくて読めない幅のときだけ「タップで拡大」を出す */
.cp-org__hint { display: none; }
/* 追従ヘッダー(z500)・SPメニュー(z1000)・読み込みバー(z9999)より前に出す */
.cp-orgzoom { position: fixed; inset: 0; z-index: 10000; background: rgba(10,8,6,.985); }
.cp-orgzoom[hidden] { display: none; }
.cp-orgzoom__scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
/* 画面より大きいときは中身の幅、小さいときは画面幅。これで拡大時も左端まで辿れる */
.cp-orgzoom__inner { width: max-content; min-width: 100%; min-height: 100%;
  display: flex; align-items: center; justify-content: center; }
/* JSが --z（表示幅px）を入れる。初期値は画面にフィット */
.cp-orgzoom__img { flex: 0 0 auto; width: var(--z, 100%); max-width: none; height: auto;
  background: var(--ecru); cursor: zoom-in; }
.cp-orgzoom.is-max .cp-orgzoom__img { cursor: zoom-out; }
.cp-orgzoom__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
  width: 44px; height: 44px; border: 1px solid rgba(245,243,239,.5); border-radius: 50%;
  background: rgba(10,8,6,.6); cursor: pointer; }
.cp-orgzoom__close::before, .cp-orgzoom__close::after { content: ""; position: absolute;
  top: 50%; left: 50%; width: 18px; height: 1.5px; background: var(--ecru); }
.cp-orgzoom__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.cp-orgzoom__close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
html.cp-zoom-open, html.cp-zoom-open body { overflow: hidden; }
/* 画像を等倍で置くと読めない幅（＝1128px未満）では拡大導線を出す */
@media (max-width: 767px) {
  .cp-org__open { cursor: zoom-in; }
  /* 日付（.cp-org__date）が右揃えで同じ行に来るので、こちらは左に置いて衝突を避ける */
  .cp-org__hint { display: inline-block; position: absolute; left: 6px; bottom: -2.1em;
    font-family: var(--sans); font-size: 12px; letter-spacing: .08em; color: rgba(26,26,26,.6); }
  .cp-org__hint::before { content: "＋ "; }
}
.cp-tree, .cp-tree ul { list-style: none; margin: 0; padding: 0; }
.cp-tree { display: flex; justify-content: center; --cp-line: rgba(110,100,80,.55); }
.cp-tree ul { display: flex; justify-content: center; align-items: flex-start; position: relative; padding-top: 22px; }
.cp-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: var(--cp-line); }
.cp-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 6px 0; }
.cp-tree li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cp-line); }
.cp-tree li:first-child::before { left: 50%; }
.cp-tree li:last-child::before { right: 50%; }
.cp-tree li:only-child::before { display: none; }
.cp-tree li::after { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: var(--cp-line); }
.cp-tree > li { padding: 0; }
.cp-tree > li::before, .cp-tree > li::after { display: none; }
.cp-box { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--sans); }
.cp-box--dark { background: #1A1A1A; color: #F5F3EF; font-weight: 700; font-size: 14px; padding: 9px 30px; }
.cp-box--gold { background: var(--gold); color: #1A1A1A; font-family: var(--serif); font-weight: 900; font-size: 15px; padding: 10px 26px; }
.cp-box--dept { background: #EFE8D6; border: 1px solid rgba(160,140,100,.55); color: #1A1A1A; font-weight: 700; font-size: 13.5px; padding: 8px 14px; }
.cp-box--sub { background: #F7F3E9; border: 1px solid rgba(160,140,100,.5); color: #1A1A1A; font-weight: 700; font-size: 13.5px; padding: 7px 18px; }
.cp-box--leaf { background: #fff; border: 1px solid rgba(120,110,90,.5); color: #1A1A1A; font-weight: 400; font-size: 12.5px; padding: 6px 12px; }
.cp-box--v { writing-mode: vertical-rl; padding: 14px 7px; min-height: 88px; letter-spacing: .1em; }
.cp-box--kei { background: #fff; border: 1px solid rgba(120,110,90,.45); color: #1A1A1A; font-size: 11.5px; padding: 4px 8px; }
.cp-tree__pair { position: relative; display: flex; align-items: center; }
.cp-box--aside { position: absolute; left: calc(100% + 44px); white-space: nowrap; }
.cp-box--dept, .cp-box--sub, .cp-box--leaf { white-space: nowrap; }
.cp-box--aside::before { content: ""; position: absolute; right: 100%; top: 50%; width: 44px; height: 1px; background: var(--cp-line); }
.cp-org__date { margin: 18px 6px 0; text-align: right; font-family: var(--sans); font-size: 13px; color: var(--black); }

/* 代表挨拶の1列積みはスマホ幅（767px以下）だけ。それ以上は常に「左文字・右写真」の6:4
   （本人指示 2026-08-17：〜860pxで縦積みになっていたのを2列に戻す） */
@media (max-width: 767px) {
  .cp-message__cols { grid-template-columns: 1fr; }
  /* 縦2:3の人物写真なので、幅を抑えて中央に置く */
  .cp-message__photo { width: 66%; max-width: 260px; margin: 0 auto; }
}

/* ── SP ── */
@media (max-width: 860px) {
  .cp-hero__ttlwrap { bottom: 18px; }
  .cp-hero__box p { white-space: normal; font-size: 12px; line-height: 1.9; }
  .cp-hero__corner { width: 18px; height: 18px; --ctk: 4px; }
  .cp-mvv__row { grid-template-columns: 1fr; gap: 22px; }
  .cp-mvv__row--rev { display: flex; flex-direction: column-reverse; }
  .cp-mvv__statement { line-height: 1.95; }
  /* MISSION／VISION：横並びだった「— 社会への約束」を英字の下に落として、
     空いた右側にPCの浮遊写真（1100px以下で非表示）の代わりを1枚置く。
     VALUEには写真が無いので --ph が付いたものだけ組み替える。 */
  .cp-mvv__tag--ph { display: grid; grid-template-columns: minmax(0,1fr) 40%;
    grid-template-areas: "en ph" "ja ph"; align-items: center;
    column-gap: clamp(14px,4vw,26px); row-gap: .45em; }
  .cp-mvv__tag--ph .cp-mvv__tag-en { grid-area: en; }
  .cp-mvv__tag--ph .cp-mvv__tag-ja { grid-area: ja; }
  .cp-mvv__tagph { grid-area: ph; display: block; }
  .cp-mvv__tagph img { display: block; width: 100%; height: auto; filter: brightness(.9); }
  .cp-hpick { grid-template-columns: 1fr; gap: 26px; width: 88vw; }
  .cp-hpick__body { padding-top: 0; }
  .cp-hpick__year { top: -.32em; }
  .cp-access__card { grid-template-columns: 1fr; }
  /* 4拠点を横1列に並べると384px必要で枠333pxに収まらず、右端（武生事業所）が
     切れて横スクロール前提になっていた。数が4つで固定なので2×2に組み替えて全部見せる。 */
  .cp-access__tabs { display: grid; grid-template-columns: 1fr 1fr; overflow-x: visible;
    border-right: 0; border-bottom: 1px solid #E9E4DA; }
  .cp-ltab { width: auto; min-height: 0; padding: 13px 10px; white-space: nowrap;
    border-bottom: 1px solid #EDE9E1; border-right: 1px solid #EDE9E1; justify-content: center; text-align: center; }
  .cp-ltab:nth-child(2n) { border-right: 0; }          /* 右列は縦罫を出さない */
  .cp-ltab:nth-last-child(-n+2) { border-bottom: 0; }  /* 最終行は横罫を出さない（枠側の線と二重になる） */
  .cp-ltab__txt { align-items: center; }
  .cp-ltab__arrow { display: none; }
  .cp-ltab::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; transform: scaleY(0); transform-origin: bottom; }
  .cp-access .location-tab.active::before { transform: scaleY(1); }
  .cp-lmap iframe { height: clamp(260px,58vw,340px); }
  .cp-linfo { flex-direction: column; align-items: stretch; }
  .cp-linfo__btn { width: 100%; }
  /* 狭い画面では TEL/ACCESS のラベルを値の上に出し、値だけで1行を使い切れるようにする */
  .cp-linfo__row { align-items: flex-start; }
  .cp-linfo__ico { margin-top: 2px; }
  .cp-linfo__txt { white-space: normal; }
  .cp-linfo__txt b { display: block; margin: 0 0 1px; font-size: .8em; letter-spacing: .12em; color: #8C8375; }
  .cp-table__row { grid-template-columns: 1fr; gap: 4px; }
  .cp-table__row dt { font-weight: 700; opacity: .75; }
}
@media (prefers-reduced-motion: reduce) { .cp-hscroll { scroll-behavior: auto; } }


/* ═══════════════════════════════════════════════════════════
   TRUSTページ（直しカンプ 97:7164 準拠）接頭辞 trp-
   黒地 × 白カード × ゴールド差し色／左sticky索引
═══════════════════════════════════════════════════════════ */
.trp { background: var(--kuro); color: var(--ecru); overflow-x: clip; position: relative; }   /* 旧 #101012＝青みが乗って明るい。TOPの黒に統一 */
/* TOPと同じフィルムグレイン。z-index:0＝コンテンツ(z1)の下に敷くので、
   写真・白カード・NUMBERSの明るい帯（いずれも不透明）には乗らず、地の黒にだけ出る。
   強さは .24 ではなく .12。TOPの .24 は「写真の上」に乗せる前提の値で、
   このページのように地の黒（--kuro）へじかに乗せると同じ .24 でも粒が浮いて見えるため半分にする。 */
.trp::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  opacity: .24;   /* 旧.12＝ここだけ他ページの半分の濃さだった。TOP（.24）に統一 */
  mix-blend-mode: screen;
  animation: grainJitter .3s steps(1) infinite;
}
.trp-hero, .trp-body { position: relative; z-index: 1; }
.trp .anim-up { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.trp .anim-up.visible { opacity: 1; transform: none; }

/* ── HERO ── */
/* 寸法は会社概要（.cp-hero）に統一 */
.trp-hero { background: transparent; padding-top: var(--hero-gap); }
.trp-hero__media { position: relative; width: min(1734px, 95.2vw); margin-inline: auto; height: var(--hero-media); overflow: hidden; }
.trp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trp-hero__scrim { position: absolute; inset: 0; background: rgba(26,26,26,.53); }
.trp-hero__ttl { position: absolute; left: clamp(24px, 4.6vw, 88px); bottom: clamp(24px, 3vw, 56px); }
.trp-hero__eyebrow { display: block; font-family: var(--serif); font-size: clamp(18px, 1.7vw, 32px); font-weight: 500; letter-spacing: .11em; color: var(--gold); margin-bottom: 14px; }
.trp-hero__h1 { font-family: var(--serif); font-size: clamp(44px, 4.9vw, 94px); font-weight: 900; letter-spacing: -.01em; line-height: 1.05; color: var(--ecru); margin: 0; }
.trp-hero__foot { padding: clamp(36px, 3.5vw, 60px) 6% clamp(48px, 4.5vw, 80px); text-align: center; }
.trp-hero__q { font-family: var(--serif); font-size: clamp(24px, 2.9vw, 55px); font-weight: 600; letter-spacing: .07em; color: var(--ecru); margin: 0 0 clamp(20px, 2vw, 35px); }
.trp-hero__lead {
  max-width: 1272px; margin: 0 auto;
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px);
  background: rgba(18,18,18,.81);
  border: 2px solid var(--gold);
  font-family: var(--sans); font-size: clamp(13px, 1.05vw, 20px); line-height: 1.8; color: #fff;
}

/* ── BODY：索引 + 本文 ── */
.trp-body {
  display: flex; align-items: flex-start; gap: var(--pgnav-gap);
  max-width: var(--pgnav-maxw); margin: 0 auto; padding: 0 var(--pgnav-pad);
  /* 画面左端から本文カラム左端までの距離。全幅の帯を敷くときに使う */
  --trp-bleed: calc(max(0px, (100vw - var(--pgnav-maxw))) / 2 + var(--pgnav-pad) + var(--pgnav-w) + var(--pgnav-gap));
}
.trp-index {
  position: sticky; top: 120px;
  flex: 0 0 var(--pgnav-w); margin-top: clamp(120px, 22.3vw, 321px); /* NUMBERSの見出しと頭を揃える */
  background: #fff; border: 1.34px solid rgba(200,169,110,.25);
  z-index: 5;
}
.trp-index a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 27px;
  font-family: var(--sans); font-size: 16px; letter-spacing: .04em;
  color: #1a1a1a; text-decoration: none;
  border-top: 1.34px solid rgba(0,0,0,.06);
  transition: color .25s, background .25s;
}
.trp-index a:first-child { border-top: 0; }
.trp-index a:hover { color: var(--gold); }
.trp-index a.is-active { color: var(--gold); background: rgba(200,169,110,.05); font-weight: 500; }
/* 矢印は「↓」の文字だとフォント依存で斜めになったり色付き絵文字に化けるのでSVGで描く。
   currentColor なので is-active/hover のゴールドにそのまま追従する。 */
.trp-index__arrow { flex: 0 0 auto; width: 10px; height: 26px; display: block; }
/* 松尾FB 2026-08-13：CSR（環境・社会貢献活動）とContact帯の間に黒い帯が出ていた。
   各セクションのクリーム地は「セクション自身の ::before」で敷いており、セクションの下端で終わる。
   そのため本文カラム(.trp-main)の下パディングぶんだけページの地の黒(.trp)が覗いて、
   クリームとContactの写真の間に黒い帯として見えていた。
   余白はカラム側ではなく最後のセクション側（＝クリームが届く範囲）で持たせて帯を消す。
   量は他ページ（私たちについて／事業内容／実績紹介）と同じ160pxに揃える。 */
.trp-main { flex: 1 1 auto; min-width: 0; max-width: 950px; padding-bottom: 0; }
.trp-main > section:last-child { padding-bottom: clamp(90px, 8.5vw, 160px); }

/* ── セクション共通 ── */
.trp-sec { padding-top: clamp(72px, 7vw, 120px); }
/* 画面幅いっぱいの帯を敷く共通土台（背景そのものは各モディファイアで指定） */
.trp-sec--bleed { position: relative; }
.trp-sec--bleed::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; left: calc(-1 * var(--trp-bleed)); width: 100vw;
}
.trp-sec--bleed > * { position: relative; z-index: 1; }
.trp-eyebrow { display: block; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.trp-chip {
  display: inline-block; background: #1a1a1a; color: #fff;
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 53px); line-height: 1; letter-spacing: .08em;
  padding: 20px 16px; margin: 0;
}
.trp-lead { font-family: var(--sans); font-size: 15px; line-height: 2; color: rgba(245,243,239,.85); margin: 18px 0 0; }
.trp-sec--dark .trp-lead { color: rgba(245,243,239,.85); }

/* PHOTOプレースホルダ */
.trp-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 300/161; background: #d9d9d9; }
.trp-ph span { font-family: var(--sans); font-size: 12px; letter-spacing: .22em; color: #8f8f8f; }

/* ── NUMBERS ── */
.trp-sec--numbg {
  padding: clamp(120px, 22.3vw, 321px) clamp(20px, 2.4vw, 24px) clamp(64px, 7vw, 90px);
}
.trp-sec--numbg::before { background: #f5f3ef url("../images/trustpg_numbers_bg.jpg") center / cover no-repeat; }
.trp-sec--numbg .trp-eyebrow { color: #9a7c40; }
.trp-sec--numbg .trp-lead { color: #1a1a1a; font-size: 15px; line-height: 1.8; margin-top: 14px; }
/* 数字カード（Figma 504:65198 準拠。カード436×397・ワイド939×359を1920カンプ実測で再現）
   余白はカード幅に対する比率で持たせているので、カラム幅が変わっても配置比が崩れない */
.trp-numgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 44px; }
/* 松尾FB 2026-08-13：ぐるり一周の枠線をやめ、四つ角のブラケットだけにする。
   ブラケットの組み方は会社概要ヒーロー（.cp-hero__corner）と同じ考え方。 */
.trp-numcard { background: #fff; padding: 7.1% 0; text-align: center; position: relative; }  /* 上下31/436 */
.sbs-corner { position: absolute; pointer-events: none; z-index: 2;
  width: clamp(20px, 2.2vw, 34px); height: clamp(20px, 2.2vw, 34px); --ctk: 2.5px; }
.sbs-corner::before, .sbs-corner::after { content: ""; position: absolute; background: var(--gold); border-radius: calc(var(--ctk) / 2); }
.sbs-corner::before { width: 100%; height: var(--ctk); }   /* 横バー */
.sbs-corner::after  { width: var(--ctk); height: 100%; }   /* 縦バー */
.sbs-corner--tl { top: 0; left: 0; }
.sbs-corner--tl::before, .sbs-corner--tl::after { top: 0; left: 0; }
.sbs-corner--tr { top: 0; right: 0; }
.sbs-corner--tr::before, .sbs-corner--tr::after { top: 0; right: 0; }
.sbs-corner--br { bottom: 0; right: 0; }
.sbs-corner--br::before, .sbs-corner--br::after { bottom: 0; right: 0; }
.sbs-corner--bl { bottom: 0; left: 0; }
.sbs-corner--bl::before, .sbs-corner--bl::after { bottom: 0; left: 0; }
/* ホバーで四つ角が外へ開く（松尾FB 2026-08-13）。
   開く量は --cd 一つで決まる。角ごとの向きは下の4行が持っているので、
   量を変えたいときは :hover 側の --cd だけ触ればよい。
   transform は常に指定しておく（0pxでも）。ホバー時だけ transform を足す形にすると
   none → translate の補間になり、ブラウザによって初動がカクつく。 */
.sbs-corner { --cd: 0px; transition: transform .3s ease-out; }
.sbs-corner--tl { transform: translate(calc(var(--cd) * -1), calc(var(--cd) * -1)); }
.sbs-corner--tr { transform: translate(var(--cd),            calc(var(--cd) * -1)); }
.sbs-corner--br { transform: translate(var(--cd),            var(--cd)); }
.sbs-corner--bl { transform: translate(calc(var(--cd) * -1), var(--cd)); }
@media (hover: hover) and (pointer: fine) {
  .trp-numcard:hover .sbs-corner,
  .trp-numwide:hover .sbs-corner { --cd: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .sbs-corner { transition: none; }
}
/* 松尾FB 2026-08-13：見出しをひと回り大きく（15px固定 → 最大20px） */
.trp-numcard__label { display: block; font-family: var(--sans); font-size: clamp(16px,1.35vw,20px); font-weight: 700; line-height: 1.44; color: #1a1a1a; margin: 0; }
/* イラスト枠：2枚のイラストは縦横比が違う（586×463=1.27 と 712×453=1.57）。
   grid + max-height:95% だと「枠の高さ→画像の高さ→枠の高さ」と循環して枠が中身なりに伸び、
   実測で 228px と 183px＝45px ずれ、その下の数字と本文のつらも揃っていなかった。
   枠を 4:3 の固定比にして中身を contain で収める（＝どちらのカードも枠が同じ高さになる）。
   4:3 は、はみ出していた側（586×463）が今と同じ大きさで収まる比率。 */
/* 松尾FB 2026-08-13：イラストの存在感が強すぎたので一回り縮小（68.8% → 54%）。
   カードの高さを揃えるための aspect-ratio はそのまま（枠だけ残して中身を小さくする） */
.trp-numcard__fig { display: block; width: 54%; margin: 3.4% auto 0; aspect-ratio: 4 / 3; }
.trp-numcard__fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 松尾FB：数字は倍くらいの大きさに */
.trp-numcard__val { display: block; font-family: var(--serif); font-size: clamp(40px, 5.6vw, 76px); font-weight: 900; line-height: 1; color: var(--gold); margin: 5.3% 0 0; }  /* 松尾FB 2026-08-13：数字を二回り縮小 101→76 */
/* カウントアップ中に桁が増えても数字が横に踊らないよう、等幅数字＋JSが測った幅で固定する */
.trp-count { display: inline-block; font-variant-numeric: tabular-nums; text-align: center; }
.trp-numcard__val small { font-size: .55em; font-weight: 900; margin-left: .06em; }
.trp-numcard__txt { width: 68.4%; font-family: var(--sans); font-size: 13px; line-height: 1.66; color: #1a1a1a; margin: 5.3% auto 0; }  /* 幅298/436・行間21.6 */

/* ワイドカード（加工・組立精度） */
.trp-numwide { background: #fff; padding: 3.3% 0 5.9%; margin-top: 60px; text-align: center; position: relative; }
.trp-numwide__row { display: flex; gap: 5.9%; align-items: center; margin-top: 4.8%; padding: 0 6.8%; text-align: left; }
.trp-numwide__fig { flex: 0 0 47.4%; }                                   /* 445/939 */
.trp-numwide__fig img { width: 100%; height: auto; display: block; }
.trp-numwide__body { flex: 1 1 auto; container-type: inline-size; }
/* ワイドカードの数字も大きくするが、右側の本文カラムが狭く（実測363px）「1μmレベル」が
   80pxを超えると折り返してしまう。カード側の101pxはここでは使えないので上限を79pxにする。
   さらに 25cqi（カラム幅の25%）で天井を掛け、「1μmレベル」(約3.75em) がどの幅・
   どの代替フォントでも必ず1行に収まるようにする（松尾FB 2026-08-10） */
.trp-numwide__body .trp-numcard__val { margin-top: 0; text-align: left; font-size: min(clamp(30px, 4.4vw, 60px), 19cqi); white-space: nowrap; }  /* 松尾FB 2026-08-13：数字を二回り縮小 79→60（cqi比率維持で1行保証） */
.trp-numwide__body .trp-numcard__txt { width: auto; margin: 7% 0 0; }

/* ── REASONS（黒帯） ── */
/* 地の黒（.trp = --kuro）と揃える＝背景を持たせずグレインを透かす */
.trp-sec--dark { background: transparent; padding: clamp(56px, 6vw, 76px) clamp(20px, 2.4vw, 24px) clamp(64px, 7vw, 90px); margin-top: clamp(64px, 7vw, 96px); }
.trp-sec--dark .trp-head { margin-bottom: clamp(40px, 4.5vw, 56px); }
/* Figma 104:711 準拠：左は「金の縦線＋先端の炎マーク」だけ（番号ボックスは廃止）。
   縦線は41pxレールの右端＝本文の左48px手前に立つ */
.trp-reason {
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr) clamp(420px, 40vw, 470px);  /* 松尾FB 2026-08-13：写真自体を大きく→520はやりすぎ→中間の470 */
  /* 大きくした写真ぶんは右の空きへ張り出して本文幅を守る。
     右の空きは実測で free≒0.48vw-554px（1280:62/1366:122/1536:195/1920:370）なので、
     常に20px以上残る 560px-47vw を張り出し量にする */
  margin-right: clamp(-200px, calc(560px - 47vw), 0px);  /* 松尾FB 2026-08-13：大画面で文字↔写真が158px空く→上限-200で38px程度に詰める */
  column-gap: 0; align-items: start;
  margin-top: clamp(48px, 5.5vw, 83px); position: relative;
  min-height: 192px;
}
/* 1280px以下は右の空きが無いので、張り出しをやめて写真を従来バランスに戻す（本文の折返し防止） */
@media (min-width: 768px) and (max-width: 1280px) {
  .trp-reason { grid-template-columns: 41px minmax(0, 1fr) clamp(240px, 25vw, 420px); margin-right: 0; }
}
/* 松尾FB 2026-08-13：参考(eat-play-sleep.org)みたいに写真を行の枠から下へはみ出させる。
   上下同量の +/− マージンなので行の高さは変えず、写真だけ下の余白へ突き抜ける。
   本文は行の縦中央（＝写真の縦中央付近）に置いて参考と同じバランスにする */
@media (min-width: 1281px) {
  /* 写真は行の高さ計算から外す（絶対配置）。行の高さ＝テキストだけになり、
     縦線レールもテキスト分の長さで止まる → 写真だけが枠を突き破って見える */
  /* 参考と同じく写真はテキストの縦中央に置き、上下両方へ等しくはみ出させる */
  .trp-reason__ph { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(420px, 40vw, 470px); margin: 0; z-index: 1; }
  /* 項目間の細罫線は一度入れたが「横線は消して」の指示で撤去（松尾FB 2026-08-13）。配置だけ参考準拠 */
  .trp-reason__body { align-self: center; }
  /* 行の高さ＝テキストだけにして写真の上下はみ出し量を最大化（罫線またぎを成立させる） */
  .trp-reason { min-height: 0; }
  .trp-reason + .trp-reason { margin-top: clamp(96px, 8vw, 110px); }
}
.trp-reason__rail { align-self: stretch; position: relative; border-right: 1px solid var(--gold); }
.trp-reason__rail::before {
  content: ""; position: absolute; right: -7.5px; top: -17px;
  width: 15px; height: 35px;
  background: url("../images/trustpg_flame.svg") center / contain no-repeat;
}
/* 縦線→本文は48px（Figma）、本文→写真は32px。gapを分けるためpaddingで持たせる */
.trp-reason__body { position: relative; padding-left: clamp(20px, 3.4vw, 48px); padding-right: clamp(12px, 1.6vw, 24px); }
.trp-reason__ttl { font-family: var(--serif); font-size: clamp(28px, 2.2vw, 40px); font-weight: 700; letter-spacing: .075em; color: var(--gold); margin: 0; line-height: 1.44; }
.trp-reason__sub { font-family: var(--serif); font-size: clamp(18px, 1.4vw, 24px); font-weight: 700; letter-spacing: .11em; color: #fff; margin: 13px 0 0; line-height: 1.44; }
.trp-reason__txt { font-family: var(--sans); font-size: 13px; line-height: 2.08; color: #fff; margin: 14px 0 0; max-width: 505px; }
.trp-reason__ph { margin: 0; aspect-ratio: 337/235; overflow: hidden; }
.trp-reason__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── CERTIFICATION & AWARD ── */
/* 認証･受賞は #F5F3EF のベタ帯（NUMBERSと同じく画面幅いっぱい） */
.trp-sec--light { padding: clamp(56px, 6vw, 90px) clamp(20px, 2.4vw, 24px) clamp(64px, 7vw, 96px); }
.trp-sec--light::before { background: #F5F3EF; }
.trp-sec--light .trp-eyebrow { color: #9a7c40; }
.trp-sec--light .trp-lead { color: #1a1a1a; }   /* クリーム面ではリード文を黒に（既定は明色＝ダーク面用） */
.trp-certgrid {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; max-width: 976px;
  --cert-rg: clamp(32px, 4vw, 56px); --cert-cg: clamp(36px, 4.5vw, 60px);
  row-gap: var(--cert-rg); column-gap: var(--cert-cg);
}
.trp-cert { background: var(--ecru); padding: 0 7px 26px; position: relative; }
/* Figma準拠：カードは枠を持たず、列間の縦点線と行間の横点線だけで区切る（箇条書きと同じ点線） */
.trp-certgrid > .trp-cert:nth-child(even)::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--cert-cg) / 2);
  border-left: 1px dotted rgba(26,26,26,.4);
}
/* 横線は各行の左カードから、列間gapを跨いでグリッド全幅に引く */
.trp-certgrid > .trp-cert:nth-child(odd):nth-child(n+3)::after {
  content: ""; position: absolute; top: calc(-1 * var(--cert-rg) / 2);
  left: 0; width: calc(200% + var(--cert-cg));
  border-top: 1px dotted rgba(26,26,26,.4);
}
.trp-cert__media { display: grid; place-items: center; background: #fff; height: clamp(200px, 17vw, 244px); padding: 18px; overflow: hidden; }
.trp-cert__media img { max-width: 82%; max-height: clamp(160px, 13.5vw, 200px); object-fit: contain; }
.trp-cert__ttl { font-family: var(--serif); font-size: clamp(22px, 1.6vw, 29px); font-weight: 700; color: var(--gold); margin: 28px 10px 0; line-height: 1.3; }
.trp-cert__txt { font-family: var(--sans); font-size: clamp(14px, 1vw, 16px); line-height: 1.75; letter-spacing: .065em; color: #1a1a1a; margin: 13px 10px 0; }
.trp-award { display: grid; grid-template-columns: clamp(240px, 24vw, 324px) 1fr; gap: clamp(20px, 2.4vw, 31px); background: var(--ecru); padding: clamp(18px, 2vw, 28px); margin-top: clamp(36px, 4vw, 52px); max-width: 976px; position: relative; }
/* Figma準拠：受賞ブロックも認証グリッドと同じ点線で区切る（上のmargin中央に1本） */
.trp-award::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(-1 * clamp(18px, 2vw, 26px));
  border-top: 1px dotted rgba(26,26,26,.4);
}
.trp-award__cert { margin: 0; }
.trp-award__cert img { width: 100%; height: auto; display: block; }
.trp-award__side { min-width: 0; }
.trp-award__photo { margin: 0 0 24px; background: #fff; }
/* 表彰式写真は下端（足元）を基準にトリミング。centerだと足が見切れる（写真上部は白壁なので削ってよい） */
.trp-award__photo img { width: 100%; max-height: 300px; object-fit: cover; object-position: 50% 100%; display: block; }
.trp-award__photo--logo { display: grid; place-items: center; padding: 20px; }
.trp-award__photo--logo img { width: auto; max-height: 244px; object-fit: contain; }
.trp-award__side .trp-cert__ttl { margin-left: 0; }
.trp-award__side .trp-cert__txt { margin-left: 0; }

/* ── CSR ── */
/* Figmaは 976px幅で写真449px＝46%。本文カラムが950pxに収まる現状では絶対値だと本文が窮屈になるため、
   カンプの比率（46:54）で持たせる */
.trp-csr { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); background: var(--ecru); margin-top: clamp(28px, 3.2vw, 42px); max-width: 976px; }
/* Figma 452:247／452:154 の Vector 5：ブロック間・カード群の前を 1px #d9d9d9 の線で区切る
   （参考: maeni.co.jp/csr の格子レイアウト。カードの枠ではなく細い区切り線だけで見せる） */
.trp-csr + .trp-csr,
.trp-csrgrid { border-top: 1px solid #d9d9d9; padding-top: clamp(28px, 3.2vw, 42px); }
/* Figma 108:4063／452:158 のマスクは 449×317。本文の高さに引きずられて写真が伸びると
   グラフの空欄行まで写ってしまうので、カンプと同じ比率で固定して上に寄せる */
.trp-csr__media { margin: 0; overflow: hidden; aspect-ratio: 449 / 317; align-self: start; }
.trp-csr__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 温室効果ガスのグラフは縦長（898×1034）。Figmaは上端合わせで会社名〜グラフ〜表の頭までを見せている */
.trp-csr--graph .trp-csr__media img { object-position: top center; }
.trp-csr__body { padding: clamp(20px, 2.4vw, 30px) clamp(24px, 3.4vw, 48px) clamp(22px, 2.6vw, 30px) clamp(20px, 2.2vw, 27px); }
.trp-csr__ttl { font-family: var(--serif); font-size: clamp(21px, 1.6vw, 28px); font-weight: 700; line-height: 1.3; color: #1a1a1a; margin: 0; }
.trp-csr__txt { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: #1a1a1a; margin: 12px 0 0; }
.trp-list { list-style: none; margin: 16px 0 0; padding: 0; }
.trp-list li {
  position: relative; padding: 8px 0 8px 20px;
  font-family: var(--sans); font-size: 15px; line-height: 1.35; color: #1a1a1a;
  border-bottom: 1px dotted rgba(26,26,26,.45);   /* Figma準拠：実線→点線（松尾FB 2026-08-10） */
}
.trp-list li::before { content: "●"; position: absolute; left: 0; top: 10px; font-size: 10px; color: var(--gold); }
.trp-csrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 60px); margin-top: clamp(28px, 3.2vw, 42px); max-width: 976px; }
.trp-csrcard { background: var(--ecru); padding: 0 7px 26px; position: relative; }
/* Figma 452:138 の Vector 5：2枚のカードの間に縦の区切り線（gapの中央に置く） */
.trp-csrcard + .trp-csrcard::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * clamp(16px, 2vw, 30px)); width: 1px; background: #d9d9d9;
}
.trp-csrcard .trp-ph { aspect-ratio: 346/231; margin: 0 0 14px; }
.trp-csrcard__ttl { font-family: var(--serif); font-size: clamp(22px, 1.6vw, 29px); font-weight: 700; color: #1a1a1a; margin: 14px 10px 0; line-height: 1.3; }
.trp-csrcard .trp-cert__txt { margin-left: 10px; margin-right: 10px; }
.trp-csrcard .trp-list { margin: 20px 10px 0; }

/* ── レスポンシブ ── */
@media (max-width: 1100px) {
  .trp-body { padding-left: 5%; gap: 48px; }
  .trp-index { flex-basis: var(--pgnav-w); }
  .trp-index a { padding: 18px 18px; font-size: 14px; }
  .trp-body { --trp-bleed: calc(5vw + var(--pgnav-w) + 48px); }
}
@media (max-width: 860px) {
  .trp-hero__media { width: 100%; }
  .trp-body { display: block; padding: 0 6%; }
  .trp-index { position: static; margin: 48px 0 0; display: flex; flex-wrap: wrap; }
  .trp-index a { flex: 1 1 40%; justify-content: center; gap: 10px; border-top: 0; border-bottom: 1.34px solid rgba(0,0,0,.06); padding: 14px 10px; font-size: 13px; }
  .trp-main { max-width: none; }
  .trp-body { --trp-bleed: 6vw; }
  .trp-numgrid { grid-template-columns: 1fr; gap: 28px; }
  .trp-numcard { padding: 26px 0; }
  .trp-numcard__fig { width: 60%; margin-top: 14px; }
  .trp-numcard__txt { width: 84%; margin-top: 18px; }
  .trp-numwide { padding: 26px 0 30px; margin-top: 28px; }
  .trp-numwide__row { flex-direction: column; align-items: stretch; gap: 22px; padding: 0 8%; margin-top: 18px; }
  .trp-numwide__fig { flex: none; }
  .trp-numwide__body .trp-numcard__val { text-align: center; }
  .trp-numwide__body .trp-numcard__txt { margin-top: 14px; }
  .trp-sec--dark { margin-left: -6.4%; margin-right: -6.4%; padding-left: 6%; padding-right: 6%; }
  /* SPも金の縦線は残し、写真は本文の下に回す */
  .trp-reason { grid-template-columns: 20px minmax(0, 1fr); min-height: 0; }
  .trp-reason__rail { grid-column: 1; grid-row: 1 / 3; }
  .trp-reason__body { grid-column: 2; grid-row: 1; padding: 0 0 0 16px; }
  .trp-reason__ph { grid-column: 2; grid-row: 2; margin-top: 18px; }
  /* SPは1カラム。縦点線は消し、2枚目以降のカードの上に横点線を出す */
  .trp-certgrid { grid-template-columns: 1fr; }
  .trp-certgrid > .trp-cert:nth-child(even)::before { display: none; }
  .trp-certgrid > .trp-cert:nth-child(odd):nth-child(n+3)::after { display: none; }
  .trp-certgrid > .trp-cert + .trp-cert::after {
    content: ""; position: absolute; top: calc(-1 * var(--cert-rg) / 2);
    left: 0; width: 100%; border-top: 1px dotted rgba(26,26,26,.4);
  }
  .trp-award { grid-template-columns: 1fr; }
  .trp-csr { grid-template-columns: 1fr; }
  .trp-csr__media { aspect-ratio: 16/10; }
  /* SPは1カラムなので縦線→横線に切り替える */
  .trp-csrgrid { grid-template-columns: 1fr; }
  .trp-csrcard + .trp-csrcard::before {
    left: 0; right: 0; top: calc(-1 * clamp(16px, 2vw, 30px)); bottom: auto;
    width: auto; height: 1px;
  }
}


/* ═══════════════════════════════════════════════════════════
   プライバシーポリシー（Figma 556:983 準拠）接頭辞 ppx-
═══════════════════════════════════════════════════════════ */
.ppx { background: var(--ecru); color: var(--black); }
.ppx .anim-up { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.ppx .anim-up.visible { opacity: 1; transform: none; }

/* HERO */
.ppx-hero {
  position: relative; overflow: hidden;
  min-height: calc(var(--hero-gap) + var(--hero-media));   /* 寸法は会社概要（.cp-hero）に統一 */
  /* 見出し位置はお問い合わせ（.ct-hero）と同じ縦中央に（松尾FB 2026-08-10。旧: flex-end＝下端寄せ） */
  display: flex; align-items: center;
  background: var(--kuro);   /* 旧 #1a1a1a＝TOPよりかなり明るい。TOPの黒に統一 */
  padding: clamp(96px, 9vw, 140px) clamp(24px, 17.4vw, 334px);
}
/* 写真はリタッチ済みで既に十分暗いため brightness は掛けない（掛けると潰れる）。
   見出しの可読性ぶんだけ左側にグラデを乗せる */
.ppx-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ppx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,18,18,.72) 0%, rgba(18,18,18,.38) 55%, rgba(18,18,18,.18) 100%); }
.ppx-hero__inner { position: relative; z-index: 1; }
.ppx-hero__eyebrow { display: block; font-family: var(--serif); font-size: clamp(18px, 1.7vw, 32px); font-weight: 500; letter-spacing: .11em; color: var(--gold); margin-bottom: 16px; }
.ppx-hero__h1 { font-family: var(--serif); font-size: clamp(30px, 4.9vw, 94px); font-weight: 900; letter-spacing: -.01em; line-height: 1.05; color: var(--ecru); margin: 0; }

/* 本文 */
.ppx-body { padding: clamp(56px, 6.2vw, 120px) clamp(24px, 6vw, 80px) clamp(80px, 9vw, 150px); }
.ppx-inner { max-width: 900px; margin: 0 auto; }
.ppx-intro { font-family: var(--sans); font-size: clamp(14px, 1.05vw, 16px); line-height: 2.1; color: #1a1a1a; margin: 0 0 clamp(40px, 4.4vw, 64px); }

.ppx-sec { margin-top: clamp(32px, 3.6vw, 52px); }
.ppx-sec:first-of-type { margin-top: 0; }
.ppx-sec__ttl {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--serif); font-size: clamp(19px, 1.6vw, 26px); font-weight: 700;
  letter-spacing: .04em; line-height: 1.5; color: #1a1a1a;
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,26,26,.16);
}
.ppx-sec__no { flex: 0 0 auto; font-family: var(--serif); font-size: .85em; font-weight: 900; color: var(--gold); letter-spacing: .06em; }
.ppx-sec p { font-family: var(--sans); font-size: clamp(14px, 1.02vw, 15.5px); line-height: 2.05; color: #1a1a1a; margin: 0; }
.ppx-list { list-style: none; margin: 14px 0 0; padding: 0; }
.ppx-list li {
  position: relative; padding: 7px 0 7px 20px;
  font-family: var(--sans); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.85; color: #1a1a1a;
}
.ppx-list li::before { content: "●"; position: absolute; left: 0; top: 12px; font-size: 8px; color: var(--gold); }

/* 窓口 */
.ppx-contact {
  margin-top: clamp(48px, 5.5vw, 80px);
  background: #fff; border: 1px solid rgba(200,169,110,.45);
  padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 48px);
}
.ppx-contact__ttl { font-family: var(--serif); font-size: clamp(18px, 1.4vw, 23px); font-weight: 700; letter-spacing: .05em; color: var(--gold); margin: 0 0 22px; }
.ppx-dl { margin: 0; }
.ppx-dl > div { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(26,26,26,.1); }
.ppx-dl dt { flex: 0 0 clamp(96px, 11vw, 150px); font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #1a1a1a; margin: 0; }
.ppx-dl dd { margin: 0; font-family: var(--sans); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.8; color: #1a1a1a; }
.ppx-dl dd a { color: var(--gold); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity .25s; }
.ppx-dl dd a:hover { opacity: .7; }
.ppx-rev { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: rgba(26,26,26,.55); margin: 22px 0 0; text-align: right; }

@media (max-width: 767px) {
  .ppx-hero { padding-left: 6%; padding-right: 6%; align-items: center; min-height: 300px; }
  .ppx-sec__ttl { flex-direction: column; gap: 4px; }
  .ppx-dl > div { flex-direction: column; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT（お問い合わせ）ページ — Figma 295:32777 決定稿準拠
   接頭辞 .ct-  ／ #page-contact 内でのみ使用
   ════════════════════════════════════════════════════════════ */

#page-contact { background: #F5F3EF; }

/* ── HERO ───────────────────────────────────────────── */
.ct-hero {
  position: relative;
  background: var(--kuro);   /* 旧 #1A1A1A＝TOPよりかなり明るい。TOPの黒に統一 */
  min-height: calc(var(--hero-gap) + var(--hero-media));   /* 寸法は会社概要（.cp-hero）に統一 */
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.ct-hero__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background-repeat: no-repeat;
  background-position: left 32%;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 7%, #000 22%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 7%, #000 22%);
  z-index: 0;
}
.ct-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(96px, 9vw, 140px) clamp(24px, 17.4vw, 334px);
}
.ct-hero__eyebrow {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.67vw, 32px);
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold, #C8A96E);
  margin: 0;
}
.ct-hero__title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(42px, 4.93vw, 94.62px);
  letter-spacing: -.01em;
  line-height: 1.05;
  color: #F5F3EF;
  margin: clamp(12px, 1.04vw, 20px) 0 0;
}
.ct-hero__box {
  position: relative;
  display: inline-block;
  max-width: min(100%, 742px);
  margin-top: clamp(26px, 2.6vw, 50px);
  padding: clamp(16px, 1.05vw, 20px) clamp(18px, 1.36vw, 26px);
  background: rgba(18, 18, 18, .81);
  border: 2px solid var(--gold, #C8A96E);
}
.ct-hero__lead {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1.04vw, 20px);
  line-height: 1.8;
  color: #fff;
}
.ct-hero__corner {
  position: absolute;
  width: clamp(18px, 1.56vw, 30px);
  height: clamp(18px, 1.56vw, 30px);
  pointer-events: none;
}
.ct-hero__corner--tl { top: -2px;    left: -2px;    border-top:    5px solid var(--gold, #C8A96E); border-left:  5px solid var(--gold, #C8A96E); }
.ct-hero__corner--tr { top: -2px;    right: -2px;   border-top:    5px solid var(--gold, #C8A96E); border-right: 5px solid var(--gold, #C8A96E); }
.ct-hero__corner--br { bottom: -2px; right: -2px;   border-bottom: 5px solid var(--gold, #C8A96E); border-right: 5px solid var(--gold, #C8A96E); }
.ct-hero__corner--bl { bottom: -2px; left: -2px;    border-bottom: 5px solid var(--gold, #C8A96E); border-left:  5px solid var(--gold, #C8A96E); }

/* ── MAIN（フォーム面） ─────────────────────────────── */
.ct-main {
  position: relative;
  background: #F5F3EF;
  padding: clamp(64px, 6.25vw, 120px) clamp(20px, 4vw, 64px);
  overflow: hidden;
}
.ct-intro {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, .90vw, 17.4px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  letter-spacing: .176em;
  line-height: 2.4;
  color: #1B2230;
}
.ct-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 937px);
  margin: 0 auto;
  padding-top: clamp(40px, 4.7vw, 91px);   /* 39 + 52 */
}

/* ── ステップインジケータ ───────────────────────────── */
.ct-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-step {
  display: flex;
  align-items: center;
  gap: clamp(6px, .54vw, 10px);
  min-width: clamp(96px, 6.67vw, 128px);
  height: clamp(46px, 3.02vw, 58px);
  padding: 0 clamp(18px, 1.63vw, 31px);
  background: #E4E0DA;
  color: #6B7280;
  white-space: nowrap;
  justify-content: center;
}
.ct-step.is-current { background: #1A1A1A; color: #fff; }
.ct-step__num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(12px, .70vw, 13.6px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.33;
}
.ct-step__label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, .83vw, 15.8px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.43;
}
.ct-step.is-current .ct-step__label { font-weight: 500; }
.ct-step__sep {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  list-style: none;
  position: relative;
}
.ct-step__sep::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-top: 1.7px solid rgba(27, 34, 48, .28);
  border-right: 1.7px solid rgba(27, 34, 48, .28);
  transform: translate(-60%, -50%) rotate(45deg);
}

/* ── フォーム ───────────────────────────────────────── */
.ct-form { padding-top: clamp(32px, 2.71vw, 52px); }
.ct-field { margin-top: clamp(20px, 1.63vw, 31px); }
.ct-form > .ct-field:first-child { margin-top: 0; }

.ct-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, .83vw, 15.8px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.43;
  color: #1B2230;
  margin-bottom: 5px;
}
.ct-req {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 25px;
  padding: 0 7px;
  border-radius: 7.8px;
  background: #D4183D;
  color: #fff;
  font-size: clamp(10px, .59vw, 11.3px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.ct-input {
  display: block;
  width: 100%;
  height: 49px;
  padding: 10px 15px;
  background: #fff;
  border: 1.3px solid rgba(27, 34, 48, .12);
  border-radius: 7.8px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, .83vw, 15.8px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.2;
  color: #1B2230;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ct-input::placeholder { color: rgba(27, 34, 48, .5); }
.ct-input:focus {
  outline: none;
  border-color: var(--gold, #C8A96E);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .18);
}
.ct-input--half { width: min(100%, 416px); }

.ct-selectwrap { position: relative; }
.ct-selectwrap::after {
  content: "";
  position: absolute;
  top: 50%; right: 20px;
  width: 8px; height: 8px;
  border-right: 1.7px solid #6B7280;
  border-bottom: 1.7px solid #6B7280;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ct-select { padding-right: 44px; cursor: pointer; }
.ct-select:invalid, .ct-select option[value=""] { color: rgba(27, 34, 48, .5); }

.ct-textarea {
  height: 180px;
  padding: 12px 15px;
  line-height: 1.43;
  resize: vertical;
}
.ct-note {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: clamp(11px, .68vw, 13px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.2;
  color: rgba(27, 34, 48, .5);
}

.ct-field--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}

/* ── 個人情報ボックス ───────────────────────────────── */
.ct-privacy {
  margin-top: clamp(28px, 2.17vw, 42px);
  padding: clamp(16px, 1.08vw, 21px);
  background: #E4E0DA;
  border: 1.3px solid rgba(27, 34, 48, .12);
  border-radius: 7.8px;
}
.ct-privacy__text {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(12px, .70vw, 13.6px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.625;
  color: #6B7280;
}
.ct-privacy__link {
  color: #1A1A1A;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  cursor: pointer;
}
.ct-check input {
  position: absolute;
  top: 50%; left: 0;
  width: 17px; height: 17px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}
.ct-check__box {
  flex: 0 0 auto;
  position: relative;
  width: 17px; height: 17px;
  background: #fff;
  border: 1.3px solid #767676;
  border-radius: 2.6px;
  transition: background .2s ease, border-color .2s ease;
}
.ct-check__box::after {
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 4px; height: 8px;
  border-right: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform .2s ease;
}
.ct-check input:checked + .ct-check__box { background: #0057B8; border-color: #0057B8; }
.ct-check input:checked + .ct-check__box::after { transform: rotate(45deg) scale(1); }
.ct-check input:focus-visible + .ct-check__box { box-shadow: 0 0 0 3px rgba(0, 87, 184, .25); }
.ct-check__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, .83vw, 15.8px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.43;
  color: #1B2230;
}

/* ── 送信 ───────────────────────────────────────────── */
.ct-submit {
  margin-top: clamp(28px, 2.17vw, 42px);
  text-align: center;
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 347px);
  height: 62px;
  padding: 0 28px;
  border: 0;
  border-radius: 7.8px;
  background: var(--gold, #C8A96E);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, .83vw, 15.8px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .3s ease;
}
.ct-btn:hover:not(:disabled) {
  background: #b7955a;
}
.ct-btn:disabled { cursor: default; }
.ct-formnote {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: clamp(11px, .68vw, 13px);   /* 松尾FB 2026-08-13：フォーム全体を約0.87倍に縮小 */
  line-height: 1.8;
  color: rgba(27, 34, 48, .55);
}
.ct-formnote strong { color: #1A1A1A; }

/* ── 確認画面（2026-10-13・JS が .ct-panel に差し込む） ───────────────── */
.ct-confirm { padding-top: clamp(32px, 2.71vw, 52px); }
.ct-confirm[hidden], .ct-confirm [hidden] { display: none; }
.ct-confirm__lead {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, .83vw, 15.8px);
  line-height: 1.8;
  color: #1B2230;
}
.ct-confirm__list { margin: clamp(20px, 1.63vw, 31px) 0 0; padding: 0; border-top: 1.3px solid rgba(27, 34, 48, .12); }
.ct-confirm__row {
  display: grid;
  grid-template-columns: clamp(170px, 14vw, 230px) 1fr;
  gap: 0 20px;
  padding: clamp(14px, 1.1vw, 20px) 4px;
  border-bottom: 1.3px solid rgba(27, 34, 48, .12);
}
.ct-confirm__term {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, .83vw, 15.8px);
  line-height: 1.7;
  color: #6B7280;
}
.ct-confirm__val {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, .83vw, 15.8px);
  line-height: 1.7;
  color: #1B2230;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ct-confirm__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(28px, 2.17vw, 42px);
}
.ct-btn--back {
  background: #E4E0DA;
  color: #1B2230;
}
.ct-btn--back:hover:not(:disabled) { background: rgba(27, 34, 48, .14); }
.ct-btn--back:disabled { opacity: .5; }
.ct-confirm__note { text-align: center; }
/* 2026-10-28 ロボット判定の枠（reCAPTCHA v2・幅 304px 固定）。中央に置く。幅 360px 未満の画面では枠を少し縮めてはみ出さないように */
.ct-captcha { display: flex; justify-content: center; margin-top: clamp(28px, 2.17vw, 42px); min-height: 78px; }
@media (max-width: 359px) { .ct-captcha > div { transform: scale(.88); transform-origin: center top; } }
.ct-confirm__lead:focus, .ct-steps:focus { outline: none; }

/* ── 完了ページ /contact/thanks/（2026-10-13） ── */
.ct-main--thanks { padding-bottom: clamp(96px, 9vw, 170px); }
.ct-thanks { padding: clamp(64px, 7vw, 130px) 0 0; text-align: center; }
.ct-thanks__head {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 32px);
  letter-spacing: .08em;
  line-height: 1.7;
  color: #1A1A1A;
}
.ct-thanks__body {
  margin: clamp(16px, 1.4vw, 26px) 0 0;
  font-family: var(--sans);
  font-size: clamp(13px, .83vw, 15.8px);
  line-height: 2;
  color: #1B2230;
}
.ct-thanks__btn { margin-top: clamp(40px, 4vw, 76px); }
/* 完了ページだけヒーローを低くし、スクロール無しで 03 完了と完了文の見出しが 1 画面に入るようにする（/contact/ には効かない） */
.ct-hero.ct-hero--thanks { min-height: 0; padding-top: 0; }
.ct-hero--thanks .ct-hero__inner { padding-block: clamp(104px, 8.2vw, 124px) clamp(22px, 2vw, 34px); }
.ct-hero--thanks .ct-hero__title { font-size: clamp(34px, 3.4vw, 56px); }
.ct-hero--thanks .ct-hero__box { margin-top: clamp(14px, 1.2vw, 22px); }
.ct-main--thanks { padding-top: clamp(32px, 3.2vw, 60px); }
.ct-main--thanks .ct-panel { padding-top: 0; }
.ct-main--thanks .ct-thanks { padding-top: clamp(36px, 3.4vw, 64px); }
.ct-thanks__btn .ct-btn { text-decoration: none; }
@media (max-width: 860px) {
  .ct-thanks { padding-top: 56px; }
  .ct-thanks__head { font-size: 19px; letter-spacing: .04em; }
  .ct-hero--thanks .ct-hero__inner { padding: 84px 6vw 22px; }
  .ct-hero--thanks .ct-hero__title { font-size: 30px; }
  .ct-hero--thanks .ct-hero__lead { font-size: 12.5px; line-height: 1.7; }
  .ct-main--thanks { padding-top: 28px; }
  .ct-main--thanks .ct-thanks { padding-top: 32px; }
}
@media (max-width: 860px) {
  .ct-confirm__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; }
  .ct-confirm__actions { flex-direction: column-reverse; gap: 12px; }
  .ct-confirm__actions .ct-btn { width: 100%; }
}

/* ── SP ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ct-hero { min-height: 420px; }
  .ct-hero__photo {
    width: 100%;
    opacity: .38;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 55%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 55%);
  }
  .ct-hero__inner { padding: 84px 6vw 56px; }
  .ct-hero__box { display: block; max-width: 100%; }
  .ct-hero__lead { font-size: 14px; line-height: 1.85; }
  .ct-intro { letter-spacing: .08em; line-height: 2; text-align: left; }
  .ct-panel { padding-top: 40px; }
  .ct-steps { gap: 0; }
  .ct-step { min-width: 0; flex: 1 1 0; padding: 0 8px; }
  .ct-step__sep { width: 14px; }
  .ct-field--2col { grid-template-columns: 1fr; gap: 20px; }
  .ct-input--half { width: 100%; }
  .ct-btn { width: 100%; }
}
@media (max-width: 480px) {
  .ct-hero__title { font-size: 38px; }
  .ct-step__label { font-size: 13px; }
  .ct-step__num { font-size: 11px; }
}

/* ═══════════════════════════════════════════
   NEWS PAGE（お知らせ一覧 / HERO=Figma 317:619・一覧=toyokoh.com/news/ 準拠）接頭辞 nwp-
   ※実測(1920基準)：list幅85.816vw / link padding 2.162vw 1.513vw 2.018vw .793vw / gap 5.044vw
     info幅19.168vw gap2.306vw / date16.6px(.865vw) / tag5.765x1.762vw r.288vw / title1.009vw lh1.816vw
     区切り線=li::before 1px rgba(0,0,0,.2) / hover=●出現＋行を1.441vw右へ(.6s cubic-bezier(0,.55,.45,1))
═══════════════════════════════════════════ */
.nwp-body { background: var(--ecru, #f5f3ef); padding: clamp(56px, 6.8vw, 130px) 0 clamp(80px, 9vw, 170px); }
.nwp-list { width: 85.816vw; max-width: 1648px; margin: 0 auto; }

/* フィルタ（右寄せ・現在地に●） */
.nwp-list__head { display: flex; justify-content: flex-end; }
.nwp-filter { display: flex; gap: clamp(22px, 2.81vw, 54px); list-style: none; margin: 0; padding: 0; }
.nwp-filter__btn { position: relative; background: none; border: none; cursor: pointer; padding: 14px 0 0;
  font-family: var(--sans); font-size: clamp(13px, 1.009vw, 19.4px); font-weight: 400; letter-spacing: .04em;
  color: rgba(26,26,26,.42); transition: color .4s cubic-bezier(0,.55,.45,1); }
.nwp-filter__btn:hover { color: rgba(26,26,26,.75); }
.nwp-filter__btn::before { content: ""; position: absolute; top: 0; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold, #c8a96e); transform: translate(-50%, -4px); opacity: 0;
  transition: opacity .5s cubic-bezier(0,.55,.45,1), transform .5s cubic-bezier(0,.55,.45,1); }
.nwp-filter__btn.is-on { color: #1a1a1a; }
.nwp-filter__btn.is-on::before { opacity: 1; transform: translate(-50%, 0); }

/* 一覧 */
.nwp-list__results { margin-top: clamp(24px, 2.24vw, 43px); }
.nwp-items { list-style: none; margin: 0; padding: 0; }
.nwp-item { position: relative; overflow: hidden; }
.nwp-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(26,26,26,.2); }
.nwp-item:last-child::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(26,26,26,.2); }
.nwp-item__dot { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold, #c8a96e); transform: translateY(-50%); opacity: 0;
  transition: opacity .6s cubic-bezier(0,.55,.45,1); pointer-events: none; z-index: 1; }
.nwp-item__link { display: flex; align-items: center; gap: clamp(24px, 5.044vw, 97px); text-decoration: none; color: #1a1a1a;
  padding: clamp(24px, 2.162vw, 42px) clamp(12px, 1.513vw, 29px) clamp(22px, 2.018vw, 39px) clamp(10px, .793vw, 15px);
  transition: transform .6s cubic-bezier(0,.55,.45,1); }
.nwp-item__link:hover { transform: translateX(clamp(14px, 1.441vw, 28px)); }
.nwp-item:hover .nwp-item__dot { opacity: 1; }
.nwp-item__info { display: flex; align-items: center; gap: clamp(16px, 2.306vw, 44px); width: clamp(180px, 19.168vw, 368px); flex: 0 0 auto; }
.nwp-item__date { font-family: var(--sans); font-weight: 700;
  font-size: clamp(12px, .865vw, 16.6px); line-height: 1; color: #1a1a1a; white-space: nowrap; }
.nwp-item__tagWrap { display: flex; gap: 8px; }
.nwp-item__tag { display: flex; align-items: center; justify-content: center; width: clamp(84px, 5.765vw, 111px);
  height: clamp(26px, 1.762vw, 34px); background: #1a1a1a; border-radius: clamp(4px, .288vw, 5.5px); }
.nwp-item__tagText { font-family: var(--sans); font-weight: 700;
  font-size: clamp(11px, .865vw, 16.6px); color: #fff; white-space: nowrap; }
.nwp-item__ttlWrap { min-width: 0; overflow: hidden; display: flex; align-items: center; min-height: clamp(34px, 2.552vw, 49px); }  /* toyokoh実測：タイトル行の高さ49px＝行全体129pxに一致させる */
.nwp-item__ttl { display: block; width: 100%; font-family: var(--sans); font-weight: 500; font-size: clamp(14px, 1.009vw, 19.4px);
  letter-spacing: .06em; line-height: clamp(24px, 1.816vw, 34.9px); color: #1a1a1a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nwp-empty { font-family: var(--sans); font-size: 14px; color: rgba(26,26,26,.55); text-align: center; padding: 64px 0; margin: 0; }

/* ページャ */
.nwp-pager { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(48px, 6.342vw, 122px); }
.nwp-pager[hidden] { display: none; }   /* display:flex が UA の [hidden] を上書きするため明示（1ページ時は非表示） */
.nwp-pager__btn { display: flex; align-items: center; gap: clamp(10px, 1.441vw, 28px); background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: clamp(13px, 1.009vw, 19.4px); color: #1a1a1a; padding: 0;
  transition: opacity .4s, transform .4s cubic-bezier(0,.55,.45,1); }
.nwp-pager__btn:disabled { opacity: .22; cursor: default; }
.nwp-pager__btn:not(:disabled):hover { opacity: .6; }
.nwp-pager__btn--prev:not(:disabled):hover { transform: translateX(-4px); }
.nwp-pager__btn--next:not(:disabled):hover { transform: translateX(4px); }
.nwp-pager__arrow { font-size: 1.1em; line-height: 1; }
.nwp-pager__list { display: flex; gap: clamp(5px, .36vw, 7px); }
.nwp-pager__num { background: none; border: none; cursor: pointer; padding: 6px 8px;
  font-family: var(--sans); font-weight: 700; font-size: clamp(12px, .865vw, 16.6px);
  color: rgba(26,26,26,.42); transition: color .35s; }
.nwp-pager__num:hover { color: rgba(26,26,26,.8); }
.nwp-pager__num.is-current { color: #1a1a1a; text-decoration: underline; text-underline-offset: 5px; }

/* SP */
@media (max-width: 767px) {
  .nwp-list { width: calc(100% - 40px); }
  .nwp-list__head { justify-content: flex-start; overflow-x: auto; }
  .nwp-filter { gap: 22px; }
  .nwp-item__link { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 0 20px 12px; }
  .nwp-item__link:hover { transform: none; }
  .nwp-item__info { width: auto; gap: 14px; }
  .nwp-item__ttlWrap { width: 100%; }
  .nwp-item__ttl { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.7; }
  .nwp-item__dot { top: 26px; }
  .nwp-pager { margin-top: 48px; }
  .nwp-pager__btnText { display: none; }
}
/* ════════════════════════════════════════════════════════════
   共通 Contact 帯（company / business / works / news）の背景写真
   ページ別に .cta-section が4回定義されているため、最後にまとめて上書きする
   ════════════════════════════════════════════════════════════ */
.cta-section {
  position: relative;
  background:
    linear-gradient(180deg, rgba(14,12,10,.88) 0%, rgba(14,12,10,.72) 45%, rgba(14,12,10,.9) 100%),
    url(../images/contact-band.webp) center center / cover no-repeat,
    #0E0C0A;
}
@media (max-width: 767px) {
  .cta-section {
    background:
      linear-gradient(180deg, rgba(14,12,10,.9) 0%, rgba(14,12,10,.8) 45%, rgba(14,12,10,.92) 100%),
      url(../images/contact-band.webp) center center / cover no-repeat,
      #0E0C0A;
  }
}

/* ════════════════════════════════════════════════════════════
   四隅ブラケットのみのボタン（.tx-side__label と同機構を汎用化）
   背景グラデ8枚で4隅のL字を描画。ホバーは padding 拡大＋負マージンで
   相殺するのでレイアウトは動かない。色は currentColor 追従。
   ════════════════════════════════════════════════════════════ */
.corner-btn {
  position: relative; display: inline-block; cursor: pointer; text-decoration: none;
  /* 文字まわりは差し替え前の .frame-btn と同寸法にそろえる */
  font-family: var(--sans); font-weight: 500;
  font-size: .875rem; line-height: 1; letter-spacing: .2em; white-space: nowrap; color: #1A1A1A;
  padding: 1rem 2rem;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size:
    12px 1px, 1px 12px,  12px 1px, 1px 12px,
    12px 1px, 1px 12px,  12px 1px, 1px 12px;
  background-position:
    left top, left top,  right top, right top,
    left bottom, left bottom,  right bottom, right bottom;
  transition: padding .3s ease-out, margin .3s ease-out, color .3s ease;
}
.corner-btn:hover {
  padding: calc(1rem + 7px) calc(2rem + 7px);
  margin: -7px;
}
.corner-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.corner-btn--gold { color: var(--gold); }
.corner-btn--light { color: var(--ecru); }
@media (prefers-reduced-motion: reduce) { .corner-btn { transition: none; } }

/* ════════════════════════════════════════════════════════════
   Contact 帯 — Figma 289:31335 決定稿準拠 / 接頭辞 ctb-
   1920×554。写真＋左→右の暗幕グラデ。左＝金の大きな Contact、
   右＝見出し／本文／四隅ブラケット付きボタンの2カラム。
   ════════════════════════════════════════════════════════════ */
.ctb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(400px, 28.85vw, 554px);
  padding: clamp(48px, 4.6vw, 88px) clamp(20px, 4vw, 72px) clamp(56px, 6.3vw, 121px);
  background: #0A0806;
  overflow: hidden;
}
/* 松尾FB 2026-08-13：ホバーで写真をズームさせる。
   帯そのものの大きさは変えたくないので、写真を別レイヤーに出して .ctb の overflow:hidden で
   はみ出しを切る（拡大するのはこの層だけ＝帯の寸法・文字の位置は動かない）。
   z-index は -2。グレイン(::before)が -1 なので、写真→グレイン→本文 の重なり順が保たれる。
   スクリムを写真と同じ層に置いているのは、写真だけを拡大するとスクリムが取り残されて
   境目が出るため（8%の拡大ではグラデーションのズレは目視できない）。 */
.ctb::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.60) 60%, rgba(5,5,5,.35) 100%),
    var(--ctb-bg, url(../images/contact-band3.webp)) center top / cover no-repeat;   /* --ctb-bg はACF「Contact帯」の背景写真（未設定なら既定）。DSC02252（本人支給。「画像が近い」FBを受け、左を暗色延長した合成で25%ズームアウト 2026-08-10） */
}
@media (hover: hover) and (pointer: fine) {
  .ctb::after { transition: transform .9s cubic-bezier(.22,.61,.21,1); will-change: transform; }
  .ctb:hover::after { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ctb::after { transition: none; }
  .ctb:hover::after { transform: none; }
}
.ctb__inner {
  position: relative; z-index: 1;
  width: min(1047px, 100%);
  display: grid; grid-template-columns: 493fr 493fr; gap: clamp(24px, 3.13vw, 60px);
  align-items: center;
}
/* 左：Contact（Figma 109.876px / Noto Serif JP 900 / #C8A96E） */
.ctb__left { display: flex; align-items: center; }
.ctb__en {
  margin: 0;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(48px, 5.72vw, 110px); line-height: 1; letter-spacing: 0;
  color: var(--gold);
}
/* 右：見出し／本文／ボタン（Figma itemSpacing 30.31） */
.ctb__right { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.58vw, 30px); min-width: 0; }
.ctb__lead {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 2.23vw, 42.7px); line-height: 1.34; letter-spacing: 0;
  color: #F5F3EF;
  /* 決定稿では見出しがカラム幅(493)より広い579pxで、折り返さず右へはみ出している */
  white-space: nowrap;
}
.ctb__body {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(13px, .845vw, 16.2px); line-height: 2.49; letter-spacing: 0;
  color: #FFF;
}
/* ボタン：411×80／枠 rgba(200,169,110,.4) 1.66px ＋ 四隅ブラケット 11px・2.07px */
.ctb__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: min(411px, 100%); min-height: clamp(56px, 4.17vw, 80px);
  padding: 0 clamp(20px, 2.76vw, 53px);
  border: 1.66px solid rgba(200,169,110,.4);
  text-decoration: none;
  transition: background .35s ease, border-color .35s ease;
}
.ctb__btn-label {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(14px, 1.21vw, 23.2px); line-height: 1; letter-spacing: .2em;
  text-indent: .2em; color: #F5F3EF; white-space: nowrap;
}
.ctb__btn:hover { background: rgba(200,169,110,.12); border-color: rgba(200,169,110,.75); }
.ctb__corner { position: absolute; width: clamp(8px, .57vw, 11px); height: clamp(8px, .57vw, 11px); pointer-events: none;
  transition: transform .3s ease-out, border-color .3s ease-out; }
.ctb__corner--tl { top: -1.66px;    left: -1.66px;  border-top:    2.07px solid var(--gold); border-left:  2.07px solid var(--gold); }
.ctb__corner--tr { top: -1.66px;    right: -1.66px; border-top:    2.07px solid var(--gold); border-right: 2.07px solid var(--gold); }
.ctb__corner--br { bottom: -1.66px; right: -1.66px; border-bottom: 2.07px solid var(--gold); border-right: 2.07px solid var(--gold); }
.ctb__corner--bl { bottom: -1.66px; left: -1.66px;  border-bottom: 2.07px solid var(--gold); border-left:  2.07px solid var(--gold); }
/* ホバーで四隅が外へ開く（TOPの .frame-btn と同じ挙動＝7px・.3s ease-out・色は明るい金へ） */
.ctb__btn:hover .ctb__corner { border-color: var(--fb-accent-hover, #d4b87a); }
.ctb__btn:hover .ctb__corner--tl { transform: translate(calc(-1 * var(--fb-hover-offset)), calc(-1 * var(--fb-hover-offset))); }
.ctb__btn:hover .ctb__corner--tr { transform: translate(var(--fb-hover-offset), calc(-1 * var(--fb-hover-offset))); }
.ctb__btn:hover .ctb__corner--br { transform: translate(var(--fb-hover-offset), var(--fb-hover-offset)); }
.ctb__btn:hover .ctb__corner--bl { transform: translate(calc(-1 * var(--fb-hover-offset)), var(--fb-hover-offset)); }
@media (prefers-reduced-motion: reduce) { .ctb__corner { transition: none; } .ctb__btn:hover .ctb__corner { transform: none; } }
/* ── 全ページ共通：Contact帯の文字アニメーション（松尾FB 2026-08-13）──
   .js-ctbanim はフッターJSが付与＝JS無効環境ではこのブロックが一切効かず静的表示。
   「Contact」はTOPのContactセクションと同じマスク昇りの出方（1文字ずつ・0.055s刻み）。
   右側（見出し・本文・ボタン）は animation 方式＝ボタンの hover transition と競合しない */
.js-ctbanim .ctb-ch { display: inline-block; overflow: hidden; padding: .34em .04em; margin: -.34em -.04em; }
.js-ctbanim .ctb-ch i { display: inline-block; font-style: normal; transform: translateY(220%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.js-ctbanim.is-in .ctb-ch i { transform: none; }
.js-ctbanim .ctb__lead, .js-ctbanim .ctb__body, .js-ctbanim .ctb__btn { opacity: 0; }
.js-ctbanim.is-in .ctb__lead { opacity: 1; animation: ctbUp .9s cubic-bezier(.16,1,.3,1) .2s backwards; }
.js-ctbanim.is-in .ctb__body { opacity: 1; animation: ctbUp .9s cubic-bezier(.16,1,.3,1) .34s backwards; }
.js-ctbanim.is-in .ctb__btn  { opacity: 1; animation: ctbUp .9s cubic-bezier(.16,1,.3,1) .48s backwards; }
@keyframes ctbUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-ctbanim .ctb-ch i { transform: none !important; transition: none !important; }
  .js-ctbanim .ctb__lead, .js-ctbanim .ctb__body, .js-ctbanim .ctb__btn { opacity: 1 !important; animation: none !important; }
}

/* ── 861〜1100px帯（本人指示 2026-08-17）──
   左右均等グリッドだと「Contact」の右に大きな空きができる。
   2列とも内容幅にして全体を中央へ寄せ、隙間を詰める（全ページ共通のCONTACT帯） */
@media (min-width: 861px) and (max-width: 1100px) {
  .ctb__inner { width: fit-content; grid-template-columns: max-content max-content; gap: clamp(32px, 6vw, 64px); align-items: center; }
}

@media (max-width: 860px) {
  .ctb { padding: 64px 6vw 72px; }
  .ctb__inner { grid-template-columns: 1fr; gap: 24px; }
  .ctb__en { font-size: clamp(44px, 13vw, 72px); }
  .ctb__right { align-items: stretch; }
  .ctb__btn { width: 100%; }
  /* 見出しは PC と同じく nowrap（決定稿の意図）。1カラムになるSPでは画面から
     はみ出して読めなくなるため、内容幅(88vw)に収まるところまで字を詰める。
     文言差し替えで長さが変わっても切れない（本人指示 2026-09-04 の文言変更で顕在化） */
  .ctb__lead { font-size: min(22px, 4.7vw); }
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL NAV ── 新デザイン（Figma 504:1651 準拠）
   レイアウト：左ナビ ／ 中央ロゴ（下に垂れる白パネル）／ 右ナビ＋Contact＋ハンバーガー
   動き　　　：matsuo-komuten.co.jp 方式
              ・最上部＝透過してヒーローに重なる
              ・下スクロール＝上へ隠れる
              ・上スクロール＝背景つきで降りてくる（.5s cubic-bezier(.43,.05,.17,1)）
   寸法はすべて Figma 1920px 版の実測値をvw換算（右がその実寸）
═══════════════════════════════════════════════════════════ */
#global-nav.gnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  /* 3カラム：左ナビ ／ 中央ロゴぶんの場所取り ／ 右ブロック。
     ロゴは絶対配置でグリッドの外にあるため、真ん中の .gnav__spacer で幅を確保して重なりを防ぐ */
  /* minmax(0,1fr)＝左右の列を内容より小さくできるようにする。
     1fr のままだと内容の最小幅で列が固まり、画面幅がFigmaの1920を下回った瞬間に
     グリッド全体がはみ出してハンバーガーが右で見切れる */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: clamp(12px, 8.958vw, 172px);          /* Figma：ナビ⇔ロゴの間 172 */
  padding: clamp(16px, 2.083vw, 40px) clamp(14px, 2.161vw, 41.5px) clamp(16px, 2.083vw, 40px) clamp(20px, 4.219vw, 81px);  /* 上40 / 右41.5 / 左81 */
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  transition: transform .5s cubic-bezier(.43,.05,.17,1),
              background-color .4s ease, backdrop-filter .4s ease,
              border-color .4s ease, opacity .8s ease;
}
/* 下スクロール（.is-hidden）＝バーごと消すのではなく「ハンバーガーだけ残す」（matsuo-komuten方式）。
   中身はフェードで上に抜け、バー背景は透明化。バーガーは金の四角ボタンに変わる（具体則は末尾）。 */
/* 最上部を離れたら背景を敷く（.scrolled は既存JSが付与） */
#global-nav.gnav.scrolled {
  background: rgba(8,6,4,.97);                      /* 松尾FB：もう少し濃く（旧 rgba(18,14,9,.92)） */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,169,110,.12);
  padding-top: clamp(14px, 1.6vw, 30px); padding-bottom: clamp(14px, 1.6vw, 30px);
}

/* ── ナビ項目（TsukuMin 22.38px / 字間2px / 白） ── */
#global-nav.gnav .gnav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
#global-nav.gnav .gnav__list--left  { gap: clamp(18px, 2.6vw, 50px); justify-self: start; }
#global-nav.gnav .gnav__list--right { gap: clamp(18px, 2.6vw, 50px); }
/* 中央ロゴぶんの場所取り（ロゴと同じ幅） */
#global-nav.gnav .gnav__spacer { display: block; width: clamp(88px, 8.021vw, 154px); height: 1px; }
#global-nav.gnav .gnav__list a {
  font-family: "FOT-TsukuMin Pr5N", var(--serif);
  font-weight: 400;
  font-size: clamp(12px, 1vw, 19.2px);              /* 松尾FB：松尾工務店と同サイズ感（実測19.2px@1920＝1vw。旧22.38） */
  letter-spacing: .09em;                            /* 2px / 22.38 */
  line-height: 2;
  color: #fff;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: color .25s, opacity .25s;
}
/* ホバーは「少し半透明」（松尾FB） */
#global-nav.gnav .gnav__list a:hover { opacity: .58; }
/* 2026-09-04 本人指示：閲覧中のページのナビは金色にする */
#global-nav.gnav .gnav__list a.active { color: var(--gold); opacity: 1; }
#global-nav.gnav .gnav__list a.active:hover { opacity: .78; }

/* ── 中央ロゴ：Figma 154×151.3・上から33.8px。バー下端から少し垂れる ── */
#global-nav.gnav .gnav__logo {
  position: absolute; left: 50%; top: clamp(14px, 1.76vw, 33.8px);
  transform: translateX(-50%);
  width: clamp(88px, 8.021vw, 154px);               /* 154 */
  min-height: clamp(86px, 7.88vw, 151.3px);         /* 151.3 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35em;
  background: #fff;
  text-decoration: none;
  padding: clamp(8px, .8vw, 14px) 6px;
  transition: background .4s ease;
}
#global-nav.gnav .gnav__logo-en {
  font-family: "FOT-TsukuMin Pr5N", var(--serif);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 21px);
  line-height: 1.25; letter-spacing: .12em;
  color: #1a1a1a; text-align: center;
}
#global-nav.gnav .gnav__logo-ja {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(8px, .52vw, 10px);
  letter-spacing: .12em;
  color: #6b6055; text-align: center;
}

/* ── 右側：ナビ＋Contactボタン ── */
#global-nav.gnav .gnav__right { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 50px); justify-self: end; flex: 0 0 auto; }
/* 左ナビも列より広くなったら左端基準ではみ出させる（右端＝ハンバーガー側を優先して守る） */
#global-nav.gnav .gnav__list--left { min-width: 0; }
#global-nav.gnav .gnav__contact {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(112px, 9.984vw, 191.7px);            /* 191.7 */
  height: clamp(32px, 2.188vw, 42px);               /* 42 */
  padding: 0;                                       /* frame-btn 併用時の上書き（四隅マーカーだけ借りる） */
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: transparent;                          /* 松尾FB 2026-08-10：背景は透明（旧：金ベタ） */
  font-family: "FOT-TsukuMin Pr5N", var(--serif);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 21.1px);            /* 21.13 */
  letter-spacing: .14em;                            /* 2.96px / 21.13 */
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
#global-nav.gnav .gnav__contact:hover {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  color: var(--gold-bright, #d4b87a);
}

/* ── ハンバーガー：三本線の字形は通常時と金四角時で同一にする（松尾FB 2026-08-10）。
   線の長さ --bgl / 三本の高さ --bgh を共通変数にし、金四角ではボックスだけ大きくなる ── */
#global-nav.gnav {
  --bgl: clamp(24px, 1.875vw, 36px);                /* 線の長さ（金四角72px時の内側50%） */
  --bgh: clamp(12px, 1.04vw, 20px);                 /* 三本線の全高 */
  --bgbox: clamp(48px, 3.75vw, 72px);               /* 金の四角のサイズ */
}
/* 箱は常に金の四角のサイズにしておき、その差分を負のマージンで打ち消す（松尾FB 2026-08-13）。
   以前は .is-hidden のときだけ 36×20 → 72×72 に膨らませていたため、
   ・箱の右端が固定なので三本線の中心が横に18pxずれる
   ・箱が縦に伸びてフレックス行の高さが変わるので縦に5pxずれる
   という「位置が動く」現象が出ていた。占有サイズ（マージンボックス）は
   従来の --bgl × --bgh のままなので、周囲のレイアウトも中心位置も変わらない。
   当たり判定も常に四角ぶん確保できる。 */
#global-nav.gnav .nav-burger {
  display: block; position: relative;
  width: var(--bgbox);
  height: var(--bgbox);
  /* Figmaのボタン⇔バーガー間は119px。.gnav__right の gap（最大50px）が別に効くので、その差分だけを持たせる */
  margin: calc((var(--bgh) - var(--bgbox)) / 2)
          calc((var(--bgl) - var(--bgbox)) / 2)
          calc((var(--bgh) - var(--bgbox)) / 2)
          calc(clamp(2px, 3.594vw, 69px) + (var(--bgl) - var(--bgbox)) / 2);
  padding: 0; background: transparent; border: 0; cursor: pointer; flex: 0 0 auto;
  align-self: center;
}
/* 三本線は「箱の中心から transform でずらす」形で置く（松尾FB 2026-08-13）。
   以前は left:0/right:0・top:0/bottom:0 で箱の辺に貼り付けていたため、
   .is-hidden（金の四角 72px）を外した瞬間に線の指定だけが先に元へ戻り、
   箱が 72px → 36px に縮む 0.35 秒のあいだ線が箱いっぱいに伸びて見えていた。
   長さ（--bgl）と間隔（--bgh）を箱のサイズから切り離せば、背景だけが変わる。
   位置を top:50%/left:50% の固定値にしてあるので、箱がアニメーションしても
   top の transition が誘発されず、ズレも起きない。 */
#global-nav.gnav .nav-burger span {
  position: absolute; top: 50%; left: 50%; right: auto;
  /* 松尾FB 2026-08-17：1.94px だと75%ズーム等の縮小表示で線が痩せて灰色に沈む → 2.5px に増強 */
  width: var(--bgl); height: 2.5px;
  background: #fff; border-radius: 2px;
  transform: translate(-50%, -50%) translateY(var(--bgy, 0px));
  transition: transform .3s ease, opacity .3s ease;
}
#global-nav.gnav .nav-burger span:nth-child(1) { --bgy: calc(var(--bgh) / -2 + 1.25px); }
#global-nav.gnav .nav-burger span:nth-child(2) { --bgy: 0px; }
#global-nav.gnav .nav-burger span:nth-child(3) { --bgy: calc(var(--bgh) / 2 - 1.25px); }
#global-nav.gnav .nav-burger.open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
#global-nav.gnav .nav-burger.open span:nth-child(2) { opacity: 0; }
#global-nav.gnav .nav-burger.open span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── .scrolled：上スクロールで戻ってきたバーでは、ロゴをバー内に収まる小サイズへ ── */
#global-nav.gnav .gnav__logo,
#global-nav.gnav .gnav__spacer { transition: width .4s ease, min-height .4s ease, top .4s ease, transform .45s cubic-bezier(.43,.05,.17,1), opacity .35s ease; }
#global-nav.gnav.scrolled .gnav__logo {
  top: 50%; transform: translate(-50%, -50%);       /* バーの縦中央に収める */
  width: clamp(60px, 4.48vw, 86px);
  min-height: clamp(56px, 4.17vw, 80px);
  gap: .2em; padding: 4px;
}
#global-nav.gnav.scrolled .gnav__logo-en { font-size: clamp(10px, .68vw, 13px); }
#global-nav.gnav.scrolled .gnav__logo-ja { font-size: 7px; }
#global-nav.gnav.scrolled .gnav__spacer { width: clamp(60px, 4.48vw, 86px); }

/* ── .is-hidden：下スクロール時はハンバーガーだけ残す ── */
#global-nav.gnav .gnav__list,
#global-nav.gnav .gnav__contact { transition: color .25s, background .3s ease, opacity .35s ease, transform .45s cubic-bezier(.43,.05,.17,1); }
#global-nav.gnav.is-hidden {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  pointer-events: none;                              /* 残すのはバーガーだけ（下の要素をクリック可能に） */
}
#global-nav.gnav.is-hidden .gnav__list,
#global-nav.gnav.is-hidden .gnav__contact { opacity: 0; transform: translateY(-24px); pointer-events: none; }
#global-nav.gnav.is-hidden .gnav__logo { opacity: 0; transform: translate(-50%, -36px); pointer-events: none; }
/* バーガーは残して金の四角ボタンに（参考カンプ「scrollしたら」準拠） */
/* 箱のサイズは固定なので、変わるのは背景だけ。
   transform は「バーの縮みを打ち消す」用途なので transition に入れない
   （バーの padding 自体は transition していない＝即時に変わるため、
   ここを補間すると逆にハンバーガーが遅れて動いてしまう） */
#global-nav.gnav .nav-burger { transition: background-color .35s ease; }
/* .scrolled でバーの上下 padding が 40px→30px に縮み、align-items:center の中身が
   その差分ぶん上へ動く（バー上端は固定）。ハンバーガーだけは動かさないよう打ち消す。 */
#global-nav.gnav.scrolled .nav-burger {
  transform: translateY(calc(clamp(16px, 2.083vw, 40px) - clamp(14px, 1.6vw, 30px)));
}
#global-nav.gnav.is-hidden .nav-burger {
  pointer-events: auto;
  background: var(--gold);
}
/* 三本線は箱の中心基準で置いてあるので、.is-hidden 側での再配置は不要
   （以前はここで辺基準から中央基準へ切り替えていたため、戻りで線が伸びていた） */

/* ── 初回表示：ナビの文字が上から時差で降りてくる（松尾工務店参考・松尾FB 2026-08-10）。
   .show が付いた瞬間に一度だけ再生。fill を backwards に留めることで、
   再生後は is-hidden 等の transition（transform/opacity）を邪魔しない ── */
@keyframes gnavDrop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gnavDropLogo {
  from { opacity: 0; transform: translateX(-50%) translateY(-24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#global-nav.gnav.show .gnav__list li,
#global-nav.gnav.show .gnav__contact { animation: gnavDrop .65s cubic-bezier(.16,1,.3,1) backwards; }
/* バーガーだけは opacity を動かさない専用キーフレーム（松尾FB 2026-08-17）。
   gnavDrop の backwards フィルは delay 中 opacity:0 になるため、何かの拍子に
   アニメが再生し直すと最重要導線のバーガーが一時的に消える。位置だけ落として出す。 */
@keyframes gnavDropBurger {
  from { transform: translateY(-18px); }
  to   { transform: translateY(0); }
}
#global-nav.gnav.show .nav-burger { animation: gnavDropBurger .65s cubic-bezier(.16,1,.3,1) backwards; }
#global-nav.gnav.show .gnav__logo { animation: gnavDropLogo .7s cubic-bezier(.16,1,.3,1) backwards .1s; }
#global-nav.gnav.show .gnav__list--left li:nth-child(1) { animation-delay: 0s; }
#global-nav.gnav.show .gnav__list--left li:nth-child(2) { animation-delay: .07s; }
#global-nav.gnav.show .gnav__list--left li:nth-child(3) { animation-delay: .14s; }
#global-nav.gnav.show .gnav__list--left li:nth-child(4) { animation-delay: .21s; }
/* 2026-09-04 本人指示で「お知らせ・採用情報」も左の列に入った（5・6項目目）。時差も続きで付ける */
#global-nav.gnav.show .gnav__list--left li:nth-child(5) { animation-delay: .28s; }
#global-nav.gnav.show .gnav__list--left li:nth-child(6) { animation-delay: .35s; }
#global-nav.gnav.show .gnav__list--right li:nth-child(1) { animation-delay: .28s; }
#global-nav.gnav.show .gnav__list--right li:nth-child(2) { animation-delay: .35s; }
#global-nav.gnav.show .gnav__contact { animation-delay: .42s; }
#global-nav.gnav.show .nav-burger { animation-delay: .49s; }

@media (prefers-reduced-motion: reduce) {
  #global-nav.gnav,
  #global-nav.gnav .gnav__list,
  #global-nav.gnav .gnav__logo,
  #global-nav.gnav .gnav__spacer,
  #global-nav.gnav .gnav__contact,
  #global-nav.gnav .nav-burger { transition: opacity .2s linear; animation: none; }
  #global-nav.gnav.show .gnav__list li,
  #global-nav.gnav.show .gnav__contact,
  #global-nav.gnav.show .nav-burger,
  #global-nav.gnav.show .gnav__logo { animation: none; }
}

/* ── タブレット以下：左右ナビを畳んでロゴ＋Contact＋バーガーだけにする ── */
@media (max-width: 1100px) {
  #global-nav.gnav .gnav__list { display: none; }
  /* グリッドのままだと、左ナビが display:none で列から抜けた結果
     .gnav__right が2列目（中央）に繰り上がり、ハンバーガーが画面中央に寄ってしまう。
     ロゴは絶対配置でレイアウトに関与しないので、ここは素直に横並びにして右端へ寄せる。 */
  #global-nav.gnav { display: flex; align-items: center; justify-content: space-between; }
  #global-nav.gnav .gnav__right { margin-left: auto; }
}
@media (max-width: 767px) {
  #global-nav.gnav { padding: 12px 16px; }
  #global-nav.gnav .gnav__logo { top: 8px; width: 84px; min-height: 72px; padding: 8px 4px; }
  /* ロゴ看板の寸法をSP用に固定しているので、ヒーローの逃がし量（--hero-gap）の元も揃える */
  :root { --logo-bottom: 80px; }   /* top 8px + min-height 72px */
  /* 「鯖江精機株式会社」が84px幅で2行に折れてパネルからはみ出していた。
     字間を詰めて1行に収める（縮小しても8pxを下回らないようにする） */
  #global-nav.gnav .gnav__logo-ja { font-size: 8px; letter-spacing: .01em; white-space: nowrap; }
  #global-nav.gnav .gnav__logo-en { font-size: 13px; letter-spacing: .08em; }
  #global-nav.gnav .gnav__contact { display: none; }   /* SPはバーガー内のメニューから遷移 */
}


/* ═══════════════════════════════════════════════════════════
   ヘッダーのロゴ：中央 → 左上（本人指示 2026-09-04）
   「中央ロゴになっているのを左上に。いったん横長のボックスを置いて
     今みたいに『鯖江精機ロゴ』と記載しておいて」
   ＝ 正式ロゴ支給までの仮置き。上の中央ロゴ（絶対配置でバーから垂れる
     154×151の白パネル）の指定を、ここで横長・左上へ打ち消す差分として持つ。
     支給後は site-header.php の .gnav__logo-ph を <img> に替えるだけでよい。
   ═══════════════════════════════════════════════════════════ */
#global-nav.gnav {
  grid-template-columns: auto minmax(0, 1fr) auto;   /* ロゴ ／ 左ナビ ／ 右ブロック */
  column-gap: clamp(14px, 2.6vw, 50px);              /* 旧172pxは「ナビ⇔中央ロゴ」の間隔なので詰める */
}
#global-nav.gnav .gnav__spacer { display: none; }    /* 中央ロゴぶんの場所取りは不要になった */
#global-nav.gnav .gnav__logo {
  position: static; top: auto; left: auto; transform: none;
  justify-self: start; align-self: center;
  flex-direction: row; gap: 0;
  width: clamp(148px, 12.5vw, 240px);
  min-height: clamp(44px, 3.44vw, 66px);
  padding: 0 12px;
}
#global-nav.gnav .gnav__logo-ph {
  font-family: "FOT-TsukuMin Pr5N", var(--serif);
  font-weight: 700;
  font-size: clamp(13px, 1.04vw, 20px);
  letter-spacing: .08em; line-height: 1;
  color: #1a1a1a; white-space: nowrap;
}
/* 上スクロールで戻ってきたバー（.scrolled）：中央ロゴ用の translate・寸法を打ち消して少しだけ縮める */
#global-nav.gnav.scrolled .gnav__logo {
  top: auto; transform: none;
  width: clamp(132px, 11vw, 210px);
  min-height: clamp(38px, 3vw, 56px);
  padding: 0 10px;
}
#global-nav.gnav.scrolled .gnav__logo-ph { font-size: clamp(12px, .94vw, 18px); }
/* 下スクロールで隠れるとき：中央基準の translateX(-50%) を外す（左上基準なので縦だけ） */
#global-nav.gnav.is-hidden .gnav__logo { transform: translateY(-36px); }
/* 登場アニメも中央基準の gnavDropLogo ではなく、ナビ項目と同じ gnavDrop に差し替え */
#global-nav.gnav.show .gnav__logo { animation-name: gnavDrop; }
@media (max-width: 767px) {
  #global-nav.gnav .gnav__logo { top: auto; width: clamp(116px, 33vw, 150px); min-height: 38px; padding: 0 8px; }
  /* .scrolled 用の縮小値（clamp(132px,…)）はSPだと最上部より“広く”なって逆転するので、SPでは同値で止める */
  #global-nav.gnav.scrolled .gnav__logo { width: clamp(116px, 33vw, 150px); min-height: 38px; padding: 0 8px; }
  #global-nav.gnav .gnav__logo-ph { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   DRAWER MENU ── ハンバーガーで開く全画面メニュー（Figma 610:1133 準拠）
   左：サイトマップ（2列）／右：代表電話＋ボタン2つ＋プライバシー／背景に炎
   寸法は Figma 1920px 版の実測値をvw換算（コメントが実寸）
═══════════════════════════════════════════════════════════ */
#sp-menu.dmenu {
  position: fixed; inset: 0; z-index: 1000;
  display: block;                      /* 旧SPメニューの flex 指定を打ち消す */
  padding: 0;
  background: #1A1A1A;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 0; pointer-events: none;
  transition: opacity .45s cubic-bezier(.43,.05,.17,1);
  overflow-y: auto;
  isolation: isolate;                  /* ::before(z-1)のグレインを「背景の上・中身の下」に挟むため */
}
#sp-menu.dmenu.open { opacity: 1; pointer-events: auto; }
/* ドロワーにもジャミジャミ（他セクションと同じ1層・.24。炎や文字の下、黒地の上）。
   中身がスクロールしてもかかり続けるよう fixed で画面全面に貼る */
#sp-menu.dmenu::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  opacity: .24;
  mix-blend-mode: screen;
  animation: grainJitter .3s steps(1) infinite;
}

/* 背景の炎（Figma：x=1017 / w=702.6 / h=1033） */
#sp-menu.dmenu .dmenu__flame {
  position: absolute; left: 52.969vw; top: 0;
  width: 36.594vw; height: auto;
  pointer-events: none; user-select: none;
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s ease .15s, transform 1.2s cubic-bezier(.16,1,.3,1) .15s;
}
#sp-menu.dmenu.open .dmenu__flame { opacity: 1; transform: none; }

/* 左上ロゴ（Figma：186.2×183 / x=112 y=75） */
#sp-menu.dmenu .dmenu__logo {
  position: absolute; left: clamp(16px, 5.833vw, 112px); top: min(clamp(14px, 3.906vw, 75px), 6.9vh);
  width: clamp(96px, 9.698vw, 186.2px); min-height: min(clamp(94px, 9.531vw, 183px), 17vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  background: #fff; text-decoration: none; padding: 10px 6px; z-index: 2;
}
#sp-menu.dmenu .dmenu__logo-en {
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 700;
  font-size: clamp(14px, 1.35vw, 26px); line-height: 1.25; letter-spacing: .12em; color: #1a1a1a; text-align: center;
}
#sp-menu.dmenu .dmenu__logo-ja {
  font-family: var(--sans); font-weight: 500; font-size: clamp(8px, .625vw, 12px);
  letter-spacing: .12em; color: #6b6055; text-align: center;
}

/* 右上の×（Figma：67×30 / 右端から42px） */
#sp-menu.dmenu .dmenu__close {
  position: absolute; right: clamp(14px, 2.188vw, 42px); top: clamp(14px, 2.344vw, 45px);
  width: clamp(36px, 3.49vw, 67px); height: clamp(20px, 1.563vw, 30px);
  background: none; border: 0; padding: 0; cursor: pointer; z-index: 3; color: #fff; font-size: 0;
}
#sp-menu.dmenu .dmenu__close span {
  position: absolute; left: 0; right: 0; top: 50%; height: 1.94px; background: #fff; border-radius: 2px;
  transition: background .25s ease;
}
#sp-menu.dmenu .dmenu__close span:nth-child(1) { transform: rotate(24deg); }
#sp-menu.dmenu .dmenu__close span:nth-child(2) { transform: rotate(-24deg); }
#sp-menu.dmenu .dmenu__close:hover span { background: var(--gold); }

/* 中身：左右2カラム（Figma：左 x=272 / 右 x=1128。
   右カラム（代表電話）は y=237 から、左カラム（サイトマップ）は y=355 から＝左が118px低い */
/* 縦方向はビューポートの高さでも縮む（min(横基準, 縦基準)）＝ブラウザが低くても1画面に収める。
   縦基準は Figma実寸px ÷ 1080 の vh 値 */
#sp-menu.dmenu .dmenu__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 44.115vw 1fr;   /* 左端272 → 右ブロック開始1128 */
  align-content: start;
  padding: min(clamp(90px, 12.344vw, 237px), 20vh) clamp(16px, 9.427vw, 181px) 3vh clamp(16px, 14.167vw, 272px);
  min-height: 100%;
}
/* ── 左：サイトマップ ── */
#sp-menu.dmenu .dmenu__left { margin-top: min(clamp(40px, 6.146vw, 118px), 10.9vh); }   /* 355-237 */
#sp-menu.dmenu .dmenu__ttl {
  margin: 0 0 min(clamp(16px, 2.031vw, 39px), 3.6vh);   /* 罫線→トップ 39 */
  padding-bottom: min(clamp(10px, 1.146vw, 22px), 2vh); /* 見出し→罫線 22 */
  border-bottom: .5px solid rgba(255,255,255,.9);
  width: clamp(240px, 30.99vw, 595px);                  /* 罫線 595 */
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: min(clamp(20px, 2.104vw, 40.4px), 3.74vh); line-height: 1.35; color: #fff;
}
#sp-menu.dmenu .dmenu__nav { display: flex; gap: clamp(24px, 3.177vw, 61px); }
#sp-menu.dmenu .dmenu__col { list-style: none; margin: 0; padding: 0; width: clamp(150px, 14.583vw, 280px); }
#sp-menu.dmenu .dmenu__col li {
  margin-bottom: min(clamp(10px, 1.42vw, 27px), 2.5vh);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
#sp-menu.dmenu.open .dmenu__col li { opacity: 1; transform: none; }
#sp-menu.dmenu .dmenu__col a {
  display: inline-block; text-decoration: none;
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: min(clamp(19px, 2.104vw, 40.4px), 3.74vh); line-height: 1.35; color: #fff;
  transition: color .25s ease;
}
#sp-menu.dmenu .dmenu__col a:hover,
#sp-menu.dmenu .dmenu__col a.is-current { color: var(--gold); }

/* ── 右：代表電話・ボタン・プライバシー ── */
#sp-menu.dmenu .dmenu__right { display: flex; flex-direction: column; align-items: stretch; }
#sp-menu.dmenu .dmenu__telLabel {
  margin: 0; font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: min(clamp(15px, 1.563vw, 30px), 2.78vh); letter-spacing: .27em; color: #fff;  /* 8px/30px */
}
#sp-menu.dmenu .dmenu__tel {
  margin-top: min(clamp(10px, 1.3vw, 25px), 2.3vh);
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: min(clamp(34px, 4.167vw, 80px), 7.4vh); letter-spacing: .0375em; line-height: 1.1; color: #fff;
  text-decoration: none; white-space: nowrap;
  transition: color .25s ease;
}
#sp-menu.dmenu .dmenu__tel:hover { color: var(--gold); }
#sp-menu.dmenu .dmenu__hours {
  margin: min(clamp(8px, 1vw, 19px), 1.76vh) 0 0;
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: min(clamp(17px, 2.234vw, 42.9px), 3.97vh); letter-spacing: .026em; line-height: 1.2; color: rgba(255,255,255,.55);   /* Figma準拠のグレー */
}
/* ボタン（Figma：611×122.5 / 背景#121212 / 枠 #C8A96E 1.17px / 文字 Noto Sans JP 36.4 w500 ls7.27） */
#sp-menu.dmenu .dmenu__btn {
  --fb-size: clamp(26px, 2.708vw, 52px);               /* 四隅マーカー 52 */
  --fb-offset: clamp(8px, .885vw, 17px);
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: min(100%, 611px); height: min(clamp(64px, 6.38vw, 122.5px), 11.3vh);
  margin-top: min(clamp(24px, 6.823vw, 131px), 10vh);   /* 電話ブロック→1つ目 */
  padding: 0 clamp(18px, 5.313vw, 102px);
  background: #121212; border: 1.17px solid var(--gold);
  text-decoration: none; overflow: visible;
  transition: background .3s ease, border-color .3s ease;
}
#sp-menu.dmenu .dmenu__btn + .dmenu__btn { margin-top: min(clamp(14px, 3.276vw, 62.9px), 5.2vh); }
#sp-menu.dmenu .dmenu__btn:hover { background: rgba(200,169,110,.12); }
#sp-menu.dmenu .dmenu__btn-label {
  font-family: var(--sans); font-weight: 500;
  font-size: min(clamp(16px, 1.896vw, 36.4px), 3.37vh); letter-spacing: .2em; color: var(--gold); white-space: nowrap;
}
#sp-menu.dmenu .dmenu__btn-arrow { width: clamp(36px, 3.906vw, 75px); height: auto; flex: 0 0 auto; }
/* 四つ角を強調：不透明の金＋太線（フッターCTAと同じ扱い） */
#sp-menu.dmenu .dmenu__btn .frame-btn__corner { color: var(--gold); }
#sp-menu.dmenu .dmenu__btn .frame-btn__corner svg { stroke-width: 2.2; }
#sp-menu.dmenu .dmenu__btn:hover .frame-btn__corner { color: var(--gold-bright, #d4b87a); }
#sp-menu.dmenu .dmenu__privacy {
  align-self: flex-end;
  margin-top: min(clamp(18px, 2.969vw, 57px), 4.5vh);
  font-family: "FOT-TsukuMin Pr5N", var(--serif); font-weight: 500;
  font-size: min(clamp(15px, 1.604vw, 30.8px), 2.85vh); letter-spacing: .031em; color: rgba(255,255,255,.55); text-decoration: none;   /* Figma準拠のグレー */
  transition: color .25s ease;
}
#sp-menu.dmenu .dmenu__privacy:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  #sp-menu.dmenu, #sp-menu.dmenu .dmenu__flame, #sp-menu.dmenu .dmenu__col li { transition: opacity .2s linear; transform: none; }
}

/* ── タブレット以下：1カラムに畳む ── */
@media (max-width: 1024px) {
  #sp-menu.dmenu .dmenu__inner {
    grid-template-columns: 1fr; gap: 8vh;
    padding: clamp(110px, 22vw, 200px) 7vw 12vh;
  }
  #sp-menu.dmenu .dmenu__flame { left: auto; right: -14vw; width: 76vw; opacity: .5; }
  #sp-menu.dmenu.open .dmenu__flame { opacity: .5; }
  #sp-menu.dmenu .dmenu__ttl { width: 100%; }
  #sp-menu.dmenu .dmenu__btn { width: 100%; }
}
@media (max-width: 600px) {
  #sp-menu.dmenu .dmenu__nav { gap: 6vw; }
  #sp-menu.dmenu .dmenu__col { width: auto; flex: 1 1 0; }
  #sp-menu.dmenu .dmenu__btn { justify-content: center; gap: 14px; padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════
   下層ページ共通：ヒーロー見出しの統一（基準＝会社概要 .cp-hero）
   ・サイズ／字間：About Us = 32px ls.3em、私たちについて = 94.6px w900
   ・位置：写真面（1734px幅・左右93px空け）の左端から168px、下から77px
   写真面の中に入っている要素（会社概要・信頼の背景）は --hero-ttl-in を、
   画面全幅を基準に置いている要素（事業内容・実績紹介・お問い合わせ・プライバシー）は
   写真面左端ぶんを足した --hero-ttl-x を使う。
═══════════════════════════════════════════════════════════ */
:root {
  --hero-edge:   max(2.4vw, calc((100vw - 1734px) / 2)); /* 写真面の左端 */
  --hero-ttl-in: clamp(24px, 8.7vw, 168px);              /* 写真面左端からの距離 */
  --hero-ttl-x:  calc(var(--hero-edge) + var(--hero-ttl-in));
  --hero-ttl-y:  clamp(20px, 4vw, 77px);                 /* 下端からの距離 */
}
/* 位置：写真面の中に置かれている見出し */
.cp-hero__ttlwrap,
.trp-hero__ttl,
.tr-hero__overlay { left: var(--hero-ttl-in); bottom: var(--hero-ttl-y); }
/* 位置：画面全幅を基準に置かれている見出し */
.bz-hero__inner { left: var(--hero-ttl-x); bottom: var(--hero-ttl-y); }
/* 位置：paddingで組んでいるページ */
.ct-hero__inner { padding-inline: var(--hero-ttl-x); }
.ppx-hero { padding-inline: var(--hero-ttl-x); padding-bottom: var(--hero-ttl-y); }

/* 英字ラベル（About Us / SERVICE / Trust / WORKS / contact / PRIVACYPOLICY） */
.cp-hero__en,
.bz-hero__eyebrow,
.trp-hero__eyebrow,
.tr-hero__eyebrow,
.ct-hero__eyebrow,
.ppx-hero__eyebrow {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(15px, 1.67vw, 32px);
  letter-spacing: .3em;
  line-height: 1;
  color: var(--gold);
  margin: 0 0 .5em;
}
/* 日本語見出し */
.cp-hero__ttl,
.bz-hero__title,
.trp-hero__h1,
.tr-hero__title,
.ct-hero__title,
.ppx-hero__h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(38px, 4.93vw, 94.6px);
  letter-spacing: .02em;
  line-height: 1.06;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
/* お問い合わせも他ページと同じ「左下起点」に揃える（下にリード枠がある分だけ枠の底が77pxに来る） */
.ct-hero { align-items: flex-end; }
.ct-hero__inner { padding-block: clamp(96px, 9vw, 140px) var(--hero-ttl-y); position: relative; z-index: 2; }
/* お問い合わせだけは、最上部でもヘッダーを黒で出しておく（他ページは従来どおり
   透明→スクロールで黒）。ヒーロー写真が固定ヘッダーの真下まで来るため、
   写真にスクリムを重ねる方式よりナビの可読性が画面幅に依らず安定する。
   下スクロールでバーを引っ込めている間（.is-hidden）は、他ページと同じく透明に戻す。
   お知らせは対象から外した（松尾FB 2026-08-13：他ページと同じく最初は透明にする）。 */
#page-contact #global-nav.gnav:not(.is-hidden) {
  background: rgba(8,6,4,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,169,110,.12);
}
@media (max-width: 860px) {
  /* 信頼の背景はSPで写真面が全幅になるので、位置基準を他ページと同じ全幅基準へ */
  .trp-hero__ttl { left: var(--hero-ttl-x); }
}

/* 下層ページ共通：ヒーロー見出しの登場アニメーション（全ページ同一の1系統に統一）
   従来は 事業内容/実績紹介=.tr-reveal、お問い合わせ=.anim-up、会社概要/信頼の背景/プライバシー=なし と
   3通りに分かれていたので .hero-reveal に一本化した。発火は footer.php の共通オブザーバ。 */
.hero-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.hero-reveal.is-in { opacity: 1; transform: none; }
.hero-reveal--d1 { transition-delay: .14s; }   /* 英字ラベル → 日本語見出しの順に出す */
@media (prefers-reduced-motion: reduce) {
  .hero-reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   下層ページ共通：ヒーロー直下の「キャッチ＋金枠リード」統一（基準＝会社概要 .cp-hero__copyarea）
   従来：会社概要=55.2px＋4隅ブラケット、事業内容=46px＋4隅、信頼の背景=55px＋2px枠のみ、
         実績紹介=58px＋幅1000px＋2隅 と、文字サイズも枠の意匠もバラバラだった。
═══════════════════════════════════════════════════════════ */
.cp-hero__copyarea,
.bz-catch,
.trp-hero__foot,
.tr-hero__foot {
  max-width: none;
  text-align: center;
  padding-top: clamp(44px, 4.4vw, 84px);
  padding-inline: 6%;
}
/* キャッチコピー */
.cp-hero__copy,
.bz-catch__title,
.trp-hero__q,
.tr-hero__q {
  margin: 0 0 clamp(28px, 2.9vw, 56px);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.87vw, 55.2px);
  letter-spacing: .06em;
  line-height: 1.45;
  color: #fff;
}
/* 金枠リード */
.cp-hero__box,
.bz-catch__box,
.trp-hero__lead,
.tr-hero__lead {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  /* 92vw だと親（padding-inline:6% ＝ 内寸88vw）より広くなり、はみ出した分が
     margin:auto では吸収されず全部右側に出ていた（SPで右へ14〜16px、PCで5px）。
     親の内寸を基準にすれば左右が必ず均等になる。 */
  width: min(1272px, 100%); max-width: none; margin: 0 auto;
  background: none;
  border: 1px solid rgba(200,169,110,.85);
  padding: 20px 26px;
}
.trp-hero__lead::before, .trp-hero__lead::after,
.tr-hero__lead::before,  .tr-hero__lead::after { content: none; }  /* 旧・疑似要素の隅飾りは廃止 */
.cp-hero__box p,
.bz-catch__box p,
.trp-hero__lead p,
.tr-hero__lead p {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: min(20px, 1.08vw);
  letter-spacing: .04em;
  line-height: 1.8;
  color: #F5F3EF;
  white-space: nowrap;
}
/* 四隅ブラケット（信頼の背景・実績紹介の追加ぶん。意匠は .cp-hero__corner と同一） */
.hbox__corner { position: absolute; width: 30px; height: 30px; pointer-events: none; --ctk: 5.583px; }
.hbox__corner::before, .hbox__corner::after { content: ""; position: absolute; background: #C8A96E; border-radius: calc(var(--ctk) / 2); }
.hbox__corner::before { width: 100%; height: var(--ctk); }
.hbox__corner::after  { width: var(--ctk); height: 100%; }
.hbox__corner--tl { top: calc(var(--ctk) / -2); left: calc(var(--ctk) / -2); }
.hbox__corner--tl::before, .hbox__corner--tl::after { top: 0; left: 0; }
.hbox__corner--tr { top: calc(var(--ctk) / -2); right: calc(var(--ctk) / -2); }
.hbox__corner--tr::before, .hbox__corner--tr::after { top: 0; right: 0; }
.hbox__corner--br { bottom: calc(var(--ctk) / -2); right: calc(var(--ctk) / -2); }
.hbox__corner--br::before, .hbox__corner--br::after { bottom: 0; right: 0; }
.hbox__corner--bl { bottom: calc(var(--ctk) / -2); left: calc(var(--ctk) / -2); }
.hbox__corner--bl::before, .hbox__corner--bl::after { bottom: 0; left: 0; }

@media (max-width: 767px) {
  .cp-hero__copy, .bz-catch__title, .trp-hero__q, .tr-hero__q { font-size: 20px; }
  .cp-hero__box p, .bz-catch__box p, .trp-hero__lead p, .tr-hero__lead p { white-space: normal; font-size: 12px; line-height: 1.9; }
  .hbox__corner { width: 18px; height: 18px; --ctk: 4px; }
}

/* ══════════════════════════════════════════════════════════
   下層ページのヒーロー：リード枠が「小さい四角 → 横長」に開き、
   開ききった枠にホバーするとキャッチコピーが現れる（会社概要／事業内容／信頼の背景／実績紹介 共通）
   クラスは footer.php の共通JSが付ける（.hcatch＝キャッチ、.hbox＝リード枠）。
   ホバーを持たない端末では成立しない演出なので、その場合はJS側で何もせず最初から全部見せる。
══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* キャッチは伏せておく。読み上げには残したいので visibility ではなく opacity で消す。
     事業内容・実績紹介のキャッチは .tr-reveal.is-in（クラス2つ）で opacity:1 になるので、
     こちらもクラスを重ねて同じ強さにし、後ろに書いてある方＝この指定を勝たせる。 */
  /* ホバー前は場所も空けない（松尾FB 2026-08-12）。--hc-h / --hc-mt / --hc-mb はJSの実測値。
     display:none だと動きが付かないので、高さと上下マージンを 0 に畳んでアニメさせる。 */
  .hcatch.hcatch {
    opacity: 0; pointer-events: none;
    height: 0; margin-top: 0; margin-bottom: 0; overflow: hidden;
    transition: opacity .4s ease, height .55s cubic-bezier(.16,1,.3,1),
                margin-top .55s cubic-bezier(.16,1,.3,1), margin-bottom .55s cubic-bezier(.16,1,.3,1);
  }
  .hcatch.is-peek {
    opacity: 1;
    height: var(--hc-h, auto);
    margin-top: var(--hc-mt, 0px); margin-bottom: var(--hc-mb, 0px);
  }

  /* --hbox-h ＝ 開いた状態の高さ（JSが実測）。閉じている間は同じ値を幅にも使って正方形にする。
     overflow は、まだ開いていない枠から本文がはみ出すのを隠すため。
     overflow-clip-margin を取ってあるので四隅のブラケットは切れない。 */
  .hbox {
    width: var(--hbox-h, 76px); height: var(--hbox-h, auto);
    overflow: clip; overflow-clip-margin: 14px;
    transition: width .95s cubic-bezier(.16, 1, .3, 1);
  }
  .hbox > p { opacity: 0; transition: opacity .5s ease; }
  .hbox.is-open { width: min(1272px, 100%); }
  .hbox.is-textin > p { opacity: 1; }
  /* 開ききるまでは本文を折り返さない（折り返すと閉じている間の高さが変わって正方形が崩れる） */
  .hbox:not(.is-textin) > p { white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) {
    .hbox, .hbox > p, .hcatch.hcatch { transition: none; }
  }
}

/* ═══════════════════════════════════════════════════════════
   信頼の背景：「数字で見る(明)」→「選ばれる理由(暗)」の背景ブラインドワイプ
   会社概要（代表挨拶→企業理念）の .cp-blinds をそのまま流用する。
   あちらはビューポート全面の position:fixed 版だが、こちらは前後のセクションが
   全幅の帯（不透明）なので、セクション内に absolute で収める。
   スラット枚数・厚み・0.01s ずつの遅延・イージングは会社概要と同一。
═══════════════════════════════════════════════════════════ */
/* .cp-phil 以外でも同じ動きをするように、汎用の .js-blinds でも効かせる */
.js-blinds .cp-blinds__line {
  transform: scaleY(0);
  transition: transform .6s cubic-bezier(0,.55,.45,1);
  transition-delay: calc(var(--i, 0) * .01s);
}
.js-blinds.is-bgin .cp-blinds__line { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .js-blinds .cp-blinds__line { transform: scaleY(1); transition: none; }
}
.trp-sec--dark { position: relative; }
/* 上の帯との間に黒い隙間があるとワイプが途切れて見えるので、marginをsectionのpaddingへ寄せる */
.trp-sec--dark { margin-top: 0; padding-top: clamp(120px, 13vw, 172px); }
.trp-blinds {
  /* 前後の帯と同じく画面幅いっぱい（索引カラムの下も含めて一枚で反転させる） */
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--trp-bleed)); width: 100vw; z-index: 0;
  --cp-blind-from: #F5F3EF;   /* 反転前＝NUMBERSの帯と同じ明色 */
  --cp-blind-to:   var(--kuro);   /* 反転後＝ページの地の黒 */
}
/* 地の黒に乗っているグレインがワイプ面で途切れないよう、この面にも同じ粒を乗せる */
.trp-blinds::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  opacity: .12; mix-blend-mode: screen;   /* 地の黒（.trp::after）と同じ強さに揃える */
  animation: grainJitter .3s steps(1) infinite;
}
.trp-sec--dark > *:not(.trp-blinds) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .trp-blinds::after { animation: none; } }
@media (max-width: 767px) {
  .trp-blinds::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='ns'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-1'/%3E%3CfeFuncG type='linear' slope='2' intercept='-1'/%3E%3CfeFuncB type='linear' slope='2' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ns)'/%3E%3C/svg%3E");
    background-size: 300px 300px; opacity: .08;   /* 地の黒（.trp::after）と同じ強さに揃える */
  }
}
@media (max-width: 860px) {
  /* SPは .trp-sec--dark 自体がネガティブマージンで全幅に出ているので、そこ基準で中央合わせ */
  .trp-blinds { left: 50%; transform: translateX(-50%); width: 100vw; }
}

/* ══════════════════════════════════════════════════════════
   SP：日本語の改行規則（2026-08 SP版整備）
   スマホは1行に入る文字数が少ないため、ブラウザ既定の「どこでも折る」だと
   「〜ではありませ／ん。」のように最終行へ1〜2文字だけ落ちる泣き別れが多発する。
   ・word-break: auto-phrase … 文節（意味の切れ目）で折る
   ・text-wrap: pretty ……… 最終行が極端に短くならないよう行を配分し直す
   どちらも非対応ブラウザでは無視されるだけなので、崩れる心配はない。
   :where() で詰めて詳細度0にしてあるため、各パーツの個別指定は今まで通り勝つ。
══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, figcaption, blockquote, th, td,
         .tr-tag, .trp-chip, .bz-ttl span, .cs-card__ttl, .tx-sub__txt) {
    word-break: auto-phrase;
    /* 禁則処理を厳格に。既定(auto)では長音符「ー」や促音「ッ」が行頭に来てしまい、
       「プライバシ／ーポリシー」「ホ／ッケー部」のような読みづらい改行が起きる。 */
    line-break: strict;
  }
  /* SAFARI-NO-PRETTY（2026-11-06・本人「特定のスマホ（iPhone）で見ると文字の右側が不自然に開いている」）:
     iOS 26 の Safari は text-wrap: pretty に対応したが、Chrome（最後の数行だけ直す）と違い段落の全部の行を短くそろえるため、
     どの行も右に 2〜5 文字ぶんの空きが出ていた（WebKit 26 で再現・Mac の Chrome の iPhone 表示では出ない）。
     pretty は auto-phrase に対応するブラウザ（＝Chrome 系）だけにかける。Safari はふつうに行末まで詰めて折る（禁則は上の strict） */
  @supports (word-break: auto-phrase) {
    :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, figcaption, blockquote, th, td,
           .tr-tag, .trp-chip, .bz-ttl span, .cs-card__ttl, .tx-sub__txt) {
      text-wrap: pretty;
    }
  }
  /* ブラウザ任せでは意図した位置で折れない見出し用のSP専用改行。
     使い方：<h3>保守・アフターサポート<br class="br-sp">（任意）</h3> */
  .br-sp { display: inline; }
  /* 行数の少ないもの（見出し・箇条書き・定義リスト）は pretty より balance が合う。
     balance は各行の長さを揃えるので「〜鯖江精／機の答え方」のような
     語の途中での泣き別れが起きにくい。長文では効かない仕様なので本文はprettyのまま。 */
  :where(h1, h2, h3, h4, h5, h6, .tr-tag, .trp-chip, .bz-ttl span,
         li, dd, dt, figcaption, .cp-nenpyo__txt, .trp-numcard__txt, .tx-sub__txt) {
    text-wrap: balance;
  }
}
@media (max-width: 767px) {
  /* 製品化の流れの見出し：使える幅212pxに対し「保守・アフターサポート」が20pxだと220pxで
     1px足りずに「保守・アフ／ターサポート」と語中で折れていた。狭い幅だけ僅かに詰める。 */
  .bz-step__ttl { font-size: clamp(17px, 5.3vw, 20px); }
}

/* ═══════════════════════════════════════════════════════════
   帯見出しの2行対応（全ページ共通・SPのみ）
   inline-block のままだと、折り返したとき一番長い行に合わせた1つの大きな黒矩形になり、
   短い方の行の脇に黒い余白がぶら下がる。display:inline にすると行ボックスごとに背景が付き、
   box-decoration-break:clone で左右パディングも各行に付くので「行ごとに1本の帯」になる。
   対象：事業内容(.bz-ttl span) のみ。
   信頼の背景(.trp-chip)・実績紹介(.tr-tag)は暗い面で帯そのものを外した（ファイル末尾）ので、
   行ごとに帯を分ける必要がなくなり、この仕組みの対象から外している。
   TOPの .tx-tag は番号＋見出しを横に並べる inline-flex なので対象外。
   各クラス本来の定義より後ろに置く必要がある（詳細度が同じで、source順で決まるため）。
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .bz-ttl span {
    display: inline;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    /* インライン要素に clip-path を掛けるとChromeは最初の行ボックスの範囲しか描かない
       （ファイル上部の注意書き参照）。SPの帯は display:inline なので clip-path は使えない。
       .is-revealed 側のセレクタの方が詳細度が高いため !important で確実に打ち消す。 */
    clip-path: none !important;
  }
  /* ── SPの帯ワイプは mask-size で行う ──
     clip-path と違い mask はインラインが複数行に分かれても全フラグメントを
     ひとつの境界ボックスとして扱うため、2行の帯が同じxで切れる（実測で確認）。
     見た目・尺・イージングはPCの clip-path 版（.9s / cubic-bezier(.76,0,.24,1) / 遅延.3s）に揃える。
     JSが走らない環境・reduced-motion では html.js-bandrev が付かない＝帯は最初から見えている。 */
  html.js-bandrev .bz-ttl span.js-band-reveal {
    -webkit-mask-image: linear-gradient(#000, #000);
            mask-image: linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    -webkit-mask-size: 0% 100%;
            mask-size: 0% 100%;
    transition: -webkit-mask-size .9s cubic-bezier(.76,0,.24,1),
                        mask-size .9s cubic-bezier(.76,0,.24,1);
  }
  html.js-bandrev .bz-ttl span.js-band-reveal.is-revealed {
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    transition-delay: .3s;
  }
  /* 行ごとの帯にすると、帯の高さは font-size＋上下padding で決まるのに対し、
     行の送りは line-height で決まる。送りが足りないと帯どうしが重なって
     1行目の文字が2行目の帯に隠れるので、クラスごとに送りと上下余白を揃える。
     （とくに .trp-chip は上下20px固定で、SPの26px文字に対して帯が70pxになっていた） */
  /* 実測：この明朝の行内ボックスは 1.64em。帯の高さ＝1.64em＋上下padding なので、
     line-height はそれより大きくしないと重なる（2.12em の帯に対し 2.28em の送り＝隙間0.16em）。 */
  .bz-ttl span { line-height: 2.28; padding: .24em .38em; }
  /* 帯が残る信頼の背景の見出し（明るい面）。SPは1行に収まるので行ごと分割は不要だが、
     上下20px固定のままだと26px文字に対して帯が太すぎるので詰める。
     （#trp-numbers は独自のSP指定があるのでそちらが優先される） */
  .trp-sec--light .trp-chip { line-height: 1.35; padding: .24em .5em; }
}

/* ═══════════════════════════════════════════════════════════
   暗い面の帯見出しは、帯を外して「文字が左から出てくる」形にする
   左右パディングも外して、上のラベル（ISSUE 等）と文字の左端を揃える。

   ★対象は「セクションが暗い面かどうか」で決める。クラス名（.trp-chip 等）で一括にしてはいけない。
     信頼の背景は1ページの中で明暗が混在しており、しかも地色はセクションの ::before が敷いている。
     そのため親要素の background-color を辿るだけの判定では、明るい面まで暗いと誤判定する。
       ・#trp-reasons  .trp-sec--dark   … 地色なし＝ページ地の --kuro   → 暗い（帯を外す）
       ・#trp-numbers  .trp-sec--numbg  … ::before が #F5F3EF          → 明るい（帯を残す）
       ・#trp-cert     .trp-sec--light  … ::before が #F5F3EF          → 明るい（帯を残す）
       ・#trp-csr      .trp-sec--light  … ::before が #F5F3EF          → 明るい（帯を残す）
     .trp-chip は color:#fff なので、明るい面で帯を外すと文字が読めなくなる。
   実績紹介の .tr-tag は、02業界別/03オーダーメイド/04流れ をライト面化（2026-08-10）した時点で
   3つとも明るい面（白/クリーム）の上に移った。原則どおり「明るい面の帯は残す」＝対象から外す
   （松尾FB「オーダーメイド実績の帯が消えてる」「ご依頼から納品までの流れも」）。
   事業内容の .bz-ttl span は背景 #F5F3EF ＝帯が効いているので対象外。
═══════════════════════════════════════════════════════════ */
.trp-sec--dark .trp-chip { background: none; padding-inline: 0; }
/* 帯が無いぶん、左→右のワイプに「少し左から寄ってくる」動きを足す */
html.js-bandrev .trp-sec--dark .trp-chip.js-band-reveal {
  transform: translateX(-.5em);
  transition: clip-path .9s cubic-bezier(.76,0,.24,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
html.js-bandrev .trp-sec--dark .trp-chip.js-band-reveal.is-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-bandrev .trp-sec--dark .trp-chip.js-band-reveal { transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   数字で見る、信頼の厚さ（明るい面）の帯：Figma Frame17 準拠（松尾FB 2026-08-10）
   実測：帯67px × 文字53.2px（lh52.46）＝文字の上下ゆとり各7px・縦中央。
   以前の「font-size＋上下20px固定」だと帯93pxで太すぎ、明朝の字面が上寄りに見えていた。
   高さは em で持たせてフォントの clamp に追従させる（67/53.2=1.26em） */
#trp-numbers .trp-chip {
  display: inline-flex; align-items: center;
  box-sizing: border-box;
  background: #1a1a1a; color: #fff;
  height: 1.26em;
  line-height: .99;                                /* 52.46 / 53.2 */
  /* 下.15em＝TsukuMinの字面が行ボックス内で下寄り（画素実測：上13px/下5px）なのを打ち消して芯を合わせる */
  padding: 0 clamp(8px, .78vw, 15px) .15em;
}
/* SPは <br> で2行になるため固定高をやめ、同じ比率の上下余白で包む */
@media (max-width: 767px) {
  #trp-numbers .trp-chip { height: auto; padding: .13em .3em; line-height: 1.35; }
}

/* 選ばれる理由（暗）↔ 認証・受賞（明）の切り替わりの余白（松尾FB 2026-08-10）
   ・暗面の最終コンテンツ（設備テキスト）の下に200px
   ・明面の CERTIFICATION & AWARD の上に150px */
#trp-reasons { padding-bottom: 200px; }
#trp-cert { padding-top: 150px; }
/* 数字で見る：加工・組立精度カードの下に185px（松尾FB 2026-08-10） */
#trp-numbers { padding-bottom: 185px; }
@media (max-width: 767px) { #trp-numbers { padding-bottom: clamp(72px, 16vw, 130px); } }

/* ═══════════════════════════════════════════════════════════
   選ばれる理由：写真はホバーで現れ、文字は一歩引く（eat-play-sleep.org 参考・松尾FB 2026-08-10）
   松尾FB 2026-08-13：出てきたあと画像が少し大きく表示されるように＝フェードより
   ゆっくり長い拡大(2.4s・1→1.12)を重ね、出現後もじわっとズームが続く。枠は overflow:hidden で固定
   松尾FB 2026-08-17：写真の反応が遅い。フェードを 1.2s→.45s に詰め、待ち時間(delay .1s)を撤廃して
   ホバーした瞬間に出るように。「出たあとじわっと拡大」は残すので拡大だけ 2.4s のまま。
   離脱時は拡大の戻りを .6s に短縮（2.4s のままだと再ホバーが前回の続きから始まって鈍く見える）。
   ホバーできない端末（タッチ）では従来どおり写真を常時表示する */
@media (hover: hover) and (min-width: 768px) {
  #trp-reasons .trp-reason__ph img {
    opacity: 0; transform: scale(1);
    transition: opacity .45s cubic-bezier(.4,.4,0,1), transform .6s cubic-bezier(.4,.4,0,1);
  }
  #trp-reasons .trp-reason:hover .trp-reason__ph img {
    opacity: 1; transform: scale(1.12);  /* 松尾FB 2026-08-13：もっと大きく 1.06→1.12 */
    transition: opacity .45s cubic-bezier(.4,.4,0,1), transform 2.4s cubic-bezier(.4,.4,0,1);
  }
  #trp-reasons .trp-reason__body { transition: opacity .5s ease; }
  #trp-reasons .trp-reason:hover .trp-reason__body { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  #trp-reasons .trp-reason__ph img { opacity: 1 !important; transform: none !important; transition: none !important; }
  #trp-reasons .trp-reason:hover .trp-reason__body { opacity: 1; }
}
@media (max-width: 767px) {
  #trp-reasons { padding-bottom: clamp(80px, 18vw, 140px); }   /* SPは画面比で詰める */
  #trp-cert { padding-top: clamp(64px, 14vw, 110px); }
}

/* ═══════════════════════════════════════════════════════════
   下層ページ ヒーロー共通（2026-08-10 指示）
   ① ヘッダーのロゴ看板と写真が重なるので、写真を --hero-gap（＝ロゴ下端＋14px）まで下げる
   ② 写真の上にフィルムグレインを乗せる（写真＝グレインの下）＋ 全体をもう少し暗く
   各プレフィックス本来の定義より後ろに置く必要がある（詳細度が同じでsource順で決まるため）
═══════════════════════════════════════════════════════════ */

/* ── ① 写真をロゴの下へ逃がす ──
   business / trust / works は元から --hero-gap を見ているので変数の変更だけで追随する。
   ここで直すのは、独自の余白を持っていた会社概要と、写真が上端(0)から始まっていた3ページ。 */
.cp-hero { padding-top: var(--hero-gap); }

.ct-hero { padding-top: var(--hero-gap); }        /* min-height に gap を含む設計なので総高は変わらない */
.ct-hero__photo { top: var(--hero-gap); }

.ppx-hero { padding-top: calc(var(--hero-gap) + clamp(40px, 4vw, 64px)); }
/* inset:0 + height:100% だと top を足したぶん下へはみ出すので、高さは top/bottom に決めさせる */
.ppx-hero__bg { top: var(--hero-gap); height: auto; }
.ppx-hero::after { top: var(--hero-gap); }

/* ── ② もう少し暗く ──
   会社概要・事業内容・実績紹介は rgba(26,26,26,.66)×opacity.8＝実効53%だったので、
   opacity を外して素の66%にする。信頼の背景だけ53%だったので同値に揃える。 */
.cp-hero__scrim,
.tr-hero__scrim { opacity: 1; }
.bz-hero__media::before { opacity: 1; }
.trp-hero__scrim { background: rgba(26,26,26,.66); }
/* お知らせ／お問い合わせはスクリムを持っていないので追加（写真は右55%だけなので控えめに） */
.ct-hero__photo::before { content: ""; position: absolute; inset: 0; background: rgba(26,26,26,.42); pointer-events: none; }
/* プライバシーは左から右へ抜けるグラデ。全体に一段落とす */
.ppx-hero::after { background: linear-gradient(90deg, rgba(18,18,18,.82) 0%, rgba(18,18,18,.5) 55%, rgba(18,18,18,.3) 100%); }

/* ── ② 写真の上のフィルムグレイン ──
   ノイズ画像・ちらつきアニメはTOPと同一（.film-grain 系の定義を流用）。
   文字より後ろに置くため、スクリム側（＝見出しよりDOMで前）の疑似要素に載せる。 */
.cp-hero__scrim::after,
.tr-hero__scrim::after,
.trp-hero__scrim::after,
.bz-hero__media::after,
.ct-hero__photo::after,
.ppx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  opacity: .24;
  mix-blend-mode: screen;
  animation: grainJitter .3s steps(1) infinite;
}
/* プライバシーだけは写真が <img>（疑似要素を持てない）なのでセクション側に置く。
   z-index:auto のままだとDOM順で写真より下に沈むため、明示的に1段上げる
   （見出し .ppx-hero__inner も z1 かつDOMで後ろなので、文字はグレインより前のまま）。 */
.ppx-hero::before { z-index: 1; top: var(--hero-gap); }
@media (prefers-reduced-motion: reduce) {
  .cp-hero__scrim::after,
  .tr-hero__scrim::after,
  .trp-hero__scrim::after,
  .bz-hero__media::after,
  .ct-hero__photo::after,
  .ppx-hero::before { animation: none; }
}

/* 下層ページのヒーローのアイブロウ英字は全て大文字に揃える（2026-08-10 指示）。
   事業内容(.bz-hero__eyebrow)・お知らせ/お問い合わせ(.ct-hero__eyebrow)は既に uppercase 指定あり。
   ここで足すのは指定漏れの4つ。うち実際に見た目が変わるのは
   会社概要「About Us」と信頼の背景「Trust」の2つ（残り2つは原稿が元から大文字）。 */
.cp-hero__en,
.trp-hero__eyebrow,
.tr-hero__eyebrow,
.ppx-hero__eyebrow { text-transform: uppercase; }

/* ── 下層ページヒーロー：写真の「外側」（黒地）にもグレインを乗せる（2026-08-10 指示）──
   写真の上のグレインはスクリム側の疑似要素が担当済み。こちらは写真の【下】(z-index:0)に敷くので
   二重には乗らず、写真が無い黒地部分にだけ出る。見出しは写真の中にあるので影響しない。
   対象は「自分で不透明な暗い背景を塗っているヒーロー」だけ。自前の背景が
   ページラッパー側のグレイン(z-index:-1)を覆い隠してしまうので、その面だけ個別に足す。
   ※信頼の背景(.trp-hero)と実績紹介(.tr-hero)は除外。この2つは背景が透明で、
     ラッパー（.trp::after / .trust2::before）のグレインがそのまま透けて見えるため、
     ここでも足すと同じ面に二重掛けになる（実測：粒の振れ幅が 8.6 → 15.4 と約1.8倍）。 */
.cp-hero { position: relative; }   /* 疑似要素の基準にする（他は元から relative） */
.cp-hero::before,
.bz-hero::before,
.ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  opacity: .24;
  mix-blend-mode: screen;
  animation: grainJitter .3s steps(1) infinite;
}
/* プライバシーだけは写真が全面なので黒地は上の帯だけ。
   写真用グレイン(.ppx-hero::before)を上端まで伸ばして帯も一緒に覆う。 */
.ppx-hero::before { top: 0; }
@media (prefers-reduced-motion: reduce) {
  .cp-hero::before, .bz-hero::before,
  .ct-hero::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   ヒーロー下の黒い面にもグレインを敷く（2026-08-10 指示）
   実績紹介の .tr-hero__foot／会社概要の .cp-hero__copyarea のように、
   黒地を塗っているのはページ全体のラッパー（.trust2 / .bz など）で、
   そこにはグレインが無かった。
   信頼の背景(.trp)は .trp::after で既に全面グレインがあるので対象外。
   置き方は「isolation:isolate ＋ z-index:-1」。ラッパー自身の背景の【上】、
   中身（文字・枠・明るいパネル）の【下】に入るので、文字が霞んだり
   明るいパネルの黒文字が粒立ったりしない。 */
.trust2,            /* 実績紹介の本文ラッパー */
.bz,                /* 事業内容の本文ラッパー */
.bz-flowpanel,      /* 事業内容の中の濃色パネル（自前の背景でラッパーのグレインを隠すため個別に） */
.bz-catch,          /* 事業内容ヒーロー直下のキャッチ帯（同上） */
.wk-steps,          /* 実績紹介の工程ブロック（同上） */
.ctb,               /* 全ページ共通のCTA帯 */
#footer.site-footer /* フッター */ {
  position: relative;
  isolation: isolate;
}
.trust2::before,
.bz::before,
.bz-flowpanel::before,
.bz-catch::before,
.wk-steps::before,
.ctb::before,
#footer.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.5'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  opacity: .24;
  mix-blend-mode: screen;
  animation: grainJitter .3s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .trust2::before, .bz::before, .bz-flowpanel::before,
  .bz-catch::before, .wk-steps::before,
  .ctb::before, #footer.site-footer::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   ゴールド枠ボックス：ホバーで四つ角が外へ開く（2026-08-10 指示）
   .frame-btn（ボタン）と同じ挙動・同じ尺に揃える（translate 7px / .3s ease-out）。
   対象は各ページのヒーロー下にあるリード枠：
     私たちについて .cp-hero__box ／ 事業内容 .bz-catch__box
     信頼の背景 .trp-hero__lead ／ 実績紹介 .tr-hero__lead
     お知らせ・お問い合わせ .ct-hero__box
   角は元から枠の外（-2〜-2.8px）に出ているので、親が overflow:hidden だと
   開いた分が切れる。念のため overflow:visible を明示しておく。 */
.cp-hero__box,
.bz-catch__box,
.trp-hero__lead,
.tr-hero__lead,
.ct-hero__box {
  --hbx-open: 7px;
  overflow: visible;
}
.cp-hero__corner,
.bz-catch__corner,
.hbox__corner,
.ct-hero__corner {
  transition: transform .3s ease-out;
}
.cp-hero__box:hover  .cp-hero__corner--tl,
.bz-catch__box:hover .bz-catch__corner--tl,
.trp-hero__lead:hover .hbox__corner--tl,
.tr-hero__lead:hover  .hbox__corner--tl,
.ct-hero__box:hover  .ct-hero__corner--tl { transform: translate(calc(-1 * var(--hbx-open)), calc(-1 * var(--hbx-open))); }

.cp-hero__box:hover  .cp-hero__corner--tr,
.bz-catch__box:hover .bz-catch__corner--tr,
.trp-hero__lead:hover .hbox__corner--tr,
.tr-hero__lead:hover  .hbox__corner--tr,
.ct-hero__box:hover  .ct-hero__corner--tr { transform: translate(var(--hbx-open), calc(-1 * var(--hbx-open))); }

.cp-hero__box:hover  .cp-hero__corner--br,
.bz-catch__box:hover .bz-catch__corner--br,
.trp-hero__lead:hover .hbox__corner--br,
.tr-hero__lead:hover  .hbox__corner--br,
.ct-hero__box:hover  .ct-hero__corner--br { transform: translate(var(--hbx-open), var(--hbx-open)); }

.cp-hero__box:hover  .cp-hero__corner--bl,
.bz-catch__box:hover .bz-catch__corner--bl,
.trp-hero__lead:hover .hbox__corner--bl,
.tr-hero__lead:hover  .hbox__corner--bl,
.ct-hero__box:hover  .ct-hero__corner--bl { transform: translate(calc(-1 * var(--hbx-open)), var(--hbx-open)); }

@media (prefers-reduced-motion: reduce) {
  .cp-hero__corner, .bz-catch__corner, .hbox__corner, .ct-hero__corner { transition: none; }
}

/* ── 沿革(HISTORY)見出しの登場演出（2026-08-10 指示）──
   TOPの Contact と同じ意匠：大見出しは1文字ずつマスクからせり上がり、
   下のサブコピーは出そろってからふわっと続く。
   会社概要の IntersectionObserver が付けるクラスは .visible（.show ではない）。 */
.cp-history__head.anim-up { opacity: 1; transform: none; transition: none; }   /* ブロックごとのフェードは打ち消す */
/* 明朝の払いや O の丸みが行ボックスをはみ出すので、上下左右に逃がしてからマスクする（負マージンでレイアウト不変） */
.cp-hch { display: inline-block; overflow: hidden; padding: .18em .04em; margin: -.18em -.04em; }
.cp-hch i {
  display: inline-block; font-style: normal;
  transform: translateY(130%);            /* 逃がしたぶんを含めてマスク窓の外に置く */
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0s);
}
.cp-history__head.anim-up.visible .cp-hch i { transform: none; }
/* サブコピー「鯖江精機の60年の歴史」は見出しが出きってから（7文字×0.06s＋0.9s＝約1.3s） */
.cp-history__sub {
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease .95s, transform .8s cubic-bezier(.22, 1, .36, 1) .95s;
}
.cp-history__head.anim-up.visible .cp-history__sub { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-hch i { transform: none; transition: none; }
  .cp-history__sub { opacity: 1; transform: none; transition: none; }
}

/* MISSION ステートメントに添える2行（Figma決定稿）。
   本文(.cp-mvv__desc)ではなくステートメント側の小書きなので、明朝のまま一段小さく落とす。 */
.cp-mvv__note {
  display: block;
  margin-top: 1.1em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(12px, .94vw, 17px);
  line-height: 2;
  letter-spacing: .06em;
  color: rgba(245, 243, 239, .62);
}

/* ══════════════════════════════════════════════════════════
   ページ内ナビの統一（松尾FB 2026-08-13）
   基準＝事業内容の .bz-nav。対象は
     事業内容 .bz-nav / 実績紹介 .tr-nav / 信頼の背景 .trp-index / 私たちについて .cp-sidenav
   位置の取り方（sticky か JS制御の fixed か、上端の合わせ方）はページごとに事情が
   あるのでそのまま。幅・余白・文字サイズ・枠・矢印・現在地の表現だけを揃える。
   幅は --pgnav-w を各ページの元の指定から参照させてあるので、ここ1か所で決まる。
══════════════════════════════════════════════════════════ */
:root {
  --pgnav-w: 192px;                     /* 176pxだと実績紹介の「オーダーメイド実績」が2行になる */
  --pgnav-maxw: 1320px;                 /* 本文コンテナ幅（事業内容の値） */
  --pgnav-pad: clamp(20px, 3vw, 48px);  /* コンテナ左右の余白（同） */
  --pgnav-gap: clamp(28px, 4vw, 80px);  /* ナビ→本文の間隔（同） */
  --pgnav-top: 110px;                   /* 貼り付いたときの画面上端からの距離（固定ヘッダー高） */
}
/* 貼り付き位置。私たちについてはJS制御（company.php の NAV_GAP=110）なので同値 */
.bz-nav, .tr-nav, .trp-index { top: var(--pgnav-top); }
/* 横位置は「事業内容と同じコンテナ幾何（--pgnav-maxw / --pgnav-pad）の第1カラム」に揃える。
   事業内容・実績紹介・信頼の背景の3ページはこれで一致する。
   私たちについてだけは本文が1232px中央寄せで、ナビは左に余った余白へ置く設計のため
   同じX（1320pxコンテナの左端）へ動かすと本文の上に乗る（実測：1920pxで拠点・
   アクセスの区間がナビ矩形の30.7%を占めるまで悪化）。よってこのページのXは従来どおり。 */

/* 箱：白面＋影のみ（枠線は持たせない） */
.bz-nav, .tr-nav, .trp-index, .cp-sidenav {
  background: #fff; border: 0; border-radius: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* 項目 */
.bz-nav__item, .tr-nav__item, .trp-index a, .cp-sidenav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 15px 16px; text-decoration: none;
  font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .04em;
  color: #444; background: none;
  border-top: 0; border-bottom: 1px solid rgba(0,0,0,.08);
  transition: color .25s, background .25s;
}
.bz-nav__item:last-child, .tr-nav__item:last-child,
.trp-index a:last-child, .cp-sidenav__item:last-child { border-bottom: 0; }
/* 実績紹介だけラベルを span で包んでいるので、親の見た目を継がせる */
.tr-nav__label { font-family: var(--sans); font-size: 14px; font-weight: inherit; letter-spacing: .04em; color: inherit; }

/* 矢印 */
.bz-nav__arrow, .tr-nav__arrow, .cp-sidenav__item span { font-size: 12px; color: #999; transition: color .25s; }
/* 信頼の背景だけSVG。viewBoxは10:26なので、幅を詰めても縦12pxに収まる */
.trp-index__arrow { flex: 0 0 auto; display: block; width: 11px; height: 13px; color: #999; }

/* hover / 現在地：ゴールド＋太字（背景の色替えはしない） */
.bz-nav__item:hover, .bz-nav__item.is-active,
.tr-nav__item:hover, .tr-nav__item.is-active,
.trp-index a:hover, .trp-index a.is-active,
.cp-sidenav__item:hover, .cp-sidenav__item.is-active { color: var(--gold); font-weight: 600; background: none; }
/* 現在地の太さは項目側の 600 に揃える（元は 700 が .is-active .tr-nav__label に効いていた） */
.tr-nav__item:hover .tr-nav__label,
.tr-nav__item.is-active .tr-nav__label { color: var(--gold); font-weight: inherit; }
.bz-nav__item:hover .bz-nav__arrow, .bz-nav__item.is-active .bz-nav__arrow,
.tr-nav__item:hover .tr-nav__arrow, .tr-nav__item.is-active .tr-nav__arrow,
.trp-index a:hover .trp-index__arrow, .trp-index a.is-active .trp-index__arrow,
.cp-sidenav__item:hover span, .cp-sidenav__item.is-active span { color: var(--gold); }
/* 実績紹介の矢印だけ hover で下へ動く演出が入っていたので、他と揃えて止める */
.tr-nav__item:hover .tr-nav__arrow { transform: none; }


/* ══════════════════════════════════════════════════════════
   帯見出しの縦の芯と上の余白を統一（松尾FB 2026-08-13）
   基準＝信頼の背景「数字で見る、信頼の厚さ」（#trp-numbers .trp-chip）。
   要点は3つ。
     ・inline-flex + align-items:center で、行ボックスではなく帯の中心に文字を置く
     ・帯の高さを height:1.26em（＝67/53.2）で持たせ、フォントの clamp に追従させる
     ・padding-bottom:.15em で、明朝の字面が行ボックス内で下寄りなのを打ち消して芯を合わせる
   これで帯が文字からはみ出さなくなるため、上のラベル（BUSINESS OVERVIEW 等）を
   避けるための追い足しマージンも不要になる。
   SP（767px以下）は帯が2行に割れるページがあり、固定高だと崩れるので従来の指定に任せる。
   暗い面（.trp-sec--dark）は帯そのものを外しているので対象外。
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .bz-ttl span,
  .tr-tag,
  .trp-sec--light .trp-chip {
    display: inline-flex; align-items: center; box-sizing: border-box;
    height: 1.26em;
    line-height: .99;
    padding: 0 clamp(8px, .78vw, 15px) .15em;
  }
}
/* ラベル（BUSINESS OVERVIEW 等）と帯のあいだの見た目の隙間を16pxに揃える。
   実績紹介のラベルだけ明朝15px＝行ボックスがインクより約4px高いので、その分だけ詰める。 */
.tr-eyebrow { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   私たちについて：サイドナビ（代表挨拶〜組織図の索引）を全ページ追従させたまま
   本文にかぶらせないための「索引列の予約」（2026-08-17 本人指示）。
   ナビは fixed（left: clamp(16px,6vw,117px)・幅 --pgnav-w）で降りてくるので、
   追従区間にある各セクションへ ナビ左位置＋ナビ幅＋間隔 ぶんの左余白を確保する。
   （TRUSTページの sticky 索引と同じ「左に索引列・右に本文」の考え方）
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #page-company {
    --cp-navclear: calc(clamp(16px, 6vw, 117px) + var(--pgnav-w) + clamp(24px, 2.4vw, 44px));
  }
  /* 沿革：2026-09-04 クライアントFB①「凡例にかぶらないようにしてほしい」。
     2026-08-17 の「ここは被っていい（ナビを最前面に）」から方針変更。
     横送りのレーンは常に左へ流れていくので、位置をずらすだけでは必ずナビの裏を通る。
     そこで【スクローラ(.cp-hscroll)の左端そのもの】を索引列の右に置き、
     写真も年号もそこで切り取られるようにする＝横送り中もナビには潜らない。
     トラックの左パディングは切り取り位置と重複するぶんだけ PC で詰める。 */
  #page-company .cp-hscroll { margin-left: var(--cp-navclear); }
  /* 右パディングは既定の clamp(24px,7vw,130px) のままだと、ピン終端（トラック右端＝レーン右端）で
     最終カードがレーン左端の外へ 1vw ぶん押し出されて頭が欠ける（実測 768px:7.6px 〜 1500px:15px。
     Fable検収 2026-09-04）。左右を同じ値に揃えて、カード幅(94vw−索引ぶん)に対して必ず余白が残るようにする。 */
  #page-company .cp-hscroll__track { padding-left: clamp(24px, 2.4vw, 44px); padding-right: clamp(24px, 2.4vw, 44px); }
  /* 索引ぶんレーンが狭くなるので、1枚のカード（写真＋本文）が必ずレーンに収まる幅にする。
     ワイド画面では従来どおり 1150px 上限のまま変わらない。 */
  #page-company .cp-hpick { width: min(1150px, calc(94vw - var(--cp-navclear))); }
  /* 企業理念（VALUE含む）・会社概要・拠点アクセス・組織図：
     中身は .cp-inner（max-width:1232px・margin:0 auto・左右pad clamp(20px,4vw,48px)）の中央寄せ。
     セクションに padding を足す方式だと、①中央寄せに半分吸収されて効きが читается半減し、
     ②MISSION の写真（内箱右端基準）まで右へ押し出されて見切れる。
     そこで内箱の margin-left 自体を「中央寄せ位置」と「ナビ右端＋24px」の大きい方にする。
     内箱の右端は viewport を超えないため、写真の断ち落とし量はデザイン時のまま変わらない。 */
  #page-company .cp-phil .cp-inner,
  #page-company .cp-profile .cp-inner,
  #page-company .cp-access .cp-inner,
  #page-company .cp-org .cp-inner {
    margin-left: max(
      calc((100% - 1232px) / 2),
      calc(clamp(16px, 6vw, 117px) + var(--pgnav-w) + 24px - clamp(20px, 4vw, 48px))
    );
  }
}

/* ══════════════════════════════════════════════════════════════
   NEWS SINGLE（お知らせ記事詳細 / single.php）接頭辞 nws-
   2026-08-18 新規。ヒーローは一覧（/news/）と同じ .ct-hero を流用し、
   ここでは「記事ヘッダー＋本文＋前後ナビ」だけを定義する。
   本文はブロックエディタの標準出力（段落/見出し/リスト/引用/画像/表/リンク）を
   サイトのフォント・色・行間に載せ替えるためのスタイル。
   ══════════════════════════════════════════════════════════════ */
.nws-body { background: var(--ecru, #f5f3ef); padding: clamp(48px, 5.6vw, 108px) clamp(20px, 4vw, 64px) clamp(72px, 8vw, 150px); }
.nws-wrap { width: 100%; max-width: 800px; margin: 0 auto; }

/* ── 記事ヘッダー ── */
.nws-head { padding-bottom: clamp(20px, 2vw, 34px); border-bottom: 1px solid rgba(26,26,26,.2); }
.nws-meta { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.nws-date {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(14px, 1.04vw, 18px); letter-spacing: .06em; line-height: 1; color: #1a1a1a;
}
.nws-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(84px, 5.765vw, 111px); min-height: 26px; padding: 0 12px;
  border: 1px solid rgba(26,26,26,.45);
}
.nws-tag__text {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(11px, .73vw, 13px); letter-spacing: .06em; line-height: 1; color: #1a1a1a; white-space: nowrap;
}
.nws-title {
  margin: clamp(16px, 1.6vw, 28px) 0 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 40px); line-height: 1.45; letter-spacing: .01em; color: #120E09;
}
.nws-thumb { margin: clamp(20px, 2.2vw, 36px) 0 0; }
.nws-thumb img { display: block; width: 100%; height: auto; }

/* ── 本文 ── */
.nws-content {
  margin-top: clamp(28px, 3vw, 48px);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(15px, 1.04vw, 17px); line-height: 1.95; letter-spacing: .02em; color: #221E19;
  overflow-wrap: anywhere;
}
.nws-content > *:first-child { margin-top: 0; }
.nws-content p { margin: 0 0 1.5em; }
.nws-content > *:last-child { margin-bottom: 0; }
.nws-content strong, .nws-content b { font-weight: 700; color: #120E09; }
.nws-content em { font-style: italic; }
.nws-content a {
  color: #C8A96E; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color .25s ease, text-decoration-color .25s ease;
}
.nws-content a:hover { color: #a8894e; }
.nws-content h2 {
  margin: 2.4em 0 .9em; padding-left: .7em; position: relative;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 1.6vw, 28px); line-height: 1.5; color: #120E09;
}
.nws-content h2::before {
  content: ""; position: absolute; left: 0; top: .22em; bottom: .22em; width: 4px; background: var(--gold, #C8A96E);
}
.nws-content h3 {
  margin: 2em 0 .8em;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(17px, 1.25vw, 22px); line-height: 1.55; color: #120E09;
}
.nws-content h4, .nws-content h5, .nws-content h6 {
  margin: 1.8em 0 .7em; font-family: var(--sans); font-weight: 700;
  font-size: clamp(15px, 1.04vw, 18px); line-height: 1.7; color: #120E09;
}
.nws-content ul, .nws-content ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.nws-content li { margin: 0 0 .55em; }
.nws-content ul li::marker { color: var(--gold, #C8A96E); }
.nws-content ol li::marker { color: var(--gold, #C8A96E); font-weight: 700; }
.nws-content blockquote {
  margin: 1.9em 0; padding: clamp(16px, 1.5vw, 24px) clamp(18px, 1.8vw, 30px);
  border-left: 3px solid var(--gold, #C8A96E); background: rgba(26,26,26,.04);
}
.nws-content blockquote p { margin-bottom: .9em; font-size: .96em; color: #3a352e; }
.nws-content blockquote p:last-child, .nws-content blockquote cite { margin-bottom: 0; }
.nws-content blockquote cite { display: block; margin-top: .4em; font-size: .85em; font-style: normal; color: rgba(26,26,26,.6); }
.nws-content img { max-width: 100%; height: auto; display: block; }
.nws-content figure { margin: 1.9em 0; }
.nws-content figure img { margin-inline: auto; }
.nws-content figcaption {
  margin-top: .7em; font-size: clamp(12px, .8vw, 13.5px); line-height: 1.8;
  color: rgba(26,26,26,.6); text-align: center;
}
.nws-content .aligncenter { margin-inline: auto; }
.nws-content .alignwide, .nws-content .alignfull { max-width: 100%; }
.nws-content hr { margin: 2.4em 0; border: 0; border-top: 1px solid rgba(26,26,26,.2); }
.nws-content table {
  width: 100%; margin: 1.9em 0; border-collapse: collapse;
  font-size: clamp(13px, .9vw, 15px); line-height: 1.8;
}
.nws-content th, .nws-content td { padding: .8em 1em; border: 1px solid rgba(26,26,26,.2); text-align: left; vertical-align: top; }
.nws-content th { background: rgba(26,26,26,.06); font-weight: 700; color: #120E09; }
.nws-content .wp-block-table { overflow-x: auto; }
.nws-content .wp-block-table table { margin: 0; }
.nws-content pre, .nws-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: rgba(26,26,26,.06);
}
.nws-content code { padding: .12em .4em; }
.nws-content pre { margin: 1.9em 0; padding: 1em 1.2em; overflow-x: auto; line-height: 1.7; }

/* ── 前後ナビ（左=前 / 中央=一覧へ戻る / 右=次） ── */
.nws-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(16px, 2vw, 36px);
  margin-top: clamp(48px, 5vw, 88px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid rgba(26,26,26,.2);
}
.nws-nav__side { min-width: 0; }
.nws-nav__side--next { text-align: right; }
.nws-nav__link { display: block; text-decoration: none; color: #1a1a1a; transition: opacity .3s ease, transform .3s ease; }
.nws-nav__link:hover { opacity: .62; }
.nws-nav__side--prev .nws-nav__link:hover { transform: translateX(-4px); }
.nws-nav__side--next .nws-nav__link:hover { transform: translateX(4px); }
.nws-nav__label {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(11px, .73vw, 13px); letter-spacing: .12em; line-height: 1; color: rgba(26,26,26,.6);
}
.nws-nav__arrow { font-size: 1.1em; line-height: 1; }
.nws-nav__ttl {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: .7em;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(13px, .95vw, 16px); line-height: 1.7; color: #1a1a1a;
  /* 日本語タイトルが「お知ら｜せ」のように語の途中で折れないよう文節で改行（対応ブラウザのみ。非対応は通常折返し） */
  word-break: auto-phrase; line-break: strict;
}
/* 「一覧へ戻る」：Contact帯のボタン（.ctb__btn）と同じ四隅マーカー様式。
   ただし地がエクリュなのでラベルは黒、枠は金のまま。 */
.nws-nav__center { text-align: center; }
.nws-backbtn { width: min(300px, 100%); min-height: clamp(52px, 3.6vw, 66px); padding: 0 clamp(18px, 2vw, 36px); }
.nws-backbtn .ctb__btn-label { color: #120E09; font-size: clamp(13px, 1vw, 16px); }
.nws-backbtn:hover .ctb__btn-label { color: #120E09; }
.nws-empty { font-family: var(--sans); font-size: 15px; color: rgba(26,26,26,.6); text-align: center; padding: 48px 0; }

@media (max-width: 860px) {
  .nws-nav { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .nws-nav__center { grid-column: 1 / -1; order: 3; margin-top: 8px; }
  .nws-backbtn { width: 100%; }
  .nws-content h2 { margin-top: 2em; }
}
@media (max-width: 480px) {
  .nws-meta { flex-wrap: wrap; gap: 10px 14px; }
  .nws-nav__ttl { -webkit-line-clamp: 3; }
}

/* ═══ ページ上部へ戻る（右下追従） ═══
   1画面分スクロールしたら現れる。Contact帯のボタンと同じ「黒地＋金の枠」様式。 */
.totop {
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 450;
  width: 72px; height: 72px; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(8,7,6,.88); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--serif); font-size: 13px; letter-spacing: .14em; line-height: 1;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s, background .3s ease, color .3s ease;
}
.totop.is-show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop__arrow { width: 13px; height: 13px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: rotate(45deg); margin-top: 4px; }
.totop:hover { background: var(--gold); color: #120E09; border-color: var(--gold); }
.totop:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
@media (max-width: 767px) {
  .totop { width: 58px; height: 58px; font-size: 11px; }
  .totop__arrow { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .totop { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   正式ロゴ（2026-09-11 支給。白一色の透過PNG → assets/images/logo-type.webp / logo-symbol.webp）
   ヘッダー・フッター＝タイプ付／ハンバーガー内＝シンボルのみ。
   仮置きの白い箱に白いロゴを置くと消えるので、箱は透明にして画像だけを出す（画像は箱の幅いっぱい）。
   大きさ：同日の本人指示「もう一回り大きく」で、仮ロゴの箱の幅から各1.2倍にした（旧値はコメント）。
   箱の最小高さは据え置き（どの画面幅でもロゴの高さは最小高さ未満）＝ヘッダーのバーの高さは変わらない。
   ═══════════════════════════════════════════════════════════ */
#global-nav.gnav .gnav__logo,
#global-nav.gnav.scrolled .gnav__logo { background: transparent; padding: 0; }
#global-nav.gnav .gnav__logo { width: clamp(178px, 15vw, 288px); }             /* 旧 clamp(148px, 12.5vw, 240px) */
#global-nav.gnav.scrolled .gnav__logo { width: clamp(158px, 13.2vw, 252px); }   /* 旧 clamp(132px, 11vw, 210px) */
@media (max-width: 767px) {
  #global-nav.gnav .gnav__logo,
  #global-nav.gnav.scrolled .gnav__logo { width: clamp(139px, 39.6vw, 180px); } /* 旧 clamp(116px, 33vw, 150px) */
}
#global-nav.gnav .gnav__logo-img { display: block; width: 100%; height: auto; }

/* フッター：白い箱（仮ロゴ）＋英字ワードマーク → タイプ付ロゴ1つ */
.ft-brand__logo { display: block; width: clamp(288px, 34.8vw, 672px); height: auto; }   /* 旧 clamp(240px, 29vw, 560px) */
@media (max-width: 1100px) {
  /* ここから上段が縦並び＝ロゴが1行を独占する。はみ出さないよう、行の幅で頭打ちにする */
  .ft-brand { display: flex; width: 100%; }
  .ft-brand__logo { width: min(100%, clamp(288px, 34.8vw, 672px)); }
}
@media (max-width: 640px) {
  .ft-brand__logo { width: min(100%, 432px); }                                          /* 旧 min(82vw, 360px) */
}
.footer-logo__img { display: block; width: 216px; height: auto; }                        /* 旧 180px（mini版・現在未使用） */

/* ハンバーガー内：シンボルのみ */
#sp-menu.dmenu .dmenu__logo { background: transparent; padding: 0; width: clamp(115px, 11.64vw, 223px); }  /* 旧 clamp(96px, 9.698vw, 186.2px) */
#sp-menu.dmenu .dmenu__logo-img { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
   「一瞬」だけ金色（2026-09-11 本人指示）
   トップの金の見出し（FV右下「私たちが止まれば、世界もまた一瞬止まる。」）は文字を白にして「一瞬」だけ金色。
   本文中の「一瞬」（トップ「これからも世界の一瞬を…」・私たちについて MISSION）も金色。
   「一瞬」を <em class="gold-word"> で囲むのは PHP の sbs_gold_word()（inc/acf-helpers.php）。
   見出し行は管理画面の「金色で表示」がオンの行（＝大きい文字の見出し）。文字サイズは従来どおり。
   ═══════════════════════════════════════════════════════════ */
.fv-about-right .asl--gold .asl__in { color: #F5F3EF; }
.gold-word { color: var(--gold); font-style: normal; }

/* ハンバーガー内ロゴの位置（2026-09-11 本人指示「ロゴをここに移動」）：
   左端をサイトマップの列（.dmenu__inner の左padding）にそろえる。縦位置・大きさは据え置き。 */
#sp-menu.dmenu .dmenu__logo { left: clamp(16px, 14.167vw, 272px); }   /* 旧 clamp(16px, 5.833vw, 112px) */
@media (max-width: 1024px) {
  #sp-menu.dmenu .dmenu__logo { left: 7vw; }                          /* 1024px以下は .dmenu__inner の左右padding が 7vw */
}

/* ═══════════════════════════════════════════════════════════
   FV右下の文章を少し大きく（2026-09-11 本人指示）
   「あと一回り大きく」で1.2倍 →「ちょっとでかすぎる。元と今の中間ぐらい」で 1.1倍 に確定。
   PC（769px以上）だけ、文字サイズと行送りを元の1.1倍にした（元の値はコメント）。
   スマホ（768px以下）は参考サイトと同じ大きさ・1行16文字まで・1画面に収まる調整済みなので据え置き。
   文字を大きくしても本文の改行位置（いちばん長い22文字の行が1行に収まる）を保つため、
   枠の幅を min(58vw,760px) → min(62vw,830px) に広げた。右の余白 6.4vw は据え置き
   （詰めると最長行の末尾が右下固定の「TOP」ボタンの下に潜る）。
   枠が左へ広がるぶん、タイトルのロック時の縮小率（front-page.php：(枠の左端 − 24) ÷ タイトルの右端、0.42〜0.75）は少し小さくなる。
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .fv-about-right { width: min(62vw, 830px); }                                                    /* 元 min(58vw,760px) */
  .fv-about-right .asl--gold .asl__in { font-size: clamp(36.3px, 3.905vw, 55px); line-height: 79px; }     /* 元 clamp(33px,3.55vw,50px) / 72px */
  .fv-about-right .asl--white .asl__in,
  .fv-about-right .asl--gold.asl--w .asl__in { font-size: clamp(24.2px, 2.585vw, 36.3px); line-height: 84px; }  /* 元 clamp(22px,2.35vw,33px) / 76px */
}


/* ═══════════════════════════════════════════════════════════
   ヘッダーの工程管理システムREPROボタン（2026-11-04 本人指示・11-05 中西さんと相談してバナー画像からボタンに）
   「今の CONTACT のデザインで、金ではなく白で、小さい字で工程管理システム、少し大きく REPRO。
     文字の大小のバランスは今のサイトのバナーのまま」
   枠・四隅（frame-btn）・高さ・書体は .gnav__contact と同じ。色だけ白。ナビと CONTACT の間に置く。
   CONTACT との間は .gnav__right の gap より詰める（負のマージンで差分を打ち消す）。
   1101〜1219px はナビと CONTACT の間に入らない（1101px で空きが 111px）ので出さない。
   スマホ（767px 以下）は CONTACT と同じく出さない。
   ═══════════════════════════════════════════════════════════ */
#global-nav.gnav .gnav__repro {
  --fb-accent: #fff; --fb-accent-hover: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: clamp(148px, 10.94vw, 210px);
  height: clamp(32px, 2.188vw, 42px);               /* .gnav__contact と同じ */
  margin-right: calc(clamp(12px, 1.4vw, 26px) - clamp(14px, 2.6vw, 50px));
  padding: 0;
  border: 1.5px solid color-mix(in srgb, #fff 40%, transparent);
  background: transparent;
  font-family: "FOT-TsukuMin Pr5N", var(--serif);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: color .25s, background .3s ease, border-color .3s ease, opacity .35s ease, transform .45s cubic-bezier(.43,.05,.17,1);
}
#global-nav.gnav .gnav__repro:hover {
  background: color-mix(in srgb, #fff 14%, transparent);
  border-color: color-mix(in srgb, #fff 70%, transparent);
}
#global-nav.gnav .gnav__repro-ja { font-size: clamp(9px, .6vw, 11.5px); letter-spacing: 0; }
#global-nav.gnav .gnav__repro-en { font-size: clamp(16px, 1.25vw, 24px); letter-spacing: .04em; margin-left: .25em; }
#global-nav.gnav.is-hidden .gnav__repro { opacity: 0; transform: translateY(-24px); pointer-events: none; }
#global-nav.gnav.show .gnav__repro { animation: gnavDrop .65s cubic-bezier(.16,1,.3,1) backwards .42s; }
@media (prefers-reduced-motion: reduce) {
  #global-nav.gnav .gnav__repro { transition: opacity .2s linear; }
  #global-nav.gnav.show .gnav__repro { animation: none; }
}
@media (min-width: 1101px) and (max-width: 1219px) {
  #global-nav.gnav .gnav__repro { display: none; }
}
@media (max-width: 767px) {
  #global-nav.gnav .gnav__repro { display: none; }
}