/* =====================================================================
   木暮建築工房 KOGURE CRAFT HOUSE — 共通スタイル
   配色: アースカラー（生成り / 墨 / 木肌テラコッタ）
   タイポ: 和文=明朝系 / 欧文小見出し=セリフ。Webフォント不可でも崩れない。
   ===================================================================== */

/* ---- Web フォント（読込失敗してもフォールバックで崩れない） ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Shippori+Mincho:wght@400;500;600;700&display=swap');

/* ---- デザイントークン ---- */
:root{
  /* ベース: 生成り / オフホワイト */
  --c-base:        #F5F1EA;
  --c-base-deep:   #EDE6D8;
  --c-paper:       #FBF9F4;
  /* 文字: 墨 / チャコール */
  --c-ink:         #2B2925;
  --c-ink-soft:    #5B554C;
  --c-ink-mute:    #8C8576;
  /* アクセント: 木肌 / テラコッタ */
  --c-wood:        #9C7C5B;
  --c-wood-deep:   #7E6043;
  --c-wood-soft:   #C8A77E;
  /* 線 */
  --c-line:        #DDD4C2;
  --c-line-soft:   #E7E0D1;
  /* ヒーロー転換用ダークブラウン（参考トーン踏襲・アースカラー） */
  --c-brown-deep:  #241E14;

  --ff-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
           "Yu Mincho", "YuMincho", "BIZ UDPMincho", "Noto Serif JP",
           "MS PMincho", serif;
  --ff-en: "Cormorant Garamond", "Times New Roman", "Hiragino Mincho ProN", serif;

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

  --sp-section: clamp(72px, 11vw, 144px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;

  --shadow-sm: 0 2px 10px rgba(43,41,37,.05);
  --shadow-md: 0 18px 48px -22px rgba(43,41,37,.32);
}

/* ---- リセット ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  /* 横はみ出し抑止は .hero 側の overflow:clip で行う（html を clip 化
     すると施工事例の position:sticky 演出が壊れるため html には付けない）。 */
}
body{
  font-family:var(--ff-jp);
  background:var(--c-base);
  color:var(--c-ink);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--c-wood-deep); outline-offset:3px; }

/* ---- レイアウト ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); }
.section--paper{ background:var(--c-paper); }
.section--ink{ background:var(--c-ink); color:var(--c-base); }

/* ---- タイポグラフィ ---- */
.eyebrow{
  font-family:var(--ff-en);
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--c-wood-deep);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--c-wood);
}
.section--ink .eyebrow{ color:var(--c-wood-soft); }
.section--ink .eyebrow::before{ background:var(--c-wood-soft); }

.s-title{
  font-size:clamp(1.7rem, 1.1rem + 2.6vw, 2.85rem);
  font-weight:600;
  line-height:1.45;
  letter-spacing:.04em;
  margin-top:.7em;
}
.s-lead{
  color:var(--c-ink-soft);
  max-width:60ch;
  margin-top:1.5em;
  font-size:1.02rem;
}
.section--ink .s-lead{ color:#D8D1C2; }

.s-head{ margin-bottom:clamp(40px,6vw,72px); }
.s-head--center{ text-align:center; }
.s-head--center .eyebrow{ justify-content:center; }
.s-head--center .s-lead{ margin-inline:auto; }

/* ---- ボタン ---- */
.btn{
  --bg:var(--c-ink); --fg:var(--c-base); --bd:var(--c-ink);
  display:inline-flex; align-items:center; gap:.85em;
  min-height:54px;
  padding:0 2.2em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font-size:.92rem; letter-spacing:.14em;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn .ar{ transition:transform var(--dur) var(--ease); }
.btn:hover{ --bg:var(--c-wood-deep); --bd:var(--c-wood-deep); }
.btn:hover .ar{ transform:translateX(5px); }
.btn--ghost{ --bg:transparent; --fg:var(--c-ink); --bd:var(--c-line); }
.btn--ghost:hover{ --bg:var(--c-ink); --fg:var(--c-base); --bd:var(--c-ink); }
.btn--light{ --bg:var(--c-base); --fg:var(--c-ink); --bd:var(--c-base); }
.btn--light:hover{ --bg:var(--c-wood-soft); --fg:var(--c-ink); --bd:var(--c-wood-soft); }
.btn--lg{ min-height:62px; padding-inline:2.8em; }

.txt-link{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.92rem; letter-spacing:.12em;
  color:var(--c-wood-deep);
  padding-block:.4em;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.txt-link:hover{ border-color:var(--c-wood); gap:1.05em; }
.section--ink .txt-link{ color:var(--c-wood-soft); }

/* ---- プレースホルダ画像システム（F-12） ----
   .ph で <img>（ローカル ph.svg）を内包し、CSS で用途/寸法ラベルを重畳。
   data-label / data-dim をオーバーレイ表示。外部ネットワーク非依存。 */
.ph{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--c-base-deep);
  aspect-ratio:16/9;             /* 既定比。.ph[style] で個別上書き可 */
  border:1px solid var(--c-line);
}
.ph > img{
  width:100%; height:100%;
  object-fit:cover;
}
.ph::after{
  content:attr(data-label) " · " attr(data-dim);
  position:absolute; inset:auto 0 0 0;
  margin:auto;
  width:max-content; max-width:90%;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  padding:.5em 1.2em;
  font-family:var(--ff-en);
  font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-ink-soft);
  background:rgba(251,249,244,.78);
  border:1px solid var(--c-line);
  white-space:nowrap;
  pointer-events:none;
}
.ph[data-dim=""]::after,
.ph:not([data-label])::after{ content:none; }

/* =====================================================================
   ヘッダー / グローバルナビ（F-01）
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(245,241,234,.92);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--c-line-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  min-height:78px;
}
.brand{ display:flex; align-items:center; gap:14px; line-height:1.15; }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand__jp{ font-size:1.16rem; font-weight:700; letter-spacing:.08em; }
.brand__en{
  display:block;
  font-family:var(--ff-en);
  font-size:.62rem; letter-spacing:.34em;
  color:var(--c-ink-mute);
  text-transform:uppercase;
  margin-top:.25em;
}

.gnav{ display:flex; align-items:center; gap:clamp(22px,2.4vw,38px); }
.gnav__list{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.gnav__link{
  position:relative;
  font-size:.9rem; letter-spacing:.1em;
  padding:.5em 0;
  color:var(--c-ink-soft);
  transition:color var(--dur) var(--ease);
}
.gnav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--c-wood-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.gnav__link:hover{ color:var(--c-ink); }
.gnav__link:hover::after,
.gnav__link[aria-current="page"]::after{ transform:scaleX(1); }
.gnav__link[aria-current="page"]{ color:var(--c-ink); font-weight:600; }

.gnav__cta{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 1.5em;
  background:var(--c-ink); color:var(--c-base);
  font-size:.85rem; letter-spacing:.12em;
  border:1px solid var(--c-ink);
  transition:background var(--dur) var(--ease);
}
.gnav__cta:hover{ background:var(--c-wood-deep); border-color:var(--c-wood-deep); }
.gnav__ig{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--c-line);
  color:var(--c-ink-soft);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gnav__ig:hover{ background:var(--c-ink); color:var(--c-base); }
.gnav__ig svg{ width:18px; height:18px; }

.nav-toggle{
  display:none;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  border:1px solid var(--c-line);
}
.nav-toggle__bars{ position:relative; width:20px; height:14px; }
.nav-toggle__bars span{
  position:absolute; left:0; right:0; height:1.5px;
  background:var(--c-ink);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars span:nth-child(1){ top:0; }
.nav-toggle__bars span:nth-child(2){ top:6px; }
.nav-toggle__bars span:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1023px){
  .nav-toggle{ display:flex; }
  .gnav{
    position:fixed; inset:78px 0 0 0;
    background:var(--c-base);
    flex-direction:column;
    gap:0;                 /* ドロワーは margin-top で間隔調整（二重余白防止） */
    padding:40px var(--gutter) 56px;
    overflow-y:auto;
    /* 閉時は X 方向に押し出さず（横スクロール防止）、不透明度＋可視性で隠す */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
  }
  .gnav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s;
  }
  .gnav__list{
    flex-direction:column; align-items:stretch;
    gap:0; width:100%;
  }
  .gnav__list > li{ border-bottom:1px solid var(--c-line-soft); }
  .gnav__link{
    display:block; padding:1.15em 0; font-size:1.05rem;
  }
  .gnav__link::after{ display:none; }
  .gnav__cta,
  .gnav__ig{ width:100%; margin-top:22px; }
  .gnav__ig{ gap:.8em; }
  .gnav__ig::after{ content:"Instagram"; font-size:.9rem; letter-spacing:.14em; }
}

/* =====================================================================
   フッター（F-01）
   ===================================================================== */
.site-footer{ background:var(--c-ink); color:#D6CFC0; }
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(36px,6vw,72px);
  padding-block:clamp(56px,8vw,96px);
}
.footer-brand__jp{
  font-size:1.3rem; font-weight:700; letter-spacing:.08em; color:var(--c-base);
}
.footer-brand__en{
  font-family:var(--ff-en);
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--c-wood-soft); margin-top:.5em;
}
.footer-info{ margin-top:26px; font-size:.92rem; line-height:2.1; }
.footer-info dt{
  font-family:var(--ff-en); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-ink-mute); margin-top:1em;
}
.footer-info dt:first-child{ margin-top:0; }
.footer-info dd{ color:#D6CFC0; }
.footer-info a:hover{ color:var(--c-wood-soft); }

.footer-col__title{
  font-family:var(--ff-en);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--c-wood-soft);
  padding-bottom:1.1em;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:1.1em;
}
.footer-col li{ margin-bottom:.5em; }
.footer-col a{
  font-size:.93rem; color:#CFC8B9;
  transition:color var(--dur) var(--ease);
}
.footer-col a:hover{ color:var(--c-base); }
.footer-ig{
  display:inline-flex; align-items:center; gap:.7em;
  margin-top:1.4em; color:var(--c-wood-soft); font-size:.9rem; letter-spacing:.06em;
}
.footer-ig svg{ width:18px; height:18px; }
.footer-ig:hover{ color:var(--c-base); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:26px;
  display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center; justify-content:space-between;
}
.footer-bottom small{
  font-family:var(--ff-en);
  font-size:.74rem; letter-spacing:.18em; color:var(--c-ink-mute);
}
.footer-bottom .license{ font-size:.8rem; color:var(--c-ink-mute); }

@media (max-width:899px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:599px){
  .footer-top{ grid-template-columns:1fr; }
}

/* =====================================================================
   トップページ セクション（F-02）
   ===================================================================== */

/* ---- 1. Hero（クラシック・エディトリアル / 参考: 3jigen.jp 踏襲） ----
   明るい生成り地・大胆な特大明朝・余白主導。写真は全画面背景ではなく
   “額装された一葉”として中央に据え、細い縦線で見出しと繋ぐ。
   静的（非cine/JS無効/WebGL不可/reduced-motion）でも完成した版面。 */
.hero{
  position:relative; isolation:isolate;
  background:var(--c-paper); color:var(--c-ink);
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  padding:clamp(132px,17vh,200px) var(--gutter) clamp(56px,8vh,96px);
  /* 拡大写真は確保した余白内に必ず収まる（下端まで見える）。ここで
     clip＝画面外へのはみ出しを切り、横スクロールバーを出さない。
     施工事例の sticky 演出は別セクションなので影響しない（共通D）。 */
  overflow:clip;
}
/* cine では写真が画面を超えて拡大する。その下方への伸び分を確保し、
   次セクション(Concept)が写真の下に重ならない＝写真は最後まで見える。
   この余白は背後の .hero::after でブラウンに変わり余白として残らない。 */
html.cine .hero{ padding-bottom:clamp(380px, 58vh, 760px); }
/* 拡大写真の“背後”を生成り→ブラウンに変える地。写真より後ろ(z-index:0)
   なので写真は常に前面で見える。拡大量(--fig-s)に連れて立ち上がり、
   写真の周囲・下の余白を消してブラウンへ連続させる（写真は隠さない）。
   既定（非cine）は不可視＝クリーンな静的版面。 */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--c-brown-deep);
  opacity:0; pointer-events:none;
}
html.cine .hero::after{ opacity:var(--hero-cv,0); }
.hero__inner{
  position:relative; z-index:1;   /* 転換帯(.hero__fade)より前面 */
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; max-width:1180px;
}
.hero .eyebrow{
  color:var(--c-ink-mute);
  font-size:clamp(.66rem,.62rem + .2vw,.78rem);
  letter-spacing:.42em;
}
.eyebrow--center{ justify-content:center; gap:1.1em; }
.eyebrow--center::before,
.eyebrow--center::after{
  content:""; width:clamp(24px,5vw,52px); height:1px;
  background:var(--c-line);
}
.hero__title{
  font-family:var(--ff-jp);
  font-size:clamp(2.7rem, .4rem + 9vw, 6.4rem);
  font-weight:600; line-height:1.22;
  letter-spacing:.08em; color:var(--c-ink);
  margin-top:clamp(22px,3.4vw,40px);
}
.hero__lead{
  display:flex; flex-direction:column; align-items:center; gap:.7em;
  margin-top:clamp(22px,3vw,34px);
}
.hero__lead-en{
  font-family:var(--ff-en); font-style:italic;
  font-size:clamp(1.02rem,.9rem + .55vw,1.4rem);
  letter-spacing:.12em; color:var(--c-ink-soft);
}
/* 写真を文字に流し込む“image in text”アクセント（参考踏襲）。
   非対応環境は木肌色のベタ＝可読性確保（プログレッシブ）。 */
.hero__clip{
  font-family:var(--ff-jp);
  font-size:clamp(.82rem,.78rem + .24vw,1rem);
  font-weight:600; letter-spacing:.34em; color:var(--c-wood-deep);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__clip{
    background-image:url(../img/hero.jpg);
    background-size:cover; background-position:center 40%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.hero__line{
  display:block; width:1px;
  height:clamp(46px,8vh,104px);
  margin:clamp(26px,4vh,52px) 0 0;
  overflow:hidden;
}
.hero__line i{
  display:block; width:100%; height:100%;
  background:linear-gradient(180deg, var(--c-line) 0%, var(--c-wood-soft) 100%);
  transform-origin:top;
}
.hero__figure{
  position:relative; isolation:isolate;
  width:100%; max-width:min(1080px, 94vw);
  margin-top:clamp(26px,4vh,52px);
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--c-base-deep);
  box-shadow:0 40px 90px -48px rgba(43,41,37,.5);
}
.hero__figure .ph{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.hero__figure .ph > img{ width:100%; height:100%; object-fit:cover; }
.hero__figure .ph::after{ color:rgba(43,41,37,.5); background:var(--c-base-deep); border-color:var(--c-line); }
/* 写真の下側はマスクでソフトにフェード（cine の html.cine .hero__figure
   側で実装）。背後のダークブラウン(.hero::after)が透けて写真が
   溶けるように消える。静止時はフェード無し＝クリーンな額装。 */
/* ヒーロー直後の転換帯: ダークブラウンへ移行し、そのまま Concept
   セクション（ダークブラウン地）へ“飲み込む”ように連結する。
   非cine/JS無効/reduced-motion: 生成り→ブラウンの短い静的グラデーション
   （ヒーロー paper から Concept brown へ段差なく接続・共通F）。
   cine: 拡大写真の下端シームが溶け込み、最後は完全ブラウンで Concept へ。 */
.hero-bridge{
  height:clamp(120px, 18vh, 220px);
  background:linear-gradient(180deg,
    var(--c-paper) 0%,
    var(--c-base) 30%,
    var(--c-brown-deep) 100%);
}
/* cine では .hero::after が hero 内で完全にブラウンへ飲み込むため、
   追加の転換帯は不要＝Concept 直前の余白を作らない。 */
html.cine .hero-bridge{ height:0; background:none; }

/* Concept セクションをダークブラウンで飲み込む（参考トーン踏襲）。
   文字・罫・アクセントを地に映える生成り／木肌へ反転（可読性確保）。
   上余白は詰める（写真がブラウンに飲まれた直後に内容が始まる）。 */
#concept{
  background:var(--c-brown-deep); color:var(--c-base);
  padding-top:clamp(44px, 6vh, 80px);
}
#concept .eyebrow{ color:var(--c-wood-soft); }
#concept .eyebrow::before{ background:var(--c-wood-soft); }
#concept .s-lead{ color:#D8D1C2; }
#concept .concept-card__no{ color:var(--c-wood-soft); }
#concept .concept-card__en{ color:#B8AF9C; }
#concept .concept-card__text{ color:#D8D1C2; }
#concept .ph{ background:rgba(245,241,234,.05); }

/* Concept 退出側の転換帯: ブラウン → 生成りへ戻し、次セクション
   （Service・生成り地）へ自然に接続。全モード共通の色シーム。 */
.section-bridge{
  height:clamp(150px, 22vh, 280px);
  background:linear-gradient(180deg,
    var(--c-brown-deep) 0%,
    var(--c-base) 74%,
    var(--c-paper) 100%);
}

/* ---- 2. Concept ---- */
.concept__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,52px);
}
.concept-card .ph{ aspect-ratio:4/5; }
.concept-card__no{
  font-family:var(--ff-en); font-size:.78rem; letter-spacing:.24em;
  color:var(--c-wood-deep); margin-top:1.5em;
}
.concept-card__title{
  font-size:1.32rem; font-weight:600; letter-spacing:.06em; margin-top:.5em;
}
.concept-card__en{
  font-family:var(--ff-en); font-style:italic; color:var(--c-ink-mute);
  font-size:.92rem; margin-top:.2em;
}
.concept-card__text{ color:var(--c-ink-soft); font-size:.96rem; margin-top:1em; }

/* ---- 3. Service ---- */
.service__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.5vw,32px);
}
.service-card{
  display:flex; flex-direction:column;
  background:var(--c-base);
  border:1px solid var(--c-line);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.service-card .ph{ aspect-ratio:3/2; border:0; border-bottom:1px solid var(--c-line); }
.service-card__body{ padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; flex:1; }
.service-card__no{
  font-family:var(--ff-en); font-size:.72rem; letter-spacing:.26em;
  color:var(--c-wood-deep);
}
.service-card__title{ font-size:1.3rem; font-weight:600; margin-top:.6em; letter-spacing:.04em; }
.service-card__en{ font-family:var(--ff-en); font-style:italic; color:var(--c-ink-mute); font-size:.88rem; margin-top:.2em; }
.service-card__text{ color:var(--c-ink-soft); font-size:.94rem; margin-top:1.1em; flex:1; }
.service-card .txt-link{ margin-top:1.6em; }

/* ---- 4. Works ---- */
.works__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,40px);
}
.work-card{ display:block; }
.work-card .ph{ aspect-ratio:4/3; }
.work-card .ph > img{ transition:transform 700ms var(--ease); }
.work-card:hover .ph > img{ transform:scale(1.05); }
.work-card__meta{ display:flex; align-items:baseline; gap:14px; margin-top:1.3em; flex-wrap:wrap; }
.work-card__cat{
  font-family:var(--ff-en); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--c-base);
  background:var(--c-wood-deep); padding:.4em 1em;
}
.work-card__loc{ font-size:.84rem; color:var(--c-ink-mute); letter-spacing:.08em; }
.work-card__title{
  font-size:1.24rem; font-weight:600; margin-top:.55em; letter-spacing:.04em;
  transition:color var(--dur) var(--ease);
}
.work-card:hover .work-card__title{ color:var(--c-wood-deep); }
.works__more{ text-align:center; margin-top:clamp(44px,6vw,68px); }

/* ---- 5. Flow ---- */
/* タイムライン図解: ノード中心を貫く連続ライン＋番号入り丸ノード。 */
.flow__grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.6vw,22px);
  counter-reset:flow;
  position:relative;
  --flow-node:clamp(48px,4.4vw,58px);
}
/* 基準線（静的トラック）＋進行ライン。既定＝完成（全モード共通）。 */
.flow__grid::before,
.flow__grid::after{
  content:""; position:absolute;
  left:10%; right:10%;
  top:calc(var(--flow-node) / 2 - 1px);
  height:2px; border-radius:2px;
  pointer-events:none;
}
.flow__grid::before,
.flow__grid::after{ z-index:0; }                 /* 線は最背面レイヤー */
.flow__grid::before{ background:var(--c-line); }
.flow__grid::after{
  background:var(--c-wood-deep);
  transform:scaleX(1); transform-origin:left center;
}
/* z-index:1: .reveal の will-change が .flow-step にスタッキング
   コンテキストを作るため、ステップ自体を線(::after)より前面に固定。
   これが無いと連続線がノード番号の上に被る。 */
.flow-step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
/* 番号入り丸ノード。既定＝点灯（非cine/JS無効/reduced は最初から完成）。 */
.flow-step::before{
  counter-increment:flow;
  content:"0" counter(flow);
  width:var(--flow-node); height:var(--flow-node);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-family:var(--ff-en); font-size:1.45rem; font-weight:500; line-height:1;
  color:var(--c-base);
  background:var(--c-wood-deep);
  border:1px solid var(--c-wood-deep);
  position:relative; z-index:1;
  transition:background-color 460ms var(--ease-cine),
             color 460ms var(--ease-cine),
             border-color 460ms var(--ease-cine),
             transform 460ms var(--ease-cine);
}
.flow-step__title{ font-size:1.08rem; font-weight:600; margin-top:1.1em; letter-spacing:.04em; }
.flow-step__text{ font-size:.88rem; color:var(--c-ink-soft); margin-top:.6em; }
.flow__more{ margin-top:clamp(44px,6vw,64px); }

/* cine: 進行ラインが左→右へ伸び、通過した丸ノードが順に点灯。
   トリガは既存 [data-stagger]→.is-in 機構（JS追加なし）。 */
html.cine .flow__grid::after{
  transform:scaleX(0);
  /* 一定速度の“描かれていく”線。spatial=temporal なのでノード点灯と
     正確に同期する（--ease-cine は前のめりで線が先行してしまう）。 */
  transition:transform 1500ms linear;
}
html.cine .flow__grid.is-in::after{ transform:scaleX(1); }
html.cine .flow-step::before{
  background:transparent; color:var(--c-wood-soft);
  border-color:var(--c-line); transform:scale(.92);
}
html.cine .flow__grid.is-in .flow-step::before{
  background:var(--c-wood-deep); color:var(--c-base);
  border-color:var(--c-wood-deep); transform:scale(1);
}
/* 線は 1500ms 等速で 5 ノード間（区間4分割）を進む＝375ms/区間。
   各ノードは線の先端が到達した直後（+約60ms）に点灯。 */
html.cine .flow__grid.is-in .flow-step:nth-child(1)::before{ transition-delay:60ms; }
html.cine .flow__grid.is-in .flow-step:nth-child(2)::before{ transition-delay:435ms; }
html.cine .flow__grid.is-in .flow-step:nth-child(3)::before{ transition-delay:810ms; }
html.cine .flow__grid.is-in .flow-step:nth-child(4)::before{ transition-delay:1185ms; }
html.cine .flow__grid.is-in .flow-step:nth-child(5)::before{ transition-delay:1500ms; }
@media (prefers-reduced-motion:reduce){
  html.cine .flow__grid::after{ transform:scaleX(1) !important; transition:none !important; }
  html.cine .flow-step::before,
  html.cine .flow__grid.is-in .flow-step::before{
    background:var(--c-wood-deep) !important; color:var(--c-base) !important;
    border-color:var(--c-wood-deep) !important; transform:none !important;
    transition:none !important;
  }
}

/* ---- 6. News ---- */
.news__layout{ display:grid; grid-template-columns:1fr 2.4fr; gap:clamp(36px,6vw,80px); align-items:start; }
.news__list{ border-top:1px solid var(--c-line); }
.news-item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 26px;
  padding:1.7em 0; border-bottom:1px solid var(--c-line);
  transition:padding-left var(--dur) var(--ease);
}
.news-item:hover{ padding-left:10px; }
.news-item__date{
  font-family:var(--ff-en); font-size:.86rem; letter-spacing:.12em; color:var(--c-ink-mute);
}
.news-item__cat{
  font-size:.72rem; letter-spacing:.14em; color:var(--c-wood-deep);
  border:1px solid var(--c-line); padding:.3em .9em;
}
.news-item__title{ flex:1 1 100%; font-size:1.04rem; color:var(--c-ink); }
@media (min-width:768px){ .news-item__title{ flex:1; } }

/* ---- 7. Company ---- */
.company__layout{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.company__media .ph{ aspect-ratio:4/3; }
.company__table{ width:100%; border-collapse:collapse; margin-top:8px; }
.company__table th,
.company__table td{
  text-align:left; padding:1.05em 0; border-bottom:1px solid var(--c-line);
  font-size:.96rem; vertical-align:top;
}
.company__table th{
  width:34%; color:var(--c-ink-soft); font-weight:600;
  font-family:var(--ff-en); letter-spacing:.06em;
}
.company__table td{ color:var(--c-ink); }
.company__more{ margin-top:2.4em; }

/* ---- 8. Contact CTA ---- */
.cta__inner{ text-align:center; max-width:760px; margin-inline:auto; }
.cta__title{
  font-size:clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
  font-weight:600; line-height:1.5; letter-spacing:.05em; margin-top:.5em;
}
.cta__text{ color:#D8D1C2; margin-top:1.4em; font-size:1.02rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:42px; }
.cta__tel{
  display:inline-flex; flex-direction:column; align-items:center; gap:.3em;
  margin-top:40px;
}
.cta__tel-label{
  font-family:var(--ff-en); font-size:.7rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--c-wood-soft);
}
.cta__tel-num{ font-family:var(--ff-en); font-size:clamp(1.8rem,1.2rem+2vw,2.6rem); letter-spacing:.06em; color:var(--c-base); }
.cta__tel-note{ font-size:.86rem; color:#B6AF9F; }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width:1023px){
  .news__layout,
  .company__layout{ grid-template-columns:1fr; }
  .flow__grid{ grid-template-columns:repeat(2,1fr); gap:36px 22px; }
  /* 2列/1列では水平の連続ラインは成立しないため非表示（従来踏襲）。
     丸ノードはそのまま縦積みのステップ標識として機能。 */
  .flow__grid::before,
  .flow__grid::after{ display:none; }
}
@media (max-width:899px){
  .concept__grid,
  .service__grid{ grid-template-columns:1fr; gap:36px; }
  .service-card{ max-width:560px; }
}
@media (max-width:639px){
  .works__grid{ grid-template-columns:1fr; }
  .flow__grid{ grid-template-columns:1fr; }
  .hero{ padding-top:clamp(116px,20vh,160px); }
  .hero__figure{ aspect-ratio:4/5; max-width:100%; }
}

/* ---- スクロールフェードイン（演出無効でも全要素表示: F-15 配慮） ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal,
.reveal--off{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =====================================================================
   下層ページ共通: ページヘッダー / パンくず（Sprint 2: F-04〜F-08）
   既存トークン・トーンを踏襲。新しい流儀は導入しない。
   ===================================================================== */
.page-header{
  background:var(--c-ink); color:var(--c-base);
  padding-block:clamp(56px,9vw,116px) clamp(48px,7vw,88px);
  position:relative; isolation:isolate;
}
.page-header__inner{ max-width:920px; }
.page-header .eyebrow{ color:var(--c-wood-soft); }
.page-header .eyebrow::before{ background:var(--c-wood-soft); }
.page-header__title{
  font-size:clamp(2rem, 1.3rem + 3.4vw, 3.4rem);
  font-weight:600; line-height:1.4; letter-spacing:.05em;
  margin-top:.55em;
}
.page-header__lead{
  color:#D8D1C2; max-width:62ch; margin-top:1.4em; font-size:1.02rem;
}

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.2em .85em;
  font-family:var(--ff-en); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-ink-mute);
}
.crumbs li{ display:flex; align-items:center; gap:.85em; }
.crumbs li + li::before{ content:"/"; color:var(--c-wood); }
.crumbs a{ color:var(--c-wood-soft); transition:color var(--dur) var(--ease); }
.crumbs a:hover{ color:var(--c-base); }
.crumbs [aria-current="page"]{ color:#CFC8B9; }

/* パンくずを生成り背景上に置く詳細ページ用バリアント */
.crumbs--light{ color:var(--c-ink-mute); }
.crumbs--light li + li::before{ color:var(--c-wood); }
.crumbs--light a{ color:var(--c-wood-deep); }
.crumbs--light a:hover{ color:var(--c-ink); }
.crumbs--light [aria-current="page"]{ color:var(--c-ink-soft); }

/* 下層ページ内・問い合わせ導線（小型バナー、CTAセクション流用） */
.lead-cta{ text-align:center; max-width:680px; margin-inline:auto; }
.lead-cta__title{
  font-size:clamp(1.5rem,1.1rem + 2vw,2.3rem);
  font-weight:600; line-height:1.5; letter-spacing:.05em; margin-top:.5em;
}
.lead-cta__text{ color:#D8D1C2; margin-top:1.2em; font-size:1rem; }
.lead-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.lead-cta__tel{
  margin-top:30px; font-size:.9rem; color:#B6AF9F; letter-spacing:.04em;
}
.lead-cta__tel a{ font-family:var(--ff-en); font-size:1.5rem; letter-spacing:.06em; color:var(--c-base); }

/* =====================================================================
   F-04 事業案内（service.html）
   ===================================================================== */
.svc-block{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,80px); align-items:center;
}
.svc-block + .svc-block{ margin-top:clamp(64px,10vw,128px); }
.svc-block:nth-child(even) .svc-block__media{ order:2; }
.svc-block__media .ph{ aspect-ratio:4/3; }
.svc-block__no{
  font-family:var(--ff-en); font-size:.78rem; letter-spacing:.26em;
  color:var(--c-wood-deep);
}
.svc-block__title{ font-size:clamp(1.5rem,1.1rem+1.8vw,2.1rem); font-weight:600; letter-spacing:.04em; margin-top:.5em; }
.svc-block__en{ font-family:var(--ff-en); font-style:italic; color:var(--c-ink-mute); font-size:.96rem; margin-top:.25em; }
.svc-block__text{ color:var(--c-ink-soft); margin-top:1.4em; font-size:1rem; }
.svc-block__points{ margin-top:1.6em; border-top:1px solid var(--c-line); }
.svc-block__points li{
  display:flex; gap:.9em; align-items:flex-start;
  padding:.95em 0; border-bottom:1px solid var(--c-line);
  font-size:.96rem; color:var(--c-ink);
}
.svc-block__points li::before{
  content:""; flex:none; width:7px; height:7px; margin-top:.65em;
  border:1px solid var(--c-wood-deep); transform:rotate(45deg);
}
.svc-block .txt-link{ margin-top:1.8em; }

/* =====================================================================
   F-05 施工事例一覧 + カテゴリフィルタ（works.html）
   ===================================================================== */
.filter{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  margin-bottom:clamp(40px,5vw,60px);
  padding-bottom:clamp(28px,4vw,40px);
  border-bottom:1px solid var(--c-line);
}
.filter__label{
  width:100%; font-family:var(--ff-en); font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--c-ink-mute);
  margin-bottom:.6em;
}
.filter__btn{
  min-height:44px; padding:0 1.5em;
  border:1px solid var(--c-line);
  font-size:.86rem; letter-spacing:.1em; color:var(--c-ink-soft);
  background:var(--c-base);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter__btn:hover{ border-color:var(--c-wood); color:var(--c-ink); }
.filter__btn[aria-pressed="true"]{
  background:var(--c-ink); color:var(--c-base); border-color:var(--c-ink);
}
.filter__count{
  width:100%; margin-top:.8em;
  font-size:.86rem; color:var(--c-ink-mute); letter-spacing:.06em;
}
.filter__count b{ color:var(--c-wood-deep); font-weight:600; }

.works-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,44px) clamp(20px,3vw,36px);
}
.works-list .work-card.is-hidden{ display:none; }
.works-list__empty{
  grid-column:1 / -1; text-align:center;
  color:var(--c-ink-mute); padding:48px 0; font-size:1rem;
}
.works-list__empty[hidden]{ display:none; }

/* =====================================================================
   F-06 施工事例詳細（works-detail.html）
   ===================================================================== */
.wd-hero{ padding-top:clamp(28px,4vw,44px); }
.wd-hero__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px; margin-bottom:1em; }
.wd-hero__cat{
  font-family:var(--ff-en); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--c-base);
  background:var(--c-wood-deep); padding:.45em 1.05em;
}
.wd-hero__loc{ font-size:.88rem; color:var(--c-ink-mute); letter-spacing:.08em; }
.wd-hero__title{
  font-size:clamp(1.9rem,1.3rem+2.6vw,3rem);
  font-weight:600; line-height:1.4; letter-spacing:.05em;
}
.wd-hero__media{ margin-top:clamp(28px,4vw,48px); }
.wd-hero__media .ph{ aspect-ratio:16/9; }

.wd-body{
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:clamp(36px,6vw,76px); align-items:start;
}
.wd-spec{ width:100%; border-collapse:collapse; }
.wd-spec caption{
  text-align:left; font-family:var(--ff-en); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--c-wood-deep);
  padding-bottom:1.1em;
}
.wd-spec th,.wd-spec td{
  text-align:left; padding:1em 0; border-bottom:1px solid var(--c-line);
  font-size:.94rem; vertical-align:top;
}
.wd-spec th{ width:42%; color:var(--c-ink-soft); font-weight:600; }
.wd-prose h2{
  font-size:1.4rem; font-weight:600; letter-spacing:.04em;
  margin-top:1.8rem; padding-bottom:.5em; border-bottom:1px solid var(--c-line);
}
.wd-prose h2:first-child{ margin-top:0; }
.wd-prose p{ color:var(--c-ink-soft); margin-top:1.2em; font-size:1rem; }

.wd-gallery{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,28px);
}
.wd-gallery .ph{ aspect-ratio:4/3; }

.wd-pager{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--c-line); padding-top:clamp(28px,4vw,44px);
}
.wd-pager a{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.9rem; letter-spacing:.1em; color:var(--c-ink-soft);
  transition:color var(--dur) var(--ease);
}
.wd-pager a:hover{ color:var(--c-wood-deep); }
.wd-pager__center{ font-family:var(--ff-en); letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; }

@media (max-width:899px){
  .wd-body{ grid-template-columns:1fr; }
}

/* =====================================================================
   F-07 家づくりの流れ + FAQ アコーディオン（flow.html）
   ===================================================================== */
.flowpage{
  counter-reset:fp;
  border-top:1px solid var(--c-line);
}
.flowpage__step{
  display:grid; grid-template-columns:auto 1fr 1.1fr;
  gap:clamp(20px,4vw,56px); align-items:start;
  padding:clamp(36px,5vw,60px) 0;
  border-bottom:1px solid var(--c-line);
}
.flowpage__num{
  font-family:var(--ff-en); font-weight:500; line-height:1;
  font-size:clamp(2.2rem,1.4rem+2.6vw,3.4rem);
  color:var(--c-wood-soft);
}
.flowpage__num::before{ counter-increment:fp; content:"0" counter(fp); }
.flowpage__body{ max-width:46ch; }
.flowpage__title{ font-size:clamp(1.2rem,1rem+1vw,1.55rem); font-weight:600; letter-spacing:.04em; }
.flowpage__en{ font-family:var(--ff-en); font-style:italic; color:var(--c-ink-mute); font-size:.9rem; margin-top:.25em; }
.flowpage__text{ color:var(--c-ink-soft); margin-top:1em; font-size:.98rem; }
.flowpage__media .ph{ aspect-ratio:3/2; }

@media (max-width:899px){
  .flowpage__step{ grid-template-columns:auto 1fr; }
  .flowpage__media{ grid-column:1 / -1; margin-top:8px; }
}
@media (max-width:519px){
  .flowpage__step{ grid-template-columns:1fr; gap:14px; }
}

.faq{ border-top:1px solid var(--c-line); }
.faq__item{ border-bottom:1px solid var(--c-line); }
.faq__q{
  display:flex; align-items:center; gap:1.2em;
  width:100%; text-align:left;
  padding:1.5em 0; font-size:1.04rem; font-weight:600;
  color:var(--c-ink); letter-spacing:.02em;
}
.faq__q-mark{
  font-family:var(--ff-en); font-style:italic;
  color:var(--c-wood-deep); font-size:1.1rem; flex:none;
}
.faq__q-text{ flex:1; }
.faq__icon{
  position:relative; flex:none; width:18px; height:18px;
}
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:1.5px; background:var(--c-ink-soft);
  transition:transform var(--dur) var(--ease);
}
.faq__icon::after{ transform:rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:rotate(0); }
.faq__a{
  overflow:hidden;
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 320ms var(--ease);
}
.faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows:1fr; }
.faq__a-inner{ min-height:0; }
.faq__a p{
  color:var(--c-ink-soft); font-size:.98rem;
  padding-bottom:1.8em; max-width:72ch;
}
.no-js .faq__a{ grid-template-rows:1fr; }

/* =====================================================================
   F-08 会社概要（company.html）
   ===================================================================== */
.message{
  display:grid; grid-template-columns:1fr 1.5fr;
  gap:clamp(36px,6vw,80px); align-items:start;
}
.message__media .ph{ aspect-ratio:3/4; }
.message__name{
  margin-top:1.6em; font-family:var(--ff-en); font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--c-ink-mute);
}
.message__name b{
  display:block; font-family:var(--ff-jp); font-size:1.15rem;
  font-weight:600; letter-spacing:.06em; color:var(--c-ink);
  text-transform:none; margin-top:.4em;
}
.message__text p{ color:var(--c-ink-soft); font-size:1rem; margin-top:1.3em; }
.message__text p:first-child{ margin-top:0; }
.message__lead{
  font-family:var(--ff-jp); font-size:clamp(1.2rem,1rem+1vw,1.6rem) !important;
  color:var(--c-ink) !important; font-weight:600; line-height:1.7;
  margin-top:0 !important;
}

@media (max-width:899px){
  .svc-block,
  .message{ grid-template-columns:1fr; }
  .svc-block:nth-child(even) .svc-block__media{ order:0; }
  .svc-block__media,
  .message__media{ max-width:520px; }
}

.profile-table{ width:100%; border-collapse:collapse; }
.profile-table th,.profile-table td{
  text-align:left; padding:1.1em clamp(8px,2vw,28px) 1.1em 0;
  border-bottom:1px solid var(--c-line);
  font-size:.96rem; vertical-align:top;
}
.profile-table th{
  width:30%; min-width:9em; color:var(--c-ink-soft); font-weight:600;
  font-family:var(--ff-en); letter-spacing:.04em;
}
.profile-table td{ color:var(--c-ink); }

.history{ border-top:1px solid var(--c-line); }
.history__row{
  display:grid; grid-template-columns:11em 1fr;
  gap:clamp(14px,4vw,48px);
  padding:1.5em 0; border-bottom:1px solid var(--c-line);
}
.history__year{
  font-family:var(--ff-en); font-size:1.1rem; letter-spacing:.08em;
  color:var(--c-wood-deep);
}
.history__year span{ font-family:var(--ff-jp); font-size:.82rem; color:var(--c-ink-mute); margin-left:.6em; }
.history__text{ color:var(--c-ink-soft); font-size:.98rem; }
@media (max-width:599px){
  .history__row{ grid-template-columns:1fr; gap:.3em; }
}

.access{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px); align-items:start;
}
.access__map{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--c-base-deep); border:1px solid var(--c-line);
  font-family:var(--ff-en); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-ink-mute); text-align:center;
  padding:24px;
}
.access__list{ margin-top:0; }
.access__list dt{
  font-family:var(--ff-en); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-wood-deep); margin-top:1.6em;
}
.access__list dt:first-child{ margin-top:0; }
.access__list dd{ color:var(--c-ink-soft); font-size:.98rem; margin-top:.5em; }
@media (max-width:719px){
  .access{ grid-template-columns:1fr; }
}

/* 下層ページ内セクションの見出し下マージン微調整（既存 .s-head 流用時） */
.subsec + .subsec{ margin-top:clamp(56px,8vw,104px); }

/* スクリーンリーダー専用テキスト（視覚的に非表示・支援技術には読まれる） */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* =====================================================================
   Sprint 3: F-09 採用情報（recruit.html）
   既存トークン・トーンを踏襲（.message / .profile-table 等の流儀）
   ===================================================================== */
.rc-values{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(56px,8vw,96px);
  border-top:1px solid var(--c-line);
  padding-top:clamp(40px,5vw,64px);
}
.rc-value__no{
  font-family:var(--ff-en); font-size:.78rem; letter-spacing:.24em;
  color:var(--c-wood-deep);
}
.rc-value__title{
  font-size:1.22rem; font-weight:600; letter-spacing:.05em; margin-top:.55em;
}
.rc-value__text{ color:var(--c-ink-soft); font-size:.95rem; margin-top:.9em; }

.rc-jobs{ display:grid; gap:clamp(28px,4vw,44px); }
.rc-job{
  background:var(--c-base);
  border:1px solid var(--c-line);
  padding:clamp(28px,4vw,52px);
}
.rc-job__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px;
  padding-bottom:1.2em; margin-bottom:.6em;
  border-bottom:1px solid var(--c-line);
}
.rc-job__en{
  font-family:var(--ff-en); font-style:italic; font-size:.96rem;
  letter-spacing:.08em; color:var(--c-wood-deep); order:1; flex:1 1 100%;
}
.rc-job__title{
  font-size:clamp(1.35rem,1.1rem+1vw,1.75rem); font-weight:600;
  letter-spacing:.05em; order:2;
}
.rc-job__table{ width:100%; border-collapse:collapse; }
.rc-job__table th,
.rc-job__table td{
  text-align:left; padding:1em clamp(8px,2vw,24px) 1em 0;
  border-bottom:1px solid var(--c-line);
  font-size:.95rem; vertical-align:top;
}
.rc-job__table tr:last-child th,
.rc-job__table tr:last-child td{ border-bottom:0; }
.rc-job__table th{
  width:26%; min-width:7.5em; color:var(--c-ink-soft); font-weight:600;
  font-family:var(--ff-en); letter-spacing:.04em;
}
.rc-job__table td{ color:var(--c-ink); }
@media (max-width:899px){
  .rc-values{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:559px){
  .rc-job__table th,
  .rc-job__table td{ display:block; width:auto; padding-right:0; }
  .rc-job__table th{ border-bottom:0; padding-bottom:.2em; }
  .rc-job__table td{ padding-top:.2em; }
}

/* =====================================================================
   Sprint 3: F-11 お知らせ一覧（news.html）
   トップの .news-item の流儀を一覧表示向けに拡張
   ===================================================================== */
.news-archive{ border-top:1px solid var(--c-line); }
.news-entry{
  display:grid; grid-template-columns:13em 1fr;
  gap:clamp(14px,3vw,48px);
  padding:clamp(28px,3.4vw,40px) 0;
  border-bottom:1px solid var(--c-line);
  transition:padding-left var(--dur) var(--ease);
}
.news-entry:hover{ padding-left:8px; }
.news-entry__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.news-entry__date{
  font-family:var(--ff-en); font-size:.92rem; letter-spacing:.12em;
  color:var(--c-ink-mute);
}
.news-entry__cat{
  font-size:.72rem; letter-spacing:.14em; color:var(--c-wood-deep);
  border:1px solid var(--c-line); padding:.3em .9em; white-space:nowrap;
}
.news-entry__title{
  font-size:1.12rem; font-weight:600; letter-spacing:.03em;
  line-height:1.7; color:var(--c-ink);
}
.news-entry__excerpt{
  color:var(--c-ink-soft); font-size:.96rem; margin-top:.8em; max-width:70ch;
}
.news-archive__note{
  margin-top:clamp(24px,3vw,36px);
  font-size:.84rem; color:var(--c-ink-mute); letter-spacing:.04em;
}
@media (max-width:719px){
  .news-entry{ grid-template-columns:1fr; gap:1em; }
}

/* =====================================================================
   Sprint 3: F-10 お問い合わせ（contact.html）
   電話案内 / フォーム / 完了表示。配色・余白は既存トークンで統一。
   ===================================================================== */
.ct-info{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px); align-items:stretch;
}
.ct-info__phone{
  background:var(--c-ink); color:var(--c-base);
  padding:clamp(30px,4vw,52px);
  display:flex; flex-direction:column; justify-content:center;
}
.ct-info__label{
  font-family:var(--ff-en); font-size:.7rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--c-wood-soft);
}
.ct-info__caption{ font-size:.92rem; color:#D8D1C2; margin-top:1.1em; }
.ct-info__num{
  font-family:var(--ff-en);
  font-size:clamp(1.9rem,1.3rem+2.4vw,2.9rem); letter-spacing:.06em;
  color:var(--c-base); margin-top:.15em; display:inline-block;
}
.ct-info__num:hover{ color:var(--c-wood-soft); }
.ct-info__note{ font-size:.82rem; color:#B6AF9F; margin-top:1em; }
.ct-info__list{
  border-top:1px solid var(--c-line);
}
.ct-info__list > div{
  display:grid; grid-template-columns:8em 1fr; gap:clamp(12px,3vw,32px);
  padding:1.15em 0; border-bottom:1px solid var(--c-line);
}
.ct-info__list dt{
  font-family:var(--ff-en); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-wood-deep); padding-top:.15em;
}
.ct-info__list dd{ color:var(--c-ink); font-size:.96rem; }
@media (max-width:839px){
  .ct-info{ grid-template-columns:1fr; }
}
@media (max-width:479px){
  .ct-info__list > div{ grid-template-columns:1fr; gap:.2em; }
}

/* ---- フォーム ---- */
.ct-form-wrap{ max-width:760px; }
.ct-form__error-summary{
  background:#F3E3DC; border:1px solid #C8927B;
  color:#7A3B22; font-size:.92rem; line-height:1.8;
  padding:1em 1.3em; margin-bottom:clamp(28px,4vw,40px);
}
.ct-form__error-summary[hidden]{ display:none; }

.field{ margin-bottom:clamp(26px,3.4vw,38px); }
.field__label{
  display:block; font-size:.96rem; font-weight:600;
  letter-spacing:.04em; color:var(--c-ink); margin-bottom:.7em;
}
.field__opt{
  font-family:var(--ff-en); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-ink-mute);
  border:1px solid var(--c-line); padding:.2em .7em; margin-left:.5em;
  font-weight:400;
}
.req-mark{ color:var(--c-wood-deep); font-weight:700; }
.field__control{ position:relative; }

.input{
  width:100%;
  min-height:54px;
  padding:.85em 1.1em;
  font:inherit; font-size:1rem; color:var(--c-ink);
  background:var(--c-base);
  border:1px solid var(--c-line);
  border-radius:0;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.input::placeholder{ color:var(--c-ink-mute); opacity:.8; }
.input:hover{ border-color:var(--c-wood); }
.input:focus{ outline:2px solid var(--c-wood-deep); outline-offset:2px; border-color:var(--c-wood-deep); }
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235B554C' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.15em center;
  padding-right:2.8em;
}
.input--area{ min-height:auto; line-height:1.85; resize:vertical; }

.input.is-invalid,
.input.is-invalid:hover{ border-color:#B6603F; background:#FBF1EC; }
.input.is-invalid:focus{ outline-color:#B6603F; border-color:#B6603F; }

.field__error{
  display:flex; align-items:flex-start; gap:.5em;
  font-size:.86rem; color:#A24A2C; letter-spacing:.02em;
  margin-top:.6em; line-height:1.7;
}
.field__error[hidden]{ display:none; }
.field__error::before{
  content:"!"; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25em; height:1.25em; margin-top:.15em;
  font-family:var(--ff-en); font-size:.78rem; font-weight:700;
  color:var(--c-base); background:#B6603F; border-radius:50%;
}

.field--consent{ margin-top:clamp(30px,4vw,44px); }
.consent{
  display:flex; align-items:flex-start; gap:.9em;
  cursor:pointer; font-size:.95rem; color:var(--c-ink);
}
.consent__box{
  flex:none; width:22px; height:22px; margin-top:.15em;
  accent-color:var(--c-wood-deep);
  cursor:pointer;
}
.consent__box:focus-visible{ outline:2px solid var(--c-wood-deep); outline-offset:3px; }
.consent__text{ line-height:1.8; }
.consent__note{
  display:block; font-size:.84rem; color:var(--c-ink-soft);
  font-weight:400; margin-top:.4em;
}
.field--consent .field__error{ margin-top:.8em; }

.ct-form__actions{
  margin-top:clamp(34px,4.5vw,48px);
  padding-top:clamp(28px,3.5vw,40px);
  border-top:1px solid var(--c-line);
}
.ct-form__actions .btn{ width:100%; max-width:340px; justify-content:center; }
.ct-form__hint{
  font-size:.84rem; color:var(--c-ink-mute); margin-top:1.2em; letter-spacing:.03em;
}

/* ---- 送信完了表示（同一URL内 DOM 切替） ---- */
.ct-done{
  text-align:center; max-width:620px; margin-inline:auto;
  padding:clamp(16px,4vw,40px) 0;
}
.ct-done[hidden]{ display:none; }
.ct-done:focus-visible{ outline:2px solid var(--c-wood-deep); outline-offset:6px; }
.ct-done__icon{
  display:inline-flex; color:var(--c-wood-deep);
  margin-bottom:1.4em;
}
.ct-done__icon svg{ width:60px; height:60px; }
.ct-done__title{
  font-size:clamp(1.6rem,1.2rem+2vw,2.4rem);
  font-weight:600; line-height:1.5; letter-spacing:.05em; margin-top:.5em;
}
.ct-done__text{ color:var(--c-ink-soft); margin-top:1.3em; font-size:1rem; }
.ct-done__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:clamp(34px,4.5vw,48px);
}

/* =====================================================================
   Sprint 4: 横断仕上げ（F-03 / F-13 / F-14 / F-15）
   非破壊・追記のみ。既存トークン/トーン/クラスを変更しない。
   目的: 375/768/1280px で実 scrollWidth が viewport を超えないこと、
         長い英字トークン（メール/URL）でも折返して横スクロールを出さない、
         演出（reveal）と prefers-reduced-motion のフォールバックを堅牢化。
   ===================================================================== */

/* ---- F-13: 長い連続文字（メール/URL/英字）の折返し安全化 ----
   table-layout を変えず、セル内文字だけを器幅に収める。grid 子の
   min-width:0 で内容オーバーによる横はみ出しを防止（実 scrollWidth 対策）。 */
.profile-table td,
.wd-spec td,
.rc-job__table td,
.company__table td,
.ct-info__list dd,
.footer-info dd,
.access__list dd,
.news-entry__title,
.news-entry__excerpt,
.news-item__title{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.profile-table,
.wd-spec,
.rc-job__table,
.company__table{
  table-layout:fixed;          /* 内容過多でも器幅を超えない */
  width:100%;
}
.profile-table th,
.wd-spec th,
.rc-job__table th,
.company__table th{
  overflow-wrap:anywhere;      /* 見出し列も器内に収める */
}
/* グリッド/フレックス子が内容で押し広げないための安全弁（既存比率は維持） */
.news__layout > *,
.company__layout > *,
.message > *,
.svc-block > *,
.wd-body > *,
.access > *,
.ct-info > *,
.flowpage__body,
.history__row > *,
.news-entry > *{
  min-width:0;
}

/* ---- F-13: モバイル幅で <pre> 的に伸びうる要素の保険（汎用） ---- */
@media (max-width:430px){
  .ct-info__num,
  .cta__tel-num,
  .lead-cta__tel a{
    overflow-wrap:anywhere;
  }
}

/* ---- F-03: ハンバーガー展開オーバーレイの堅牢化 ----
   ヘッダー実高（min-height:78px + 下罫線1px）に合わせ、ビュー全体を覆う。
   100dvh 対応端末ではアドレスバー伸縮時も隙間/はみ出しを作らない。 */
@media (max-width:1023px){
  .gnav{
    inset:79px 0 0 0;
    max-height:calc(100dvh - 79px);
    width:100%;
    max-width:100%;
    overscroll-behavior:contain; /* メニュー内スクロールが背面へ伝播しない */
  }
}

/* ---- F-15: reveal 演出のフォールバック堅牢化（多重防御） ----
   JS無効(.no-js)・IntersectionObserver未対応・reduce はいずれも全要素表示。
   既存ルールを上書きせず、抜け道を塞ぐ追加宣言のみ。 */
.no-js .reveal,
.reveal--off{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){
  .reveal,
  .reveal.is-in{ opacity:1 !important; transform:none !important; }
}

/* ---- F-14: フォーカス可視性の最終保証（キーボード操作） ----
   既存 :focus-visible を尊重しつつ、リンク/ボタンで確実に視認できる。 */
a:focus-visible,
button:focus-visible,
.input:focus-visible,
.consent__box:focus-visible{
  outline:2px solid var(--c-wood-deep);
  outline-offset:3px;
}

/* =====================================================================
   Sprint 5: シネマティック・アニメーション全面導入（F-15〜F-22）
   ---------------------------------------------------------------------
   設計原則（プログレッシブ・エンハンスメント）:
   - すべての演出対象は「既定で最終状態（完全表示・操作可能）」。
   - 演出は html.cine（= JSが「演出可」と判定した時のみ付与）配下でだけ
     初期状態(opacity/transform/clip-path)と動きを与える。
   - prefers-reduced-motion / JS無効 / IntersectionObserver未対応 /
     スクリプト読込失敗時は html.cine が付かない → 全要素が最終状態のまま。
   - アニメは transform / opacity / clip-path 中心。レイアウト変更は不使用。
   - 配色・タイポ・余白の基調は不変。大胆なのはモーションのみ。
   ===================================================================== */

/* ---- 演出共通トークン（緩急のある上質なイージング） ---- */
:root{
  --ease-cine:    cubic-bezier(.16,1,.3,1);    /* スロースタート寄り */
  --ease-cine-io: cubic-bezier(.65,0,.35,1);   /* イン/アウト両用 */
}

/* reduced-motion は最優先で全演出を無効化（既存方針を踏襲・多重防御） */
@media (prefers-reduced-motion:reduce){
  html.cine *,
  html.cine *::before,
  html.cine *::after{ animation:none !important; transition:none !important; }
}

/* =====================================================================
   F-15: イントローダー（全画面イントロ → 必ず解除）
   - 既定では存在しても無表示（HTMLに hidden 相当の振る舞いをCSSで）。
   - cine 環境のみ表示し、JSが一定時間/読込完了で必ず除去する。
   - 解除後はDOMから除去 or display:none でクリックを一切妨げない。
   ===================================================================== */
.intro{ display:none; }
html.cine .intro{
  display:flex;
  position:fixed; inset:0; z-index:2000;
  align-items:center; justify-content:center;
  background:var(--c-ink);
  color:var(--c-base);
  /* 解除アニメ用 */
  transition:opacity 620ms var(--ease-cine), visibility 0s linear 620ms;
}
html.cine .intro__inner{
  text-align:center;
  padding:0 var(--gutter);
}
html.cine .intro__mark{
  width:72px; height:72px; margin:0 auto;
}
html.cine .intro__mark path,
html.cine .intro__mark line{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation:introDraw 1100ms var(--ease-cine) forwards;
}
html.cine .intro__mark line{ animation-delay:240ms; }
@keyframes introDraw{ to{ stroke-dashoffset:0; } }
html.cine .intro__jp{
  margin-top:1.4em;
  font-size:clamp(1.3rem,1rem+1.6vw,1.9rem);
  font-weight:600; letter-spacing:.28em;
  /* ブランド名ワイプ描画（左→右マスク） */
  overflow:hidden;
  clip-path:inset(0 100% 0 0);
  animation:introWipe 900ms var(--ease-cine) 360ms forwards;
}
html.cine .intro__en{
  margin-top:1em;
  font-family:var(--ff-en);
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--c-wood-soft);
  opacity:0;
  animation:introFade 700ms var(--ease-cine) 900ms forwards;
}
@keyframes introWipe{ to{ clip-path:inset(0 0 0 0); } }
@keyframes introFade{ to{ opacity:1; } }
/* 解除トリガ: JSが is-done を付与 → フェードアウト後 display:none */
html.cine .intro.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/* 解除完了でレイアウトから完全に除去（クリック非妨害の最終保証） */
html.cine .intro.is-removed{ display:none !important; }
/* スクロール固定（イントロ表示中のみ） */
html.cine.intro-lock,
html.cine.intro-lock body{ overflow:hidden; }

/* =====================================================================
   F-16: ヒーロー・シネマティックモーション（クラシック・エディトリアル）
   - 既定（非cine/JS無効/reduced-motion）: 全要素が最終状態で完成版面。
   - cine: 特大明朝が文字単位で静かにセリ出現 → 縦線が下へ描かれ →
     額装写真がワイプで現れる、緩急のある上質な所作（参考トーン踏襲）。
   ===================================================================== */
/* タイトル: 文字単位で気品よくセリ上がる（JSが span.ch へ分解）。
   クラシックな所作のため回転やブラーは用いず、静かな上昇とフェード。 */
html.cine .hero__title .ch{
  display:inline-block;
  white-space:pre;
  transform:translateY(.6em);
  opacity:0;
  transition:transform 1100ms var(--ease-cine),
             opacity 1100ms var(--ease-cine);
}
html.cine .hero.is-revealed .hero__title .ch{
  transform:none; opacity:1;
}

/* eyebrow / lead / scroll: 静かに浮上 */
html.cine .hero .eyebrow,
html.cine .hero__lead{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 950ms var(--ease-cine), transform 950ms var(--ease-cine);
}

/* 縦の連結線: 上から下へ引かれる（タイトル後に） */
html.cine .hero__line i{
  transform:scaleY(0);
  transition:transform 900ms var(--ease-cine);
}
html.cine .hero.is-revealed .hero__line i{ transform:scaleY(1); }

/* 額装写真: 下から上へワイプ＋僅かなスケール（落ち着いた登場）。
   さらにスクロール連動で一様スケールアップ＋下方ラグ（main.js が
   --fig-s / --fig-y を更新）＝写真が広がり次セクションへ繋がる。
   transform のみ＝レイアウト非破壊・横スクロール非誘発（共通D）。 */
html.cine .hero__figure{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1200ms var(--ease-cine);
  transform-origin:center top;
  transform:scale(var(--fig-s,1)) translateY(var(--fig-y,0px));
  will-change:transform;
  /* 下側ソフトフェード: --fig-mask=100%(静止)で無し、拡大に連れて
     下端が透明化し背後のダークブラウンへ溶ける。 */
  -webkit-mask-image:linear-gradient(180deg, #000 var(--fig-mask,100%), transparent 100%);
  mask-image:linear-gradient(180deg, #000 var(--fig-mask,100%), transparent 100%);
}
html.cine .hero:not(.is-revealed) .hero__figure{
  clip-path:inset(0 0 100% 0);
}
html.cine .hero__figure .ph > img{
  transform:scale(1.08);
  transition:transform 1800ms var(--ease-cine);
}
html.cine .hero.is-revealed .hero__figure .ph > img{ transform:scale(1); }

html.cine .hero.is-revealed .eyebrow{ opacity:1; transform:none; transition-delay:.15s; }
html.cine .hero.is-revealed .hero__lead{ opacity:1; transform:none; transition-delay:.95s; }
html.cine .hero.is-revealed .hero__line i{ transition-delay:1.1s; }
html.cine .hero.is-revealed .hero__figure{ transition-delay:1.25s; }

/* =====================================================================
   F-17: スクロール連動リビール（大胆化 / 全9ページ主要セクション）
   既存 .reveal を活かしつつ動きを大きく。既定/フォールバックは完全表示。
   ===================================================================== */
/* cine 環境でのみ大胆な初期変位を与える（非cineは既存=表示）。 */
html.cine .reveal{
  opacity:0;
  transform:translateY(54px);
  transition:opacity 1000ms var(--ease-cine), transform 1000ms var(--ease-cine);
  will-change:opacity, transform;
}
html.cine .reveal.is-in{ opacity:1; transform:none; }

/* スタガー: 親に data-stagger があると子 .reveal を時間差で */
html.cine [data-stagger].is-in > .reveal,
html.cine [data-stagger] > .reveal.is-in{ opacity:1; transform:none; }
html.cine [data-stagger] > .reveal:nth-child(1){ transition-delay:0ms; }
html.cine [data-stagger] > .reveal:nth-child(2){ transition-delay:90ms; }
html.cine [data-stagger] > .reveal:nth-child(3){ transition-delay:180ms; }
html.cine [data-stagger] > .reveal:nth-child(4){ transition-delay:270ms; }
html.cine [data-stagger] > .reveal:nth-child(5){ transition-delay:360ms; }
html.cine [data-stagger] > .reveal:nth-child(6){ transition-delay:450ms; }
html.cine [data-stagger] > .reveal:nth-child(7){ transition-delay:540ms; }
html.cine [data-stagger] > .reveal:nth-child(8){ transition-delay:630ms; }

/* 非cine/フォールバックは確実に最終状態（多重防御・最優先） */
.no-js .reveal,
.reveal--off{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){
  html.cine .reveal,
  html.cine .reveal.is-in,
  html.cine [data-stagger] > .reveal{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* =====================================================================
   F-18: 画像パララックス（transform: translate3d / cine のみ）
   - 対象 .parallax > .ph。コンテナ overflow:hidden + 画像を上下に拡張し、
     はみ出し分の範囲でだけ動かす（横はみ出し＝横スクロール誘発を防止）。
   ===================================================================== */
html.cine .parallax{ overflow:hidden; }
html.cine .parallax .ph{ overflow:hidden; }
html.cine .parallax .ph > img{
  /* 上下に余白を持たせ、その範囲だけを縦移動（横は不動） */
  height:124%;
  width:100%;
  object-fit:cover;
  transform:translate3d(0, var(--py, -12%), 0);
  will-change:transform;
}
/* reduced-motion / 非cine では画像は通常配置（既存ルール .ph>img のまま） */

/* =====================================================================
   F-19: ピン留め＋水平スクロール演出（代表: トップ Works 抜粋）
   - sticky の100vh枠 + overflow:hidden トラック + translateX。
   - ドキュメント自体に水平スクロールバーを出さない（共通D厳守）。
   - 既定/フォールバックは通常グリッド（既存 .works__grid）。
   ===================================================================== */
/* cine 環境のみピン留めUIへ切替。HTML構造は据置（追加ラッパのみ）。 */
.pin-scene{ position:relative; }
html.cine .pin-scene{
  /* 縦スクロール量 = 横移動量を確保するための背高ステージ。
     section の padding は sticky 計算を乱すため cine では 0 化し、
     視覚的余白は pin-sticky の中央寄せ＋pin-head 余白で担保。 */
  height:var(--pin-h, 320vh);
  padding-block:0;
}
html.cine .pin-sticky{
  position:sticky; top:0;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;                 /* トラックの横はみ出しをここで完全封止 */
}
html.cine .pin-track{
  display:flex;
  align-items:stretch;
  gap:clamp(20px,3vw,40px);
  padding-inline:var(--gutter);
  will-change:transform;
  transform:translate3d(var(--px,0px),0,0);
}
html.cine .pin-track .work-card{
  flex:0 0 min(78vw, 460px);
}
/* ピン水平演出ではカードの登場＝横スライドが担う。
   横方向に退避したカードは IO 非交差で reveal が解けないため、
   pin-track 内の .reveal は cine で常時最終状態にする（取り残し防止）。 */
html.cine .pin-track .reveal{
  opacity:1 !important; transform:none !important;
}
/* F-19 追補: 終端CTA（横スライドの到達点）。
   既定/非cine/JS無効/reduced では非表示（.pin-sticky 外の .works__more を使用）。
   cine ではトラック末尾の1枚としてカードより大きい“目的地”面で登場し、
   横スクロールの climax で行動導線を視線・運動方向と一致させて回収する。 */
.pin-cta{ display:none; }
/* 写真カードと同寸の“もう1枚”として並ぶ：flex-basis は .work-card 既定を
   そのまま継承（min(78vw,460px)）。色面は .work-card .ph と同じ 4/3＝
   画像と完全に同サイズ。下のラベルは .work-card__title と同じ体裁。 */
html.cine .pin-cta{
  display:flex; flex-direction:column; text-decoration:none;
}
html.cine .pin-cta__box{
  aspect-ratio:4/3;                    /* = .work-card .ph と同じ画像サイズ */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5em;
  background:var(--c-wood-deep); color:var(--c-base);
}
html.cine .pin-cta__eyebrow{
  font-family:var(--ff-en); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--c-wood-soft);
}
html.cine .pin-cta__arrow{
  font-family:var(--ff-en); font-size:1.7rem; line-height:1;
  transition:transform var(--dur) var(--ease);
}
html.cine .pin-cta__label{
  font-size:1.24rem; font-weight:600; margin-top:.55em; letter-spacing:.04em;
}
html.cine .pin-cta:hover .pin-cta__arrow,
html.cine .pin-cta:focus-visible .pin-cta__arrow{ transform:translateX(8px); }
html.cine .pin-cta:hover .pin-cta__label{ color:var(--c-wood-deep); }
/* cine では in-track CTA に一本化（外側ゴーストボタンは重複のため隠す）。 */
html.cine .works__more{ display:none; }
html.cine .pin-head{
  padding-inline:var(--gutter);
  margin-bottom:clamp(28px,4vw,52px);
}
html.cine .pin-progress{
  margin-top:clamp(24px,3vw,40px);
  padding-inline:var(--gutter);
}
html.cine .pin-progress__bar{
  height:2px; background:var(--c-line);
  position:relative; overflow:hidden;
}
html.cine .pin-progress__bar::after{
  content:""; position:absolute; inset:0 auto 0 0;
  width:100%;
  background:var(--c-wood-deep);
  transform:scaleX(var(--pin-progress,0));
  transform-origin:left;
}
/* 非cine（既定・reduced・JS無効）は従来グリッドのまま見せる。
   ピン専用クラスは cine 以外では一切レイアウトに影響しない。
   見出し(.pin-head)は両モードで可視。進捗バーのみ cine 専用。 */
.pin-scene .pin-sticky{ display:contents; }       /* 非cine: ラッパを透過 */
.pin-scene .pin-head{                              /* 非cine: 通常の見出し帯 */
  padding-block:0;
  margin-bottom:clamp(40px,6vw,72px);
}
.pin-scene .pin-progress{ display:none; }          /* 非cine: 進捗非表示 */
html.cine .pin-scene .pin-sticky{ display:flex; }
html.cine .pin-scene .pin-head{
  padding-block:0;
  margin-bottom:clamp(28px,4vw,52px);
}
html.cine .pin-scene .pin-progress{ display:block; }
@media (prefers-reduced-motion:reduce){
  html.cine .pin-scene{ height:auto !important; }
  html.cine .pin-sticky{ position:static !important; height:auto !important; display:block !important; overflow:visible !important; }
  html.cine .pin-track{ transform:none !important; }
  html.cine .pin-head, html.cine .pin-progress{ display:none !important; }
}

/* =====================================================================
   F-20: 数字カウントアップ
   - 既定/フォールバック: HTMLに最終値を直書き → そのまま表示。
   - cine: JSが進入時に 0→目標値を更新（DOM textContent のみ）。
   ===================================================================== */
.countup{ font-variant-numeric:tabular-nums; }

/* 統計ブロック（トップ Company 抜粋に追加） */
.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,44px);
  margin:0 0 clamp(28px,4vw,40px);
}
.stat-row .stat{
  /* dt(ラベル)→dd(数値) のDOM順を視覚的に「数値→ラベル」へ反転 */
  display:flex; flex-direction:column-reverse;
}
.stat__num{
  margin:0;
  font-family:var(--ff-en);
  font-size:clamp(2.1rem,1.4rem+2.6vw,3.3rem);
  font-weight:500; line-height:1; letter-spacing:.02em;
  color:var(--c-wood-deep);
}
.stat__num small{ font-size:.5em; margin-left:.15em; letter-spacing:0; }
.stat__label{
  margin-top:.7em; font-size:.86rem; color:var(--c-ink-soft); letter-spacing:.06em;
}
@media (max-width:599px){
  .stat-row{ grid-template-columns:1fr; gap:24px; text-align:left; }
}

/* =====================================================================
   F-21: ページ遷移アニメ（ワイプ/フェード）
   - 既定: オーバーレイは非表示。JS（cine）でのみイン/アウト演出。
   - 遷移は阻害しない（必ず location 遷移）。戻る/直リンクで残らない。
   ===================================================================== */
.page-wipe{ display:none; }
html.cine .page-wipe{
  display:block;
  position:fixed; inset:0; z-index:1500;
  background:var(--c-ink);
  transform:scaleY(0);
  transform-origin:bottom;
  pointer-events:none;
  visibility:hidden;
}
/* 読込直後のイン（上→下に解ける） */
html.cine .page-wipe.is-in{
  visibility:visible;
  transform:scaleY(1);
  transform-origin:top;
  animation:wipeIn 760ms var(--ease-cine-io) forwards;
}
@keyframes wipeIn{
  0%{ transform:scaleY(1); transform-origin:top; visibility:visible; }
  100%{ transform:scaleY(0); transform-origin:top; visibility:hidden; }
}
/* リンククリック時のアウト（下→上に閉じる） */
html.cine .page-wipe.is-out{
  visibility:visible;
  transform-origin:bottom;
  animation:wipeOut 520ms var(--ease-cine-io) forwards;
}
@keyframes wipeOut{
  0%{ transform:scaleY(0); transform-origin:bottom; }
  100%{ transform:scaleY(1); transform-origin:bottom; }
}
/* 注: コンテンツ本体(main)は決して不可視化しない（JS読込失敗時の
   ブランクページ防止）。イン演出はオーバーレイ(.page-wipe)のみで表現。 */

/* =====================================================================
   F-22: マイクロインタラクション（ボタン / カード / ナビ / カーソル）
   - 既定でも :hover/:focus は機能（CSSのみ）。cine で更に大胆化。
   - カスタムカーソルはポインタ環境のみ・操作を妨げない。
   ===================================================================== */
/* ボタン: 押下のスケールフィードバック（全環境・CSSのみで軽量） */
.btn{ transition:background var(--dur) var(--ease),
                  color var(--dur) var(--ease),
                  transform 220ms var(--ease-cine),
                  box-shadow 260ms var(--ease-cine); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

/* カード: ホバーで持ち上げ＋画像ズーム（既存挙動を強化、原色不使用） */
html.cine .work-card .ph,
.work-card .ph{ overflow:hidden; }
html.cine .work-card:hover .ph > img,
.work-card:hover .ph > img{ transform:scale(1.06); }
.concept-card,
.flow-step,
.rc-value{
  transition:transform 360ms var(--ease-cine);
}
html.cine .concept-card:hover{ transform:translateY(-5px); }

/* ナビ: 下線リビールを少し伸びやかに（既存 ::after を踏襲・上書きせず延長） */
.gnav__link::after{ transition:transform 360ms var(--ease-cine); }

/* カスタムカーソル（細い円。fine ポインタ かつ cine のみ） */
.cursor-dot{ display:none; }
@media (hover:hover) and (pointer:fine){
  html.cine .cursor-dot{
    display:block;
    position:fixed; top:0; left:0; z-index:1400;
    width:26px; height:26px; margin:-13px 0 0 -13px;
    border:1px solid var(--c-wood-deep);
    border-radius:50%;
    pointer-events:none;                 /* クリック/操作を一切妨げない */
    transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) scale(var(--cs,1));
    transition:transform 120ms linear, opacity 200ms var(--ease-cine);
    opacity:.55;
    mix-blend-mode:multiply;
  }
  html.cine.cursor-hot .cursor-dot{ --cs:1.9; opacity:.32; }
}

/* =====================================================================
   F-15 共通: cine 環境の初期チラつき防止（FOUC対策の安全弁）
   - cine 付与は <head> 内インラインで先行判定するため、初期状態は
     スタイル適用済み。万一の遅延でも内容は visibility で隠さない
     （opacity/transform のみ＝支援技術・SEO的に内容は存在）。
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html.cine .hero__title .ch,
  html.cine .hero .eyebrow,
  html.cine .hero__lead,
  html.cine .hero__line i,
  html.cine .hero__figure,
  html.cine .hero__figure .ph > img,
  html.cine .hero__title{
    opacity:1 !important; transform:none !important;
    clip-path:none !important; filter:none !important;
  }
  html.cine .intro{ display:none !important; }
  html.cine .page-wipe{ display:none !important; }
  html.cine .parallax .ph > img{ transform:none !important; height:100% !important; }
}

/* =====================================================================
   Sprint 7: 3D/WebGL ＋ CSS3D ＋ 全画面トレンド演出（F-23 / F-24 / F-25）
   ---------------------------------------------------------------------
   設計原則（Sprint 5 と同一・段階的強化）:
   - 既定（非cine / JS無効 / reduced-motion / WebGL不可）＝全要素が最終状態。
     3D/CSS3D/全画面演出はすべて html.cine 配下でのみ有効化。
   - 段階的フォールバック: WebGL → CSS3D → 静的表示。
     WebGL canvas は cine かつ JS が「webgl-ready」を付与した時のみ可視。
   - 横スクロール非発生（共通D）: 追加要素はすべて overflow/transform 内。
     ビューポート幅を超える要素を新たに作らない。
   - 配色はアースカラー基調を厳守（原色/高彩度なし）。
   ===================================================================== */

/* ---- F-23: WebGL キャンバス層（ヒーロー背景に重畳） ----
   既定では display:none。cine かつ webgl 初期化成功時のみ可視化。
   失敗時は何も足さない＝既存ヒーロー実写真がそのまま静的表示（共通F）。 */
.webgl-stage{ display:none; }
html.cine .webgl-stage{
  display:block;
  position:absolute; inset:0;   /* 額装写真(.hero__figure)の中だけを満たす */
  z-index:0;                    /* 静的 .ph 実写真の前・装飾より後ろ */
  pointer-events:none;          /* スクロール/クリックを一切妨げない */
  opacity:0;
  transition:opacity 1400ms var(--ease-cine);
  /* 初期化前は透明＝静的実写真が見える。webgl-ready で静かにクロスフェード */
}
html.cine.webgl-ready .webgl-stage{ opacity:1; }
html.cine .webgl-canvas{
  display:block;
  width:100%; height:100%;
  /* canvas は実描画解像度を JS が devicePixelRatio 上限付きで設定 */
}

/* ---- F-24: CSS3D カード3Dチルト ＋ 奥行き ----
   対象: トップ Service カード / Works カード（既存クラス踏襲）。
   非cine/reduced-motion/JS無効では transform:none＝静的・操作可能。
   F-19 ピン留め・F-18 パララックスと同一文脈でも横スクロール非誘発
   （回転は transform のみ・はみ出しは親 overflow と perspective で吸収）。 */
/* perspective は各カード自身の transform に内包する（下記）。
   grid コンテナに perspective を置くと消失点が grid 中央で共有され、
   中央から外れたカードの子要素（写真・本文）が常時 X 方向へ射影ズレ＝
   枠外へはみ出す表示崩れになるため、コンテナ側 perspective は持たせない。 */
html.cine .service-card,
html.cine .work-card{
  transition:transform 480ms var(--ease-cine), box-shadow 480ms var(--ease-cine);
  will-change:transform;
  /* perspective() を transform 内に置く＝消失点は各カード自身の中心。
     grid 内の位置に依存せず横ズレが出ない。
     JS がポインタ位置で --rx / --ry / --tz を更新（既定は0＝平面）。 */
  transform:
    perspective(1100px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translateZ(var(--tz,0px));
}
html.cine .service-card:hover,
html.cine .work-card:hover{
  box-shadow:0 30px 60px -28px rgba(43,41,37,.42);
}
/* キーボードフォーカスでも立体フィードバック（マウス非依存・a11y） */
html.cine .work-card:focus-visible{
  --rx:4deg; --ry:-4deg; --tz:18px;
}

/* ---- F-25: 全画面シーン演出強化 ----
   (1) ヒーロー: フルスクリーン clip-path マスク・リビール
   (2) Contact CTA: ビューポート幅級の巨大タイポ＋没入シーン遷移
   いずれも overflow/clip-path/transform/opacity 内で制御し
   ドキュメント自体に水平スクロールバーを発生させない（共通D）。 */

/* (1) フルスクリーンマスク: 起動時に画面全体を上質に解く。
   オーバーレイは演出後 pointer-events:none＋除去でクリック不阻害。 */
.scene-mask{ display:none; }
html.cine .scene-mask{
  display:block;
  position:fixed; inset:0; z-index:1450;
  background:var(--c-base);
  pointer-events:none;
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
}
html.cine .scene-mask.is-open{
  animation:sceneMaskOpen 1100ms var(--ease-cine-io) forwards;
}
@keyframes sceneMaskOpen{
  0%{ clip-path:inset(0 0 0 0); }
  100%{ clip-path:inset(0 0 100% 0); }   /* 下端へ巻き上げて消える */
}
html.cine .scene-mask.is-removed{ display:none !important; }

/* (2) 巨大タイポ＋没入シーン遷移（Contact CTA を強化レイヤで拡張）。
   既存 .cta__title はそのまま。背景に巨大装飾タイポを clip 内で重ねる。 */
html.cine .section--ink#contact-cta{
  position:relative;
  overflow:hidden;             /* 巨大タイポのはみ出しをここで完全封止 */
}
.scene-type{ display:none; }
html.cine .scene-type{
  display:block;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translateY(var(--st,40px));
  font-family:var(--ff-en);
  font-size:clamp(5rem, 22vw, 19rem);
  font-weight:600; line-height:.9; letter-spacing:.02em;
  white-space:nowrap;
  color:rgba(200,167,126,.07);   /* 木肌・極薄＝原色不使用・上質 */
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity 1100ms var(--ease-cine), transform 1100ms var(--ease-cine);
  will-change:transform, opacity;
}
html.cine #contact-cta.scene-in .scene-type{
  opacity:1;
  transform:translate(-50%,-50%) translateY(0);
}
html.cine #contact-cta .cta__inner{ position:relative; z-index:1; }
/* 没入シーン遷移: CTA 進入時に内側を奥から迫り上げる。
   ★コンテンツの可視性は既存 .reveal 機構（多重防御・スイープ・安全弁）
   に一任し、ここでは opacity を 0 にしない（content 不可視リスクを排除）。
   F-25 の没入感は transform（奥行きスケール）＋巨大タイポで表現する。 */
html.cine #contact-cta .cta__inner{
  transition:transform 1000ms var(--ease-cine);
}
html.cine #contact-cta:not(.scene-in) .cta__inner{
  transform:scale(.972);
}
html.cine #contact-cta.scene-in .cta__inner{
  transform:none;
}

/* ---- 多重防御: 非cine / JS無効 / reduced-motion で全演出を無効化 ----
   （= 全コンテンツが初期表示時点で最終状態・操作可能。共通A/B/F） */
.no-js .webgl-stage,
.no-js .scene-mask,
.no-js .scene-type,
.reveal--off .scene-type{ display:none !important; }
.no-js .service-card,
.no-js .work-card,
.no-js #contact-cta .cta__inner,
.no-js #contact-cta .scene-type{
  opacity:1 !important; transform:none !important;
}
@media (prefers-reduced-motion:reduce){
  html.cine .webgl-stage{ display:none !important; }
  html.cine .scene-mask{ display:none !important; }
  html.cine .scene-type{ display:none !important; }
  html.cine .service-card,
  html.cine .work-card,
  html.cine .service-card .ph,
  html.cine .work-card .ph,
  html.cine .service-card .service-card__body,
  html.cine #contact-cta .cta__inner{
    transform:none !important;
    transition:none !important;
  }
  html.cine #contact-cta:not(.scene-in) .cta__inner,
  html.cine #contact-cta.scene-in .cta__inner{
    opacity:1 !important; transform:none !important;
  }
}
/* タッチ環境ではポインタチルトを抑制（誤操作防止・操作優先） */
@media (hover:none){
  html.cine .service-card,
  html.cine .work-card{ transform:none !important; }
  html.cine .service-card .ph,
  html.cine .work-card .ph,
  html.cine .service-card .service-card__body{ transform:none !important; }
}