/* ============================================================
   DECA Ad 資料作成 LP v1 ／ ページ専用CSS
   元の css/tokens.css と css/deck-lp.css を、中身を変えずにつなげたもの。
   このLPは独立LP（テーマのCSSは読み込まない）。
   ============================================================ */

/* ---------- tokens.css ---------- */
/* ==========================================================================
   DECA Ad for Agency — デザイントークン
   出典: skills関係/deca-page-builder/references/design-tokens.md（main.css 実測値）
        および deca.marketing/lp/ad/（現行 DECA Ad LP・ダーク版）
   本LPはダークを基調にするため、実測のブランド色はそのまま保ち、
   暗背景で沈む分だけ「持ち上げ用」のトークンを別に定義する。
   ========================================================================== */

:root {
  /* --- ブランド原色（変更禁止・deca-logo-composer/references/logo-rules.md §2） */
  --deca-navy:     #1d2088;
  --deca-magenta:  #e4007f;
  --deca-cyan:     #00a0e9;
  --deca-red:      #f93549;   /* Cloud アクセント（シンボル） */
  --deca-mist:     #ededf3;

  /* --- 暗背景で使うための派生色。原色を明度側へ寄せただけで色相は動かさない */
  --navy-lift:     #3a3fd6;
  --magenta-lift:  #ff2e9a;
  --cyan-lift:     #33b8f0;

  /* --- 地色
     DECA資料の黒ページ（ad-proposal-deck/assets/bg/closing.png）の実測に合わせている。
     地は黒、沈み込みは #00051a の紫紺。ここを普通のダークグレーにすると別ブランドに見える。 */
  --ink:           #000208;   /* ページ地。ほぼ黒 */
  --ink-2:         #00051a;   /* セクション地。DECAの紫紺 */
  --ink-3:         #0a0e2c;   /* カード地 */
  --ink-line:      rgba(255, 255, 255, .10);
  --ink-line-2:    rgba(255, 255, 255, .18);

  /* --- 文字 */
  --fg:            rgba(255, 255, 255, .94);
  --fg-mute:       rgba(255, 255, 255, .62);
  --fg-faint:      rgba(255, 255, 255, .40);

  /* --- 明るい面（料金表・シミュレーション表など、読ませる面だけ白地にする） */
  --paper:         #ffffff;
  --paper-fg:      var(--deca-navy);   /* DECA は本文も #1d2088。黒にしない */
  --paper-mute:    #6f71a8;
  --paper-line:    #d9d9e8;

  /* --- タイポ
     DECA本体は YakuHanJP + Noto Sans JP / 英字 neue-haas-grotesk（Adobe Fonts）。
     Adobe Fonts はキットIDが要るため、英字は同系の Inter で代替している。
     本番で Typekit を通す場合は --font-en の先頭だけ差し替える。 */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Charmonman", cursive;   /* 数字・装飾のみ。本文には使わない */

  --ls-body: .06em;    /* ダーク＋小さめの字なので実測の .14em からは詰める */
  --ls-head: .04em;
  --lh-body: 1.9;

  /* --- DECAのグラデーション（黒ページ）
     出典: ad-proposal-deck/assets/bg/closing.png の実測値。
     左上マゼンタ・右下シアンの2つのブロブ。どちらも「紫紺のコア → ブランド色の輪 →
     紫紺へ沈む」という同じ構造を持つ。単なる単色ぼかしにしないこと。 */
  --glow-magenta-core: #31087b;
  --glow-magenta-mid:  #b9118a;
  --glow-magenta-peak: #e4007f;
  --glow-cyan-core:    #47359d;
  --glow-cyan-mid:     #2062bd;
  --glow-cyan-peak:    #0082be;
  --glow-sink:         #00051a;

  /* 白ページ版（chapter.png）。同じ配置で、地が白に変わる */
  --glow-light-magenta: #cd108a;
  --glow-light-cyan:    #308fd5;

  /* --- レイアウト（実測: コンテナ 1200px / セクション角丸 18px） */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --gap-section: clamp(88px, 11vw, 160px);

  /* --- 動き（実測: .325s cubic-bezier(.25,.25,.75,.75)） */
  --ease: cubic-bezier(.25, .25, .75, .75);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .325s;
}
/* ---------- deck-lp.css ---------- */
/* ==========================================================================
   DECA Ad 資料作成 LP
   他の姉妹LP（ダーク・ビジネスライク）とはわざとトーンを変えている。
   狙いは「資料づくりが仕事の中心」になっている層に、toC的な分かりやすさで届けること。
   色は DECA の原色（tokens.css）を使い、ポップさは形（吹き出し・太い罫・ずらした影）で出す。
   ========================================================================== */

:root {
  --pop-yellow: #ffe14d;     /* マーカー・ステッカーだけに使う差し色 */
  --pop-red:    #e8262b;     /* 赤ペン */
  --paper-bg:   #ffffff;
  --paper-2:    #f4f4fa;     /* Mist より少し明るい面 */
  --line-navy:  3px solid var(--deca-navy);
  --shadow-pop: 6px 6px 0 var(--deca-navy);
  --shadow-pop-sm: 4px 4px 0 var(--deca-navy);
  --font-maru: "Zen Maru Gothic", var(--font-jp);
  --font-hand: "Yomogi", "Zen Maru Gothic", var(--font-jp);
  --torn: polygon(0% 10px, 2% 4px, 4% 12px, 6% 20px, 8% 1px, 10% 2px, 12% 17px, 14% 3px, 16% 11px, 18% 18px, 20% 1px, 22% 16px, 24% 6px, 26% 1px, 28% 2px, 30% 13px, 32% 13px, 34% 2px, 36% 7px, 38% 2px, 40% 17px, 42% 13px, 44% 1px, 46% 18px, 48% 3px, 50% 7px, 52% 20px, 54% 20px, 56% 18px, 58% 1px, 60% 18px, 62% 18px, 64% 12px, 66% 1px, 68% 7px, 70% 1px, 72% 17px, 74% 4px, 76% 9px, 78% 13px, 80% 4px, 82% 17px, 84% 3px, 86% 18px, 88% 9px, 90% 17px, 92% 21px, 94% 5px, 96% 3px, 98% 18px, 100% 18px, 100% calc(100% - 20px), 98% calc(100% - 6px), 96% calc(100% - 11px), 94% calc(100% - 3px), 92% calc(100% - 17px), 90% calc(100% - 22px), 88% calc(100% - 2px), 86% calc(100% - 18px), 84% calc(100% - 1px), 82% calc(100% - 19px), 80% calc(100% - 6px), 78% calc(100% - 15px), 76% calc(100% - 21px), 74% calc(100% - 17px), 72% calc(100% - 13px), 70% calc(100% - 10px), 68% calc(100% - 14px), 66% calc(100% - 18px), 64% calc(100% - 14px), 62% calc(100% - 11px), 60% calc(100% - 9px), 58% calc(100% - 7px), 56% calc(100% - 5px), 54% calc(100% - 22px), 52% calc(100% - 7px), 50% calc(100% - 2px), 48% calc(100% - 18px), 46% calc(100% - 9px), 44% calc(100% - 16px), 42% calc(100% - 15px), 40% calc(100% - 10px), 38% calc(100% - 14px), 36% calc(100% - 9px), 34% calc(100% - 19px), 32% calc(100% - 2px), 30% calc(100% - 3px), 28% calc(100% - 16px), 26% calc(100% - 13px), 24% calc(100% - 5px), 22% calc(100% - 10px), 20% calc(100% - 4px), 18% calc(100% - 15px), 16% calc(100% - 13px), 14% calc(100% - 1px), 12% calc(100% - 21px), 10% calc(100% - 2px), 8% calc(100% - 17px), 6% calc(100% - 18px), 4% calc(100% - 10px), 2% calc(100% - 10px), 0% calc(100% - 22px));
  --hd-h: 68px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--deca-navy);
  background: var(--paper-bg);
  overflow-x: hidden;
}
main { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
b, strong { font-weight: 900; }
.num { font-family: var(--font-en); font-weight: 800; letter-spacing: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--deca-magenta); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.sp { display: none; }
@media (max-width: 720px) { .sp { display: inline; } .pc { display: none; } }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 16px; }
.skip:focus { left: 8px; }

/* マーカー */
.mk {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--pop-yellow) 58%, var(--pop-yellow) 92%, transparent 92%);
  padding-inline: .08em;
}
.mk--cyan { background: linear-gradient(transparent 58%, rgba(0, 160, 233, .55) 58%, rgba(0, 160, 233, .55) 92%, transparent 92%); }

/* 見出し */
.h2 {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
  word-break: auto-phrase;
}
.h2--inv { color: #fff; }
.h3 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1.4; word-break: auto-phrase; }
.h3--inv { color: #fff; }
.lead { margin-top: 18px; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.9; color: #3b3e85; }
.lead--inv { color: rgba(255, 255, 255, .8); }
.note { margin-top: 14px; font-size: 12.5px; color: #6f71a8; }
.note--c { text-align: center; }

/* スタンプ（章ラベル） */
.stamp {
  display: inline-block;
  font-family: var(--font-maru);
  font-weight: 900;
  font-size: clamp(14px, 1.6vw, 17px);
  padding: 6px 18px 7px;
  border: var(--line-navy);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-pop-sm);
  transform: rotate(-2deg);
  margin-bottom: 20px;
}
.stamp--navy   { background: var(--deca-navy); color: #fff; }
.stamp--mag    { background: var(--deca-magenta); color: #fff; }
.stamp--cyan   { background: var(--deca-cyan); color: #fff; border-color: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.9); }
.stamp--yellow { background: var(--pop-yellow); }
.stamp--ruin   { background: #e9e3d6; color: #2a2a2e; border-color: #2a2a2e; box-shadow: 4px 4px 0 #000; }
.stamp--red    { background: var(--pop-red); color: #fff; border-color: #fff; box-shadow: 4px 4px 0 #000; }

/* ---------------------------------------------------------------- ボタン */
.btn {
  --bg: #fff; --fg: var(--deca-navy); --bd: var(--deca-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-pop-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur), color var(--dur);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--deca-navy); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--deca-navy); }
.btn--primary { --bg: var(--deca-magenta); --fg: #fff; }
.btn--primary::after { content: "→"; font-family: var(--font-en); }
.btn--ghost:hover { --bg: var(--deca-magenta); --fg: #fff; }
.btn--inv { --bg: transparent; --fg: #fff; --bd: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.35); }
.btn--inv:hover { --bg: #fff; --fg: var(--deca-navy); box-shadow: 6px 6px 0 rgba(255,255,255,.5); }
.btn--sm { min-height: 42px; padding: 7px 18px; font-size: 14px; box-shadow: 3px 3px 0 var(--deca-navy); }
.btn--sm.btn--inv { box-shadow: 3px 3px 0 rgba(255,255,255,.35); }
.btn--xl { min-height: 68px; padding: 16px 40px; font-size: clamp(16px, 2vw, 20px); }

/* ---------------------------------------------------------------- ヘッダー */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: #fff;
  border-bottom: 3px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.hd.is-scrolled { border-bottom-color: var(--deca-navy); }
.hd__in { max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); height: var(--hd-h); display: flex; align-items: center; gap: 24px; }
.hd__logo img { width: 148px; height: auto; }
.hd__nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 700; }
.hd__nav a { text-decoration: none; }
.hd__nav a:hover { color: var(--deca-magenta); }
.hd__cta { display: flex; gap: 10px; }
@media (max-width: 1040px) { .hd__nav { display: none; } .hd__cta { margin-left: auto; } }
@media (max-width: 640px) { .hd__cta { display: none; } .hd__logo img { width: 128px; } }

/* ---------------------------------------------------------------- KV */
.kv {
  position: relative;
  overflow: hidden;
  padding: calc(var(--hd-h) + clamp(28px, 5vw, 64px)) 0 clamp(64px, 8vw, 104px);
  background: #fff;
  isolation: isolate;
}
/* 集中線 */
.kv__lines {
  position: absolute; inset: -40%; z-index: -2;
  background: repeating-conic-gradient(from 0deg at 68% 48%, rgba(29, 32, 136, .07) 0deg 3deg, transparent 3deg 9deg);
  animation: kv-spin 90s linear infinite;
}
.kv__dots {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 88%, rgba(0, 160, 233, .18), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(228, 0, 127, .14), transparent 30%),
    radial-gradient(rgba(29, 32, 136, .16) 1.4px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.25) 70%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.25) 70%, #000 100%);
}
@keyframes kv-spin { to { transform: rotate(360deg); } }

.kv__grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.kv__sticker {
  position: relative;
  display: inline-grid; place-items: center;
  width: clamp(120px, 14vw, 156px); aspect-ratio: 1;
  margin-bottom: 18px;
  font-family: var(--font-maru); font-weight: 900; line-height: 1.2;
  font-size: clamp(19px, 2.2vw, 24px);
  text-align: center;
  color: var(--deca-navy);
  transform: rotate(-10deg);
  animation: pop-in .6s var(--ease-out) both .1s, wobble 3.2s ease-in-out infinite 1s;
}
.kv__sticker::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pop-yellow);
  clip-path: polygon(50% 0%, 59% 13%, 75% 6%, 76% 22%, 93% 25%, 86% 40%, 100% 50%, 86% 60%, 93% 75%, 76% 78%, 75% 94%, 59% 87%, 50% 100%, 41% 87%, 25% 94%, 24% 78%, 7% 75%, 14% 60%, 0% 50%, 14% 40%, 7% 25%, 24% 22%, 25% 6%, 41% 13%);
  filter: drop-shadow(4px 4px 0 var(--deca-navy));
}
.kv__product {
  display: inline-block;
  font-weight: 900; font-size: clamp(15px, 1.6vw, 18px);
  padding: 4px 14px;
  background: var(--deca-navy); color: #fff;
  border-radius: 6px;
  margin-bottom: 14px;
}
.kv__product span { font-family: var(--font-en); color: var(--cyan-lift); margin-right: .2em; }
.kv__h1 {
  font-size: clamp(34px, 4.1vw, 60px);
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  letter-spacing: .01em;
  word-break: auto-phrase;
}
.kv__lead { margin-top: 22px; font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; line-height: 1.8; }
.kv__lead b { font-family: var(--font-en); font-size: 1.3em; color: var(--deca-magenta); }

.kv__stage { position: relative; min-height: clamp(420px, 44vw, 560px); }
.kv__burst {
  position: absolute; left: 50%; top: 50%; width: 88%; aspect-ratio: 1; translate: -50% -50%;
  background: var(--deca-cyan);
  clip-path: polygon(50% 0%, 57% 16%, 71% 4%, 71% 22%, 88% 15%, 81% 31%, 100% 32%, 86% 45%, 100% 57%, 83% 62%, 92% 79%, 74% 76%, 72% 95%, 58% 83%, 46% 100%, 40% 83%, 22% 93%, 25% 74%, 5% 76%, 16% 60%, 0% 50%, 16% 40%, 4% 24%, 23% 24%, 22% 5%, 38% 16%);
  opacity: .16;
  animation: kv-spin 60s linear infinite reverse;
}

/* 顔 */
.face { position: relative; }
.face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid var(--deca-navy); box-shadow: var(--shadow-pop); background: #eee; }
.face--kv { position: absolute; left: 50%; top: 52%; width: clamp(200px, 23vw, 290px); aspect-ratio: 1; translate: -50% -50%; animation: pop-in .7s var(--ease-out) both .25s; }
.face__tag {
  position: absolute; left: 50%; bottom: -14px; translate: -50% 0;
  white-space: nowrap;
  background: var(--deca-magenta); color: #fff;
  font-weight: 900; font-size: 14px;
  padding: 3px 14px; border-radius: 999px; border: 3px solid var(--deca-navy);
}

/* 吹き出し */
.bubble {
  position: relative;
  display: inline-block;
  background: #fff;
  border: var(--line-navy);
  border-radius: 22px;
  box-shadow: var(--shadow-pop-sm);
  padding: 14px 20px;
  font-family: var(--font-maru);
  font-weight: 900;
  line-height: 1.5;
  word-break: auto-phrase;
}
.bubble b { color: var(--deca-magenta); font-family: var(--font-maru); }
.bubble::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  background: inherit; border: inherit; border-width: 0 3px 3px 0;
}
.bubble--main {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  font-size: clamp(20px, 2.4vw, 28px);
  background: var(--pop-yellow);
  padding: 14px 26px;
  white-space: nowrap;
  z-index: 3;
  animation: pop-in .5s var(--ease-out) both .55s;
}
.bubble--main::after { left: 50%; bottom: -11px; translate: -50% 0; rotate: 45deg; }
.pains { position: absolute; inset: 0; z-index: 2; }
.bubble--pain { position: absolute; font-size: clamp(13px, 1.25vw, 15px); padding: 10px 14px; }
.bubble--pain::after { width: 14px; height: 14px; }
.pains li:nth-child(1) { left: -2%; top: 19%; rotate: -3deg; animation: pop-in .5s var(--ease-out) both .8s; }
.pains li:nth-child(1)::after { right: -9px; top: 50%; rotate: -45deg; }
.pains li:nth-child(2) { right: -2%; top: 22%; rotate: 3deg;  animation: pop-in .5s var(--ease-out) both .95s; }
.pains li:nth-child(2)::after { left: -9px; top: 50%; rotate: 135deg; }
.pains li:nth-child(3) { left: 2%;  bottom: 4%; rotate: 2deg; animation: pop-in .5s var(--ease-out) both 1.1s; }
.pains li:nth-child(3)::after { right: 22%; top: -9px; rotate: -135deg; }
.pains li:nth-child(4) { right: 1%; bottom: 8%; rotate: -2deg; animation: pop-in .5s var(--ease-out) both 1.25s; }
.pains li:nth-child(4)::after { left: 22%; top: -9px; rotate: -135deg; }

.kv__scroll {
  display: table; margin: clamp(40px, 5vw, 64px) auto 0;
  font-family: var(--font-maru); font-weight: 900; text-decoration: none;
  padding: 8px 20px; border-bottom: 3px solid var(--deca-navy);
}
.kv__scroll span { display: inline-block; animation: bob 1.4s ease-in-out infinite; }

@keyframes pop-in { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 900px) {
  .kv__grid { grid-template-columns: 1fr; }
  .kv__copy { text-align: center; }
  .kv__stage { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
  .kv__burst { width: 110%; top: 30%; }
  .bubble--main { position: relative; left: auto; top: auto; translate: none; order: 1; }
  .face--kv { position: relative; left: auto; top: auto; translate: none; order: 2; width: 200px; margin: 8px 0 18px; }
  .pains { position: relative; order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
  .pains li { position: relative !important; inset: auto !important; rotate: 0deg !important; }
  .pains li::after { display: none; }
}
@media (max-width: 480px) { .pains { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ボロボロ（失敗例） */
.ruin {
  position: relative;
  isolation: isolate;
  padding: clamp(80px, 10vw, 128px) 0;
  color: #ece8df;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(120, 92, 60, .35), transparent 38%),
    radial-gradient(ellipse at 82% 70%, rgba(90, 70, 50, .32), transparent 42%),
    radial-gradient(ellipse at 60% 10%, rgba(0, 0, 0, .5), transparent 50%),
    #26252a;
  clip-path: var(--torn);
  margin-block: -22px;
}
.ruin--2 { background:
    radial-gradient(ellipse at 80% 12%, rgba(120, 92, 60, .3), transparent 40%),
    radial-gradient(ellipse at 10% 80%, rgba(90, 70, 50, .3), transparent 42%),
    #1f1e22; margin-top: 0; }
.ruin__noise {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg fill='none' stroke='rgba(255,255,255,.07)' stroke-width='1.4'%3E%3Cpath d='M231 286 L253 296 L277 290 L290 304 L313 297 L324 307 L341 298 L351 314 L381 298 L408 305 L430 297 L457 279 L481 265'/%3E%3Cpath d='M30 58 L44 55 L71 38 L93 40 L115 34 L139 30 L167 30 L190 12'/%3E%3Cpath d='M262 147 L270 133 L296 121 L316 109 L333 115 L343 98 L372 80 L386 75 L395 87 L415 94 L436 80 L462 74 L491 73'/%3E%3Cpath d='M172 144 L189 147 L197 155 L208 145 L223 133 L231 118 L253 131 L266 148'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .5;
  mix-blend-mode: overlay;
}
.ruin__head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.ruin__h2 {
  font-size: clamp(32px, 5.4vw, 64px); font-weight: 900; line-height: 1.3; color: #f1ede4;
  text-shadow: 3px 3px 0 #000;
  word-break: auto-phrase;
}
.ruin__h2--sm { font-size: clamp(28px, 4.2vw, 48px); }
.ruin__but { display: inline-block; color: #9b968c; font-size: .85em; transform: rotate(-3deg) translateY(4px); animation: droop 2.6s ease-in-out infinite; }
@keyframes droop { 0%, 100% { transform: rotate(-3deg) translateY(4px); } 50% { transform: rotate(-6deg) translateY(10px); } }
.ruin__lead { margin-top: 18px; color: #bdb7ab; font-size: clamp(15px, 1.7vw, 17px); }

/* ---------------------------------------------------------------- スライドビューア */
.viewer { position: relative; max-width: 1000px; margin-inline: auto; }
.viewer__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; touch-action: pan-y; }
.viewer__img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .18s; }
.viewer__img.is-fading { opacity: .15; }
.viewer__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 34px; line-height: 1; font-family: var(--font-en); font-weight: 800;
  border: 3px solid var(--deca-navy); background: #fff; color: var(--deca-navy);
  cursor: pointer; box-shadow: 3px 3px 0 var(--deca-navy);
  padding-bottom: 4px;
  transition: transform .2s var(--ease-out), background .2s;
}
.viewer__nav:hover { background: var(--pop-yellow); transform: scale(1.08); }
.viewer__nav--prev { left: 12px; }
.viewer__nav--next { right: 12px; }
.viewer__bar { display: flex; align-items: baseline; gap: 16px; margin-top: 16px; }
.viewer__count { font-family: var(--font-en); font-size: 15px; white-space: nowrap; }
.viewer__count b { font-size: 26px; }
.viewer__title { flex: 1; font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__hint { font-size: 12px; opacity: .7; white-space: nowrap; }
@media (max-width: 640px) { .viewer__hint { display: none; } .viewer__nav { width: 40px; height: 40px; font-size: 26px; } .viewer__nav--prev { left: 6px; } .viewer__nav--next { right: 6px; } }

.viewer__thumbs {
  display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; padding: 4px 4px 12px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.viewer__thumb {
  flex: 0 0 auto; width: 112px; aspect-ratio: 16 / 9; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #fff; opacity: .6;
  scroll-snap-align: center;
  transition: opacity .2s, border-color .2s, transform .2s;
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer__thumb:hover { opacity: 1; }
.viewer__thumb[aria-selected="true"] { opacity: 1; border-color: var(--deca-magenta); transform: translateY(-3px); }

/* 失敗例：くしゃくしゃの紙に貼った体裁 */
.viewer--ruin { padding: clamp(12px, 2vw, 22px); background: #e9e4d8; color: #2a2a2e; transform: rotate(-.8deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(0,0,0,.06) 40%, transparent 44%),
    linear-gradient(35deg, transparent 58%, rgba(0,0,0,.05) 60%, transparent 63%),
    linear-gradient(160deg, transparent 20%, rgba(255,255,255,.4) 22%, transparent 26%);
}
.viewer--ruin .viewer__screen { outline: 1px solid rgba(0,0,0,.15); }
.viewer--ruin .viewer__nav { border-color: #2a2a2e; color: #2a2a2e; box-shadow: 3px 3px 0 #2a2a2e; }
.viewer--ruin .viewer__thumb { border-radius: 2px; }
.viewer--ruin .viewer__thumb[aria-selected="true"] { border-color: var(--pop-red); }
.tape { position: absolute; z-index: 2; width: 120px; height: 34px; background: rgba(255, 236, 160, .75); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.tape--l { left: -30px; top: 6px; rotate: -32deg; }
.tape--r { right: -30px; top: 6px; rotate: 30deg; }
@media (max-width: 640px) { .tape { width: 72px; height: 24px; } .tape--l { left: -12px; } .tape--r { right: -12px; } }

/* 良い例：モニター風 */
.viewer--good { padding: clamp(10px, 1.6vw, 16px); background: var(--deca-navy); border-radius: 20px; box-shadow: 10px 10px 0 var(--deca-magenta); color: #fff; }
.viewer--good .viewer__screen { border-radius: 8px; }
.viewer--good .viewer__bar, .viewer--good .viewer__thumbs { padding-inline: 6px; }
.viewer__of { opacity: .6; font-size: 13px; margin-left: 4px; }
.viewer__lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; text-align: center; color: #fff;
  background: rgba(0, 5, 26, .72);
}
.viewer__lock[hidden] { display: none !important; }
.viewer__screen.is-locked .viewer__img { filter: blur(8px) saturate(.6); transform: scale(1.06); }
.viewer__lock-badge { font-weight: 900; font-size: 13px; padding: 3px 14px; border-radius: 999px; background: var(--pop-yellow); color: var(--deca-navy); }
.viewer__lock-h { font-family: var(--font-maru); font-weight: 900; font-size: clamp(22px, 3.6vw, 40px); line-height: 1.35; }
.viewer__lock-h .num { font-size: 1.3em; color: var(--pop-yellow); }
.viewer__lock-h b:not(.num) { color: var(--pop-yellow); }
.viewer__lock-p { font-size: clamp(12px, 1.4vw, 15px); color: rgba(255,255,255,.85); line-height: 1.7; }
.viewer__lock .btn { margin-top: 6px; box-shadow: 4px 4px 0 #fff; }
@media (max-width: 560px) { .viewer__lock-p { display: none; } .viewer__lock .btn { min-height: 40px; padding: 6px 16px; font-size: 13px; } }
.viewer__screen.is-locked .viewer__nav--next { display: none; }
.viewer__thumb--lock { display: grid; place-items: center; background: var(--deca-magenta); color: #fff; font-weight: 900; font-size: 12px; line-height: 1.3; opacity: 1 !important; }
.viewer__thumb--lock b { font: 900 17px var(--font-en); }
.viewer--good .viewer__thumb { opacity: .5; }
.viewer--good .viewer__thumb[aria-selected="true"] { opacity: 1; border-color: var(--pop-yellow); }

/* ---------------------------------------------------------------- 赤ペン */
.redpen { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); max-width: 1080px; margin-inline: auto; }
.rp { background: #ece7db; color: #2a2a2e; padding: clamp(14px, 2vw, 20px); box-shadow: 0 18px 36px rgba(0,0,0,.45); }
.rp:nth-child(odd) { rotate: -.7deg; }
.rp:nth-child(even) { rotate: .8deg; }
.rp__shot { position: relative; aspect-ratio: 16 / 9; background: #fff; overflow: hidden; outline: 1px solid rgba(0,0,0,.12); }
.rp__shot > img { width: 100%; height: 100%; object-fit: cover; }
.rp__mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rp__mark ellipse { fill: none; stroke: var(--pop-red); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1.05 1.05; stroke-dashoffset: 1.05; }
.rp.is-in .rp__mark ellipse { transition: stroke-dashoffset 1s ease-out .3s; stroke-dashoffset: 0; }
.rp__scribble {
  position: absolute; translate: -50% 0;
  font-family: var(--font-hand); color: var(--pop-red); font-size: clamp(15px, 1.9vw, 22px); font-weight: 400;
  white-space: nowrap; background: rgba(255,255,255,.85); padding: 0 8px; rotate: -4deg;
  opacity: 0; transition: opacity .4s 1.1s;
}
.rp.is-in .rp__scribble { opacity: 1; }
.rp__body { position: relative; padding: 18px 6px 6px 64px; }
.rp__no {
  position: absolute; left: 4px; top: 16px;
  font-family: var(--font-en); font-weight: 900; font-size: 20px;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 3px solid var(--pop-red); color: var(--pop-red); border-radius: 50%; rotate: -8deg;
}
.rp__h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 900; line-height: 1.4; margin-bottom: 6px; }
.rp__body p:not(.rp__no) { font-size: 15px; line-height: 1.8; }
.rp__body b { color: var(--pop-red); }

.rp__shot--words { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px 12px; padding: 14px; background: #fff; }
.bw { font-weight: 900; color: #6b6b80; line-height: 1.2; }
.bw i { font-style: normal; font-family: var(--font-en); font-size: .6em; color: var(--pop-red); margin-left: 2px; }
.bw--xl { font-size: clamp(30px, 4vw, 44px); color: #4f46e5; }
.bw--l  { font-size: clamp(19px, 2.3vw, 26px); color: #5b5bd6; }
.bw--m  { font-size: clamp(15px, 1.7vw, 19px); }
.bw--s  { font-size: clamp(12px, 1.3vw, 14px); color: #9a9aac; }
.rp.is-in .bw { animation: pop-in .4s var(--ease-out) both; }
.rp.is-in .bw:nth-child(2n) { animation-delay: .1s; } .rp.is-in .bw:nth-child(3n) { animation-delay: .2s; } .rp.is-in .bw:nth-child(5n) { animation-delay: .3s; }

.rp__shot--count { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(12px, 2vw, 22px); background: #fff; }
.cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.cells i { aspect-ratio: 16 / 9; border: 1.5px dashed #c9c4b8; border-radius: 2px; }
.cells i.is-got { border: 0; background: #8b87c9; }
.cells i.is-src { border: 0; background: #c9c4b8; }
.rp.is-in .cells i.is-got, .rp.is-in .cells i.is-src { animation: pop-in .3s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.cells__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.cells__legend b { color: var(--pop-red); font-family: var(--font-en); }
.lg { display: inline-block; width: 14px; height: 9px; margin-right: 5px; vertical-align: 0; border-radius: 2px; }
.lg--got { background: #8b87c9; } .lg--src { background: #c9c4b8; } .lg--need { border: 1.5px dashed #b8b2a5; }

.rp--count { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px 24px; align-items: center; rotate: -.4deg !important; }
.rp--count .rp__body { padding-top: 6px; }
@media (max-width: 800px) { .rp--count { grid-template-columns: 1fr; } }
.rp--extra { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; rotate: 0deg !important; padding: 16px 22px; background: #d9d3c4; font-size: 15px; }
.rp__extra-tag { flex: 0 0 auto; font-family: var(--font-hand); color: #fff; background: var(--pop-red); padding: 2px 12px; rotate: -6deg; font-size: 18px; }
.rp--extra q { font-weight: 900; }

@media (max-width: 800px) { .redpen { grid-template-columns: 1fr; } .rp { rotate: 0deg !important; } }

/* ---------------------------------------------------------------- 諦め（小池 再登場） */
.giveup { position: relative; padding: clamp(96px, 12vw, 150px) 0 clamp(64px, 8vw, 96px); background: var(--paper-2);
  background-image: radial-gradient(rgba(29, 32, 136, .1) 1.4px, transparent 1.6px); background-size: 18px 18px; }
.giveup__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; max-width: 980px; }
.face--giveup { width: clamp(150px, 20vw, 230px); aspect-ratio: 1; }
.face--giveup img { filter: saturate(.85); }
.bubble--big { font-size: clamp(20px, 3vw, 34px); padding: clamp(20px, 3vw, 32px) clamp(22px, 3.4vw, 40px); border-radius: 30px; line-height: 1.55; box-shadow: var(--shadow-pop); }
.bubble--big em { font-style: normal; color: var(--deca-magenta); font-size: 1.08em; }
.bubble--big::after { left: -12px; top: 44%; rotate: 135deg; width: 22px; height: 22px; }
.giveup__but { margin-top: 22px; font-family: var(--font-maru); font-weight: 900; font-size: clamp(18px, 2.2vw, 24px); }
@media (max-width: 720px) {
  .giveup__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bubble--big::after { left: 50%; top: -12px; rotate: -135deg; translate: -50% 0; }
}

/* CTA帯 */
.ctaband {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 40px);
  background: #fff; border: var(--line-navy); border-radius: 22px; box-shadow: var(--shadow-pop);
}
.ctaband__txt { font-size: clamp(16px, 1.9vw, 20px); font-weight: 700; line-height: 1.6; }
.ctaband__txt b { color: var(--deca-magenta); }
.ctaband__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ctaband--light { background: var(--pop-yellow); }
.ctaband--inv { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.7); color: #fff; box-shadow: 6px 6px 0 var(--deca-cyan); }
.ctaband--inv .ctaband__txt b { color: var(--pop-yellow); }
@media (max-width: 720px) { .ctaband { flex-direction: column; text-align: center; } .ctaband__btns { justify-content: center; } }

/* ---------------------------------------------------------------- 良い例 */
.good { position: relative; padding: clamp(88px, 11vw, 140px) 0; background: #fff; overflow: hidden; isolation: isolate; }
.good::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at -3% -6%, rgba(205, 16, 138, .22), transparent 30%),
    radial-gradient(circle at 104% 30%, rgba(48, 143, 213, .2), transparent 28%),
    radial-gradient(circle at 10% 88%, rgba(48, 143, 213, .12), transparent 26%);
}
.good__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 900px; margin: 0 auto clamp(36px, 5vw, 56px); }
.stats li { text-align: center; padding: 16px 8px 14px; border: var(--line-navy); border-radius: 18px; background: #fff; box-shadow: var(--shadow-pop-sm); }
.stats b { font-size: clamp(36px, 5vw, 58px); line-height: 1; color: var(--deca-magenta); }
.stats span { font-weight: 900; margin-left: 2px; }
.stats small { display: block; margin-top: 6px; font-size: 12.5px; color: #6f71a8; font-weight: 700; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.good__sub { text-align: center; margin: clamp(64px, 8vw, 96px) 0 clamp(24px, 3vw, 36px); }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.pick__btn {
  display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; cursor: pointer;
  padding: 12px 12px 16px; background: #fff; border: var(--line-navy); border-radius: 18px; box-shadow: var(--shadow-pop-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.pick__btn:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--deca-magenta); }
.pick__btn img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--paper-line); }
.pick__tag { align-self: flex-start; margin-top: 12px; font-size: 12.5px; font-weight: 900; padding: 2px 10px; border-radius: 999px; background: var(--deca-navy); color: #fff; }
.pick__h { margin-top: 8px; font-size: 17px; font-weight: 900; line-height: 1.45; }
.pick__p { margin-top: 6px; font-size: 14px; line-height: 1.75; color: #3b3e85; flex: 1; }
.pick__go { margin-top: 10px; font-weight: 900; font-size: 14px; color: var(--deca-magenta); }
@media (max-width: 900px) { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .picks { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 仕組み */
.engine { position: relative; padding: clamp(88px, 11vw, 140px) 0; background: var(--ink-2); color: #fff; overflow: hidden; isolation: isolate; }
.engine__grid-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at -3% -10%, rgba(185, 17, 138, .55), transparent 34%),
    radial-gradient(circle at 103% 110%, rgba(32, 98, 189, .6), transparent 36%),
    linear-gradient(rgba(51, 184, 240, .08) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(51, 184, 240, .08) 1px, transparent 1px) 0 0 / 40px 40px;
}
.engine__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }

.lanes { display: grid; grid-template-columns: 1fr 2.1fr; gap: clamp(18px, 3vw, 32px); align-items: stretch; }
.lane { border-radius: 20px; padding: clamp(18px, 2.6vw, 28px); }
.lane__label { display: inline-block; font-weight: 900; font-size: 14px; padding: 3px 14px; border-radius: 999px; margin-bottom: 18px; }
.lane__cap { margin-top: 18px; font-size: 14px; line-height: 1.8; }

.lane--ruin { background: #2a2a2e; color: #d4cfc4; border: 2px dashed #6b6860; filter: grayscale(.2); }
.lane--ruin .lane__label { background: #6b6860; color: #fff; }
.lane__flow { display: flex; flex-direction: column; gap: 26px; }
.node { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.node small { display: block; font-size: 12px; opacity: .7; font-weight: 500; }
.node--ruin { background: #3a3a3f; border: 1px solid #55534d; }
.node--ruin:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -24px; translate: -50% 0; color: #8a867c; font-weight: 900; }
.node--box { border-style: dashed; justify-content: flex-start; }
.node__ic { font-size: 22px; }

.lane--deca { background: rgba(10, 14, 44, .75); border: 2px solid rgba(51, 184, 240, .6); box-shadow: 0 0 0 6px rgba(51, 184, 240, .08), 0 20px 60px rgba(0, 0, 0, .4); }
.lane__label--deca { background: var(--deca-cyan); color: #fff; }
.lane__cap--deca { color: rgba(255, 255, 255, .85); }
.lane__note { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .55); }
.pipe { display: grid; grid-template-columns: auto 34px 1fr 34px auto; align-items: center; gap: 8px; }
.pipe__in { display: flex; flex-direction: column; gap: 8px; }
.pipe__in li { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.pipe__arrow { position: relative; height: 3px; background: linear-gradient(90deg, transparent, var(--cyan-lift)); overflow: hidden; }
.pipe__arrow::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: #fff; animation: flow 1.6s linear infinite; }
@keyframes flow { to { left: 100%; } }
.pipe__stack { display: flex; flex-direction: column; gap: 6px; }
.pipe__stack li {
  display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(29, 32, 136, .9), rgba(58, 63, 214, .55));
  border: 1px solid rgba(51, 184, 240, .45);
  position: relative; overflow: hidden;
}
.pipe__stack li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); translate: -100% 0; }
.lane--deca.is-in .pipe__stack li::after { animation: scan 2.8s ease-in-out infinite; }
.lane--deca.is-in .pipe__stack li:nth-child(2)::after { animation-delay: .25s; }
.lane--deca.is-in .pipe__stack li:nth-child(3)::after { animation-delay: .5s; }
.lane--deca.is-in .pipe__stack li:nth-child(4)::after { animation-delay: .75s; }
.lane--deca.is-in .pipe__stack li:nth-child(5)::after { animation-delay: 1s; }
@keyframes scan { 0% { translate: -100% 0; } 60%, 100% { translate: 100% 0; } }
.pipe__stack b { font-family: var(--font-en); font-size: 12px; color: var(--cyan-lift); letter-spacing: .08em; }
.pipe__name { font-weight: 900; font-size: 15px; white-space: nowrap; }
.pipe__desc { font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.5; }
.pipe__out { text-align: center; padding: 14px 12px; border-radius: 14px; background: var(--deca-magenta); font-weight: 900; line-height: 1.3; box-shadow: 0 0 30px rgba(228, 0, 127, .5); white-space: nowrap; }
.pipe__out b { display: block; font-size: 36px; }
@media (max-width: 1040px) {
  .lanes { grid-template-columns: 1fr; }
  .lane__flow { flex-direction: row; gap: 30px; }
  .lane__flow .node { flex: 1; }
  .node--ruin:not(:last-child)::after { content: "→"; left: auto; right: -22px; bottom: auto; top: 50%; translate: 0 -50%; }
}
@media (max-width: 760px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe__in { flex-direction: row; flex-wrap: wrap; }
  .pipe__arrow { width: 3px; height: 26px; margin-inline: auto; background: linear-gradient(180deg, transparent, var(--cyan-lift)); }
  .pipe__arrow::after { width: 100%; height: 40%; left: 0; top: -40%; animation-name: flow-v; }
  .pipe__stack li { grid-template-columns: 30px 1fr; }
  .pipe__desc { grid-column: 2; }
  .lane__flow { flex-direction: column; gap: 26px; }
  .node--ruin:not(:last-child)::after { content: "↓"; left: 50%; right: auto; top: auto; bottom: -24px; translate: -50% 0; }
}
@keyframes flow-v { to { top: 100%; } }

/* レイヤーの分解図 */
.layers { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(64px, 8vw, 104px); }
.layers__txt > p { margin-top: 16px; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.9; }
.layers__legend { margin: 20px 0 24px; display: grid; gap: 6px; }
.layers__legend li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: rgba(255,255,255,.75); transition: color .3s; }
.layers__legend b { font-family: var(--font-en); font-size: 12px; width: 30px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(51,184,240,.6); color: var(--cyan-lift); }
.layers__legend li.is-hot { color: #fff; }
.layers__legend li.is-hot b { background: var(--deca-cyan); color: #fff; }

.stack { position: relative; aspect-ratio: 16 / 11; perspective: 1600px; }
.stack__in { position: absolute; left: 8%; right: 8%; top: 50%; aspect-ratio: 16 / 9; translate: 0 -50%; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-32deg); transition: transform 1s var(--ease-out); }
.ly {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  transform: translateZ(calc(var(--z) * 1px));
  transition: transform 1s var(--ease-out), opacity .6s, box-shadow .6s, background .6s;
}
.ly--1 { --z: 0;   background: #fff; box-shadow: 0 0 0 1px rgba(51,184,240,.6), 0 30px 50px rgba(0,0,0,.5); }
.ly--2 { --z: 60;  background: rgba(51, 184, 240, .06); box-shadow: 0 0 0 1px rgba(51,184,240,.7); }
.ly--3 { --z: 120; background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(51,184,240,.7); }
.ly--4 { --z: 180; background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(51,184,240,.7); }
.ly--5 { --z: 240; background: rgba(228, 0, 127, .04); box-shadow: 0 0 0 1px rgba(228,0,127,.7); }
.ly svg { width: 100%; height: 100%; }

/* 重ねた状態 */
.layers.is-merged .stack__in { transform: rotateX(0deg) rotateZ(0deg); }
.layers.is-merged .ly { transform: translateZ(0); box-shadow: none; background: transparent; }
.layers.is-merged .ly--1 { box-shadow: 0 24px 60px rgba(0,0,0,.5); background: #fff; }
.layers.is-merged .ly--2 { opacity: 0; }
.layers.is-merged .ly--5 { opacity: 0; }

.ly__blob { position: absolute; border-radius: 50%; }
.ly__blob--m { width: 36%; aspect-ratio: 1; right: -8%; top: -22%; background: radial-gradient(circle, rgba(205,16,138,.45), rgba(48,143,213,.2) 55%, transparent 70%); }
.ly__blob--c { width: 28%; aspect-ratio: 1; left: -8%; bottom: -18%; background: radial-gradient(circle, rgba(48,143,213,.4), transparent 68%); }
.ly__bar { position: absolute; left: 0; top: 7%; width: 5%; height: 5%; background: var(--deca-cyan); }
.ly__logo { position: absolute; right: 3%; top: 4%; font-family: var(--font-en); font-style: normal; font-weight: 900; font-size: clamp(8px, 1vw, 12px); color: #fff; letter-spacing: .1em; }
.g-grid path { stroke: rgba(0, 160, 233, .55); stroke-width: .5; stroke-dasharray: 2 2; fill: none; }
.g-coord text { font: 700 6px var(--font-en); fill: var(--deca-cyan); }
.g-bars rect { fill: var(--deca-navy); }
.g-line { fill: none; stroke: var(--deca-magenta); stroke-width: 2; stroke-linejoin: round; }
.d-bg { fill: none; stroke: #e6e6f2; stroke-width: 12; }
.d-a { fill: none; stroke: var(--deca-navy); stroke-width: 12; stroke-dasharray: 62 100; transform: rotate(-90deg); transform-origin: 240px 118px; }
.d-b { fill: none; stroke: var(--deca-cyan); stroke-width: 12; stroke-dasharray: 22 100; stroke-dashoffset: -62; transform: rotate(-90deg); transform-origin: 240px 118px; }
.ly--4 { color: var(--deca-navy); font-family: var(--font-jp); }
.ly__title { position: absolute; left: 7%; top: 5.5%; font-weight: 900; font-size: clamp(9px, 1.35vw, 16px); line-height: 1.2; }
.ly__msg { position: absolute; left: 3%; top: 16%; right: 22%; font-weight: 700; font-size: clamp(6px, .8vw, 10px); line-height: 1.4; }
.ly__kpi { position: absolute; top: 30%; font-family: var(--font-en); font-weight: 800; font-size: clamp(8px, 1.2vw, 15px); line-height: 1.1; color: var(--deca-magenta); }
.ly__kpi small { display: block; font-size: .5em; color: #6f71a8; font-weight: 700; }
.ly__kpi--1 { left: 6%; } .ly__kpi--2 { left: 30%; } .ly__kpi--3 { left: 50%; }
.ly__src { position: absolute; left: 3%; bottom: 3%; font-size: clamp(5px, .6vw, 8px); color: #6f71a8; }
.qa { position: absolute; border: 1.5px dashed var(--deca-magenta); border-radius: 3px; }
.qa em { position: absolute; right: -1px; top: -1px; translate: 0 -100%; font: 800 clamp(6px, .75vw, 9px) var(--font-en); font-style: normal; background: var(--deca-magenta); color: #fff; padding: 1px 5px; border-radius: 3px 3px 0 0; white-space: nowrap; }
.qa--t { left: 6%; top: 4%; width: 36%; height: 9%; }
.qa--m { left: 2.5%; top: 15%; width: 74%; height: 9%; }
.qa--c { left: 7%; top: 44%; width: 42%; height: 48%; }
.qa--d { left: 64%; top: 45%; width: 22%; height: 40%; }
.qa--s { left: 2.5%; top: 92%; width: 30%; height: 6%; }
.qa--s em { top: auto; bottom: -1px; translate: 100% 0; right: -1px; border-radius: 0 3px 3px 0; }
@media (max-width: 900px) {
  .layers { grid-template-columns: 1fr; }
  .stack { order: -1; }
}

/* 処理ログ */
.term { margin: clamp(48px, 6vw, 72px) auto 0; max-width: 860px; border-radius: 14px; overflow: hidden; background: #050818; border: 1px solid rgba(51, 184, 240, .4); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #0d1233; font-size: 12px; color: rgba(255,255,255,.6); }
.term__bar i { width: 11px; height: 11px; border-radius: 50%; background: #f93549; }
.term__bar i:nth-child(2) { background: #ffbd2e; } .term__bar i:nth-child(3) { background: #27c93f; }
.term__bar span { margin-left: 10px; }
.term__body { margin: 0; padding: 18px 20px 22px; min-height: 16.5em; font: 500 clamp(11px, 1.3vw, 13.5px)/1.75 ui-monospace, "SFMono-Regular", Menlo, Consolas, var(--font-jp); color: #c9d6ff; white-space: pre-wrap; overflow-x: auto; }
.term__body .t-cmd { color: #fff; }
.term__body .t-tag { color: var(--cyan-lift); }
.term__body .t-ok { color: #3ee07a; }
.term__body .t-hl { color: var(--pop-yellow); }
.term__body .t-caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--cyan-lift); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------------- 訴求 */
.more { padding: clamp(88px, 11vw, 140px) 0; background: var(--paper-2); }
.more__head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 30px); }
.feat { display: flex; flex-direction: column; background: #fff; border: var(--line-navy); border-radius: 22px; box-shadow: var(--shadow-pop); overflow: hidden; }
.feat__vis { position: relative; aspect-ratio: 16 / 8; background: #eef0fb; border-bottom: var(--line-navy); overflow: hidden; }
.feat__body { position: relative; padding: 20px 24px 26px 82px; }
.feat__no { position: absolute; left: 22px; top: 18px; font-family: var(--font-en); font-weight: 900; font-size: 34px; line-height: 1; color: var(--deca-magenta); }
.feat__h { font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; line-height: 1.4; margin-bottom: 6px; }
.feat__body p { font-size: 15px; line-height: 1.8; color: #3b3e85; }
@media (max-width: 800px) { .feats { grid-template-columns: 1fr; } }

.feat__vis--xl { display: grid; place-items: center; padding: 18px; background: #e9f6ee; }
.xl { width: 100%; max-width: 440px; background: #fff; border: 1px solid #b7d7c2; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 24px rgba(16, 124, 65, .18); font-size: 12px; }
.xl__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #107c41; color: #fff; font: 700 12px var(--font-en); }
.xl__bar i { width: 16px; height: 16px; border-radius: 3px; background: #fff; }
.xl table { width: 100%; border-collapse: collapse; }
.xl th, .xl td { border: 1px solid #dfe7e2; padding: 3px 6px; line-height: 1.5; white-space: nowrap; }
.xl th { background: #f3f5f4; color: #7b8a80; font: 600 11px var(--font-en); width: 1%; }
.xl td { font-family: var(--font-en); text-align: right; color: #222; }
.xl td:first-of-type { text-align: left; font-family: var(--font-jp); }
.xl td.h { background: #107c41; color: #fff; font-weight: 700; text-align: center; font-family: var(--font-jp); }
.xl td.c { background: #fff7d1; font-weight: 800; }
.xl tr.sum td { font-weight: 800; border-top: 2px solid #107c41; }

.feat__vis--tpl { display: flex; align-items: center; justify-content: center; }
.tpl { position: absolute; width: 58%; aspect-ratio: 16 / 9; background: #fff; border-radius: 6px; box-shadow: 0 12px 26px rgba(29, 32, 136, .22); transition: transform .8s var(--ease-out), opacity .8s; }
.tpl i { position: absolute; display: block; border-radius: 2px; }
.tpl__bar  { left: 0; top: 0; right: 0; height: 12%; }
.tpl__t    { left: 6%; top: 20%; width: 46%; height: 7%; }
.tpl__l    { left: 6%; top: 32%; width: 38%; height: 3.5%; opacity: .35; }
.tpl__l--s { top: 39%; width: 28%; }
.tpl__chart{ left: 6%; bottom: 10%; width: 44%; height: 38%; opacity: .9; }
.tpl__card { right: 6%; top: 22%; width: 38%; height: 66%; opacity: .18; border-radius: 6px; }
.tpl--a i { background: var(--deca-navy); } .tpl--a .tpl__bar { background: var(--deca-magenta); }
.tpl--a .tpl__chart { background: linear-gradient(to top, var(--deca-navy) 0 60%, transparent 60%) 0 100% / 18% 100% no-repeat, linear-gradient(to top, var(--deca-cyan) 0 85%, transparent 85%) 33% 100% / 18% 100% no-repeat, linear-gradient(to top, var(--deca-navy) 0 45%, transparent 45%) 66% 100% / 18% 100% no-repeat, linear-gradient(to top, var(--deca-magenta) 0 100%, transparent 100%) 100% 100% / 18% 100% no-repeat; }
.tpl--b i { background: #0f7a55; } .tpl--b .tpl__bar { background: #0f7a55; }
.tpl--b .tpl__chart { background: conic-gradient(#0f7a55 0 55%, #7cc8a3 55% 80%, #d6efe2 80%); border-radius: 50%; width: 22%; aspect-ratio: 1; height: auto; left: 14%; }
.tpl--c i { background: #c2410c; } .tpl--c .tpl__bar { background: #1f2937; }
.tpl--c .tpl__chart { background: linear-gradient(to right, #c2410c 0 80%, transparent 80%) 0 0 / 100% 24% no-repeat, linear-gradient(to right, #f59e0b 0 55%, transparent 55%) 0 50% / 100% 24% no-repeat, linear-gradient(to right, #c2410c 0 35%, transparent 35%) 0 100% / 100% 24% no-repeat; }
.tpl--a { transform: translate(-22%, 8%) rotate(-6deg); z-index: 1; }
.tpl--b { transform: translate(0, -4%) rotate(0deg); z-index: 2; }
.tpl--c { transform: translate(22%, 8%) rotate(6deg); z-index: 1; }
.feat__vis--tpl.is-cycle-1 .tpl--a { transform: translate(0, -4%); z-index: 3; }
.feat__vis--tpl.is-cycle-1 .tpl--b { transform: translate(22%, 8%) rotate(6deg); z-index: 1; }
.feat__vis--tpl.is-cycle-1 .tpl--c { transform: translate(-22%, 8%) rotate(-6deg); z-index: 1; }
.feat__vis--tpl.is-cycle-2 .tpl--a { transform: translate(22%, 8%) rotate(6deg); z-index: 1; }
.feat__vis--tpl.is-cycle-2 .tpl--b { transform: translate(-22%, 8%) rotate(-6deg); z-index: 1; }
.feat__vis--tpl.is-cycle-2 .tpl--c { transform: translate(0, -4%); z-index: 3; }

.feat__vis--chips { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 20px; background: #fff5fb; }
.feat__vis--chips span { font-weight: 900; font-size: clamp(13px, 1.4vw, 15px); padding: 6px 14px; border: 2px solid var(--deca-navy); border-radius: 999px; background: #fff; box-shadow: 2px 2px 0 var(--deca-navy); }
.feat__vis--chips span:nth-child(3n+1) { background: var(--pop-yellow); }
.feat__vis--chips span:nth-child(4n+2) { background: var(--deca-navy); color: #fff; }
.feat__vis--shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------------- さらに：分析 */
.analysis { position: relative; padding: clamp(88px, 11vw, 140px) 0; background: #fff; overflow: hidden; }
.analysis__head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.anl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.anl__card { display: flex; flex-direction: column; padding: 14px 14px 22px; background: #fff; border: var(--line-navy); border-radius: 22px; box-shadow: var(--shadow-pop); }
.anl__card > p:last-child { font-size: 14.5px; line-height: 1.8; color: #3b3e85; }
.anl__vis { aspect-ratio: 16 / 9; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; padding: 10px; overflow: hidden; }
.anl__vis svg { width: 100%; height: 100%; }
.anl__tag { align-self: flex-start; margin: 14px 6px 0; font-size: 12.5px; font-weight: 900; padding: 2px 12px; border-radius: 999px; background: var(--deca-cyan); color: #fff; }
.anl__h { margin: 8px 6px 6px; font-size: clamp(17px, 1.8vw, 19px); font-weight: 900; line-height: 1.45; }
.anl__card > p:last-child { margin-inline: 6px; }
@media (max-width: 900px) { .anl { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.ax { fill: none; stroke: #9a9cc4; stroke-width: 1.5; }
.ax-t { font: 700 10px var(--font-jp); fill: #6f71a8; }
.cv { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1.02; stroke-dashoffset: 1.02; }
.cv--a { stroke: var(--deca-magenta); }
.cv--b { stroke: var(--deca-cyan); }
.anl__card.is-in .cv { transition: stroke-dashoffset 1.4s var(--ease-out) .2s; stroke-dashoffset: 0; }
.dot { stroke: #fff; stroke-width: 2.5; opacity: 0; transition: opacity .3s 1.3s; }
.dot--a { fill: var(--deca-magenta); } .dot--b { fill: var(--deca-cyan); }
.lb { font: 900 11px var(--font-jp); opacity: 0; transition: opacity .3s 1.4s; }
.lb--a { fill: var(--deca-magenta); } .lb--b { fill: #0082be; }
.anl__card.is-in .dot, .anl__card.is-in .lb { opacity: 1; }

.attr { width: 100%; display: grid; gap: 5px; }
.attr__lb { font-size: 11.5px; font-weight: 700; color: #6f71a8; }
.attr__bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: #e3e4f1; }
.attr__bar i { display: grid; place-items: center; flex: 0 0 0; font: 800 11px var(--font-en); font-style: normal; color: #fff; white-space: nowrap; overflow: hidden; transition: flex-basis 1.2s var(--ease-out); }
.anl__card.is-in .attr__bar i { flex-basis: var(--v); }
.attr__bar + .attr__lb { margin-top: 6px; }
.s1 { background: var(--deca-navy); } .s2 { background: var(--deca-magenta); } .s3 { background: var(--deca-cyan); } .s4 { background: #b9bad6; }
.attr__key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; font-weight: 700; }
.attr__key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.tree { width: 100%; text-align: center; }
.tree__top { display: inline-block; padding: 4px 16px; border-radius: 10px; background: var(--deca-navy); color: #fff; font-weight: 900; font-size: 13px; }
.tree__top b { font-size: 18px; margin: 0 2px; }
.tree__eq { font-weight: 900; line-height: 1.4; }
.tree__row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.tree__row p { flex: 1; padding: 5px 4px; border: 2px solid var(--deca-navy); border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; line-height: 1.3; }
.tree__row p b { display: block; font-size: 14px; color: var(--deca-magenta); }
.tree__row span { font-weight: 900; }
.tree__goal { margin-top: 8px; font-size: 12px; font-weight: 900; color: var(--deca-magenta); }
.tree__goal b { font-size: 16px; }

/* 疑いの声 */
.doubt { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 32px); margin-top: clamp(64px, 8vw, 104px); }
.doubt__guy { width: clamp(110px, 13vw, 150px); flex: 0 0 auto; }
.doubt__guy svg { width: 100%; overflow: visible; }
.doubt__guy path, .doubt__guy circle { fill: none; stroke: #5a5a6e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.doubt__guy .g-head, .doubt__guy .g-body, .doubt__guy .g-hand { fill: #fff; }
.doubt__guy .g-fx { stroke: #9a9aac; stroke-width: 2; }
.doubt.is-in .doubt__guy svg { animation: slouch 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes slouch { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
.bubble--doubt { background: #f1f1f5; color: #4a4a5e; border: 3px dashed #7a7a8e; box-shadow: none; font-size: clamp(18px, 2.4vw, 26px); padding: 18px 26px; rotate: 2deg; }
.bubble--doubt::after { left: -12px; top: 46%; rotate: 135deg; width: 20px; height: 20px; border-style: dashed; }

/* そんなことはありません！ */
.answer { margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.answer__no {
  display: inline-block; position: relative;
  font-family: var(--font-maru); font-weight: 900; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.25;
  color: var(--deca-magenta); -webkit-text-stroke: 1.5px var(--deca-navy); text-shadow: 4px 4px 0 var(--deca-navy);
  padding: 10px 24px; rotate: -3deg;
}
.answer__no::before { content: ""; position: absolute; inset: -18px -40px; z-index: -1; background: var(--pop-yellow); clip-path: polygon(0% 20%, 6% 2%, 18% 16%, 30% 0%, 42% 14%, 55% 0%, 66% 15%, 79% 1%, 90% 16%, 100% 6%, 96% 38%, 100% 62%, 94% 96%, 80% 84%, 67% 100%, 54% 86%, 41% 100%, 29% 85%, 16% 100%, 6% 82%, 0% 96%, 4% 60%); }
.answer.is-in .answer__no { animation: pop-in .5s var(--ease-out) both .15s; }
.answer__card { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3.4vw, 40px); align-items: center; max-width: 940px; margin: clamp(32px, 4vw, 48px) auto 0; padding: clamp(22px, 3vw, 34px); text-align: left; background: var(--deca-navy); color: #fff; border-radius: 26px; box-shadow: 10px 10px 0 var(--deca-magenta); }
.answer__medal { width: clamp(150px, 17vw, 200px); }
.answer__medal svg { width: 100%; overflow: visible; }
.md-tail { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.md-tail--l { fill: var(--deca-magenta); }
.md-tail--r { fill: var(--deca-cyan); }
.md-burst { fill: var(--pop-yellow); stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.md-spin { transform-origin: 100px 100px; }
.answer.is-in .md-spin { animation: kv-spin 24s linear infinite; }
.md-core { fill: var(--deca-magenta); stroke: #fff; stroke-width: 4; }
.md-ring { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; stroke-dasharray: 3 5; }
.md-en { font: 800 8px var(--font-en); letter-spacing: .08em; fill: var(--pop-yellow); }
.md-jp { font: 900 22px var(--font-maru); fill: #fff; }
.md-star { fill: var(--pop-yellow); }
.answer.is-in .answer__medal { animation: pop-in .6s var(--ease-out) both .35s; }
.answer__h { font-size: clamp(21px, 2.8vw, 30px); font-weight: 900; line-height: 1.5; word-break: auto-phrase; }
.answer__h .mk { color: var(--deca-navy); background: var(--pop-yellow); padding: 0 .2em; border-radius: 4px; }
.answer__list { margin-top: 14px; display: grid; gap: 6px; }
.answer__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.88); }
.answer__list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--pop-yellow); }
.answer__link { display: inline-block; margin-top: 14px; font-weight: 900; font-size: 14px; color: var(--pop-yellow); text-decoration: none; border-bottom: 2px solid currentColor; }
@media (max-width: 720px) {
  .doubt { flex-direction: column; }
  .bubble--doubt::after { left: 50%; top: -12px; rotate: -135deg; translate: -50% 0; }
  .answer__card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .answer__list { text-align: left; }
}

/* ---------------------------------------------------------------- 導入後の世界 */
.world { padding: clamp(88px, 11vw, 140px) 0; background: #fff; }
.world__head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 2vw, 24px); align-items: stretch; }
.ba__col { border-radius: 22px; padding: clamp(20px, 3vw, 32px); border: var(--line-navy); }
.ba__col--before { background: #e9e8ee; color: #4a4a5e; border-color: #8f8ea3; box-shadow: 6px 6px 0 #8f8ea3; }
.ba__col--after  { background: #fff; box-shadow: 8px 8px 0 var(--deca-magenta); }
.ba__label { display: inline-block; font: 900 15px var(--font-en); letter-spacing: .14em; padding: 3px 14px; border-radius: 999px; background: #8f8ea3; color: #fff; margin-bottom: 18px; }
.ba__label--after { background: var(--deca-magenta); }
.ba__arrow { align-self: center; font: 900 clamp(28px, 4vw, 44px) var(--font-en); color: var(--deca-magenta); }
.week { display: grid; gap: 7px; }
.week__row { display: flex; align-items: center; gap: 10px; }
.week__row span { width: 1.4em; font-weight: 900; font-size: 14px; }
.w { display: block; height: 20px; width: 0; border-radius: 4px; transition: width 1.2s var(--ease-out); }
.ba__col.is-in .w { width: var(--w); }
.w--doc { background: repeating-linear-gradient(-45deg, #8f8ea3 0 6px, #a3a2b6 6px 12px); }
.w--late { background: repeating-linear-gradient(-45deg, #b54a5a 0 6px, #c46472 6px 12px); }
.w--ai { background: var(--deca-cyan); }
.w--talk { background: var(--deca-navy); }
.week__row .w + .w { margin-left: -6px; }
.week__key { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; font-weight: 700; }
.week__key .w { display: inline-block; width: 14px !important; height: 10px; margin-right: 5px; vertical-align: 0; }
.ba__list { margin-top: 20px; display: grid; gap: 10px; }
.ba__list li { position: relative; padding-left: 28px; font-weight: 700; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6; }
.ba__list li::before { content: "×"; position: absolute; left: 0; top: 0; font: 900 18px var(--font-en); color: #b54a5a; }
.ba__list--after li::before { content: "✓"; color: var(--deca-magenta); }
.ba__list b { font-weight: 900; }
.ba__list--after b { color: var(--deca-magenta); }
@media (max-width: 860px) { .ba { grid-template-columns: 1fr; } .ba__arrow { rotate: 90deg; justify-self: center; } }

.coffee { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 48px); margin-top: clamp(56px, 7vw, 88px); }
.face--coffee { width: clamp(150px, 18vw, 210px); aspect-ratio: 1; flex: 0 0 auto; }
.cup { position: absolute; right: -18%; bottom: -6%; width: 46%; aspect-ratio: 1; background: #fff; border: 3px solid var(--deca-navy); border-radius: 50%; box-shadow: var(--shadow-pop-sm); display: grid; place-items: center; }
.cup svg { width: 66%; overflow: visible; }
.cup__body { fill: var(--deca-magenta); stroke: var(--deca-navy); stroke-width: 3; stroke-linejoin: round; }
.cup__handle { fill: none; stroke: var(--deca-navy); stroke-width: 4; }
.cup__steam { fill: none; stroke: #8f8ea3; stroke-width: 3; stroke-linecap: round; animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.bubble--coffee { font-size: clamp(18px, 2.6vw, 28px); padding: 22px 30px; background: #fff; box-shadow: 8px 8px 0 var(--pop-yellow), 8px 8px 0 3px var(--deca-navy); }
.bubble--coffee::after { left: -12px; top: 46%; rotate: 135deg; width: 22px; height: 22px; }
@media (max-width: 720px) {
  .coffee { flex-direction: column; text-align: center; }
  .bubble--coffee::after { left: 50%; top: -12px; rotate: -135deg; translate: -50% 0; }
  .cup { right: -14%; }
}

/* ---------------------------------------------------------------- プロフィール＆最終CTA */
.profile { position: relative; padding: clamp(88px, 11vw, 140px) 0 clamp(96px, 12vw, 150px); background: var(--ink-2); color: #fff; overflow: hidden; isolation: isolate; }
.profile__glow {
  position: absolute; inset: 0; z-index: -1; opacity: .82;
  background:
    radial-gradient(circle at -3% -10%, var(--glow-magenta-core) 0%, var(--glow-magenta-mid) 14%, var(--glow-magenta-peak) 22%, var(--glow-sink) 44%),
    radial-gradient(circle at 103% 110%, var(--glow-cyan-core) 0%, var(--glow-cyan-mid) 14%, var(--glow-cyan-peak) 22%, transparent 44%);
}
.profile__head { text-align: center; }
.pf { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 980px; margin: 12px auto 0; padding: clamp(24px, 3.4vw, 40px); background: #fff; color: var(--deca-navy); border-radius: 28px; border: var(--line-navy); box-shadow: 10px 10px 0 var(--deca-magenta); }
.pf__photo { width: clamp(160px, 22vw, 260px); aspect-ratio: 1; }
.pf__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid var(--deca-navy); }
.pf__role { font-size: 14px; font-weight: 700; color: #6f71a8; }
.pf__name { font-size: clamp(30px, 4vw, 42px); font-weight: 900; line-height: 1.3; margin-top: 4px; }
.pf__name span { display: inline-block; margin-left: 14px; font: 700 clamp(14px, 1.5vw, 16px) var(--font-en); color: var(--deca-magenta); letter-spacing: .06em; }
.pf__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf__tags span { font-size: 12.5px; font-weight: 900; padding: 2px 12px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--deca-navy); }
.pf__bio { margin-top: 16px; font-size: 15px; line-height: 1.9; }
.bubble--pf { margin-top: 20px; font-size: clamp(15px, 1.8vw, 18px); background: var(--pop-yellow); }
.bubble--pf::after { left: 34px; top: -11px; rotate: -135deg; }
@media (max-width: 760px) { .pf { grid-template-columns: 1fr; justify-items: center; text-align: center; } .pf__tags { justify-content: center; } .bubble--pf::after { left: 50%; translate: -50% 0; } .pf__name span { display: block; margin: 0; } }

.final { margin-top: clamp(64px, 8vw, 96px); text-align: center; }
.final__h { font-size: clamp(24px, 3.8vw, 44px); font-weight: 900; line-height: 1.45; word-break: auto-phrase; }
.final__h .mk { background: linear-gradient(transparent 60%, var(--deca-magenta) 60%, var(--deca-magenta) 92%, transparent 92%); }
.final__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 32px; }
.final .btn--primary { box-shadow: 6px 6px 0 #fff; }
.final .btn--primary:hover { box-shadow: 8px 8px 0 var(--pop-yellow); }

/* ---------------------------------------------------------------- フッター・追従CTA */
.ft { background: #000208; color: rgba(255,255,255,.7); padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
.ft__in { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.ft__in img { width: 140px; height: auto; }
.ft__nav { display: flex; gap: 20px; font-size: 13px; }
.ft__nav a { text-decoration: none; }
.ft__nav a:hover { color: #fff; }
.ft__c { margin-left: auto; font: 500 12px var(--font-en); }

.dock { display: none; }
@media (max-width: 640px) {
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96); border-top: 3px solid var(--deca-navy);
    transform: translateY(110%); transition: transform .35s var(--ease-out);
  }
  .dock.is-on { transform: translateY(0); }
  .dock .btn { flex: 1; }
  .dock .btn--primary { flex: 1.6; }
  .ft { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- 出現 */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
.rp[data-reveal] { transform: translateY(28px) rotate(0deg); }
.rp[data-reveal].is-in { transform: none; }
.viewer--ruin[data-reveal].is-in { transform: rotate(-.8deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .viewer--ruin[data-reveal] { transform: rotate(-.8deg); }
  .rp__mark ellipse { stroke-dashoffset: 0; }
  .rp__scribble { opacity: 1; }
  .w { width: var(--w); }
  .cv { stroke-dashoffset: 0; } .dot, .lb { opacity: 1; } .attr__bar i { flex-basis: var(--v); }
}