/* =====================================================================
   KK Generation LP — styles
   色・グラデーション・字間は Figma の実値 (get_design_context) から転記。
   PC幅 1440px 基準・フローレイアウト（背景パネルはビューポート全幅）。
   ===================================================================== */

/* ---------- Figma variables ---------- */
:root {
  --white:       #ffffff;
  --primary-1-2: #03111a;
  --primary-2:   #086dff;
  --navy-900:    #051c2c;
  --accent-1:    #f37021;
  --secondary-2: #d0d2db;
  --secondary-3: #2aace2;

  --glass-from: rgba(8, 109, 255, 0.5);
  --glass-to:   rgba(18, 30, 73, 0.1);

  /* カード／ボックスの標準サーフェス（白地テーマの既定面） */
  --surface-tint: rgba(8, 109, 255, 0.15);

  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Futura", "Century Gothic", "Jost", sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
strong { font-weight: 700; }

html { background: var(--primary-1-2); scroll-behavior: smooth; }
/* 画面の外にはみ出す装飾（ヒーローの登場アニメーションの拡大・右端まで裁ち落とすロゴカルーセル）で
   横スクロールが出ないよう、画面端で切る。hidden と違いスクロール領域を作らないので sticky は壊れない */
html { overflow-x: clip; }
body {
  font-family: var(--font-jp);
  color: var(--white);
  background: var(--primary-1-2);
  min-width: 1440px;
  /* 日本語の折り返しを文節単位に寄せる（泣き別れ対策・サイト全体）。
     既定の word-break:normal は禁則処理しかしないので、箱に収まらない行が
     「数日〜数週／間かかり、」「依存が強／く、」のように語の途中で切れていた。
     auto-phrase は形態素解析で文節境界を優先するため、同じ箱幅のままでも
     「1案件の数量拾いに／数日〜数週間かかり、」と切れる。
     未対応ブラウザ（Firefox）は normal にフォールバックするだけで劣化しない。
     ⚠️ 手動の <br> との関係はカード幅次第で、機械的にどちらとも言えない。
        <br> の前後がそれぞれ1行に収まる幅なら <br> は節の切れ目として効くが、
        収まらない幅（.pain の 240px など）だと「強く、」のような孤立行を作る。
        実測では課題カードの <br> は 5LP で外したほうが良く（積算AI・検図照査AI・
        BIM生成AI・施工フィジカルAI・個別AI実装）、2LP では残したほうが良かった
        （図面生成AI・確認審査AI）。原稿を変えたら Range で行を復元して見直すこと。
     ⚠️ 検証: 全15ページ1741要素で行数増は11件（.p2 が1行増えるのみ）、
        固定高コンテナのはみ出しはゼロ */
  word-break: auto-phrase;
}
main { position: relative; z-index: 1; }

/* サイト全体の背景テクスチャ
   images/particles.png は Adobe Stock #499913517 のライセンス購入版（透かしなし）。
   原本は assets-src/AdobeStock_499913517.jpeg（5481x2737）。書き出しは
   2000px 幅にリサイズして PNG 化しただけで、カンプ版と同寸・同構図。
   Figma 上では 49:1663「image 75」。白地に濃い線の素材なので invert して
   スクリーン合成し、暗い地に淡い線として乗せている */
.bglines {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: url("../images/particles.png") center top repeat-y;
  /* 横は「1枚絵」で敷く。1440px タイルの repeat だと、1440 より広い画面では
     x=1440 に2枚目の左端が来て、波が途中から生え直したように見える。
     background-size:100% auto なら素材の横幅がビューポート幅に合うので、
     横方向の継ぎ目そのものが無くなる（auto なので縦横比は崩れない）。
     LP（lp.css の .lp .bglines）と同じ考え方 */
  background-size: 100% auto;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.14;
  /* パララックスは script.js が background-position の縦だけを動かす */
}

/* 中央 1440px カラム */
.inner { position: relative; width: 1440px; margin: 0 auto; }

/* ---------- typography ---------- */
/* 下層ページの主見出し。.h2 と同じ40pxだが weight 700 で区別する
   （docs/design-system.md 「2. タイポグラフィスケール > .h1 決定」） */
.h1 { font-size: 40px; font-weight: 700; line-height: normal; letter-spacing: 2px; }
.h2 { font-size: 40px; font-weight: 500; line-height: normal; letter-spacing: 2px; }
.h3 { font-size: 32px; font-weight: 500; line-height: normal; letter-spacing: 1.6px; }
.h4 { font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px; }
.p1 { font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: 0.8px; }
.p2 { font-size: 14px; font-weight: 400; line-height: 1.75; letter-spacing: 0; }
.en { font-family: var(--font-en); font-weight: 500; font-style: normal; }

.glow  { text-shadow: 0 0 10px var(--primary-2); }
.glow4 { text-shadow: 0 0 4px var(--primary-2); }
/* 強調ラン。inline-block にして「こんな課題」が「こんな／課題」に割れるのを防ぐ。
   「こんな」は連体詞なので auto-phrase 的には正しい文節境界なのだが、
   強調が2行に泣き別れると視覚的な塊が壊れる。
   nowrap ではなく inline-block なのは、箱幅より長い強調なら内部で折り返せるようにするため。
   実測で最長の .b は13文字（「ロボットが動ける現場データ」）なので溢れない。 */
.b     { color: var(--primary-2); display: inline-block; }
/* 両端揃え。
   ⚠️ word-break:auto-phrase（body）とは相性が悪い。auto-phrase は文節を丸ごと
      次行へ送るので短い行ができやすく、justify がそれを引き伸ばして
      「複 数 の 特 許 で 構 成 さ れ 、」のような間延びした行になる（実測: 21字/28字）。
      かといって auto-phrase を切ると「特許取得済の独／自のAI認識」と語中で割れる。
      両立しないので、文節折り返しを優先して右端はラグ（左揃え）にする。
      両端揃えに戻す場合は下の text-align を justify に戻すこと（その場合は
      間延びした行が復活する）。 */
.is-justify { text-align: left; }
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  height: 56px; overflow: hidden; text-overflow: ellipsis;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a:focus-visible { outline: 2px solid var(--secondary-3); outline-offset: 2px; }

/* ---------- shared components ---------- */
.glass {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--white);
  background: linear-gradient(var(--ga, 146deg), var(--glass-from) 0%, var(--glass-to) 100%);
}

/* セクション見出しラベル（01 INTRODUCTION など）。
   [配置契約] .flabel は常に通常フロー。position:absolute は使わない。
   位置はセクション側が与える。与え方は次の2つだけ:
     a) 親を display:flow-root にして、ラベルに margin: <top> 0 0 <left> を書く
     b) 親がグリッドのとき、ラベル専用の1行目に置く（.problem / .solution）
   a) の flow-root は必須。省くとラベルの margin-top が親をすり抜けて
   （マージン相殺）セクションごと下がり、ラベルはセクション先頭に貼り付く。
   width:max-content は「内容ぴったりの箱」を保つため（旧・絶対配置と同じ挙動）。 */
.flabel { display: flex; flex-direction: column; gap: 16px; width: max-content; }
.flabel__num {
  font-family: var(--font-en); font-weight: 500;
  font-size: 12px; letter-spacing: 0.6px; line-height: normal;
  padding-bottom: 4px; border-bottom: 1px solid var(--white);
  width: max-content;
}
.flabel__en {
  font-family: var(--font-en); font-weight: 500;
  font-size: 14px; letter-spacing: 0.7px; line-height: normal;
}

.hen {
  font-family: var(--font-en); font-weight: 500;
  font-size: 32px; letter-spacing: 1.6px; line-height: normal;
  color: var(--secondary-3);
}

.btn {
  display: flex; align-items: center; justify-content: space-between;
  /* Figma実値は 200px 固定だったが、ラベルが長いCTA（「無料相談・デモ利用をする」= 実測153px）だと
     矢印に文字が密着して 3px はみ出す。min-width にしてラベルぶんだけ伸びるようにした。
     gap はラベルと矢印の最小間隔。短いラベルでは箱が 200px のままなので space-between が
     効いて従来と同じ見た目になる。24px は既存ボタンの実測間隔の最小値（.hero__btn
     「私たちのサービス」の 31.7px）を下回る値。40px にすると .hero__btn が 209px に
     広がって Figma実値からずれるので上げないこと */
  width: auto; min-width: 200px; gap: 24px; padding: 12px 8px;
  border-bottom: 1px solid var(--accent-1);
  font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0.7px;
  color: var(--accent-1);
  transition: background 0.3s ease, color 0.3s ease;
}
/* hug は「内容ぴったり」が意図なので min-width を持ち込まない */
.btn--hug { width: auto; min-width: 0; gap: 40px; justify-content: flex-start; }
/* 矢印は CSS で出す。以前は <a> の中に <img src="arrow.svg"> を直接置いていたが、
   ボタンのHTMLを管理画面から入れられるようにした結果、編集者が毎回
   <img> とそのURLを書く必要が出てしまうため。装飾であって内容ではないので
   ::after が正しい置き場所。flex の2つ目の子として space-between が効く */
.btn::after {
  content: ""; flex: 0 0 auto;
  width: 32.4px; height: 11.1px;
  background: url("../images/arrow.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.btn:hover { background: rgba(243, 112, 33, 0.08); }
.btn:hover::after { transform: translateX(6px); }

.tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 12px; border: 1px solid var(--white); border-radius: 4px;
  font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0.7px;
  color: var(--white);
}
.tag--blue { border-color: var(--primary-2); color: var(--primary-2); }
.metarow { display: flex; align-items: center; gap: 8px; }
.metarow--end { justify-content: flex-end; width: 100%; }

/* ---------- 導入企業ロゴ（3ブロック × 横スクロール） ----------
   WordPress では 1 ブロック = 1 グループとしてロゴを自由に増減できる想定。
   .logos__track の中身は logos.js が複製し、-50% 送りで無限ループさせる。
   ブロック数・件数が変わってもCSSの変更は不要 */
.logos { display: flex; flex-direction: column; }
.logos__row { overflow: hidden; height: 112.5px; }
.logos__track {
  display: flex; width: max-content;
  animation: logoMarquee var(--dur, 40s) linear infinite;
}
.logos__row--rev .logos__track { animation-direction: reverse; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos__item {
  flex: 0 0 112.5px; width: 112.5px; height: 112.5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border-right: 0.563px solid var(--secondary-2);
  border-bottom: 0.563px solid var(--secondary-2);
}
.logos__item img { width: 90px; height: auto; max-height: 90px; object-fit: contain; }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 複製前（JS無効時）は静的に並ぶだけ */
.logos__track:not(.is-looping) { animation: none; }

/* カード型リンクの共通ホバー */
.linkcard {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.linkcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(8, 109, 255, 0.3);
}

.hgroup { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 8px; }
.hgroup h2 { white-space: nowrap; }

/* ---------- 見出し下線 ----------
   旧実装は縦向きSVG(51×N)を rotate(90deg) で寝かせていた。
   同じ絵（1px #086dff の線 + ぼかした青の楕円）を画像なしで描く。
     .uline の background … 1px の線（長さ = --uline-w）
     .uline::after        … 中央のにじみ（縦グラデ × 横マスクで楕円のぼかしを再現）
     .uline::before       … 出現後に一度走るハイライト（sweep）
   --uline-w は旧 .uline img の height と同値。線の長さは見出し幅と一致しない
   箇所があるため（例: .solution__intro はコンテナ1001pxに対し線878px）、
   見た目を変えないようセクションごとの実値を維持している */
.uline {
  position: relative;
  width: 100%;
  height: 11px;
  --uline-w: 878px;
}
/* 1px の線。旧SVGはサブピクセル位置にあり2行に約50%ずつ分かれて描かれていたので
   2px帯×50%で同じ見えにする。線が .hgroup 幅より長い箇所（.cta__in 等）が
   あるため、要素の背景ではなく「はみ出せる」擬似要素で描く */
.uline::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: var(--uline-w); height: 1px;
  /* 旧実装は transform 付きの <img> だったため、要素境界がスナップされず
     サブピクセル位置のまま描かれていた。同じ見えにするため縦位置も transform で与える */
  transform: translate(-50%, 5.5px);
  background: var(--primary-2);
  pointer-events: none;
}
/* にじみ: 旧SVGの ellipse(rx 5.5 / ry = 線長×0.2848 / blur σ=10) 相当。
   縦52pxにガウス状のフォールオフ、横は楕円のテーパーをマスクで与える */
.uline::after {
  content: "";
  position: absolute;
  left: 50%; top: -20.5px;
  /* 楕円の直径 + ぼかしの裾(±20px) */
  width: calc(var(--uline-w) * 0.5695 + 40px);
  height: 52px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 109, 255, 0)     1.9%,
    rgba(8, 109, 255, 0.026) 5.8%,
    rgba(8, 109, 255, 0.048) 9.6%,
    rgba(8, 109, 255, 0.070) 13.5%,
    rgba(8, 109, 255, 0.105) 17.3%,
    rgba(8, 109, 255, 0.140) 21.2%,
    rgba(8, 109, 255, 0.188) 25.0%,
    rgba(8, 109, 255, 0.236) 28.8%,
    rgba(8, 109, 255, 0.288) 32.7%,
    rgba(8, 109, 255, 0.328) 36.5%,
    rgba(8, 109, 255, 0.367) 40.4%,
    rgba(8, 109, 255, 0.397) 44.2%,
    rgba(8, 109, 255, 0.410) 48.1%,
    rgba(8, 109, 255, 0.410) 51.9%,
    rgba(8, 109, 255, 0.406) 55.8%,
    rgba(8, 109, 255, 0.384) 59.6%,
    rgba(8, 109, 255, 0.349) 63.5%,
    rgba(8, 109, 255, 0.310) 67.3%,
    rgba(8, 109, 255, 0.258) 71.2%,
    rgba(8, 109, 255, 0.210) 75.0%,
    rgba(8, 109, 255, 0.166) 78.8%,
    rgba(8, 109, 255, 0.122) 82.7%,
    rgba(8, 109, 255, 0.087) 86.5%,
    rgba(8, 109, 255, 0.057) 90.4%,
    rgba(8, 109, 255, 0.035) 94.2%,
    rgba(8, 109, 255, 0.017) 98.1%,
    rgba(8, 109, 255, 0)     100%);
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0)     0%,
    rgba(0, 0, 0, 0.266) 5.6%,
    rgba(0, 0, 0, 0.553) 11.2%,
    rgba(0, 0, 0, 0.702) 16.8%,
    rgba(0, 0, 0, 0.809) 22.3%,
    rgba(0, 0, 0, 0.894) 27.9%,
    rgba(0, 0, 0, 0.947) 33.4%,
    rgba(0, 0, 0, 0.979) 39.0%,
    rgba(0, 0, 0, 0.989) 44.5%,
    rgba(0, 0, 0, 1)     50%,
    rgba(0, 0, 0, 0.989) 55.5%,
    rgba(0, 0, 0, 0.979) 61.0%,
    rgba(0, 0, 0, 0.947) 66.6%,
    rgba(0, 0, 0, 0.894) 72.1%,
    rgba(0, 0, 0, 0.809) 77.7%,
    rgba(0, 0, 0, 0.702) 83.2%,
    rgba(0, 0, 0, 0.553) 88.8%,
    rgba(0, 0, 0, 0.266) 94.4%,
    rgba(0, 0, 0, 0)     100%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0)     0%,
    rgba(0, 0, 0, 0.266) 5.6%,
    rgba(0, 0, 0, 0.553) 11.2%,
    rgba(0, 0, 0, 0.702) 16.8%,
    rgba(0, 0, 0, 0.809) 22.3%,
    rgba(0, 0, 0, 0.894) 27.9%,
    rgba(0, 0, 0, 0.947) 33.4%,
    rgba(0, 0, 0, 0.979) 39.0%,
    rgba(0, 0, 0, 0.989) 44.5%,
    rgba(0, 0, 0, 1)     50%,
    rgba(0, 0, 0, 0.989) 55.5%,
    rgba(0, 0, 0, 0.979) 61.0%,
    rgba(0, 0, 0, 0.947) 66.6%,
    rgba(0, 0, 0, 0.894) 72.1%,
    rgba(0, 0, 0, 0.809) 77.7%,
    rgba(0, 0, 0, 0.702) 83.2%,
    rgba(0, 0, 0, 0.553) 88.8%,
    rgba(0, 0, 0, 0.266) 94.4%,
    rgba(0, 0, 0, 0)     100%);
}

/* =====================================================================
   HEADER (fixed)
   ===================================================================== */
.menu {
  position: fixed; left: 0; top: 0; z-index: 50;
  width: 100%; min-width: 1440px;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--white);
  /* ヘッダー・メガメニュー・SPドロワーはどのページでも暗い面。
     白地ページ(body.lp)は文字色が --primary-1-2 なので、色指定を持たない
     子要素（.mega__name など）が地に沈んで読めなくなる。
     面の側で明示的に白を敷き、配下は既定で白を継承させる */
  color: var(--white);
}
.menu__in {
  width: 1440px; height: 80px; margin: 0 auto; padding: 0 80px;
  display: flex; align-items: center; justify-content: space-between;
}
/* ロゴ＋タグライン。ロゴ自体がTOPリンクなので「TOP」ナビ項目は置かない */
.menu__logo { display: flex; flex-direction: column; gap: 2px; }
.menu__logo img { width: 112px; height: 48px; }
.menu__tagline {
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.55px;
  color: rgba(255, 255, 255, 0.75); white-space: nowrap;
}

.menu__nav { display: flex; align-items: center; gap: 40px; }
.menu__nav > a { font-size: 14px; line-height: 1.75; color: var(--white); transition: color 0.25s; }
.menu__nav > a:hover { color: var(--secondary-3); }
.menu__nav > a.is-accent { color: var(--accent-1); }
.menu__nav > a.is-accent:hover { color: #ff8a47; }

/* ---------- プロダクトのメガメニュー ----------
   .menu__item は position:static のままにして、パネルを .menu（fixed）基準で全幅に開く */
.menu__item { position: static; }
.menu__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-jp); font-size: 14px; line-height: 1.75;
  color: var(--white);
  transition: color 0.25s;
}
.menu__trigger:hover, .menu__item.is-open .menu__trigger { color: var(--secondary-3); }
.menu__caret {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}
.menu__item.is-open .menu__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.mega {
  position: absolute; left: 0; top: 100%;
  width: 100%; min-width: 1440px;
  background: rgba(3, 17, 26, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--primary-2);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.menu__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__in {
  width: 1280px; margin: 0 auto; padding: 32px 0 36px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px;
}
.mega__link {
  display: block; padding: 12px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.mega__link:hover { background: rgba(8, 109, 255, 0.16); border-left-color: var(--accent-1); }
.mega__phase {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.6px;
  color: var(--primary-2);
}
.mega__name {
  display: block; margin-bottom: 4px;
  font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0.8px;
}
.mega__desc {
  display: block;
  font-size: 12px; line-height: 1.6; letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}
.mega__all { align-self: center; justify-self: start; margin-left: 16px; }

/* ハンバーガー（SPのみ表示） */
.menu__burger { display: none; }

/* =====================================================================
   HERO
   ===================================================================== */
/* Figma 260723 > Top (202:9703) の実値。
   KVは「KV_Final Photoshop_nocopy 1」(210:11082) = 見出し焼き込みなしの素材に更新。
   フレーム座標: ヘッダー帯 0-80(#0b1539) / KV 80-890(1440×810) /
   見出し 80,285 / リード 80,471 / ボタン 80,569
   焼き込みが無くなったので拡大してもズレない。全幅 cover で敷き、
   1440より広い画面でも左右に切れ目が出ない */
.hero {
  position: relative; height: 890px; overflow: hidden;
  background: #0b1539;
}
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 80px; height: 810px;
  /* --kv は管理画面で差し替えたときだけ入る（front/hero.php）。未設定なら既定の素材 */
  background: var(--kv, url("../images/hero-kv.jpg")) center center / cover no-repeat;
}
.hero .inner { height: 100%; }
.hero__title { position: absolute; left: 80px; top: 285px; }
.hero__t1 {
  display: block;
  font-size: 64px; font-weight: 500; line-height: 1.2; letter-spacing: 3.2px;
  color: var(--white); white-space: nowrap;
}
/* 285+154(見出し実高) → 471 なので 32px 空ける */
.hero__t2 {
  display: block; margin-top: 32px;
  font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px;
  color: var(--white); white-space: nowrap;
}
.hero__btn { position: absolute; left: 80px; top: 569px; }

/* =====================================================================
   01 INTRODUCTION
   ===================================================================== */
.intro { position: relative; height: 667px; }
.intro__scrim {
  position: absolute; left: 0; top: -6px;
  width: 100%; height: 400px;
  filter: blur(30px);
  background: linear-gradient(90.18deg, #070f30 0%, #010002 36.03%, #000a29 60.71%, #001439 91.73%);
}
.intro .inner { height: 100%; display: flow-root; }
.intro__label { margin: 40px 0 0 160px; }
/* top はアイキャッチ（.intro__eyebrow 17px + gap 12px = 29px）の分だけ
   135px から繰り上げてある。見出しの位置はFigma実測のまま変わらない。
   105px は「01 INTRODUCTION」ラベルの下端（96px）と重ならない最小値 */
.intro__copy  { position: absolute; left: 160px; top: 105px; display: flex; flex-direction: column; gap: 24px; white-space: nowrap; }

/* 左＝課題 / 右＝解決策 の対応を明示する小見出し。
   .flabel__en と同じ字面で、色だけアクセントに振る */
.intro__eyebrow {
  font-family: var(--font-en); font-weight: 500;
  font-size: 14px; letter-spacing: 0.7px; line-height: normal;
  color: var(--primary-2);
}
/* アイキャッチと見出しは一つの塊。.intro__copy の gap:24px を 12px に詰める */
.intro__copy .intro__eyebrow { margin-bottom: -12px; }

/* 右カラム（Our Solutions）。動画は枠内に通常フローで置く。
   left は統計カードの右端（520+216=736px）から24px空けた位置。
   top は .intro__copy と同値。左右のアイキャッチが同じ高さに揃う */
/* 右端 1360px はフッター（80..1360）と同じ。左は統計カードの右端（736px）から
   64px 空ける。旧値は left:760 / width:600 で、カードとの間が24pxしかなく
   動画が左に寄って見えていた。右端を動かすとフッターとの縦ラインがズレるので、
   位置ではなく幅で詰めている */
.intro__offer {
  position: absolute; left: 800px; top: 105px;
  width: 560px;
  display: flex; flex-direction: column; gap: 24px;
}
/* 動画の上に置く提供価値の一言。左カラムの見出し（.h3 = 24px）より一段落として、
   主役が動画のままになるようにする。
   高さの内訳は 20px × 1.4 × 2行 = 56px。これに アイキャッチ18.5 + gap24 + gap24 を
   足した 122.5px が動画の上に積まれるので、動画（315px）の下端が
   105 + 122.5 + 315 = 542.5px ≒ 左の統計カードの下端（541px）に揃う。
   一言の行数やフォントを変えるとこの一致が崩れるので、変更時は下端を測り直すこと */
.intro__lead {
  font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: 1px;
  color: var(--white);
}

/* デモ動画枠（Figmaは #d9d9d9 のプレースホルダー + 72.5px の再生アイコン）。
   16:9 のまま 500px → 600px に拡大（フィードバック 20260803 B-3）、
   その後 560px に微調整（統計カードとの間隔を空けるため。.intro__offer 参照）。
   中身は poster + 再生ボタンで、押すとモーダル（.vmodal）が開く。
   <button> なので border/padding/背景をリセットしてから枠を作る */
.intro__movie {
  position: relative;
  width: 560px; height: 315px; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden;
  background: #d9d9d9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}
.intro__movie:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(8, 109, 255, 0.35); }
.intro__movie:focus-visible { outline: 3px solid var(--primary-2); outline-offset: 3px; }
.intro__movie__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 再生の三角。border で作るので中身のない span 1枚で済む
   （margin-left は三角の重心ぶんの光学調整） */
.intro__movie__play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(4, 14, 28, 0.62);
  display: grid; place-items: center;
  transition: background 0.2s;
}
.intro__movie__play::after {
  content: ""; display: block;
  width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.intro__movie:hover .intro__movie__play { background: var(--primary-2); }
.intro__movie__cap {
  margin-top: -12px;   /* .intro__offer の gap:24px を詰めて枠に寄せる */
  font-size: 12px; font-weight: 400; line-height: 1.6; letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
}

/* 高さは 144px → 168px。3枚目（タグ付き）が「見出し + 注記 + 数値 + タグ」の
   4段になり 144px に収まらなくなったため、3枚とも揃えて広げてある。
   left/top はFigma実測のまま。下に伸びるだけなので次セクションとは干渉しない */
.stat { position: absolute; width: 216px; height: 168px; padding: 16px; display: flex; align-items: center; }
.stat__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.stat__in--between { height: 136px; justify-content: space-between; gap: 0; }
/* 注記が長い（「※10年で331万人→296万人」）ので、カード内幅いっぱいまで使う */
.stat__head { display: flex; flex-direction: column; gap: 8px; width: 184px; white-space: nowrap; }
.stat__note { font-size: 10px; letter-spacing: 0.5px; line-height: normal; }
.stat__value { font-size: 40px; letter-spacing: 3.2px; line-height: normal; white-space: nowrap; }
.stat__value span { font-size: 24px; }
.stat__value--jp { letter-spacing: 2.4px; }
.stat__value--jp .unit-jp { font-family: var(--font-jp); letter-spacing: 1.2px; }
.stat__foot { display: flex; flex-direction: column; }
.stat__tag { font-size: 14px; font-weight: 700; letter-spacing: 0.7px; line-height: normal; color: var(--primary-2); }

/* =====================================================================
   02 SOLUTION
   ===================================================================== */
.solution { position: relative; }
/* ラベルと本文が2つとも通常フローなので、グリッドで縦に積む（.problem と同じ流儀）。
   1行目 87px がラベル帯 = 旧 .inner の padding-top:87px。
   padding だとラベル（旧 top:0）を padding の外に置けないためグリッドにした。
   ⚠️ 直下の .inner だけ。子孫セレクタだと .stack__in（同じく .inner）にも当たる */
.solution > .inner { display: grid; grid-template-columns: 1fr; grid-template-rows: 87px auto; }
.solution__label { grid-area: 1 / 1; align-self: start; justify-self: start; margin-left: 160px; }
.solution__intro {
  grid-area: 2 / 1;
  width: 1001px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

/* ---- バリューチェーン ----
   工程シェブロン4枚 + 全工程を貫く「BIM生成AI」帯。
   各ブロックは下のプロダクト詳細へのページ内リンク（script.js がスタック位置へスクロール）。
   シェブロン形状は Figma の path をそのまま clip-path 化（backdrop-blur も Figma 実値 20px）*/
.chain { position: relative; width: 1001px; height: 218.19px; margin-top: 24px; }
.chain__item { position: absolute; left: var(--x); top: 0; }
.chain__link {
  position: relative; display: block;
  width: 268.162px; height: 130.19px;
  transition: transform 0.3s ease;
}
.chain__link:hover { transform: translateY(-3px); }

.chain__shape {
  position: absolute; left: 0; top: 13.19px;
  width: 268.162px; height: 117px;
  backdrop-filter: blur(20px);
  background: linear-gradient(156.4deg, var(--glass-from) 0%, var(--glass-to) 100%);
  /* 左に切り欠き（前工程の矢先を受ける）+ 右に矢先 */
  clip-path: polygon(0 0, 221.882px 0, 268.162px 58.5px, 221.882px 117px, 0 117px, 0 115.736px, 45.283px 58.5px, 0 1.263px);
  transition: filter 0.3s ease;
}
/* 先頭（企画）だけ左の切り欠きなし */
.chain__shape--head { clip-path: polygon(0 0, 221.882px 0, 268.162px 58.5px, 221.882px 117px, 0 117px); }

.chain__tag {
  position: absolute; left: calc(var(--tx) - var(--x)); top: 3.19px;
  width: 61.603px; height: 20.578px;
  background: url("../images/vc/tag.svg") 0 0 / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1.75; letter-spacing: 0;
  color: var(--white); white-space: nowrap;
  z-index: 2;
}
.chain__body {
  position: absolute; left: calc(var(--bx) - var(--x)); top: 42.19px;
  display: flex; align-items: center; gap: 16px;
  z-index: 1;
}
.chain__icon { width: 60px; height: 60px; transition: transform 0.3s ease; }
.chain__name {
  font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px;
  color: var(--white); text-shadow: 0 0 10px var(--primary-2);
  white-space: nowrap;
  transition: text-shadow 0.3s ease;
}
.chain__name b { color: var(--primary-2); font-weight: 700; }
.chain__name--2l { white-space: nowrap; } /* <br> で2行（Figma: 施工 / フィジカルAI） */

/* BIM生成AI（全工程を横断する帯） */
.chain__item--bar { left: 0; top: 142.19px; }
.chain__item--bar .chain__link { width: 1001px; height: 76px; }
.chain__shape--bar {
  top: 0; width: 1001px; height: 76px;
  clip-path: none;
  backdrop-filter: blur(10px);
  background: linear-gradient(175.66deg, var(--glass-from) 0%, var(--glass-to) 100%);
}
.chain__item--bar .chain__body { left: 412px; top: 8px; }

/* クリックできることが分かるホバー */
.chain__link:hover .chain__shape { filter: brightness(1.5) saturate(1.1); }
.chain__link:hover .chain__icon { transform: translateY(-2px) scale(1.06); }
.chain__link:hover .chain__name { text-shadow: 0 0 20px var(--primary-2), 0 0 8px rgba(255, 255, 255, 0.55); }
.chain__link:focus-visible { outline: 2px solid var(--secondary-3); outline-offset: 2px; }

/* バリューチェーン図の注記。
   .chain は position:relative の図版で高さが実測固定なので、注記はその外（.solution__intro
   のフロー）に置く。__intro は align-items:center なので、図の左端に揃えるには
   図と同じ 1001px を持たせてから左寄せする。 */
.chain__note {
  width: 1001px;
  margin-top: -8px;   /* .solution__intro の gap:24px を詰めて図に寄せる */
  font-size: 12px; font-weight: 400; line-height: 1.6; letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- プロダクトのスクロールスタック ----
   基本(JS無効/reduced-motion): カードを縦に並べる静的表示。
   JS有効時(.stack--js): ステージを100vhで固定し、スクロール量に応じて
   次のカードが下から滑り込み前のカードを覆う（script.jsがtransformを駆動） */
.stack { position: relative; margin-top: 120px; }
/* 87px は旧 `.solution .inner { padding-top: 87px }` が子孫セレクタで
   ここにも当たっていたぶん。ラベル帯をグリッド化してセレクタを直下に絞った際、
   見た目を変えないようこちらへ明示的に移した */
.stack__in { display: flex; align-items: flex-start; padding-top: 87px; }

/* ステージ高はカード＋イラストの実寸ぶんだけ（460px）。
   100vh にするとカードの下に数百pxの死に領域ができてしまう。
   ビューポート中央に固定する */
.stack--js .stack__stage {
  position: sticky; top: max(0px, calc(50vh - 230px));
  height: 460px;
  overflow: hidden;
}
.stack--js .stack__in { height: 100%; }
.stack--js + .tailor { margin-top: 140px; }

/* 左レール（進行に合わせて発光）
   固定ヘッダー(80px)と被らないよう、ステージ上端から余裕を持たせて配置する */
.rail { flex: 0 0 360px; align-self: stretch; }
/* 縦線・ドット・矢印はすべて中心 x = 7.64px（Figma: 線 85.57 / ドット中心 85.64）に揃える */
.rail__sticky { position: sticky; top: 340px; margin-left: 78px; width: 240px; height: 231px; }
/* JSモード: ステージ自体が固定されるためstickyは不要。
   ただし線・点・矢印(absolute)の基準になるよう positioned は維持する */
.stack--js .rail { padding-top: 100px; }
.stack--js .rail__sticky { position: relative; top: 0; }
.rail__line {
  position: absolute; left: 7.14px; top: 0;
  width: 1px; height: 231px; /* Figma: 線＋矢先で 231.06px */
  background: rgba(255, 255, 255, 0.75);
}
.rail__arrow {
  position: absolute; left: 2.64px; top: 219px;
  width: 10px; height: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  transform: rotate(-45deg);
}
/* 工程ラベルは 44px ピッチ（Figma: dot top 298/342/386/430・テキスト top 289〜） */
.rail ul { position: absolute; left: 0; top: 29px; }
.rail li {
  position: relative; margin-bottom: 16px; padding-left: 42px;
  font-size: 16px; line-height: 28px; letter-spacing: 0.8px;
  color: var(--white); opacity: 0.4; white-space: nowrap;
  transition: opacity 0.35s ease;
}
.rail li::before {
  content: ""; position: absolute; left: 3.14px; top: 9.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.rail li.is-active { opacity: 1; }
/* Figma: 9px の #F37021 + 13px の #F37021 をぼかした発光（青のグローは無し） */
.rail li.is-active::before {
  background: var(--accent-1);
  box-shadow: 0 0 10px 2px var(--accent-1);
}

/* カード */
.stack__cards { width: 1080px; display: flex; flex-direction: column; gap: 100px; }
.stack--js .stack__cards { position: relative; height: 100%; display: block; }
.stack--js .pcard {
  position: absolute; left: 0; top: 60px;
  will-change: transform, opacity;
}

.pcard {
  position: relative; width: 1080px; height: 300px;
  background: var(--primary-1-2);
  scroll-margin-top: 100px;
}
.pcard::before {
  content: ""; position: absolute; inset: 0;
  backdrop-filter: blur(10px);
  background: linear-gradient(164.48deg, var(--glass-from) 0%, var(--glass-to) 100%);
}
.pcard__glow { position: absolute; left: -39px; top: -52px; width: 79px; height: 404px; }
.pcard__body { position: absolute; left: 80px; top: 40px; width: 840px; z-index: 1; }
.pcard__body h3 { padding-bottom: 8px; margin-bottom: 16px; width: max-content; }
.pcard__body .p1 { margin-bottom: 40px; }
.pcard__links { display: flex; gap: 40px; }
/* カード(300px)の中に収める。
   旧実装は top:110px で、図の下端がカードの 80px 下（=380px）まで出ていた。
   .stack--js のステージは高さ460pxで overflow:hidden（次のカードが下から
   滑り込む演出に必要）なので、はみ出した図はそこで水平に切り落とされていた
   （実測 67px 欠け）。上下15pxの余白を持たせてカード内に収めれば、
   ステージ高に関係なく切れない。
   左端はマスクでフェードさせる。図は本文の背面に敷く背景要素なのに、
   不透明な矩形の縁が本文テキストを横切って見えていたため */
.pcard__fig {
  position: absolute; left: 520px; top: 15px; width: 480px; height: 270px; z-index: 0;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}

/* テーラーメイド帯（全幅） */
.tailor {
  position: relative; margin-top: 160px;
  width: 100%; height: 300px;
  backdrop-filter: blur(10px);
  background: linear-gradient(168.23deg, var(--glass-from) 0%, var(--glass-to) 100%);
}
.tailor__glow {
  position: absolute; left: 50%; top: 0.5px;
  width: 79px; height: 1440px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.tailor__in {
  position: absolute; left: 50%; top: 59px; transform: translateX(-50%);
  width: 840px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.tailor__head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tailor__head h3 { padding-bottom: 8px; }
.tailor__head .p1 { text-align: center; }

/* =====================================================================
   03 CLIENTS
   ===================================================================== */
.clients { position: relative; margin-top: 120px; }
.clients .inner { height: 450px; display: flow-root; }
.clients__label { margin: 24px 0 0 160px; }
.clients__copy {
  position: absolute; left: 160px; top: 139px;
  display: flex; flex-direction: column; gap: 24px; white-space: nowrap;
}
.clients__glowline { position: absolute; left: 661px; top: -30px; width: 79px; height: 510px; }
/* ロゴカルーセルは右端まで裁ち落とし（Figmaも1440の外へ続く） */
.clients__logos { position: absolute; left: 702px; top: 56px; right: min(0px, calc((1440px - 100vw) / 2)); }

/* =====================================================================
   04 STRENGTHS
   ===================================================================== */
.strengths { position: relative; margin-top: 80px; }
/* ⚠️ .strengths__hgroup は position:absolute と書かれているが、後段の
   `.hgroup { position: relative }`（同詳細度・後勝ち）に負けて通常フローで効いている。
   つまりラベルと見出しの2つが通常フローなので、.solution と同じくグリッドで積む。
   1行目 95px が見出しの上端 = 旧 .strengths__hgroup の top:95px。 */
.strengths .inner { height: 708px; display: grid; grid-template-columns: 1fr; grid-template-rows: 95px auto; }
.strengths__label { grid-area: 1 / 1; align-self: start; justify-self: start; margin-left: 160px; }
.strengths__hgroup { grid-area: 2 / 1; align-self: start; left: 280px; width: 880px; }
.strengths__hgroup .uline { --uline-w: 880px; }

.strengths__cols { position: absolute; left: 220px; top: 220px; display: flex; gap: 200px; }
.strength { width: 400px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
/* アイコンは左・テキストは20px（Figma 260723 更新分） */
.strength__card {
  width: 400px; height: 163px; padding: 16px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.strength__icon {
  flex: 0 0 56px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.strength__text { display: flex; flex-direction: column; align-items: center; gap: 8px; white-space: nowrap; }
.strength__title { font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: 1px; text-align: center; }
.strength__badge { font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0.7px; color: var(--primary-2); }

.strengths__y { position: absolute; left: 690px; top: 326px; width: 59px; height: 276px; }
.strengths__y30 { position: absolute; left: -155px; top: 113.6px; width: 299.4px; height: 71.8px; transform: rotate(90deg); }
.strengths__y31 { position: absolute; left: 38.6px; top: -9.1px; width: 52.9px; height: 71px; transform: rotate(90deg) scaleY(-1); }
.strengths__yarrow { position: absolute; left: 0.5px; top: 261.1px; width: 59px; height: 38.7px; }

.strengths__cglow {
  position: absolute; left: 559px; top: 261px;
  width: 322px; height: 820px;
  transform: rotate(90deg);
  pointer-events: none;
}
.strengths__conclusion {
  position: absolute; left: 720px; top: 642px; transform: translateX(-50%);
  font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px;
  text-align: center; white-space: nowrap;
}

/* =====================================================================
   04 と 05 の間: BIM生成AIの精度比較（番号なし）
   STRENGTHS の .inner は高さ 708px 固定なので、その下に通常フローで積む。
   横幅・左端は 05 INITIATIVES のメディア枠（left:160px / 1120px）に揃える。
   ===================================================================== */
.bench { position: relative; margin-top: 120px; }
.bench .inner { padding: 0 160px; box-sizing: border-box; }
.bench__heading { margin-bottom: 40px; }
.bench__card { margin: 0; padding: 40px 48px 32px; }
.bench__cap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.bench__title { font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: 1px; }
.bench__sub { font-size: 14px; line-height: 1.6; color: var(--secondary-2); }

/* 名前の列 260px + 棒の列。棒の列の 100% = 100点。
   点数ラベルは棒の右端に付ける（--w を共有）。100点近くでもはみ出さないよう、
   棒の列の右に 88px の余白を取っておく。 */
.bench__rows { display: flex; flex-direction: column; gap: 20px; }
.bench__row { display: grid; grid-template-columns: 260px 1fr; align-items: center; column-gap: 32px; }
.bench__name { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 16px; font-weight: 500; line-height: 1.4; }
.bench__note { font-size: 12px; font-weight: 400; color: var(--secondary-2); }
.bench__track { position: relative; height: 40px; margin-right: 88px; border-left: 1px solid rgba(208, 210, 219, 0.5); }
.bench__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w); border-radius: 0 6px 6px 0;
  background: rgba(208, 210, 219, 0.55);
}
.bench__row.is-own .bench__bar { background: var(--primary-2); box-shadow: 0 0 16px rgba(8, 109, 255, 0.6); }
.bench__val {
  position: absolute; top: 50%; left: var(--w); transform: translate(12px, -50%);
  font-family: var(--font-en); font-size: 24px; font-weight: 500; white-space: nowrap;
}
.bench__val small { font-family: var(--font-jp); font-size: 14px; margin-left: 2px; }
.bench__row.is-own .bench__val { color: var(--white); text-shadow: 0 0 8px var(--primary-2); }

.bench__axis { position: relative; height: 20px; margin: 12px 88px 0 292px; font-size: 12px; color: var(--secondary-2); }
.bench__axis span { position: absolute; left: var(--w); transform: translateX(-50%); }
.bench__foot { margin-top: 24px; font-size: 12px; line-height: 1.6; color: var(--secondary-2); }

/* =====================================================================
   05 INITIATIVES
   ===================================================================== */
.initiatives { position: relative; margin-top: 160px; }
.initiatives .inner { height: 367px; display: flow-root; }
.initiatives__label { margin: 0 0 0 160px; }
.initiatives__head {
  position: absolute; left: 160px; top: 95px;
  display: flex; gap: 80px; align-items: flex-start;
}
.initiatives__head h2 { white-space: nowrap; }
.initiatives__head .p1 { width: 569px; }

.mediarow {
  position: absolute; left: 160px; top: 247px; width: 1120px;
  display: flex; gap: 40px;
}
.mediarow > li { flex: 1 0 0; min-width: 1px; display: flex; }
.mediarow__item {
  flex: 1;
  display: flex; gap: 24px; align-items: center;
  padding: 16px;
  background: linear-gradient(var(--ga, 161deg), var(--glass-from) 0%, var(--glass-to) 100%);
}
.mediarow__thumb { display: flex; align-items: center; justify-content: center; flex: 0 0 96px; width: 96px; height: 72px; padding: 4px; box-sizing: border-box; background: var(--white); overflow: hidden; }
/* 媒体ロゴは管理画面から差し替えられるので、どんな縦横比でも枠の中央に収める。 */
.mediarow__thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mediarow__body { display: flex; flex-direction: column; gap: 4px; min-width: 1px; flex: 1 0 0; }

/* =====================================================================
   06 CASE STUDIES（全幅パネル）
   ===================================================================== */
.cases {
  position: relative; margin-top: 120px;
  padding: 40px 0 42px;
  background: linear-gradient(124.07deg, var(--glass-from) 0%, var(--glass-to) 100%);
}
/* パネル高 = 事例リストの上端(181px) + リストの高さ。
   件数を .caselist の --case-n で受け取り、5件でピン留めだった実測値
   （リスト1866px / パネル2047px）を再現しつつ増減できるようにした。
   1件あたり 373.2px は Figma 実測のピッチ */
.cases .inner { height: calc(181px + var(--case-n, 5) * 373.2px); display: flow-root; }
.cases__label { margin: 0 0 0 160px; }
.cases__head { position: absolute; left: 265px; top: 95px; width: 911px; }
.cases__head h2 { white-space: nowrap; }
.cases__head .p1 { position: absolute; left: 526px; top: 18px; width: 385px; }

.caselist { position: absolute; left: 160px; top: 181px; width: 1120px; height: calc(var(--case-n, 5) * 373.2px); }
.case { position: absolute; left: 0; top: var(--top); width: 1120px; height: 373.3px; }

.case__diamond {
  position: absolute; left: 56.57px; top: 0;
  width: 113.14px; height: 113.14px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.case__diamond::before {
  content: ""; position: absolute; left: 16.57px; top: 16.57px;
  width: 80px; height: 80px;
  transform: rotate(45deg);
  backdrop-filter: blur(30px);
  border-bottom: 1px solid var(--white); border-right: 1px solid var(--white);
  background: linear-gradient(135deg, var(--glass-from) 0%, var(--glass-to) 100%);
}
.case__diamond span { position: relative; font-size: 24px; letter-spacing: 1.2px; line-height: normal; }

.case__tile {
  position: absolute; left: 56.57px; top: 56.57px;
  width: 440px; height: 294.56px;
  background: linear-gradient(180deg, #051c2c 18.75%, #01386e 89.42%);
  overflow: hidden;
}
.case__tile img { width: 440px; height: 294.56px; object-fit: cover; }

.case__chip {
  position: absolute; left: 432.57px; top: 160.57px;
  padding: 16px 24px;
  backdrop-filter: blur(30px);
  border-bottom: 1px solid var(--primary-2); border-right: 1px solid var(--primary-2);
  background: linear-gradient(158.13deg, var(--glass-from) 0%, var(--glass-to) 100%);
  white-space: nowrap;
  z-index: 2;
}

.case__body {
  position: absolute; left: 456.57px; top: 200.27px; width: 663px;
  padding: 40px;
  display: flex; flex-direction: column; gap: 8px;
  backdrop-filter: blur(30px);
  background: linear-gradient(165.38deg, var(--glass-from) 0%, var(--glass-to) 100%);
  z-index: 1;
}
.case__body h3 { white-space: nowrap; }
.case__release {
  font-style: normal;
  font-size: 14px; font-weight: 700; letter-spacing: 0.7px;
  color: var(--primary-2);
  margin-left: 8px;
}

/* =====================================================================
   INTERVIEW
   ===================================================================== */
.interview { position: relative; margin-top: 120px; scroll-margin-top: 100px; } /* ヘッダー（固定）に隠れないよう、#interview へ飛んだときの余白（.pcard と同じ） */
.interview .inner { padding: 0 160px; }
.interview .hen { margin-bottom: 24px; }
.interview__row { display: flex; gap: 40px; }
.ivcard {
  flex: 1 0 0; min-width: 1px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--primary-2);
  background: linear-gradient(var(--ga, 133deg), var(--glass-from) 0%, var(--glass-to) 100%);
}
.ivcard__img {
  height: 240px; background: #d9d9d9;
  display: flex; align-items: center; justify-content: center;
}
.ivcard__img img { width: 78.4px; height: 78.4px; }
.ivcard__meta { display: flex; flex-direction: column; gap: 8px; }

/* =====================================================================
   NEWS / COLUMN
   ===================================================================== */
.posts { position: relative; margin-top: 120px; }
.posts__in { width: 1280px; margin: 0 auto; display: flex; gap: 40px; }
.posts__col { width: 620px; display: flex; flex-direction: column; gap: 24px; }
.postlist { width: 100%; }
.postlist li { display: flex; }
.postlist__item {
  flex: 1;
  display: flex; gap: 24px; align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--white);
}
.postlist__thumb {
  position: relative; flex: 0 0 96px; width: 96px; height: 72px; background: #d9d9d9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* アイキャッチは切らずに枠へ収める（理由は post.css の .postcard__thumb を参照）。
   素材未確定のプレースホルダー(.is-ph)だけ24pxのアイコンとして中央に置く */
.postlist__thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.postlist__thumb img.is-ph { width: 24px; height: 24px; object-fit: contain; background: none; }
.postlist__body { display: flex; flex-direction: column; gap: 4px; flex: 1 0 0; min-width: 1px; }
.posts__col .btn { align-self: flex-end; }
/* 片方の枠しか無いとき（コラム記事が無い間）は1本を全幅にする */
.posts__in.is-single .posts__col { width: 100%; }

/* =====================================================================
   07 FLOW
   ===================================================================== */
.flow { position: relative; margin-top: 160px; }
.flow .inner { height: 558px; display: flow-root; }
.flow__label { margin: -9px 0 0 160px; }
.flow__head { position: absolute; left: 352px; top: 0; width: 736px; text-align: center; white-space: nowrap; }

.flowsteps { position: absolute; left: 307px; top: 86px; width: 826px; height: 472px; }
.flowsteps__diamond { position: absolute; left: -1px; top: calc(var(--top) - 1px); width: 348.2px; height: 174.1px; }
/* 重なり部分: 線は先端まで残しつつ、交差する先端だけ僅かに柔らかく (Figma の表現) */
.flowsteps li:nth-child(1) .flowsteps__diamond {
  -webkit-mask-image: linear-gradient(180deg, #000 0% 80%, rgba(0,0,0,0.45) 94%, rgba(0,0,0,0.25) 100%);
  mask-image: linear-gradient(180deg, #000 0% 80%, rgba(0,0,0,0.45) 94%, rgba(0,0,0,0.25) 100%);
}
.flowsteps li:nth-child(2) .flowsteps__diamond {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 6%, #000 20% 80%, rgba(0,0,0,0.45) 94%, rgba(0,0,0,0.25) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 6%, #000 20% 80%, rgba(0,0,0,0.45) 94%, rgba(0,0,0,0.25) 100%);
}
.flowsteps li:nth-child(3) .flowsteps__diamond {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 6%, #000 20%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 6%, #000 20%);
}
.flowsteps__node {
  position: absolute; left: 93px; top: var(--top);
  width: 160px; height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.flowsteps__orb {
  position: absolute; left: 50%; top: 50%;
  width: 386px; height: 386px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.flowsteps__num {
  position: relative;
  font-size: 12px; letter-spacing: 0.6px; line-height: normal;
  padding-bottom: 4px; border-bottom: 1px solid var(--white);
}
.flowsteps__name { position: relative; font-size: 16px; line-height: 1.75; letter-spacing: 0.8px; text-align: center; }
.flowsteps__term {
  position: relative;
  font-size: 14px; font-weight: 700; letter-spacing: 0.7px; line-height: normal;
  color: var(--primary-2);
}
.flowsteps__desc { position: absolute; left: 386px; top: var(--top); width: 440px; }

/* =====================================================================
   08 TEAM
   ===================================================================== */
.team { position: relative; margin-top: 160px; }
.team__in {
  width: 1120px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.team__side { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.team__title { color: var(--secondary-3); }

.team__main { width: 744px; display: flex; flex-direction: column; gap: 40px; }
.team__members { display: flex; gap: 64px; }
.member { width: 340px; display: flex; flex-direction: column; gap: 8px; }
.member__photo {
  width: 340px; height: 228px; padding: 0 16px 1px;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 1px solid var(--white);
  background: linear-gradient(146.15deg, var(--glass-to) 0%, var(--glass-from) 100%);
}
.member__photo img { height: 227px; width: auto; }
.member__names { display: flex; flex-direction: column; gap: 4px; }
.member__namerow { display: flex; align-items: flex-end; justify-content: space-between; }
.member__en { font-size: 14px; letter-spacing: 0.7px; line-height: normal; color: var(--primary-2); }

.team__size {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--white);
}
.team__sizelabel { color: var(--secondary-3); }
.team__sizebody { white-space: nowrap; }

/* =====================================================================
   CTA + FOOTER（全幅パネル）
   ===================================================================== */
.tail {
  position: relative; margin-top: 160px;
  padding: 80px 0 40px;
  background: linear-gradient(158.3deg, var(--glass-from) 0%, var(--glass-to) 100%);
}
.cta__in {
  width: 667px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.cta__in .uline { --uline-w: 667px; }
.cta__in .p1 { text-align: center; }

.footer {
  width: 1280px; margin: 160px auto 0;
  display: flex; align-items: center; justify-content: space-between;
}
.footer__logo img { width: 200px; height: 87.7px; }
.footer__right { width: 688px; display: flex; flex-direction: column; gap: 24px; align-items: flex-end; }
/* 7項目の実寸合計は490px。固定 gap:40px（6本=240px）だと 688px に収まらず
   全項目が2行に折り返してしまうので、space-between で余白を分配する
   （実効の間隔は33px）。nowrap は折り返しを起こさないための保険 */
.footer__nav { width: 100%; display: flex; justify-content: space-between; gap: 16px; }
.footer__nav a { font-size: 14px; line-height: 1.75; white-space: nowrap; transition: color 0.25s; }
.footer__nav a:hover { color: var(--secondary-3); }
.footer__legal { display: flex; gap: 40px; }
.footer__legal a, .footer__legal span { font-size: 10px; letter-spacing: 0.5px; line-height: normal; }
.footer__legal a:hover { color: var(--secondary-3); }

/* ISO認証取得（ロゴと右カラムの間の3カラム目）。
   認証マークは白地の画像なので、そのまま置いて白い板として見せる */
.footer__iso { width: 300px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer__iso-h { font-size: 14px; font-weight: 700; line-height: 1.75; }
.footer__iso-list { display: flex; flex-direction: column; gap: 2px; }
.footer__iso-list li { font-size: 11px; line-height: 1.7; letter-spacing: 0.3px; }
.footer__iso-mark { width: 180px; height: auto; }

/* =====================================================================
   MOTION（script.js が付与するクラス）
   ===================================================================== */
/* スクロール出現 (JSが .rv を付与 → 交差時に .in) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: translateY(0); }
/* 横からの出現バリエーション（事例: 画像は左から・本文は右から） */
.rv.rv-l { transform: translateX(-32px); }
.rv.rv-r { transform: translateX(32px); }
.rv.rv-l.in, .rv.rv-r.in { transform: translateX(0); }
/* 注意: translateX等で位置決めしている要素には .rv を直接付けない（script.js側で子要素に付与） */

/* ヒーロー: ロード時にゆっくり浮上（オーバーレイごと拡縮するので焼き込みボタンとズレない） */
@keyframes heroIn {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}
.hero { animation: heroIn 1.1s ease-out both; }

/* 見出し下線: 出現後にハイライトが一度走る。
   .uline の ::before/::after は線とにじみで使い切ったので .hgroup 側で描く */
.hgroup { position: relative; }
.hgroup::after {
  content: ""; position: absolute; left: 0; bottom: 13px;
  width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, #b8d4ff, transparent);
  opacity: 0;
  pointer-events: none;
}
.hgroup.rv.in::after, .rv.in .hgroup::after { animation: sweep 1.4s ease 0.5s; }
@keyframes sweep {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 0.9; }
  100% { left: calc(100% - 140px); opacity: 0; }
}

/* グロー線: ごく緩やかな明滅 */
@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
.tailor__glow, .clients__glowline, .pcard__glow { animation: glowPulse 6s ease-in-out infinite; }

/* スクロール後のヘッダー背景 */
.menu { transition: background 0.35s ease; }
.menu.is-scrolled { background: rgba(3, 17, 26, 0.72); }

/* NOTE: 本サイトは演出をデザイン要件として全ユーザーに表示する方針
   (prefers-reduced-motion による無効化は行わない) */

/* =====================================================================
   動画モーダル（.vmodal）
   ---------------------------------------------------------------------
   ネイティブの <dialog> を使う。showModal() を呼ぶだけで
   ・背後のフォーカス不可（inert）・Esc で閉じる・::backdrop
   がブラウザ実装で手に入り、閉じたときのフォーカス復帰も自動。
   自前のdivで同じ品質を出すにはフォーカストラップを書く必要がある。

   ⚠️ dialog の中央寄せは UA スタイルの `width/height: fit-content` +
   `inset: 0` + `margin: auto` で成り立っている。`width: auto` などで
   fit-content を潰すと画面いっぱいに広がって左上に張り付くので、
   サイズ指定は中の .vmodal__media 側だけで行う。
   ===================================================================== */
.vmodal {
  width: fit-content; height: fit-content; max-width: none; max-height: none;
  inset: 0; margin: auto;
  padding: 0; border: 0; background: none; overflow: visible;
}
.vmodal::backdrop { background: rgba(2, 8, 20, 0.82); }
.vmodal__panel { position: relative; }
/* 上限 1280px は素材（1440x810）の実解像度の内側。ここを超えて広げると
   引き伸ばしになるので上げない。
   高さ側も 88vh で頭打ちにして、縦の狭い画面でも閉じるボタンが画面内に残るようにする */
.vmodal__media {
  display: block;
  width: min(92vw, 1280px); height: auto; max-height: 88vh;
  aspect-ratio: 16 / 9;
  border-radius: 12px; background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
/* 閉じるボタンは画面の右上に固定する。× は疑似要素2本で描く。
   パネル基準（position:absolute で枠の上に置く）にすると、動画の高さが
   ビューポートいっぱいに近いときに画面外へ出てしまう。top-layer の中でも
   position:fixed はビューポート基準で効くので、どの画面サイズでも切れない */
.vmodal__close {
  position: fixed; right: 20px; top: 20px;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s;
}
.vmodal__close:hover { background: rgba(255, 255, 255, 0.24); }
.vmodal__close:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; }
.vmodal__close::before, .vmodal__close::after {
  content: ""; position: absolute; left: 10px; top: 17px;
  width: 16px; height: 2px; background: #fff;
}
.vmodal__close::before { transform: rotate(45deg); }
.vmodal__close::after { transform: rotate(-45deg); }
/* モーダルを開いている間は背景をスクロールさせない
   （dialog は inert にはするがスクロールは止めない） */
.is-vmodal-open { overflow: hidden; }

/* =====================================================================
   SP レイアウト (〜767px)
   FigmaにSPデザインは存在しないため、PC版のトーンを維持した1カラム設計。
   768〜1439px はビューポート切替(width=1440)によりPC版を縮小表示する。
   ===================================================================== */
@media (max-width: 767px) {
  body { min-width: 0; }

  /* SPでは横スクロールを作らない。
     レイアウト上はどの要素も画面幅に収まっている（要素の右端は測定上すべて 390px 以内）が、
     ぼかしたヒーロー背景（.lphero--v2::before の filter:blur）のインクはみ出しが
     Chrome の初期包含ブロックに数px乗ってしまい、
       文書幅が数px広がる → position:fixed + width:100% の .menu がそれに追従して広がる
       → その .menu がさらに文書を広げる
     という自己増幅で、右側に数pxの空白と横スクロールが出る。
     clip は hidden と違いスクロールコンテナを作らないので、
     縦スクロールにも position:sticky にも影響しない */
  html { overflow-x: clip; }
  .inner { width: auto; }

  /* --- typography scale --- */
  .h1 { font-size: 28px; letter-spacing: 1.4px; }
  .h2 { font-size: 26px; letter-spacing: 1.3px; }
  .h3 { font-size: 22px; letter-spacing: 1.1px; }
  .h4 { font-size: 17px; letter-spacing: 0.85px; }
  .p1 { font-size: 14px; letter-spacing: 0.7px; }
  .p2 { font-size: 13px; }
  .hen { font-size: 24px; }
  /* 記事タイトル: SPは3行まできれいに表示（固定高だと行高差で3行目が中途半端に覗く） */
  .clamp2 { height: auto; -webkit-line-clamp: 3; }
  /* カテゴリ/業種タグ: 日付と並べても1行に収まる大きさにする
     （INITIATIVES のメディア掲載・INTERVIEW の業種タグ・NEWS/COLUMN のカテゴリ共通） */
  .tag { padding: 2px 8px; font-size: 11px; letter-spacing: 0.55px; white-space: nowrap; }
  .metarow { flex-wrap: nowrap; }
  .metarow .p2 { white-space: nowrap; }
  /* PCの1行前提nowrapは全解除 */
  .hgroup h2, .intro__copy, .clients__copy,
  .initiatives__head h2, .cases__head h2, .flow__head,
  .strengths__conclusion, .stat__head, .case__body h3 { white-space: normal; }

  /* --- header: ハンバーガー + ドロワー --- */
  .menu { min-width: 0; }
  .menu__in { width: auto; height: 60px; padding: 0 20px; }
  .menu__logo img { width: 88px; height: 38px; }
  .menu__tagline { font-size: 9px; letter-spacing: 0.45px; }

  .menu__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 32px; height: 32px; padding: 0;
    border: 0; background: none; cursor: pointer;
  }
  .menu__burger span {
    display: block; width: 100%; height: 1px;
    background: var(--white);
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .menu.is-navopen .menu__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu.is-navopen .menu__burger span:nth-child(2) { opacity: 0; }
  .menu.is-navopen .menu__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* .menu は backdrop-filter を持つため position:fixed の包含ブロックになる。
     ドロワーは absolute + 明示的な高さで出す（fixed だと潰れる） */
  .menu__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    height: 100vh; height: calc(100dvh - 61px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 48px;
    background: var(--primary-1-2);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .menu.is-navopen .menu__nav { opacity: 1; visibility: visible; transform: none; }
  .menu__nav > a {
    display: block; padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 15px;
  }

  /* メガメニューはアコーディオンとして開く */
  .menu__trigger {
    width: 100%; justify-content: space-between;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 15px;
  }
  .mega {
    position: static; width: auto; min-width: 0;
    background: none; backdrop-filter: none; border: 0;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .menu__item.is-open .mega { display: block; }
  .mega__in {
    width: auto; padding: 8px 0 16px;
    grid-template-columns: 1fr; gap: 0;
  }
  .mega__link { padding: 12px 12px; }
  .mega__desc { display: none; }
  .mega__all { margin: 12px 0 0 12px; }

  /* --- hero --- */
  /* heroIn の scale(1.015) が読み込み時に数px横溢れするので切る（.lphero と同じ） */
  .hero { height: 520px; overflow: hidden; }
  /* SPはヘッダー(60px)の下から画像を始めず全面に敷き、建物側(72%)を見せる */
  .hero::before {
    top: 0; height: 100%;
    background-position: 72% center;
  }
  .hero .inner::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3,17,26,0.2) 0%, rgba(3,17,26,0.55) 55%, rgba(3,17,26,0.9) 100%);
  }
  .hero__title {
    left: 20px; right: 20px; top: 180px;
    white-space: normal;
  }
  /* 写真の上に載るので、PC(64px/500)より詰めて太らせ発光で可読性を確保する */
  .hero__t1 {
    font-size: 34px; font-weight: 700; line-height: 1.4; letter-spacing: 1.7px;
    white-space: normal;
    text-shadow: 0 0 10px var(--primary-2);
  }
  .hero__t2 {
    margin-top: 16px;
    font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: 0.7px;
    white-space: normal;
  }
  .hero__btn { left: 20px; top: auto; bottom: 64px; }

  /* --- 01 introduction ---
     統計3枚は動画の下ではなく見出し（.intro__copy）の右に小さく縦3段で置く。
     DOM順は 見出し → 動画 → 統計×3 のままなので、グリッドで位置を指定する */
  .intro { height: auto; padding: 48px 20px 56px; }
  .intro__scrim { top: 0; height: 100%; }
  .intro .inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px;
    column-gap: 12px; row-gap: 8px;
  }
  .intro .inner { display: grid; }
  .intro__label { grid-column: 1 / -1; grid-row: 1; margin: 0 0 24px; }
  .intro__copy { position: static; grid-column: 1; grid-row: 2 / span 3; }
  .intro__eyebrow { font-size: 11px; letter-spacing: 0.55px; }
  .intro__offer {
    position: static; grid-column: 1 / -1; grid-row: 5;
    width: auto; gap: 12px; margin-top: 24px;
  }
  /* SPは1カラムなので下端合わせの制約が無い。<br> の1行目（約18字）が
     はみ出さない大きさまで落とす（.h4 の17pxだと320px幅で溢れる） */
  .intro__lead { font-size: 15px; letter-spacing: 0.75px; }
  .intro__movie { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .intro__movie__play { width: 56px; height: 56px; }
  .intro__movie__play::after {
    margin-left: 5px;
    border-left-width: 17px; border-top-width: 10px; border-bottom-width: 10px;
  }
  .intro__movie__cap { margin-top: -6px; font-size: 11px; }
  /* SPは横いっぱいに出す。閉じるボタンは画面右上のまま少しだけ内側に寄せる */
  .vmodal__media { width: 92vw; max-height: 80vh; }
  .vmodal__close { right: 12px; top: 12px; }
  /* 統計カード: 124px 幅に収まるよう全要素を縮める */
  .intro .stat {
    position: static !important; grid-column: 2; align-self: start;
    width: 100%; height: auto; margin: 0; padding: 8px 10px;
  }
  .intro .stat { grid-row: 2; }
  .intro .stat + .stat { grid-row: 3; }
  .intro .stat + .stat + .stat { grid-row: 4; }
  .intro .stat__in, .intro .stat__in--between { height: auto; gap: 4px; }
  .intro .stat__head { width: auto; gap: 2px; }
  .intro .stat__head .h4 { font-size: 12px; letter-spacing: 0.6px; }
  .intro .stat__note { font-size: 9px; letter-spacing: 0.45px; }
  .intro .stat__value { font-size: 22px; letter-spacing: 1.76px; }
  .intro .stat__value span { font-size: 14px; }
  .intro .stat__value--jp { letter-spacing: 1.32px; }
  .intro .stat__value--jp .unit-jp { letter-spacing: 0.66px; }
  .intro .stat__tag { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; }

  /* --- 02 solution --- */
  /* SPはラベル帯を作らず縦積みに戻す。87px の上余白だけ padding で残す */
  .solution > .inner { display: block; padding-top: 87px; }
  .solution__label { margin: 0 0 24px; padding: 0 20px; }
  .solution__intro { width: auto; margin: 0; padding: 0 20px; }
  /* SPは全幅の1px線 + 8pxのグロー（旧実装と同じ描画）。にじみは使わない */
  .uline::before {
    left: 0; top: 5px;
    width: 100%; height: 1px;
    transform: none;
    background: var(--primary-2);
    box-shadow: 0 0 8px var(--primary-2);
  }
  .uline::after { display: none; }

  /* バリューチェーン: PCと同じ横並びの工程図のまま、SP幅に詰める。
     PCの絶対配置(--x/--tx/--bx)とpxのclip-pathをやめ、
     4等分のグリッド + % 指定の clip-path に組み替える。
     矢羽根の食い込み（8px）は、前3枚の margin-right: -8px で作る。
     切り欠きを持つ後ろの列が上に描かれるので、前の列の矢先はそこから覗く */
  .chain {
    position: static; width: auto; height: auto;
    /* .solution__intro は align-items:center なので、明示的に伸ばさないと
       グリッドが内容幅まで縮んでしまう */
    align-self: stretch;
    /* 本文の左右パディング(20px)より少し外まで使って1枚あたりの幅を稼ぐ */
    margin: 24px -12px 0;
    display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 8px;
  }
  .chain__item { position: relative; left: auto; top: auto; }
  .chain__item:nth-child(-n + 3) { margin-right: -8px; }
  .chain__link { width: 100%; height: 104px; }
  .chain__shape {
    left: 0; top: 0; width: 100%; height: 100%;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
  }
  .chain__shape--head {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  }
  .chain__tag {
    left: 50%; transform: translateX(-50%); top: 2px;
    width: 44px; height: 15px; font-size: 9px; letter-spacing: 0;
  }
  .chain__body {
    left: 0; right: 0; top: 22px; bottom: 8px;
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 0 9px 0 8px;
  }
  .chain__icon { width: 26px; height: 26px; }
  .chain__name {
    font-size: 10px; letter-spacing: 0.5px; line-height: 1.3;
    text-align: center; white-space: normal;
  }
  /* 「施工 / フィジカルAI」は2行のまま（SPでは横幅が足りないので br を残す） */
  .chain__name--2l { white-space: normal; }
  /* 最後の1枚は右へ食い込む余地がないぶん、矢先に文字が掛からないよう余白を足す */
  .chain__item:nth-child(4) .chain__body { padding-right: 13px; }

  /* BIM生成AI: 4工程の下に全幅の帯として敷く */
  .chain__item--bar { grid-column: 1 / -1; margin-right: 0; left: auto; top: auto; }
  .chain__item--bar .chain__link { width: 100%; height: 56px; }
  .chain__shape--bar { top: 0; width: 100%; height: 100%; clip-path: none; }
  .chain__item--bar .chain__body {
    left: 0; right: 0; top: 0; bottom: 0;
    flex-direction: row; justify-content: center; gap: 10px; padding: 0;
  }
  .chain__item--bar .chain__icon { width: 32px; height: 32px; }

  /* 注記も .chain と同じく本文幅いっぱいまで伸ばす（PCの 1001px 固定は使えない） */
  .chain__note {
    width: auto; align-self: stretch;
    margin: 0 -12px; font-size: 11px; letter-spacing: 0.55px;
  }
  .chain__item--bar .chain__name { font-size: 15px; letter-spacing: 0.75px; }

  /* プロダクト: 固定ステージをやめて縦積みカード (script.jsもSPでは無効化) */
  .stack { margin-top: 56px; }
  .stack__in { display: block; }
  .rail { display: none; }
  .stack__cards { width: auto; display: flex; flex-direction: column; gap: 32px; padding: 0 20px; }
  .pcard { width: 100%; height: auto; }
  .pcard__glow { display: none; }
  /* ::before(グラデ層)のbackdrop-filterがstaticな中身の上に乗って
     カード全体をぼかしてしまうため、SPでは無効化し中身を前面に出す */
  .pcard::before { backdrop-filter: none; }
  .pcard::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--secondary-3), var(--primary-2));
    z-index: 2;
  }
  /* 並び順を プロダクト名 → アイキャッチ画像 → 概要文 → CTA にする。
     h3/p1/CTA は .pcard__body の中、画像はその外にあるので、
     .pcard__body を display:contents にして4つを .pcard 直下の
     フレックスアイテムに引き上げ、order で並べ替える。
     （contents で .pcard__body の箱が消えるため、余白とz-indexは各子に持たせる）
     relative化する要素はPC用のleft/topを必ず打ち消す（relativeでも効くため） */
  .pcard { display: flex; flex-direction: column; }
  .pcard__body { display: contents; }
  .pcard__body > * { position: relative; z-index: 1; }
  .pcard__body h3 { order: 1; width: auto; margin: 0; padding: 24px 20px 0; }
  /* SPでは図が本文の背面ではなく独立したブロックになるので、
     PCで左端に掛けたフェード（本文と重なる部分をぼかすためのもの）は外す */
  .pcard__fig {
    order: 2; position: relative; left: 0; top: 0; z-index: 1;
    width: 100%; height: auto; padding: 16px 12px 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .pcard__body .p1 { order: 3; margin: 0; padding: 16px 20px 0; }
  .pcard__links { order: 4; flex-direction: column; gap: 8px; padding: 24px 20px 24px; }

  /* テーラーメイド帯 */
  .tailor { margin-top: 64px; height: auto; }
  .tailor__in { position: static; transform: none; width: auto; padding: 48px 20px; }
  .tailor__glow { display: none; }

  /* --- 03 clients --- */
  .clients { margin-top: 64px; }
  .clients .inner { height: auto; padding: 0 20px; display: block; }
  .clients__label { margin: 0 0 32px; }
  .clients__copy { position: static; margin-bottom: 32px; }
  .clients__glowline { display: none; }
  /* ロゴカルーセルは画面幅いっぱいに裁ち落とし（.inner の左右20pxパディングを打ち消す） */
  .clients__logos { position: static; margin: 0 -20px; }
  .logos__row { height: 88px; }
  .logos__item { flex-basis: 88px; width: 88px; height: 88px; }
  .logos__item img { width: 70px; max-height: 70px; }

  /* --- 04 strengths --- */
  .strengths { margin-top: 64px; }
  .strengths .inner { height: auto; padding: 0 20px; display: block; }
  .strengths__label { margin: 0 0 24px; }
  .strengths__hgroup { position: static; width: auto; margin-bottom: 40px; }
  .strengths__cols { position: static; flex-direction: column; gap: 40px; }
  .strength { width: 100%; }
  .strength__card { width: 100%; height: auto; min-height: 140px; gap: 16px; }
  .strength__text { white-space: normal; }
  .strength__title { font-size: 17px; }
  .strengths__y, .strengths__cglow { display: none; }
  .strengths__conclusion {
    position: static; transform: none; margin-top: 40px;
    font-size: 16px; line-height: 1.8;
  }

  /* --- BIM生成AIの精度比較 --- */
  .bench { margin-top: 64px; }
  .bench .inner { padding: 0 20px; }
  .bench__heading { margin-bottom: 24px; }
  .bench__card { padding: 24px 16px; }
  .bench__cap { margin-bottom: 24px; }
  .bench__title { font-size: 16px; }
  .bench__sub { font-size: 12px; }
  /* 名前を棒の上に積む（横に並べると棒が短くなりすぎる） */
  .bench__rows { gap: 16px; }
  .bench__row { grid-template-columns: 1fr; row-gap: 6px; }
  .bench__name { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; text-align: left; font-size: 14px; }
  .bench__track { height: 28px; margin-right: 64px; }
  .bench__val { font-size: 18px; transform: translate(8px, -50%); }
  .bench__val small { font-size: 12px; }
  .bench__axis { margin: 8px 64px 0 0; }

  /* --- 05 initiatives --- */
  .initiatives { margin-top: 64px; }
  .initiatives .inner { height: auto; padding: 0 20px; display: block; }
  .initiatives__label { margin: 0 0 24px; }
  .initiatives__head { position: static; flex-direction: column; gap: 16px; }
  .initiatives__head .p1 { width: auto; }
  .mediarow { position: static; width: auto; flex-direction: column; gap: 16px; margin-top: 32px; }

  /* --- 06 case studies --- */
  .cases { margin-top: 64px; padding: 40px 0 48px; }
  .cases .inner { height: auto; padding: 0 20px; display: block; }
  .cases__label { margin: 0 0 24px; }
  .cases__head { position: static; width: auto; margin-bottom: 8px; }
  .cases__head .p1 { position: static; width: auto; margin-top: 8px; }
  .caselist { position: static; width: auto; height: auto; }
  /* PC用の top: var(--top) は relative でも効くため必ず打ち消す */
  .case { position: relative; top: 0; left: 0; width: auto; height: auto; padding: 40px 0 0; }
  .case__diamond { position: absolute; left: -8px; top: 24px; transform: scale(0.7); }
  .case__tile { position: static; width: 100%; height: auto; }
  .case__tile img { width: 100%; height: auto; }
  .case__chip { position: static; display: inline-block; margin-top: -22px; margin-left: 12px; padding: 10px 16px; }
  .case__body { position: static; width: auto; margin-top: 12px; padding: 20px 16px; }

  /* --- interview --- */
  .interview { margin-top: 56px; }
  .interview .inner { padding: 0 20px; }
  .interview__row { flex-direction: column; gap: 24px; }
  .ivcard__img { height: 200px; }

  /* --- news / column --- */
  .posts { margin-top: 56px; }
  .posts__in { width: auto; flex-direction: column; gap: 48px; padding: 0 20px; }
  .posts__col { width: 100%; }
  .postlist__item { padding: 16px 8px; }

  /* --- 07 flow: 縦積み --- */
  .flow { margin-top: 64px; }
  .flow .inner { height: auto; padding: 0 20px; display: block; }
  .flow__label { margin: 0 0 24px; }
  .flow__head { position: static; width: auto; text-align: left; margin-bottom: 32px; }
  .flowsteps { position: static; width: auto; height: auto; }
  .flowsteps li { position: relative; display: block; padding-top: 8px; }
  .flowsteps__diamond {
    position: absolute; left: 50%; top: 0;
    transform: translateX(-50%);
    width: 340px; height: 170px;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .flowsteps__node { position: relative; top: auto; left: auto; margin: 0 auto; height: 170px; width: 260px; gap: 6px; }
  .flowsteps__name { font-size: 15px; line-height: 1.6; }
  .flowsteps__term { font-size: 12px; }
  .flowsteps__orb { width: 320px; height: 320px; }
  .flowsteps__desc { position: static; width: auto; margin: 10px 0 30px; }

  /* --- 08 team ---
     「私たちについて」CTAはチーム規模の下に置く。
     CTAは .team__side の中にあるので、side を display:contents で展開して
     ラベル → 見出し → メンバー/チーム規模 → CTA の順に並べ替える */
  .team { margin-top: 64px; }
  .team__in { width: auto; flex-direction: column; gap: 40px; padding: 0 20px; }
  .team__side { display: contents; }
  .team__side .flabel { order: 1; }
  .team__title { order: 2; }
  .team__main { order: 3; }
  .team__side .btn { order: 4; }
  .team__main { width: 100%; }
  .team__members { flex-direction: column; gap: 32px; }
  .member { width: 100%; }
  .member__photo { width: 100%; }
  .team__size { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 16px; }
  .team__sizebody { white-space: normal; }
  .team__sizebody br { display: none; }

  /* --- スクロール出現 --- */
  /* .rv-l/.rv-r（横スライド）の対象は .lpcase__tile / __chip / __body と
     .case__* で、SPではいずれも全幅ブロックになる。
     全幅の要素を translateX(32px) すると、そのぶん右へはみ出して
     文書幅が画面幅を超え、右側に余白（横スクロール）が生まれる。
     SPは横スライドをやめ、他の要素と同じ縦方向の出現に揃える */
  .rv.rv-l, .rv.rv-r { transform: translateY(26px); }
  .rv.rv-l.in, .rv.rv-r.in { transform: translateY(0); }

  /* --- cta + footer --- */
  .tail { margin-top: 64px; padding: 56px 20px 32px; }
  .cta__in { width: auto; }
  .cta__in .p1 { text-align: left; }
  .footer { width: auto; margin-top: 72px; flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer__logo img { width: 140px; height: auto; }
  .footer__right { width: 100%; align-items: flex-start; }
  .footer__nav { flex-wrap: wrap; justify-content: flex-start; gap: 12px 24px; }
  .footer__legal { flex-wrap: wrap; gap: 12px 24px; }
  .footer__iso { width: 100%; align-items: flex-start; text-align: left; }
}

/* =====================================================================
   グローバルナビ / フッターナビの「現在地」
   -------------------------------------------------------------------
   ⚠️ 静的HTML（kkg-lp/styles.css）には無い章。WordPress化で追加した唯一のCSS。

   静的HTMLは全ページで同一のヘッダーを出力していたため、現在地の表現を
   持っていなかった。WordPress では wp_nav_menu が現在地を判定できるので、
   サイト内の既存の流儀に合わせて表現を足す。

   - クラス名は .pfilter__item.is-current / .pager__item.is-current に合わせて
     .is-current で統一する（WordPress 既定の current-menu-item は出力しない）。
   - 属性は .crumbs [aria-current="page"] と同じく aria-current="page"。
   - 色はナビ自身の hover 色（--secondary-3）をそのまま使う。新しい色は足さない。
   - 「お問い合わせ」(.is-accent) は現在地でもアクセント色を保つ。
     ナビ内で唯一の橙色が現在地判定で消えると、CTAとしての強さが失われるため。
   ===================================================================== */
.menu__nav > a.is-current { color: var(--secondary-3); }
.menu__nav > a.is-accent.is-current { color: var(--accent-1); }
.footer__nav a.is-current { color: var(--secondary-3); }