/* ============================================================
   ランウィズ v4 「夜明けに、いっしょに走る。」
   ------------------------------------------------------------
   コンセプト: 夜(AIへの不安)から夜明け(次の一手)へ。
   店主の隣を並んで走る2本の「伴走ライン」がシグネチャー。
   ------------------------------------------------------------
   配色: 温白 #F7F7F3 / 墨 #16181D / 深藍 #0E1626(ヒーロー帯限定)
         茜 #D8442B(アクセント1色) + 暁グラデ(茜→琥珀→藍・ヒーロー限定)
   タイポ: Zen Kaku Gothic New(見出し/本文) × Shippori Mincho(物語)
           × Space Grotesk(英数字・ラベル)
   動き: transform/opacity のみ・IntersectionObserver駆動・
         prefers-reduced-motion 完全対応 (CWV: INP/CLS 保全)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

:root {
  /* 面 */
  --paper: #F7F7F3;
  --paper-soft: #EFEFE9;
  --card: #FFFFFF;
  --night: #0E1626;
  --night-soft: #16233B;
  --night-line: rgba(247, 247, 243, 0.14);
  /* 墨 */
  --ink: #16181D;
  --ink-soft: #40434C;
  --ink-faint: #6E727C;
  --ink-invert: #F4F5F0;
  --ink-invert-soft: rgba(240, 242, 248, 0.85);
  /* 罫 */
  --rule: #C9C9C0;
  --rule-soft: #E3E3DB;
  /* 茜(アクセント1色) + 暁グラデ用 */
  --accent: #D8442B;
  --accent-deep: #A62F1B;
  --accent-soft: #E4664F;
  --amber: #F0A03C;
  --indigo: #3D5AA9;
  --dawn-grad: linear-gradient(92deg, #E4664F 0%, #F0A03C 52%, #7D96D8 100%);
  /* 影 (青みの極薄多段影) */
  --shadow: rgba(14, 22, 38, 0.08);
  --shadow-card: 0 1px 1px rgba(14,22,38,.03), 0 8px 24px -8px rgba(14,22,38,.10);
  --shadow-card-hover: 0 2px 4px rgba(14,22,38,.05), 0 20px 44px -12px rgba(14,22,38,.18);
  /* 型 */
  --radius: 14px;
  --radius-lg: 22px;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-story: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-tech: "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.95;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: rgba(216, 68, 43, 0.22); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 粒状グレイン (最前面オーバーレイ・質感の第5層) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* 見出しの核心1語だけ朝焼け色 (ブレインバッド方式・全文グラデ禁止) */
.hl {
  color: transparent;
  background: linear-gradient(94deg, #D8442B 0%, #D97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.page-dark .hl, .page-dusk .hl {
  background: linear-gradient(94deg, #FF8A63 0%, #F0A03C 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.paper-inner { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; }

/* ============================================================
   出現アニメーション基盤 (site.js が .rv を付与 → .rv-in で発火)
   transform/opacity のみ。JS無効時は即表示 (no-js セーフ)。
   ============================================================ */
.rv { opacity: 0; transform: translateY(26px); }
.rv-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
html.no-anim .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ============================================================
   ヘッダ (硝子・浮遊)
   ============================================================ */
.paper-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255,253,246,.66);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(120,85,40,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
  transition: background .35s, border-color .35s, box-shadow .35s;
}
section[id], footer[id] { scroll-margin-top: 84px; }
.paper-header.hdr-solid {
  background: rgba(255, 253, 247, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: 0 8px 30px -18px rgba(120,85,40,.25);
  isolation: isolate;
}
/* 透過時 (明るい朝の空の上) も文字は墨のまま */
.paper-header:not(.hdr-solid) .paper-nav a.current { color: var(--accent); }
html.no-anim .paper-header { background: rgba(247,247,243,.85); border-bottom: 1px solid var(--rule-soft); }
.paper-header .paper-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .85rem; padding-bottom: .85rem;
}
.paper-brand { display: flex; flex-direction: column; line-height: 1.12; position: relative; }
.paper-brand-name {
  font-size: 1.18rem; font-weight: 900; letter-spacing: 0.1em;
}
.paper-brand-sub {
  font-family: var(--font-tech);
  font-size: 0.62rem; color: var(--ink-faint);
  letter-spacing: 0.3em; margin-top: 0.18rem; text-transform: uppercase;
}
.paper-nav { display: flex; gap: 1.3rem; align-items: center; font-size: 0.86rem; font-weight: 500; }
.paper-nav a { color: var(--ink-soft); position: relative; padding: .2rem 0; }
.paper-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--accent); transition: right .28s cubic-bezier(.22,.61,.36,1);
}
.paper-nav a:hover { color: var(--ink); }
.paper-nav a:hover::after { right: 0; }
.paper-nav a.current { color: var(--accent); font-weight: 700; }
.paper-nav a.current::after { right: 0; }
.paper-cta {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(96deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff !important;
  font-weight: 700;
  transition: transform .22s, box-shadow .22s, background .22s;
  box-shadow: 0 6px 16px -6px rgba(216,68,43,.5);
}
.paper-cta::after { display: none; }
.paper-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(216,68,43,.55);
}

/* サービス ドロップダウン */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: .38rem;
  background: none; border: 0; padding: .2rem 0; margin: 0;
  font: inherit; font-weight: 500; color: var(--ink-soft);
  cursor: pointer;
}
.nav-drop-btn:hover { color: var(--ink); }
.nav-drop-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 8px;
}
.nd-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .22s;
  opacity: .7;
}
.nav-drop:hover .nd-caret, .nav-drop:focus-within .nd-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding-top: .7rem;
  opacity: 0; visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 96;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-menu-in {
  min-width: 620px;
  background: #FFFEFB;
  border: 1px solid rgba(200,170,130,.45);
  border-radius: 18px;
  box-shadow: 0 24px 64px -16px rgba(120,80,40,.35);
  padding: .8rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .2rem .45rem;
}
.nav-drop-menu a {
  display: flex; align-items: center; gap: .8rem;
  padding: .58rem .7rem;
  border-radius: 11px;
  font-weight: 500;
  color: var(--ink-soft) !important;
}
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: #FFF3E4; color: var(--ink) !important; }
.ndm-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, #F0A03C, #D8442B);
  box-shadow: 0 5px 12px -4px rgba(216,68,43,.45);
}
.ndm-tx { min-width: 0; }
.ndm-tx b { display: block; font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.45; }
.ndm-tx b em {
  font-style: normal;
  font-size: .6rem; font-weight: 700; letter-spacing: .16em;
  color: #fff;
  background: linear-gradient(96deg, #D8442B, #B45309);
  border-radius: 999px; padding: .08rem .55rem; margin-left: .35rem;
  vertical-align: 2px;
}
.ndm-tx small {
  display: block;
  font-size: .72rem; color: var(--ink-faint);
  line-height: 1.5;
}
.nav-drop-menu a.ndm-main {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, #FFF4E4, #FFFBF4);
  border: 1px solid rgba(216,120,60,.4);
}
.nav-drop-menu a.ndm-main:hover { background: linear-gradient(120deg, #FFEDD5, #FFF7EA); }
.ndm-foot {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-top: 1px solid var(--rule-soft);
  margin-top: .5rem; padding: .7rem .5rem .2rem;
  font-size: .76rem; color: var(--ink-faint);
}
.ndm-line { font-weight: 700; font-size: .82rem; color: #0B8A3E !important; padding: 0 !important; }
.ndm-line:hover { background: none !important; text-decoration: underline; }
.nav-drop-menu a.current { color: var(--accent) !important; }
.nav-drop:has(a.current) .nav-drop-btn { color: var(--accent); font-weight: 700; }

/* モバイルメニュー (site.js が生成) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card); cursor: pointer; padding: 0;
  position: relative; z-index: 96;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 4px auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(11, 17, 30, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 4.5rem 2.2rem 2.5rem;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .32s, transform .32s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu a {
  color: var(--ink-invert);
  font-size: 1.35rem; font-weight: 700; letter-spacing: .06em;
  padding: .68rem 0;
  border-bottom: 1px solid var(--night-line);
  display: flex; align-items: baseline; gap: .8rem;
}
.mobile-menu a .mm-no {
  font-family: var(--font-tech); font-size: .68rem; color: var(--amber);
  letter-spacing: .18em; min-width: 2.2rem;
}
.mobile-menu a.mm-cta {
  margin-top: 1.4rem; border: 0; border-radius: 999px;
  background: var(--accent); justify-content: center;
  padding: .9rem 1rem; font-size: 1.05rem;
}
@media (max-width: 900px) {
  .paper-nav { display: none; }
  .nav-toggle { display: block; }
}

/* ============================================================
   ボタン
   ============================================================ */
.paper-button, .paper-button-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 0.92rem 1.9rem;
  border-radius: 999px;
  font-weight: 700; font-size: 0.98rem; letter-spacing: .04em;
  line-height: 1.4;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, background .22s, color .22s, border-color .22s;
  position: relative; overflow: hidden;
}
.paper-button {
  background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-card);
}
button.paper-button, button.paper-button-ghost {
  border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.98rem;
}
button.paper-button-ghost { border: 1px solid var(--rule); }
.paper-button::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.paper-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.paper-button:hover::before { transform: translateX(110%); }
.paper-button:active { transform: translateY(0); }

.cover-cta-primary {
  background: linear-gradient(96deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(216,68,43,.5);
}
.cover-cta-primary:hover { box-shadow: 0 16px 34px -8px rgba(216,68,43,.55); }

/* LINE行きボタンは LINEブランド緑に統一 (ユーザーの脳内色と一致させる) */
a.paper-button[href*="lin.ee"], a.paper-button[href*="line.me"] {
  background: #06C755; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(6,199,85,.45);
}
a.paper-button[href*="lin.ee"]:hover, a.paper-button[href*="line.me"]:hover {
  background: #05B34C;
  box-shadow: 0 16px 34px -8px rgba(6,199,85,.5);
}
a.paper-button[href*="lin.ee"]::after, a.paper-button[href*="line.me"]::after {
  content: ""; width: 19px; height: 19px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 5.6 2 10c0 4 3.4 7.3 8 8v3l4-3c4.6-.7 8-4 8-8 0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 5.6 2 10c0 4 3.4 7.3 8 8v3l4-3c4.6-.7 8-4 8-8 0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cta-note { margin: .65rem 0 0; font-size: .8rem; color: var(--ink-invert-soft); width: 100%; }

.paper-button-ghost {
  border: 1px solid var(--rule);
  color: var(--ink); background: transparent;
}
.paper-button-ghost:hover {
  border-color: var(--ink);
  background: var(--card);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.paper-button.dark {
  background: var(--ink-invert); color: var(--night);
}
.paper-button.dark:hover { background: #fff; }

.paper-link, .paper-link-inline, .page-link {
  font-weight: 700; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.paper-link:hover, .paper-link-inline:hover, .page-link:hover {
  color: var(--accent); border-color: var(--accent);
}
.page-dark .paper-link { color: var(--ink-invert-soft); border-color: var(--night-line); }
.page-dark .paper-link:hover { color: #fff; border-color: var(--amber); }

/* ============================================================
   共通: 夜空ヒーロー装飾 (site.js が .sky を注入)
   ============================================================ */
.sky {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  contain: strict;
}
.sky-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  mix-blend-mode: screen; /* 暗地の上で濁らせない */
  will-change: transform;
  animation: blob-drift 26s ease-in-out infinite alternate;
}
.sky-blob.b1 { width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; background: radial-gradient(closest-side, #FF6A3C, rgba(224,68,68,.35) 55%, transparent 75%); left: -12%; bottom: -34%; }
.sky-blob.b2 { width: 34vw; height: 34vw; min-width: 300px; min-height: 300px; background: radial-gradient(closest-side, #FFB347, rgba(240,160,60,.3) 55%, transparent 75%); left: 26%; bottom: -30%; animation-delay: -9s; opacity: .4; }
.sky-blob.b3 { width: 42vw; height: 42vw; min-width: 340px; min-height: 340px; background: radial-gradient(closest-side, #4A6CD4, rgba(61,90,169,.3) 55%, transparent 75%); right: -14%; top: -26%; animation-delay: -17s; opacity: .42; }

/* 明るい朝の空では: b2=太陽・b1=珊瑚の光・b3=空の青 (通常ブレンド) */
.cover .sky-blob, .lp-cover .sky-blob, .product-hero .sky-blob { mix-blend-mode: normal; }
.cover .sky-blob.b1, .lp-cover .sky-blob.b1, .product-hero .sky-blob.b1 {
  background: radial-gradient(closest-side, rgba(255,150,105,.5), rgba(255,150,105,.18) 55%, transparent 75%);
  opacity: .7;
}
.cover .sky-blob.b2, .lp-cover .sky-blob.b2, .product-hero .sky-blob.b2 {
  width: 20vw; height: 20vw; min-width: 210px; min-height: 210px;
  left: 9%; top: 9%; bottom: auto;
  background: radial-gradient(closest-side, #FFF6DC 0%, #FFDE9A 34%, rgba(255,201,110,.55) 58%, transparent 74%);
  opacity: .95;
  filter: blur(24px);
  animation-duration: 34s;
}
.cover .sky-blob.b3, .lp-cover .sky-blob.b3, .product-hero .sky-blob.b3 {
  background: radial-gradient(closest-side, rgba(140,182,240,.5), rgba(140,182,240,.2) 55%, transparent 75%);
  opacity: .6;
}
/* 朝の空の光の粒 (星の昼版) */
.cover .sky-stars i, .lp-cover .sky-stars i, .product-hero .sky-stars i {
  background: rgba(255,190,90,.9);
}
.cover .sky-stars i[style*="width:3px"], .lp-cover .sky-stars i[style*="width:3px"], .product-hero .sky-stars i[style*="width:3px"] {
  background: #FFD98F;
  box-shadow: 0 0 8px 2px rgba(255,200,110,.7);
}
.cover .sky-grid, .lp-cover .sky-grid, .product-hero .sky-grid { opacity: .12; }
/* 伴走ライン: 明るい空では濃色で走らせる */
.cover .pace-line .p2, .lp-cover .pace-line .p2 { stroke: rgba(120,85,40,.4); }
@keyframes blob-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -5%, 0) scale(1.08); }
  100% { transform: translate3d(-4%, 3%, 0) scale(.96); }
}
/* 微細グレイン (バンディング消し) */
.sky::after {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 星 */
.sky-stars { position: absolute; inset: 0; opacity: .55; }
.sky-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(244,245,240,.8);
  animation: star-tw 3.4s ease-in-out infinite alternate;
}
.sky-stars i[style*="width:3px"] {
  box-shadow: 0 0 7px 1.5px rgba(255,236,200,.55);
  background: #FFF4DC;
}
@keyframes star-tw { from { opacity: .12; } to { opacity: .8; } }
/* 地平線グリッド (現場の設計図) */
.sky-grid {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(rgba(125,150,216,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,150,216,.5) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 66% at 50% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 66% at 50% 100%, #000 0%, transparent 72%);
}

/* 伴走ライン (2本の線が並んで走る・シグネチャー) */
.pace-line { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; width: 100%; }
.pace-line path {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
}
.pace-line .p1 { stroke: url(#dawnGrad); }
.pace-line .p2 { stroke: rgba(244,245,240,.4); stroke-width: 1.4; }
.sky-on .pace-line path { animation: pace-draw 2.6s cubic-bezier(.3,0,.2,1) forwards; }
.sky-on .pace-line .p2 { animation-delay: .35s; }
@keyframes pace-draw { to { stroke-dashoffset: 0; } }
html.no-anim .pace-line path { stroke-dashoffset: 0; }

/* ============================================================
   表紙 (index ヒーロー) — 夜明けの空
   ============================================================ */
/* ============ 明るい朝の空 (v6): ヒーロー系は色変数を昼用に反転 ============ */
.cover, .lp-cover, .product-hero {
  --ink-invert: #1A1508;
  --ink-invert-soft: #4A4030;
  --night-line: rgba(120, 85, 40, 0.28);
  --amber: #B45309;
}
.cover {
  position: relative;
  min-height: 92vh;
  padding: 3.6rem 0 7rem;
  background:
    radial-gradient(ellipse 46% 38% at 16% 16%, rgba(255,228,150,.95) 0%, rgba(255,200,105,.45) 45%, transparent 72%),
    radial-gradient(ellipse 70% 50% at 88% 4%, rgba(150,190,242,.5), transparent 62%),
    radial-gradient(ellipse 130% 62% at 50% 108%, rgba(255,140,80,.55) 0%, rgba(255,180,107,.28) 42%, transparent 70%),
    linear-gradient(180deg, #FEF9EC 0%, #FFF0D6 52%, #FFE2B8 100%);
  color: var(--ink-invert);
  overflow: hidden;
  display: flex; align-items: center;
}
.cover-grid {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto; width: 100%;
  padding: 0 1.75rem;
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 860px) { .cover-grid { grid-template-columns: 1fr; gap: 3rem; } }

.cover-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-tech);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-invert-soft);
  margin-bottom: 1.6rem;
  padding: .48rem 1.05rem;
  border: 1px solid var(--night-line);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  max-width: none;
}
.cover-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #E8722F;
  box-shadow: 0 0 10px 2px rgba(240,160,60,.65);
  animation: star-tw 2.6s ease-in-out infinite alternate;
}
.cover-title {
  font-size: clamp(2.7rem, 6.6vw, 5.1rem);
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 1.3rem;
  letter-spacing: 0.015em;
}
.cover-line1, .cover-line2 {
  display: block;
  animation: hero-rise .95s cubic-bezier(.22,.61,.36,1) both;
}
.cover-line2 { animation-delay: .2s; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(50px); clip-path: inset(0 0 100% 0); }
  60% { clip-path: inset(-10% -10% -10% -10%); }
  to { opacity: 1; transform: none; clip-path: inset(-10% -10% -10% -10%); }
}
.cover-line2 .ink {
  background: linear-gradient(94deg, #E8461F 0%, #E8722F 34%, #D97706 55%, #E8722F 76%, #E8461F 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dawn-flow 9s ease-in-out infinite alternate;
}
@keyframes dawn-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.cover-sub {
  font-size: 1.18rem; font-weight: 700;
  color: var(--ink-invert);
  margin: 0 0 1rem;
}
.cp-area {
  font-size: .88rem; color: var(--ink-invert-soft);
  line-height: 1.85; margin: 0 0 1.3rem;
}
.cover-product {
  display: inline-block;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(160,100,40,.25);
  padding: .85rem 1.25rem;
  margin-bottom: 1.4rem;
}
.cp-label {
  display: block;
  font-family: var(--font-tech);
  font-size: .64rem; letter-spacing: .3em;
  color: var(--amber); margin-bottom: .3rem;
}
.cp-name { margin: 0; font-weight: 900; font-size: 1.12rem; line-height: 1.5; }
.cp-price { margin: .2rem 0 0; font-size: .92rem; color: var(--ink-invert-soft); }
/* 高額(月22万)の直後に置く安心の一行。個人店が価格で離脱するのを防ぐ。 */
.cp-entry { margin: .5rem 0 0; font-size: .82rem; line-height: 1.7; color: var(--ink-invert-soft); opacity: .92; }
.cp-price, .cp-amount { font-feature-settings: "palt" 1, "tnum" 1; }

.cover-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.7rem; }
.cover .paper-button-ghost { border-color: var(--night-line); color: var(--ink-invert); background: rgba(255,255,255,.45); }
.cover .paper-button-ghost:hover { background: rgba(255,255,255,.8); border-color: rgba(120,85,40,.5); box-shadow: none; }

.cover-subcta { display: flex; align-items: baseline; gap: .7rem; margin-top: .45rem; }
.subcta-label {
  font-family: var(--font-tech);
  font-size: .62rem; letter-spacing: .22em;
  color: var(--amber);
  border: 1px solid rgba(240,160,60,.4);
  border-radius: 999px; padding: .12rem .6rem;
  white-space: nowrap;
}
.subcta-link { font-size: .9rem; color: var(--ink-invert-soft); transition: color .2s; }
.subcta-link:hover { color: var(--accent); }

.cover-mark {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: 2rem;
  font-family: var(--font-tech);
  font-size: .68rem; letter-spacing: .3em;
  color: var(--ink-invert-soft);
}
.cover-mark svg { animation: mark-dip 2.2s ease-in-out infinite; }
@keyframes mark-dip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.cover-side { display: flex; flex-direction: column; gap: 1.15rem; }
.cover-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--night-line);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
}
.cover-portrait img { width: 100%; height: auto; filter: saturate(.92) contrast(1.02); }
.portrait-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.2rem .95rem;
  background: linear-gradient(180deg, transparent, rgba(11,18,31,.88) 58%);
  display: flex; flex-direction: column;
}
.portrait-name { font-weight: 900; font-size: 1.06rem; color: #fff; }
.portrait-role { font-size: .74rem; color: rgba(244,245,240,.85); line-height: 1.65; }

.visit-mock {
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 1.05rem 1.2rem;
}
.vm-eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--font-tech);
  font-size: .64rem; letter-spacing: .3em; color: var(--amber);
}
.vm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vm-steps li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .6rem 0;
  position: relative;
}
.vm-steps li + li { border-top: 1px dashed var(--night-line); }
.vm-num {
  font-family: var(--font-tech);
  font-weight: 700; font-size: .78rem;
  color: var(--amber);
  min-width: 1.7rem; padding-top: .22rem;
}
.vm-body { font-size: .88rem; line-height: 1.65; color: var(--ink-invert); }
.vm-detail { font-size: .76rem; color: var(--ink-invert-soft); }

.cover-book {
  display: flex; gap: 1rem; align-items: center;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.5);
  padding: .85rem 1rem;
  transition: background .25s, transform .25s;
}
.cover-book:hover { background: rgba(255,255,255,.85); transform: translateY(-2px); }

/* 著書2冊の自動スライダー */
.cover-book-slider { position: relative; display: grid; }
.cover-book-slider .cover-book {
  grid-area: 1 / 1;
  opacity: 0; transform: translateX(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), background .25s;
  pointer-events: none;
}
.cover-book-slider .cover-book.on {
  opacity: 1; transform: none;
  pointer-events: auto;
}
.cover-book-slider .cover-book:hover { transform: translateY(-2px); }
.cbs-dots {
  position: absolute; right: .85rem; bottom: .65rem; z-index: 2;
  display: flex; gap: .42rem;
}
.cbs-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(120,85,40,.3);
  transition: background .25s, transform .25s;
}
.cbs-dots button:hover { transform: scale(1.3); }
.cbs-dots button.on { background: var(--accent); }
.cover-book img { border-radius: 6px; box-shadow: 0 8px 22px -6px rgba(0,0,0,.5); }
.cover-book-meta { display: flex; flex-direction: column; gap: .18rem; }
.cb-label { font-family: var(--font-tech); font-size: .6rem; letter-spacing: .24em; color: var(--amber); }
.cb-title { font-weight: 900; font-size: .96rem; color: var(--ink-invert); }
.cb-cta { font-size: .78rem; color: var(--ink-invert-soft); }

.cover-corner {
  position: absolute; right: 1.6rem; bottom: 1.2rem; z-index: 2;
}
.corner-text {
  font-family: var(--font-tech);
  font-size: .62rem; letter-spacing: .34em;
  color: rgba(120,85,40,.45);
}

/* ============================================================
   LPヒーロー (製品ページ共通) — 同じ夜明けの空・低め
   ============================================================ */
.lp-cover {
  position: relative;
  padding: 5.2rem 0 4.6rem;
  background:
    radial-gradient(ellipse 42% 36% at 14% 14%, rgba(255,228,150,.95) 0%, rgba(255,200,105,.4) 45%, transparent 72%),
    radial-gradient(ellipse 66% 46% at 90% 2%, rgba(150,190,242,.45), transparent 62%),
    radial-gradient(ellipse 130% 66% at 50% 112%, rgba(255,140,80,.5) 0%, rgba(255,180,107,.26) 42%, transparent 70%),
    linear-gradient(180deg, #FEF9EC 0%, #FFF0D6 55%, #FFE4BC 100%);
  color: var(--ink-invert);
  overflow: hidden;
}
.lp-cover-inner {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto; padding: 0 1.75rem;
}
.lp-cover-head { max-width: 780px; }
.lp-product-name {
  display: inline-block;
  font-family: var(--font-tech);
  font-weight: 700; font-size: .8rem; letter-spacing: .26em;
  color: var(--amber);
  padding: .4rem 1rem;
  border: 1px solid rgba(180,110,50,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  margin-bottom: 1.1rem;
}
.lp-chapter-mini {
  display: inline-block;
  font-size: .78rem; color: var(--ink-invert-soft);
  letter-spacing: .18em; margin-left: .7rem;
}
.lp-h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 900; line-height: 1.28;
  letter-spacing: .015em;
  margin: .4rem 0 1.3rem;
}
.ink-accent {
  background: linear-gradient(94deg, #E8461F 0%, #E8722F 34%, #D97706 55%, #E8722F 76%, #E8461F 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dawn-flow 9s ease-in-out infinite alternate;
}
.lp-sub {
  font-size: 1.02rem; color: var(--ink-invert-soft);
  line-height: 2.0; max-width: 640px;
  margin: 0 0 1.6rem;
}
.lp-hero-cta {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin: 0 0 2.4rem;
}
.lp-hero-cta .cta-note { margin: 0; width: auto; }
@media (max-width: 640px) {
  .lp-hero-cta .paper-button { width: 100%; }
}
.lp-cover-bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.6rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--night-line);
  padding-top: 1.8rem;
}
.lp-price-band { display: flex; flex-direction: column; }
.lp-price-label {
  font-family: var(--font-tech);
  font-size: .64rem; letter-spacing: .3em; color: var(--amber);
  margin-bottom: .25rem;
}
.lp-price-main {
  margin: 0; font-weight: 900; font-size: 1.85rem; line-height: 1.3;
  font-feature-settings: "palt" 1, "tnum" 1;
}
.lp-price-main small { font-size: .85rem; font-weight: 500; color: var(--ink-invert-soft); }
.lp-price-sub { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-invert-soft); }
.lp-ctas, .lp-cover-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.lp-cover .paper-button-ghost { border-color: var(--night-line); color: var(--ink-invert); background: rgba(255,255,255,.45); }
.lp-cover .paper-button-ghost:hover { background: rgba(255,255,255,.8); border-color: rgba(120,85,40,.5); box-shadow: none; }

/* バッジ */
.live-badge-wrap { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1.6rem; }
.live-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700;
  color: #0B8A3E;
  border: 1px solid rgba(11,138,62,.35);
  background: rgba(255,255,255,.6);
  border-radius: 999px; padding: .32rem .9rem;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: live-pulse 1.9s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.trial-badge {
  font-size: .78rem; font-weight: 700;
  color: var(--ink-invert);
  border: 1px solid var(--night-line);
  background: rgba(255,255,255,.6);
  border-radius: 999px; padding: .32rem .9rem;
}

/* ============================================================
   ページ共通セクション — 「一日が巡る」背景
   夜(ヒーロー) → 暁(tinted) → 昼(page) → 夕暮れ(dusk) → 夜(dark)
   ============================================================ */
.page { position: relative; padding: 7rem 0; overflow: hidden; }
.page {
  background-image:
    /* 夜空の残り香: 昼の面にも星の粒を3〜5%で残す (支配色の徹底) */
    radial-gradient(1.6px 1.6px at 22% 28%, rgba(166,47,27,.16), transparent 100%),
    radial-gradient(1.4px 1.4px at 68% 14%, rgba(61,90,169,.15), transparent 100%),
    radial-gradient(1.2px 1.2px at 86% 62%, rgba(180,110,50,.15), transparent 100%),
    radial-gradient(1.6px 1.6px at 42% 78%, rgba(61,90,169,.12), transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 55%, rgba(166,47,27,.12), transparent 100%),
    radial-gradient(ellipse 70% 55% at 8% 0%, rgba(240,160,60,.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(125,150,216,.08), transparent 62%),
    linear-gradient(180deg, #FAF6EE 0%, #F9F4EB 55%, #FBF2E5 100%);
  background-size:
    520px 440px, 460px 520px, 560px 480px, 500px 560px, 540px 460px,
    100% 100%, 100% 100%, 100% 100%;
}
.page-tinted {
  background-image:
    radial-gradient(1.6px 1.6px at 30% 22%, rgba(166,47,27,.18), transparent 100%),
    radial-gradient(1.3px 1.3px at 74% 66%, rgba(61,90,169,.16), transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 74%, rgba(180,110,50,.16), transparent 100%),
    radial-gradient(ellipse 80% 60% at 12% -8%, rgba(228,102,79,.14), transparent 60%),
    radial-gradient(ellipse 70% 55% at 92% 12%, rgba(240,160,60,.16), transparent 58%),
    radial-gradient(ellipse 60% 60% at 60% 110%, rgba(125,150,216,.12), transparent 64%),
    linear-gradient(180deg, #FDF4E7 0%, #FAF3EA 60%, #F8F3E9 100%);
  background-size:
    500px 460px, 540px 500px, 470px 530px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
/* 暁面のうっすらグリッド (現場の設計図・夜空と対) */
.page-tinted::before {
  content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none;
  background-image:
    linear-gradient(rgba(180,110,60,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,110,60,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 0%, transparent 75%);
}
.page + .page { border-top: 0; }
.page-inner { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; position: relative; z-index: 2; }

/* 夕暮れ帯 (ストーリー用) */
.page-dusk::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--dawn-grad); opacity: .9; z-index: 1; pointer-events: none;
}
.page-dusk::after {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px;
  background: var(--dawn-grad); opacity: .35; z-index: 1; pointer-events: none;
}
.page-dusk {
  background:
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(255,150,90,.5) 0%, rgba(255,190,110,.25) 40%, transparent 68%),
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(150,190,242,.35), transparent 65%),
    linear-gradient(180deg, #FFF2DC 0%, #FFE7C2 55%, #FFDCA8 100%);
  color: var(--ink);
}
.page-dusk .page-no { color: #B45309; }
.page-dusk .page-body { color: var(--ink-soft); }
.page-dusk .sky-stars i { background: rgba(216,110,50,.7); }
.page-dusk .sky-blob { mix-blend-mode: normal; opacity: .35; }

/* 背景の巨大ゴースト文字 (site.jsが .page-no から自動生成) */
.ghost-word {
  position: absolute; top: 2.4rem; right: -0.5rem; z-index: 0;
  font-family: var(--font-tech);
  font-size: clamp(4.5rem, 11vw, 9.5rem);
  font-weight: 700; letter-spacing: .04em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(22, 24, 29, 0.07);
  white-space: nowrap;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 96%);
  mask-image: linear-gradient(to right, #000 62%, transparent 96%);
}
.page-dark .ghost-word {
  -webkit-text-stroke: 1.5px rgba(255, 246, 234, 0.16);
}
.page-dusk .ghost-word {
  -webkit-text-stroke: 1.5px rgba(160, 90, 40, 0.13);
}
.page-tinted .ghost-word { -webkit-text-stroke: 1.5px rgba(160, 90, 40, 0.1); }
@media (max-width: 760px) { .ghost-word { display: none; } }

/* 背景の伴走リボン (site.jsが暁面に注入・2本の曲線が横切る) */
.bg-ribbon {
  position: absolute; left: 0; right: 0; bottom: -2%; width: 100%; height: 46%;
  z-index: 0; pointer-events: none; opacity: .5;
}
.bg-ribbon path {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
}
.bg-ribbon .r1 { stroke: url(#ribbonGrad); stroke-width: 2.5; }
.bg-ribbon .r2 { stroke: rgba(240,160,60,.5); stroke-width: 1.5; }
.ribbon-on .bg-ribbon path { animation: pace-draw 3.2s cubic-bezier(.3,0,.2,1) forwards; }
.ribbon-on .bg-ribbon .r2 { animation-delay: .4s; }
html.no-anim .bg-ribbon path { stroke-dashoffset: 0; }

/* セクション通し番号タグ (装飾層・site.jsが生成) */
.sec-tag {
  position: absolute; top: 2.6rem; left: 1.75rem;
  font-family: var(--font-tech);
  font-size: .62rem; font-weight: 700; letter-spacing: .3em;
  color: rgba(22,24,29,.28);
  display: inline-flex; align-items: center; gap: .55rem;
  z-index: 2; pointer-events: none;
}
.sec-tag::after {
  content: ""; width: 3rem; height: 1px;
  background: rgba(22,24,29,.18);
}
.page-dark .sec-tag { color: rgba(255,246,234,.5); }
.page-dark .sec-tag::after { background: rgba(255,246,234,.35); }
@media (max-width: 900px) { .sec-tag { display: none; } }

/* 右端ドットナビ (TRUSTEP型・site.jsが生成) */
.dot-nav {
  position: fixed; right: 1.3rem; top: 50%; transform: translateY(-50%);
  z-index: 88;
  display: flex; flex-direction: column; gap: .85rem;
}
@media (max-width: 1180px) { .dot-nav { display: none; } }
.dot-nav a {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(22,24,29,.22);
  transition: background .25s, transform .25s;
}
.dn-dark .dot-nav a { background: rgba(244,245,240,.3); }
.dot-nav a:hover { transform: scale(1.35); }
.dot-nav a.dn-on {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(216,68,43,.18);
}
.dn-dark .dot-nav a.dn-on {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(240,160,60,.22);
}
.dot-nav a span {
  position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%) translateX(6px);
  font-family: var(--font-tech);
  font-size: .62rem; font-weight: 700; letter-spacing: .22em;
  color: var(--ink-soft);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: .2rem .7rem;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.dot-nav a:hover span, .dot-nav a.dn-on span {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.dn-dark .dot-nav a span {
  color: var(--ink-invert);
  background: rgba(14,22,38,.85);
  border-color: var(--night-line);
}

/* ============================================================
   巨大数字帯 (PKSHA型) + 業種チップ壁
   ============================================================ */
.stat-band {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  align-items: end;
  padding: 2.6rem 0 2.2rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  /* 設計図グリッド (Vercel Geist Grid型) */
  background-image:
    linear-gradient(rgba(22,24,29,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,24,29,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
@media (max-width: 900px) { .stat-band { grid-template-columns: 1fr 1fr; } }
.stat-item { padding: .6rem 1.2rem; position: relative; }
.stat-item + .stat-item::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--rule-soft);
}
@media (max-width: 900px) {
  .stat-item:nth-child(3)::before { display: none; }
}
.stat-num {
  display: block;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
  background: linear-gradient(120deg, var(--ink) 30%, #6B4A2E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-num small { font-size: .45em; font-weight: 700; letter-spacing: 0; }
.stat-label {
  display: block; margin-top: .35rem;
  font-size: .84rem; font-weight: 700; color: var(--ink-soft);
}
.stat-note { display: block; font-size: .7rem; color: var(--ink-faint); margin-top: .15rem; }

.chip-wall {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: 2.2rem;
}
.chip-wall span {
  font-size: .84rem; font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.72);
  border-radius: 999px;
  padding: .34rem 1rem;
  transition: transform .22s, border-color .22s, color .22s;
}
.chip-wall span:hover { transform: translateY(-2px); border-color: #C08A4E; color: var(--ink); }
.chip-wall .cw-lead {
  flex-basis: 100%;
  border: 0; background: none; padding: 0 0 .15rem;
  font-family: var(--font-tech);
  font-size: .68rem; font-weight: 700; letter-spacing: .26em;
  color: #92400E;
}

/* ============================================================
   現場フロー zigzag (Linear番号式 × BoostX店舗版モック)
   ============================================================ */
.zig { display: flex; flex-direction: column; gap: 4.5rem; }
.zig-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.zig-row:nth-child(even) .zig-visual { order: -1; }
@media (max-width: 860px) {
  .zig-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .zig-row:nth-child(even) .zig-visual { order: 0; }
}
.zig-no {
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  background: linear-gradient(120deg, #D8442B, #D97706);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: .8rem;
}
.zig-h { margin: 0 0 .9rem; font-size: 1.5rem; font-weight: 900; line-height: 1.5; }
.zig-p { margin: 0; color: var(--ink-soft); line-height: 2.05; font-size: .98rem; }
.zig-p b { color: var(--ink); }

/* スマホモック (LINE風・CSSのみ) */
.phone-mock {
  width: min(320px, 88%);
  margin: 0 auto;
  border-radius: 34px;
  border: 1px solid rgba(180,150,110,.5);
  background: linear-gradient(180deg, #FFFEFB, #FFF7EC);
  box-shadow:
    0 2px 4px rgba(120,80,40,.08),
    0 30px 60px -18px rgba(120,80,40,.3),
    inset 0 0 0 6px #16181D,
    inset 0 0 0 7px rgba(255,255,255,.25);
  padding: 1.9rem 1.15rem 1.4rem;
  position: relative;
}
.phone-mock::before {
  content: ""; position: absolute; top: .8rem; left: 50%; transform: translateX(-50%);
  width: 86px; height: 17px; border-radius: 999px;
  background: #16181D;
}
.pm-head {
  margin: .4rem 0 .9rem;
  font-size: .72rem; font-weight: 700; text-align: center;
  color: var(--ink-faint); letter-spacing: .12em;
}
.pm-bubble {
  max-width: 88%;
  padding: .58rem .85rem;
  border-radius: 13px;
  font-size: .8rem; line-height: 1.75;
  margin-bottom: .55rem;
}
.pm-them { background: #F0EEE7; color: var(--ink); border-top-left-radius: 4px; }
.pm-us { background: #06C755; color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.pm-note { margin: .5rem 0 0; font-size: .64rem; color: var(--ink-faint); text-align: center; }

/* 紙モック (棚卸しメモ / 運用ルール表・CSSのみ) */
.paper-mock {
  width: min(360px, 92%);
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(180,150,110,.45);
  background:
    linear-gradient(180deg, #FFFEFB, #FFFBF2);
  box-shadow: 0 2px 4px rgba(120,80,40,.07), 0 26px 54px -18px rgba(120,80,40,.28);
  padding: 1.4rem 1.5rem 1.2rem;
  transform: rotate(-1.2deg);
}
.zig-row:nth-child(even) .paper-mock { transform: rotate(1.2deg); }
.pk-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5rem; margin-bottom: .8rem;
}
.pk-title { font-weight: 900; font-size: .95rem; }
.pk-date { font-family: var(--font-tech); font-size: .64rem; color: var(--ink-faint); letter-spacing: .12em; }
.pk-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .1rem;
  font-size: .82rem; color: var(--ink-soft);
}
.pk-row + .pk-row { border-top: 1px dashed var(--rule-soft); }
.pk-check {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid #C08A4E;
  position: relative; flex-shrink: 0;
}
.pk-check.on { background: #D97706; border-color: #D97706; }
.pk-check.on::after {
  content: ""; position: absolute; left: 3px; top: 3.5px;
  width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.pk-tag {
  margin-left: auto;
  font-size: .62rem; font-weight: 700;
  color: #92400E; background: rgba(245,158,11,.12);
  border-radius: 999px; padding: .1rem .55rem;
  white-space: nowrap;
}
.pk-note { margin: .7rem 0 0; font-size: .64rem; color: var(--ink-faint); text-align: center; }

/* ============================================================
   実物ショーケース (本番稼働のプロダクト画面・動画)
   ============================================================ */
.real-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 980px) { .real-grid { grid-template-columns: 1fr; } }
.real-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(200,170,130,.4);
  background: linear-gradient(180deg, #FFFEFB, #FFFBF2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.real-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(180,110,50,.06), 0 26px 52px -16px rgba(180,110,50,.28);
}
.real-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #10192B;
  overflow: hidden;
}
.real-media img, .real-media video, .real-media iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.real-media .rm-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(216,68,43,.94);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s;
  pointer-events: none;
}
.real-media:hover .rm-play { transform: translate(-50%, -50%) scale(1.1); }
.real-body { padding: 1.15rem 1.3rem 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
.real-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  color: #0B8A3E;
  border: 1px solid rgba(11,138,62,.3);
  border-radius: 999px;
  padding: .16rem .7rem;
  margin-bottom: .6rem;
}
.real-tag .live-dot { width: 7px; height: 7px; }
.real-tag.rt-video { color: #B45309; border-color: rgba(180,83,9,.35); }
.real-name { margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 900; }
.real-desc { margin: 0 0 .8rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.8; flex-grow: 1; }
.real-link { font-family: var(--font-tech); font-size: .8rem; font-weight: 700; color: var(--accent); }
.real-link:hover { text-decoration: underline; }
.real-cite { margin-top: 1.4rem; font-size: .76rem; color: var(--ink-faint); }

/* スクロールで夜が明ける進捗バー (画面最上部) */
.dawn-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120;
  background: linear-gradient(90deg, #E4664F 0%, #F0A03C 100%);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
.page-head { margin-bottom: 3.2rem; max-width: 800px; position: relative; z-index: 2; }
.page-no {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-tech);
  font-size: .7rem; font-weight: 700; letter-spacing: .3em;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.page-no::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 2px; border-radius: 2px;
  background: var(--dawn-grad);
  /* 伴走ライン: 2本目(短く・淡く)を並走させる */
  box-shadow: 0 5px 0 -1px rgba(240,160,60,.5);
  margin-bottom: 3px;
}
.page-title {
  font-size: clamp(1.85rem, 4vw, 3rem);
  font-weight: 900; line-height: 1.38;
  letter-spacing: .015em;
  margin: 0;
}
.page-sub { margin: 1.1rem 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 2.0; }
.page-body { font-size: 1rem; color: var(--ink-soft); }
.page-body.single { max-width: 720px; }
.page-body.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
}
@media (max-width: 760px) { .page-body.two { grid-template-columns: 1fr; gap: 1.4rem; } }
.page-body p { margin: 0 0 1.15rem; }
.lead-large {
  font-family: var(--font-story);
  font-weight: 600;
  font-size: 1.32rem; line-height: 2.0;
  color: var(--ink);
}
.lead-foot { display: block; font-family: var(--font-body); font-size: .74rem; color: var(--ink-faint); font-weight: 400; margin-top: .4rem; }
.signature {
  margin-top: 2.2rem;
  font-family: var(--font-story);
  display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
}
.sig-name { font-weight: 700; font-size: 1.05rem; }
.sig-place { font-size: .82rem; color: var(--ink-faint); }

.page-cta-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem;
  margin-top: 2.6rem;
}

/* ============================================================
   サービス Bento グリッド (index)
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}
.svc-card {
  position: relative;
  grid-column: span 4;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(200,170,130,.35);
  background: linear-gradient(180deg, #FFFEFB 0%, #FFFBF4 100%);
  box-shadow: var(--shadow-card);
  padding: 1.7rem 1.7rem 1.5rem;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}
.svc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dawn-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(180,110,50,.06), 0 26px 52px -16px rgba(180,110,50,.25);
  border-color: rgba(216,120,60,.5);
}
.svc-card.svc-main { grid-column: span 8; grid-row: span 2; }
.svc-card.svc-side { grid-column: span 4; }
.svc-card.svc-half { grid-column: span 6; }
.svc-card.svc-w5 { grid-column: span 5; }
.svc-card.svc-w4 { grid-column: span 4; }
.svc-card.svc-w3 { grid-column: span 3; }
@media (max-width: 980px) {
  .svc-grid .svc-card { grid-column: span 6; }
  .svc-grid .svc-card.svc-main { grid-column: span 12; }
}
@media (max-width: 640px) {
  .svc-grid .svc-card, .svc-grid .svc-card.svc-main { grid-column: span 12; }
}
.svc-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .8rem;
}
.svc-no {
  font-family: var(--font-tech);
  font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  color: #92400E;
}
.svc-verb {
  font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  color: #6B4A2E;
  background: rgba(240,160,60,.16);
  border: 1px solid rgba(180,110,50,.4); border-radius: 999px;
  padding: .18rem .85rem;
}
.svc-name { margin: 0 0 .45rem; font-size: 1.22rem; font-weight: 900; line-height: 1.5; }
.svc-main .svc-name { font-size: 1.65rem; }
.svc-desc { margin: 0 0 1rem; font-size: .88rem; color: var(--ink-soft); line-height: 1.85; flex-grow: 1; }
.svc-price {
  font-feature-settings: "palt" 1, "tnum" 1;
  display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
  margin-bottom: .2rem;
}
.svc-price b {
  font-family: var(--font-tech);
  font-weight: 700; font-size: 1.4rem; letter-spacing: 0;
}
.svc-price .sp-prefix, .svc-price .sp-unit { font-size: .78rem; color: var(--ink-faint); }
.svc-price .sp-note { font-size: .72rem; font-weight: 700; color: #B45309; }
.nw { white-space: nowrap; }
.svc-link {
  margin-top: .7rem;
  font-family: var(--font-tech);
  font-size: .82rem; font-weight: 700; color: var(--ink-faint);
  transition: color .2s, transform .28s;
  align-self: flex-start;
}
.svc-card:hover .svc-link { color: var(--accent); transform: translateX(4px); }
.svc-card.svc-main {
  border: 1.5px solid transparent;
  background:
    linear-gradient(120deg, #FFF9F6 0%, var(--card) 55%) padding-box,
    linear-gradient(120deg, rgba(216,68,43,.55), rgba(240,160,60,.55), rgba(125,150,216,.45)) border-box;
  box-shadow: 0 14px 40px -14px rgba(216,68,43,.28);
}
.svc-badge {
  position: absolute; top: 0; right: 0;
  font-size: .64rem; font-weight: 700; letter-spacing: .2em;
  color: #fff;
  background: linear-gradient(96deg, #D97706, #B45309);
  padding: .28rem .95rem .28rem 1.05rem;
  border-radius: 0 0 0 12px;
}
.svc-main .svc-desc { flex-grow: 0; }
.svc-main .svc-price { margin-top: auto; }
.svc-cities {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: .2rem 0 1.2rem;
}
.svc-flow {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .7rem;
  margin: 0 0 1.4rem;
}
@media (max-width: 640px) { .svc-flow { grid-template-columns: 1fr; } }
.svc-flow div {
  position: relative;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: .7rem .9rem .6rem;
  background: rgba(255,255,255,.65);
}
.svc-flow .sf-no {
  display: block;
  font-family: var(--font-tech);
  font-size: .64rem; font-weight: 700; letter-spacing: .18em;
  color: var(--amber); margin-bottom: .15rem;
}
.svc-flow .sf-t { display: block; font-size: .84rem; font-weight: 700; line-height: 1.55; }
.svc-flow .sf-d { display: block; font-size: .72rem; color: var(--ink-faint); line-height: 1.6; }
.svc-cities span {
  font-size: .72rem; font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--rule-soft);
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .18rem .7rem;
}
.svc-cities .sc-head {
  color: #B45309; border-color: rgba(180,83,9,.4);
  font-weight: 700;
}
.svc-points { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.svc-points li {
  position: relative;
  font-size: .88rem; color: var(--ink-soft); line-height: 1.75;
  padding: .35rem 0 .35rem 1.5rem;
}
.svc-points li::before {
  content: ""; position: absolute; left: .1rem; top: .9em;
  width: 12px; height: 7px;
  border-left: 2px solid #B45309;
  border-bottom: 2px solid #B45309;
  transform: rotate(-45deg);
}
.svc-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.svc-meta span {
  font-size: .7rem; font-weight: 500; color: var(--ink-faint);
  border: 1px solid var(--rule-soft); border-radius: 999px;
  padding: .14rem .65rem;
}
.svc-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; }

/* ============================================================
   目次 = 伴走ルート (旧TOC互換) / FAQカード (流用)
   ============================================================ */
.contents-list {
  position: relative;
  display: flex; flex-direction: column; gap: .8rem;
}
.contents-row {
  position: relative;
  display: grid;
  grid-template-columns: 7.2rem 5.2rem 1fr auto auto;
  align-items: center;
  column-gap: 1.2rem;
  padding: 1.15rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s, border-color .28s;
  overflow: hidden;
}
a.contents-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--rule);
}
a.contents-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--dawn-grad);
  transform: scaleY(0); transform-origin: top;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
a.contents-row:hover::before { transform: scaleY(1); }
.contents-row.featured {
  border: 1px solid rgba(216,68,43,.4);
  background: linear-gradient(120deg, #FFF9F6 0%, var(--card) 55%);
}
.contents-row.featured::after {
  content: "主役";
  position: absolute; top: 0; right: 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  color: #fff; background: linear-gradient(96deg, #D97706, #B45309);
  padding: .22rem .8rem .22rem .95rem;
  border-radius: 0 0 0 10px;
}
.cr-no {
  font-family: var(--font-tech);
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  color: var(--accent);
}
.cr-title { font-weight: 900; font-size: 1.02rem; letter-spacing: .06em; }
.cr-name { font-size: .95rem; color: var(--ink-soft); }
.cr-price { text-align: right; white-space: nowrap; }
.cr-price-main { font-feature-settings: "palt" 1, "tnum" 1; }
.cp-prefix { font-size: .78rem; color: var(--ink-faint); margin-right: .1rem; }
.cp-amount { font-family: var(--font-tech); font-weight: 700; font-size: 1.18rem; letter-spacing: 0; }
.cp-unit { font-size: .78rem; color: var(--ink-faint); }
.cp-unit small { font-size: .68rem; }
.cr-sub { display: block; font-size: .7rem; color: #B45309; font-weight: 700; }
.cr-leader { display: none; }
.cr-page {
  font-family: var(--font-tech);
  font-size: .8rem; font-weight: 700; color: var(--ink-faint);
  transition: color .2s, transform .28s;
}
a.contents-row:hover .cr-page { color: var(--accent); transform: translateX(4px); }
@media (max-width: 860px) {
  .contents-row { grid-template-columns: 1fr auto; row-gap: .3rem; padding: 1rem 1.15rem; }
  .cr-no { grid-column: 1 / -1; }
  .cr-title { grid-column: 1; }
  .cr-price { grid-column: 2; grid-row: 2; }
  .cr-name { grid-column: 1 / -1; font-size: .86rem; }
  .cr-page { display: none; }
}

/* FAQ (contents-row 流用・inline styleで1fr指定) */
.contents-row .cr-title { line-height: 1.7; }
.contents-row p a { color: var(--accent); border-bottom: 1px solid rgba(216,68,43,.35); }
.contents-row p a:hover { border-color: var(--accent); }

/* ============================================================
   現場記録 (before → after)
   ============================================================ */
.record-grid { display: flex; flex-direction: column; gap: 1rem; }
.record-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1.1rem; align-items: stretch;
}
@media (max-width: 760px) {
  .record-row { grid-template-columns: 1fr; }
  .record-arrow { transform: rotate(90deg); margin: -0.4rem auto; }
}
.record-before, .record-after {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.5rem 1.7rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-card);
}
.record-before { opacity: .88; }
.record-after {
  border: 1px solid rgba(216,68,43,.35);
  background: linear-gradient(135deg, #FFF9F6 0%, var(--card) 60%);
}
.rec-label {
  align-self: flex-start;
  font-size: .82rem; font-weight: 700; letter-spacing: .2em;
  color: #6B4A2E;
  background: rgba(240,160,60,.16);
  border: 1px solid rgba(180,110,50,.4); border-radius: 999px;
  padding: .24rem .95rem;
}
.record-after .rec-label {
  color: #fff;
  background: linear-gradient(96deg, #D8442B, #D97706);
  border-color: transparent;
}
.rec-val { font-size: 1.12rem; font-weight: 700; line-height: 1.6; }
.rec-num {
  font-family: var(--font-tech);
  font-weight: 700; font-size: 1.65rem;
  letter-spacing: 0;
  padding: 0 .15rem;
  font-feature-settings: "tnum" 1;
}
.record-after .rec-num {
  background: linear-gradient(92deg, var(--accent) 0%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rec-detail { font-size: .84rem; color: var(--ink-faint); }
.record-arrow {
  align-self: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--card);
  position: relative; flex-shrink: 0;
}
.record-arrow::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent);
  transform: translate(-64%, -50%) rotate(45deg);
}
.record-cite {
  margin-top: 1.8rem;
  font-size: .76rem; color: var(--ink-faint); line-height: 1.9;
}
.record-cite a { color: var(--accent); border-bottom: 1px solid rgba(216,68,43,.3); }

/* ============================================================
   提供3つ (offer)
   ============================================================ */
.offer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem; margin: 0 0 1rem;
  align-items: start;
}
@media (max-width: 860px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--night-line);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px -14px rgba(160,100,40,.28);
  padding: 1.5rem 1.5rem 1.3rem;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s, border-color .28s;
}
.offer-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.8);
  border-color: rgba(120,85,40,.45);
}
/* ライト面に置かれた offer-card (contact 等) */
.page .offer-card {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-card);
}
.page .offer-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--rule); }
.offer-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 8px;
  font-family: var(--font-tech); font-weight: 700; font-size: .92rem;
  color: var(--amber);
  border: 1px solid rgba(240,160,60,.5);
  background: rgba(240,160,60,.08);
  margin-bottom: .9rem;
}
.page .offer-no {
  color: #B45309;
  border-color: rgba(180,83,9,.4);
  background: rgba(245,158,11,.08);
}
.offer-h { margin: 0 0 .8rem; font-size: 1.08rem; font-weight: 900; line-height: 1.55; }
.offer-list { list-style: none; margin: 0; padding: 0; }
.offer-list li {
  position: relative;
  font-size: .85rem; line-height: 1.75;
  padding: .34rem 0 .34rem 1.25rem;
  color: inherit; opacity: .92;
}
.lp-cover .offer-list li { color: var(--ink-invert-soft); opacity: 1; }
.page .offer-list li { color: var(--ink-soft); }
.offer-list li::before {
  content: ""; position: absolute; left: 0; top: .92em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--amber);
  transform: rotate(45deg);
}
.offer-cta { margin-top: .9rem; display: inline-block; font-weight: 700; font-size: .88rem; color: var(--accent); }

/* ============================================================
   プラン比較
   ============================================================ */
.plan-compare {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; align-items: stretch;
}
.plan-compare-single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.plan-compare-2 { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
.plan-compare-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .plan-compare, .plan-compare-2, .plan-compare-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .plan-compare, .plan-compare-2, .plan-compare-4 { grid-template-columns: 1fr; } }
.plan-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-soft);
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: 1.9rem 1.7rem 1.7rem;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}
.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}
.plan-card.featured {
  border: 1.5px solid rgba(216,68,43,.5);
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(120deg, rgba(216,68,43,.6), rgba(240,160,60,.6), rgba(125,150,216,.5)) border-box;
  border-color: transparent;
  box-shadow: 0 14px 40px -14px rgba(216,68,43,.3);
}
.plan-card.featured::before {
  content: "おすすめ";
  position: absolute; top: -0.85rem; left: 50%;
  transform: translateX(-50%);
  font-size: .68rem; font-weight: 700; letter-spacing: .22em;
  color: #fff;
  background: linear-gradient(96deg, #D97706, #B45309);
  padding: .3rem 1.15rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px -4px rgba(180,83,9,.5);
  white-space: nowrap;
}
.plan-card-wide { grid-column: 1 / -1; }
.plan-tier {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.plan-card.featured .plan-tier { color: var(--accent); }
.plan-price-large {
  margin: 0 0 .3rem;
  font-family: var(--font-tech);
  font-weight: 700; font-size: 2.3rem; line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.plan-price-large small { font-family: var(--font-body); font-size: .8rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .02em; }
.plan-monitor {
  margin: 0 0 1.1rem;
  font-size: .8rem; font-weight: 700;
  color: #B45309;
  background: rgba(245,158,11,.1);
  border-radius: 8px;
  padding: .4rem .7rem;
}
.plan-features {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  flex-grow: 1;
}
.plan-features li {
  position: relative;
  font-size: .88rem; line-height: 1.7; color: var(--ink-soft);
  padding: .42rem 0 .42rem 1.55rem;
}
.plan-features li + li { border-top: 1px dashed var(--rule-soft); }
.plan-features li::before {
  content: ""; position: absolute; left: .1rem; top: .95em;
  width: 12px; height: 7px;
  border-left: 2px solid #B45309;
  border-bottom: 2px solid #B45309;
  transform: rotate(-45deg);
}
.plan-card .paper-button { width: 100%; }

/* ============================================================
   証拠帯 (evidence)
   ============================================================ */
.evidence-band {
  margin-top: 3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-soft);
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: 2rem 2.1rem;
}
.evidence-eyebrow {
  margin: 0 0 1.3rem;
  font-family: var(--font-tech);
  font-size: .68rem; font-weight: 700; letter-spacing: .3em;
  color: var(--accent);
}
.evidence-grid { display: grid; grid-template-columns: 1fr; }
.evidence-row {
  display: grid; grid-template-columns: 11rem 1fr 1.4fr;
  gap: 1.2rem; align-items: baseline;
  padding: .85rem 0;
}
.evidence-row + .evidence-row { border-top: 1px solid var(--rule-soft); }
@media (max-width: 760px) {
  .evidence-row { grid-template-columns: 1fr; gap: .15rem; padding: .9rem 0; }
}
.ev-label {
  font-family: var(--font-tech);
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  color: var(--ink-faint);
}
.ev-val { font-size: 1rem; }
.ev-val strong { font-weight: 900; }
.ev-detail { font-size: .8rem; color: var(--ink-faint); }

/* ============================================================
   著書 / 掲載
   ============================================================ */
.book-row {
  display: flex; gap: 2.4rem; align-items: center; flex-wrap: wrap;
}
.book-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 900px) { .book-duo { grid-template-columns: 1fr; } }
.book-card {
  display: flex; gap: 1.6rem; align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(200,170,130,.4);
  background: linear-gradient(180deg, #FFFEFB, #FFFBF2);
  box-shadow: var(--shadow-card);
  padding: 1.7rem 1.8rem;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(180,110,50,.06), 0 26px 52px -16px rgba(180,110,50,.28);
}
@media (max-width: 560px) { .book-card { flex-direction: column; text-align: center; } }
.book-card img {
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: 0 14px 34px -10px rgba(80,50,20,.4);
  transform: perspective(700px) rotateY(-5deg);
  transition: transform .3s;
}
.book-card:hover img { transform: perspective(700px) rotateY(0deg); }
.bc-meta { display: flex; flex-direction: column; }
.bc-pub {
  font-family: var(--font-tech);
  font-size: .66rem; font-weight: 700; letter-spacing: .22em;
  color: #B45309; margin: 0 0 .45rem;
}
.bc-name { margin: 0 0 .5rem; font-size: 1.18rem; font-weight: 900; line-height: 1.55; }
.bc-tag { margin: 0 0 .6rem; font-size: .84rem; color: var(--ink-soft); line-height: 1.8; }
.bc-price { margin: 0 0 .9rem; font-size: .78rem; color: var(--ink-faint); font-feature-settings: "tnum" 1; }
.bc-cta { font-family: var(--font-tech); font-size: .82rem; font-weight: 700; color: var(--accent); }
.bc-cta:hover { text-decoration: underline; }
.book-cover-paper {
  flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 18px 44px -12px rgba(14,22,38,.35);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  transform: perspective(800px) rotateY(-6deg);
}
.book-cover-paper:hover { transform: perspective(800px) rotateY(0deg) translateY(-4px); }
.book-row-meta { flex: 1 1 320px; }
.book-pub { font-family: var(--font-tech); font-size: .72rem; letter-spacing: .24em; color: var(--accent); margin: 0 0 .5rem; font-weight: 700; }
.book-name { font-size: 1.7rem; font-weight: 900; margin: 0 0 .7rem; }
.book-tag { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .8rem; }
.book-meta-row { font-size: .84rem; color: var(--ink-faint); margin: 0 0 1.3rem; font-feature-settings: "tnum" 1; }

.media-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.1rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.media-date { font-family: var(--font-tech); font-size: .8rem; color: var(--ink-faint); font-feature-settings: "tnum" 1; }
.media-title { font-weight: 700; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--rule); transition: color .2s, border-color .2s; }
.media-title:hover { color: var(--accent); border-color: var(--accent); }
.media-source { font-family: var(--font-tech); font-size: .7rem; letter-spacing: .16em; color: var(--ink-faint); }
.media-quote {
  margin: 1.6rem 0 0;
  font-family: var(--font-story);
  font-size: 1.05rem; line-height: 2.1;
  padding-left: 1.3rem;
  border-left: 3px solid; border-image: var(--dawn-grad) 1;
}
.media-disclaimer { font-size: .74rem; color: var(--ink-faint); margin-top: .9rem; }

/* Kindle showcase */
.kindle-showcase {
  display: flex; gap: 2.2rem; align-items: center; flex-wrap: wrap;
  border-radius: var(--radius-lg);
  border: 1px solid var(--night-line);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1.8rem 2rem;
  margin-bottom: 1.6rem;
}
.page .kindle-showcase { background: var(--card); border-color: var(--rule-soft); box-shadow: var(--shadow-card); }
.kindle-cover-link { flex-shrink: 0; }
.kindle-cover-img {
  border-radius: 6px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.5);
  transition: transform .3s;
}
.kindle-cover-link:hover .kindle-cover-img { transform: translateY(-4px) scale(1.015); }
.kindle-showcase-meta { flex: 1 1 300px; }
.kindle-meta-label {
  display: inline-block;
  font-family: var(--font-tech); font-size: .64rem; font-weight: 700;
  letter-spacing: .28em; color: var(--amber);
  border: 1px solid rgba(240,160,60,.4); border-radius: 999px;
  padding: .2rem .8rem; margin-bottom: .8rem;
}
.page .kindle-meta-label { color: var(--accent); border-color: rgba(216,68,43,.4); }
.kindle-meta-title { margin: 0 0 .6rem; font-size: 1.5rem; font-weight: 900; }
.kindle-meta-sub { margin: 0 0 .7rem; font-size: .92rem; opacity: .85; line-height: 1.9; }
.kindle-meta-author { margin: 0 0 1rem; font-size: .8rem; opacity: .7; line-height: 1.8; }
.kindle-meta-cta { font-weight: 700; color: var(--amber); }
.page .kindle-meta-cta { color: var(--accent); }
.kindle-meta-cta:hover { text-decoration: underline; }

/* ============================================================
   動画 / デモ・モック
   ============================================================ */
.hero-video { margin: 0 0 2rem; max-width: 720px; }
.hero-video-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--night-line);
  background: #000;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 56px -16px rgba(0,0,0,.55);
}
.hero-video-frame iframe, .hero-video-frame video { width: 100%; height: 100%; border: 0; display: block; }
.hero-video-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s; }
.hero-video-frame:hover .hero-video-thumb { transform: scale(1.04); opacity: .85; }
.hero-video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(216,68,43,.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(216,68,43,.5);
  animation: live-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
  transition: transform .25s;
}
.hero-video-frame:hover .hero-video-play { transform: translate(-50%, -50%) scale(1.08); }
.hero-video-tag {
  position: absolute; left: .9rem; bottom: .9rem;
  font-size: .74rem; font-weight: 700; color: #fff;
  background: rgba(11,18,31,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px; padding: .3rem .9rem;
}
.hero-video-caption { margin: .6rem 0 0; font-size: .76rem; opacity: .65; }

/* ブラウザ窓モック (花あわせ) */
.iframe-mock { display: block; max-width: 720px; margin: 0 0 2rem; }
.iframe-mock-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--night-line);
  background: #10192B;
  box-shadow: 0 24px 56px -16px rgba(0,0,0,.55);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.iframe-mock-link:hover .iframe-mock-frame { transform: translateY(-4px); }
.iframe-mock-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  background: rgba(247,247,243,.07);
  border-bottom: 1px solid var(--night-line);
}
.iframe-mock-dots { display: flex; gap: .38rem; }
.iframe-mock-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(247,247,243,.25); }
.iframe-mock-dots span:nth-child(1) { background: #E4664F; }
.iframe-mock-dots span:nth-child(2) { background: #F0A03C; }
.iframe-mock-dots span:nth-child(3) { background: #4ADE80; }
.iframe-mock-url {
  flex: 1;
  font-family: var(--font-tech);
  font-size: .72rem; color: rgba(244,245,240,.6);
  background: rgba(11,18,31,.5);
  border-radius: 6px; padding: .22rem .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iframe-mock-body-img { position: relative; }
.iframe-mock-body-img img { width: 100%; }
.iframe-demo-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,18,31,.4);
  opacity: 0; transition: opacity .3s;
}
.iframe-mock-link:hover .iframe-demo-overlay { opacity: 1; }
.iframe-demo-cta {
  font-weight: 700; color: #fff; font-size: 1rem;
  background: var(--accent);
  border-radius: 999px; padding: .8rem 1.7rem;
  box-shadow: 0 10px 26px -8px rgba(216,68,43,.6);
}
.iframe-mock-caption { margin: .6rem 0 0; font-size: .76rem; opacity: .65; }

/* Google Meet モック (AI参謀) */
.meet-mock { max-width: 720px; margin: 0 0 2rem; }
.meet-mock-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--night-line);
  background: #10192B;
  box-shadow: 0 24px 56px -16px rgba(0,0,0,.55);
}
.meet-mock-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 1rem;
  background: rgba(247,247,243,.07);
  border-bottom: 1px solid var(--night-line);
}
.meet-mock-time { font-family: var(--font-tech); font-size: .74rem; color: rgba(244,245,240,.65); }
.meet-mock-dots { display: flex; gap: .38rem; }
.meet-mock-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(247,247,243,.25); }
.meet-mock-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  padding: .9rem;
}
@media (max-width: 560px) { .meet-mock-grid { grid-template-columns: 1fr; } }
.meet-tile {
  border-radius: 10px;
  padding: 1.1rem 1.15rem 2.2rem;
  position: relative;
  min-height: 150px;
}
.meet-tile-president { background: linear-gradient(160deg, #22304C, #16233B); }
.meet-tile-sanbo { background: linear-gradient(160deg, #3A2723, #241A18); border: 1px solid rgba(216,68,43,.3); }
.meet-tile-name {
  position: absolute; left: .9rem; bottom: .7rem;
  font-size: .68rem; font-weight: 700;
  color: rgba(244,245,240,.75);
  background: rgba(11,18,31,.55);
  border-radius: 6px; padding: .16rem .6rem;
}
.meet-tile-line { font-size: .88rem; line-height: 1.85; color: var(--ink-invert); }
.meet-tile-tag { display: inline-block; margin-top: .4rem; font-size: .7rem; color: var(--amber); }
.meet-mock-foot {
  display: flex; gap: .6rem; padding: 0 .9rem .9rem;
}
.meet-foot-pill {
  font-family: var(--font-tech);
  font-size: .68rem; color: rgba(244,245,240,.7);
  border: 1px solid var(--night-line);
  border-radius: 999px; padding: .22rem .8rem;
}
.meet-caption { margin: .6rem 0 0; font-size: .76rem; opacity: .65; }

/* ゲーミフィケーション一覧 (ロープレ) */
.game-list { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 720px) { .game-list { grid-template-columns: 1fr; } }
.game-item {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.3rem;
  transition: transform .25s, box-shadow .25s;
}
.game-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.game-label {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--accent);
  background: rgba(216,68,43,.08);
  border-radius: 999px; padding: .18rem .75rem;
}
.game-desc { font-size: .86rem; color: var(--ink-soft); line-height: 1.8; }

/* 比較表 */
.vs-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: .9rem;
}
.vs-table th, .vs-table td { padding: .85rem 1.1rem; text-align: left; }
.vs-table thead th {
  background: var(--night); color: var(--ink-invert);
  font-size: .8rem; letter-spacing: .06em;
}
.vs-table thead th:last-child { background: linear-gradient(96deg, var(--accent), var(--accent-deep)); }
.vs-table tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.vs-table tbody td:first-child { font-weight: 700; color: var(--ink-faint); font-size: .8rem; white-space: nowrap; }
.vs-table td strong { color: var(--accent); font-weight: 900; }
@media (max-width: 640px) {
  .vs-table { display: block; overflow-x: auto; }
}

/* エリアマップ */
.map-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-soft);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(125,150,216,.08), transparent 70%),
    var(--card);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}
.area-map { width: 100%; height: auto; }
.area-map line { animation: mapdash 30s linear infinite; }
@keyframes mapdash { to { stroke-dashoffset: -320; } }
.node circle { transition: transform .25s; transform-box: fill-box; transform-origin: center; }
.node:hover circle { transform: scale(1.25); }
.node-center circle:first-of-type { animation: hub-pulse 3.2s ease-in-out infinite; }
@keyframes hub-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(216,68,43,0)); }
  50% { filter: drop-shadow(0 0 8px rgba(216,68,43,.55)); }
}

/* ============================================================
   終章 (dark) / CTA帯
   ============================================================ */
.page-dark .page-inner { position: relative; z-index: 2; }
.page-dark .sky-blob { opacity: .25; filter: blur(120px); mix-blend-mode: soft-light; }
.product-hero .sky-blob { opacity: .55; filter: blur(90px); }
/* 温白面 → 夜空帯の継ぎ目 = 伴走ライン (2本の線) */
.page-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--dawn-grad);
  opacity: .9; z-index: 1; pointer-events: none;
}
.page-dark::after {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px;
  background: var(--dawn-grad);
  opacity: .35; z-index: 1; pointer-events: none;
}

/* LINEトークのイメージ (CTA帯の右カラム) */
.page-dark .page-inner:has(.line-mock) {
  display: grid;
  grid-template-columns: 1.1fr .85fr;
  column-gap: 4.5rem;
  align-items: center;
}
.page-dark .page-inner:has(.line-mock) > *:not(.line-mock) { grid-column: 1; }
.line-mock {
  grid-column: 2; grid-row: 1 / span 3;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,246,234,.4);
  background: rgba(120,40,15,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 1.35rem 1.4rem 1.15rem;
}
.lm-head {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem;
  font-family: var(--font-tech);
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  color: #FFF6EA;
  border-bottom: 1px solid rgba(255,246,234,.35);
  padding-bottom: .75rem;
}
.lm-head::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #06C755;
  box-shadow: 0 0 9px 1px rgba(6,199,85,.6);
}
.lm-bubble {
  max-width: 88%;
  padding: .72rem 1.05rem;
  border-radius: 15px;
  font-size: .88rem; line-height: 1.85;
  margin-bottom: .75rem;
}
.lm-them {
  background: #FFFFFF;
  color: #1A1508;
  border-top-left-radius: 4px;
  box-shadow: 0 4px 14px -6px rgba(80,30,10,.35);
}
.lm-us {
  background: #06C755; color: #fff;
  margin-left: auto;
  border-top-right-radius: 4px;
}
.lm-note { margin: .5rem 0 0; font-size: .74rem; font-weight: 500; color: #FFF6EA; }
@media (max-width: 900px) {
  .page-dark .page-inner:has(.line-mock) { display: block; }
  .line-mock { margin-top: 2.4rem; }
}
.product-hero .container { position: relative; z-index: 2; }
.product-hero { position: relative; overflow: hidden; }
.page-dark {
  background:
    radial-gradient(ellipse 60% 60% at 12% 8%, rgba(255,220,140,.5), transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 118%, rgba(140,60,30,.5) 0%, transparent 66%),
    linear-gradient(165deg, #E8722F 0%, #D8532B 45%, #B23A22 100%);
  color: #FFF6EA;
  border-top: 0 !important;
  overflow: hidden;
  position: relative;
}
.page-dark { --ink-invert: #FFF6EA; --ink-invert-soft: rgba(255,246,234,.88); --night-line: rgba(255,246,234,.3); }
.page-dark .sky-grid { opacity: .1; }
.page-dark .sky-stars i { background: rgba(255,244,220,.9); }
.page-head.dark .page-title { color: #FFF6EA; }
.page-head.dark .page-no { color: #FFE9B0; }
.end-lead {
  font-family: var(--font-story);
  font-size: 1.35rem; line-height: 2.15;
  color: #FFF6EA;
  margin: 0 0 2.2rem;
}
.page-dark .hl {
  background: linear-gradient(94deg, #FFE9B0 0%, #FFF6DC 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.page-dusk .hl {
  background: linear-gradient(94deg, #D8442B 0%, #D97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }

/* ============================================================
   フローティングCTA
   ============================================================ */
.floating-cta {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 85;
  display: flex; flex-direction: column; gap: .55rem;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s, transform .4s;
}
.floating-cta.on { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta.fc-hide { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none !important; }
html.no-anim .floating-cta { opacity: 1; transform: none; pointer-events: auto; }
.float-line, .float-trial {
  display: inline-flex; align-items: center; gap: .55rem;
  border-radius: 999px;
  padding: .78rem 1.25rem;
  font-size: .88rem; font-weight: 700;
  box-shadow: 0 14px 34px -10px rgba(14,22,38,.4);
  transition: transform .22s, box-shadow .22s;
}
.float-line { background: #06C755; color: #fff; }
.float-trial {
  background: var(--night); color: var(--ink-invert);
  padding: .6rem 1.05rem; font-size: .8rem; opacity: .94;
}
.float-line:hover, .float-trial:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(14,22,38,.5); }

/* ============================================================
   奥付 (フッター)
   ============================================================ */
.colophon {
  background: #0B121F;
  color: var(--ink-invert-soft);
  padding: 4.5rem 0 2rem;
  font-size: .86rem;
  position: relative;
  overflow: hidden;
}
.colophon::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--dawn-grad);
  opacity: .8;
}
.colophon-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 860px) { .colophon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .colophon-grid { grid-template-columns: 1fr; } }
.colophon h3 {
  font-family: var(--font-tech);
  font-size: .68rem; font-weight: 700; letter-spacing: .3em;
  color: var(--amber);
  margin: 0 0 1rem;
}
.colophon p { margin: 0; line-height: 2.05; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { padding: .18rem 0; }
.colophon a { transition: color .2s; }
.colophon a:hover { color: #fff; }
.colophon-social {
  max-width: 1080px; margin: 3rem auto 0; padding: 1.6rem 1.75rem 0;
  border-top: 1px solid var(--night-line);
  display: flex; gap: 1rem;
}
.colophon-social a { transition: transform .22s, opacity .22s; opacity: .85; }
.colophon-social a:hover { transform: translateY(-3px); opacity: 1; }
.colophon-bottom {
  max-width: 1080px; margin: 1.4rem auto 0; padding: 0 1.75rem;
  font-size: .74rem; color: rgba(244,245,240,.45);
}

/* ============================================================
   お問い合わせフォーム
   ============================================================ */
.contact-form {
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.4rem 2.4rem 2.1rem;
}
@media (max-width: 640px) { .contact-form { padding: 1.6rem 1.3rem; } }
.form-row { margin-bottom: 1.35rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
.form-row label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 700;
  margin-bottom: .45rem;
}
.form-req {
  font-size: .64rem; font-weight: 700; color: #fff;
  background: var(--accent);
  border-radius: 6px; padding: .1rem .5rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: .8rem 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216,68,43,.14);
}
.contact-form textarea { resize: vertical; line-height: 1.8; }
.form-consent label { font-weight: 400; font-size: .84rem; }
.form-consent a { color: var(--accent); border-bottom: 1px solid rgba(216,68,43,.35); }
.form-note { font-size: .78rem; color: var(--ink-faint); }
.form-actions { margin-top: 1.6rem; }

/* ============================================================
   法務ページ (legal/*)
   ============================================================ */
.container { max-width: 880px; margin: 0 auto; padding: 0 1.75rem; }
.product-hero {
  padding: 4.5rem 0 3rem;
  background:
    radial-gradient(ellipse 42% 50% at 14% 20%, rgba(255,228,150,.9) 0%, transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 120%, rgba(255,140,80,.4) 0%, rgba(255,180,107,.2) 40%, transparent 66%),
    linear-gradient(180deg, #FEF9EC 0%, #FFEFD4 60%, #FFE4BC 100%);
  color: var(--ink-invert);
}
.product-hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 900; letter-spacing: .02em;
}
.benefits { padding: 3.5rem 0 5rem; }
.benefits h2 { font-size: 1.25rem; font-weight: 900; margin: 2.6rem 0 .9rem; }
.benefits p, .benefits li { color: var(--ink-soft); font-size: .95rem; }
.legal-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: .92rem;
}
.legal-table th, .legal-table td { padding: .95rem 1.2rem; text-align: left; vertical-align: top; }
.legal-table th {
  width: 32%;
  background: var(--paper-soft);
  font-weight: 700; font-size: .84rem;
  color: var(--ink-soft);
}
.legal-table tr + tr th, .legal-table tr + tr td { border-top: 1px solid var(--rule-soft); }
.legal-table a { color: var(--accent); border-bottom: 1px solid rgba(216,68,43,.35); }
@media (max-width: 640px) {
  .legal-table th, .legal-table td { display: block; width: 100%; }
  .legal-table tr + tr th { border-top: 1px solid var(--rule-soft); }
  .legal-table td { border-top: 0 !important; padding-top: .2rem; }
}

/* ============================================================
   細部
   ============================================================ */
.paper-header + .page { border-top: 0; }
.hero-video-frame:focus-visible, a.contents-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* index FAQリンク下線 */
#faq p a { color: var(--accent); border-bottom: 1px solid rgba(216,68,43,.35); }

/* スクロールバー (webkit) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper-soft); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; border: 3px solid var(--paper-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

@media (max-width: 640px) {
  .page { padding: 4.5rem 0; }
  .cover-eyebrow { font-size: .62rem; letter-spacing: .18em; padding: .4rem .85rem; }
  .lp-h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .cover { padding: 5rem 0 6rem; min-height: 0; }
  .lp-cover { padding: 4rem 0 3.6rem; }
  .cover-ctas .paper-button, .cover-ctas .paper-button-ghost,
  .lp-ctas .paper-button, .lp-ctas .paper-button-ghost { width: 100%; }
  .end-actions .paper-button { width: 100%; }
  .floating-cta { right: .8rem; bottom: .8rem; flex-direction: row; }
  .float-line span, .float-trial span { font-size: .8rem; }
}

/* ========== 用語の定義 (GEO/AIO: dl/dt/dd) ==========
   生成AIに定義文を抜き出させるための辞書ブロック。
   見立ては「辞書の見開き」。罫線で区切り、装飾は足さない。 */
.terms-lead {
  margin: 0 0 2.2rem;
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.term-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.term-list dt {
  margin: 0;
  padding: 1.6rem 0 0;
  font-family: var(--font-tech);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.term-list dt::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-top: .55rem;
  background: var(--accent);
}
.term-list dd {
  margin: 0;
  padding: .85rem 0 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .96rem;
  line-height: 1.95;
  color: var(--ink-soft);
  text-align: justify;
  text-justify: inter-character;
}
.term-list dd a {
  margin-left: .4rem;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 47, 27, .35);
  white-space: nowrap;
}
.term-list dd a:hover { border-bottom-color: var(--accent-deep); }

/* 広い画面では辞書らしく2段組にする(段間に罫) */
@media (min-width: 900px) {
  .term-list {
    column-count: 2;
    column-gap: 3.4rem;
    column-rule: 1px solid var(--rule-soft);
  }
  .term-list dt { break-after: avoid; }
  .term-list dd { break-before: avoid; break-inside: avoid; }
  .term-list dt:first-of-type { padding-top: 1.6rem; }
}

/* ========== 愛知の現在地 (出典付き公的データ / GEO) ==========
   数字より「出典」を必ず見せる。引用されるための節なので、
   装飾は最小・可読性と検証可能性を優先する。 */
.datum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.4rem;
  margin: 0 0 2.4rem;
}
.datum {
  margin: 0;
  padding: 1.7rem 1.6rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.datum-num {
  font-family: var(--font-tech);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.datum-num small {
  font-size: .9rem;
  font-weight: 500;
  margin-left: .18rem;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.datum-label {
  display: block;
  margin-top: .9rem;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.datum-sub {
  display: block;
  margin-top: .55rem;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-soft);
}
.datum-cite {
  margin-top: auto;
  padding-top: 1rem;
  font-style: normal;
  font-size: .74rem;
  line-height: 1.75;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-soft);
}
.datum-cite a {
  margin-left: .35rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.datum-cite a:hover { color: var(--accent-deep); }
.ground-close {
  max-width: 44rem;
  margin: 0 0 1.8rem;
  font-size: 1.02rem;
  line-height: 2;
  color: var(--ink);
}

/* ========== AI活用度診断 (/shindan) ==========
   採点はブラウザ内完結。装飾より可読性。
   レーダーは外部ライブラリを使わずSVGを自前描画する。 */
.dg-lead {
  max-width: 46rem;
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 2;
  color: var(--ink);
}
.dg-note {
  max-width: 46rem;
  margin: 0;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--ink-faint);
}

/* --- 進捗 --- */
.dg-progress {
  height: 3px;
  background: var(--rule-soft);
  border-radius: 2px;
  overflow: hidden;
}
.dg-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.dg-count {
  margin: .7rem 0 2rem;
  font-family: var(--font-tech);
  font-size: .82rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --- 設問 --- */
.dg-list { list-style: none; margin: 0; padding: 0; counter-reset: dgq; }
.dg-q {
  counter-increment: dgq;
  padding: 1.5rem 0 1.7rem;
  border-bottom: 1px solid var(--rule-soft);
}
.dg-q:first-child { border-top: 1px solid var(--rule); }
.dg-q-text {
  margin: 0 0 1rem;
  font-size: 1.01rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--ink);
}
.dg-q-text::before {
  content: "Q" counter(dgq);
  display: block;
  margin-bottom: .45rem;
  font-family: var(--font-tech);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--accent);
}
.dg-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.dg-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem .9rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  font-size: .91rem;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.dg-choice:hover { border-color: var(--rule); }
.dg-choice input { accent-color: var(--accent); margin: 0; flex: none; }
.dg-choice:has(input:checked) {
  border-color: var(--accent);
  background: #FFF9F6;
  color: var(--ink);
  font-weight: 600;
}
.dg-choice:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }

.dg-actions { margin-top: 2.2rem; }
.dg-actions-note { margin: .8rem 0 0; font-size: .85rem; color: var(--ink-faint); }
#dgSubmit[disabled] { opacity: .4; cursor: not-allowed; }

/* --- 結果 --- */
.dg-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
  margin-bottom: 2.6rem;
}
@media (max-width: 780px) { .dg-result-grid { grid-template-columns: 1fr; gap: 1.8rem; } }
.dg-radar { width: 100%; height: auto; max-width: 340px; }
.dg-radar-cap { margin: .2rem 0 0; font-size: .78rem; color: var(--ink-faint); }
.dg-grid { fill: none; stroke: var(--rule-soft); stroke-width: 1; }
.dg-spoke { stroke: var(--rule-soft); stroke-width: 1; }
.dg-area { fill: rgba(216, 68, 43, .16); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.dg-axis-label { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-soft); }

.dg-band-label { margin: 0; font-family: var(--font-tech); font-size: .76rem; letter-spacing: .08em; color: var(--ink-faint); }
.dg-total {
  margin: .3rem 0 .1rem;
  font-family: var(--font-tech);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dg-total small { font-size: 1rem; font-weight: 500; color: var(--ink-faint); margin-left: .2rem; }
.dg-band { margin: .2rem 0 .6rem; font-size: 1.25rem; font-weight: 700; color: var(--accent-deep); }
.dg-band-desc { margin: 0 0 1.6rem; font-size: .95rem; line-height: 1.95; color: var(--ink-soft); }

.dg-axis-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.dg-axis-list li {
  display: grid;
  grid-template-columns: 5.6rem 1fr 2.4rem;
  align-items: center;
  gap: .7rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dg-al-name { font-size: .88rem; color: var(--ink); }
.dg-al-bar { height: 6px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.dg-al-bar i { display: block; height: 100%; background: var(--accent-soft); }
.dg-al-num { font-family: var(--font-tech); font-size: .84rem; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.dg-next {
  padding: 1.8rem;
  background: var(--card);
  border: 1px solid rgba(216,68,43,.32);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}
.dg-next-label { margin: 0 0 .5rem; font-family: var(--font-tech); font-size: .76rem; letter-spacing: .08em; color: var(--accent); }
.dg-next-title { margin: 0 0 .8rem; font-size: 1.28rem; font-weight: 700; line-height: 1.6; color: var(--ink); }
.dg-next-body { margin: 0; font-size: .98rem; line-height: 2; color: var(--ink-soft); }

.dg-compare {
  padding: 1.4rem 1.5rem;
  background: var(--paper-soft);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.dg-compare p { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.95; color: var(--ink-soft); }
.dg-compare strong { color: var(--ink); }
.dg-compare .datum-cite { display: block; padding-top: 0; border-top: none; }

.dg-cta-lead { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.9; color: var(--ink); }
.dg-cta-note { margin: .9rem 0 0; font-size: .85rem; color: var(--ink-faint); }

/* ========== 診断: 前置き3問 / ゲート / 商品提案 ========== */
.dg-ctx {
  padding: 1.5rem 1.6rem 1.7rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.dg-ctx-head { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.dg-ctx-note { margin: 0 0 1.2rem; font-size: .85rem; color: var(--ink-faint); }
.dg-ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.dg-field { display: flex; flex-direction: column; gap: .4rem; }
.dg-field > span { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.dg-field em { font-style: normal; font-size: .72rem; color: var(--accent); margin-left: .3rem; }
.dg-field select,
.dg-field input {
  width: 100%;
  padding: .68rem .8rem;
  font-family: inherit;
  font-size: .93rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 9px;
}
.dg-field select:focus,
.dg-field input:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: transparent; }

/* ゲート */
.dg-gate {
  padding: 2rem 1.9rem;
  background: var(--card);
  border: 1px solid rgba(216,68,43,.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}
.dg-gate-label { margin: 0 0 .45rem; font-family: var(--font-tech); font-size: .76rem; letter-spacing: .08em; color: var(--accent); }
.dg-gate-title { margin: 0 0 1.1rem; font-size: 1.3rem; font-weight: 700; line-height: 1.6; color: var(--ink); }
.dg-gate-what { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--rule-soft); }
.dg-gate-what li {
  padding: .72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: .93rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.dg-gate-what strong { display: block; color: var(--ink); font-size: .96rem; }
.dg-gate-consent { margin: 1.1rem 0 1.3rem; font-size: .8rem; line-height: 1.8; color: var(--ink-faint); }
.dg-gate-consent a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.dg-gate-status { margin-top: 1rem; padding: .85rem 1rem; border-radius: 9px; font-size: .89rem; line-height: 1.75; }
.dg-gate-status.is-busy { background: var(--paper-soft); color: var(--ink-soft); border: 1px solid var(--rule-soft); }
.dg-gate-status.is-err  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.dg-gate-status a { color: inherit; text-decoration: underline; }
.dg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#dgLeadSubmit[disabled] { opacity: .5; cursor: not-allowed; }

/* 商品提案 */
.dg-products { margin-bottom: 2rem; }
.dg-products-label { margin: 0 0 1rem; font-family: var(--font-tech); font-size: .76rem; letter-spacing: .08em; color: var(--ink-faint); }
.dg-prod {
  padding: 1.3rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: .9rem;
}
.dg-prod.is-main { border-color: rgba(216,68,43,.38); }
.dg-prod-tag {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--accent);
  color: #fff;
}
.dg-prod-tag.sub { background: var(--paper-soft); color: var(--ink-faint); }
.dg-prod-name { margin: .6rem 0 .25rem; font-size: 1.08rem; font-weight: 700; line-height: 1.5; }
.dg-prod-name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.dg-prod-name a:hover { border-bottom-color: var(--accent); }
.dg-prod-price { margin: 0 0 .55rem; font-family: var(--font-tech); font-size: .84rem; color: var(--ink-faint); }
.dg-prod-why { margin: 0; font-size: .93rem; line-height: 1.9; color: var(--ink-soft); }
.dg-products-aside { margin: 1.2rem 0 0; font-size: .84rem; line-height: 1.85; color: var(--ink-faint); }
.dg-products-aside a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

/* ========== 診断: 1問ずつ表示 ==========
   スマホで縦に長く並ぶと「面倒そう」で離脱するため、1問ずつ差し替える。
   選ぶと自動で次へ進み、戻るボタンで前に戻れる。 */
.dg-stage {
  min-height: 19rem;
  padding: 2rem 1.9rem 2.1rem;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.dg-step-eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--font-tech);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .07em;
  color: var(--accent);
}
.dg-step-q {
  margin: 0 0 .5rem;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
}
.dg-step-note { margin: 0 0 .3rem; font-size: .87rem; line-height: 1.8; color: var(--ink-faint); }
.dg-step-choices { display: grid; gap: .6rem; margin-top: 1.5rem; }
.dg-step-choices.is-many { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.dg-opt {
  width: 100%;
  padding: .95rem 1.1rem;
  font-family: inherit;
  font-size: .98rem;
  line-height: 1.6;
  text-align: left;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.dg-opt:hover { border-color: var(--ink-faint); background: var(--card); }
.dg-opt:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.dg-opt.is-on {
  border-color: var(--accent);
  background: #FFF9F6;
  color: var(--ink);
  font-weight: 700;
}
.dg-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.dg-nav-note { margin: 0; font-size: .84rem; color: var(--ink-faint); }
#dgBack[disabled] { opacity: .35; cursor: not-allowed; }
.dg-count-left { margin-left: .5rem; color: var(--ink-faint); }

@media (max-width: 560px) {
  .dg-stage { padding: 1.5rem 1.2rem 1.7rem; min-height: 17rem; }
  .dg-step-q { font-size: 1.16rem; }
  .dg-step-choices.is-many { grid-template-columns: 1fr; }
}

/* 診断: その場で渡す結論(主役商品) */
.dg-main {
  padding: 1.5rem 1.6rem;
  background: var(--card);
  border: 1px solid rgba(216,68,43,.32);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}
.dg-main-label { margin: 0 0 .5rem; font-family: var(--font-tech); font-size: .74rem; letter-spacing: .08em; color: var(--accent); }
.dg-main-name { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 700; line-height: 1.5; }
.dg-main-name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.dg-main-name a:hover { border-bottom-color: var(--accent); }
.dg-main-price { margin: 0; font-family: var(--font-tech); font-size: .87rem; color: var(--ink-faint); }
.dg-gate-note { margin: 0 0 1.4rem; font-size: .84rem; line-height: 1.8; color: var(--ink-faint); }
.dg-gate-status.is-ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }

/* ========== ホワイトペーパー (/whitepaper) ==========
   印刷して社内で回せることを前提に、装飾より読みやすさを優先する。 */
.wp-lead { max-width: 46rem; margin: 0 0 1.2rem; font-size: 1.08rem; line-height: 2; color: var(--ink); }
.wp-note { max-width: 46rem; margin: 0 0 2rem; font-size: .92rem; line-height: 1.9; color: var(--ink-faint); }
.wp-note-dark { margin: 1.4rem 0 0; font-size: .9rem; color: var(--ink-invert-soft); }
.wp-meta { padding: 1.4rem 1.6rem; background: var(--paper-soft); border-radius: var(--radius); }
.wp-meta dl { margin: 0; display: grid; grid-template-columns: 5rem 1fr; gap: .55rem 1.2rem; font-size: .92rem; }
.wp-meta dt { font-weight: 700; color: var(--ink-faint); }
.wp-meta dd { margin: 0; color: var(--ink-soft); line-height: 1.8; }
.wp-h3 { margin: 2.6rem 0 1rem; font-size: 1.18rem; font-weight: 700; color: var(--ink); }
.wp-emphasis { margin: 1.6rem 0; padding: 1.2rem 1.4rem; background: var(--paper-soft); border-radius: var(--radius); font-size: 1rem; line-height: 2; color: var(--ink); }
.wp-source { margin: .6rem 0 1.8rem; font-size: .78rem; line-height: 1.8; color: var(--ink-faint); }
.wp-source a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.wp-table { width: 100%; border-collapse: collapse; margin: 1.4rem 0 .4rem; font-size: .95rem; }
.wp-table th { text-align: left; padding: .7rem .8rem; background: var(--paper-soft); border-bottom: 2px solid var(--rule); font-size: .85rem; color: var(--ink-faint); }
.wp-table td { padding: .68rem .8rem; border-bottom: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; }
.wp-table td:first-child { font-weight: 600; }
.wp-cases { width: 100%; border-collapse: collapse; margin: 1rem 0 0; }
.wp-cases td { padding: .9rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .95rem; line-height: 1.9; color: var(--ink-soft); }
.wp-cases strong { color: var(--ink); }
.wp-steps { display: grid; gap: 1rem; margin: 1.6rem 0; }
.wp-step { padding: 1.5rem 1.6rem; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.wp-step-no { display: inline-block; font-family: var(--font-tech); font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
.wp-step h3 { margin: .5rem 0 .6rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.wp-step p { margin: 0; font-size: .95rem; line-height: 2; color: var(--ink-soft); }
.wp-quote { margin: 0 0 1.8rem; padding: 1.6rem 1.8rem; background: var(--card); border: 1px solid var(--rule-soft); border-radius: var(--radius); }
.wp-quote p { margin: 0 0 1rem; font-family: var(--font-story); font-size: 1.08rem; line-height: 2.1; color: var(--ink); }
.wp-quote p:last-of-type { margin-bottom: 1.2rem; }
.wp-quote footer { font-size: .88rem; color: var(--ink-faint); }
.wp-list { margin: 1rem 0 1.4rem; padding-left: 1.3rem; }
.wp-list li { margin: .55rem 0; font-size: .96rem; line-height: 1.95; color: var(--ink-soft); }

@media print {
  .paper-header, .floating-cta, .end-actions { display: none; }
  .page, .page-tinted, .page-dark { background: #fff !important; color: #000 !important; page-break-inside: avoid; }
  .page-dark * { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .datum, .wp-step, .wp-quote { box-shadow: none; border: 1px solid #999; }
}

/* ナビの「無料診断」。他のリンクに埋もれると気づかれないので、輪郭を付けて浮かせる。
   2026-07-21 社長「無料診断ないけど」= ヒーロー下の小さなリンク2本だけで、
   ナビに入っていなかった。 */
.paper-nav .nav-shindan {
  padding: .34rem .8rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-deep);
  font-weight: 700;
  transition: background .2s, color .2s;
}
.paper-nav .nav-shindan:hover { background: var(--accent); color: #fff; }
@media (max-width: 720px) { .paper-nav .nav-shindan { padding: .28rem .6rem; font-size: .88rem; } }

/* ============================================================
   診断LP ファーストビュー
   以前は説明文584文字を読ませてから1問目だった。
   冷たい訪問者向けに「何が返るか」を見せて即着手できる形へ。
   ============================================================ */
.dg-hero {
  padding: 4.5rem 0 4rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-soft);
}
.dg-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: center;
}
.dg-hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .3rem .85rem;
  margin-bottom: 1.4rem;
}
/* 上限を絞ってあるのは、大きくすると「…いるのか。」が折り返して
   「か。」だけが最終行に取り残されるため。実画面で確認済み。 */
.dg-hero-title {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.46;
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
}
.dg-hero-sub {
  font-size: 1.02rem;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
}
.dg-hero-points {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.dg-hero-points li {
  border-bottom: 1px solid var(--rule);
  padding: .78rem 0 .78rem 1.5rem;
  position: relative;
  font-size: .94rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.dg-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.32rem;
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: var(--accent);
}
.dg-hero-points strong { color: var(--ink); }
.dg-hero-cta { margin-top: .4rem; }
.dg-hero-note {
  font-size: .82rem;
  color: var(--ink-faint);
  margin: .85rem 0 0;
}

/* 結果の見本 — 何が返るか分からないものに人は答えない */
.dg-sample {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.5rem 1.3rem;
}
.dg-sample figcaption {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: .5rem;
}
.dg-sample svg { width: 100%; height: auto; display: block; }
.dg-s-grid   { fill: none; stroke: var(--rule); stroke-width: 1; }
.dg-s-spoke  { stroke: var(--rule); stroke-width: 1; }
.dg-s-area   { fill: rgba(216, 68, 43, .14); stroke: var(--accent); stroke-width: 2; }
.dg-s-label  { font-size: 12px; fill: var(--ink-soft); }
.dg-sample-note {
  font-size: .84rem;
  line-height: 1.8;
  color: var(--ink-soft);
  text-align: center;
  margin: .7rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
}

/* 節の途中に置くCTA — 読み進めた人がいつでも始められるように */
.page-cta-bar {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.dg-who-lead {
  font-size: 1rem;
  line-height: 2;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.dg-who-close {
  font-size: .95rem;
  line-height: 2;
  color: var(--ink-soft);
  margin: 1.6rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 820px) {
  /* ヘッダーは position:fixed・実測72px。余白がそれ未満だと
     先頭のバッジがヘッダーの裏に潜って消える(実機で発生した) */
  .dg-hero { padding: calc(72px + 1.6rem) 0 2.6rem; }
  .dg-hero-grid { grid-template-columns: 1fr; gap: 1.6rem; }

  /* スマホは1列に積む。順番は「何の画面か → 見本 → 理由 → ボタン」。
     図を先頭にすると、説明のない大きな図から始まってしまい逆効果だった(実機確認)。
     display:contents で本文ブロックを解体し、図を文中に差し込んでいる。 */
  .dg-hero-text { display: contents; }
  .dg-hero-eyebrow { order: 1; justify-self: start; }
  .dg-hero-title   { order: 2; line-height: 1.5; margin-bottom: .6rem; }
  .dg-hero-sub     { order: 3; margin-bottom: 0; }
  .dg-hero-visual  { order: 4; }
  .dg-hero-points  { order: 5; margin-bottom: 0; }
  .dg-hero-cta     { order: 6; }

  /* 図が画面を占領しないように上限をかける */
  .dg-sample { padding: 1.1rem 1rem 1rem; max-width: 340px; margin: 0 auto; }
  .dg-s-label { font-size: 13px; }
  .dg-start { display: block; text-align: center; }
}

/* ============================================================
   トップページの診断の節
   その場で答えられる埋め込み + 何を測るかの説明を横に置く
   ============================================================ */
.shindan-embed {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  gap: 2.4rem;
  align-items: start;
  margin-top: 2.2rem;
}
.shindan-embed-side h3 {
  font-size: 1rem;
  margin: 0 0 .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
}
.shindan-embed-note {
  font-size: .85rem;
  line-height: 1.9;
  color: var(--ink-faint);
  margin: 1.2rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 900px) {
  /* 説明を先に読ませ、そのあと答えてもらう。
     いきなり質問から始まると「何の画面か」が分からない。 */
  .shindan-embed { grid-template-columns: 1fr; gap: 1.6rem; }
  .shindan-embed-side { order: -1; }
}

/* 診断の横に置く説明は必ず1列。
   .term-list は既定で2段組みだが、ここでは軸の順番どおりに
   上から読ませたい(2段だと「見える化」の隣に別の軸の説明が来る) */
.shindan-embed-side .term-list {
  grid-template-columns: 1fr;
  column-count: 1;
  display: block;
}
.shindan-embed-side .term-list dt { margin-top: .9rem; }
.shindan-embed-side .term-list dt:first-child { margin-top: 0; }

/* ============================================================
   サービスの選び方ナビ
   9サービスの並列が最大の離脱要因(4審査AI一致)。
   一覧の前に「まずこれ」の道標を置いて迷いを消す。
   ============================================================ */
.svc-picker {
  margin: 0 0 2rem;
  padding: 1.5rem 1.6rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.svc-picker-lead {
  margin: 0 0 1rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent-deep);
}
.svc-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.svc-picker-list a {
  display: block;
  padding: .8rem .95rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, background .15s, transform .15s;
}
.svc-picker-list a:hover {
  border-color: var(--accent);
  background: var(--paper-soft);
  transform: translateY(-1px);
}
.svc-picker-list b { display: block; font-size: .96rem; line-height: 1.6; }
.svc-picker-list span { display: block; margin-top: .2rem; font-size: .82rem; color: var(--ink-faint); }
.svc-picker-note {
  margin: 1rem 0 0;
  font-size: .84rem;
  line-height: 1.8;
  color: var(--ink-soft);
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.svc-grid-head {
  margin: 0 0 1rem;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
@media (max-width: 680px) {
  .svc-picker-list { grid-template-columns: 1fr; }
}

/* 集客と軸の違う商品(本づくり・記念動画)を畳む小さな行。
   グリッドの高額カードで小規模店を驚かせないため。 */
.svc-other {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  font-size: .86rem;
  line-height: 1.9;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-radius: 10px;
}
.svc-other a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.svc-other a:hover { text-decoration: underline; }

.svc-flow-note {
  margin: .6rem 0 0;
  font-size: .82rem;
  line-height: 1.75;
  color: var(--ink-faint);
}

/* 問い合わせフォームの意図分岐(相談/資料/見積もり) */
.form-intent { display: grid; grid-template-columns: 1fr; gap: .55rem; margin-top: .3rem; }
.intent-opt {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .85rem; border: 1px solid var(--rule); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.intent-opt:hover { border-color: var(--accent); background: var(--paper-soft); }
.intent-opt input { margin-top: .28rem; flex: 0 0 auto; }
.intent-opt:has(input:checked) { border-color: var(--accent); background: #FCF1EE; }
.intent-opt b { display: block; font-size: .95rem; }
.intent-opt small { display: block; margin-top: .15rem; font-size: .8rem; color: var(--ink-faint); }
@media (min-width: 620px) { .form-intent { grid-template-columns: 1fr 1fr 1fr; } }

/* はじめての実例(NightMarche・チラシ工房) */
.firstcase-card {
  margin: 2rem 0 0;
  padding: 1.8rem 2rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.firstcase-body { margin: 0 0 1.4rem; font-size: 1.05rem; line-height: 2.1; color: var(--ink); }
.firstcase-body--sub { margin: .7rem 0 0; font-size: 1rem; }
.firstcase-label { margin: 1.8rem 0 .7rem; font-size: .95rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; }
.firstcase-voice { margin: 0; padding: 1.4rem 1.6rem; background: var(--paper-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); }
.firstcase-voice p { margin: 0 0 1rem; font-family: var(--font-story); font-size: 1.06rem; line-height: 2.15; color: var(--ink); }
.firstcase-voice p:last-of-type { margin-bottom: 0; }
.firstcase-voice-attr { display: block; margin-top: 1.2rem; font-size: .9rem; color: var(--ink-faint); }
.firstcase-note { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule); font-size: .82rem; line-height: 1.8; color: var(--ink-faint); }
.firstcase-cta { margin: 1.6rem 0 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.firstcase-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; margin: 0 0 1rem; padding: .9rem 1.2rem; background: var(--paper-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius); }
.firstcase-stat-label { width: 100%; font-size: .82rem; color: var(--ink-faint); }
.firstcase-stat-figure { font-family: var(--font-story); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.firstcase-stat-figure .was { font-weight: 400; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--rule); }
.firstcase-stat-fifth { font-size: .9rem; font-weight: 700; color: var(--accent-deep); }
.firstcase-imgnote { margin: .8rem 0 0; font-size: .82rem; line-height: 1.8; color: var(--ink-faint); }