/* ═══════════════════════════════════════════════════════════════
   AIBUILDERZ 下層ページ v8 ─ 共通の土台（テーマ内では assets/css/v8-common.css）
   元: design/rebrand-20260919/site/lower/common.css

   ・トップ（system.css）は 1586px の版面を縮めて出す作り。下層は縮めず、画面幅で組み替える。
     1024px 以上／768〜1023px／768px 未満 の3段。
   ・見出しの大きさは、トップを 1440px で見たときの見た目（設計値 × 0.745）に合わせる。
   ・色と影の変数（:root）はトップと同じ名前・同じ値。部品はすべて body.v8 の下に閉じる。
     トップの CSS と同じページで読まれても、トップ側の見た目は変わらない。
   ・キーフレームと @property は v8 の接頭辞を付け、トップの wave1〜4／ringspin／--ang と重ねない。
   ═══════════════════════════════════════════════════════════════ */

/* ── 色と影（トップの _root.css・system.css と同じ値） ── */
:root{
  --c-brand:    #096FC8;
  --c-navy:     #1F2D55;
  --c-text:     #111111;
  --c-text-sub: #2B3442;
  --c-btn:      #111111;
  --c-btn-ink:  #F6F6F6;
  --g-black:
    radial-gradient(64% 116% at 16% 10%, rgba(74,83,94,.92) 0%, rgba(74,83,94,0) 56%),
    radial-gradient(52% 96%  at 72% 26%, rgba(52,60,70,.85) 0%, rgba(52,60,70,0) 62%),
    radial-gradient(46% 88%  at 40% 62%, rgba(38,45,54,.80) 0%, rgba(38,45,54,0) 66%),
    radial-gradient(86% 130% at 66% 98%, rgba(3,5,9,.95)   0%, rgba(3,5,9,0)   58%),
    radial-gradient(74% 118% at 4%  92%, rgba(7,10,14,.90) 0%, rgba(7,10,14,0) 62%),
    linear-gradient(150deg, #1A1F26 0%, #0D1116 48%, #151A20 100%);
  --f: "Noto Sans JP", system-ui, sans-serif;

  /* 立体感の3段階 */
  --e1: 0 10px 20px -12px rgba(14,26,44,.24), 0 2px 5px -3px rgba(14,26,44,.12);
  --e2: 0 22px 32px -16px rgba(14,26,44,.36), 0 6px 13px -6px rgba(14,26,44,.18),
        inset 0 2px 2px rgba(255,255,255,.94);
  --e3: 0 34px 50px -22px rgba(14,26,44,.44), 0 10px 20px -10px rgba(14,26,44,.22),
        inset 0 2px 2px rgba(255,255,255,.96);
  --surface: linear-gradient(158deg,#FFFFFF 0%,#FAFBFD 44%,#EFF2F6 76%,#E4E9EF 100%);

  /* 地の色。footer-v8 の JS が章（data-tone）に合わせて入れ替える（章の上端が画面の上から 72% に来た時点で、0.6 秒かけて）。既定は明るい地 */
  --base: rgb(242,243,244);
  --cA: rgba(255,255,255,.95);
  --cB: rgba(186,192,200,.44);
  --cC: rgba(232,234,237,.85);
}

/* ── 下層の文字・面の変数と、画面幅ごとの寸法 ── */
.v8{
  --ink:  #111111;                  /* 見出し */
  --ink2: #242D3A;                  /* 本文 */
  --ink3: #222A36;                  /* 注記 */
  --hair: rgba(17,17,17,.13);       /* 細い罫 */
  --pale: rgba(17,17,17,.075);      /* 地に敷く大きな文字 */
  --face: linear-gradient(158deg,#FFFFFF 0%,#FAFBFD 44%,#EFF2F6 76%,#E4E9EF 100%);
  --faceline: rgba(17,17,17,.07);
  --tint: rgba(20,32,50,.045);      /* 面の中で一段沈める所（要点・目次・表の頭） */
  --accent: #096FC8;
  --accent-ink: #0A4E8C;            /* 小さな文字に使う濃いほうの青 */

  --gut: 40px;                      /* 左右の余白 */
  --wrap: 1080px;                   /* 中身の幅の上限 */
  --hdr-top: 18px;                  /* ヘッダーの上の隙間 */
  --hdr-h: 68px;                    /* ヘッダーの高さ */
  --blk: 112px;                     /* 章の上下の余白 */
}
@media (max-width:1023px){ .v8{ --gut:32px; --blk:88px } }
@media (max-width:767px) { .v8{ --gut:20px; --blk:64px; --hdr-top:10px; --hdr-h:60px } }

/* ── 下地 ── */
.v8, .v8 *, .v8 *::before, .v8 *::after{box-sizing:border-box}
html:has(body.v8){scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html:has(body.v8){scroll-behavior:auto} }
.v8-lock{overflow:hidden}          /* メニューを開いているあいだ、後ろを動かさない */
body.v8{
  margin:0;
  background:var(--base);           /* 地が描かれる前の色 */
  font-family:var(--f);
  font-size:16px; line-height:1.8; letter-spacing:.03em;
  color:var(--ink2);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-wrap:anywhere;
}
.v8 img{max-width:100%; height:auto}
.v8 :focus-visible{outline:2px solid #111; outline-offset:3px}
.v8 .wrap{width:100%; max-width:calc(var(--wrap) + var(--gut) * 2); margin:0 auto; padding:0 var(--gut)}
.v8 .wrap.narrow{max-width:calc(920px + var(--gut) * 2)}   /* 記事・フォームなど、面1枚で読ませるページの幅 */
.v8 .skip{
  position:fixed; left:12px; top:12px; z-index:60;
  padding:12px 18px; border-radius:12px; background:#fff; color:#111; box-shadow:var(--e2);
  font-size:15px; font-weight:700; text-decoration:none;
  transform:translateY(-160%); transition:transform .2s ease;
}
.v8 .skip:focus{transform:none}
.v8 .vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ═══ 地 ─ ページ全体で1枚。光の塊5つがゆっくり漂い、章に入ると色がふわっと入れ替わる ═══ */
.v8 .ground{
  position:fixed; inset:0; z-index:-6; overflow:hidden; pointer-events:none;
  background-color:var(--base);
}
.v8 .ground i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(96px); will-change:transform;
}
.v8-tone-ready .v8 .ground,
.v8-tone-ready .v8 .ground i{transition:background-color .6s cubic-bezier(.3,.7,.3,1)}   /* トップ（front-v8.css）と同じ */
.v8 .ground i:nth-child(1){left:-22%; top:-26%; width:86%; height:96%;  background-color:var(--cA); animation:v8wave1 27s ease-in-out infinite}
.v8 .ground i:nth-child(2){left:38%;  top:-32%; width:92%; height:104%; background-color:var(--cB); animation:v8wave2 34s ease-in-out infinite}
.v8 .ground i:nth-child(3){left:-14%; top:38%;  width:98%; height:96%;  background-color:var(--cC); animation:v8wave3 41s ease-in-out infinite}
.v8 .ground i:nth-child(4){left:46%;  top:34%;  width:88%; height:102%; background-color:var(--cB); animation:v8wave4 48s ease-in-out infinite}
.v8 .ground i:nth-child(5){left:12%;  top:6%;   width:70%; height:78%;  background-color:var(--cA); animation:v8wave2 58s ease-in-out infinite reverse}
@keyframes v8wave1{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  33%{transform:translate3d(16%,12%,0) scale(1.22) rotate(7deg)}
  66%{transform:translate3d(-10%,20%,0) scale(.88) rotate(-6deg)}}
@keyframes v8wave2{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  38%{transform:translate3d(-18%,14%,0) scale(1.18) rotate(-8deg)}
  71%{transform:translate3d(13%,-12%,0) scale(.86) rotate(6deg)}}
@keyframes v8wave3{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  42%{transform:translate3d(14%,-16%,0) scale(1.24) rotate(9deg)}
  74%{transform:translate3d(-16%,10%,0) scale(.84) rotate(-7deg)}}
@keyframes v8wave4{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  40%{transform:translate3d(-13%,-14%,0) scale(1.20) rotate(5deg)}
  72%{transform:translate3d(11%,16%,0) scale(.90) rotate(-9deg)}}
/* 粒子。平らさを消す */
.v8 .grainlayer{position:fixed; inset:0; z-index:-3; width:100%; height:100%; pointer-events:none; opacity:.05}

/* ═══ ボタン .btnx ─ 黒い丸（または白い丸）に三角の矢印 ═══
   大 .lg 64px／中（既定）56px／小 .sm 44px。色は .dark（黒）／.light（白）／.ghost（ヘッダーの淡い地）。
   矢印の三角は <span class="ar"><svg viewBox="0 0 14 14"><path d="M4 2.6 L10.2 7 L4 11.4 Z"/></svg></span>。色は丸に合わせて自動で決まる */
.v8 .btnx{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 62px 0 28px; border:0; border-radius:999px;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1.35; letter-spacing:.05em;
  text-decoration:none; text-align:center; white-space:nowrap; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.v8 .btnx .ar{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.v8 .btnx .ar svg{display:block; width:13px; height:13px}
.v8 .btnx .ar path{fill:currentColor}
.v8 .btnx.lg{min-height:64px; padding:0 74px 0 34px; font-size:17px}
.v8 .btnx.lg .ar{right:10px; width:44px; height:44px}
.v8 .btnx.lg .ar svg{width:14px; height:14px}
.v8 .btnx.sm{min-height:44px; padding:0 50px 0 22px; font-size:14px; letter-spacing:.08em}
.v8 .btnx.sm .ar{right:7px; width:30px; height:30px}
.v8 .btnx.sm .ar svg{width:12px; height:12px}
.v8 .btnx.dark {background:var(--g-black); color:#F6F6F6; box-shadow:var(--e2)}
.v8 .btnx.dark .ar{background:#F6F6F6; color:#111}
.v8 .btnx.light{background:#fff; color:#111; box-shadow:var(--e1)}
.v8 .btnx.light .ar{background:#111; color:#fff}
.v8 .btnx.ghost{background:rgba(255,255,255,.72); color:#2C3646; box-shadow:inset 0 0 0 1px rgba(20,32,50,.14)}
.v8 .btnx.ghost .ar{background:#111; color:#fff}
.v8 .btnx.wide{display:flex; width:100%; white-space:normal}
.v8 .btnx:disabled, .v8 .btnx[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
@media (max-width:767px){ .v8 .btnx{white-space:normal} }

/* ── ホバーの光：縁を真珠色の光が回る（トップと同じ） ── */
@property --v8ang{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes v8ring{to{--v8ang:360deg}}
.v8 .btnx::before, .v8 .pring{
  content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  pointer-events:none; z-index:3;
  background:conic-gradient(from var(--v8ang),
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 50deg, rgba(222,226,236,.95) 90deg,
    rgba(232,222,244,.90) 130deg, rgba(252,240,222,.85) 170deg, rgba(255,255,255,0) 220deg, rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
  animation:v8ring 2.8s linear infinite; animation-play-state:paused;
}
/* 白いボタン・カードの上では白い光が見えないので、銀〜墨の移ろいにする */
.v8 .btnx.light::before, .v8 .btnx.ghost::before, .v8 .pring{
  background:conic-gradient(from var(--v8ang),
    rgba(40,48,60,0) 0deg, rgba(40,48,60,.70) 50deg, rgba(140,150,168,.80) 95deg,
    rgba(196,186,214,.75) 140deg, rgba(214,196,168,.65) 180deg, rgba(40,48,60,0) 225deg, rgba(40,48,60,0) 360deg);
}
@media (hover:hover){
  .v8 .btnx:hover::before, .v8 .has-pglow:hover > .pring{opacity:1; animation-play-state:running}
}
/* カーソルの位置に付いてくる光（カード） */
.v8 .pglow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.72) 0%, rgba(240,236,250,.30) 40%, rgba(255,255,255,0) 70%);
  opacity:0; transition:opacity .32s ease;
}
.v8 .has-pglow:hover > .pglow{opacity:1}

/* ═══ ヘッダー .sitehd ─ 白い丸い帯。画面幅で3段に組み替える ═══
   1024px 以上: ロゴ／サービス・導入事例・メディア／資料ダウンロード・無料相談
   768〜1023px: ロゴ／資料ダウンロード・無料相談・メニュー
   768px 未満 : ロゴ／無料相談（小）・メニュー */
.v8 .sitehd{
  position:fixed; z-index:40; left:50%; top:var(--hdr-top); transform:translateX(-50%);
  width:min(1300px, calc(100% - 48px)); height:var(--hdr-h);
  padding:0 12px 0 32px; border-radius:999px;
  display:flex; align-items:center; gap:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px);
  box-shadow:0 16px 34px -16px rgba(14,26,44,.30), 0 2px 6px -3px rgba(14,26,44,.14),
             inset 0 1px 0 rgba(255,255,255,.92);
}
.admin-bar.v8 .sitehd{top:calc(var(--hdr-top) + 32px)}
@media (max-width:782px){ .admin-bar.v8 .sitehd{top:calc(var(--hdr-top) + 46px)} }
.v8 .sitehd-logo{
  display:inline-flex; align-items:center; min-height:44px; flex:0 0 auto;
  font-size:17px; font-weight:900; letter-spacing:.16em; line-height:1; color:#111; text-decoration:none;
}
.v8 .sitehd-nav{display:flex; gap:26px; margin-left:4px}
.v8 .sitehd-nav a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center;
  font-size:14px; font-weight:700; letter-spacing:.08em; color:#2C3646; text-decoration:none;
  text-underline-offset:7px; text-decoration-thickness:1px;
}
/* いまいるページの印（下線）は付けない（2026-09-22 板垣さん指示）。下線はマウスを載せている間だけ（触って押す端末では付けない） */
@media (hover:hover){ .v8 .sitehd-nav a:hover{color:#111; text-decoration-line:underline} }
.v8 .sitehd-act{margin-left:auto; display:flex; align-items:center; gap:14px}
.v8 .sitehd-menu{display:none}
@media (max-width:1023px){
  .v8 .sitehd{width:calc(100% - 48px); padding:0 12px 0 28px; gap:20px}
  .v8 .sitehd-nav{display:none}
  .v8 .sitehd-act{gap:10px}
}
@media (max-width:767px){
  .v8 .sitehd{width:calc(100% - 20px); padding:0 8px 0 20px; gap:12px}
  .v8 .sitehd-logo{font-size:15px; letter-spacing:.14em}
  .v8 .sitehd-dl{display:none}
  .v8 .sitehd-act{gap:6px}
}
@media (max-width:359px){
  .v8 .sitehd{padding-left:16px}
  .v8 .sitehd-logo{font-size:14px; letter-spacing:.1em}
  .v8 .sitehd-mt{padding:0 16px}
  .v8 .sitehd-mt .ar{display:none}
}

/* メニューを開くボタン（細い輪の中の2本線。開くと × になる） */
@media (max-width:1023px){
  .v8 .sitehd-menu{
    position:relative; display:block; flex:0 0 44px; width:44px; height:44px; padding:0;
    border:0; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(20,32,50,.18);
  }
  .v8 .sitehd-menu i{
    position:absolute; left:50%; top:50%; width:16px; height:2px; margin:-1px 0 0 -8px;
    border-radius:2px; background:#111; transition:transform .32s cubic-bezier(.2,.7,.2,1);
  }
  .v8 .sitehd-menu i:nth-child(1){transform:translateY(-3.5px)}
  .v8 .sitehd-menu i:nth-child(2){transform:translateY(3.5px)}
  .v8.menu-open .sitehd-menu i:nth-child(1){transform:rotate(45deg)}
  .v8.menu-open .sitehd-menu i:nth-child(2){transform:rotate(-45deg)}
}

/* ── スマホ・タブレットのメニュー .v8menu ── ヘッダーの下に面を1枚開く */
.v8 .v8menu{position:fixed; inset:0; z-index:39; visibility:hidden; pointer-events:none; transition:visibility 0s linear .4s}
.v8.menu-open .v8menu{visibility:visible; pointer-events:auto; transition:none}
.v8 .v8menu-bd{position:absolute; inset:0; background:rgba(20,26,34,.30); opacity:0; transition:opacity .32s ease}
.v8.menu-open .v8menu-bd{opacity:1}
.v8 .v8menu-panel{
  position:absolute; left:10px; right:10px; top:calc(var(--hdr-top) + var(--hdr-h) + 10px);
  max-height:calc(100dvh - var(--hdr-top) - var(--hdr-h) - 20px); overflow:auto; overscroll-behavior:contain;
  padding:6px 20px 20px; border-radius:24px;
  background:var(--surface);
  box-shadow:var(--e3), 0 0 0 1px rgba(20,32,50,.06);
  opacity:0; transform:translateY(-10px);
  transition:opacity .3s ease, transform .42s cubic-bezier(.2,.7,.2,1);
}
.admin-bar.v8 .v8menu-panel{top:calc(var(--hdr-top) + var(--hdr-h) + 42px)}   /* ログイン中の管理バー（32px）のぶん下げる */
@media (max-width:782px){ .admin-bar.v8 .v8menu-panel{top:calc(var(--hdr-top) + var(--hdr-h) + 56px)} }
.v8.menu-open .v8menu-panel{opacity:1; transform:none}
.v8 .v8menu-nav{display:block}
.v8 .v8menu-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:60px; padding:6px 2px; border-bottom:1px solid var(--hair);
  font-size:18px; font-weight:700; letter-spacing:.06em; line-height:1.4; color:var(--ink); text-decoration:none;
}
.v8 .v8menu-acts{display:grid; gap:12px; margin-top:20px}
@media (min-width:768px){ .v8 .v8menu-panel{left:auto; right:24px; width:440px} }
@media (min-width:1024px){ .v8 .v8menu{display:none} }

/* 三角の丸（ふだんは細い輪。触れると黒く満ちる）。メニューの行・目次などで使う */
.v8 .go{
  position:relative; flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.30); color:#111;
  transition:background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.v8 .go svg{position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -5px}
.v8 .go path{fill:currentColor}
@media (hover:hover){
  .v8 a:hover > .go{background:#111; color:#fff; box-shadow:none}
}

/* ═══ パンくず .crumbs ═══ */
.v8 .crumbs ol{display:flex; align-items:center; margin:0; padding:0; list-style:none; min-width:0}
.v8 .crumbs li{display:flex; align-items:center; flex:0 0 auto; min-width:0; font-size:14px; font-weight:500; letter-spacing:.06em; line-height:1.5; color:var(--ink3)}
.v8 .crumbs li + li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin:0 14px 0 10px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.45;
}
.v8 .crumbs a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--ink2); text-decoration:none}
.v8 .crumbs a:hover{color:#111; text-decoration:underline; text-underline-offset:5px}
.v8 .crumbs li:last-child{flex:1 1 auto}
.v8 .crumbs li:last-child > span{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; opacity:.8}

/* ═══ 下層の頭 .lh ─ 小さな英字＋大きな日本語＋地に大きく薄く太い英字＋リード ═══ */
.v8 .lh{position:relative; overflow:hidden; padding:calc(var(--hdr-top) + var(--hdr-h) + 26px) 0 72px}
.v8 .lh-hd{position:relative; margin-top:64px}
.v8 .lh-bg{
  position:absolute; left:-.05em; top:-.3em; z-index:0; margin:0;
  font-size:132px; font-weight:900; line-height:1; letter-spacing:.04em;
  color:var(--pale); white-space:nowrap; pointer-events:none; user-select:none;
}
.v8 .lh-en{position:relative; margin:0; font-size:20px; font-weight:700; line-height:1.3; letter-spacing:.05em; color:var(--ink2)}
.v8 .lh-ja{position:relative; margin:10px 0 0; font-size:52px; font-weight:900; line-height:1.28; letter-spacing:.02em; color:var(--ink)}
.v8 .lh.is-long .lh-ja{max-width:27em; font-size:44px; line-height:1.45; letter-spacing:.01em}   /* 章の見出し .hx-ja（40/34/28px）を下回らない */
.v8 .lh-lead{position:relative; max-width:42em; margin:28px 0 0; font-size:17px; font-weight:500; line-height:2; letter-spacing:.04em; color:var(--ink2)}
.v8 .lh-meta{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:24px 0 0; font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--ink3)}
.v8 .lh-meta > * + *{padding-left:14px; border-left:1px solid var(--hair)}
@media (max-width:1023px){
  .v8 .lh{padding-bottom:56px}
  .v8 .lh-hd{margin-top:52px}
  .v8 .lh-bg{font-size:104px}
  .v8 .lh-en{font-size:18px}
  .v8 .lh-ja{font-size:42px}
  .v8 .lh.is-long .lh-ja{font-size:34px}
}
@media (max-width:767px){
  .v8 .lh{padding-top:calc(var(--hdr-top) + var(--hdr-h) + 14px); padding-bottom:44px}
  .v8 .lh-hd{margin-top:36px}
  .v8 .lh-bg{font-size:64px; top:-.26em}
  .v8 .lh-en{font-size:16px}
  .v8 .lh-ja{margin-top:6px; font-size:32px; line-height:1.35}
  .v8 .lh.is-long .lh-ja{font-size:28px; line-height:1.5}
  .v8 .lh-lead{margin-top:20px; font-size:16px; line-height:1.95}
  .v8 .lh-meta{margin-top:18px}
}

/* ═══ 章 .blk と、章の見出し .hx（頭と同じ型を一段小さく） ═══ */
.v8 .blk{position:relative; padding:var(--blk) 0; overflow-x:hidden; overflow-x:clip}
.v8 .lh + .blk{padding-top:8px}
.v8 .hx{position:relative}
.v8 .hx-bg{
  position:absolute; left:-.05em; top:-.3em; z-index:0; margin:0;
  font-size:112px; font-weight:900; line-height:1; letter-spacing:.04em;
  color:var(--pale); white-space:nowrap; pointer-events:none; user-select:none;
}
.v8 .hx-en{position:relative; margin:0; font-size:19px; font-weight:700; line-height:1.3; letter-spacing:.05em; color:var(--ink2)}
.v8 .hx-ja{position:relative; margin:8px 0 0; font-size:40px; font-weight:900; line-height:1.3; letter-spacing:.02em; color:var(--ink)}
.v8 .hx-lead{position:relative; max-width:40em; margin:20px 0 0; font-size:16px; font-weight:500; line-height:2; letter-spacing:.04em; color:var(--ink2)}
/* 見出しの行：左に見出し、右に「すべての〜を見る」。下に細い罫 */
.v8 .hx-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px;
  padding-bottom:40px; margin-bottom:48px; border-bottom:1px solid var(--hair);
}
.v8 .hx-row > .btnx{flex:0 0 auto}
@media (max-width:1023px){
  .v8 .hx-bg{font-size:92px}
  .v8 .hx-en{font-size:18px}
  .v8 .hx-ja{font-size:34px}
  .v8 .hx-row{padding-bottom:32px; margin-bottom:40px}
}
@media (max-width:767px){
  .v8 .hx-bg{font-size:60px; top:-.26em}
  .v8 .hx-en{font-size:16px}
  .v8 .hx-ja{margin-top:6px; font-size:28px}
  .v8 .hx-row{flex-direction:column; align-items:flex-start; padding-bottom:28px; margin-bottom:32px}
}

/* ═══ 面 .sheet ─ 動く地の上に本文やフォームを直接載せず、この面に置く ═══ */
.v8 .sheet{
  position:relative; max-width:920px; margin:0 auto; padding:80px 90px 88px;
  border-radius:28px;
  background:linear-gradient(158deg, rgba(255,255,255,.93) 0%, rgba(250,251,253,.90) 44%, rgba(241,243,247,.88) 100%);
  box-shadow:var(--e2), 0 0 0 1px var(--pale), inset 0 0 0 1px var(--faceline);
}
.v8 .sheet.wide{max-width:none}
.v8 .hx + .sheet{margin-top:56px}
@media (max-width:767px){ .v8 .hx + .sheet{margin-top:36px} }
@media (max-width:1023px){ .v8 .sheet{padding:64px 56px 72px; border-radius:24px} }
@media (max-width:767px) { .v8 .sheet{margin:0 -8px; padding:36px 20px 44px; border-radius:20px} }

/* ═══ 本文の組版 .prose ─ 幅 740px。h2〜h4・段落・リスト・表・引用・開閉・画像 ═══ */
.v8 .prose{
  max-width:740px; margin:0 auto;
  font-size:17px; font-weight:400; line-height:2; letter-spacing:.04em; color:var(--ink2);
  line-break:strict; overflow-wrap:anywhere;
}
.v8 .prose > :first-child{margin-top:0}
.v8 .prose p{margin:1.4em 0 0}
.v8 .prose [id]{scroll-margin-top:calc(var(--hdr-top) + var(--hdr-h) + 24px)}
.v8 .prose a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em}
.v8 .prose a:hover{color:#111}
.v8 .prose strong, .v8 .prose b{font-weight:700; color:var(--ink)}
.v8 .prose em{font-style:normal; font-weight:700}
.v8 .prose small{font-size:13px}
.v8 .prose code{padding:.1em .4em; border-radius:6px; background:var(--tint); font-size:.9em}

/* 見出し。h2 に data-num があれば、その番号を見出しの後ろに大きく・薄く・太く敷く */
.v8 .prose h2{
  position:relative; z-index:0; margin:112px 0 0; padding-top:12px;
  font-size:30px; font-weight:900; line-height:1.5; letter-spacing:.03em; color:var(--ink);
}
.v8 .prose h2[data-num]{padding-top:44px}
.v8 .prose h2[data-num]::before{
  content:attr(data-num); position:absolute; z-index:-1; left:-.04em; top:-.08em;
  font-size:120px; font-weight:900; line-height:1; letter-spacing:.02em; color:var(--pale);
  pointer-events:none;
}
.v8 .prose h3{margin:64px 0 0; font-size:22px; font-weight:800; line-height:1.6; letter-spacing:.03em; color:var(--ink)}
.v8 .prose h4{margin:44px 0 0; font-size:18px; font-weight:700; line-height:1.7; letter-spacing:.03em; color:var(--ink)}
.v8 .prose h2 + *, .v8 .prose h3 + *, .v8 .prose h4 + *{margin-top:1.1em}

/* リスト */
.v8 .prose ul, .v8 .prose ol{margin:1.4em 0 0; padding:0; list-style:none}
.v8 .prose li{position:relative; margin:.5em 0 0; padding-left:1.5em; line-height:1.9}
.v8 .prose li > ul, .v8 .prose li > ol{margin-top:.5em}
.v8 .prose ul > li::before{
  content:""; position:absolute; left:.4em; top:.82em;
  width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.55;
}
.v8 .prose ol{counter-reset:v8ol}
.v8 .prose ol > li{counter-increment:v8ol; padding-left:2.1em}
.v8 .prose ol > li::before{
  content:counter(v8ol, decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-size:.82em; font-weight:800; letter-spacing:.02em; color:var(--ink3); font-variant-numeric:tabular-nums;
}

/* 表。.tbl（記事の既存の .rich-table-wrap も同じ）で包むと、狭い画面で横に送れる */
.v8 .prose .tbl, .v8 .prose .rich-table-wrap{
  margin:2em 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:16px; box-shadow:inset 0 0 0 1px var(--hair);
}
.v8 .prose table{width:100%; margin:2em 0 0; border-collapse:collapse; font-size:15px; line-height:1.75; letter-spacing:.02em}
.v8 .prose .tbl > table, .v8 .prose .rich-table-wrap > table{margin:0}
.v8 .prose th, .v8 .prose td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hair)}
.v8 .prose thead th{background:var(--tint); font-size:14px; font-weight:800; letter-spacing:.04em; color:var(--ink); white-space:nowrap}
.v8 .prose tbody th{font-weight:700; color:var(--ink)}
.v8 .prose tbody tr:last-child > *{border-bottom:0}
.v8 .prose tr.row-featured > *{background:rgba(9,111,200,.05)}

/* 引用。線は引かず、大きく・薄く・太い「“」を後ろに敷く */
.v8 .prose blockquote{position:relative; z-index:0; margin:2.4em 0 0; padding:30px 0 2px 60px; font-weight:400; color:var(--ink)}
.v8 .prose blockquote::before{
  content:"\201C"; position:absolute; z-index:-1; left:-6px; top:-22px;
  font-size:128px; font-weight:900; line-height:1; color:var(--pale);
}
.v8 .prose blockquote > :first-child{margin-top:0}
.v8 .prose blockquote cite{display:block; margin-top:12px; font-size:13px; font-style:normal; font-weight:500; color:var(--ink3)}

/* 開閉（よくある質問など）。トップの FAQ と同じ、細い輪の中の＋ */
.v8 .prose details{
  margin:14px 0 0; border-radius:16px;
  background:rgba(255,255,255,.66);
  box-shadow:var(--e1), 0 0 0 1px var(--pale), inset 0 0 0 1px var(--faceline);
}
.v8 .prose h2 + details, .v8 .prose h3 + details{margin-top:1.4em}
.v8 .prose summary{
  position:relative; display:flex; align-items:center; min-height:64px; padding:16px 68px 16px 24px;
  font-size:17px; font-weight:700; line-height:1.65; letter-spacing:.03em; color:var(--ink);
  list-style:none; cursor:pointer;
}
.v8 .prose summary::-webkit-details-marker{display:none}
.v8 .prose summary::after{
  content:""; position:absolute; right:16px; top:50%; width:36px; height:36px; margin-top:-18px; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--hair);
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;
}
.v8 .prose details[open] > summary::after{background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat}
.v8 .prose details > :not(summary){margin:0 24px; padding:0 0 22px; font-size:16px; line-height:1.95}
.v8 .prose details > summary + *{padding-top:18px; border-top:1px solid var(--hair)}

/* 画像 */
.v8 .prose img{display:block; max-width:100%; height:auto; border-radius:16px}
.v8 .prose figure{margin:2.4em 0 0}
.v8 .prose figure img{width:100%}
.v8 .prose figcaption{margin-top:12px; font-size:13px; line-height:1.7; letter-spacing:.04em; color:var(--ink3)}
.v8 .prose hr{height:1px; margin:3em 0 0; border:0; background:var(--hair)}

/* ── 記事本文に既にあるクラスの受け皿（media_article 116本で使われている分のうち、よく出るもの） ── */
.v8 .prose .section-cover{display:none}   /* h2 と同じ題の青い帯。見出しと重なるので出さない */
.v8 .prose .article-marker{background:linear-gradient(transparent 62%, rgba(9,111,200,.14) 62%); font-weight:500; color:var(--ink)}
.v8 .prose .article-body__keypoint,
.v8 .prose .article-body__section-summary,
.v8 .prose .article-toc{margin:2.4em 0 0; padding:28px 32px 30px; border-radius:18px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair)}
.v8 .prose .article-body__keypoint-label,
.v8 .prose .article-toc__label{font-size:13px; font-weight:800; letter-spacing:.2em; line-height:1.6; color:var(--ink3)}
.v8 .prose .article-body__keypoint-label + p{margin-top:10px}
.v8 .prose .article-body__section-summary > :first-child{margin-top:0}
.v8 .prose .article-body__section-summary p{font-size:16px; line-height:1.95}
.v8 .prose .article-toc{padding-bottom:14px}
.v8 .prose .article-toc__list{margin:10px 0 0}
.v8 .prose .article-toc__list > li{margin:0; padding:0}
.v8 .prose .article-toc__list > li::before{display:none}
.v8 .prose .article-toc__link{
  display:flex; align-items:center; gap:14px; min-height:52px; padding:10px 0;
  border-top:1px solid var(--hair); color:var(--ink); text-decoration:none;
  font-size:16px; font-weight:700; line-height:1.6; letter-spacing:.03em;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.v8 .prose .article-toc__link:hover{color:var(--ink); transform:translateX(6px)}
.v8 .prose .article-toc__link-num{flex:0 0 2.2em; font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--ink3); font-variant-numeric:tabular-nums}
.v8 .prose .article-toc__link-arrow{display:none}
.v8 .prose .rich-h3-section{margin:0}

@media (max-width:1023px){
  .v8 .prose h2{margin-top:96px; font-size:28px}
  .v8 .prose h2[data-num]::before{font-size:104px}
}
@media (max-width:767px){
  .v8 .prose{font-size:16px; line-height:1.95; letter-spacing:.03em}
  .v8 .prose h2{margin-top:80px; font-size:23px; line-height:1.55}
  .v8 .prose h2[data-num]{padding-top:34px}
  .v8 .prose h2[data-num]::before{font-size:80px}
  .v8 .prose h3{margin-top:52px; font-size:19px}
  .v8 .prose h4{margin-top:36px; font-size:17px}
  .v8 .prose .tbl > table, .v8 .prose .rich-table-wrap > table{min-width:600px}   /* 包んだ表だけ横に送る。包んでいない表は折り返して縮める */
  .v8 .prose th, .v8 .prose td{padding:12px 14px}
  .v8 .prose [data-more="r"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),rgba(0,0,0,.18)); mask-image:linear-gradient(90deg,#000 calc(100% - 56px),rgba(0,0,0,.18))}
  .v8 .prose [data-more="l"]{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 56px),rgba(0,0,0,.18)); mask-image:linear-gradient(270deg,#000 calc(100% - 56px),rgba(0,0,0,.18))}
  .v8 .prose [data-more="lr"]{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.18),#000 56px,#000 calc(100% - 56px),rgba(0,0,0,.18)); mask-image:linear-gradient(90deg,rgba(0,0,0,.18),#000 56px,#000 calc(100% - 56px),rgba(0,0,0,.18))}
  .v8 .prose blockquote{padding-left:44px}
  .v8 .prose blockquote::before{font-size:104px; top:-16px}
  .v8 .prose summary{min-height:60px; padding:14px 60px 14px 18px; font-size:16px}
  .v8 .prose summary::after{right:12px}
  .v8 .prose details > :not(summary){margin:0 18px}
  .v8 .prose .article-body__keypoint,
  .v8 .prose .article-body__section-summary,
  .v8 .prose .article-toc{padding:22px 20px 24px}
  .v8 .prose .article-toc{padding-bottom:10px}
  .v8 .prose .article-toc__link{font-size:15px}
}

/* ═══ カード .card と記事カード .acard ═══ */
.v8 .cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px}
@media (max-width:1023px){ .v8 .cards{grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px} }
@media (max-width:767px) { .v8 .cards{grid-template-columns:minmax(0,1fr); gap:20px} }
.v8 .card{
  position:relative; display:block; overflow:hidden; border-radius:18px;
  background:var(--face); color:inherit; text-decoration:none;
  box-shadow:var(--e1), 0 0 0 1px var(--pale);
  transition:box-shadow .3s ease;
}
.v8 a.card:hover{box-shadow:var(--e2), 0 0 0 1px var(--pale)}
.v8 .acard .ph{aspect-ratio:1200/630; overflow:hidden; border-bottom:1px solid var(--hair); background:var(--tint)}
.v8 .acard .ph img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .v8 .acard:hover .ph img{transform:scale(1.03)} }
.v8 .acard .bd{padding:22px 24px 26px}
.v8 .acard .meta{display:flex; align-items:center; gap:12px; margin:0; font-size:13px; line-height:1.5}
.v8 .acard .cat{font-weight:800; letter-spacing:.08em; color:var(--ink2)}
.v8 .acard .dt{padding-left:12px; border-left:1px solid var(--hair); font-weight:700; letter-spacing:.1em; color:var(--ink3); font-variant-numeric:tabular-nums}
.v8 .acard .ttl{
  margin:12px 0 0; min-height:calc(1.62em * 2);
  font-size:17px; font-weight:800; line-height:1.62; letter-spacing:.01em; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.v8 .acard .ex{
  margin:10px 0 0; font-size:15px; font-weight:500; line-height:1.85; letter-spacing:.03em; color:var(--ink2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.v8 .acard .ttl, .v8 .acard .ex{word-break:auto-phrase}
@media (min-width:768px) and (max-width:1023px){
  .v8 .cards > .acard:last-child:nth-child(odd){grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .v8 .cards > .acard:last-child:nth-child(odd) .ph{position:relative; aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--hair)}
  .v8 .cards > .acard:last-child:nth-child(odd) .ph img{position:absolute; inset:0}
  .v8 .cards > .acard:last-child:nth-child(odd) .bd{align-self:center; padding:26px 28px 28px}
}

/* ═══ フォームの入力欄 .fm ═══ */
.v8 .fm{display:grid; gap:28px; margin:0}
.v8 .fm-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 24px}
.v8 .fm-row{display:grid; gap:10px; min-width:0; margin:0; padding:0; border:0}
.v8 .fm-lb{display:flex; align-items:baseline; gap:10px; padding:0; font-size:15px; font-weight:700; line-height:1.5; letter-spacing:.04em; color:var(--ink)}
.v8 .fm-req, .v8 .fm-opt{font-size:12px; font-weight:700; letter-spacing:.12em}
.v8 .fm-req{color:var(--accent-ink)}
.v8 .fm-opt{color:var(--ink3); font-weight:500}
.v8 .fm-in, .v8 .fm-sel, .v8 .fm-ta{
  display:block; width:100%; min-height:56px; margin:0; padding:14px 18px;
  border:0; border-radius:14px; background:rgba(255,255,255,.96);
  box-shadow:inset 0 0 0 1px rgba(20,32,50,.5), inset 0 2px 4px rgba(14,26,44,.05);   /* 縁は面に対して 3:1 */
  font-family:inherit; font-size:16px; font-weight:500; line-height:1.6; letter-spacing:.03em; color:var(--ink);
  -webkit-appearance:none; appearance:none; transition:box-shadow .2s ease;
}
.v8 .fm-in::placeholder, .v8 .fm-ta::placeholder{color:rgba(36,45,58,.66)}   /* 4.7:1 */
.v8 .fm-in:focus, .v8 .fm-sel:focus, .v8 .fm-ta:focus{outline:none; box-shadow:inset 0 0 0 2px #111, 0 0 0 4px rgba(17,17,17,.06)}
.v8 .fm-in[aria-invalid="true"], .v8 .fm-sel[aria-invalid="true"], .v8 .fm-ta[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #B42318}
.v8 .fm-sel{
  padding-right:54px; cursor:pointer;
  background:rgba(255,255,255,.96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 4 L7 10.2 L11.4 4 Z' fill='%23111111'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 12px;
}
.v8 .fm-ta{min-height:168px; resize:vertical}
.v8 .fm-note{margin:0; font-size:13px; line-height:1.7; letter-spacing:.03em; color:var(--ink3)}
.v8 .fm-err{margin:0; font-size:14px; font-weight:700; line-height:1.7; color:#B42318}
/* チェックボックス。行全体を押せる（高さ 44px 以上） */
.v8 .fm-checks{display:flex; flex-wrap:wrap; gap:0 28px}
.v8 .fm-check{
  display:inline-flex; align-items:center; gap:12px; min-height:44px; cursor:pointer;
  font-size:15px; font-weight:500; line-height:1.6; letter-spacing:.03em; color:var(--ink);
}
.v8 .fm-check input{
  display:grid; place-content:center; flex:0 0 22px; width:22px; height:22px; margin:0;
  border:0; border-radius:6px; background:#fff; cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(20,32,50,.5);
  -webkit-appearance:none; appearance:none; transition:background-color .2s ease, box-shadow .2s ease;
}
.v8 .fm-check input::before{
  content:""; width:12px; height:12px; background:#fff; transform:scale(0); transition:transform .18s ease;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.v8 .fm-check input:checked{background:#111; box-shadow:none}
.v8 .fm-check input:checked::before{transform:scale(1)}
.v8 .fm-check input:focus-visible{outline:2px solid #111; outline-offset:3px}
.v8 .fm-check a{color:var(--accent-ink); text-underline-offset:.22em}
.v8 .fm-submit{display:flex; justify-content:center; margin-top:12px}
.v8 .fm-submit .btnx{min-width:320px}
@media (max-width:767px){
  .v8 .fm{gap:24px}
  .v8 .fm-2{grid-template-columns:minmax(0,1fr); gap:24px}
  .v8 .fm-submit .btnx{width:100%; min-width:0}
}

/* ═══ 締めの CTA .endcta ─ 1枚のカードに言葉を収め、切り抜きの人物をカードの縁から立ち上げる ═══ */
.v8 .endcta{position:relative; padding:200px 0 var(--blk); overflow-x:hidden; overflow-x:clip}
.v8 .endcta-in{position:relative; --pw:380px}
.v8 .endcta-card{
  position:relative; z-index:1; display:flex; align-items:center; min-height:0;
  padding:44px calc(var(--pw) + 32px) 44px 56px;   /* カードを低く抑え、人物をカードの縁から大きく立ち上げる */
  border-radius:26px; background:var(--face);
  box-shadow:0 40px 60px -34px rgba(6,12,22,.45), 0 10px 20px -12px rgba(6,12,22,.22),
             0 0 0 1px rgba(20,32,50,.06), inset 0 0 0 1px var(--faceline);
}
.v8 .endcta-copy{min-width:0}
.v8 .endcta-a{margin:0; font-size:20px; font-weight:700; line-height:1.4; letter-spacing:.14em; color:var(--ink2)}
.v8 .endcta-b{margin:8px 0 0; font-size:40px; font-weight:900; line-height:1.3; letter-spacing:.01em; color:var(--ink)}
.v8 .endcta-lead{margin:16px 0 0; font-size:16px; font-weight:500; line-height:2; letter-spacing:.04em; color:var(--ink2)}
.v8 .endcta-acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.v8 .endcta-who{
  position:absolute; z-index:2; right:32px; bottom:0; width:var(--pw); aspect-ratio:972/1268; margin:0; pointer-events:none;
}
.v8 .endcta-who img{display:block; width:100%; height:100%; object-fit:contain; object-position:bottom center;
  filter:drop-shadow(-22px 16px 26px rgba(4,10,20,.34))}
/* 1024〜1179px：人物はカードの右に立たせたまま、ボタン2つを縦に積む（1行に収まらないため） */
@media (min-width:1024px) and (max-width:1179px){
  .v8 .endcta-who{right:40px}
  .v8 .endcta-card{min-height:320px; padding:52px calc(var(--pw) + 40px) 52px 52px}
  .v8 .endcta-acts{flex-direction:column; align-items:flex-start; gap:12px}
}
/* 1023px 以下：人物をカードの右上に立たせ、腰から下をカードの後ろに隠す */
@media (max-width:1023px){
  .v8 .endcta{padding-top:24px}
  .v8 .endcta-in{--pw:260px; display:flex; flex-direction:column}
  .v8 .endcta-who{order:-1; position:relative; z-index:0; right:auto; bottom:auto; align-self:flex-end; margin:0 28px -64px 0}
  .v8 .endcta-who img{filter:drop-shadow(-14px 12px 20px rgba(4,10,20,.26))}
  .v8 .endcta-card{display:block; min-height:0; padding:44px 40px 40px}
  .v8 .endcta-a{font-size:18px}
  .v8 .endcta-b{font-size:32px}
}
@media (max-width:767px){
  .v8 .endcta-in{--pw:220px}
  .v8 .endcta-who{margin:0 4px -56px 0}
  .v8 .endcta-card{padding:34px 20px 24px}
  .v8 .endcta-a{font-size:16px}
  .v8 .endcta-b{margin-top:6px; font-size:28px}
  .v8 .endcta-lead{font-size:15px; line-height:1.9}
  .v8 .endcta-acts{flex-direction:column; gap:12px; margin-top:22px}
  .v8 .endcta-acts .btnx{display:flex; width:100%; padding-left:20px; padding-right:56px; font-size:15px; letter-spacing:.02em}
}
/* 既定の締め（footer-v8.php）は、トップの #cta と同じ人物の置き方にそろえる。
   人物は切り抜きのままカードの手前に置き、足元をカードの下の縁にそろえて立ち上げる（カードの後ろには隠さない）。
   PC：カードを低めにして、頭をカードより上へ大きく出す。
   768〜1023px：言葉とボタンを左、人物を右に置き、カードの下の縁から頭を上へ出す。
   767px 以下：言葉とボタンを先に出し、人物は小さくしてカードの下の縁から中央に立ち上げる。
   資料請求の完了ページ（.fx-next）は人物が別なので、これまでの組み方のまま */
@media (min-width:1180px){
  .v8 .endcta:not(.fx-next){padding-top:240px}
  .v8 .endcta:not(.fx-next) .endcta-in{--pw:392px}
  .v8 .endcta:not(.fx-next) .endcta-card{padding:36px calc(var(--pw) + 28px) 36px 52px}
  .v8 .endcta:not(.fx-next) .endcta-acts{gap:12px}
  .v8 .endcta:not(.fx-next) .endcta-who{right:28px}
}
@media (min-width:1024px) and (max-width:1179px){
  .v8 .endcta:not(.fx-next){padding-top:240px}
  .v8 .endcta:not(.fx-next) .endcta-in{--pw:400px}
  .v8 .endcta:not(.fx-next) .endcta-card{min-height:0; padding:40px calc(var(--pw) + 24px) 40px 48px}
  .v8 .endcta:not(.fx-next) .endcta-b{font-size:36px}
  .v8 .endcta:not(.fx-next) .endcta-who{right:24px}
}
@media (min-width:1024px){
  .v8 .endcta:not(.fx-next) .endcta-who img{filter:drop-shadow(-22px 16px 26px rgba(4,10,20,.42))}
}
@media (min-width:768px) and (max-width:1023px){
  .v8 .endcta:not(.fx-next){padding-top:112px}
  .v8 .endcta:not(.fx-next) .endcta-in{--pw:322px; display:block}
  .v8 .endcta:not(.fx-next) .endcta-who{order:0; position:absolute; z-index:2; right:8px; bottom:0; margin:0}
  .v8 .endcta:not(.fx-next) .endcta-who img{filter:drop-shadow(-22px 16px 26px rgba(4,10,20,.42))}
  .v8 .endcta:not(.fx-next) .endcta-card{display:flex; align-items:center; min-height:360px; padding:44px calc(var(--pw) - 24px) 44px 40px}
  .v8 .endcta:not(.fx-next) .endcta-acts{flex-direction:column; align-items:flex-start; gap:12px; margin-top:24px}
  .v8 .endcta:not(.fx-next) .endcta-acts .btnx{min-height:54px; padding:0 56px 0 24px; font-size:15px}
  .v8 .endcta:not(.fx-next) .endcta-acts .btnx .ar{right:8px; width:36px; height:36px}
}
@media (max-width:767px){
  .v8 .endcta:not(.fx-next) .endcta-in{--pw:201px; display:block}
  .v8 .endcta:not(.fx-next) .endcta-who{order:0; position:absolute; z-index:2; left:0; right:0; bottom:0; margin:0 auto}
  .v8 .endcta:not(.fx-next) .endcta-who img{filter:drop-shadow(-12px 10px 16px rgba(4,10,20,.32))}
  /* 下に人物の立つ場所を取る（人物の高さ 262px から、頭の上の透けた分を引いて少し空ける） */
  .v8 .endcta:not(.fx-next) .endcta-card{padding:32px 20px 276px}
  /* 見出し（11字）は1行に収める。390px で27px、狭い端末では字を下げる。言葉を差し替えて長くなったときは語の切れ目で折る */
  .v8 .endcta:not(.fx-next) .endcta-b{font-size:min(28px, calc((100vw - 80px) / 11.3))}
  /* ボタンの字は1行に収める（360px 幅で14px まで下げる。12px より下げない） */
  .v8 .endcta:not(.fx-next) .endcta-acts .btnx{padding:0 52px 0 16px; font-size:clamp(12px, calc((100vw - 148px) / 15.4), 15px); white-space:nowrap}
  .v8 .endcta:not(.fx-next) .endcta-acts .btnx .ar{right:8px; width:36px; height:36px}
}
@media (max-width:359px){
  .v8 .endcta:not(.fx-next) .endcta-acts .btnx{padding:0 44px 0 12px; letter-spacing:0}
  .v8 .endcta:not(.fx-next) .endcta-acts .btnx .ar{right:6px; width:32px; height:32px}
}

/* ═══ フッター .sitefoot ═══ */
.v8 .sitefoot{position:relative; padding:96px 0 36px}
.v8 .sitefoot-top{display:flex; justify-content:space-between; gap:48px 64px}
.v8 .sitefoot-brand{flex:0 1 380px}
.v8 .sitefoot-logo{display:inline-flex; align-items:center; min-height:44px; font-size:22px; font-weight:900; letter-spacing:.16em; line-height:1; color:var(--ink); text-decoration:none}
.v8 .sitefoot-tg{margin:14px 0 0; font-size:15px; font-weight:500; line-height:2; letter-spacing:.04em; color:var(--ink2)}
.v8 .sitefoot-cols{display:flex; gap:64px; padding-top:6px}
.v8 .sitefoot-hd{margin:0 0 8px; font-size:14px; font-weight:700; line-height:1.5; letter-spacing:.2em; color:var(--ink3)}
.v8 .sitefoot-cols ul{margin:0; padding:0; list-style:none}
.v8 .sitefoot-cols a{display:flex; align-items:center; min-height:44px; font-size:15px; font-weight:500; line-height:1.5; letter-spacing:.04em; color:var(--ink2); text-decoration:none}
.v8 .sitefoot-cols a:hover, .v8 .sitefoot-bt a:hover{color:#111; text-decoration:underline; text-underline-offset:5px}
.v8 .sitefoot-bt{
  display:flex; justify-content:space-between; align-items:center; gap:8px 24px;
  margin-top:64px; padding-top:14px; border-top:1px solid var(--hair);
  font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--ink3);
}
.v8 .sitefoot-bt p{margin:0}
.v8 .sitefoot-bt a{display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center; font-size:14px; color:var(--ink3); text-decoration:none}
@media (max-width:1023px){
  .v8 .sitefoot{padding-top:80px}
  .v8 .sitefoot-top{flex-direction:column}
  .v8 .sitefoot-brand{flex:none}
  .v8 .sitefoot-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px}
}
@media (max-width:767px){
  .v8 .sitefoot{padding:64px 0 24px}
  .v8 .sitefoot-logo{font-size:20px}
  .v8 .sitefoot-tg{font-size:14px}
  .v8 .sitefoot-cols{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 20px}
  .v8 .sitefoot-bt{flex-direction:column-reverse; align-items:flex-start; margin-top:40px}
}
@media (max-width:359px){ .v8 .sitefoot-cols{grid-template-columns:minmax(0,1fr)} }

/* 見出し・表・設問は語の途中で折らない（「プロ｜ンプト」「コンサル｜ティング」のような折れ方を防ぐ）。
   リードと本文は、最後の行に「す。」だけが残らないようにする。どちらも対応していないブラウザではふつうに折れる */
.v8 .lh-ja, .v8 .hx-ja, .v8 .prose h2, .v8 .prose h3, .v8 .prose h4,
.v8 .prose summary, .v8 .prose th, .v8 .prose td, .v8 .endcta-b,
.v8 .lh-lead, .v8 .hx-lead, .v8 .endcta-lead{word-break:auto-phrase}
.v8 .lh-lead, .v8 .hx-lead, .v8 .endcta-lead, .v8 .prose p, .v8 .prose li,
.v8 .prose details > :not(summary), .v8 .sitefoot-tg{text-wrap:pretty}

/* ═══ 現れる動き .rv（JS が効いたときだけ隠す。JS が止まっても中身は見える） ═══
   遅れ・人物・カードの影は、.rv の transition の一括指定に上書きされないよう、この後に同じ .js .v8 から書く */
.js .v8 .rv{opacity:0; transform:translateY(24px); transition:opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1)}
.js .v8 .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: no-preference){
  /* カードはホバーの影の動きも残す（影には遅れを付けない） */
  .js .v8 .card.rv{transition:opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease}
  .js .v8 .rv.d1{transition-delay:.09s} .js .v8 .rv.d2{transition-delay:.18s} .js .v8 .rv.d3{transition-delay:.27s}
  .js .v8 .rv.d4{transition-delay:.36s} .js .v8 .rv.d5{transition-delay:.45s} .js .v8 .rv.d6{transition-delay:.54s}
  .js .v8 .card.rv.d1{transition-delay:.09s,.09s,0s} .js .v8 .card.rv.d2{transition-delay:.18s,.18s,0s} .js .v8 .card.rv.d3{transition-delay:.27s,.27s,0s}
  .js .v8 .card.rv.d4{transition-delay:.36s,.36s,0s} .js .v8 .card.rv.d5{transition-delay:.45s,.45s,0s} .js .v8 .card.rv.d6{transition-delay:.54s,.54s,0s}
  /* 締めの CTA の人物は、少し深い所からゆっくり立ち上がる */
  .js .v8 .endcta-who.rv{transform:translateY(40px); transition-duration:.86s}
  .js .v8 .endcta-who.rv.in{transform:none}
}

@media (prefers-reduced-motion: reduce){
  .v8 .ground i, .v8 .btnx::before, .v8 .pring{animation:none}
  .js .v8 .rv{opacity:1; transform:none; transition:none}
  .v8 .v8menu-panel, .v8 .v8menu-bd, .v8 .sitehd-menu i{transition:none}
}

/* ═══ [一覧型 2026-09-21 追記] ヘッダーとメニュー：1023px 以下をトップと同じ形にする ═══
   トップ（front-v8.css の 1023px 以下）に合わせる。上の 1023px 以下・767px 以下の指定を、ここで上書きする。
   ・帯: ロゴを真ん中、右にメニューのボタンだけ。資料ダウンロード・無料相談の2つはメニューの中に任せる
         寸法 768〜1023px: 上 16px・高さ 64px・左右の隙間 24px・ロゴ 17px ／ 767px 以下: 上 10px・高さ 56px・左右の隙間 10px・ロゴ 16px
   ・メニュー: 画面いっぱいの明るい面（ヘッダーの下に敷き、閉じるボタンのあるヘッダーは上に残す）。行は上から順にわずかに浮かぶ
   ・1024px 以上は変えない（ロゴ・サービス・導入事例・メディア／資料ダウンロード・無料相談） */
@media (min-width:768px) and (max-width:1023px){ .v8{ --hdr-top:16px; --hdr-h:64px } }
@media (max-width:767px){ .v8{ --hdr-top:10px; --hdr-h:56px } }
@media (max-width:1023px){
  .v8 .sitehd{width:calc(100% - 48px); padding:0 10px; gap:0; justify-content:flex-end}
  .v8 .sitehd-logo{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    height:44px; min-height:44px; padding-left:.16em;   /* 字間の余りを左にも足して、見た目の真ん中にそろえる */
    font-size:17px; letter-spacing:.16em; white-space:nowrap;
  }
  .v8 .sitehd-dl, .v8 .sitehd-mt{display:none}
  .v8 .sitehd-act{margin-left:auto; gap:0}
  .v8 .sitehd-menu{background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(20,32,50,.14)}
  .v8 .sitehd-menu i{width:18px; margin-left:-9px}
  .v8 .sitehd-menu i:nth-child(1){transform:translateY(-4px)}
  .v8 .sitehd-menu i:nth-child(2){transform:translateY(4px)}

  .v8 .v8menu-bd{display:none}
  .v8 .v8menu-panel{
    left:0; right:0; top:0; bottom:0; width:auto; max-height:none; border-radius:0;
    padding:calc(var(--hdr-top) + var(--hdr-h) + 28px) max(var(--gut), calc((100% - 640px) / 2)) calc(32px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, rgba(242,243,244,.97) 0%, rgba(230,232,235,.97) 100%);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:none; transform:none; transition:opacity .32s ease;
  }
  .admin-bar.v8 .v8menu-panel{top:0; padding-top:calc(var(--hdr-top) + var(--hdr-h) + 60px)}
  .v8 .v8menu-nav{border-top:1px solid rgba(17,17,17,.13)}
  .v8 .v8menu-nav a{min-height:60px; padding:0 2px; border-bottom-color:rgba(17,17,17,.13); font-size:17px; letter-spacing:.08em}
  .v8 .v8menu-nav .go{width:34px; height:34px; box-shadow:inset 0 0 0 1px rgba(20,32,50,.18)}
  .v8 .v8menu-acts{margin-top:32px}
  .v8 .v8menu-nav a, .v8 .v8menu-acts .btnx{
    opacity:0; transform:translateY(10px);
    transition:opacity .42s cubic-bezier(.2,.7,.2,1), transform .42s cubic-bezier(.2,.7,.2,1);
  }
  .v8.menu-open .v8menu-nav a, .v8.menu-open .v8menu-acts .btnx{opacity:1; transform:none}
  .v8.menu-open .v8menu-nav a:nth-child(2){transition-delay:.03s}
  .v8.menu-open .v8menu-nav a:nth-child(3){transition-delay:.06s}
  .v8.menu-open .v8menu-nav a:nth-child(4){transition-delay:.09s}
  .v8.menu-open .v8menu-nav a:nth-child(5){transition-delay:.12s}
  .v8.menu-open .v8menu-nav a:nth-child(6){transition-delay:.15s}
  .v8.menu-open .v8menu-acts .btnx{transition-delay:.18s}
}
@media (min-width:768px) and (max-width:1023px){
  .v8 .v8menu-panel{left:0; right:0; width:auto}
  .v8 .v8menu-nav a{min-height:68px; font-size:19px}
}
@media (max-width:782px){ .admin-bar.v8 .v8menu-panel{padding-top:calc(var(--hdr-top) + var(--hdr-h) + 74px)} }
@media (max-width:767px){
  .v8 .sitehd{width:calc(100% - 20px); padding:0 6px}
  .v8 .sitehd-logo{font-size:16px; letter-spacing:.16em}
}
/* メニューの中の2つのボタン：トップ（front-v8.css の 1023px 以下の .btnx）と同じ寸法にする
   767px 以下: 高さ 56px・文字 16px・字間 .04em・丸 40px（右 8px）／ 768〜1023px: 高さ 60px・文字 17px */
@media (max-width:1023px){
  .v8 .v8menu-acts .btnx{padding:0 60px 0 26px; letter-spacing:.04em}
  .v8 .v8menu-acts .btnx .ar{right:8px; width:40px; height:40px}
}
@media (min-width:768px) and (max-width:1023px){
  .v8 .v8menu-acts .btnx{height:60px; min-height:60px; font-size:17px}
}
@media (max-width:1023px) and (prefers-reduced-motion: reduce){
  .v8 .v8menu-nav a, .v8 .v8menu-acts .btnx{transform:none; transition:none}
}

/* ═══ [フォーム担当 2026-09-21 追記] ヘッダー 1024px 以上の2つのボタンを、トップ（front-v8.css の .sitehd-ghost / .sitehd-cta）と同じ面・影・余白にする ═══
   ・帯の右の余白 12px → 14px（トップと同じ）
   ・資料ダウンロード: 半透明の平らな面 → 上から光が当たったような浅い面＋細い墨の縁＋小さな影。触れると 1px 浮く
   ・無料相談: 影を --e2 → --e1（トップと同じ軽さ）
   ・どちらも左右の余白を 26px / 52px、矢印の丸の位置を 6px / 7px（トップと同じ）
   1023px 以下は、上の [一覧型] の追記で2つとも隠しているので、ここは 1024px 以上だけに効かせる */
@media (min-width:1024px){
  .v8 .sitehd{padding:0 14px 0 32px}
  .v8 .sitehd-dl.btnx, .v8 .sitehd-mt.btnx{padding:0 52px 0 26px}
  .v8 .sitehd-dl.btnx{
    background:linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%); color:#2C3646;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(17,17,17,.16),
               0 1px 2px rgba(14,26,44,.10), 0 8px 18px -8px rgba(14,26,44,.30);
    transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .v8 .sitehd-dl.btnx:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(17,17,17,.22),
               0 2px 4px rgba(14,26,44,.12), 0 12px 22px -10px rgba(14,26,44,.34);
  }
  .v8 .sitehd-dl .ar{right:6px}
  .v8 .sitehd-mt.btnx{box-shadow:var(--e1)}
  .v8 .sitehd-mt .ar{right:7px}
}
@media (min-width:1024px) and (prefers-reduced-motion: reduce){ .v8 .sitehd-dl.btnx, .v8 .sitehd-dl.btnx:hover{transition:none; transform:none} }