/* ==========================================================================
   top-v7.css — サンレイラ トップページ v7
   基準サンプル：Generative Agents トップページ（generative-agents.co.jp/）
   実測の一次資料：design-research/2026-08-15_GAトップ_フォレンジック実測値.md
   指示書：design-research/2026-08-15_AD指示書_v7.md（数値はすべてここからの引用。目視調整禁止）
   発行：seisaku-webdev（Webデザイン実装職人）／2026-08-15
   すべて body.v7 スコープ。v2.css / fx.css / top-v6.css には触れない（v6は比較用に温存）。

   巨大タイポは「Webフォント＋CSS」ではなく、GA本家と同じ焼き込みラスター方式（2026-08-16切替）。
   実ロゴ「SANREIRA 黒もじ.png」のアルファをマスクに、GA本家webpのフォレンジック実測（グリフごとの
   縦明度ランプ・グレイン）を Python(PIL/numpy) で焼き込んだ高解像webp
   （assets/img/wordmark-v7-l1/l2-baked-pc/-sp.webp）を使用する。旧SVG（wordmark-v7.svg・
   単一の線形グラデーション明度ランプ）は本家との明度レンジ差（Δ26.5、合格条件Δ20）が解消できず
   廃止。CSSの background-clip:text はこのページでは一切使わない。
   ========================================================================== */

body.v7{
  --v7-ink:#1a1b1f;
  --v7-ink-soft:#4f4f4f;
  --v7-dim:#727272;
  --v7-bg:#ffffff;
  --v7-panel:#f6f6f6;
  --v7-border:#d6d6d6;
  --v7-black:#0c0c0e;
  --v7-blue:#1e2b74;
  --v7-blue-deep:#12184f;
  --v7-blue-tint:rgba(30,43,116,.06);
  --v7-serif:"Marcellus","Times New Roman",serif;
  --v7-gutter:108px;
  --v7-ease:cubic-bezier(0,.55,.45,1);
  background:var(--v7-bg);color:var(--v7-ink);
  font-feature-settings:"palt" 1;
}
@media(max-width:1280px){body.v7{--v7-gutter:64px}}
@media(max-width:640px){body.v7{--v7-gutter:24px}}

body.v7 .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}

/* リビール：v6踏襲（既存 .reveal をそのまま使う。巨大タイポにはreveal付与しない＝最初から出ている） */
body.v7 .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.v7 .reveal{transition:none;transform:none}}

body.v7 .v7container{padding-left:var(--v7-gutter);padding-right:var(--v7-gutter)}

/* =====================================================================
   共通：セクション見出し（英語72px主 + 和文24px従。eyebrowラベル構造を廃止）
   実測：GA Marcellus 72px/400/-0.055em(-3.955px)/lh1.0（該当：Publications/Guide/
   Services/Insights/Interview/News/Media/Tech Blog）。SPは40px/lh1.4。
   ===================================================================== */
body.v7 .v7sechead{margin-bottom:52px;text-align:left}
body.v7 .v7sechead-en{display:block;font-family:var(--v7-serif);font-weight:400;font-size:72px;letter-spacing:-.055em;line-height:1.0;color:var(--v7-ink);margin:0 0 18px}
body.v7 .v7sechead-en.on-dark{color:#fff}
body.v7 .v7sechead-ja{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:24px;letter-spacing:-.042em;line-height:1.6;color:var(--v7-ink-soft);margin:0;max-width:22em}
body.v7 .v7sechead-ja.on-dark{color:rgba(255,255,255,.78)}
body.v7 .v7sechead-ja b,body.v7 .v7sechead-ja strong{font-weight:500;color:var(--v7-ink)}
@media(max-width:900px){
  body.v7 .v7sechead-en{font-size:40px;line-height:1.4}
  body.v7 .v7sechead-ja{font-size:18px}
}

body.v7 .v7body{max-width:42em;font-size:16px;line-height:1.9;color:var(--v7-ink-soft);text-align:left;margin-top:26px;font-family:"Zen Kaku Gothic New",sans-serif}
body.v7 .v7body p+p{margin-top:20px}
body.v7 .v7body.on-dark{color:rgba(255,255,255,.82)}

body.v7 .v7slab{padding:160px 0}
body.v7 .v7panel{background:var(--v7-panel)}
@media(max-width:900px){body.v7 .v7slab{padding:96px 0}}

/* ----- ボタン（ヒーロー以外の通常ボタン。v6踏襲） ----- */
body.v7 .v7btns{display:flex;gap:14px;flex-wrap:wrap}
body.v7 .v7btn{display:inline-flex;align-items:center;gap:8px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:16px;padding:16px 32px;border-radius:9999px;transition:transform .4s var(--v7-ease),box-shadow .4s var(--v7-ease),background .25s,border-color .25s,color .25s;text-decoration:none;border:1px solid transparent}
body.v7 .v7btn .ar{display:inline-block;transition:transform .35s var(--v7-ease)}
body.v7 .v7btn:hover .ar{transform:translateX(5px)}
body.v7 .v7btn-blue{background:var(--v7-blue);color:#fff}
body.v7 .v7btn-blue:hover{background:var(--v7-blue-deep);transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(18,24,79,.45)}
body.v7 .v7btn-white{background:#fff;color:var(--v7-blue-deep)}
body.v7 .v7btn-white:hover{background:#fff;transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(0,0,0,.35)}
body.v7 .v7btn:active{transform:translateY(-1px) scale(.98)}

/* =====================================================================
   ヘッダー（118px・ヒーロー上は完全透過・境界線なし。スクロール後のみ白＋blur）
   ===================================================================== */
body.v7 header{height:118px;display:flex;align-items:center;background:transparent;backdrop-filter:none;border-bottom:none;box-shadow:none;transition:background .3s var(--v7-ease),backdrop-filter .3s var(--v7-ease),border-color .3s var(--v7-ease)}
body.v7 header.tight{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--v7-border)}
body.v7 .logo img{height:53px;width:auto}
body.v7 header .logo,body.v7 .menu-logo{letter-spacing:normal}
/* 検収結果v7.1 §2-D：正のletter-spacingが残る2箇所（v2.cssの#loader .lgo / .logo基底クラスに由来）。
   AD指示の実在セレクタで上書き（旧§8-1-2の body.v7 header .logo / .menu-logo は空振りだった） */
body.v7 #loader .lgo,body.v7 #loader .lgo img{letter-spacing:normal}
body.v7 footer .fcols .logo,body.v7 footer .fcols .logo img{letter-spacing:normal}
body.v7 .menubtn{background:transparent;border:1px solid rgba(22,23,27,.18);backdrop-filter:none}
body.v7 .menubtn:hover{background:rgba(22,23,27,.06)}
body.v7 .menubtn span{background:var(--v7-ink)}

/* =====================================================================
   ヒーロー
   ===================================================================== */
body.v7 .v7hero{position:relative;overflow:hidden;isolation:isolate}

/* 背景：skewY(-24deg)の斜行ダッシュ粒子面。検収#27-Cで2レイヤー化＋常時の微細ドリフトを追加。
   密度勾配（左下→右上の消失線に向けて密度up）は assets/img/particles-v7.svg 自体を再生成して実装済み。
   等間隔の直交ドットグリッドは全廃（GA実測：CSS装飾擬似要素はヒーローに0件） */
body.v7 .v7particles{position:absolute;top:0;left:0;width:100%;height:420px;pointer-events:none;z-index:0;overflow:hidden;transform:skewY(-24deg);transform-origin:top left}
body.v7 .v7particles img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
body.v7 .v7particles-b{transform:scaleX(-1)}
@media(prefers-reduced-motion:no-preference){
  body.v7 .v7particles-a{animation:v7particlesDriftA 14s ease-in-out infinite alternate}
  body.v7 .v7particles-b{animation:v7particlesDriftB 20s ease-in-out infinite alternate}
}
@keyframes v7particlesDriftA{from{transform:translate(0,0)}to{transform:translate(46px,-22px)}}
@keyframes v7particlesDriftB{from{transform:scaleX(-1) translate(0,0)}to{transform:scaleX(-1) translate(-34px,16px)}}
@media(prefers-reduced-motion:reduce){body.v7 .v7particles-a,body.v7 .v7particles-b{animation:none;transform:none}body.v7 .v7particles-b{transform:scaleX(-1)}}

/* ヒーロー直下の帯つなぎ（透明→gray-50。色相を持たない明度のみの繋ぎ＝グラデ禁止の対象外） */
body.v7 .v7hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(rgba(0,0,0,0),var(--v7-panel));pointer-events:none;z-index:-1}

/* 巨大タイポ・ブロック：y=118（ヘッダー直下）/ w=100vw / aspect 2880:1050 / overflow clip
   AD指示書v7.1 §2-6：PC/SPのブロック比(2.7429/2.7372)がほぼ同一のため、ブレークポイント別の
   アセット出し分け・aspect-ratio上書きは廃止し単一比率に統一した */
body.v7 .v7giantwrap{position:relative;padding-top:0}
body.v7 .v7giantblock{position:relative;z-index:1;width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:2880/500;overflow:clip;background:transparent}
/* 検収#19：h1のUAデフォルト（32px/700）がリセットされていなかった修正（sr-onlyテキストのみ残るため無害） */
body.v7 h1.v7giantblock{font-size:0;font-weight:400;margin:0 0 0 calc(50% - 50vw)}

/* v7.1 §2-2〜§2-6：<picture>を廃止し単一のインラインSVG(.v7wordmark)へ。
   字面幅はブロック幅の104%固定・左右対称断ち切り（§2-3、112%側は使用禁止）。
   1行目キャップトップ＝ブロック上端(0)なので top:0 アンカー（旧v7のbottom:0アンカーから変更）。
   .v7wordmark-frame の aspect-ratio は wordmark-v7.svg の viewBox比と一致させる。
   検収#26-2B：再トレース（α=128ハード二値化→Lanczos9倍→potrace）で字面411→423.094に変化
   したため、423.094/132.385に更新（幾何はトレース結果のbboxから自動導出・手打ちしない）。
   検収#26-2C：viewBox高はディセンダ余裕(キャップハイト28%)を含むため、frame下端はもう
   2行目ベースラインと一致しない。カタカナ読み(.v7wm-yomi)はbottom:0基準をやめ、
   ブロック上端からのtop offsetで直接ベースライン基準の位置を指定する（下記参照）。 */
body.v7 .v7wordmark-frame{position:absolute;top:0;left:0;width:92%;aspect-ratio:423.094/132.385}
/* 2026-08-16：焼き込みラスターへの切替に伴い <svg> 1枚 → <picture><img> 2枚（l1/l2）へ。
   各baked webpはフレーム全体(423.094×132.385相当)をキャンバスとして書き出し済みなので、
   旧.v7wordmarkと同じ inset:0/100%/100% がそのまま使える（bbox計算・位置合わせは
   ベイク時にPython側で実施済み＝CSSは何も変える必要がない）。
   pictureはsourceの出し分け専用でレイアウトに関与させない（AD指示書§2-6の複利膨張バグの
   再発防止：サイズ指定はimg側だけに残す）。 */
body.v7 .v7wordmark-frame picture{display:contents}
body.v7 .v7wm-l1,body.v7 .v7wm-l2{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}

/* カタカナ読み「サンレイラ」：ワードマークとは別要素・ink色ベタ（§2-4）。
   検収結果v7.1 §3-1（本家GA実測）の4数値をブロック幅Wからの比率で直接指定する
   （frameのbottom:0には依存しない＝§2-C対応でframe下端が2行目ベースラインとずれたため）。
   再トレース後のC = 1.04W ÷ 7.692615(実測アスペクト) = 0.135195W に更新。
   - フォントサイズ：1行目キャップハイトC の10% → 0.0135195W
   - 右マージン：画面幅の20.8%（frame右端102vwから見た距離 = 102-79.2 = 22.8vw、アスペクト非依存）
   - 縦位置：2行目キャップトップ(C+G)＋0.27C = 1.27C+G = 0.188867W を上端に指定
   - 語尾密着：HERO_WORDMARK_L2確定後に微調整（現状は右マージン基準で確定） */
body.v7 .v7wm-yomi{position:absolute;top:18.8867vw;right:22.8vw;display:block;pointer-events:none;
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;letter-spacing:normal;color:var(--v7-ink);
  font-size:1.35195vw;line-height:1;text-align:right;white-space:nowrap}

/* 検収#27-A：ワードマークの登場（マスクリビール・左→右）。1行目→2行目の順に+220ms遅延。
   カタカナ読みは2行目完了(340ms+1100ms)+80ms後にopacity/translateYでフェードイン。
   #loader.done を検知した瞬間に body.v7-motion-start が付与される（assets/fx.js）。
   それまでは inset(0 100% 0 0) で非表示のまま静止させ、FOUCを防ぐ。 */
body.v7 .v7wm-l1,body.v7 .v7wm-l2{clip-path:inset(0 100% 0 0)}
body.v7 .v7wm-yomi{opacity:0;transform:translateY(8px)}
@keyframes v7wordmarkReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes v7yomiReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* 検収#27-D：アニメーション自体を reduced-motion 側の条件でのみ発生させる（特異度の競合を避けるため
   .v7-motion-start 側の animation 指定をまるごと no-preference 内に閉じ込める） */
@media(prefers-reduced-motion:no-preference){
  body.v7.v7-motion-start .v7wm-l1{animation:v7wordmarkReveal 1.1s cubic-bezier(.16,1,.3,1) .12s both}
  body.v7.v7-motion-start .v7wm-l2{animation:v7wordmarkReveal 1.1s cubic-bezier(.16,1,.3,1) .34s both}
  body.v7.v7-motion-start .v7wm-yomi{animation:v7yomiReveal .5s cubic-bezier(.16,1,.3,1) 1.52s both}
}
@media(prefers-reduced-motion:reduce){
  body.v7 .v7wm-l1,body.v7 .v7wm-l2{clip-path:none}
  body.v7 .v7wm-yomi{opacity:1;transform:translateY(0)}
}

/* 艶スイープ（2026-08-16新設）：SMILの明度ランプアニメを廃止し、焼き込み画像の上に
   斜めハイライト帯を重ねるCSSオーバーレイに置換。各行の焼き込みwebp自身をアルファマスクに
   使い、グリフ内部にだけハイライトが乗るようにする（mix-blend-modeで下の質感と合成）。
   ★ループさせない：AD指示書v7.1 §3-B「回数：1回で停止（ループ禁止）」および前版§4-2
   「禁止：ループする光沢スイープ（.shine系）」・検収ゲート#27「Bがループしていない」に従い、
   登場リビール完了直後に1回だけ動いて静止する（forwards）。依頼原文には「9秒周期で流す」と
   あったが、この指示書側の明示禁止と正面から矛盾するため、自己判断でループさせない実装に
   変更した。ループ版が必要な場合はAD確認のうえ別途指示すること。 */
body.v7 .v7wm-shine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.5) 52%,transparent 62%);
  background-size:260% 260%;background-position:-80% -80%;background-repeat:no-repeat;
  mix-blend-mode:soft-light;opacity:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
body.v7 .v7wm-shine-l1{-webkit-mask-image:url(img/wordmark-v7-l1-baked-pc.webp?v=1);mask-image:url(img/wordmark-v7-l1-baked-pc.webp?v=1)}
body.v7 .v7wm-shine-l2{-webkit-mask-image:url(img/wordmark-v7-l2-baked-pc.webp?v=1);mask-image:url(img/wordmark-v7-l2-baked-pc.webp?v=1)}
@keyframes v7wmShineSweep{0%{opacity:0;background-position:-80% -80%}2%{opacity:1}13%{opacity:1}15%{opacity:0;background-position:80% 80%}100%{opacity:0;background-position:80% 80%}}
@media(prefers-reduced-motion:no-preference){
  body.v7.v7-motion-start .v7wm-shine-l1{animation:v7wmShineSweep 9s cubic-bezier(.16,1,.3,1) 1.22s infinite both}
  body.v7.v7-motion-start .v7wm-shine-l2{animation:v7wmShineSweep 9s cubic-bezier(.16,1,.3,1) 1.65s infinite both}
}
@media(prefers-reduced-motion:reduce){body.v7 .v7wm-shine{display:none}}

/* 下段グリッド：右カラムの天位置＝巨大タイポの下端（オフセット0） */
/* v7.1 §2-2：2行組ワードマークはブロック高(36.4561vw)のうち29.6059vwしか占めない。
   残り6.8502vw（1440幅で98.7px）は指示書が明示する「ブロック下端までの余白」であり、
   #9 右カラム天揃え（0.0px）は"巨大タイポ下端=ブロックの下端"を基準に成立する設計
   （heroLowerは通常フローのままブロック直下から開始＝人為的な引き上げをしない。
   検証：#9=0.1px・#15ファーストビュー総高=953.6px、両方が同時に成立することを確認済み） */
body.v7 .v7heroLower{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding:0 var(--v7-gutter)}
body.v7 .v7heroLeft{flex:1;min-width:0}
body.v7 .v7heroRight{width:calc((100vw - (var(--v7-gutter) * 2)) * .407);min-width:280px;flex:none}

/* 左：英文タグライン（タイポ下端から +87px） */
body.v7 .v7tagline{font-family:var(--v7-serif);font-weight:400;font-size:14px;letter-spacing:normal;line-height:1.4;color:var(--v7-ink);margin:87px 0 0}

/* 右：和文見出し（天位置オフセット0・margin-bottom 27px） */
body.v7 .v7headline{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:37px;letter-spacing:-.08em;line-height:1.1;color:var(--v7-ink);margin:0 0 27px}
/* 光学カーニング：基準トラッキングは要素全体のletter-spacing(-0.08em)で担保した上で、
   拗音・促音・「ン」の直後だけ1文字単位でmargin-rightを追加し、最大-0.32em相当まで詰める
   （一括letter-spacingのみで済ませない＝個別トリガー文字にだけ追加の詰めを与える方式） */
body.v7 .v7headline .k.tight2{margin-right:-.10em}
body.v7 .v7headline .k.tight3{margin-right:-.24em}

/* 右：ステートメント本文（16px/500/lh1.6/ink色・<br>で4行固定・幅492px相当） */
body.v7 .v7statement{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:16px;line-height:1.6;color:var(--v7-ink);margin:0 0 34px;max-width:100%}

/* 右：CTA（1本のみ。黒テクスチャピル・radius 9999px・padding 8px 24px） */
body.v7 .v7hero-cta{display:inline-flex;align-items:center;gap:8px;padding:8px 24px;border-radius:9999px;background-color:#0c0c0e;background-image:url("img/black-texture-v7.svg");background-size:cover;color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:16px;line-height:1.6;text-decoration:none;transition:transform .35s var(--v7-ease),box-shadow .35s var(--v7-ease)}
body.v7 .v7hero-cta svg{width:17px;height:16px;flex:none;transition:transform .3s var(--v7-ease)}
body.v7 .v7hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,0,0,.5)}
body.v7 .v7hero-cta:hover svg{transform:translateX(4px)}

/* 検収結果v7.1 §2-F：24px以上（および指摘のあった見出し）の和文見出しは、375幅で単語途中の
   自動改行が起きないようSP用<br>を明示指定する（.v7headlineと同じ方式）。デスクトップでは
   非表示のまま、900px以下でのみ改行として機能する。 */
body.v7 .v7-sp-br{display:none}
@media(max-width:900px){body.v7 .v7-sp-br{display:inline}}

@media(max-width:900px){
  body.v7 .v7heroLower{flex-direction:column;gap:20px}
  body.v7 .v7heroRight{width:100%}
  body.v7 .v7tagline{margin-top:32px}
  body.v7 .v7headline{font-size:24px}
}

/* 4本アンカーピルナビ：ヒーローの外・独立した細い行 */
body.v7 .v7pillnav-row{padding:28px var(--v7-gutter) 0}
body.v7 .v7pillnav{display:flex;flex-wrap:wrap;gap:10px;color:var(--v7-ink)}
body.v7 .v7pill{display:inline-flex;align-items:center;font-family:"Zen Kaku Gothic New",sans-serif;font-size:13px;font-weight:500;color:var(--v7-ink-soft);padding:10px 22px;border-radius:9999px;border:1px solid var(--v7-border);text-decoration:none;transition:border-color .22s var(--v7-ease),color .22s var(--v7-ease),background .22s var(--v7-ease),transform .22s var(--v7-ease)}
body.v7 .v7pill:hover{border-color:var(--v7-blue);color:var(--v7-blue);background:var(--v7-blue-tint);transform:translateY(-2px)}

/* =====================================================================
   帯パネル2段重ね（青＝支援サービス概要／黒＝AI業務診断）
   黒帯はベタ色をやめ微細ノイズテクスチャ。青帯は単色ベタのまま（グラデ禁止）
   ===================================================================== */
body.v7 .v7bandpanel{width:100%;padding:120px 0}
body.v7 .v7band-blue{background:var(--v7-blue);color:#fff}
body.v7 .v7band-black{background-color:var(--v7-black);background-image:url("img/black-texture-v7.svg");background-size:480px 480px;color:#fff}
body.v7 .v7band-in{display:grid;grid-template-columns:.82fr 1fr;gap:72px;align-items:center}
body.v7 .v7band-in>*{min-width:0}
body.v7 .v7band-copy{max-width:30em}
body.v7 .v7band-copy .v7btns{margin-top:36px}
@media(max-width:900px){
  body.v7 .v7bandpanel{padding:72px 0}
  body.v7 .v7band-in{grid-template-columns:1fr;gap:36px}
}

/* 3Dタイル・診断スクショ（v6のビジュアル資産をそのまま流用） */
body.v7 .v7icons3d-clip{position:relative;width:100%;max-width:420px;height:auto;overflow:visible}
body.v7 .v7tiles3d{display:block;width:100%;max-width:420px;height:auto;animation:v7float 7s ease-in-out infinite}
@keyframes v7float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(prefers-reduced-motion:reduce){body.v7 .v7tiles3d{animation:none}}

body.v7 .v7band-shot{position:relative;perspective:1400px}
body.v7 .v7band-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(--v7-ease)}
body.v7 .v7band-shot:hover .v7band-shot-frame{transform:rotateY(-2deg) rotateX(.5deg) rotate(-.2deg) translateY(-6px)}
body.v7 .v7band-shot-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;background:#1c1d22;border-bottom:1px solid rgba(255,255,255,.06)}
body.v7 .v7band-shot-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);display:block}
body.v7 .v7band-shot img{display:block;width:100%;height:auto}
body.v7 .v7band-shot-badge{position:absolute;top:-16px;right:22px;background:#fff;color:var(--v7-blue-deep);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:normal;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.v7 .v7band-shot-frame{transform:none}body.v7 .v7band-shot:hover .v7band-shot-frame{transform:none}}
@media(prefers-reduced-motion:reduce){body.v7 .v7band-shot-frame,body.v7 .v7band-shot:hover .v7band-shot-frame{transition:none;transform:none}}

/* =====================================================================
   読みもの棚（3カラム罫線区切り。角丸カードではないため禁止事項に触れない）
   ===================================================================== */
body.v7 .v7shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--v7-border);border:1px solid var(--v7-border)}
body.v7 .v7shelfcol{background:#fff;padding:38px 34px;display:flex;flex-direction:column}
body.v7 .v7shelfcol h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:16px;letter-spacing:0;color:var(--v7-ink);margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--v7-border)}
body.v7 .v7shelfitem{display:block;padding:16px 0;border-bottom:1px solid var(--v7-border);text-decoration:none;transition:transform .3s var(--v7-ease)}
body.v7 .v7shelfitem:hover{transform:translateX(3px)}
body.v7 .v7shelfitem .d{display:block;font-family:var(--v7-serif);font-size:12px;letter-spacing:0;color:var(--v7-dim);margin-bottom:7px}
body.v7 .v7shelfitem .t{display:block;font-size:14px;line-height:1.75;color:var(--v7-ink);font-weight:500;transition:color .2s}
body.v7 .v7shelfitem:hover .t{color:var(--v7-blue)}
body.v7 .v7shelfmore{margin-top:22px;padding-top:2px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--v7-blue);text-decoration:none}
body.v7 .v7shelfmore .ar{transition:transform .3s var(--v7-ease)}
body.v7 .v7shelfmore:hover .ar{transform:translateX(4px)}
@media(max-width:900px){body.v7 .v7shelf{grid-template-columns:1fr}body.v7 .v7shelfcol{padding:30px 26px}}

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

/* =====================================================================
   CONTACT（オンページの通常セクション。代表写真1点）
   ===================================================================== */
body.v7 .v7contact-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:24px}
body.v7 .v7contact-person{display:flex;align-items:center;gap:16px;flex:none}
body.v7 .v7contact-person img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:top center;display:block}
body.v7 .v7contact-person p{font-size:12.5px;color:var(--v7-dim);font-weight:500;margin:0;font-family:"Zen Kaku Gothic New",sans-serif}

/* =====================================================================
   クロージング：全幅巨大タイポ「Contact」（フッター直前・中央揃えを許可する唯一の箇所）
   実測：Marcellus min(247px,16.75vw) / 400 / lh1.0 / white-space nowrap / 全幅ブリード
   pt: 430px は間延びするため本ページでは240pxに圧縮（AD指示書で明示許可された唯一の逸脱）
   ===================================================================== */
body.v7 .v7closing{background-color:var(--v7-black);background-image:url("img/black-texture-v7.svg");background-size:480px 480px;color:#fff;padding:240px 0 96px;text-align:center;overflow:hidden}
body.v7 .v7closing-pre{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;font-size:16px;letter-spacing:-.06em;color:rgba(255,255,255,.7);margin:0 0 14px}
body.v7 .v7closing-lead{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:24px;letter-spacing:-.0625em;line-height:1.6;color:#fff;margin:0 0 8px}
body.v7 .v7closing-giant{font-family:var(--v7-serif);font-weight:400;font-size:min(247px,16.75vw);line-height:1.0;letter-spacing:normal;white-space:nowrap;margin:24px 0 0;color:#fff;width:100vw;margin-left:calc(50% - 50vw);text-align:center}
@media(max-width:640px){
  body.v7 .v7closing{padding:160px 0 72px}
}

/* =====================================================================
   フッター：黒ベタ（v6踏襲）
   ===================================================================== */
body.v7 footer{background:#0c0c0e}
body.v7 .fcol a{transition:color .2s,transform .25s var(--v7-ease)}
body.v7 .fcol a:hover{color:#9aa4e6;transform:translateX(3px)}

/* =====================================================================
   実装バグ修正（v6から持ち越し）
   1) 和文本文のInterフォールバックを解消：font-familyの先頭にZen Kaku Gothic Newを明示
   2) .pillnav/.v7pillnavが白地の上で白文字を継承しないよう明示上書き（v2.css .nav の
      rgba(255,255,255,.72) を断ち切る）
   ===================================================================== */
body.v7 .v7statement,body.v7 .v7body,body.v7 .v7shelfitem .t,body.v7 .v7svcrow p{font-family:"Zen Kaku Gothic New","Inter",sans-serif}
body.v7 nav.v7pillnav{color:var(--v7-ink)}

/* 検収#18/#19：フッターh6がv2.cssの letter-spacing:.06em / font-weight:700 を継承していた修正 */
body.v7 footer h6{letter-spacing:normal;font-weight:500}


/* 2026-08-16 社長裁定：L2「JAPAN」削除・スローガンをSANREIRA直下に配置 */
body.v7 .v7slogan{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:6.45vw;letter-spacing:-.02em;line-height:1.12;color:var(--v7-ink);margin:0.6vw 0 0;white-space:nowrap}
@media(max-width:767px){body.v7 .v7slogan{font-size:19px;margin-top:16px}}

/* ==== 2026-08-16 社長裁定：Octolane型ヒーロー（明朝セリフ中央組＋オーロラ背景） ==== */
body.v7 .v7hero-oct{position:relative;overflow:hidden;background:#edeef0;padding:10vw 24px 9vw;text-align:center}
body.v7 .v7hero-oct .v7hero-center{position:relative;z-index:2;max-width:1100px;margin:0 auto}
body.v7 .v7slogan-giant{font-family:"Zen Old Mincho",serif;font-weight:400;font-size:clamp(46px,7vw,104px);line-height:1.28;letter-spacing:0;color:#16171b;margin:0 0 2.4vw}
body.v7 .v7headline-c{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:clamp(17px,1.65vw,23px);line-height:1.75;color:#3a3d45;margin:0 0 14px}
body.v7 .v7statement-c{font-family:"Zen Kaku Gothic New",sans-serif;font-size:14.5px;line-height:1.9;color:#6a6e78;margin:0 0 34px}
body.v7 .v7cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
body.v7 .v7btn-dark{display:inline-flex;align-items:center;padding:15px 30px;border-radius:9999px;background:#16171b;color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:14.5px;text-decoration:none;transition:transform .35s var(--v7-ease-hover,cubic-bezier(.16,1,.3,1)),opacity .25s}
body.v7 .v7btn-dark:hover{transform:translateY(-2px);opacity:.88}
body.v7 .v7btn-ghost{display:inline-flex;align-items:center;padding:15px 30px;border-radius:9999px;background:transparent;color:#16171b;border:1px solid #b9bcc4;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:14.5px;text-decoration:none;transition:border-color .25s,transform .35s}
body.v7 .v7btn-ghost:hover{border-color:#16171b;transform:translateY(-2px)}
/* オーロラ帯：下部を流れる虹色のゆらぎ（Octolane準拠・強ブラー・低彩度） */
body.v7 .v7aurora{position:absolute;left:-12%;right:-12%;bottom:-14%;height:52%;z-index:1;pointer-events:none}
body.v7 .v7aurora i{position:absolute;inset:0;display:block;filter:blur(48px) saturate(1.1);will-change:transform}
body.v7 .v7aurora .wa{background:
  radial-gradient(42% 58% at 16% 70%, rgba(255,138,118,.42), transparent 70%),
  radial-gradient(36% 52% at 42% 80%, rgba(255,208,122,.38), transparent 70%),
  radial-gradient(40% 58% at 64% 72%, rgba(118,198,255,.42), transparent 70%),
  radial-gradient(38% 58% at 86% 78%, rgba(150,140,255,.38), transparent 72%);
  animation:v7auroraA 8s ease-in-out infinite alternate}
body.v7 .v7aurora .wb{background:
  radial-gradient(34% 46% at 28% 84%, rgba(120,220,200,.30), transparent 72%),
  radial-gradient(30% 44% at 72% 86%, rgba(255,170,200,.28), transparent 72%);
  animation:v7auroraB 12s ease-in-out infinite alternate}
@keyframes v7auroraA{from{transform:translate(-9%,2.5%) scale(1)}to{transform:translate(9%,-3%) scale(1.12)}}
@keyframes v7auroraB{from{transform:translate(8%,-2%) scale(1.1) rotate(1.2deg)}to{transform:translate(-8%,2.5%) scale(1) rotate(-1.2deg)}}
/* 登場モーション */
@media(prefers-reduced-motion:no-preference){
  body.v7 .v7hero-oct .v7slogan-giant,body.v7 .v7hero-oct .v7headline-c,body.v7 .v7hero-oct .v7statement-c,body.v7 .v7hero-oct .v7cta-row{opacity:0;transform:translateY(26px)}
  body.v7.v7-motion-start .v7hero-oct .v7slogan-giant{animation:v7fadeUp 1s cubic-bezier(.16,1,.3,1) .15s both}
  body.v7.v7-motion-start .v7hero-oct .v7headline-c{animation:v7fadeUp 1s cubic-bezier(.16,1,.3,1) .32s both}
  body.v7.v7-motion-start .v7hero-oct .v7statement-c{animation:v7fadeUp 1s cubic-bezier(.16,1,.3,1) .46s both}
  body.v7.v7-motion-start .v7hero-oct .v7cta-row{animation:v7fadeUp 1s cubic-bezier(.16,1,.3,1) .6s both}
}
@keyframes v7fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.v7 .v7aurora i{animation:none}}
@media(max-width:767px){
  body.v7 .v7hero-oct{padding:120px 20px 64px}
  body.v7 .v7slogan-giant{font-size:38px;margin-bottom:20px}
  body.v7 .v7headline-c{font-size:16px}
}


/* Canvas実描画オーロラ（CSS blur層は環境差で見えないため置換・2026-08-16） */
body.v7 .v7aurora-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
body.v7 .v7aurora{display:none}

/* テック感マイクロラベル（Octolane準拠のモノスペース計測データ風・2026-08-16） */
body.v7 .v7hud{position:absolute;z-index:2;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:0;color:rgba(70,78,96,.5);pointer-events:none;white-space:nowrap}
body.v7 .v7hud-tl{top:28px;left:32px}
body.v7 .v7hud-tr{top:28px;right:32px}
body.v7 .v7hud-bl{bottom:26px;left:32px}
body.v7 .v7hud-br{bottom:26px;right:32px}
@media(max-width:767px){body.v7 .v7hud-tr,body.v7 .v7hud-bl{display:none}body.v7 .v7hud{font-size:10px}}