/* =====================================================================
   KK Generation — プロダクト詳細LP（図面生成AI / ボリュームプラン）
   Figma: EDEhbM66C1vBbjhZ4YE4Dw  Section「260723」> 図面生成AI (202:9093, 1440×9444)
   styles.css（トップページ）を読み込んだ上で、白地テーマ用に上書き・追加する。
   色・グラデーション・座標は get_design_context / get_metadata の実値を転記。
   ===================================================================== */

/* ---------- 白地テーマの土台 ---------- */
body.lp { background: var(--white); color: var(--primary-1-2); }
html:has(body.lp) { background: var(--white); }

/* サイト共通の背景テクスチャ（styles.css の .bglines）を白地テーマに合わせる。
   TOPは「白地に濃い線」の素材を invert して暗い地にスクリーン合成しているが、
   白地ページは素材をそのまま乗せればよいので invert / mix-blend-mode は外す。
   地が純白なので opacity 合成は multiply と同じ結果になり、線は
   最濃部 #d0d0d0 → 約 #e5e5e5 に落ちる（本文20pxの可読性を邪魔しない濃さ）。
   position:fixed のままなので、スクロールしても常に背景に居続ける。
   濃色セクション（.lphero / .lpcta / .tail）は不透明な地を持つので自然に隠れ、
   白地・淡色ティントのセクションだけに出る */
.lp .bglines {
  filter: none;
  mix-blend-mode: normal;
  opacity: 0.55;

  /* 横は「1枚絵」で敷く。
     TOPは 1440px のタイルを縦横 repeat しているが、1440 より広い画面では
     x=1440 に2枚目の左端が来て、波が途中から生え直したように見える。
     background-size:100% auto で素材の横幅をビューポート幅に合わせれば
     横方向の継ぎ目そのものが無くなる（auto なので縦横比は崩れない）。
     縦は repeat-y のまま。position:fixed なので背景はスクロールしても
     ほぼ動かず（下の視差ドリフトぶんだけ）、実際に見えるのは常に1枚だけ。 */
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
}

.lp .flabel__num { border-bottom-color: currentColor; }
.lp .p1, .lp .p2, .lp .h2, .lp .h3, .lp .h4 { color: inherit; }

/* 下線は styles.css の .uline（画像なしのCSS実装）を共用。
   旧実装は白地セクションが uline-light.svg（ellipse opacity 0.2）、
   濃色のCTA帯が uline-dark.svg（減光なし）と素材を使い分けていたので、
   にじみの減光も白地セクションだけに掛ける */
.lpsolution__body .uline::after,
.lp .strengths__hgroup .uline::after { opacity: 0.2; }

/* 反転パネル（CTA帯・フッター）内は白文字に戻す */
.lp .lpcta, .lp .tail { color: var(--white); }

/* 白地ページではスクロール後のヘッダーをしっかり暗くする（白文字の可読性確保） */
.lp .menu.is-scrolled { background: rgba(3, 17, 26, 0.92); }

/* メガメニューの地は 6% 透ける（ダークなTOPでは気にならないガラス表現）。
   白地ページでは下の本文が透けて商品名に重なり読みづらいので不透明にする */
.lp .mega { background: var(--primary-1-2); }

/* ヒーローを持たないページ（about）はヘッダーの下も白地なので、
   スクロール前から暗い地を敷かないと白文字が読めない */
.lp--nohero .menu { background: rgba(3, 17, 26, 0.92); }

/* TOPと同じくグロー線をゆっくり明滅させる（styles.css の glowPulse を流用）。
   .clients__glowline は styles.css 側で既に明滅対象なので、ここでは足さない */
.othercard__glow { animation: glowPulse 6s ease-in-out infinite; }

/* TOPと共通のセクション（STRENGTHS / CLIENTS / FLOW）は、暗い地の
   前提で入ったテキストグローを白地では消す。
   .tail（CTA帯）の .glow は濃色パネルの上なのでそのまま残す */
.lp .strengths .glow,
.lp .strengths .glow4,
.lp .clients .glow,
.lp .flow .glow { text-shadow: none; }

/* =====================================================================
   HERO
   ===================================================================== */
/* ヒーローはビューポート全幅。1440で切ると白地に境界が出てしまう。
   ただし素材には見出しが焼き込まれていて（スクリムで隠している）拡大するとズレるため、
   実寸1440の版を中央に置き、その下に同じ絵をぼかして全幅に敷いて continuity を作る */
.lphero {
  position: relative; overflow: hidden;
  height: 870px;
  background: var(--primary-1-2);
  animation: heroIn 1.1s ease-out both;
}
.lphero::before {
  content: ""; position: absolute; inset: -60px; z-index: 0;
  background: url("../images/hero-art.png") center top / cover no-repeat;
  filter: blur(56px) brightness(0.9);
  transform: scale(1.15);
}
.lphero::after {
  content: ""; position: absolute; left: 50%; top: 0; z-index: 1;
  transform: translateX(-50%);
  width: 1440px; height: 870px;
  background: url("../images/hero-art.png") 0 0 / 1440px 870px no-repeat;
}
.lphero .inner { position: relative; z-index: 2; height: 100%; }
.lphero__scrim { position: absolute; }
.lphero__scrim--h1 {
  left: 47px; top: 368px; width: 519px; height: 148px;
  background: linear-gradient(to left, #091850 0%, #142156 100%);
}
.lphero__scrim--sub {
  left: 69px; top: 538px; width: 497px; height: var(--subh, 95px);
  background: linear-gradient(to left, #043174 0%, #070c2a 46.872%, #142156 100%);
}
.lphero__title {
  position: absolute; left: 80px; top: 368px; width: 750px;
  font-size: 48px; font-weight: 500; line-height: normal; letter-spacing: 2.4px;
  color: var(--white); white-space: nowrap;
}
.lphero__sub {
  position: absolute; left: 80px; top: 538px; width: 453px;
  font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: 0.8px;
  color: var(--white); white-space: nowrap;
}
.lphero__btncover {
  position: absolute; left: 60px; top: 640px; width: 276px; height: 75px;
  background: linear-gradient(to right, #0e1842 0%, #080e2f 100%);
}
.lphero__btn { position: absolute; left: 80px; top: 655px; }

/* =====================================================================
   HERO v2 — 右にプロダクトの実画面（動画）を置く版
   ---------------------------------------------------------------------
   従来版（上）はトップの旧KV(hero-art.png)を流用し、素材に焼き込まれた
   コピーを .lphero__scrim / __btncover の当て板3枚で塗り潰していた。
   v2 は右半分をプロダクトのデモ動画に明け渡すので、
     ・焼き込みのない hero-kv.jpg（＝現行トップのKV）をぼかして地に敷く
     ・当て板は全廃。左コピーは絶対配置をやめて .lphero__copy のフローに
   という構成になり、見出しが1行でも3行でも縦センターで揃う。
   ページ側は <section class="lphero lphero--v2"> と付けるだけで切り替わる。
   ===================================================================== */
.lphero--v2 { height: 780px; }

/* 地：KVを強くぼかして「深い青のテクスチャ」として使う。
   ピントの合った絵をそのまま置くと、右のUIキャプチャの細線と喧嘩する */
.lphero--v2::before {
  inset: -80px;
  background: url("../images/hero-kv.jpg") center center / cover no-repeat;
  filter: blur(60px) brightness(0.62) saturate(1.15);
  transform: scale(1.1);
}
/* 実寸レイヤーは使わないので、左のコピーを読ませるためのスクリムに置き換える */
.lphero--v2::after {
  left: 0; top: 0; transform: none;
  width: 100%; height: 100%;
  background: linear-gradient(100deg,
    rgba(3, 17, 26, 0.94) 0%,
    rgba(3, 17, 26, 0.82) 30%,
    rgba(3, 17, 26, 0.42) 58%,
    rgba(3, 17, 26, 0.62) 100%);
}

/* ---------- 左：コピー ---------- */
/* ヘッダー帯(80px)の下を視野の中心と見なすので +40px オフセットして釣り合わせる */
.lphero--v2 .lphero__copy {
  position: absolute; left: 80px; top: calc(50% + 40px);
  transform: translateY(-50%);
  width: 600px;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* 見出しは white-space:nowrap のまま（改行位置は原稿の <br> が持つ）。
   2カラムになったぶん、48px だと長い見出しが動画枠に被る
   （例「ボリュームプラン・間取り図を、」は14文字 ≒ 706px）。
   原稿の改行を触らずに済ませたいので、長い見出しのページだけ
   セクションに style="--hf:40px" を付けて縮める */
.lphero--v2 .lphero__title {
  position: static; width: auto;
  font-size: var(--hf, 48px);
  letter-spacing: calc(var(--hf, 48px) * 0.05);
}
.lphero--v2 .lphero__sub   { position: static; width: auto; margin-top: 32px; }
.lphero--v2 .lphero__btn   { position: static; margin-top: 40px; }

/* ---------- 右：デモ動画 ---------- */
/* 当初は右端をはみ出させる案だったが、1440より広い画面では .inner の外側に
   余白が出るだけで「切れて続く」演出にならず、幅によって印象が変わってしまう。
   さらに body は min-width:1440px なので、ビューポートが1440ちょうどだと
   縦スクロールバーのぶん右端が15px削られる（右端まで使うと露骨に切れる）。
   結局サイト共通の1440グリッド＝左右80px余白の中に収めるのが一番安定する。
   720 + 640 = 1360 で右端の余白80pxが他セクションと揃う */
.lphero--v2 .lphero__media {
  position: absolute; left: 720px; top: calc(50% + 40px);
  transform: translateY(-50%);
  width: 640px;
}
/* 枠の背後のブルーグロー。枠を地から浮かせる */
.lphero--v2 .lphero__media::before {
  content: ""; position: absolute; z-index: 0;
  inset: -12% -8%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(42, 172, 226, 0.30) 0%,
    rgba(8, 109, 255, 0.18) 42%,
    rgba(8, 109, 255, 0) 72%);
  filter: blur(20px);
  pointer-events: none;
}

.hframe { position: relative; z-index: 1; }
/* 角丸で中身を切り抜く「窓」。キャプションはこの外に出す。
   position:relative は停止ボタン（.hframe__pause）を重ねるため */
.hframe__win {
  position: relative;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 0 70px rgba(8, 109, 255, 0.26);
}
/* アプリのウィンドウ然とさせるバー。ドット＋ファイル名のピルまでに留める */
.hframe__bar {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: rgba(4, 14, 28, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.hframe__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.hframe__file {
  display: flex; align-items: center;
  margin-left: 14px; height: 18px; padding: 0 12px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.5);
}
/* aspect-ratio で高さを固定しているので、poster→実動画の差し替えでレイアウトが動かない。
   height:auto は必須。img/video の width/height 属性は presentation hint として
   height:450px 相当に効いてしまい、これを消さないと aspect-ratio が無視される。

   既定は 16/10。素材を枠に合わせて切り出せる場合はこのままでよいが、
   16:9 のまま埋める素材（bim-generation の全画面キャプチャ）は
   object-fit:cover で左右が 5.6% ずつ切れてしまう——アプリのUIは端まで
   意味を持つので切れてはいけない。そういうページは figure 側で
   style="--hframe-ar:16/9" と枠の比率を素材に合わせる */
.hframe__media {
  display: block; width: 100%; height: auto; aspect-ratio: var(--hframe-ar, 16 / 10);
  object-fit: cover; background: #071120;
}
/* 自動再生ループの停止ボタン。WCAG 2.2.2 は「5秒を超えて自動で動くもの」に
   停止手段を要求する。このループは約8.5秒なので必須。
   .hframe__bar は aria-hidden なので、操作要素はバーの中ではなく外に置いて重ねる
   （aria-hidden の子孫にフォーカス可能要素を入れると支援技術から辿れない） */
.hframe__pause {
  position: absolute; z-index: 2; top: 7px; right: 12px;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 12px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(4, 14, 28, 0.72);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px; letter-spacing: 0.5px; line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.hframe__pause:hover { background: rgba(8, 109, 255, 0.4); color: #fff; }
.hframe__pause:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
/* JS が付けるまでは出さない（JS 無効時は video を controls 付きにするため） */
.hframe__pause[hidden] { display: none; }
.hframe__cap {
  margin-top: 12px;
  font-size: 12px; font-weight: 400; line-height: 1.6; letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
}

/* =====================================================================
   白地パネル（01 PROBLEM / 02 SOLUTION）
   ===================================================================== */
.lpwhite { position: relative; }
/* [リファクタ] .inner の height 固定（旧 --wh / .lpwhite--note）は廃止した。
   中の 01 PROBLEM をフロー化したので、パネル高は中身の積み上げで決まる。
   課題カードの件数が 4 件以外になっても親の高さを計算し直す必要がない */
/* [廃止] 背景の波線アート（.wave / images/lp/bg-waves.svg）。
   Figma（Group 59673 / 1440×742.68）は 01-02 の頭に1枚置く指定で、それを各白
   セクションの頭にも複製していたが、同じモチーフを .bglines がページ全体の地と
   して敷くようになったため、重ねると同じ波が2つの縮尺で出て濁る。
   セクション単位の1枚置きはスクロールで出たり消えたりもするので、
   ページ全体に1枚という .bglines に一本化した。 */

/* ---- 01 PROBLEM ----
   [リファクタ] 絶対配置 → 通常フロー。
   旧実装は .problem__label / __copy / .pain を .lpwhite .inner に対する
   position:absolute で置き、.pain は 1 枚ずつ style="--x/--y" で座標を手書き、
   親 .inner は height を固定していた。課題が 4 件以外になると座標も親の高さも
   破綻するため、既に height:auto + 通常フローで書かれていた SP 版を正として
   PC 版をフロー化した。見た目（余白・サイズ・配置）は現状のまま。
   旧座標は各宣言のコメントに対応を残す。 */
.problem {
  display: grid;
  /* 左 524px = コピーの起点 160px 〜 課題カードの起点 684px
     右 596px = 課題カードのクラスタ実寸（684 → 1280） */
  grid-template-columns: 524px 596px;
  /* 1 行目は「ラベル帯」。旧 .problem__copy top:176px − ラベル top:40px = 136px。
     ラベル(.flabel)は 55.5px 固定高の部品なので 80px の余裕がある。
     ここを auto にすると .pains の行またぎで帯が伸びてコピーが下がるため固定 */
  grid-template-rows: 136px auto;
  /* 下余白は PR（01 PROBLEM だけのページ）が 185px。旧 --wh:660px の内訳 */
  padding: 40px 160px var(--problem-pb, 160px);
}
/* グリッドの既定 stretch だとセル幅・セル高いっぱいの箱になる。
   旧実装（絶対配置）と同じ「内容ぴったりの箱」に戻す */
.problem__label { grid-area: 1 / 1; align-self: start; justify-self: start; }
.problem__copy {
  grid-area: 2 / 1; align-self: start;
  display: flex; flex-direction: column; gap: 24px;
  /* 旧実装は width:433px + white-space:nowrap。BG の見出し 2 行目（実測 501px）が
     箱を 68px はみ出し、課題カードの起点 684px まで残り 23px しかなかった。
     カラム幅（524px）いっぱいまで使って折り返せるようにする */
  /* 手動 <br> を外したので、折り返しは文節単位に寄せる。
     未対応ブラウザは通常の禁則処理にフォールバックするだけ */
  word-break: auto-phrase;
}

/* 課題カードの千鳥配置。旧座標（.inner 基準）は
     (824,95) (1040,122) (684,285) (900,312) / 各 240×163
   クラスタ起点 (684,95) からの相対に直すと
     (140,0) (356,27) (0,190) (216,217)
   → 列ピッチ 216px / 行ピッチ 190px / 行内 2 枚目は +27px 下 / 奇数行は +140px 右
   この 2 行 4 枚のリズムを nth-child で繰り返すので、3 件でも 5 件でも崩れない */
.pains {
  grid-area: 1 / 2 / 3 / 3;
  margin-top: 55px;   /* 旧 top:95px − .problem の padding-top:40px */
  display: grid;
  /* カード幅 240px に対し列ピッチ 216px。24px はみ出して隣に重なるのが元の意匠 */
  grid-template-columns: repeat(2, 216px);
  row-gap: 0;         /* 行ピッチ 190px は カード 163px + 下段の margin-top 27px で作る */
}
.pain {
  /* 240×163 は Figma のカード実寸。件数に依存しない意匠上の定数。
     ただし高さは min-height。固定高だと本文が下にはみ出して枠外に流れる
     （実測: CE の1枚目が +32px、他ページも +7px はみ出していた）。
     .problem をフロー化済みなので、カードが伸びても後続セクションは自動で下がる */
  width: 240px; min-height: 163px; padding: 16px;
  justify-self: start; align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
  background: var(--surface-tint);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--primary-2);
}
/* 行内 2 枚目を下げる */
.pain:nth-child(2n) { margin-top: 27px; }
/* 奇数行（1・3・5…行目）を右へずらす */
.pain:nth-child(4n+1), .pain:nth-child(4n+2) { margin-left: 140px; }
/* 列ピッチ 216px に対しカード幅 240px なので、列2のカードが列1のカードの
   右端 24px に重なる（意匠）。列1のカードは本文がその下に潜り込んで読めなくなるため、
   重なりぶん right padding を広げて本文を重なりの手前で折り返させる */
.pain:nth-child(4n+1), .pain:nth-child(4n+3) { padding-right: 32px; }
.pain__icon { width: 32px; height: 32px; }
/* テキストは残り高さの下端に寄せる（Figma: flex-1 + justify-end）。
   ⚠️ ここを display:flex にしてはいけない。フレックスコンテナの中では
   インラインの子（<strong> と、その前後の地の文）がそれぞれ独立した
   フレックスアイテムに分解され、1行に流れずに縦積みになる
   （例: 「不整合書類による」「手戻りの発生」「と、」が別々の行になる）。
   下端寄せは margin-top:auto で作る */
.pain p { margin-top: auto; width: 100%; }
.pain__note { font-size: 10px; letter-spacing: 0.5px; }

/* ---- 02 SOLUTION ----
   [リファクタ] 01 PROBLEM のフロー化に伴う、最小限の追随。
   SOLUTION 自体の内部構造・見た目には手を入れていない。変えたのは基準点だけ:
   旧は .lpwhite .inner を基準に top:635px / 722px（BG は 795px / 882px）と
   手書きしていたが、PROBLEM が可変高になったので基準を .lpsolution 自身に移し、
   PROBLEM の直後に流れるようにした（top から一律 635px を引いた値）。
   これで課題カードが増減しても SOLUTION が押し出される。
   高さ 794px（旧 .inner 1429px − 635px）は SOLUTION 側に残った固定値で、
   SOLUTION をフロー化する次のリファクタで解消する。 */
.lpsolution { position: relative; height: 794px; display: flow-root; }
.lpsolution__label { margin: 0 0 0 160px; }
.lpsolution__body {
  position: absolute; left: 280px; top: 87px; width: 880px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.lpsolution__body .uline { --uline-w: 670px; }
.lpsolution__fig {
  width: 400px; height: 300px;
  background: #d9d9d9;
  display: flex; align-items: center; justify-content: center;
}
/* 図版が 400x300 のプレースホルダーではなく操作デモ動画になるLP（bim-generation）。
   上の height:794px は「プレースホルダーが入った状態」の実測値なので、動画を入れると
   はみ出して直後のCTA帯に重なる。中身の積み上げで高さが決まるようにし、
   本文幅も動画が見える 1000px まで広げる。SPは元から height:auto なので触らない。
   ⚠️ .lpsolution 自体をフロー化する将来のリファクタが入ったら、この修飾子は不要になる */
.lpsolution--video { height: auto; padding-bottom: 120px; }
.lpsolution--video .lpsolution__body {
  position: static;
  width: 1000px; margin: 40px auto 0;
}
/* 図版を持たないLP（動画が未納品）。794px は図版込みの高さなので、
   そのままだと見出し・リードの下に図版1枚分の空白が残る。動画版と同じく積み上げにする。 */
.lpsolution--nofig { height: auto; padding-bottom: 120px; }
.lpsolution--nofig .lpsolution__body {
  position: static;
  width: 880px; margin: 40px auto 0;
}
/* 画像プレースホルダーのアイコン（枠 + 山＆太陽の2レイヤー） */
.ph { position: relative; display: block; width: 156.83px; height: 156.83px; }
.ph__frame { position: absolute; left: 16.8px; top: 29.87px; width: 123.22px; height: 97.09px; }
.ph__mtn { position: absolute; left: 19.6px; top: 52.28px; width: 117.62px; height: 84.94px; }

/* =====================================================================
   CTA 帯（中間・全幅）
   ===================================================================== */
.lpcta {
  position: relative;
  width: 100%; height: 393px;
  background:
    linear-gradient(164.73deg, var(--glass-from) 0%, var(--glass-to) 100%),
    var(--primary-1-2);
}
.lpcta__in {
  position: absolute; left: 50%; top: 80px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.lpcta__in .uline { --uline-w: 877px; }
.lpcta__in .p1 { text-align: center; }

/* =====================================================================
   03 FUNCTIONS
   ===================================================================== */
.functions { position: relative; }
/* 機能が5件以上のLPは2段になるので --fh で高さを渡す */
.functions .inner { height: var(--fh, 720px); display: flow-root; }
.functions__label { margin: 160px 0 0 160px; }
.functions__head { position: absolute; left: 160px; top: 255px; white-space: nowrap; }

.funclist {
  position: absolute; left: 160px; top: 357px; width: 1120px;
  display: grid; grid-template-columns: repeat(4, 262px); gap: 32px 24px;
}
.func { width: 262px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.func__card {
  width: 100%; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface-tint);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--primary-2);
}
.func__num {
  font-size: 12px; letter-spacing: 0.6px; line-height: normal;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
}
.func__title {
  height: 58px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px;
  text-align: center; white-space: nowrap;
}

/* =====================================================================
   04 CASE STUDIES（薄青パネル・全幅）
   ===================================================================== */
.lpcases { position: relative; background: var(--surface-tint); }
/* 事例の件数でパネル高が変わる: 261 + 373.13 × 件数 を --ch で渡す */
.lpcases .inner { height: var(--ch, 1754px); display: flow-root; }
.lpcases__label { margin: 40px 0 0 160px; }
.lpcases__head {
  position: absolute; left: 248px; top: 135px;
  display: flex; align-items: flex-end; gap: 24px;
  white-space: nowrap;
}

.lpcaselist { position: absolute; left: 160px; top: 221px; width: 1120px; }
.lpcase { position: relative; height: 373.13px; }

.lpcase__diamond {
  position: absolute; left: 0; top: 0;
  width: 113.137px; height: 113.137px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.lpcase__diamond::before {
  content: ""; position: absolute; left: 16.57px; top: 16.57px;
  width: 80px; height: 80px;
  transform: rotate(45deg);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--white); border-right: 1px solid var(--white);
}
.lpcase__diamond span {
  position: relative;
  font-size: 24px; letter-spacing: 1.2px; line-height: normal;
  color: var(--secondary-3);
}

.lpcase__tile {
  position: absolute; left: 56.57px; top: 56.57px;
  width: 440px; height: 294.556px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-900) 18.75%, #01386e 89.423%);
}
.lpcase__tile img { position: absolute; max-width: none; }
/* 専用の切り抜き指定がない事例はタイル全面に敷く（デモ素材が入り次第差し替え） */
.lpcase__tile--cover img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.lpcase__chip {
  position: absolute; left: 475px; top: 160.57px;
  padding: 16px 24px;
  backdrop-filter: blur(30px);
  background: var(--surface-tint);
  border-bottom: 1px solid var(--primary-2); border-right: 1px solid var(--primary-2);
  font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px;
  white-space: nowrap;
  z-index: 2;
}
.lpcase__body {
  position: absolute; left: 460px; top: 200px; width: 660px;
  padding: 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
.lpcase__title { font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px; white-space: nowrap; }

/* =====================================================================
   05 STRENGTHS / 06 CLIENTS / 07 FLOW（TOPと共通のセクション）
   ---------------------------------------------------------------------
   この3セクションは文言・構造・寸法ともTOPと同一で、テンプレートも1つを
   共用する（template-parts/common/strengths|clients|flow.php）。
   したがってクラス名は styles.css の .strengths / .clients / .flow を
   そのまま使い、ここには白地テーマ固有の差分だけを書く。

   差分は実質2種類しかない。
     1) 色（カード面・罫線・テキストグロー）
     2) 縦位置。TOPはセクション間の余白を margin-top で取るが、白地版は
        セクション自身が内側に160pxの余白を持つ構成なので、絶対配置の
        要素が軒並み +160px ずれる。
   ===================================================================== */

/* ---------- 05 STRENGTHS ---------- */
.lp .strengths { margin-top: 0; }
/* TOPはラベルと見出しをグリッド（95px / auto）で積むが、白地版は上に
   160pxの余白を持つので、通常フロー + 絶対配置に戻す */
.lp .strengths .inner { height: 1028px; display: flow-root; }
.lp .strengths__label { margin: 160px 0 0 160px; }
.lp .strengths__hgroup { position: absolute; left: 280px; top: 255px; width: 880px; }
.lp .strengths__hgroup .uline { --uline-w: 878px; }
.lp .strengths__cols { top: 380px; }
.lp .strengths__y { top: 486px; }
.lp .strengths__cglow { top: 421px; }
.lp .strengths__conclusion { top: 802px; }

/* カード面は白地テーマ（枠線は primary-1-2） */
.lp .strength__card {
  background: var(--surface-tint);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--primary-1-2);
}

/* ---------- 06 CLIENTS ---------- */
.lp .clients { margin-top: 0; }
.lp .clients .inner { height: 770px; }
.lp .clients__label { margin: 184px 0 0 160px; }
.lp .clients__copy { top: 299px; }
.lp .clients__glowline { top: 130px; }
.lp .clients__logos { top: 216px; }
/* 白地テーマではセルの罫線を少し濃く */
.lp .logos__item { border-color: var(--secondary-2); }

/* ---------- 07 FLOW ---------- */
.lp .flow { margin-top: 0; }
.lp .flow .inner { height: 718px; }
/* 白地版は見出しの折返し位置が広い（.inner 全幅に対して中央寄せ） */
.lp .flow__head { left: 160px; width: 1120px; }
.lp .flowsteps__num { border-bottom-color: currentColor; }
/* 菱形の重なり: 濃色地(TOP)は交差する先端をマスクで僅かに減光しているが、
   白地版は線が細く、減光すると先端が消えて見えるので掛けない。
   打ち消し先が .flowsteps li:nth-child(n) .flowsteps__diamond（詳細度が高い）
   なので、SP側と同じく !important で外す */
.lp .flowsteps__diamond {
  -webkit-mask-image: none !important; mask-image: none !important;
  /* 白地版は Figma 実値の端数がTOPと僅かに違う（0.5px以下）。
     1pxの斜線なのでアンチエイリアスに出るため、実値のまま残す */
  left: -1.12px; top: calc(var(--top) - 0.56px); width: 348.24px; height: 174.12px;
}

/* =====================================================================
   FAQ（FLOW の後・「他のプロダクトも見る」の前）
   ---------------------------------------------------------------------
   このセクションだけは Figma 由来の絶対配置を使わず、通常フローで組む。
   件数が原稿で増減する前提のセクションなので、--fh / --ch のように
   高さを手で渡す方式にすると原稿差し替えのたびに破綻するため。
   開閉は <details>/<summary> のネイティブ挙動に任せている（JS不要・
   キーボード操作とスクリーンリーダーの読み上げが標準で付いてくる）。
   ===================================================================== */
.faq { position: relative; }
.faq .inner { padding: 160px 160px 120px; }
.faq__head { margin-top: 40px; }
.faqlist { margin-top: 48px; display: flex; flex-direction: column; }

.faqitem { border-top: 1px solid var(--secondary-2); }
.faqitem:last-child { border-bottom: 1px solid var(--secondary-2); }

/* summary の既定マーカー（▶ / disclosure triangle）を消す。
   list-style だけでは Safari に残るので ::-webkit-details-marker も落とす */
.faqitem__q { list-style: none; cursor: pointer; }
.faqitem__q::-webkit-details-marker { display: none; }
.faqitem__q {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 28px 8px;
  transition: background 0.3s ease;
}
.faqitem__q:hover { background: rgba(8, 109, 255, 0.06); }
.faqitem__q:focus-visible { outline: 2px solid var(--primary-2); outline-offset: -2px; }

/* Q / A の識別子。.en（Futura）で番号ラベル類と字面を揃える */
.faqitem__mark {
  flex: 0 0 auto; width: 24px;
  font-size: 20px; line-height: 1.4; color: var(--primary-2);
}
/* A は Q より弱く見せたいが、--secondary-2(#d0d2db) は白地でほぼ消えるので
   本文色を薄めたグレーにする */
.faqitem__mark--a { color: rgba(3, 17, 26, 0.38); }

.faqitem__qtext {
  flex: 1 1 auto;
  font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: 1px;
}

/* 開閉アイコン: 横棒 + 縦棒の「+」。開いたら縦棒だけ消して「−」にする */
.faqitem__icon {
  flex: 0 0 auto; position: relative; width: 20px; height: 20px; margin-top: 4px;
}
.faqitem__icon::before, .faqitem__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--primary-2);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.faqitem__icon::before { width: 20px; height: 1.5px; }
.faqitem__icon::after  { width: 1.5px; height: 20px; }
.faqitem[open] .faqitem__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.faqitem__a {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 0 8px 28px;
}
/* 回答は「段落2つ」や「段落＋箇条書き」まであるので、Aマークの右は
   ひとつの流し込みブロックにまとめる。<p> を .faqitem__a の直下に
   並べると flex の子として横に並んでしまう。
   位置は質問の字面に揃う（Aマーク幅 24px + gap 24px ぶん右） */
.faqitem__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
/* 段落・箇条書きの字面は .p2 と同値だが、クラスではなく要素で当てている。
   WordPress側の回答本文はブロックエディタの出力（<p> / <ul><li>）で、
   .p2 が付かないため。静的HTML側は .p2 も付いているが値は同じなので競合しない */
.faqitem__body :is(p, li) { font-size: 14px; font-weight: 400; line-height: 1.75; letter-spacing: 0; }
.faqitem__body > :is(p, ul, ol):first-child { margin-top: 0; }
.faqitem__body > :is(p, ul, ol):last-child { margin-bottom: 0; }
/* 認証番号やカスタマイズ項目の列挙。styles.css の reset で list-style を
   落としてあるので、ここだけ中黒を戻す。
   .faqitem__list は静的HTML側のクラス、ul 単体はエディタ出力を受ける */
.faqitem__body :is(.faqitem__list, ul, ol) {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding-left: 1.25em;
}
.faqitem__body :is(ul, ol) > li { list-style: disc; }
.faqitem__body ol > li { list-style: decimal; }

/* =====================================================================
   他のプロダクトも見る
   ===================================================================== */
.others { position: relative; }
.others .inner { height: 768px; }
.others__head { position: absolute; left: 150px; top: 0; width: 1132px; text-align: center; }

.otherlist {
  position: absolute; left: 150px; top: 86px; width: 1132px;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px;
}
.othercard { position: relative; display: block; height: 261px; }
/* カード面 */
.othercard::before {
  content: ""; position: absolute; left: 5.07px; top: 20px;
  width: 350.93px; height: 221px;
  background: var(--surface-tint);
  backdrop-filter: blur(10px);
  transition: background 0.3s ease;
}
/* 左端のアクセントライン */
.othercard::after {
  content: ""; position: absolute; left: 5px; top: 20px;
  width: 2px; height: 221px;
  background: var(--secondary-3);
}
/* アクセントラインの外側グロー（Figma: Ellipse 276） */
.othercard__glow {
  position: absolute; left: -30px; top: -30px;
  width: 72.14px; height: 321px;
  background: url("../images/lp/glow-card.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.othercard__body {
  position: absolute; left: 61.7px; top: 60px;
  min-height: 57px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  white-space: nowrap;
}
.othercard__phase { font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: 0.7px; color: var(--primary-2); }
/* 親の .othercard__body は nowrap だが、名前だけは折り返しを許す。
   「個別AI実装・コンサルティング」は1行だとカード面（右端356px）まで残り1.9pxしかなく、
   フォントが代替に落ちた環境で溢れる。max-width で2行に割る
   （施工フィジカルAI=228.9px までは1行のまま）。
   折り返しは文節単位に寄せる（auto-phrase）。無いと「コンサルティ／ング」で切れる。
   未対応ブラウザは通常の禁則処理にフォールバックするだけで、溢れはしない。
   行が増えても .othercard__body は下端揃えで上に伸びるので、
   ボタン（top:157px）には当たらない */
.othercard__name {
  font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px;
  white-space: normal; max-width: 260px; word-break: auto-phrase;
}
.othercard__note { font-size: 10px; line-height: normal; letter-spacing: 0.5px; }
.othercard__btn { position: absolute; left: 61.7px; top: 157px; }
/* Physical AI は注記1行ぶんボタンが下がる */
.othercard:has(.othercard__note) .othercard__btn { top: 180px; }
.othercard:hover::before { background: rgba(8, 109, 255, 0.24); }
.othercard:hover .btn img { transform: translateX(6px); }

/* =====================================================================
   汎用の白地セクション（高さ固定しないフローレイアウト）
   Figmaに雛形が無い追加セクション（確認申請審査AI 等）で使う
   ===================================================================== */
.lpsec { position: relative; padding-top: 120px; }
.lpsec .inner { padding: 0 160px; display: flex; flex-direction: column; gap: 40px; }
.lpsec__head { display: flex; flex-direction: column; gap: 16px; }
.lpsec__head .h3 { line-height: 1.4; }
/* 本文中のテキストリンク（外部の出典など）。ボタンではなく地の文に埋めるとき用 */
.tlink { color: var(--primary-2); text-decoration: underline; text-underline-offset: 3px; }
.tlink:hover { text-decoration-thickness: 2px; }
.lpsec .lpsolution__fig { align-self: center; }
/* ヒーローを持たないページ（about）の先頭セクション。
   fixed ヘッダー（80px / SP 60px）のぶん、通常の 120px では詰まるので開ける */
.lpsec--first { padding-top: 200px; }
/* .lpsec は下余白を持たない（次セクションの padding-top が受け持つ）ので、
   直後が全幅パネル（.tail 等）になる最終セクションだけ自前で開ける */
.lpsec--last { padding-bottom: 120px; }
/* 全幅パネル（CTA帯 .lpcta / 事例 .lpcases）は自前の上余白を持たないので、
   .lpsec の直後に来ると本文の最終行に貼り付いて見える。.lpsec--last の 120px は
   開けすぎなので、.lpsec .inner のセクション間 gap と同じ 40px を1段だけ足す。
   該当は permit-review の 03 SOLUTION → CTA帯(中間1) と、
   bim-generation の 製品紹介ムービー → 04 CASE STUDIES の2か所 */
.lpsec:has(+ .lpcta),
.lpsec:has(+ .lpcases) { padding-bottom: 40px; }
/* .btn--hug は flex コンテナの子で使う前提。表セルなど通常フローに直接置くと
   ブロック幅いっぱいに下線が伸びるので、内容幅に収める */
.dtable td .btn--hug { width: max-content; }

/* =====================================================================
   TEAM（index.html の 08 TEAM を白地ページで流用するための上書き）
   ===================================================================== */
/* ダークテーマ前提の白罫線・シアン見出しを白地用に振り替える
   （.lp .strength__card と同じ流儀） */
.lp .team__title { color: var(--primary-1-2); }
.lp .member__photo { border-bottom-color: var(--primary-1-2); }
/* index.html では直後が .tail（margin-top:160px）だが、白地ページでは
   全幅の CTA 帯が続くので、略歴の末尾が帯に接しないよう自前で空ける */
.lp .team { margin-bottom: 120px; }

/* =====================================================================
   パンくず（下層ページ共通: about / news / column / contact）
   ===================================================================== */
.crumbs { font-size: 12px; line-height: 1.6; letter-spacing: 0.6px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "／"; color: var(--secondary-2); }
.crumbs a { transition: color 0.25s ease; }
.crumbs a:hover { color: var(--primary-2); text-decoration: underline; }
.crumbs [aria-current="page"] { color: #6b7280; }
/* 記事詳細では本文カラム（800px）に幅を合わせる。
   1120px いっぱいに置くと、中央寄せの本文と起点がずれて見えるため */
.crumbs--narrow { width: 100%; max-width: 800px; margin: 0 auto; }

/* =====================================================================
   問い合わせフォームの枠（contact.html）
   -------------------------------------------------------------------
   HubSpotの新方式埋め込みはフォームを iframe 内に描画するため、
   フォーム内部のスタイルはこちらから一切上書きできない（＝しない）。
   統一感は「外側の枠」で作る。
   iframe の高さは HubSpot 側が中身に応じて動的に書き換えるので、
   .formbox / .formbox__frame には height も overflow も指定しない。
   ===================================================================== */
.formbox {
  padding: 56px 80px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--primary-2);
}
/* 埋め込みの最大幅と中央寄せは親側で持つ。
   .hs-form-frame は HubSpot のスクリプトが iframe を差し込む器で、
   HubSpot が中身の高さを inline style で書き込む（height: 1205px 等）。
   こちらからは高さに触れない。
   min-height は「下限の予約」なので HubSpot の可変高を妨げない。
   読み込み前・読み込み失敗時（HubSpot が height:0px のままにする）に
   枠がパディングだけの帯に潰れるのを防ぐ */
.formbox__frame { width: 100%; max-width: 640px; margin: 0 auto; min-height: 420px; }
.formbox__frame .hs-form-frame { width: 100%; }
/* iframe 要素そのものの箱だけを整える（中身には触らない）。
   inline-要素由来の下部余白が出ないよう block にしておく */
.formbox__frame iframe { display: block; width: 100%; max-width: 100%; border: 0; }
/* スクリプトが未読込／ブロックされて器が空のままの場合の代替表示 */
.formbox__frame .hs-form-frame:empty::before {
  content: "フォームを読み込んでいます…";
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
  font-size: 14px; line-height: 1.75; color: #6b7280;
}

/* フォーム以外の問い合わせ手段。.dtable を使うので固有の指定は最小限 */
.contactinfo .dtable th { width: 200px; }

/* CTAを持たない下層ページ（contact）の .tail。
   .cta が無いぶん .footer の上余白（180px）を詰める */
.lp .tail--nocta .footer { margin-top: 0; }

/* =====================================================================
   関連プロダクトの差し込み帯（検図照査AI・BIM生成AI で使用）
   ===================================================================== */
.relatedband { position: relative; background: var(--surface-tint); }
.relatedband .inner {
  padding: 40px 160px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.relatedband__body { display: flex; flex-direction: column; gap: 8px; }
.relatedband__title { font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 1px; }

/* 出典・業界データなどの注記ブロック */
.notebox {
  border-left: 2px solid var(--primary-2);
  padding: 2px 0 2px 20px;
}
/* 課題セクションの下に業界データを差し込むページ（BIM生成AI）用の注記。
   [リファクタ] 旧実装は position:absolute(top:520px) で置いたうえに、
   親へ .lpwhite--note を付けて高さ（1429→1589px）と 02 SOLUTION の top を
   3 か所とも手で補正していた。フロー内の任意要素にしたので、
   注記の有無は .problem のグリッドに 1 行増えるだけになり、
   下の SOLUTION は自動で押し下がる（.lpwhite--note は廃止） */
.problem__note {
  grid-column: 1 / -1; grid-row: 3;
  margin-top: 45px;    /* 旧 top:520px − 課題カードの下端 475px */
  /* 旧 .lpwhite--note の 1589px から逆算すると注記の下は 222px 空いていた。
     .problem の padding-bottom(160px) との差分をここで足して現状の余白を保つ。
     ※ 160px 側に揃えたいが、見た目を変えないため今回は現状値のまま残す */
  margin-bottom: 62px;
}

/* =====================================================================
   デモ動画（白地セクションに置く、クリック再生の解説デモ）
   ===================================================================== */
/* ヒーローの短尺ループと違い、こちらは20秒超の解説なので自動再生しない。
   controls を出し、poster には「結果が出ている画」を置いて、再生前から
   何が見られるかが分かるようにしている（1フレーム目はアップロード画面で
   サムネイルとしては何も語らない）。
   幅は .lpsec .inner の内寸（1440 - 160*2 = 1120px）いっぱい。元素材が
   2600〜2900px 幅のアプリ画面なので、これ以下に縮めると文字が潰れる */
.vfig { width: 100%; margin: 0; }
/* 中央の再生ボタンを重ねるための基準。line-height を殺さないと
   inline 要素である <video> の下に数px の隙間が出て、ボタンの中心がずれる */
.vfig__frame { position: relative; line-height: 0; }
.vfig__media {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--secondary-2);
  background: #f4f5f8;
}
/* YouTube と同じ「poster の真ん中に大きな再生ボタン」。
   ネイティブの controls は左下の小さな再生ボタンだけで、poster を見ても
   押せると分からないため重ねている。再生が始まると JS が hidden にし、
   代わりに controls を出す（lp.js 3-2）。JS 無効時は hidden のままで、
   ネイティブの controls がそのまま残る */
.vfig__play {
  position: absolute; inset: 0; margin: auto;
  width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(4, 14, 28, 0.62);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.vfig__play:hover { background: var(--primary-2); transform: scale(1.06); }
.vfig__play:focus-visible { outline: 3px solid var(--primary-2); outline-offset: 3px; }
.vfig__play[hidden] { display: none; }
/* 再生アイコンの三角。margin-left は光学的な中心へのずらし
   （三角は重心が左に寄るので、幾何学的中心に置くと左寄りに見える） */
.vfig__playicon {
  width: 0; height: 0; margin-left: 7px;
  border-left: 26px solid #fff;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.vfig__cap {
  margin-top: 12px;
  font-size: 12px; font-weight: 400; line-height: 1.6; letter-spacing: 0.6px;
  color: #6b6f7d;
}

/* =====================================================================
   表組み（確認申請審査AI の「チェックの種類」「機能一覧」）
   ===================================================================== */
.dtable { width: 100%; border-collapse: collapse; text-align: left; }
.dtable th, .dtable td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--secondary-2);
  vertical-align: top;
  font-size: 14px; font-weight: 400; line-height: 1.75; letter-spacing: 0;
}
.dtable thead th {
  background: var(--surface-tint);
  border-bottom: 1px solid var(--primary-2);
  font-weight: 700; white-space: nowrap;
}
.dtable tbody th { font-weight: 700; white-space: nowrap; }
.dtable td.is-num { width: 48px; font-family: var(--font-en); font-weight: 500; }

/* 提供状況バッジ */
.lptag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 12px; border-radius: 4px; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.6px;
}
.lptag--ready { background: var(--primary-2); color: var(--white); }
.lptag--dev { border: 1px solid var(--primary-2); color: var(--primary-2); }

/* 対応分野グリッド（8分野） */
/* minmax(0,1fr): auto-phrase で min-content が広がってもトラックが溢れないようにする
   （SP側の .fields も同じ理由で minmax(0,1fr)） */
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.field {
  padding: 16px;
  background: var(--surface-tint);
  border-bottom: 1px solid var(--primary-2);
}
.field__name {
  display: block; margin-bottom: 8px;
  font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0.8px;
}
.field__name .en { font-size: 12px; margin-right: 6px; color: var(--primary-2); }
.field__items { display: flex; flex-direction: column; gap: 4px; }
.field__item { font-size: 13px; line-height: 1.7; }
.field__item::before { content: "● "; color: var(--primary-2); }  /* 単なる箇条書き記号（提供状況の意味は持たせない） */

/* 機能詳細（番号付きの説明） */
.featdetail { display: flex; flex-direction: column; gap: 24px; }
/* 以前は先頭に連番（.featdetail__num）を置いていたが、上の8分野グリッドの
   01〜08 と番号が食い違って読み手が混乱するため廃止した */
.featdetail__item { display: flex; gap: 20px; }
.featdetail__title { font-size: 16px; font-weight: 700; line-height: normal; letter-spacing: 0.8px; margin-bottom: 6px; }

/* =====================================================================
   ヒーローのイメージ図（デモ動画を持たないLP）
   ---------------------------------------------------------------------
   テーラーメイドAI開発 / 施工フィジカルAI は「見せられる実画面」が無い
   （前者はプロダクトではなく開発支援、後者は開発中）ので、
   .hframe__win の中身を動画ではなく概念図に差し替える。
   1枚のSVG画像にしなかったのは、(1) 図中の文言が拡大・読み上げ・検索に
   乗らない (2) 原稿の文言変更が画像の作り直しになる、の2点による。
   枠の角丸・境界・影は動画版（.hframe__win）をそのまま共有する。
   ===================================================================== */
.hframe--art .hframe__win {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  padding: 24px;
  /* 動画版は素材自身が発光しているので枠の地は暗いままでよいが、
     図版は線と文字だけなので、上からの淡いブルーで奥行きを作る */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(8, 109, 255, 0.24) 0%, rgba(8, 109, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}

/* 入力 → 中核 → 出力 の3カラム。枠内寸 640-48=592 を
   148 + 22 + 204 + 22 + 148 + gap(12×4) で使い切る */
/* 3カラムとも上端を揃える。縦センターにすると、カラムごとに中身の高さが
   違うぶんキャプション（.hdiag__cap）の高さがバラバラになり、
   「入力／出力」のラベルが同じ行に並ばない */
.hdiag {
  display: flex; align-items: flex-start; justify-content: center; gap: 12px;
  width: 100%; color: var(--white);
}
.hdiag__col { flex: 0 0 148px; display: flex; flex-direction: column; gap: 8px; }
.hdiag__cap {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; line-height: 1.4;
  text-align: center; color: rgba(255, 255, 255, 0.5);
}
.hdiag__chip {
  padding: 9px 8px; border-radius: 8px; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px; font-weight: 400; letter-spacing: 0.6px; line-height: 1.45;
}
.hdiag__chip--lit {
  border-color: rgba(42, 172, 226, 0.6);
  background: rgba(42, 172, 226, 0.16);
}

/* 矢印。線（::before）＋ 三角（::after）。
   縦位置は中央に置きたいので、カラム全体を flex で縦センターにしている */
.hdiag__arrow { flex: 0 0 22px; position: relative; align-self: center; height: 10px; }
.hdiag__arrow::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 2px; background: rgba(42, 172, 226, 0.8);
}
.hdiag__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 8px solid rgba(42, 172, 226, 0.9);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* 中核カードだけキャプションを持たないので、その高さ（14px + gap 8px）ぶん
   下げて、左右のカラムの1段目と天端を揃える */
.hdiag__core {
  flex: 1 1 204px; min-width: 0; margin-top: 22px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  padding: 16px 14px; border-radius: 12px; text-align: center;
  border: 1px solid rgba(8, 109, 255, 0.6);
  background: linear-gradient(160deg, rgba(8, 109, 255, 0.42) 0%, rgba(18, 30, 73, 0.4) 100%);
  box-shadow: 0 0 40px rgba(8, 109, 255, 0.35);
}
.hdiag__title { font-size: 15px; font-weight: 700; letter-spacing: 0.75px; line-height: 1.45; }
.hdiag__steps { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hdiag__step {
  padding: 6px 8px; border-radius: 6px;
  background: rgba(3, 17, 26, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px; letter-spacing: 0.55px; line-height: 1.4;
}
.hdiag__goal {
  padding: 12px 8px; border-radius: 8px; text-align: center;
  border: 1px solid rgba(42, 172, 226, 0.55);
  background: rgba(42, 172, 226, 0.14);
  font-size: 13px; font-weight: 700; letter-spacing: 0.65px; line-height: 1.45;
}

/* =====================================================================
   チップ列（施工フィジカルAI「生成されるデータ」など、
   表にするほど構造が無い列挙）
   ===================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 8px 16px; border-radius: 999px;
  background: var(--surface-tint);
  border: 1px solid rgba(8, 109, 255, 0.35);
  font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0.7px;
}

/* =====================================================================
   CTA + FOOTER（全幅パネル）
   ===================================================================== */
.lp .tail {
  margin-top: 0;
  padding: 80px 0 40px;
  background:
    linear-gradient(157.35deg, var(--glass-from) 0%, var(--glass-to) 100%),
    var(--primary-1-2);
}
.lp .cta__in { width: auto; }
.lp .cta__in .uline { --uline-w: 877px; }
.lp .footer { margin-top: 180px; }

/* =====================================================================
   SP レイアウト (〜767px)
   ===================================================================== */
@media (max-width: 767px) {
  .lp .inner { width: auto; }

  /* --- hero --- */
  /* SPは拡大版1枚だけでよい（実寸レイヤーは非表示）。
     見出し・リード・ボタンは絶対配置をやめてフロー（縦フレックス）に置く。
     top を固定していると、見出しが3行以上になったLPでリードに重なる */
  .lphero { height: auto; min-height: 520px; }
  .lphero::before { inset: 0; filter: none; background-position: 72% 0; }
  .lphero::after { display: none; }
  .lphero .inner {
    height: auto; min-height: 520px;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 16px; padding: 100px 20px 48px;
  }
  .lphero .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%);
  }
  .lphero__scrim { display: none; }
  .lphero__title {
    position: static; width: auto;
    font-size: 26px; letter-spacing: 1.3px; line-height: 1.4; white-space: normal;
  }
  .lphero__sub { position: static; width: auto; font-size: 13px; white-space: normal; }
  .lphero__btncover { display: none; }
  .lphero__btn { position: static; align-self: flex-start; margin-top: 8px; }

  /* --- hero v2 --- */
  /* SPは横に置けないので「コピー → 動画枠」の縦積み。
     PCと違い地の絵はほぼ見えなくなるが、ぼかしたKVはトーンとして残す */
  .lphero--v2 { height: auto; min-height: 0; }
  .lphero--v2::before { inset: 0; filter: blur(34px) brightness(0.58); transform: none; }
  .lphero--v2::after { display: block; }
  .lphero--v2 .inner {
    display: block; min-height: 0;
    padding: 100px 20px 44px;
  }
  .lphero--v2 .inner::before { display: none; }
  .lphero--v2 .lphero__copy {
    position: static; transform: none; width: auto;
  }
  /* PC用の見出しサイズ（--hf）はクラス2つぶんの詳細度があり、
     このブロックの .lphero__title より強い。SPでは必ず26pxに戻す */
  .lphero--v2 .lphero__title { font-size: 26px; letter-spacing: 1.3px; }
  .lphero--v2 .lphero__sub { margin-top: 16px; }
  .lphero--v2 .lphero__btn { margin-top: 20px; }
  .lphero--v2 .lphero__media {
    position: static; transform: none; width: auto; margin-top: 32px;
  }
  .hframe__bar { height: 28px; padding: 0 10px; }
  .hframe__file { display: none; }
  /* バーが 36→28px に縮むので停止ボタンもその中に収める */
  .hframe__pause { top: 4px; right: 8px; height: 20px; padding: 0 10px; }
  .hframe__cap { margin-top: 8px; font-size: 11px; }

  /* --- hero のイメージ図 --- */
  /* 表示幅が 335px 前後まで縮むので3カラムは維持できない。
     入力→中核→出力を縦に積み替え、矢印も 90deg 倒す。
     16/10 の固定比も外して中身なりの高さにする */
  .hframe--art .hframe__win { aspect-ratio: auto; padding: 20px 16px; }
  .hdiag { flex-direction: column; align-items: stretch; gap: 10px; }
  .hdiag__col, .hdiag__core { flex: 0 0 auto; }
  .hdiag__core { margin-top: 0; }
  .hdiag__col { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hdiag__cap { flex: 0 0 100%; }
  .hdiag__chip { flex: 1 1 calc(50% - 4px); }
  .hdiag__arrow { align-self: center; width: 10px; height: 22px; }
  .hdiag__arrow::before {
    left: 50%; top: 0; transform: translateX(-50%);
    width: 2px; height: 15px;
  }
  .hdiag__arrow::after {
    right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid rgba(42, 172, 226, 0.9);
    border-bottom: 0;
  }
  .hdiag__goal { flex: 1 1 calc(50% - 4px); }

  /* --- 01 problem --- */
  .lpwhite .inner { padding: 48px 20px 0; }
  /* PC の 2 カラムグリッド（ラベル+コピー / 課題カード）を解除して縦積みに戻す。
     余白は .lpwhite .inner 側が持つので .problem 自身の padding は落とす */
  .problem { display: block; padding: 0; }
  /* PC でグリッドセルに収めるために付けた justify-self は、block レイアウトでも
     効く（＝箱が内容幅に縮む）ブラウザがあるので明示的に戻す */
  .problem__label { margin-bottom: 32px; justify-self: normal; }
  /* SPは階段状のインデントをやめ、全カードを同じ幅で縦に積む。
     旧実装は PC の千鳥を模して 4 段のインデント（0/20/40/60px）を付けていたが、
     幅が揃わず「だんだん小さくなる」ように見えるため素直な縦積みにした */
  .pains {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 16px; margin-top: 32px;
  }
  /* PC の align-self:start（グリッドセルで内容幅に縮める指定）が効いたままだと、
     フレックスの縦積みでもカードが内容幅に縮み、本文量に応じて1枚ずつ幅が変わる
     （＝下へ行くほど細くなって見える）。stretch に戻して全カードを同じ幅にする */
  .pain { height: auto; min-height: 0; width: auto; max-width: none; align-self: stretch; }
  /* PC の千鳥（:nth-child による margin / padding）は詳細度を揃えないと打ち消せない */
  .pain:nth-child(2n) { margin-top: 0; }
  .pain:nth-child(4n+1), .pain:nth-child(4n+2),
  .pain:nth-child(4n+3), .pain:nth-child(4n+4) { margin-left: 0; }
  .pain:nth-child(4n+1), .pain:nth-child(4n+3) { padding-right: 16px; }

  /* --- 02 solution --- */
  /* PC で付けた固定高（794px）はSPでは不要 */
  .lpsolution { height: auto; display: block; }
  .lpsolution__label { margin: 56px 0 24px; }
  .lpsolution__body { position: static; width: auto; padding-bottom: 56px; }
  /* PC版の .lpsolution--video .lpsolution__body（クラス2つ）はこの1クラスの指定より
     詳細度が高く、メディアクエリの中でも勝ってしまう。同じ詳細度で打ち消す */
  .lpsolution--video { padding-bottom: 0; }
  .lpsolution--video .lpsolution__body { width: auto; margin: 0; }
  .lpsolution--nofig { padding-bottom: 0; }
  .lpsolution--nofig .lpsolution__body { width: auto; margin: 0; }
  .lpsolution__fig { width: 100%; height: auto; aspect-ratio: 4 / 3; }

  /* --- CTA帯 --- */
  .lpcta { height: auto; padding: 48px 20px; }
  .lpcta__in { position: static; transform: none; }

  /* --- 追加セクション（確認申請審査AI 等）--- */
  .lpsec { padding-top: 56px; }
  .lpsec--first { padding-top: 100px; }
  .lp .team { margin-bottom: 56px; }
  .lpsec--last { padding-bottom: 56px; }
  /* PCの2行前提の改行はSPでは不要（.team__side が全幅になる） */
  .lp .team__title br { display: none; }
  .lpsec .inner { padding: 0 20px; gap: 24px; }
  .lpsec .lpsolution__fig { align-self: stretch; }
  /* SPは動画の表示幅が 350px 前後まで縮むので、88px のままだと画面を覆いすぎる */
  .vfig__play { width: 64px; height: 64px; }
  .vfig__playicon {
    margin-left: 5px;
    border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px;
  }
  .problem__note { margin-top: 24px; margin-bottom: 0; }

  .relatedband .inner { padding: 32px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }

  /* --- 問い合わせフォームの枠 --- */
  /* SPは左右20pxまで詰める（フォーム自体の可視幅を確保するため） */
  .formbox { padding: 24px 20px; margin: 0 -20px; }
  .contactinfo .dtable th { width: auto; }

  /* minmax(0,1fr) にしないとトラックが min-content 未満に縮めない。
     word-break:auto-phrase は「折り返せない最小単位」を1文字から1文節に広げるので
     min-content が跳ね上がり、1fr のままだと SP で横スクロールが出る（実測 434px）。 */
  .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

  /* 表はSPでは行ごとに縦積み（横スクロールを避ける） */
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; width: auto; }
  .dtable thead { display: none; }
  .dtable tr { padding: 16px 0; border-bottom: 1px solid var(--secondary-2); }
  .dtable th, .dtable td { padding: 2px 0; border: 0; }
  .dtable tbody th { font-size: 16px; margin-bottom: 4px; }
  .dtable td.is-num { display: none; }

  /* --- 03 functions --- */
  .functions .inner { height: auto; padding: 56px 20px; display: block; }
  .functions__label { margin: 0 0 24px; }
  .functions__head { position: static; white-space: normal; margin-bottom: 32px; }
  /* .funclist は grid。flex-direction では効かず PC の
     width:1120px / repeat(4, 262px) が残って横溢れの原因になっていた */
  .funclist { position: static; width: auto; grid-template-columns: 1fr; gap: 24px; }
  .func { width: 100%; }
  .func__title { height: auto; font-size: 17px; }

  /* --- 04 case studies --- */
  .lpcases .inner { height: auto; padding: 48px 20px; display: block; }
  .lpcases__label { margin: 0 0 24px; }
  .lpcases__head { position: static; flex-direction: column; align-items: flex-start; gap: 8px; white-space: normal; }
  .lpcaselist { position: static; width: auto; margin-top: 24px; }
  .lpcase { height: auto; padding-top: 40px; }
  .lpcase__diamond { left: -8px; top: 24px; transform: scale(0.7); }
  .lpcase__tile { position: static; width: 100%; height: 220px; }
  .lpcase__chip { position: static; display: inline-block; margin: -22px 0 0 12px; padding: 10px 16px; font-size: 15px; }
  .lpcase__body { position: static; width: auto; margin-top: 12px; padding: 20px 16px; }
  .lpcase__title { white-space: normal; }

  /* --- 05 strengths / 06 clients / 07 flow ---
     縦積みへの組み替えは styles.css のSPがそのまま効く。
     ここで戻すのは「白地版だけに掛けた縦位置の上書き」だけ。
     .lp が1つ多いぶん詳細度が高く、放っておくとSPでPC座標が生き残る。
     白地版はセクション間の余白をセクション自身のパディングで取る */
  .lp .strengths .inner,
  .lp .clients .inner,
  .lp .flow .inner { height: auto; padding: 56px 20px; display: block; }
  .lp .strengths__label,
  .lp .clients__label { margin: 0 0 24px; }
  /* 白地版はリード文と ロゴ列 の間を TOP より詰める */
  .lp .clients__copy { margin-bottom: 24px; }
  .lp .strengths__hgroup { position: static; width: auto; }
  .lp .flow__head { width: auto; }
  /* TOPはSPでノード内の文字を詰める（15px / 12px）が、白地版はPCと同じ大きさのまま */
  .lp .flowsteps__name { font-size: 16px; line-height: 1.75; }
  .lp .flowsteps__term { font-size: 14px; }
  /* PC用に足した端数の実値（.lp .flowsteps__diamond）は詳細度が高くSPまで効くので戻す */
  .lp .flowsteps__diamond { left: 50%; top: 0; width: 340px; height: 170px; }

  /* --- 他のプロダクト --- */
  /* --- FAQ --- */
  .faq .inner { padding: 56px 20px 8px; }
  .faq__head { margin-top: 24px; }
  .faqlist { margin-top: 24px; }
  .faqitem__q { gap: 12px; padding: 20px 0; }
  .faqitem__a { gap: 12px; padding: 0 0 20px; }
  .faqitem__mark { width: 16px; font-size: 16px; }
  .faqitem__qtext { font-size: 16px; letter-spacing: 0.8px; }
  .faqitem__icon { width: 16px; height: 16px; margin-top: 3px; }
  .faqitem__icon::before { width: 16px; }
  .faqitem__icon::after { height: 16px; }

  .others .inner { height: auto; padding: 8px 20px 56px; }
  .others__head { position: static; width: auto; margin-bottom: 32px; }
  .otherlist { position: static; width: auto; grid-template-columns: 1fr; row-gap: 8px; }
  .othercard { height: 220px; }
  .othercard::before, .othercard::after { left: 5px; width: auto; right: 0; }
  .othercard::after { width: 2px; right: auto; }

  /* --- tail --- */
  .lp .tail { padding: 56px 20px 32px; }
  .lp .footer { margin-top: 72px; }
}