/* ==========================================================================
   theme-v8.css — サンレイラ 全ページ統一デザインシステム v8
   発行：seisaku-webdev（Webデザイン実装職人）／2026-08-16
   仕様書：design-research/2026-08-16_全ページ統一仕様_v8.md（数値の一次根拠）
   発注元：seisaku-artdirector

   スコープ方針：
   - すべて body.v8 スコープ（index.html は body.v7.v8 の重ね掛け＝
     承認済みヒーロー(.v7hero-oct系)はbody.v7側の記述のみで成立しているため、
     このファイルは一切上書きしない＝1px専用の変更は top-v7.css 側の
     .v7statement-c のみ）。
   - index.html の「残す・面変更のみ」セクション（v7pillnav-row / v7band-shot* /
     v7shelf / v7svcrow）は class 名を変えずに body.v8 側で上書きする
     （markup churnを避け、reveal等の既存挙動を壊さない）。
   - ai.html 等 body.v7 を持たないページで使う新規コンポーネントは
     v8- prefix のクラスとして独立定義し、v7スコープに依存しない。
   ========================================================================== */

:root{
  --s-mist:#edeef0;
  --s-base:#ffffff;
  --s-ink:#16171b;
  --ink:#16171b;
  --ink-2:#3a3d45;
  --ink-3:#6a6e78;
  --ink-4:rgba(70,78,96,.5);
  --line:#b9bcc4;
  --line-hair:#dfe1e5;
  --accent:#1e2b74;
  --on-ink:#ffffff;
  --on-ink-body:rgba(255,255,255,.78);
  --w-hero:1100px;
  --w-wide:1280px;
  --w-read:760px;
  --gutter:40px;
  --v8-ease:cubic-bezier(.16,1,.3,1);
}
@media(max-width:900px){:root{--gutter:24px}}

/* ==========================================================================
   ベース
   ========================================================================== */
body.v8{background:var(--s-base);color:var(--ink-3);font-family:"Zen Kaku Gothic New","Inter",sans-serif;font-feature-settings:"palt" 1}
body.v8 .v8-sp-br{display:none}
@media(max-width:900px){body.v8 .v8-sp-br{display:inline}}

/* セクションreveal：トップヒーローと同じ登場モーションに統一（実測.reveal） */
body.v8 .reveal{transform:translateY(20px);transition:opacity .65s cubic-bezier(0,0,.2,1),transform .65s cubic-bezier(0,0,.2,1)}
/* 完了状態は初期状態より特異性を上げる（v2.cssの .reveal.in はbody.v8スコープに負けて transform:20px が残留するバグがあった・2026-08-17修正） */
body.v7 .reveal.in,body.v8 .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){body.v8 .reveal{transition:none;transform:none}}

/* ==========================================================================
   コンテナ
   ========================================================================== */
body.v8 .v8wide{max-width:var(--w-wide);margin:0 auto;padding:0 var(--gutter)}
body.v8 .v8read{max-width:var(--w-read);margin:0 auto;padding:0 var(--gutter)}

/* ==========================================================================
   セクション面（3値のみ：mist / base / ink）
   ========================================================================== */
body.v8 .v8slab{padding:120px 0;text-align:left}
body.v8 .v8slab.tight{padding:80px 0}
body.v8 .v8slab--base{background:var(--s-base);color:var(--ink-3)}
body.v8 .v8slab--mist{background:var(--s-mist);color:var(--ink-3)}
body.v8 .v8slab--ink{background:var(--s-ink);color:var(--on-ink-body)}
@media(max-width:900px){
  body.v8 .v8slab{padding:72px 0}
  body.v8 .v8slab.tight{padding:56px 0}
}

/* ==========================================================================
   HUDラベル（静的配置。四隅絶対配置の .v7hud / 下層ヒーロー内は別ルールで上書き）
   ========================================================================== */
body.v8 .v8hud-label{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;font-weight:400;letter-spacing:0;color:var(--ink-4);margin:0 0 18px}
body.v8 .v8slab--ink .v8hud-label{color:rgba(255,255,255,.45)}

/* ==========================================================================
   タイポ階層
   ========================================================================== */
body.v8 .v8h2{font-family:"Zen Old Mincho",serif;font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.5;letter-spacing:0;color:var(--ink);margin:0 0 28px;max-width:20em}
body.v8 .v8h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.4;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
body.v8 .v8h4{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:16px;line-height:1.7;letter-spacing:-.02em;color:var(--ink);margin:0 0 22px}
body.v8 .v8lead{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:clamp(17px,1.65vw,23px);line-height:1.75;letter-spacing:0;color:var(--ink-2);max-width:36em;margin:0}
body.v8 .v8body{max-width:42em;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;font-size:16px;line-height:1.9;letter-spacing:0;color:var(--ink-3);margin-top:24px}
body.v8 .v8body p+p{margin-top:20px}
body.v8 .v8body a{color:var(--ink);border-bottom:1px solid var(--line-hair);text-decoration:none;transition:color .2s,border-color .2s}
body.v8 .v8body a:hover{color:var(--accent);border-color:var(--accent)}
body.v8 .v8slab--ink .v8body{color:var(--on-ink-body)}
body.v8 .v8body-s{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;font-size:14.5px;line-height:1.9;color:var(--ink-3)}
body.v8 .v8meta{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;font-size:12.5px;line-height:1.6;color:var(--ink-4)}

/* D2＝下層ページタイトル／D3＝クロージング大見出し */
body.v8 .v8d2{font-family:"Zen Old Mincho",serif;font-weight:400;font-size:clamp(30px,4.4vw,58px);line-height:1.34;letter-spacing:0;color:var(--ink);margin:0 0 20px;max-width:14em}
body.v8 .v8d3{font-family:"Zen Old Mincho",serif;font-weight:400;font-size:clamp(34px,5vw,72px);line-height:1.3;letter-spacing:0;color:var(--on-ink);margin:20px 0 0}

/* ==========================================================================
   ボタン（2種のみ＋on-ink変種）
   ========================================================================== */
body.v8 .v8btns{display:flex;gap:14px;flex-wrap:wrap}
body.v8 .v8btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:9999px;background:var(--ink);color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:14.5px;text-decoration:none;border:none;cursor:pointer;transition:transform .35s var(--v8-ease),opacity .25s}
body.v8 .v8btn:hover{transform:translateY(-2px);opacity:.88}
body.v8 .v8btn .ar{display:inline-block;transition:transform .35s var(--v8-ease)}
body.v8 .v8btn:hover .ar{transform:translateX(4px)}
body.v8 .v8btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:9999px;background:transparent;color:var(--ink);border:1px solid var(--line);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:14.5px;text-decoration:none;transition:border-color .25s,transform .35s var(--v8-ease)}
body.v8 .v8btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
body.v8 .v8btn.on-ink{background:#fff;color:var(--ink)}
body.v8 .v8btn.on-ink:hover{opacity:.88}

/* ==========================================================================
   header / footer 統一（118px・透過→スクロール後白blur。実測はtop-v7.css継承）
   ========================================================================== */
body.v8 header{height:118px;display:flex;align-items:center;background:transparent;backdrop-filter:none;border-bottom:none;box-shadow:none;transition:background .3s var(--v8-ease),backdrop-filter .3s var(--v8-ease),border-color .3s var(--v8-ease)}
body.v8 header.tight{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-hair)}
body.v8 .logo img{height:53px;width:auto}
body.v8 .menubtn{background:transparent;border:1px solid rgba(22,23,27,.18);backdrop-filter:none}
body.v8 .menubtn:hover{background:rgba(22,23,27,.06)}
body.v8 .menubtn span{background:var(--ink)}

body.v8 footer{background:var(--s-ink);border-top:1px solid rgba(255,255,255,.10)}

/* 正のletter-spacing根絶（v2.cssの#loader .lgo / .logo / .menu-logo / footer h6 に残る
   +.12em〜+.22emを解除。top-v7.cssはbody.v7スコープのみ修正済みで、v7クラスを持たない
   下層ページ（ai.html等）では再発するため body.v8 側でも同じ修正を当てる） */
body.v8 header .logo,body.v8 .menu-logo,body.v8 #loader .lgo,body.v8 #loader .lgo img,body.v8 footer .fcols .logo,body.v8 footer .fcols .logo img{letter-spacing:normal}
body.v8 footer h6{letter-spacing:normal;font-weight:500}

/* ==========================================================================
   下層ページヒーロー .v8hero-sub（左寄せ・減光光条・HUD上2本のみ）
   ========================================================================== */
body.v8 .v8hero-sub{position:relative;overflow:hidden;background:var(--s-mist);padding:120px var(--gutter) 96px;min-height:380px;text-align:left}
body.v8 .v8hero-sub-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
body.v8 .v8hero-sub .v8hud-label{position:absolute;top:28px;margin:0;z-index:2}
body.v8 .v8hero-sub .v8hud-l{left:var(--gutter)}
body.v8 .v8hero-sub .v8hud-r{right:var(--gutter)}
body.v8 .v8hero-sub-in{position:relative;z-index:2;max-width:var(--w-wide);margin:0 auto}
body.v8 .v8hero-sub .v8d2{margin-top:28px}
body.v8 .v8hero-sub .v8lead{margin-top:18px}
body.v8 .v8hero-sub .v8btns{margin-top:34px}
@media(max-width:767px){
  body.v8 .v8hero-sub{padding:88px 24px 64px;min-height:260px}
  body.v8 .v8hero-sub .v8hud-r{display:none}
}

/* ==========================================================================
   2カラム帯パネル（画像＋コピー、非対称グリッド。index.htmlの帯セクション＋
   ai.html等の「実例写真＋本文」セクションで共用）
   ========================================================================== */
body.v8 .v8band{display:grid;grid-template-columns:.82fr 1fr;gap:72px;align-items:center}
body.v8 .v8band>*{min-width:0}
body.v8 .v8band-copy{max-width:32em}
body.v8 .v8band-copy .v8btns{margin-top:36px}
body.v8 .v8band-media img{display:block;width:100%;height:auto;border-radius:0}
@media(max-width:900px){body.v8 .v8band{grid-template-columns:1fr;gap:36px}}

/* index.html 帯パネル2段重ね：紺ベタ／黒テクスチャを廃止（AD指示書§4／§1-1廃止トークン） */
body.v8 .v7band-blue{background:var(--s-base);color:var(--ink)}
body.v8 .v7band-black{background:var(--s-mist);background-image:none;color:var(--ink)}
body.v8 .v7band-copy .v8btns{margin-top:36px}

/* index.html #diagnosis：既存 v7band-shot* を流用（radius 10pxが唯一の角丸例外／
   バッジは白→黒ピルに変更） */
body.v8 .v7band-shot-frame{border-radius:10px}
body.v8 .v7band-shot-badge{background:var(--ink);color:#fff;box-shadow:none}

/* index.html #diagnosis 新3Dビジュアル：v7band-shot-frameの額縁(macバー)は使わず
   素の画像＋角丸(10px＝上記と同じ唯一の角丸例外)のみ。画像自体をCTAリンクにする。
   2026-08-19 社長指示 */
body.v8 .v7diag-visual-link{display:block}
body.v8 .v7diag-visual{display:block;width:100%;height:auto;border-radius:10px;transition:opacity .25s}
body.v8 .v7diag-visual-link:hover .v7diag-visual{opacity:.9}

/* ==========================================================================
   罫線区切りの縦積みリスト（同型角丸カード3列グリッドの置換先）
   ========================================================================== */
body.v8 .v8list{margin-top:8px;border-top:1px solid var(--line-hair)}
body.v8 .v8list-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line-hair)}
body.v8 .v8list-row h3{margin:0 0 6px;display:flex;align-items:center;flex-wrap:wrap;gap:0}
body.v8 .v8list-row p{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-3);max-width:44em}
body.v8 .v8list-badge{display:inline-flex;align-items:center;background:var(--ink);color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;font-size:11px;font-weight:700;padding:3px 12px;border-radius:9999px;margin-left:10px;vertical-align:middle}
body.v8 .v8list-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-hair);display:grid;place-items:center;color:var(--accent);font-size:16px;flex:none}
@media(max-width:760px){body.v8 .v8list-row{grid-template-columns:1fr;row-gap:8px}body.v8 .v8list-arrow{display:none}}

/* index.html #service：既存 v7svclist/v7svcrow をそのままv8基準形として流用
   （AD指示書§3表#5）。矢印・区切り線をv8トークンへ更新 */
body.v8 .v7svclist{border-top-color:var(--line-hair)}
body.v8 .v7svcrow{border-bottom-color:var(--line-hair)}
body.v8 .v7arrow{border-color:var(--line-hair);color:var(--accent)}

/* 支援領域：行番号（モノスペース小さめ・v7shelfitemの日付ラベルと同じ視覚言語）。
   ホバー時は行全体を濃紺反転（タイトル・説明・番号・矢印すべて白へ）。
   hover:hover環境のみ＝タッチ端末は通常の白背景カードのまま。2026-08-19 社長指示 */
body.v8 .v7svcnum{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;letter-spacing:0;color:var(--ink-4);margin-bottom:6px;transition:color .25s}
body.v8 .v7svcrow h3,body.v8 .v7svcrow p{transition:color .25s}
@media(hover:hover){
  body.v8 .v7svcrow:hover{background:var(--s-ink)}
  body.v8 .v7svcrow:hover .v7svcnum,body.v8 .v7svcrow:hover h3,body.v8 .v7svcrow:hover p{color:#fff}
  body.v8 .v7svcrow:hover .v7arrow{background:#fff;border-color:#fff;color:var(--ink)}
}

/* index.html #reading：既存 v7shelf を流用。面／罫線／日付書体をv8トークンへ。
   2026-08-19 社長指示：左右列のタイトルを14→15pxに拡大、日付を--ink-4→--ink-3へ濃く。 */
body.v8 .v7shelf{background:var(--line-hair);border-color:var(--line-hair)}
body.v8 .v7shelfcol{background:var(--s-base)}
body.v8 .v7shelfcol h3{border-color:var(--line-hair);color:var(--ink)}
body.v8 .v7shelfitem{border-color:var(--line-hair)}
body.v8 .v7shelfitem .d{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;font-size:12.5px;letter-spacing:0;color:var(--ink-3)}
body.v8 .v7shelfitem .t{color:var(--ink);font-size:15px}
body.v8 .v7shelfitem:hover .t{color:var(--accent)}
body.v8 .v7shelfmore{color:var(--accent)}

/* 読みもの棚：AI社員シリーズ列は一覧をやめ特集カード化（連載の顔）。濃紺地は維持。
   SERIES #00は装飾のみの背景数字（aria-hidden）。カード全体がクリック可能なリンク。
   「すべて見る」廃止に伴うCTAはセクション下部中央の1個に統合。2026-08-19 社長指示 */
body.v8 .v7shelfcol--ink{background:var(--s-ink)}
body.v8 .v7shelfcol--ink h3{color:#fff;border-color:rgba(255,255,255,.18)}
body.v8 .v7feature-card{position:relative;display:block;overflow:hidden;margin-top:26px;padding:0;text-decoration:none}
body.v8 .v7feature-bg{position:absolute;top:-14px;right:-6px;z-index:0;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:400;font-size:64px;line-height:1;letter-spacing:0;color:rgba(255,255,255,.08);white-space:nowrap;pointer-events:none}
body.v8 .v7feature-catch{position:relative;z-index:1;display:block;font-family:"Zen Old Mincho",serif;font-weight:400;font-size:20px;line-height:1.5;color:#fff;margin:0 0 16px}
body.v8 .v7feature-title{position:relative;z-index:1;display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:17px;line-height:1.5;color:#fff;margin:0 0 10px;transition:opacity .2s}
body.v8 .v7feature-desc{position:relative;z-index:1;display:block;font-size:13px;line-height:1.85;color:rgba(255,255,255,.6);margin:0 0 24px}
body.v8 .v7feature-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff}
body.v8 .v7feature-link .ar{display:inline-block;transition:transform .3s}
body.v8 .v7feature-card:hover .v7feature-title{opacity:.75}
body.v8 .v7feature-card:hover .v7feature-link .ar{transform:translateX(4px)}
@media(max-width:900px){body.v8 .v7feature-bg{font-size:48px}}
body.v8 .v7shelf-cta{margin-top:44px;text-align:center}

/* index.html ヒーロー直下のピルナビ行：ヒーローと地続きのmist面に */
body.v8 .v7pillnav-row{background:var(--s-mist);padding:36px var(--gutter) 40px}
body.v8 .v7pill{border-color:var(--line-hair);color:var(--ink-2);background:transparent}
body.v8 .v7pill:hover{border-color:var(--accent);color:var(--accent);background:transparent;transform:translateY(-2px)}

/* index.html セクションの縦paddingをv8既定(120/72)へ統一（旧v7slabの160/96を上書き） */
body.v8 .v7slab{padding:120px 0;background:var(--s-base)}
@media(max-width:900px){body.v8 .v7slab{padding:72px 0}}
/* 面の並び順の原則（§1-1）：hero(mist)の後を base→mist→base→mist→base→mist→ink で交互に。
   DOM順：Service(band-blue,base)→Diagnosis(band-black,mist)→Concept→Reading→Service#service→Contact→Closing(ink) */
body.v8 #concept.v7panel{background:var(--s-base)}
body.v8 #reading{background:var(--s-mist)}
body.v8 #service.v7panel{background:var(--s-base)}

/* ==========================================================================
   クロージング（最下部ink面・中央組みを許可する唯一の下部ブロック）
   ========================================================================== */
body.v7 .v8closing,body.v8 .v8closing{background:var(--s-ink);color:var(--on-ink-body);padding:140px 0 120px;text-align:center;overflow:hidden}
body.v7 .v8closing .v8hud-label,body.v8 .v8closing .v8hud-label{text-align:center;margin:0 0 4px;color:rgba(255,255,255,.45)}
body.v7 .v8closing .v8d3,body.v8 .v8closing .v8d3{text-align:center}
body.v7 .v8closing .v8btns,body.v8 .v8closing .v8btns{justify-content:center;margin-top:40px}
@media(max-width:640px){body.v7 .v8closing,body.v8 .v8closing{padding:96px 0 80px}}

/* ==========================================================================
   v2.css レガシー装飾の除去（§3置換表：角丸2値／影原則／グラデ全廃）
   ========================================================================== */
body.v8 .imgrow figure{border-radius:0;box-shadow:none;background:transparent}
body.v8 .imgrow img{border-radius:0}

body.v8 .biglist{display:block;grid-template-columns:none;max-width:none;margin:24px 0 0;border-top:1px solid var(--line-hair)}
body.v8 .biglist li{display:block;font-size:15px;line-height:1.9;color:var(--ink-3);padding:16px 0;border-bottom:1px solid var(--line-hair)}
body.v8 .biglist li::before{display:none}

body.v8 .diagcta{border-radius:0;box-shadow:none;border:1px solid var(--line-hair);background:var(--s-base)}
body.v8 .diagcta-icn{border-radius:0;background:var(--ink)}
body.v8 .diagcta .diagcta-eyebrow{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink-4)}
body.v8 .diagcta h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;color:var(--ink)}
body.v8 .diagcta .diagcta-desc{color:var(--ink-3)}
body.v8 .diagcta .btn{background:var(--ink);color:#fff;border-radius:9999px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;padding:15px 30px;font-size:14.5px;box-shadow:none}
body.v8 .diagcta .btn::before{display:none}
body.v8 .diagcta .btn:hover{transform:translateY(-2px);opacity:.88;background:var(--ink)}

body.v8 .faq{max-width:var(--w-read)}
body.v8 .faq details{background:transparent;border:1px solid var(--line-hair);border-radius:0;box-shadow:none;padding:18px 24px}
body.v8 .faq summary{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;color:var(--ink)}
body.v8 .faq summary::after{color:var(--ink-4);font-weight:400}
body.v8 .faq details p{color:var(--ink-3)}

/* 本文内の文脈リンク（v8body以外のレガシー段落でも下線色をv8化） */
body.v8 .bodycopy,body.v8 .legal{color:var(--ink-3)}
body.v8 .bodycopy a,body.v8 .legal a{color:var(--ink);text-decoration-color:var(--line-hair)}
body.v8 .bodycopy a:hover,body.v8 .legal a:hover{color:var(--accent);opacity:1}

/* クロージング統合時の補足文（旧Contact説明文の受け皿・2026-08-16） */
body.v7 .v8closing-note,body.v8 .v8closing-note{font-size:14px;line-height:1.9;color:rgba(255,255,255,.55);max-width:34em;margin:18px auto 30px}

/* ==========================================================================
   フェーズ1 AD検収差し戻し対応（2026-08-16 再検収分）
   ========================================================================== */

/* 【修正1／F-1】index下部セクション（.v7container×5）を1689px→1280pxコンテナへ統一。
   ヒーロー中央組(.v7hero-center 1100px)との差を100pxに縮め、「別サイトに見える」構造要因を解消。
   --v7-gutter:108px（top-v7.css）は書き換えず、body.v8側で後勝ち上書きする。 */
body.v8 .v7container{
  max-width:1280px;
  margin-left:auto; margin-right:auto;
  padding-left:40px; padding-right:40px;
}
@media(max-width:900px){
  body.v8 .v7container{padding-left:24px; padding-right:24px}
}

/* 【修正2／A-5・B-4】オーバーレイメニュー＋ローダーバー：v3期グラデ（ピンク×藍）と
   ナビ和文のInterフォールバックを撤去。全ページ共通部品のため v2.css は触らず後勝ちで潰す。 */
body.v8 #menu{background:var(--s-ink); background-image:none}
body.v8 #menu a{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:500;
  font-size:clamp(22px,3.4vw,30px);
  letter-spacing:0;
  color:rgba(255,255,255,.78);
  background-image:none;
  -webkit-text-fill-color:currentColor;
}
body.v8 #menu a:hover{color:#fff}
body.v8 #menu a.active{
  background-image:none; color:#fff;
  -webkit-text-fill-color:#fff;
}
body.v8 #loader .barwrap{background:rgba(22,23,27,.12); border-radius:0}
body.v8 #loader .barwrap i{background:var(--ink); background-image:none; border-radius:0}

/* ==========================================================================
   フェーズ2 追加コンポーネント（2026-08-16 webdev／kenshu〜privacy・ブログ記事共通展開）
   ========================================================================== */

/* 記事本文・法務文書タイポ（.article / .legal 共通。v2.css由来のGothic900見出し・
   グラデ丸ドット・カード影を廃止しv8トークンへ） */
body.v8 .article,body.v8 .legal{max-width:var(--w-read)}
body.v8 .article h2{font-family:"Zen Old Mincho",serif;font-weight:400;letter-spacing:0;color:var(--ink);font-size:clamp(22px,2.4vw,28px);line-height:1.5;margin:52px 0 18px}
body.v8 .legal h3{font-family:"Zen Old Mincho",serif;font-weight:400;letter-spacing:0;color:var(--ink);font-size:20px;line-height:1.6;margin:48px 0 16px}
body.v8 .article h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:18px;line-height:1.6;letter-spacing:-.02em;color:var(--ink);margin:30px 0 12px}
body.v8 .article p,body.v8 .legal p,body.v8 .legal .intro{color:var(--ink-3)}
body.v8 .article ul,body.v8 .legal ul{border-top:1px solid var(--line-hair);margin:16px 0 20px;padding:0}
body.v8 .article li,body.v8 .legal li{padding:12px 0;border-bottom:1px solid var(--line-hair);color:var(--ink-3)}
body.v8 .article li::before,body.v8 .legal li::before{display:none}
body.v8 .article img{border-radius:0;box-shadow:none}
body.v8 .article img.diagram{border-color:var(--line-hair);box-shadow:none}
body.v8 .article table th,body.v8 .article table td{border-color:var(--line-hair)}
body.v8 .article table th{background:var(--s-mist)}
body.v8 .article table tr:nth-child(even) td{background:transparent}
@media(max-width:600px){
  /* 表がビューポート幅を超える記事（助成金コース比較表等）の横スクロール対策。
     ページ全体の横スクロールを起こさず、表単体でスクロールさせる（D-4対策・2026-08-16） */
  body.v8 .article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* 記事本文の共通部品（旧：v3期の紫インラインstyle 30箇所→クラス化。
   AD検収差し戻し必須1・2026-08-16。以後インラインstyleを書かず必ずこのクラスを使う） */
body.v8 .v8author{margin-top:30px;padding:20px;border:1px solid var(--line-hair);border-radius:0;display:flex;gap:16px;align-items:center}
body.v8 .v8pre{background:var(--s-mist);border:1px solid var(--line-hair);border-radius:0;padding:20px 22px;font-size:13.5px;line-height:1.8;color:var(--ink-3);white-space:pre-wrap;font-family:ui-monospace,"SF Mono",Menlo,monospace;margin:12px 0 24px}
body.v8 .v8note{background:var(--s-mist);border:1px solid var(--line-hair);border-radius:0;padding:18px 20px;margin:6px 0 8px;font-size:14.5px;line-height:1.9;color:var(--ink-3)}
body.v8 .v8memo{background:var(--s-mist);border-left:1px solid var(--line);border-radius:0;padding:12px 16px;font-size:14px;color:var(--ink-3)}
body.v8 .v8memo b{color:var(--ink)}
body.v8 .v8memo a{color:var(--ink);border-bottom:1px solid var(--line-hair)}
body.v8 .v8memo a:hover{color:var(--accent);border-color:var(--accent)}

/* タグ列（旧：中央揃えchips→v8：左寄せ罫線チップ。hojokin.html「対象テーマ」用） */
body.v8 .v8chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;margin-top:8px}
body.v8 .v8chips span{display:inline-block;background:transparent;border:1px solid var(--line-hair);border-radius:9999px;padding:10px 20px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
body.v8 .article details{border-radius:0;border-color:var(--line-hair)}
body.v8 .article details summary{background:transparent}
body.v8 .legal .infobox{border-radius:0;border-color:var(--line-hair);background:var(--s-mist);box-shadow:none}
body.v8 .legal .infobox b{color:var(--ink)}
body.v8 .article .cat{border-radius:9999px;background:var(--ink)}

/* 会社概要テーブル（.info-table：Inter大文字ラベル→HUD monospaceに統一） */
body.v8 .info-table{border-top:1px solid var(--line-hair)}
body.v8 .info-table th,body.v8 .info-table td{border-bottom-color:var(--line-hair)}
body.v8 .info-table th{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:400;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink-4)}
body.v8 .info-table td{color:var(--ink-3)}

/* 代表メッセージ等：v8bandの縦長写真バリエーション（company.html） */
body.v8 .v8band-media.portrait img{aspect-ratio:2/3;object-fit:cover;box-shadow:none}

/* 生の .btn（v8btn化していない残存ボタン：フォーム送信ボタン等）の共通シェイプ統一。
   グラデ光沢スイープ(::before)を止め、v8btnと同じ黒ピルに揃える */
body.v8 .btn{background:var(--ink);color:#fff;border-radius:9999px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:14.5px;padding:15px 30px;box-shadow:none}
body.v8 .btn::before{display:none}
body.v8 .btn:hover{transform:translateY(-2px);opacity:.88;background:var(--ink)}

/* お問い合わせフォーム（contact.html） */
body.v8 .form{max-width:var(--w-read)}
body.v8 .field label{font-family:"Zen Kaku Gothic New",sans-serif;font-size:14px;color:var(--ink-2)}
body.v8 .field label .req{color:var(--accent)}
body.v8 .field input,body.v8 .field textarea,body.v8 .field select{border-radius:0;border-color:var(--line);font-family:"Zen Kaku Gothic New",sans-serif;color:var(--ink)}
body.v8 .field input:focus,body.v8 .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,43,116,.1)}
body.v8 .checks label{border-radius:9999px;border-color:var(--line);color:var(--ink-2)}
body.v8 .checks label:hover{border-color:var(--accent)}
body.v8 .checks input{accent-color:var(--accent)}
body.v8 .contact-meta{color:var(--ink-3)}
body.v8 .contact-meta b{color:var(--ink)}

/* ブログ一覧：カードグリッド→罫線リスト（v8list拡張・サムネイル付き。AD指示書§5フェーズ4） */
body.v8 a.v8list-row{color:inherit;text-decoration:none;transition:background .2s}
body.v8 a.v8list-row:hover{background:rgba(30,43,116,.04)}
body.v8 a.v8list-row:hover .v8list-arrow{background:var(--accent);border-color:var(--accent);color:#fff}
body.v8 .v8list-row.with-thumb{grid-template-columns:120px 1fr auto;gap:24px;align-items:center}
body.v8 .v8list-thumb{width:120px;height:80px;background-size:cover;background-position:center;flex:none}
@media(max-width:640px){
  body.v8 .v8list-row.with-thumb{grid-template-columns:88px 1fr;row-gap:4px}
  body.v8 .v8list-row.with-thumb .v8list-thumb{width:88px;height:64px}
  body.v8 .v8list-row.with-thumb .v8list-arrow{display:none}
}