/* ==========================================================================
   top-v6.css — サンレイラ トップページ v6（フォレンジック・クローン版）
   基準サンプル：Generative Agents（generative-agents.co.jp/contact/education-service/）
   　→ 骨格・タイポ規律：Marcellus大見出し（letter-spacing -5%／line-height 0.8x）＋
   　  Zen Kaku Gothic New本文の非対称レイアウト、コンテナ幅1224px、罫線、
   　  黒に近いテキスト(#1a1b1f)、ピル型ボタン(radius 9999px / padding 16px 32px)
   融合：Flagship（flagship.inc/about/）
   　→ 配色・アクセント：白ベース＋ロイヤルブルー1色。青ベタ帯の大型パネル（グラデ禁止・単色）
   　  eyebrowラベル16px/weight 350相当・見出しは太字を使わず300-500ウェイトで上品さを出す
   　  実写（診断ツールの実画面スクショ・代表写真）を要所で借用
   2026-08-15：実測値ドキュメント（design-research/2026-08-15_実測値.md）の数値をそのまま移植。
   雰囲気での模倣をやめ、フォントサイズ・weight・letter-spacing・line-height・コンテナ幅・
   ボタンpaddingをheadless Chromeのcomputed styleから実測して置換。
   円のプレースホルダーは廃止し、Flagship Services/Products帯を参考にした3Dタイル風
   SVGアイコンクラスター（単色＋シャドウのみ・グラデーション不使用）に置換。
   すべて body.v6 スコープ。v2.css / fx.css の共通部品には触れない。
   禁止事項：マスコット／連番／英語eyebrow乱発／均一カード3列／グラデーション／全中央揃え
   ========================================================================== */

body.v6{
  --v6-bg:#ffffff;
  --v6-ink:#1a1b1f;
  --v6-ink-soft:#4f4f4f;
  --v6-dim:#727272;
  --v6-panel:#f6f6f6;
  --v6-border:#e7e7e7;
  --v6-blue:#1e2b74;
  --v6-blue-deep:#12184f;
  --v6-blue-tint:rgba(30,43,116,.06);
  --v6-serif:"Marcellus","Times New Roman",serif;
  /* 実測：Flagship .p-header-nav__dropdown-link:hover / .c-cta-card__* / .p-menu__panel の
     transition が共通して使うイージング（main.css直取得・fetchで確認済み）。ホバー全般の基準カーブに採用 */
  --v6-ease-hover:cubic-bezier(0,.55,.45,1);
  background:var(--v6-bg);color:var(--v6-ink);
  font-feature-settings:"palt" 1;
}

/* =====================================================================
   スクロール連動リビール：v2.css共通の .reveal（translateY(48px)/1s）を
   実測値に合わせて上書き（body.v6スコープのみ・他ページ非干渉）。
   実測：GA `html.reveal-on-view-ready [data-reveal]` →
   translateY(24px)→0 / opacity 0→1 / duration 0.6s / ease-out（cubic-bezier(0,0,.2,1)）/
   stagger delay = index * 90ms（v2.jsの data-stagger 実装と偶然一致・そのまま踏襲）
   ===================================================================== */
body.v6 .reveal{transform:translateY(20px);transition:opacity .65s cubic-bezier(0,0,.2,1),transform .65s cubic-bezier(0,0,.2,1)}
@media(prefers-reduced-motion:reduce){body.v6 .reveal{transition:none;transform:none}}
body.v6 .wrap{max-width:1224px}
@media(max-width:640px){body.v6 .wrap{padding:0 24px}}

/* ----- 共通：section英字見出し（eyebrow・実測16px/350相当）／和文huge見出し／本文 -----
   実測：Flagship .c-eyebrow = 16px / weight 350 / line-height 1.0 / letter-spacing normal
   従来は26-38pxまで肥大化しhugeと競合していたため、eyebrowはeyebrowの寸法に戻し、
   サイズで語るのはv6huge側に一本化する（階層の主従を明確化） */
body.v6 .v6sec-en{display:block;font-family:var(--v6-serif);font-weight:400;font-size:17px;letter-spacing:0;line-height:1.15;color:var(--v6-ink-soft);margin-bottom:18px}
body.v6 .v6sec-en.on-blue{color:rgba(255,255,255,.68)}
body.v6 .v6sechead{margin-bottom:52px;text-align:left}
body.v6 .v6huge{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:clamp(26px,3.4vw,44px);line-height:1.4;letter-spacing:-.015em;max-width:17em;margin:0;color:var(--v6-ink);text-align:left}
body.v6 .v6huge.on-blue{color:#fff}
body.v6 .v6huge b,body.v6 .v6huge strong{font-weight:700}
body.v6 .v6body{max-width:42em;font-size:16px;line-height:1.9;color:var(--v6-ink-soft);text-align:left;margin-top:26px}
body.v6 .v6body p+p{margin-top:20px}
body.v6 .v6body.on-blue{color:rgba(255,255,255,.82)}

/* ----- section の箱（実測：GA pt-40=160pxの「余白は惜しまない」方向性を静的レイアウト向けに換算） ----- */
body.v6 .v6slab{padding:136px 0}
body.v6 .v6panel{background:var(--v6-panel)}
@media(max-width:900px){body.v6 .v6slab{padding:80px 0}}

/* ----- ヘッダー：白地・黒文字（他ページのダークヘッダーは変更しない／このページのみ上書き） ----- */
body.v6 header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--v6-border);box-shadow:none}
body.v6 header.tight{background:rgba(255,255,255,.98)}
body.v6 .menubtn{background:transparent;border:1px solid rgba(22,23,27,.18);backdrop-filter:none}
body.v6 .menubtn:hover{background:rgba(22,23,27,.06)}
body.v6 .menubtn span{background:var(--v6-ink)}

/* ----- ボタン（実測：GA資料請求ボタン padding 16px 32px / radius 9999px を採用） ----- */
body.v6 .v6btns{display:flex;gap:14px;flex-wrap:wrap}
body.v6 .v6btn{display:inline-flex;align-items:center;gap:8px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:14.5px;padding:16px 32px;border-radius:9999px;transition:transform .4s var(--v6-ease-hover),box-shadow .4s var(--v6-ease-hover),background .25s,border-color .25s,color .25s;text-decoration:none;border:1px solid transparent;will-change:transform}
body.v6 .v6btn .ar{display:inline-block;transition:transform .35s var(--ease)}
body.v6 .v6btn:hover .ar{transform:translateX(5px)}
body.v6 .v6btn-blue{background:var(--v6-blue);color:#fff}
body.v6 .v6btn-blue:hover{background:var(--v6-blue-deep);transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(18,24,79,.45)}
body.v6 .v6btn-line{background:transparent;color:var(--v6-ink);border-color:var(--v6-ink)}
body.v6 .v6btn-line:hover{background:var(--v6-ink);color:#fff;transform:translateY(-3px);box-shadow:0 16px 32px -14px rgba(26,27,31,.35)}
body.v6 .v6btn-white{background:#fff;color:var(--v6-blue-deep)}
body.v6 .v6btn-white:hover{background:#fff;transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(0,0,0,.35)}
body.v6 .v6btn:active{transform:translateY(-1px) scale(.98)}

/* =====================================================================
   1. INTRO — 小ラベル＋一行言い切り＋説明文＋ページ内ピルナビ
   （Flagship about冒頭準拠。承認済みコピーの再構成のみ・新規クレーム無し）
   ===================================================================== */
body.v6 .v6intro{background:var(--v6-bg);padding:168px 0 80px;text-align:left}
body.v6 .v6intro-in{max-width:1040px}
/* 実測：GA括弧付きeyebrow = 12px / weight 500 / line-height 1.6 / letter-spacing normal
   （従来の letter-spacing:.1em はサンプルに存在しない「AIっぽさ」の温床だったため撤去） */
body.v6 .v6intro-cap{font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;font-weight:500;letter-spacing:0;line-height:1.6;color:var(--v6-ink-soft);margin:0 0 28px}
body.v6 .v6intro-lead{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:clamp(22px,2.7vw,31px);line-height:1.55;letter-spacing:-.015em;color:var(--v6-ink);margin:0 0 24px}
body.v6 .v6intro-lead b,body.v6 .v6intro-lead strong{font-weight:700;color:var(--v6-ink)}
body.v6 .v6intro-desc{font-size:15.5px;line-height:1.9;color:var(--v6-dim);margin:0 0 44px;max-width:34em}
body.v6 .v6pillnav{display:flex;flex-wrap:wrap;gap:10px}
body.v6 .v6pill{display:inline-flex;align-items:center;font-family:"Zen Kaku Gothic New",sans-serif;font-size:13px;font-weight:500;color:var(--v6-ink-soft);padding:10px 22px;border-radius:9999px;border:1px solid var(--v6-border);text-decoration:none;transition:border-color .22s var(--v6-ease-hover),color .22s var(--v6-ease-hover),background .22s var(--v6-ease-hover),transform .22s var(--v6-ease-hover)}
/* 実測：GA .hover\:-translate-y-0.5（-0.125rem=-2px）をそのまま採用。移動量は変えず、durationのみ実測寄りに短縮 */
body.v6 .v6pill:hover{border-color:var(--v6-blue);color:var(--v6-blue);background:var(--v6-blue-tint);transform:translateY(-2px)}
@media(max-width:900px){
  body.v6 .v6intro{padding:132px 0 56px}
  body.v6 .v6intro-lead br{display:none}
}

/* =====================================================================
   1.5 帯パネル2段重ね — 青＝支援サービス概要／黒＝AI業務診断
   （Flagship Services/Products帯パネル準拠。単色ベタのみ・グラデ無し）
   ===================================================================== */
body.v6 .v6bandpanel{width:100%;padding:104px 0}
body.v6 .v6band-blue{background:var(--v6-blue);color:#fff}
body.v6 .v6band-black{background:#0c0c0e;color:#fff}
body.v6 .v6band-in{display:grid;grid-template-columns:.82fr 1fr;gap:72px;align-items:center}
body.v6 .v6band-in>*{min-width:0}
body.v6 .v6band-copy{max-width:30em}
body.v6 .v6band-copy .v6btns{margin-top:36px}

/* =====================================================================
   青パネルの3Dタイルクラスター（Flagship Services/Products帯の構造を移植）
   ・白の角丸スクエアタイルが軽く回転して浮遊、細いワイヤーで接続、
     ソフトなコンタクトシャドウのみで立体感を作る（グラデーション不使用・単色ベタ）
   ・Shopify/Miraklのような他社ロゴが無いため、AI・研修・業務を表す抽象アイコン
     グリフ（SVG）をタイル内に配置する
   ===================================================================== */
/* v6icons3d-clip：グリッド/フレックス上のレイアウト箱（可変幅・overflow:hiddenで
   グリッドのmin-content伸長を無効化）。v6icons3d：380x280固定キャンバス（実座標はこの中で完結し、
   小さい画面ではキャンバスごとscaleで縮小するので絶対配置pxがズレない） */
body.v6 .v6icons3d-clip{position:relative;width:100%;max-width:380px;height:280px;overflow:hidden}
body.v6 .v6icons3d{position:absolute;top:0;left:0;width:380px;height:280px}
body.v6 .v6wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* 3層シャドウ（接地影・中間影・環境光）で「置いただけ」を脱する。光源は左上想定
   （実測メモ5章：Flagshipタイル群も光源左上のコンタクトシャドウのみで立体感を作る方式）。
   ハイライトは::beforeの小さな放射光のみに限定（タイル全面に敷くグラデーションは使わない＝
   「グラデ多用禁止」の範囲内で、単色ベタ+影+ハイライトの表現として許容）。
   浮遊アニメは transform とは独立した translate プロパティで実装し、hoverの --lift による
   transform トランジションと干渉しないようにする */
body.v6 .v6tile{--r:0deg;--lift:0px;--dur:6s;--delay:0s;position:absolute;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(8,10,40,.22),0 8px 16px -6px rgba(8,10,40,.28),0 28px 48px -16px rgba(8,10,40,.55);rotate:var(--r);transform:translateY(var(--lift));transition:transform .45s var(--v6-ease-hover),box-shadow .45s var(--v6-ease-hover);animation:v6float var(--dur) ease-in-out infinite;animation-delay:var(--delay)}
body.v6 .v6tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 26% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 56%);opacity:.55;pointer-events:none}
body.v6 .v6tile .v6ticon{position:relative}
body.v6 .v6tile.t1{--dur:6.4s;--delay:0s}
body.v6 .v6tile.t2{--dur:5.6s;--delay:-1.4s}
body.v6 .v6tile.t3{--dur:7.2s;--delay:-2.8s}
@keyframes v6float{0%,100%{translate:0 0}50%{translate:0 -7px}}
body.v6 .v6icons3d:hover .v6tile.t1{--lift:-5px;box-shadow:0 2px 4px rgba(8,10,40,.24),0 12px 22px -8px rgba(8,10,40,.32),0 36px 58px -18px rgba(8,10,40,.6)}
body.v6 .v6icons3d:hover .v6tile.t2{--lift:-11px;box-shadow:0 2px 4px rgba(8,10,40,.24),0 12px 22px -8px rgba(8,10,40,.32),0 36px 58px -18px rgba(8,10,40,.6)}
body.v6 .v6icons3d:hover .v6tile.t3{--lift:-7px;box-shadow:0 2px 4px rgba(8,10,40,.24),0 12px 22px -8px rgba(8,10,40,.32),0 36px 58px -18px rgba(8,10,40,.6)}
@media(prefers-reduced-motion:reduce){body.v6 .v6tile{animation:none}}

/* 黒パネルの実画面スクショ（AI業務診断ツール）
   ・Flagshipの製品タイル同様「浮遊＋傾き＋陰影」で提示。ブラウザ風フレーム＋
     わずかな3Dチルトで「貼っただけ」を脱する */
body.v6 .v6band-shot{position:relative;perspective:1400px}
body.v6 .v6band-shot-frame{border-radius:14px;overflow:hidden;background:#1c1d22;box-shadow:0 6px 16px rgba(0,0,0,.28),0 40px 80px -20px rgba(0,0,0,.55),0 90px 120px -60px rgba(0,0,0,.5);transform:rotateY(-6deg) rotateX(2deg) rotate(-.6deg);transition:transform .5s var(--v6-ease-hover);transform-style:preserve-3d}
body.v6 .v6band-shot:hover .v6band-shot-frame{transform:rotateY(-2deg) rotateX(.5deg) rotate(-.2deg) translateY(-6px)}
body.v6 .v6band-shot-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#1c1d22;border-bottom:1px solid rgba(255,255,255,.06)}
body.v6 .v6band-shot-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);display:block}
body.v6 .v6band-shot img{display:block;width:100%;height:auto}
body.v6 .v6band-shot-badge{position:absolute;top:-16px;right:22px;background:#fff;color:var(--v6-blue-deep);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:9px 18px;border-radius:9999px;box-shadow:0 12px 24px -8px rgba(0,0,0,.35);z-index:2}

@media(max-width:900px){
  body.v6 .v6bandpanel{padding:64px 0}
  body.v6 .v6band-in{grid-template-columns:1fr;gap:36px}
  body.v6 .v6icons3d-clip{max-width:none;height:230px}
  body.v6 .v6icons3d{transform:scale(.82);transform-origin:top left}
  body.v6 .v6band-shot-frame{transform:none}
  body.v6 .v6band-shot:hover .v6band-shot-frame{transform:none}
}
@media(max-width:400px){
  body.v6 .v6icons3d-clip{height:200px}
  body.v6 .v6icons3d{transform:scale(.72)}
}

/* =====================================================================
   2. コンセプト（薄グレーパネル）
   ===================================================================== */
/* .v6panel / .v6sechead / .v6huge / .v6body 共通で対応 */

/* =====================================================================
   3. 読みもの棚（3カテゴリ・GAのPublicationsグリッドに準拠。実記事のみ）
   ===================================================================== */
body.v6 .v6shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--v6-border);border:1px solid var(--v6-border)}
body.v6 .v6shelfcol{background:#fff;padding:38px 34px;display:flex;flex-direction:column}
body.v6 .v6shelfcol h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:15.5px;letter-spacing:0;color:var(--v6-ink);margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--v6-border)}
/* 実測：Flagship .p-header-nav__dropdown-link:hover { transform: translate(3px) }
   （transition .3s cubic-bezier(0,.55,.45,1)）と移動量・カーブとも完全一致で採用 */
body.v6 .v6shelfitem{display:block;padding:16px 0;border-bottom:1px solid var(--v6-border);text-decoration:none;transition:transform .3s var(--v6-ease-hover)}
body.v6 .v6shelfitem:hover{transform:translateX(3px)}
body.v6 .v6shelfitem .d{display:block;font-family:var(--v6-serif);font-size:12px;letter-spacing:0;color:var(--v6-dim);margin-bottom:7px}
body.v6 .v6shelfitem .t{display:block;font-size:14px;line-height:1.75;color:var(--v6-ink);font-weight:500;transition:color .2s}
body.v6 .v6shelfitem:hover .t{color:var(--v6-blue)}
body.v6 .v6shelfmore{margin-top:22px;padding-top:2px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--v6-blue);text-decoration:none}
body.v6 .v6shelfmore .ar{transition:transform .3s var(--ease)}
body.v6 .v6shelfmore:hover .ar{transform:translateX(4px)}
@media(max-width:900px){body.v6 .v6shelf{grid-template-columns:1fr}body.v6 .v6shelfcol{padding:30px 26px}}

/* =====================================================================
   4. 支援領域3本柱（罫線縦積みリスト・GA/内藤大塚方式）
   ===================================================================== */
body.v6 .v6svclist{margin-top:0;border-top:1px solid var(--v6-border)}
body.v6 .v6svcrow{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:34px 0;border-bottom:1px solid var(--v6-border);text-decoration:none;color:inherit;transition:background .25s}
body.v6 .v6svcrow:hover{background:var(--v6-blue-tint)}
body.v6 .v6svcrow h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(18px,2vw,22px);margin:0 0 8px;line-height:1.4;color:var(--v6-ink)}
body.v6 .v6svcrow p{font-size:14px;color:var(--v6-dim);line-height:1.85;max-width:44em;margin:0}
body.v6 .v6arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--v6-border);display:grid;place-items:center;color:var(--v6-blue);font-size:17px;transition:background .25s,border-color .25s,color .25s,transform .3s var(--v6-ease-hover);flex:none}
body.v6 .v6svcrow:hover .v6arrow{background:var(--v6-blue);border-color:var(--v6-blue);color:#fff;transform:translate(3px,-3px)}
@media(max-width:760px){
  body.v6 .v6svcrow{grid-template-columns:1fr;row-gap:10px;padding:26px 0}
  body.v6 .v6arrow{display:none}
}

/* =====================================================================
   5. CONTACT（代表写真1点のみ・Flagship借用の実写要素）
   ===================================================================== */
body.v6 .v6contact-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:24px}
body.v6 .v6contact-person{display:flex;align-items:center;gap:16px;flex:none}
body.v6 .v6contact-person img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:top center;display:block}
body.v6 .v6contact-person p{font-size:12.5px;color:var(--v6-dim);font-weight:500;margin:0}

/* =====================================================================
   フッター：黒ベタ（既存の紺系ink-deepより無彩色寄りに調整。このページのみ）
   ===================================================================== */
body.v6 footer{background:#0c0c0e}
/* v2.css共通の .fcol a{transition:color .2s} に transform を追加（色替えのみだった動きに
   Flagship実測のリンクhover言語＝translate(3px)を足して統一感を出す。色遷移のdurationは変えない） */
body.v6 .fcol a{transition:color .2s,transform .25s var(--v6-ease-hover)}
body.v6 .fcol a:hover{color:#9aa4e6;transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  body.v6 .v6band-shot-frame,body.v6 .v6band-shot:hover .v6band-shot-frame{transition:none;transform:none}
}

/* =====================================================================
   fx.js/fx.css の全ページ共通エフェクトを、このページだけモノトーン+青単色に矯正
   （fx.css自体は無改変。ここで body.v6 スコープの上書きのみ行う）
   ===================================================================== */
body.v6 #fxprog{background:var(--v6-blue);box-shadow:none}
body.v6 #fxglow{opacity:0!important}

/* Blender代替：three.js実レンダリングの3Dタイル画像（浮遊アニメはCSSで維持） */
body.v6 .v6icons3d-clip{height:auto;overflow:visible}
body.v6 .v6tiles3d{display:block;width:100%;max-width:420px;height:auto;animation:v6float 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){body.v6 .v6tiles3d{animation:none}}

/* ==== 出方の作り込み（2026-08-15 社長指示：動きの質をFlagship級へ） ==== */
/* リビール：移動量を大きく・easeOutQuint系・時間を伸ばして「ゆったり高級」に */
body.v6 .reveal{transform:translateY(38px);transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1)}
body.v6 .v6huge.reveal,body.v6 .v6intro-lead.reveal{transform:translateY(46px)}
/* 3Dタイル：スケール＋回転を伴うオーバーシュート登場→浮遊へ接続 */
body.v6 .v6icons3d-clip .v6tiles3d{opacity:0}
body.v6 .v6icons3d-clip.in .v6tiles3d{opacity:1;animation:v6tilesIn 1.15s cubic-bezier(.22,1,.36,1) both,v6float 7s ease-in-out 1.15s infinite}
@keyframes v6tilesIn{0%{opacity:0;transform:scale(.88) translateY(52px) rotate(-2.5deg)}55%{opacity:1}78%{transform:scale(1.015) translateY(-5px) rotate(.4deg)}100%{transform:scale(1) translateY(0) rotate(0)}}
/* 診断スクショ：下から起き上がりつつチルトが決まる */
body.v6 .v6band-shot.reveal{transform:translateY(56px) scale(.96)}
body.v6 .v6band-shot.reveal.in{transform:translateY(0) scale(1)}
body.v6 .v6band-shot.reveal,body.v6 .v6band-shot.reveal.in{transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){
  body.v6 .reveal,body.v6 .v6band-shot.reveal{transition:none;transform:none}
  body.v6 .v6icons3d-clip .v6tiles3d,body.v6 .v6icons3d-clip.in .v6tiles3d{opacity:1;animation:none}
}

/* ChatGPT生成のキービジュアル：帯と同系の背景を持つ正方形画像を、端をフェードさせて帯に溶け込ませる */
body.v6 .v6band-blue{background:#162b76}
body.v6 .v6tiles3d{max-width:460px;border-radius:24px;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 99%);mask-image:radial-gradient(closest-side,#000 58%,transparent 99%)}

/* ヒーロー2カラム化＋生成ビジュアル（2026-08-15 社長指示：ヒーロー作り直し・動画っぽい動き） */
body.v6 .v6intro{padding:128px 0 64px}
body.v6 .v6intro-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;max-width:1224px}
body.v6 .v6intro-lead{font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.35;letter-spacing:-.02em}
body.v6 .v6intro-desc{margin-bottom:36px}
body.v6 .v6herovis{display:block;width:100%;height:auto;animation:v6drift 11s ease-in-out infinite;will-change:transform}
@keyframes v6drift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.02)}}
@media(max-width:860px){
  body.v6 .v6intro{padding:112px 0 48px}
  body.v6 .v6intro-grid{grid-template-columns:1fr;gap:28px}
  body.v6 .v6intro-vis{order:2}
}
@media(prefers-reduced-motion:reduce){body.v6 .v6herovis{animation:none}}

/* ==== GA本家準拠の巨大タイポヒーロー（2026-08-15） ==== */
body.v6 .v6intro{padding:96px 0 64px;position:relative;overflow:hidden}
body.v6 .v6intro::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(30,43,116,.10) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 78%);mask-image:linear-gradient(115deg,transparent 42%,#000 78%);pointer-events:none}
body.v6 .v6giantwrap{position:relative}
body.v6 .v6giant{position:relative;font-family:Marcellus,serif;font-weight:400;font-size:clamp(72px,12.6vw,182px);line-height:.98;letter-spacing:.005em;white-space:nowrap;margin:0 0 28px -0.03em;padding-left:max(24px,calc((100vw - 1224px)/2));background:linear-gradient(178deg,#454b63 0%,#0b1130 52%,#2a3153 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.v6 .v6giant-yomi{position:absolute;right:max(24px,calc((100vw - 1224px)/2));bottom:-8px;font-family:"Zen Kaku Gothic New",sans-serif;font-size:13px;letter-spacing:.34em;color:var(--v6-ink-soft);-webkit-text-fill-color:var(--v6-ink-soft)}
body.v6 .v6intro-low{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:64px}
body.v6 .v6intro-en{font-family:Marcellus,serif;font-size:13.5px;letter-spacing:.08em;color:var(--v6-ink-soft);margin:0 0 6px}
body.v6 .v6intro-state{max-width:560px;text-align:left}
body.v6 .v6intro-lead2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(30px,3.3vw,44px);line-height:1.4;letter-spacing:-.01em;color:var(--v6-ink);margin:0 0 18px}
body.v6 .v6intro-desc2{font-size:15px;line-height:1.9;color:var(--v6-dim);margin:0 0 30px}
@media(max-width:860px){
  body.v6 .v6giant{font-size:15.5vw;padding-left:24px}
  body.v6 .v6giant-yomi{display:none}
  body.v6 .v6intro-low{grid-template-columns:1fr;gap:20px;margin-top:36px}
}