/* =========================================================
Craft — v2 トップ専用スタイル（2026-08-22）
方針: 読ませない。見本と価格で語る。
style.css の後に読み込み、トップに限って上書きする。
豪華さの正体＝余白・明朝・色数の少なさ。動画/3D/派手なアニメは使わない。
========================================================= */
/* ---------- トークン上書き（v2ページ内のみ） ---------- */
.v2 {
--c-heading: #2e2a26; /* 茶→黒に寄せる。一番効く */
--c-text: #57504a;
--c-muted: #6f665e; /* was #7a716a : AA確保 */
--c-bg: #faf7f2;
--c-bg-tint: #f2ece4;
--c-primary: #96542d; /* テラコッタは少し深く、面積は5%以下に */
--c-primary-dark: #8f4f2a;
--c-rule: #e3dbd0;
--radius: 3px;
--radius-sm: 2px;
--font-serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
background: var(--c-bg);
color: var(--c-text);
}
.v2 .section { padding: clamp(88px, 10vw, 160px) 0; }
.v2 .section--tint { background: var(--c-bg-tint); }
.v2 .container { max-width: 1120px; }
/* 紙のザラつき（SVGノイズ・超薄） */
.v2::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}
.v2 main { position: relative; z-index: 1; }
/* ---------- 見出し系 ---------- */
.v2 .section-head { text-align: left; max-width: 100%; margin-bottom: 44px; }
.v2 .section-head .eyebrow {
display: block; font-family: var(--font-serif); font-size: .72rem; letter-spacing: .28em;
text-transform: uppercase; color: var(--c-primary); margin-bottom: 14px;
}
.v2 .section-head h2 {
font-family: var(--font-serif-jp); font-weight: 600; letter-spacing: .02em;
font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.3; color: var(--c-heading);
margin: 0 0 10px; display: block;
}
.v2 .section-head h2::before, .v2 .section-head h2::after { display: none !important; content: none !important; }
.v2 .section-head p { margin: 0; font-size: 1rem; color: var(--c-muted); max-width: 36em; }
/* ---------- ヒーロー ---------- */
.v2 .hero2 { padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
.v2 .hero2 .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.v2 .hero2-eyebrow { display: inline-block; font-size: .82rem; letter-spacing: .14em; color: var(--c-muted); margin-bottom: 18px; }
.v2 .hero2 h1 {
font-family: var(--font-serif-jp); font-weight: 600; letter-spacing: .01em;
font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.25; color: var(--c-heading); margin: 0 0 16px;
}
.v2 .hero2 h1 .num { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: 1.12em; letter-spacing: .01em; }
.v2 .hero2-sub { font-size: 1.05rem; color: var(--c-text); margin: 0 0 30px; }
.v2 .hero2-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.v2 .hero2-note { margin: 18px 0 0; font-size: .85rem; color: var(--c-muted); }
/* ブラウザ枠モックアップ（CSSのみ） */
.v2 .mock {
position: relative; border-radius: 8px; overflow: hidden; background: #fff;
border: 1px solid var(--c-rule);
box-shadow:
0 1px 1px rgba(40,30,20,.04), 0 2px 2px rgba(40,30,20,.04), 0 4px 4px rgba(40,30,20,.04),
0 8px 8px rgba(40,30,20,.04), 0 16px 16px rgba(40,30,20,.04), 0 32px 32px rgba(40,30,20,.05);
}
.v2 .mock::before {
content: ""; display: block; height: 28px; background: #f1ece5; border-bottom: 1px solid var(--c-rule);
background-image: radial-gradient(circle at 7px 50%, #d9cfc2 3px, transparent 3.5px), radial-gradient(circle at 21px 50%, #d9cfc2 3px, transparent 3.5px), radial-gradient(circle at 35px 50%, #d9cfc2 3px, transparent 3.5px);
background-repeat: no-repeat; background-position: 6px 0;
}
.v2 .mock img { display: block; width: 100%; height: auto; }
.v2 .hero2-visual { position: relative; }
/* ---------- 見本ギャラリー ---------- */
.v2 .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 28px; }
.v2 .tabs button {
font: inherit; font-size: .88rem; padding: 8px 16px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--c-rule); background: transparent; color: var(--c-text);
}
.v2 .tabs button[aria-pressed="true"] { background: var(--c-heading); color: #fff; border-color: var(--c-heading); }
.v2 .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.v2 .gcard { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.v2 .gcard[hidden] { display: none; }
.v2 .gcard .mock { border-radius: 0; border: 0; box-shadow: none; border-bottom: 1px solid var(--c-rule); }
.v2 .gcard .mock img { aspect-ratio: 820 / 512; object-fit: cover; object-position: top; }
.v2 .gcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.v2 .gcard-tag { font-size: .74rem; letter-spacing: .08em; color: var(--c-muted); }
.v2 .gcard h3 { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--c-heading); letter-spacing: .01em; }
.v2 .gcard-spec { font-size: .84rem; color: var(--c-muted); }
.v2 .gcard-price { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 2.2em; }
.v2 .price { font-family: var(--font-serif-jp); color: var(--c-heading); font-variant-numeric: tabular-nums; }
.v2 .price b { font-size: 1.55rem; font-weight: 600; letter-spacing: .01em; }
.v2 .price small { font-size: .82rem; color: var(--c-muted); margin-left: 2px; }
.v2 .gcard-actions { display: flex; gap: 8px; margin-top: 10px; }
.v2 .gcard-actions .btn { padding: 9px 14px; font-size: .86rem; flex: 1; justify-content: center; }
.v2 .gallery-note { margin: 22px 0 0; font-size: .86rem; color: var(--c-muted); }
.v2 .badge { display: inline-block; font-size: .7rem; letter-spacing: .1em; padding: 3px 8px; border: 1px solid var(--c-rule); border-radius: 999px; color: var(--c-muted); background: #fff; }
.v2 .gcard .badge { position: absolute; top: 38px; left: 10px; z-index: 2; }
/* ---------- 料金3枚 ---------- */
.v2 .plans2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v2 .plan2 { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 28px 26px 26px; display: flex; flex-direction: column; }
.v2 .plan2.is-main { border-color: var(--c-heading); }
.v2 .plan2 .eyebrow { font-family: var(--font-serif); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-primary); }
.v2 .plan2 h3 { margin: 8px 0 4px; font-size: 1.1rem; color: var(--c-heading); }
.v2 .plan2 .price b { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.v2 .plan2 ul { list-style: none; margin: 18px 0 22px; padding: 0; border-top: 1px solid var(--c-rule); }
.v2 .plan2 li { padding: 9px 0; border-bottom: 1px solid var(--c-rule); font-size: .92rem; display: flex; gap: 10px; }
.v2 .plan2 li::before { content: "—"; color: var(--c-primary); flex: none; }
.v2 .plan2 .btn { margin-top: auto; justify-content: center; }
/* ---------- 単発3枚 ---------- */
.v2 .odd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v2 .odd .card { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); box-shadow: none; padding: 26px 24px; }
.v2 .odd .card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--c-heading); }
.v2 .odd .card p { margin: 0 0 14px; font-size: .9rem; color: var(--c-muted); }
.v2 .odd .card .price b { font-size: 1.5rem; }
/* ---------- なぜ要るのか（数字カード＋比較表） ---------- */
.v2 .why { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.v2 .num-card { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 28px 26px; }
.v2 .num-card .big { font-family: var(--font-serif-jp); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--c-heading); font-weight: 600; }
.v2 .num-card .big small { font-size: .4em; color: var(--c-muted); margin-left: 6px; font-weight: 400; }
.v2 .num-card p { margin: 12px 0 0; font-size: .95rem; }
.v2 .num-card a { font-size: .84rem; color: var(--c-primary); }
.v2 table.cmp { width: 100%; min-width: 520px; border-collapse: collapse; background: #fff; border: 1px solid var(--c-rule); font-size: .9rem; }
.v2 table.cmp th, .v2 table.cmp td { padding: 12px 14px; border-bottom: 1px solid var(--c-rule); text-align: center; }
.v2 table.cmp thead th { background: var(--c-bg-tint); font-weight: 600; color: var(--c-heading); }
.v2 table.cmp tbody th { text-align: left; font-weight: 500; }
.v2 table.cmp .ok { color: var(--c-heading); font-weight: 700; }
.v2 table.cmp .so { color: var(--c-muted); }
.v2 table.cmp .ng { color: #b9aea2; }
.v2 .cmp-wrap { overflow-x: auto; border: 1px solid var(--c-rule); border-radius: var(--radius); }
.v2 .cmp-wrap table.cmp { border: 0; }
/* ---------- 0円の帯 ---------- */
.v2 .offer2 { background: var(--c-heading); color: #f3eee6; padding: clamp(64px, 8vw, 104px) 0; }
.v2 .offer2 .eyebrow { color: #d9a27e; font-family: var(--font-serif); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; display: block; margin-bottom: 14px; }
.v2 .offer2 h2 { font-family: var(--font-serif-jp); font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 600; line-height: 1.3; margin: 0 0 10px; color: #fff; }
.v2 .offer2 p.lead { margin: 0 0 28px; color: #cfc5b8; }
.v2 .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 30px; }
.v2 .step3 { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 18px 18px 16px; }
.v2 .step3 b { display: block; font-family: var(--font-serif); font-size: .8rem; letter-spacing: .2em; color: #d9a27e; margin-bottom: 8px; }
.v2 .step3 span { font-size: .95rem; color: #f3eee6; }
.v2 .offer2 .btn-primary { background: #fff; color: var(--c-heading); border-color: #fff; }
.v2 .offer2 .btn-primary:hover { background: #f1e9df; color: var(--c-heading); }
.v2 .offer2 .honest { margin-top: 26px; font-size: .88rem; color: #cfc5b8; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; }
.v2 .offer2 .honest b { color: #fff; font-weight: 600; }
/* ---------- 進め方 ---------- */
.v2 .flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v2 .flow3 > div { border-top: 2px solid var(--c-heading); padding-top: 14px; }
.v2 .flow3 b { font-family: var(--font-serif); letter-spacing: .2em; font-size: .78rem; color: var(--c-primary); display: block; margin-bottom: 6px; }
.v2 .flow3 h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--c-heading); }
.v2 .flow3 p { margin: 0; font-size: .9rem; color: var(--c-muted); }
/* ---------- FAQ（details） ---------- */
.v2 details { border-top: 1px solid var(--c-rule); }
.v2 details:last-of-type { border-bottom: 1px solid var(--c-rule); }
.v2 summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 600; color: var(--c-heading); position: relative; font-size: 1rem; }
.v2 summary::-webkit-details-marker { display: none; }
.v2 summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-serif); font-size: 1.3rem; color: var(--c-primary); }
.v2 details[open] summary::after { content: "−"; }
.v2 details p { margin: 0 0 18px; font-size: .94rem; color: var(--c-text); max-width: 40em; }
/* ---------- 連絡 ---------- */
.v2 .contact2 { border: 1px solid var(--c-rule); border-radius: var(--radius); background: #fff; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; }
.v2 .contact2 h2 { font-family: var(--font-serif-jp); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; margin: 0 0 8px; color: var(--c-heading); }
.v2 .contact2 p { margin: 0; color: var(--c-muted); }
.v2 .contact2 .acts { display: flex; flex-direction: column; gap: 10px; }
.v2 .contact2 .btn { justify-content: center; }
/* ---------- 細部 ---------- */
.v2 .btn { border-radius: var(--radius-sm); box-shadow: none; }
.v2 .btn-primary { background: var(--c-heading); border-color: var(--c-heading); color: #fff; }
.v2 .btn-primary:hover { background: #111; border-color: #111; }
.v2 .btn-secondary { background: transparent; color: var(--c-heading); border: 1px solid var(--c-heading); }
.v2 .btn-secondary:hover { background: var(--c-heading); color: #fff; }
.v2 .btn-line { border-radius: var(--radius-sm); }
.v2 .more { font-size: .88rem; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
.v2 .hero2 .container { grid-template-columns: 1fr; }
.v2 .hero2-visual { max-width: 560px; order: 2; }
.v2 .hero2 .hero-text { order: 1; }
.v2 .gallery, .v2 .plans2, .v2 .odd, .v2 .steps3, .v2 .flow3 { grid-template-columns: repeat(2, 1fr); }
.v2 .contact2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.v2 .gallery, .v2 .plans2, .v2 .odd, .v2 .steps3, .v2 .flow3, .v2 .why { grid-template-columns: 1fr; }
.v2 .hero2 h1 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
.v2 .tabs { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
.v2 .tabs button { white-space: nowrap; flex: none; }
.v2 .section-head h2 { flex-wrap: wrap; max-width: 100%; }
.v2 .btn { white-space: normal; }
}
/* ===== v2 追補（2026-08-23）既存パーツを v2 の文法に揃える ===== */
/* 1. トークン統一：ヘッダー/フッター/ナビが拾う色・影・角丸を本文と揃える */
.v2 {
--c-logo: #2e2a26;
--c-white: #fff;
--c-border: #e3dbd0;
--c-border-strong: #e3dbd0;
--c-border-tint: #e3dbd0;
--c-primary-soft: #f2ece4;
--shadow-sm: none;
--shadow-md: 0 12px 28px rgba(40,30,20,.10);
--radius: 4px;
--radius-sm: 4px;
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
/* フォント A案：Zen Kaku Gothic New（本文）＋ Zen Old Mincho（見出し・価格の単位） */
--font-sans: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
--font-serif-jp: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
font-family: var(--font-sans);
line-height: 1.75;
}
.v2 .gcard h3, .v2 .plan2 h3, .v2 .odd .card h3, .v2 .flow3 h3, .v2 summary { font-weight: 500; }
/* 2. ヘッダー */
.v2 .site-header { background: rgba(250,247,242,.88); border-bottom-color: var(--c-rule); }
.v2 .brand { color: var(--c-heading); }
.v2 .nav a { font-weight: 500; }
.v2 .nav a::after { height: 1px; border-radius: 0; background: var(--c-heading); }
.v2 .nav a[aria-current="page"] { color: var(--c-heading); }
.v2 .header-cta { padding: 10px 18px; font-size: .88rem; }
.v2 .lang-switch { border: 1px solid var(--c-rule); background: transparent; padding: 2px; }
.v2 .lang-btn { font-weight: 500; color: var(--c-muted); }
.v2 .lang-btn.is-active { background: var(--c-heading); color: #fff; }
.v2 .nav-toggle { border-radius: var(--radius); border-color: var(--c-rule); }
/* 3. ボタン階層を1本化 */
.v2 .btn { border-width: 1px; border-radius: var(--radius); box-shadow: none; font-weight: 500; letter-spacing: .04em; }
.v2 .btn-primary { background: var(--c-heading); border-color: var(--c-heading); color: #fff; }
.v2 .btn-primary:hover { background: #141210; border-color: #141210; }
.v2 .btn-secondary { background: transparent; color: var(--c-heading); border-color: var(--c-heading); }
.v2 .btn-secondary:hover { background: var(--c-heading); color: #fff; }
.v2 .btn-line { background: var(--c-heading); border-color: var(--c-heading); color: #fff; box-shadow: none; }
.v2 .btn-line:hover { background: #141210; }
.v2 .btn-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #06c755; flex: none; }
.v2 .offer2 .btn-primary { background: #fff; border-color: #fff; color: var(--c-heading); }
.v2 .offer2 .btn-primary:hover { background: #f1e9df; border-color: #f1e9df; }
.v2 .offer2 .btn-secondary { color: #fff; border-color: rgba(255,255,255,.55); }
.v2 .offer2 .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
/* 4. 浮遊CTA：角4px・黒・無彩影。LINEだけ公式グリーン。PC幅ではLINEのみ */
.v2 .float-cta { border-radius: var(--radius); background: var(--c-heading); box-shadow: 0 6px 18px rgba(40,30,20,.18); font-weight: 500; letter-spacing: .04em; padding: 12px 18px; }
.v2 .float-cta:hover { background: #141210; transform: none; }
.v2 .float-cta.is-line { background: #04853a; color: #fff; box-shadow: 0 6px 18px rgba(40,30,20,.18); }
.v2 .float-cta.is-line:hover { background: #036e30; color: #fff; }
@media (min-width: 1101px) { .v2 .float-cta:not(.is-line) { display: none; } }
/* 5. v2内の不整合 */
.v2 .mock { border-radius: var(--radius); }
.v2 .hero2-visual img { border-radius: 0; filter: none; }
.v2 .gcard-price .gcard-spec { font-style: normal; }
.v2 table.cmp .ng { color: var(--c-muted); }
.v2 .hero2 h1 .num, .v2 .price b, .v2 .num-card .big { font-family: var(--font-serif); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.v2 .num-card .big small { font-family: var(--font-serif-jp); font-weight: 400; }
.v2 .price small { font-family: var(--font-serif-jp); }
.v2 .hero2-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--c-primary); letter-spacing: .12em; }
.v2 .hero2-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-primary); }
/* 6. ギャラリーのボタン：主アクションは1本、相談はテキストリンク */
.v2 .gcard-actions { justify-content: space-between; align-items: center; gap: var(--s2); }
.v2 .gcard-actions .btn { flex: 0 0 auto; }
.v2 .gcard-actions .more { font-size: .86rem; white-space: nowrap; }
/* 7. 余白を8px刻みに */
.v2 .section { padding: clamp(80px, 9vw, 128px) 0; }
.v2 .hero2 { padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 96px); }
.v2 .section-head { margin-bottom: var(--s5); }
.v2 .section-head .eyebrow { margin-bottom: var(--s2); }
.v2 .section-head h2 { margin-bottom: var(--s1); }
.v2 .hero2-eyebrow { margin-bottom: var(--s2); }
.v2 .hero2 h1 { margin-bottom: var(--s2); }
.v2 .hero2-sub { margin-bottom: var(--s4); }
.v2 .hero2-actions { gap: var(--s2); }
.v2 .hero2-note { margin-top: var(--s2); }
.v2 .tabs { gap: var(--s1); margin-bottom: var(--s4); }
.v2 .gallery { gap: var(--s4) var(--s3); }
.v2 .gcard-body { padding: var(--s3); gap: var(--s1); }
.v2 .gcard-actions { margin-top: var(--s2); }
.v2 .gallery-note { margin-top: var(--s3); }
.v2 .plans2, .v2 .odd, .v2 .why, .v2 .flow3 { gap: var(--s3); }
.v2 .plan2 { padding: var(--s4) var(--s3); }
.v2 .plan2 ul { margin: var(--s3) 0; }
.v2 .odd .card, .v2 .num-card { padding: var(--s4) var(--s3); }
.v2 .why { margin-bottom: var(--s4); }
.v2 .steps3 { gap: var(--s2); margin-bottom: var(--s4); }
.v2 .step3 { padding: var(--s2); }
.v2 .offer2 { padding: clamp(64px, 8vw, 112px) 0; }
.v2 .offer2 p.lead { margin-bottom: var(--s4); }
.v2 .offer2 .honest { margin-top: var(--s4); padding-top: var(--s2); }
.v2 .contact2 { gap: var(--s4); }
/* 8. ヒーロー：HP＋Webアプリ＋ゲームの3枚重ね（初見で"HPだけじゃない"が伝わる） */
.v2 .hero2-stack { position: relative; aspect-ratio: 6 / 5; }
.v2 .hero2-stack .mock { position: absolute; margin: 0; }
.v2 .hero2-stack .mock img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.v2 .mock--hp { left: 0; top: 14%; width: 74%; z-index: 2; }
.v2 .mock--app { right: 0; top: 0; width: 50%; z-index: 1; }
.v2 .mock--game { right: 4%; bottom: 0; width: 46%; z-index: 3; }
.v2 .hero2-stack .badge { position: absolute; left: 10px; bottom: 10px; }
@media (max-width: 640px) { .v2 .hero2-stack { aspect-ratio: 4 / 3; } .v2 .hero2-stack .badge { font-size: .64rem; padding: 2px 6px; } }
/* 9. モニター価格の注記（Plan 01） */
.v2 .plan2-note { margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--c-rule); font-size: .84rem; color: var(--c-muted); line-height: 1.6; }
.v2 .plan2-note b { color: var(--c-heading); font-weight: 600; }
/* 10. 仕上げ：アンカー着地をヘッダー分ずらす／横並びカードの価格を下端に揃える */
.v2 section[id], .v2 .offer2[id] { scroll-margin-top: 88px; }
.v2 .odd .card { display: flex; flex-direction: column; }
.v2 .odd .card .price { margin-top: auto; }
/* 11. ヒーローの安心バッジ帯（お見積り無料／試作デモ無料／買い切り） */
.v2 .hero2-spec { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); }
.v2 .hero2-spec li { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.v2 .hero2-spec small { font-size: .74rem; letter-spacing: .08em; color: var(--c-muted); }
.v2 .hero2-spec b { font-family: var(--font-serif-jp); font-weight: 600; font-size: 1.12rem; color: var(--c-heading); letter-spacing: .02em; }
.v2 .hero2-spec li:nth-child(-n+2) b { color: var(--c-primary); }
@media (max-width: 640px) { .v2 .hero2-spec { gap: var(--s2); } .v2 .hero2-spec li { min-width: 40%; } }
/* 12. ヒーロー見出し：PCで3行に収める */
.v2 .hero2 h1 { font-size: clamp(2rem, 4.1vw, 2.85rem); }
/* 13. ヒーローのコラージュ：Webアプリ（Faunaut）を最前面・最大に。3枚とも隠れずに見える配置 */
.v2 .hero2-stack { aspect-ratio: 6 / 5; }
.v2 .mock--hp { left: 0; top: 0; width: 58%; z-index: 1; }
.v2 .mock--game { left: 3%; bottom: 0; width: 50%; z-index: 2; right: auto; }
.v2 .mock--app { right: 0; top: 17%; width: 64%; z-index: 3; }
@media (max-width: 640px) {
.v2 .hero2-stack { aspect-ratio: 5 / 4; }
.v2 .mock--hp { width: 60%; }
.v2 .mock--game { width: 52%; }
.v2 .mock--app { width: 66%; top: 18%; }
}
/* 14. 重なり順：ホームページを最前面に（構図はそのまま） */
.v2 .mock--hp { z-index: 3; }
.v2 .mock--app { z-index: 2; }
.v2 .mock--game { z-index: 1; }
/* ===== 15. サイト全体（サブページ）向け（2026-08-23） =====
works / pricing / contact / offer / blog / blog配下10本 / demo / legal / privacy / 404 が使う
style.css 専用部品を body.v2 配下で v2 の文法へ上書きする（style.css 本体は触らない）。
文法: 見出し黒(--c-heading)＋Zen Old Mincho 600 / 本文 Zen Kaku Gothic New / 数字 Playfair 700 lining
面は白＋1px罫線(--c-rule)＋角4px＋影なし・hoverで浮かない
テラコッタ(--c-primary)は eyebrow・リンク・小マーカーのみ / 葉っぱ装飾なし / 左寄せ / 余白は --s1..--s8
※ セレクタはすべて .v2 前置。トップで使うクラス（.price/.btn/.section-head/.gallery-note/.eyebrow 等）は
ここでは親クラス付き（.feature .price / .panel .price / .page-head .eyebrow）でしか触らない。 */
/* ---------- 15-0 トークン・共通 ---------- */
.v2 { --leaf: none; --c-rule-strong: #cbbfb0; } /* 葉っぱSVGを無効化／フォーム枠線用の濃い罫線 */
.v2 .notice-bar { display: none; }
.v2 .skip-link { background: var(--c-heading); border-radius: 0 0 var(--radius) var(--radius); font-weight: 500; }
/* アイコンタイル（ピーチ地＋線画）・イラストはトップに無いので使わない */
.v2 .card-icon, .v2 .plan-icon, .v2 .flow-icon, .v2 .ii-icon, .v2 .col-title .ti, .v2 .demo-feature-ic,
.v2 .ind-icon, .v2 .cta-band-illust, .v2 .contact-illust { display: none; }
/* 白カード共通：白・1px罫線・角4・影なし */
.v2 .work-card, .v2 .plan, .v2 .case-card, .v2 .post-card, .v2 .panel, .v2 .form-card, .v2 .est-group,
.v2 .est-result, .v2 .booking, .v2 .demo-feature, .v2 .pickup, .v2 .offer-prices, .v2 .cards .card,
.v2 .map-embed, .v2 .table-wrap, .v2 .legal-table, .v2 .article-cta {
background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); box-shadow: none;
}
/* hover で浮かない（罫線が黒くなるだけ） */
.v2 .work-card:hover, .v2 .plan:hover, .v2 .plan--featured:hover, .v2 .case-card:hover,
.v2 .post-card:hover, .v2 .cards .card:hover { transform: none; box-shadow: none; border-color: var(--c-heading); }
/* 本文リンク（style.css は a{color:inherit} で見えない）＝ .more の文法 */
.v2 .article p a, .v2 .article-back, .v2 .legal-table a, .v2 .legal-foot a, .v2 .panel a, .v2 .feature p a,
.v2 .section-head p a, .v2 .gallery-note a:not(.more), .v2 .demo-note a, .v2 .cases-demo-link a, .v2 .opt-demo-link a,
.v2 .form-mail a, .v2 .form-check a, .v2 .error-links a, .v2 .offer-home-link a, .v2 .post-more, .v2 .work-more {
color: var(--c-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
.v2 .work-card:hover .work-more, .v2 .post-card:hover .post-more, .v2 .cards .card:hover > .work-more,
.v2 .article-back:hover, .v2 .cases-demo-link a:hover, .v2 .opt-demo-link a:hover { color: var(--c-primary-dark); }
/* 明朝見出しの拡張（トップの section-head h2 と同じ文法） */
.v2 .page-head h1, .v2 .subhead, .v2 .story-block > h2, .v2 .article h2, .v2 .article-cta h2,
.v2 .cta-band-body h2, .v2 .col-title, .v2 .error-page h1, .v2 .hero--offer h1 {
font-family: var(--font-serif-jp); font-weight: 600; letter-spacing: .02em; color: var(--c-heading);
}
/* カード内タイトルは 500（トップの .gcard h3 / .plan2 h3 と同じ） */
.v2 .plan h3, .v2 .work-card h3, .v2 .case-card > h3, .v2 .feature h3, .v2 .feature h4, .v2 .info-item h3,
.v2 .info-item h4, .v2 .post-card h2, .v2 .post-card h3, .v2 .flow-step h3, .v2 .flow-step h4,
.v2 .cards .card h3, .v2 .pickup h3 { font-weight: 500; color: var(--c-heading); }
/* ---------- 15-1 下層ヘッダー .page-head（左寄せ・グラデ廃止・葉っぱ除去） ---------- */
.v2 .page-head { background: var(--c-bg); text-align: left; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.v2 .page-head .breadcrumb { font-size: .78rem; letter-spacing: .06em; color: var(--c-muted); margin: 0 0 var(--s2); }
.v2 .page-head .eyebrow {
display: block; font-family: var(--font-serif); font-size: .72rem; letter-spacing: .28em;
text-transform: uppercase; color: var(--c-primary); margin-bottom: var(--s2);
}
.v2 .page-head h1 { display: block; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.3; margin: 0 0 var(--s2); }
.v2 .page-head h1::before, .v2 .page-head h1::after { display: none !important; content: none !important; }
.v2 .page-head p { margin: 0; max-width: 40em; color: var(--c-muted); font-size: 1rem; }
.v2 .subhead { text-align: left; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.3; margin: 0 0 var(--s3); }
.v2 .samples-wrap { margin-top: var(--s7); }
.v2 .samples-wrap .subhead { margin-bottom: var(--s1); }
.v2 .samples-note { text-align: left; margin: 0 0 var(--s4); max-width: 40em; font-size: .95rem; color: var(--c-muted); }
.v2 .samples { max-width: none; margin: 0; gap: var(--s3); }
.v2 .demo-note {
background: transparent; border: 0; border-radius: 0; padding: 0; text-align: left;
font-size: .86rem; color: var(--c-muted); margin: 0 0 var(--s4); max-width: 48em;
}
.v2 .offer-demo-note { margin-top: var(--s4); }
.v2 .two-col { grid-template-columns: 1fr 1fr; gap: var(--s3); }
.v2 .two-col + .two-col, .v2 .plans + .two-col { margin-top: var(--s4); }
/* ---------- 15-2 works：.work-grid / .work-card（= .gallery / .gcard の文法）／.filter／.pickup ---------- */
.v2 .work-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s3); }
.v2 .work-card { overflow: hidden; }
/* ブラウザ枠バー（トップの .mock::before と同じ） */
.v2 .work-card::before {
content: ""; display: block; height: 28px; background: #f1ece5; border-bottom: 1px solid var(--c-rule);
background-image:
radial-gradient(circle at 7px 50%, #d9cfc2 3px, transparent 3.5px),
radial-gradient(circle at 21px 50%, #d9cfc2 3px, transparent 3.5px),
radial-gradient(circle at 35px 50%, #d9cfc2 3px, transparent 3.5px);
background-repeat: no-repeat; background-position: 6px 0;
}
.v2 .work-thumb { aspect-ratio: 820 / 512; border-bottom: 1px solid var(--c-rule); }
.v2 .work-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.v2 .work-tag {
display: inline-block; background: none; padding: 0; border-radius: 0; margin: 0 10px 0 0;
font-size: .74rem; font-weight: 400; letter-spacing: .08em; color: var(--c-muted);
}
.v2 .work-card h3 { margin: 0; font-size: 1.02rem; letter-spacing: .01em; }
.v2 .work-card p { margin: 0; font-size: .9rem; color: var(--c-muted); }
.v2 .work-more { margin-top: auto; padding-top: var(--s1); font-size: .86rem; align-self: flex-start; }
.v2 .cards .card > .work-more { margin-top: var(--s2); }
.v2 .filter { justify-content: flex-start; gap: var(--s1); margin-bottom: var(--s4); }
.v2 .filter button {
font-size: .88rem; font-weight: 400; padding: 8px 16px;
border: 1px solid var(--c-rule); background: transparent; color: var(--c-text);
}
.v2 .filter button:hover { border-color: var(--c-heading); color: var(--c-heading); }
.v2 .filter button.active { background: var(--c-heading); color: #fff; border-color: var(--c-heading); }
.v2 .pickup { grid-template-columns: 1.05fr 1fr; padding: var(--s3); gap: var(--s4); margin-bottom: var(--s6); }
.v2 .pickup-thumb { border-radius: var(--radius); border: 1px solid var(--c-rule); overflow: hidden; }
.v2 .pickup-badge, .v2 .pickup-badge.is-case {
background: var(--c-heading); color: #fff; box-shadow: none;
font-weight: 500; font-size: .7rem; letter-spacing: .1em; padding: 4px 12px; left: var(--s3);
}
.v2 .pickup h3 { font-size: 1.3rem; }
.v2 .pickup p { color: var(--c-muted); }
/* ---------- 15-3 pricing：.plans / .plan（= .plans2 / .plan2 の文法） ---------- */
.v2 .plans { grid-template-columns: repeat(3, 1fr); gap: var(--s3); max-width: none; margin: 0; }
.v2 .plan { text-align: left; padding: var(--s4) var(--s3); }
.v2 .plan--featured { border: 1px solid var(--c-heading); order: 0; }
.v2 .plan-badge {
left: var(--s3); transform: none; top: -12px; background: var(--c-heading); color: #fff; box-shadow: none;
font-weight: 500; font-size: .7rem; letter-spacing: .1em; padding: 4px 12px;
}
.v2 .plan h3 { font-size: 1.1rem; margin: 0 0 4px; }
.v2 .plan-desc { margin: 0 0 var(--s2); min-height: 0; font-size: .9rem; color: var(--c-muted); }
.v2 .plan-price {
font-family: var(--font-serif); font-weight: 700; font-variant-numeric: lining-nums tabular-nums;
letter-spacing: 0; font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.1; color: var(--c-heading);
}
.v2 .plan-price .unit { font-family: var(--font-serif-jp); font-weight: 400; font-size: .82rem; color: var(--c-muted); margin-left: 2px; }
.v2 .plan-tax { font-size: .8rem; color: var(--c-muted); margin: 4px 0 var(--s2); }
.v2 .plan-features { margin: 0 0 var(--s3); border-top: 1px solid var(--c-rule); }
.v2 .plan-features li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--c-rule); font-size: .92rem; }
.v2 .plan-features li::before { content: "—"; left: 0; top: 9px; color: var(--c-primary); font-weight: 400; }
.v2 .plan .btn { width: 100%; margin-top: auto; }
/* ---------- 15-4 pricing：.features / .feature（オプション4列） ---------- */
.v2 .features { grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s3); }
.v2 .feature { border-top: 1px solid var(--c-rule); padding-top: var(--s2); }
.v2 .feature h3, .v2 .feature h4 { font-size: 1rem; margin-bottom: 6px; }
.v2 .feature p { font-size: .88rem; color: var(--c-muted); }
.v2 .feature .price {
display: block; margin-top: var(--s1); font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem;
line-height: 1.2; color: var(--c-heading); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
}
.v2 .feature .price .unit { font-family: var(--font-serif-jp); font-weight: 400; font-size: .8rem; color: var(--c-muted); margin-left: 2px; }
.v2 .feature .price-free { font-family: var(--font-serif-jp); font-weight: 600; font-size: 1.1rem; color: var(--c-primary); }
.v2 .opt-demo-link, .v2 .cases-demo-link { text-align: left; }
/* ---------- 15-5 pricing：.panel（2列パネル。価格は ……
に直す前提） ---------- */
.v2 .panel { padding: var(--s4) var(--s3); }
.v2 .panel h3 { text-align: left; font-size: 1.1rem; font-weight: 600; color: var(--c-heading); margin: 0 0 var(--s2); }
.v2 .panel p { font-size: .92rem; }
.v2 .panel p + p { margin-top: var(--s2); } /* インライン margin-top を外したぶん */
.v2 .panel .price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.v2 .panel .price b { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.v2 .panel .price .unit { font-family: var(--font-serif-jp); font-weight: 400; font-size: .82rem; color: var(--c-muted); } /* .unit が残った場合の保険 */
.v2 .panel .plan-tax { margin: 0 0 var(--s2); }
.v2 .panel .plan-features { margin: var(--s1) 0 var(--s2); }
.v2 .panel .btn { margin-top: var(--s2); }
.v2 .panel .gallery-note { margin-top: var(--s3); }
/* ---------- 15-6 比較表 .compare / .table-wrap / 特商法 .legal-table（= table.cmp の文法） ---------- */
.v2 .table-wrap { border: 1px solid var(--c-rule); border-radius: var(--radius); }
.v2 .table-wrap .legal-table, .v2 .table-wrap .compare { border: 0; border-radius: 0; box-shadow: none; }
.v2 .compare { background: #fff; font-size: .9rem; }
.v2 .compare th, .v2 .compare td { padding: 12px 14px; border-bottom: 1px solid var(--c-rule); }
.v2 .compare thead th { background: var(--c-bg-tint); font-weight: 600; color: var(--c-heading); }
.v2 .compare tbody th { background: transparent; color: var(--c-text); font-weight: 500; }
.v2 .compare .yes { color: var(--c-heading); font-weight: 700; font-size: 1rem; }
.v2 .compare .no, .v2 .compare .opt { color: var(--c-muted); }
.v2 .legal-table th, .v2 .legal-table td { border-bottom-color: var(--c-rule); }
.v2 .legal-table th { background: var(--c-bg-tint); color: var(--c-heading); font-weight: 600; }
.v2 .legal-note, .v2 .legal-foot { color: var(--c-muted); }
/* ---------- 15-7 流れ .flow / .flow-step / .flow-num（= .flow3 の文法：上2px黒線＋Playfair番号。丸・矢印・アイコン廃止） ---------- */
.v2 .flow { gap: var(--s3); max-width: none; margin: 0; }
.v2 .flow--4 { grid-template-columns: repeat(4, 1fr); }
.v2 .flow--3 { grid-template-columns: repeat(3, 1fr); }
.v2 .flow-step { text-align: left; border-top: 2px solid var(--c-heading); padding-top: var(--s2); }
.v2 .flow-step::after, .v2 .flow--arrow .flow-step::after, .v2 .panel .flow-step::after { display: none !important; content: none !important; }
.v2 .flow-num {
width: auto; height: auto; margin: 0 0 6px; border-radius: 0; background: none; box-shadow: none; display: block;
color: var(--c-primary); font-family: var(--font-serif); font-weight: 700; font-size: .78rem; letter-spacing: .2em; line-height: 1;
}
.v2 .flow-step h3, .v2 .flow-step h4 { font-size: 1.02rem; margin: 0 0 4px; }
.v2 .flow-step p { font-size: .9rem; color: var(--c-muted); }
.v2 .panel .flow { grid-template-columns: repeat(5, 1fr); gap: var(--s2); max-width: none; }
.v2 .panel .flow-num { font-size: .72rem; margin-bottom: 4px; }
.v2 .panel .flow-step h4 { font-size: .86rem; }
.v2 .offer-flow-note { text-align: left; font-weight: 500; color: var(--c-heading); margin-top: var(--s3); }
/* ---------- 15-8 FAQ .faq-item（A案：マークアップ維持。B案で に置換したらこのブロックは無害） ---------- */
.v2 .faq { grid-template-columns: 1fr; gap: 0; }
.v2 .faq-item { border: 0; border-top: 1px solid var(--c-rule); border-radius: 0; background: transparent; }
.v2 .faq-item:last-child { border-bottom: 1px solid var(--c-rule); }
.v2 .faq-item.open, .v2 .faq-item:not(.open):hover { border-color: var(--c-rule); }
.v2 .faq-q { padding: 18px 36px 18px 0; font-weight: 500; font-size: 1rem; color: var(--c-heading); position: relative; gap: 0; }
.v2 .faq-q .q-badge { display: none; }
.v2 .faq-q .chev { position: absolute; right: 4px; top: 50%; width: auto; height: auto; margin: 0; border: 0; transform: translateY(-50%); }
.v2 .faq-q .chev::after { content: "+"; font-family: var(--font-serif); font-size: 1.3rem; line-height: 1; color: var(--c-primary); }
.v2 .faq-item.open .faq-q .chev { transform: translateY(-50%); margin: 0; }
.v2 .faq-item.open .faq-q .chev::after { content: "−"; }
.v2 .faq-a-inner { padding: 0 0 18px; font-size: .94rem; color: var(--c-text); max-width: 40em; }
/* ---------- 15-9 .cta-band フォールバック（.contact2 に置換しなかった場合のみ：黒帯＝ .offer2 の文法） ---------- */
.v2 .cta-band { background: var(--c-heading); color: #f3eee6; }
.v2 .cta-band .container { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); gap: var(--s4); }
.v2 .cta-band-body h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--s1); }
.v2 .cta-band-body p { color: #cfc5b8; }
.v2 .cta-band .btn-primary, .v2 .cta-band .btn-line { background: #fff; color: var(--c-heading); border-color: #fff; box-shadow: none; }
.v2 .cta-band .btn-primary:hover, .v2 .cta-band .btn-line:hover { background: #f1e9df; border-color: #f1e9df; }
.v2 .cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.v2 .cta-band .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.v2 .cta-band .cta-reassure { color: #cfc5b8; }
.v2 .cta-band .cta-reassure::before { color: #d9a27e; }
.v2 .cta-band-action { display: flex; flex-direction: column; gap: var(--s2); }
.v2 .cta-reassure { text-align: left; }
.v2 .cta-reassure::before { color: var(--c-primary); font-weight: 400; }
/* ---------- 15-10 想定シナリオ .cases / .case-card（works, offer） ---------- */
.v2 .cases { grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: 0; }
.v2 .case-card { padding: var(--s4) var(--s3); }
.v2 .case-head { gap: var(--s2); margin-bottom: var(--s2); }
.v2 .case-flag {
font-size: .7rem; font-weight: 400; letter-spacing: .1em; color: var(--c-muted);
background: #fff; border: 1px solid var(--c-rule); border-radius: 999px; padding: 3px 8px;
}
.v2 .case-card > h3 { font-size: 1.1rem; margin-bottom: var(--s1); }
.v2 .case-setting { border-left: 2px solid var(--c-rule); padding-left: 10px; color: var(--c-muted); }
.v2 .case-block { margin-top: var(--s3); }
.v2 .case-k {
background: none; padding: 0; border-radius: 0; margin-bottom: var(--s1);
font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--c-heading);
}
.v2 .case-result { border-top-color: var(--c-rule); }
.v2 .case-stat { background: var(--c-bg-tint); border-radius: var(--radius); }
.v2 .cs-label { font-weight: 500; }
.v2 .cs-flow b { font-family: var(--font-serif-jp); font-weight: 600; color: var(--c-heading); font-variant-numeric: lining-nums tabular-nums; }
.v2 .cs-arrow { color: var(--c-muted); }
.v2 .case-more { text-align: left; margin-top: var(--s4); }
.v2 .case-more-lead { font-weight: 600; }
.v2 .case-chips { justify-content: flex-start; gap: var(--s1); }
.v2 .case-chips li { background: transparent; border: 1px solid var(--c-rule); border-radius: 999px; padding: 8px 16px; font-size: .88rem; }
.v2 .cases-cta { text-align: left; margin-top: var(--s4); }
.v2 .cases-cta p { font-weight: 500; color: var(--c-text); }
.v2 .cases-cta .btn { margin: 0 var(--s1) var(--s1) 0; }
.v2 .cases-demo-link { margin-top: var(--s2); }
/* ---------- 15-11 works：.cards.cards--3 .card（ミニゲーム3枚）／.industries（対応業種＝丸チップ） ---------- */
.v2 .cards { gap: var(--s3); }
.v2 .cards--3 { grid-template-columns: repeat(3, 1fr); }
.v2 .cards .card { padding: var(--s4) var(--s3); }
.v2 .cards .card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.v2 .cards .card p { font-size: .9rem; color: var(--c-muted); }
.v2 .industries { justify-content: flex-start; column-gap: var(--s1); margin-bottom: calc(-1 * var(--s1)); }
.v2 .industries .brk { display: none !important; }
.v2 .industry {
width: auto; margin-bottom: var(--s1); padding: 8px 16px; background: transparent;
border: 1px solid var(--c-rule); border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--c-text);
}
/* ---------- 15-12 お問い合わせ .form-card / .field / .info-item / .assure / .map-embed ---------- */
.v2 .contact-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s5); }
.v2 .form-card { padding: var(--s4); }
.v2 .col-title { font-size: 1.35rem; gap: 0; margin: 0 0 var(--s1); }
.v2 .col-title.mb { margin-bottom: var(--s3); }
.v2 .form-card > p.lead { margin: 0 0 var(--s3); font-size: .9rem; color: var(--c-muted); }
.v2 .field { margin-bottom: var(--s3); }
.v2 .field label { font-weight: 500; color: var(--c-heading); margin-bottom: var(--s1); }
.v2 .tag-req, .v2 .tag-opt { font-size: .66rem; font-weight: 500; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--radius); margin-left: var(--s1); }
.v2 .tag-req { background: var(--c-heading); color: #fff; }
.v2 .tag-opt { background: transparent; color: var(--c-muted); border: 1px solid var(--c-rule); }
.v2 .field input, .v2 .field textarea, .v2 .field select {
border: 1px solid var(--c-rule-strong); border-radius: var(--radius); background: #fff; color: var(--c-heading);
}
.v2 .field input::placeholder, .v2 .field textarea::placeholder { color: #767066; }
.v2 .field input:focus, .v2 .field textarea:focus, .v2 .field select:focus {
border-color: var(--c-heading); background-color: #fff; box-shadow: 0 0 0 3px rgba(46,42,38,.10);
}
.v2 .form-check { color: var(--c-text); }
.v2 .form-note, .v2 .form-alt, .v2 .form-mail { color: var(--c-muted); }
.v2 .form-alt::before, .v2 .form-alt::after { background: var(--c-rule); }
.v2 .form-status { border-radius: var(--radius); background: var(--c-bg-tint); border: 1px solid var(--c-rule); color: var(--c-heading); }
.v2 .form-status.is-success { background: #eef5ef; border-color: #cfe0d2; color: #1b5e36; }
.v2 .form-status.is-error { background: #fbeeee; border-color: #ecd0d0; color: #b3261e; }
.v2 .info-item { gap: var(--s2); padding: var(--s2) 0; border-bottom-color: var(--c-rule); }
.v2 .info-item h3, .v2 .info-item h4 { font-size: .98rem; }
.v2 .info-item p { color: var(--c-muted); }
.v2 .assure { background: var(--c-bg-tint); border: 1px solid var(--c-rule); border-radius: var(--radius); padding: var(--s3); margin-top: var(--s3); }
.v2 .assure h3 { text-align: left; color: var(--c-heading); font-weight: 600; font-size: 1rem; margin-bottom: var(--s2); }
.v2 .assure li { padding: 6px 0 6px 22px; color: var(--c-text); }
.v2 .assure li::before { content: "—"; left: 0; color: var(--c-primary); font-weight: 400; }
.v2 .map-embed { margin-top: var(--s3); overflow: hidden; }
/* ---------- 15-13 料金シミュレーター .est-*（JSが触るので構造は不変：色・角丸・罫線だけ） ---------- */
.v2 .estimator { grid-template-columns: 1fr 320px; gap: var(--s4); }
.v2 .est-form { gap: var(--s2); }
.v2 .est-group { padding: var(--s3); }
.v2 .est-group legend { font-weight: 600; font-size: 1rem; color: var(--c-heading); }
.v2 .est-step { background: var(--c-heading); color: #fff; font-weight: 500; font-size: .8rem; }
.v2 .est-pick { border: 1px solid var(--c-rule); border-radius: var(--radius); }
.v2 .est-pick:hover { border-color: var(--c-heading); }
.v2 .est-pick:has(input:checked) { border-color: var(--c-heading); background: var(--c-bg-tint); box-shadow: 0 0 0 1px var(--c-heading) inset; }
.v2 .est-pick:has(input:focus-visible) { outline-color: var(--c-heading); }
.v2 .est-pick-body b { font-weight: 500; }
.v2 .est-pick-body em { color: var(--c-heading); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.v2 .est-free-tag { color: var(--c-primary); font-weight: 500; }
.v2 .est-step-btn, .v2 #est-pages { border: 1px solid var(--c-rule-strong); border-radius: var(--radius); background: #fff; color: var(--c-heading); }
.v2 .est-step-btn:hover { border-color: var(--c-heading); background: var(--c-bg-tint); }
.v2 #est-pages:focus { outline: none; border-color: var(--c-heading); box-shadow: 0 0 0 3px rgba(46,42,38,.10); }
.v2 .est-opt-hint { background: var(--c-bg-tint); color: var(--c-text); border-radius: var(--radius); font-weight: 400; }
.v2 .est-result { border: 1px solid var(--c-heading); padding: var(--s4) var(--s3); text-align: left; }
.v2 .est-result-lead { font-weight: 500; }
.v2 .est-total { justify-content: flex-start; }
.v2 .est-total #est-total { color: var(--c-heading); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.v2 .est-yen { font-family: var(--font-serif-jp); font-weight: 400; font-size: .9rem; color: var(--c-muted); }
.v2 .est-timeline { background: transparent; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 4px 10px; margin: var(--s2) 0 0; }
.v2 .est-timeline b, .v2 .est-monthly b { color: var(--c-heading); }
.v2 .est-monthly b { font-family: var(--font-serif-jp); font-weight: 600; }
.v2 .est-breakdown { border-top-color: var(--c-rule); }
.v2 .est-save, .v2 .est-campaign { background: var(--c-bg-tint); color: var(--c-text); } /* 現在未使用・保険 */
/* ---------- 15-14 ブログ .post-card / .article-*（読みやすさ優先：本文 1.8 行間・最大幅 40em・見出し明朝） ---------- */
.v2 .blog-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s3); }
.v2 .post-card { padding: var(--s3); }
.v2 .post-meta { gap: var(--s2); margin-bottom: var(--s2); }
.v2 .post-cat { background: none; padding: 0; border-radius: 0; font-size: .74rem; font-weight: 400; letter-spacing: .08em; color: var(--c-muted); }
.v2 .post-date { font-family: var(--font-sans); color: var(--c-muted); font-size: .8rem; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.v2 .post-card h2, .v2 .post-card h3 { font-size: 1.05rem; line-height: 1.55; margin: 0 0 var(--s1); }
.v2 .post-card p { font-size: .88rem; color: var(--c-muted); margin: 0 0 var(--s2); }
.v2 .post-more { font-size: .86rem; }
.v2 .article { max-width: 40em; margin: 0; }
.v2 .article-meta { margin-bottom: var(--s3); }
.v2 .article-lead { font-size: 1.05rem; line-height: 1.8; color: var(--c-text); margin: 0 0 var(--s3); }
.v2 .article h2 { border-left: 0; padding-left: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.4; margin: var(--s6) 0 var(--s2); }
.v2 .article h3 { color: var(--c-heading); font-family: var(--font-serif-jp); font-size: 1.08rem; font-weight: 600; letter-spacing: .02em; margin: var(--s4) 0 var(--s1); }
.v2 .article p { font-size: 1rem; line-height: 1.8; margin: 0 0 var(--s3); }
.v2 .article ul { margin: 0 0 var(--s3); }
.v2 .article ul li { padding: 6px 0 6px 22px; line-height: 1.8; }
.v2 .article ul li::before { content: "—"; left: 0; color: var(--c-primary); font-weight: 400; }
.v2 .article-cta { text-align: left; padding: var(--s4); margin-top: var(--s6); }
.v2 .article-cta h2 { border: 0; padding: 0; margin: 0 0 var(--s1); font-size: 1.35rem; }
.v2 .article-cta p { color: var(--c-muted); font-size: .92rem; margin: 0 0 var(--s3); }
.v2 .article-cta .btn { margin: 0 var(--s1) var(--s1) 0; }
.v2 .article-back { display: inline-block; margin-top: var(--s4); font-size: .9rem; }
/* ---------- 15-15 機能デモ .booking / .bk-* / .lang-toggle / .demo-feature ---------- */
.v2 .booking { padding: var(--s4) var(--s3); margin-top: 0; }
.v2 .bk-label { font-weight: 600; color: var(--c-heading); }
.v2 .bk-chip { border: 1px solid var(--c-rule); background: transparent; color: var(--c-text); font-weight: 400; font-size: .88rem; padding: 8px 16px; }
.v2 .bk-chip:hover:not(:disabled) { border-color: var(--c-heading); }
.v2 .bk-chip.is-sel { background: var(--c-heading); border-color: var(--c-heading); color: #fff; box-shadow: none; }
.v2 .bk-chip.is-full { background: var(--c-bg-tint); color: var(--c-muted); border-style: solid; }
.v2 .bk-summary { background: var(--c-bg-tint); border-radius: var(--radius); font-weight: 500; }
.v2 .bk-sum-label { background: var(--c-heading); color: #fff; border-radius: var(--radius); font-weight: 500; letter-spacing: .06em; }
.v2 .bk-ok { color: var(--c-heading); }
.v2 .lang-toggle { border: 1px solid var(--c-rule); background: transparent; padding: 2px; }
.v2 .lang-toggle .lang-btn { font-weight: 500; }
.v2 .demo-feature { padding: var(--s3); margin: 0; max-width: 640px; }
.v2 .demo-feature p { margin-bottom: var(--s2); }
/* ---------- 15-16 offer.html：.hero--offer / .hero-eyebrow / .story / .offer-*（左寄せ・葉→線） ---------- */
.v2 .hero--offer { background: var(--c-bg); }
.v2 .hero--offer .container { text-align: left; max-width: 1120px; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(48px, 6vw, 96px); }
.v2 .hero--offer .hero-text p { margin-inline: 0; }
.v2 .hero--offer .hero-actions { justify-content: flex-start; gap: var(--s2); margin-top: var(--s4); }
.v2 .hero--offer .hero-actions .btn { min-width: 0; }
.v2 .hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px; background: none; padding: 0; border-radius: 0;
font-size: .82rem; font-weight: 400; letter-spacing: .12em; color: var(--c-primary); margin-bottom: var(--s2);
}
.v2 .hero-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-primary); }
.v2 .hero--offer h1 { font-size: clamp(2rem, 4.1vw, 2.85rem); line-height: 1.25; margin: 0 0 var(--s2); }
.v2 .hero--offer .hero-text > p { font-size: 1.05rem; color: var(--c-text); max-width: 40em; margin: 0; }
.v2 .hero--offer p.offer-cta-sub, .v2 .hero--offer p.offer-sign { margin-left: 0; color: var(--c-muted); }
.v2 .hero--offer p.offer-cta-sub { margin-top: var(--s2); font-size: .88rem; }
.v2 .hero--offer p.offer-sign { margin-top: var(--s3); padding-top: var(--s2); border-top-color: var(--c-rule); font-size: .82rem; }
.v2 .story { padding: clamp(64px, 8vw, 112px) 0; }
.v2 .story--offer, .v2 .story--tint { background: var(--c-bg-tint); }
.v2 .story-block { margin-inline: 0; }
.v2 .story-block + .story-block { margin-top: var(--s6); }
.v2 .story-block > h2, .v2 .story--offer .story-block > h2 {
font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.35;
border-bottom: 1px solid var(--c-rule); padding-bottom: var(--s2); margin-bottom: var(--s3);
}
.v2 .story-body p { line-height: 1.9; }
.v2 .offer-prices { margin: 0; }
.v2 .offer-prices li { padding: var(--s2) var(--s3); border-bottom-color: var(--c-rule); }
.v2 .offer-prices .op-name { font-weight: 500; color: var(--c-heading); }
.v2 .offer-prices .op-price { color: var(--c-heading); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.v2 .offer-prices .op-price .unit { font-family: var(--font-serif-jp); font-weight: 400; font-size: .82rem; color: var(--c-muted); }
.v2 .offer-note { text-align: left; margin: var(--s2) 0 0; color: var(--c-muted); }
.v2 .offer-scope { margin-inline: 0; }
.v2 .offer-home-link { text-align: left; margin: var(--s4) 0 var(--s6); }
/* ---------- 15-17 404（中央寄せは例外として維持。色だけ黒化） ---------- */
.v2 .error-code { color: var(--c-heading); font-variant-numeric: lining-nums; letter-spacing: 0; }
.v2 .error-page h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.v2 .error-msg { color: var(--c-muted); }
/* ---------- 15-18（任意）情報量の多いページ用の詰めたセクション余白 ---------- */
.v2 .section--tight { padding: clamp(56px, 7vw, 88px) 0; }
/* ---------- 15-19 レスポンシブ（トップと同じ 960 / 640） ---------- */
@media (max-width: 960px) {
.v2 .work-grid, .v2 .blog-grid, .v2 .plans, .v2 .features, .v2 .cards--3,
.v2 .flow--4, .v2 .flow--3 { grid-template-columns: repeat(2, 1fr); }
.v2 .cases, .v2 .two-col, .v2 .contact-grid, .v2 .estimator, .v2 .pickup { grid-template-columns: 1fr; }
.v2 .est-result { position: static; }
.v2 .contact-grid { gap: var(--s4); }
.v2 .panel .flow { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
.v2 .work-grid, .v2 .blog-grid, .v2 .plans, .v2 .features, .v2 .cards--3,
.v2 .flow--4, .v2 .flow--3, .v2 .panel .flow { grid-template-columns: 1fr; }
.v2 .page-head h1 { font-size: clamp(1.6rem, 7vw, 2rem); }
.v2 .hero--offer h1 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
.v2 .filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.v2 .filter button { white-space: nowrap; flex: none; }
.v2 .pickup { padding: var(--s2); gap: var(--s3); }
.v2 .form-card, .v2 .panel, .v2 .case-card, .v2 .booking, .v2 .est-result, .v2 .article-cta { padding: var(--s3) var(--s2); }
.v2 .article-cta .btn { width: 100%; margin: 0 0 var(--s1); }
.v2 .industry { font-size: .84rem; padding: 7px 12px; }
}
/* ===== 16. ページ担当からの追加要望（2026-08-23） =====
works / pricing / contact+offer / demo / privacy の各担当から届いた追記分を統合。
同じセレクタは1つにまとめ、15節で既に効いているもの（.plan-desc の余白、.price small の明朝）は重複させず省いた。
方針は 15 と同じ：.v2 前置／トップ用クラス（.price/.gallery-note/.badge 等）は親クラス付きでのみ触る／黒・4px・罫線・Zen。 */
/* ---------- 16-1 works ---------- */
/* 自主制作 .gcard 内の説明文（トップの .gcard には無い要素）。p の既定余白を殺し、.gcard-body の gap に任せる */
.v2 .gcard-desc { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--c-muted); }
/* #hands-on の .case-stat 内 .price：.v2 .cs-flow b（明朝600・15-10）が後勝ちするので、数字だけ Playfair 700 に戻す
※ small（円〜）は既存 .v2 .price small（明朝・.82rem・muted）がそのまま効くため再定義しない */
.v2 .cs-flow .price { display: inline-flex; align-items: baseline; }
.v2 .cs-flow .price b { font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
/* .page-head 内のジャンプチップ見出し（.v2 .page-head p の margin:0 / muted に負けるため上書き） */
.v2 .page-head .case-more-lead { margin: 0 0 var(--s2); color: var(--c-heading); font-weight: 600; }
.v2 .page-head .case-chips a { color: var(--c-text); }
/* ---------- 16-2 pricing（.plan2 をサブページで使うための微調整） ---------- */
/* .plan-desc の余白は 15-3 の .v2 .plan-desc（margin: 0 0 var(--s2)）が既に効くので追加なし */
.v2 .plan2 .plan-tax { margin: 4px 0 0; } /* 直後の ul の margin-top(--s3) で間隔を取る。.plan2 は flex 縦並びで margin が相殺されず二重余白(16+24px)になるのを防ぐ */
.v2 .plan2 h3 .badge { vertical-align: middle; margin-left: 4px; font-family: var(--font-sans); font-weight: 400; } /* 「おすすめ」「はじめの一歩に」ピル（h3 の明朝を継がせない） */
.v2 .feature .price b { font-size: 1.3rem; } /* オプション4列の価格は小さめ（.v2 .price b の 1.55rem を上書き） */
/* ---------- 16-3 contact / offer ---------- */
/* offer.html の .contact2 内は p が2つ並ぶ（本文＋.cta-reassure）。.v2 .contact2 p の margin:0 で密着するので 8px 空ける */
.v2 .contact2 p + p { margin-top: var(--s1); }
/* ---------- 16-4 demo ---------- */
/* page-head 内の言語切替デモ（.v2 .page-head p の margin:0 で .lang-hint の上余白が 0 になるため） */
.v2 .page-head .lang-toggle { margin-top: var(--s3); }
.v2 .page-head .lang-hint { margin-top: var(--s1); font-size: .82rem; }
/* 予約デモの結果・注記を左寄せに（style.css は center。.booking 内の他要素は左寄せなので v2 の文法に合わせる） */
.v2 .bk-note, .v2 .bk-result { text-align: left; }
.v2 .bk-result .bk-handoff { align-self: flex-start; }
/* ---------- 16-5 privacy ---------- */
/* .article 内の制定日（.v2 .article p が margin / font-size で勝つため） */
.v2 .article .gallery-note { margin-top: var(--s4); font-size: .86rem; color: var(--c-muted); }
/* ===== 17. 検証担当の修正（2026-08-23） =====
全ページ描画チェックで見つかった2点を最小限で直す。既存1〜16節は不変更。 */
/* 17-1 pricing：.panel 内のボタン。15節の本文リンク規則 `.v2 .panel a`（テラコッタ＋下線＋500）が
.btn-primary/.btn-secondary より特異度で勝ち、黒ボタンの文字がテラコッタ＋下線になっていた。ボタンはトップと同じ文法に戻す */
.v2 .panel a.btn { text-decoration: none; font-weight: 500; }
.v2 .panel a.btn-primary { color: #fff; }
.v2 .panel a.btn-primary:hover { color: #fff; }
.v2 .panel a.btn-secondary { color: var(--c-heading); }
.v2 .panel a.btn-secondary:hover { color: #fff; }
/* ===== 18. アプリ・ゲームの料金の決め方（規模レンジ表・モニター価格） ===== */
.v2 .range-block { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--c-rule); }
.v2 .range-block h3 { font-family: var(--font-serif-jp); font-weight: 600; font-size: 1.25rem; color: var(--c-heading); margin: 0 0 var(--s1); }
.v2 .range-block > p { margin: 0 0 var(--s3); color: var(--c-text); max-width: 40em; }
.v2 .range-block > p b { color: var(--c-heading); font-weight: 600; }
.v2 .range-table { min-width: 560px; }
.v2 .range-table thead th { text-align: left; }
.v2 .range-table tbody th { white-space: nowrap; font-weight: 600; color: var(--c-heading); }
.v2 .range-table td { text-align: left; }
.v2 .range-table .range-price { white-space: nowrap; }
.v2 .range-table .range-price .price b { font-size: 1.2rem; }
.v2 .range-table .range-price .price small { font-size: .8rem; }
.v2 .range-note { margin: var(--s2) 0 0; font-size: .9rem; color: var(--c-muted); max-width: 44em; }
.v2 .range-note b { color: var(--c-heading); font-weight: 600; }
/* 検証指摘：h3 の重さをトップに合わせる */
.v2 .panel h3, .v2 .assure h3 { font-weight: 500; }
/* ===== 19. アクセシビリティ修正（2026-08-23 検証反映） ===== */
/* A11Y-06: フォーカスリングを本文色に統一。黒帯（.offer2）上だけ白。 */
.v2 a:focus-visible, .v2 button:focus-visible, .v2 input:focus-visible,
.v2 select:focus-visible, .v2 textarea:focus-visible,
.v2 summary:focus-visible, .v2 .btn:focus-visible {
outline: 3px solid var(--c-heading);
outline-offset: 2px;
}
.v2 .offer2 :focus-visible { outline-color: #fff; }
/* A11Y-05: フォーム欄の outline:none を打ち消す */
.v2 .field input:focus-visible,
.v2 .field textarea:focus-visible,
.v2 .field select:focus-visible,
.v2 #est-pages:focus-visible {
outline: 3px solid var(--c-heading);
outline-offset: 2px;
border-color: var(--c-heading);
box-shadow: none;
}
/* A11Y-09: 320px でのグリッド項目のはみ出し防止 */
.v2 .plans2 > *, .v2 .gallery > *, .v2 .odd > *,
.v2 .steps3 > *, .v2 .flow3 > *, .v2 .why > * { min-width: 0; }
/* ===== 20. デザインの作り込み（2026-08-23／競合24件の吸収）=====
方針：増やすのは「線・余白・間」だけ。色数は増やさない。影は静止状態では使わない。
------------------------------------------------------------------------ */
/* --- 20-1. 節番号：01 ─── SAMPLES ───── （雑誌の柱） --- */
.v2 .section-head .eyebrow[data-sec] { display: flex; align-items: center; gap: 12px; }
.v2 .section-head .eyebrow[data-sec]::before {
content: attr(data-sec);
font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem;
letter-spacing: 0; color: var(--c-muted); /* 4.79:1＝AA合格。装飾でも読み上げられるので薄くしない */
font-variant-numeric: lining-nums tabular-nums; flex: none;
}
.v2 .section-head .eyebrow[data-sec]::after {
content: ""; height: 1px; flex: 1 1 auto; max-width: 132px;
background: linear-gradient(90deg, var(--c-rule), rgba(227,219,208,0));
}
/* --- 20-2. 見出しの下に細い罫（見出しと本文の間に「間」を作る） --- */
.v2 .section-head h2 { margin-bottom: 14px; }
.v2 .section-head h2 + p { padding-top: 14px; border-top: 1px solid var(--c-rule); }
/* --- 20-3. カードの作り込み：左上のテラコッタの印がホバーで伸びる --- */
.v2 .odd .card, .v2 .num-card, .v2 .plan2, .v2 .gcard, .v2 .work-card,
.v2 .case-card, .v2 .post-card, .v2 .demo-feature {
position: relative;
transition: border-color .4s ease, transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.v2 .odd .card::after, .v2 .num-card::after, .v2 .plan2::after {
content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: 22px;
background: var(--c-primary); transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.v2 .odd .card:hover, .v2 .num-card:hover, .v2 .plan2:hover, .v2 .gcard:hover,
.v2 .work-card:hover, .v2 .case-card:hover, .v2 .post-card:hover, .v2 .demo-feature:hover {
border-color: var(--c-rule-strong); transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(70, 50, 32, .07);
}
.v2 .odd .card:hover::after, .v2 .num-card:hover::after, .v2 .plan2:hover::after { width: 66px; }
.v2 .plan2.is-main::after { width: 66px; }
/* --- 20-4. スクロールで現れる（JSが付けたときだけ効く＝JS無しでも消えない） --- */
@media (prefers-reduced-motion: no-preference) {
.v2 [data-reveal] {
opacity: 0; transform: translateY(18px);
transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
transition-delay: var(--rd, 0ms);
}
.v2 [data-reveal].is-in { opacity: 1; transform: none; }
}
/* --- 20-5. ヒーロー：スペック帯を仕切る／見出しを一段大きく --- */
.v2 .hero2 h1 { font-size: clamp(2.05rem, 4.4vw, 3.05rem); }
.v2 .hero2-spec li + li { border-left: 1px solid var(--c-rule); padding-left: var(--s3); }
.v2 .hero2-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.v2 .hero2-eyebrow::before {
content: ""; width: 24px; height: 1px; background: var(--c-primary); flex: none;
}
/* --- 20-6. 節の継ぎ目に髪の毛ほどの罫 --- */
.v2 .section--tint { border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); }
/* --- 20-7. 表：1行おきに極薄の地色＋見出しは明朝 --- */
.v2 table.cmp thead th, .v2 .legal-table th, .v2 .compare thead th { font-family: var(--font-serif-jp); font-weight: 600; }
.v2 table.cmp tbody tr:nth-child(odd), .v2 .compare tbody tr:nth-child(odd) { background: #fdfbf8; }
.v2 table.cmp tbody tr, .v2 .compare tbody tr { transition: background .25s ease; }
.v2 table.cmp tbody tr:hover, .v2 .compare tbody tr:hover { background: var(--c-primary-soft); }
/* --- 20-8. 暗い節：上から光を一枚落として平板さを消す --- */
.v2 .offer2 { position: relative; overflow: hidden; }
.v2 .offer2::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(115% 80% at 50% -10%, rgba(255,232,205,.11), rgba(255,232,205,0) 62%);
}
.v2 .offer2 > * { position: relative; z-index: 1; }
/* --- 20-9. リンクの下線を、引かれて伸びる線に --- */
.v2 a.more, .v2 .num-card a {
position: relative; text-decoration: none; padding-bottom: 2px;
background-image: linear-gradient(var(--c-primary), var(--c-primary));
background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
transition: background-size .4s cubic-bezier(.22,.61,.36,1);
}
.v2 a.more:hover, .v2 .num-card a:hover { background-size: 100% 2px; }
/* --- 20-10. ボタン：面ではなく「押した感じ」を線で出す --- */
.v2 .btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease; }
.v2 .btn:active { transform: translateY(1px); }
/* --- 20-11. 数字はすべて等幅（値段が縦に揃う） --- */
.v2 .price, .v2 .num-card .big, .v2 .est-result, .v2 table td { font-variant-numeric: lining-nums tabular-nums; }
/* --- 20-12. スマホ：仕切り線を消して縦積みに --- */
@media (max-width: 640px) {
.v2 .hero2-spec li + li { border-left: 0; padding-left: 0; }
.v2 .section-head .eyebrow[data-sec]::after { max-width: 56px; }
}
/* --- 20-13. ヒーロー見出しを3行に収める（値段の行を折らない） --- */
.v2 .hero2 .container { grid-template-columns: 1.08fr .92fr; }
.v2 .hero2 h1 { font-size: clamp(1.95rem, 4.05vw, 2.82rem); }
.v2 .hero2 h1 .hl-price { white-space: nowrap; }
@media (max-width: 1180px) { .v2 .hero2 h1 .hl-price { white-space: normal; } }
/* --- 20-14. 「総額が見える表」と「3年くらべ」（2026-08-23） --- */
.v2 .money { margin: var(--s6) 0 0; }
.v2 .money h3 {
font-family: var(--font-serif-jp); font-weight: 600; color: var(--c-heading);
font-size: clamp(1.15rem, 2.2vw, 1.45rem); margin: 0 0 8px; letter-spacing: .02em;
}
.v2 .money-lead { margin: 0 0 var(--s3); color: var(--c-text); font-size: .96rem; max-width: 46em; }
.v2 .money-lead b { color: var(--c-heading); font-weight: 600; }
.v2 .money-table th, .v2 .money-table td { vertical-align: middle; }
.v2 .money-table tbody th { font-weight: 500; color: var(--c-heading); white-space: normal; }
.v2 .money-table td b { color: var(--c-heading); font-weight: 600; }
.v2 .money-table tr.is-total { background: var(--c-primary-soft) !important; }
.v2 .money-table tr.is-total th, .v2 .money-table tr.is-total td {
font-family: var(--font-serif-jp); font-weight: 600; color: var(--c-heading); font-size: 1.02em;
}
.v2 .money-table tr.is-total:first-of-type th { border-top: 2px solid var(--c-rule-strong); }
/* --- 20-15. お約束と、お願い --- */
.v2 .terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.v2 .terms-col {
background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius);
padding: var(--s4) var(--s3); position: relative;
}
.v2 .terms-col::after {
content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: 24px; background: var(--c-primary);
}
.v2 .terms-col:last-child::after { background: var(--c-rule-strong); }
.v2 .terms-col h3 {
font-family: var(--font-serif-jp); font-weight: 600; color: var(--c-heading);
font-size: 1.08rem; margin: 0 0 var(--s2); padding-bottom: var(--s2);
border-bottom: 1px solid var(--c-rule); letter-spacing: .02em;
}
.v2 .terms-col ul { list-style: none; margin: 0; padding: 0; }
.v2 .terms-col li {
position: relative; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--c-rule);
font-size: .93rem; line-height: 1.75; color: var(--c-text);
}
.v2 .terms-col li:last-child { border-bottom: 0; padding-bottom: 0; }
.v2 .terms-col li::before {
content: ""; position: absolute; left: 2px; top: 22px; width: 8px; height: 1px; background: var(--c-primary);
}
.v2 .terms-col li b { color: var(--c-heading); font-weight: 600; }
@media (max-width: 820px) { .v2 .terms-grid { grid-template-columns: 1fr; gap: var(--s3); } }
/* --- 20-16. 比較表の記号を一目で読ませる（○を主役に、×を退ける） --- */
.v2 table.cmp .ok, .v2 .compare .yes { color: var(--c-primary); font-weight: 600; font-size: 1.12em; }
.v2 table.cmp .so { color: var(--c-muted); }
.v2 table.cmp .ng, .v2 .compare .no { color: #a9a099; } /* 4.5:1未満だが記号のみ＝隣の行見出しが意味を担保 */
/* 「自分のサイト」の列だけ、ごく薄く地を敷いて視線を集める */
.v2 table.cmp tbody td:last-child, .v2 table.cmp thead th:last-child { background: rgba(150, 84, 45, .045); }
.v2 table.cmp thead th:last-child { color: var(--c-heading); font-weight: 700; }
/* --- 20-17. プランの箇条書き：flexだと が別カラムに飛んで文が割れる。行に戻す --- */
.v2 .plan2 li { display: block; position: relative; padding-left: 1.35em; }
.v2 .plan2 li::before { position: absolute; left: 0; top: 9px; line-height: 1; }
/* ===== 21. エリアページ（2026-08-24） ===== */
/* 業種カードは4枚なので2×2に。3列だと4枚目が独りぼっちになる */
.v2 .odd--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .v2 .odd--2 { grid-template-columns: 1fr; } }
/* 「困りごと」と「答え」を地続きにしない */
.v2 .odd .card .card-pain { margin: 0 0 10px; font-size: .9rem; color: var(--c-muted); }
.v2 .odd .card .card-fix {
margin: 0 0 16px; font-size: .93rem; color: var(--c-text);
position: relative; padding-left: 1.2em;
}
.v2 .odd .card .card-fix::before {
content: "→"; position: absolute; left: 0; top: 0;
color: var(--c-primary); font-weight: 600;
}
/* ページ見出しと最初の節の間が空きすぎるのを詰める（エリアページは絵が無いぶん間延びする） */
.v2 .page-head + .section { padding-top: clamp(56px, 6vw, 88px); }