@charset "UTF-8";
/* =====================================================================
   せどりAIラボ Design v2.3 — デザインシステム（トップページ）
   ---------------------------------------------------------------------
   目的
     「昔ながらのSEOブログ」から「初心者が使いたくなるWebサービス」へ。
     v2.1で作った骨格・ブランドカラー・Heroコピー・Hero右のビジュアルは維持し、
     セクションごとの視覚変化と動きの質を上げて「作り込まれた商用サービス」に寄せる。

   設計方針（v2から一貫）
     1. トークン先行。色・角丸・余白・影・文字サイズはすべて --v2-* 変数で定義する。
     2. 既存の :root（style.css）は一切変更しない。v2は独立した名前空間で追加する。
     3. クラス名はすべて .v2- 接頭辞。既存クラスを再定義しないので、
        このファイルを読み込まなければ見た目は完全に元通りになる。
        例外はヘッダーのみで、Cocoonの既存クラスに body.home 限定で当てている。
     4. 外部リソースを増やさない。図はインラインSVGとCSS、フォントは既存を再利用。
     5. アニメーションは transform / opacity のみ。prefers-reduced-motion を尊重する。

   目次
     1. トークン            9. 記事カード
     2. 土台とレイアウト   10. ツール（プロダクトUIモック）
     3. タイポグラフィ     11. 信頼性
     4. ボタン             12. ヘッダー（PC / モバイル・ハンバーガー）
     5. Hero               13. レスポンシブ
     6. Heroビジュアル     14. アクセシビリティ
     7. 悩みカード         15. アニメーション層
     8. ロードマップ / カテゴリー   16. ブランドキャラクター
   ===================================================================== */

/* =====================================================================
   1. トークン
   ===================================================================== */
:root {
  /* --- 色: ブランド ---------------------------------------------------
     公開55記事のアイキャッチが「紺 × 琥珀」で統一されているため、ブランドの
     対を変えずに明度バランスだけ反転させる。紺は文字色と“章の転換”に使い、
     面は白とクリームが持つ。記事カードのサムネイルと衝突しない。 */
  --v2-brand:        #f0a92c;   /* 主役のアンバー。ボタン・番号・強調 */
  --v2-brand-strong: #e2951a;   /* hover */
  --v2-brand-deep:   #93610c;   /* 淡い面の上に置く文字色(AA確保) */
  --v2-brand-tint:   #fff4e0;   /* 淡いアンバー面 */
  --v2-brand-line:   #f6dcae;   /* 淡いアンバー境界 */

  /* --- 色: 補助アクセント(使いすぎない。用途を固定する) ---------------- */
  --v2-sky:      #3286cf;       /* データ・AI・リサーチ系 */
  --v2-sky-tint: #e9f3fc;
  --v2-sky-deep: #1f5f96;       /* 淡い面の上に置く文字色。--v2-sky は淡い面で 3.4:1 しかない */
  --v2-mint:     #1d8f6a;       /* 完了・OK・計算 */
  --v2-mint-tint:#e6f5ef;
  --v2-mint-deep:#157553;       /* 同上。--v2-mint は白い面で 3.9:1 */
  --v2-plum:     #a4568c;       /* 税・お金まわり */
  --v2-plum-tint:#f7ecf4;

  /* --- 色: 面と線 ----------------------------------------------------- */
  --v2-paper:  #ffffff;
  --v2-cream:  #fffaf0;         /* ページ地 */
  --v2-cream-2:#fff5e6;         /* 淡い帯 */
  --v2-line:   #efe6d6;         /* 暖色寄りの境界線 */
  --v2-line-2: #e4ebf2;         /* 寒色寄りの境界線(データ系) */

  /* --- 色: 濃紺（章の転換に使う） --------------------------------------
     v2.1では文字色にしか使っていなかったが、v2.2ではロードマップの面に使う。
     スクロールしていて「別の章に入った」と分かる最大の手がかりになる。 */
  --v2-navy:      #12294d;
  --v2-navy-deep: #081729;
  --v2-on-navy:      #ffffff;
  --v2-on-navy-soft: #b7c6da;

  /* --- 色: 文字 -------------------------------------------------------- */
  --v2-ink:      #17233a;
  --v2-ink-soft: #56637a;
  /* 12.5px前後の小さな文字に使うため、白・クリーム面で 4.5:1 を満たす明度に留める。
     #7c8798 は白に対して 3.6:1 で AA を満たしていなかった（v2.3のQAで判明）。 */
  --v2-ink-faint:#667287;
  --v2-on-brand: #2a1c02;       /* アンバー面の上の文字。白より可読性が高い */

  /* --- 角丸: 大きめに振る。これが「やわらかさ」の主因 ------------------ */
  --v2-r-xs:   8px;
  --v2-r-sm:  12px;
  --v2-r:     18px;
  --v2-r-lg:  26px;
  --v2-r-xl:  34px;
  --v2-r-pill: 999px;

  /* --- 影: 濃くしない。2段重ねでふわっと浮かせる ------------------------ */
  --v2-shadow-sm: 0 1px 2px rgba(23,35,58,.04), 0 2px 6px rgba(23,35,58,.05);
  --v2-shadow:    0 2px 4px rgba(23,35,58,.04), 0 10px 24px rgba(23,35,58,.07);
  --v2-shadow-lg: 0 4px 8px rgba(23,35,58,.05), 0 20px 44px rgba(23,35,58,.10);
  --v2-shadow-brand: 0 6px 18px rgba(226,149,26,.28);

  /* --- 余白 ------------------------------------------------------------ */
  --v2-s1:  4px;  --v2-s2:  8px;  --v2-s3: 12px; --v2-s4: 16px;
  --v2-s5: 20px;  --v2-s6: 24px;  --v2-s8: 32px; --v2-s10: 40px;
  --v2-s12: 48px; --v2-s16: 64px; --v2-s20: 80px;
  --v2-section-y: clamp(52px, 7.5vw, 96px);
  --v2-gap:       clamp(16px, 2.2vw, 24px);

  /* --- 文字サイズ: すべて clamp。ブレークポイントで飛ばない ------------- */
  --v2-fs-display: clamp(27px, 6.2vw, 52px);
  --v2-fs-h2:      clamp(23px, 3.2vw, 34px);
  --v2-fs-h3:      clamp(17px, 1.7vw, 20px);
  --v2-fs-lead:    clamp(15px, 1.5vw, 18px);
  --v2-fs-body:    16px;
  --v2-fs-sm:      14px;
  --v2-fs-xs:      12.5px;
  --v2-fs-num:     clamp(26px, 3.4vw, 38px);

  --v2-lh-tight: 1.35;
  --v2-lh-body:  1.8;

  /* --- レイアウト ------------------------------------------------------ */
  --v2-container: 1120px;
  --v2-pad-x: clamp(16px, 4vw, 32px);

  --v2-ease: cubic-bezier(.2, .7, .3, 1);
  --v2-ease-out: cubic-bezier(.16, 1, .3, 1);
  --v2-dur: .22s;
}

/* =====================================================================
   2. 土台とレイアウト
   ===================================================================== */
body.home { background: var(--v2-cream); }

/* Cocoonのコンテンツ枠に合わせる。v2は1120pxで内側に置き、
   横スクロールを生む 100vw 計算を一切使わない。 */
body.home #content { padding-top: 0; padding-bottom: 0; }
body.home #content-in { max-width: none; padding: 0; margin: 0; }
body.home main.main,
body.home div.main { border: 0; padding: 0; margin: 0; box-shadow: none; background: transparent; }

.v2 {
  font-family: var(--font-jp, 'Noto Sans JP', sans-serif);
  color: var(--v2-ink);
  line-height: var(--v2-lh-body);
  -webkit-font-smoothing: antialiased;
}
.v2 * { box-sizing: border-box; }

.v2-wrap {
  width: 100%;
  max-width: var(--v2-container);
  margin-inline: auto;
  padding-inline: var(--v2-pad-x);
}
.v2-section { padding-block: var(--v2-section-y); }

/* 帯は全幅の背景色ではなく角丸の面で作る。100vw を使わないので、
   どの幅でも横スクロールが発生しない。 */
.v2-band {
  border-radius: var(--v2-r-lg);
  padding: clamp(30px, 4.8vw, 60px) clamp(18px, 3.5vw, 44px);
}
.v2-band--paper { background: var(--v2-paper); box-shadow: var(--v2-shadow-sm); }
.v2-band--cream { background: var(--v2-cream-2); }
.v2-band--sky   { background: var(--v2-sky-tint); }

/* 章の転換に使う濃紺の帯。 */
.v2-band--navy {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, var(--v2-navy) 0%, var(--v2-navy-deep) 100%);
  color: var(--v2-on-navy);
  box-shadow: var(--v2-shadow-lg);
}
.v2-band--navy .v2-h2 { color: var(--v2-on-navy); }
.v2-band--navy .v2-lead { color: var(--v2-on-navy-soft); }
.v2-band--navy .v2-h2 .v2-mark {
  background: linear-gradient(transparent 62%, rgba(240,169,44,.42) 62%);
}
.v2-band--navy > * { position: relative; z-index: 1; }
/* 濃紺帯の中でごく緩く動く装飾。位置だけを動かすので負荷がない。 */
.v2-band__aura {
  position: absolute; inset: -30% -10% auto -10%; height: 160%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 30%, rgba(240,169,44,.20), transparent 70%),
    radial-gradient(34% 44% at 84% 66%, rgba(50,134,207,.24), transparent 72%);
}

/* =====================================================================
   3. タイポグラフィ
   ===================================================================== */
.v2-eyebrow {
  display: inline-flex; align-items: center; gap: var(--v2-s2);
  font-family: var(--font-en, 'Inter', sans-serif);
  font-size: var(--v2-fs-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--v2-brand-deep); background: var(--v2-brand-tint);
  border-radius: var(--v2-r-pill); padding: 5px 13px;
  margin: 0 0 var(--v2-s4);
}
.v2-band--navy .v2-eyebrow { color: #ffd894; background: rgba(240,169,44,.16); }

.v2-h2 {
  font-size: var(--v2-fs-h2); font-weight: 700; line-height: var(--v2-lh-tight);
  letter-spacing: .01em; color: var(--v2-ink); margin: 0 0 var(--v2-s3);
  text-wrap: balance;
}
/* 強調語が行またぎで割れないよう塊にする。入り切らなければ語ごと次行へ落ちる。
   max-width を付けているのは保険で、将来コピーが長くなって1行に入らなくなったとき、
   塊のまま横へはみ出して画面がスクロールしてしまうのを防ぐ（そのときだけ内部で折り返す）。 */
.v2-mark { display: inline-block; max-width: 100%; }

/* 見出しの前半も塊にするための入れ物。
   text-wrap: balance は行の長さをそろえようとするので、「最初につまずくの／は、…」の
   ように文節の途中で割ってしまうことがある（375pxで実測）。前半と強調語の両方を
   塊にしておけば、折り返せる位置がその境目だけになり、どの幅でも意味の切れ目で折り返る。 */
.v2-nb { display: inline-block; max-width: 100%; }
.v2-h2 .v2-mark {
  background: linear-gradient(transparent 62%, var(--v2-brand-line) 62%);
  padding-inline: 2px;
}
.v2-lead {
  font-size: var(--v2-fs-lead); color: var(--v2-ink-soft);
  margin: 0 0 var(--v2-s8); max-width: 46em;
}
.v2-section-head { text-align: center; margin-bottom: clamp(26px, 3.6vw, 44px); }
.v2-section-head .v2-lead { margin-inline: auto; margin-bottom: 0; }

/* =====================================================================
   4. ボタン
   ===================================================================== */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-s2);
  min-height: 52px; padding: 0 clamp(20px, 3vw, 30px);
  border-radius: var(--v2-r-pill);
  font-size: var(--v2-fs-body); font-weight: 700; line-height: 1.3;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform var(--v2-dur) var(--v2-ease),
              box-shadow var(--v2-dur) var(--v2-ease),
              background-color var(--v2-dur) var(--v2-ease);
}
.v2-btn--primary {
  background: var(--v2-brand); color: var(--v2-on-brand);
  box-shadow: var(--v2-shadow-brand);
}
.v2-btn--primary:hover { background: var(--v2-brand-strong); transform: translateY(-2px); color: var(--v2-on-brand); }
.v2-btn--ghost {
  background: var(--v2-paper); color: var(--v2-ink);
  border-color: var(--v2-line); box-shadow: var(--v2-shadow-sm);
}
.v2-btn--ghost:hover { border-color: var(--v2-brand); transform: translateY(-2px); color: var(--v2-ink); }
.v2-btn__arrow { font-family: var(--font-en, sans-serif); transition: transform var(--v2-dur) var(--v2-ease); }
.v2-btn:hover .v2-btn__arrow { transform: translateX(3px); }
.v2-actions { display: flex; flex-wrap: wrap; gap: var(--v2-s3); }

/* =====================================================================
   5. Hero
   ===================================================================== */
.v2-hero {
  position: relative; overflow: hidden;
  border-radius: var(--v2-r-lg);
  background:
    radial-gradient(120% 90% at 88% 8%, var(--v2-brand-tint) 0%, rgba(255,244,224,0) 58%),
    radial-gradient(90% 80% at 4% 96%, var(--v2-sky-tint) 0%, rgba(233,243,252,0) 55%),
    var(--v2-paper);
  box-shadow: var(--v2-shadow);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
  margin-top: clamp(20px, 3vw, 36px);
}
.v2-hero__grid { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
.v2-hero__title {
  font-size: var(--v2-fs-display); font-weight: 900; line-height: 1.25;
  letter-spacing: .005em; margin: 0 0 var(--v2-s5); color: var(--v2-ink);
}
.v2-hero__title .v2-mark {
  background: linear-gradient(transparent 60%, var(--v2-brand-line) 60%);
}
.v2-hero__lead {
  font-size: var(--v2-fs-lead); color: var(--v2-ink-soft);
  margin: 0 0 var(--v2-s8); max-width: 34em;
}
/* 実数のメタ表示。ファーストビューの主役はビジュアルに譲る。
   v2.3のQAまでは項目のあいだに「・」を置いていたが、区切りを span の ::before で
   持たせていたため、折り返すと行頭に点が残っていた（1440でも2行になる）。
   項目ごとに淡いピルを与えれば、区切り記号そのものが要らなくなり、
   どの幅で何行に折り返しても崩れない。 */
.v2-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--v2-s2);
  margin: var(--v2-s6) 0 0;
  font-size: var(--v2-fs-xs); color: var(--v2-ink-soft);
}
.v2-hero__meta span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--v2-r-pill);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--v2-line);
}
.v2-hero__meta b { color: var(--v2-ink); font-family: var(--font-en, sans-serif); font-weight: 700; }

/* =====================================================================
   6. Heroビジュアル
   「商品 → 価格推移 → AI分析 → 想定利益」を、文章を読まずに理解させる図。
   画像は1枚も使わない。重なりは margin と rotate で作り、絶対配置を避ける。

   v2.2で2層構造にした:
     .v2-viz__slot … 位置(margin)と登場アニメーション(opacity/translateY)
     .v2-viz__card … 静止時の傾き(rotate)と完了後の浮遊(translateY)
   1つの要素に登場と浮遊の2つのtransformアニメーションを載せると競合するため。
   ===================================================================== */
.v2-hero__visual { position: relative; }
.v2-viz { position: relative; display: grid; gap: var(--v2-s3); padding: var(--v2-s2) 0; }

.v2-viz__glow {
  position: absolute; inset: -8% -6% -4%;
  background:
    radial-gradient(46% 40% at 76% 12%, rgba(240,169,44,.30), rgba(240,169,44,0) 70%),
    radial-gradient(44% 38% at 16% 84%, rgba(50,134,207,.20), rgba(50,134,207,0) 72%);
  filter: blur(6px); z-index: 0; pointer-events: none;
}

.v2-viz__slot { position: relative; z-index: 1; }
.v2-viz__slot--product { margin-right: 16%; }
.v2-viz__slot--chart   { margin-left: 12%; margin-top: -6px; }
.v2-viz__slot--profit  { margin-left: 20%; margin-top: -4px; }

.v2-viz__card {
  position: relative;
  display: grid; gap: 6px;
  background: var(--v2-paper);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r);
  box-shadow: var(--v2-shadow);
  padding: var(--v2-s4) var(--v2-s5);
  transform: rotate(var(--rot, 0deg));
}
.v2-viz__card--product {
  --rot: -1.1deg;
  grid-template-columns: auto 1fr; align-items: center; gap: var(--v2-s3);
}
.v2-viz__card--chart  { --rot: .7deg; }
.v2-viz__card--profit {
  --rot: -.5deg;
  background: linear-gradient(160deg, #fff8ea, var(--v2-paper) 62%);
  border-color: var(--v2-brand-line);
}

.v2-viz__step {
  position: absolute; top: -9px; left: -9px;
  width: 24px; height: 24px; border-radius: var(--v2-r-pill);
  background: var(--v2-brand); color: var(--v2-on-brand);
  font-family: var(--font-en, sans-serif); font-weight: 900; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(226,149,26,.4);
}
.v2-viz__thumb {
  width: 42px; height: 42px; border-radius: var(--v2-r-sm);
  background: var(--v2-brand-tint); color: var(--v2-brand-deep);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.v2-viz__thumb svg { width: 22px; height: 22px; }
.v2-viz__body { display: grid; gap: 2px; min-width: 0; }
.v2-viz__name {
  font-size: 14px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-viz__sub { font-size: 12px; color: var(--v2-ink-soft); line-height: 1.5; }
.v2-viz__sub b { color: var(--v2-ink); font-family: var(--font-en, sans-serif); font-weight: 700; }
.v2-viz__label {
  display: flex; align-items: center; gap: var(--v2-s2);
  font-size: 12px; font-weight: 700; color: var(--v2-ink-soft);
}
.v2-viz__tag {
  font-family: var(--font-en, sans-serif); font-size: 10.5px; font-weight: 700;
  color: var(--v2-sky-deep); background: var(--v2-sky-tint);
  border-radius: var(--v2-r-pill); padding: 2px 8px;
}

/* グラフ。SVGは preserveAspectRatio="none" で横に伸ばすため、
   終点の丸をSVG内に置くと楕円になる（v2.1で見つかった不具合）。
   丸はCSS要素として重ね、常に真円になるようにした。
   位置は viewBox 上の最終点 (234,16)/(240,92) をそのまま % で指定している。 */
.v2-viz__chartwrap { position: relative; display: block; }
.v2-viz__chart { display: block; width: 100%; height: 78px; }
.v2-viz__grid line { stroke: var(--v2-line); stroke-width: 1; stroke-dasharray: 3 5; }
.v2-viz__dot {
  position: absolute; left: 97.5%; top: 17.4%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--v2-paper);
  border: 2.6px solid var(--v2-brand-strong);
}

.v2-viz__chip {
  position: relative; z-index: 2; justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  /* 下の余白を負にすると、利益カードの左上の番号バッジ(top/left -9px)が
     このチップの下辺に潜り込む。1440/768/375/320 のすべてで重なっていたので、
     下だけは正の余白にしてバッジの通り道を空ける。上の -10px は
     グラフカードへわざと重ねているので変えない。 */
  margin: -10px 0 6px 4%;
  padding: 8px 16px; border-radius: var(--v2-r-pill);
  background: var(--v2-ink); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(23,35,58,.26);
}
.v2-viz__chip svg { width: 15px; height: 15px; color: var(--v2-brand); }

.v2-viz__profit {
  font-family: var(--font-en, sans-serif);
  font-size: clamp(28px, 3.6vw, 36px); font-weight: 900; line-height: 1.1;
  color: var(--v2-brand-deep); font-variant-numeric: tabular-nums;
}
.v2-viz__note {
  position: relative; z-index: 1; margin: var(--v2-s4) 0 0;
  font-size: 11.5px; color: var(--v2-ink-faint); text-align: center;
}

/* =====================================================================
   7. 悩みカード
   面を白ではなく用途色の淡いトーンにして、前後のセクションと質感を変える。
   ===================================================================== */
.v2-grid { display: grid; gap: var(--v2-gap); }
.v2-grid--2, .v2-grid--3, .v2-grid--4 { grid-template-columns: 1fr; }

.v2-card {
  display: flex; flex-direction: column;
  background: var(--v2-paper); border: 1px solid var(--v2-line);
  border-radius: var(--v2-r); padding: var(--v2-s6);
  box-shadow: var(--v2-shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform var(--v2-dur) var(--v2-ease), box-shadow var(--v2-dur) var(--v2-ease),
              border-color var(--v2-dur) var(--v2-ease);
}
a.v2-card:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); border-color: var(--v2-brand-line); }
.v2-card__title { font-size: var(--v2-fs-h3); font-weight: 700; line-height: 1.45; margin: 0 0 var(--v2-s2); }
.v2-card__desc { font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); margin: 0; }
.v2-card__more { margin-top: auto; padding-top: var(--v2-s4); font-size: var(--v2-fs-sm); font-weight: 700; color: var(--v2-brand-deep); }

.v2-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--v2-r-pill);
  margin-bottom: var(--v2-s4); flex: none;
  background: var(--v2-brand-tint); color: var(--v2-brand-deep);
}
.v2-chip svg { width: 24px; height: 24px; display: block; }
.v2-chip--sky  { background: var(--v2-sky-tint);  color: var(--v2-sky); }
.v2-chip--mint { background: var(--v2-mint-tint); color: var(--v2-mint); }
.v2-chip--plum { background: var(--v2-plum-tint); color: var(--v2-plum); }

.v2-worry { background: var(--v2-brand-tint); border-color: var(--v2-brand-line); box-shadow: none; }
.v2-worry .v2-chip { background: var(--v2-paper); }
.v2-worry--sky  { background: var(--v2-sky-tint);  border-color: #d3e6f8; }
.v2-worry--mint { background: var(--v2-mint-tint); border-color: #cfeadf; }
.v2-worry--plum { background: var(--v2-plum-tint); border-color: #eedcea; }
.v2-worry__q { font-size: var(--v2-fs-h3); font-weight: 700; line-height: 1.45; margin: 0 0 var(--v2-s2); }
.v2-worry__a { font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); margin: 0; }
a.v2-worry:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); }

/* =====================================================================
   8-a. ロードマップ（濃紺の帯の中の「道」）
   PC(1100px〜)は横一本の道。それ未満は縦のタイムライン。
   進行線は擬似要素ではなく1本の実要素にしたので、01→07へ連続して伸ばせる。
   ===================================================================== */
.v2-road { position: relative; }
.v2-road__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-s5); position: relative; }

.v2-road__track {
  position: absolute; z-index: 0; pointer-events: none;
  background: rgba(255,255,255,.16); border-radius: var(--v2-r-pill); overflow: hidden;
}
.v2-road__progress {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--v2-brand), #ffd894);
  transform-origin: left center;
}

.v2-road__item { position: relative; z-index: 1; }
.v2-road__link {
  display: grid; gap: var(--v2-s3);
  text-decoration: none; color: inherit;
}
/* 既定は「到達済み」の見た目。JSが動かないときは道が最後まで通った状態を見せる。
   演出があるときだけ、いったん消灯させてから順に点灯させる（15-4節）。 */
.v2-road__node {
  width: 40px; height: 40px; border-radius: var(--v2-r-pill);
  background: var(--v2-brand); color: var(--v2-on-brand);
  border: 2px solid transparent; box-shadow: 0 4px 14px rgba(240,169,44,.45);
  font-family: var(--font-en, sans-serif); font-weight: 900; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: background-color .35s var(--v2-ease), color .35s var(--v2-ease),
              border-color .35s var(--v2-ease), box-shadow .35s var(--v2-ease);
}
.v2-road__name { display: block; font-weight: 700; font-size: var(--v2-fs-body); line-height: 1.4; color: var(--v2-on-navy); }
.v2-road__desc { display: block; font-size: var(--v2-fs-xs); color: var(--v2-on-navy-soft); margin-top: 3px; }
.v2-road__link:hover .v2-road__node { border-color: var(--v2-brand); }
.v2-road__link:hover .v2-road__name { color: #ffe1ab; }

/* =====================================================================
   8-b. カテゴリー
   悩みカードと差を付けるため、左に色のレールを立てた白いタイルにする。
   ===================================================================== */
.v2-cat {
  position: relative; overflow: hidden;
  flex-direction: row; align-items: center; gap: var(--v2-s4);
  padding: var(--v2-s5) var(--v2-s5) var(--v2-s5) calc(var(--v2-s5) + 6px);
}
.v2-cat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--v2-brand);
}
.v2-cat--sky::before  { background: var(--v2-sky); }
.v2-cat--mint::before { background: var(--v2-mint); }
.v2-cat--plum::before { background: var(--v2-plum); }
.v2-cat .v2-chip { margin-bottom: 0; width: 44px; height: 44px; }
.v2-cat__body { min-width: 0; flex: 1; }
.v2-cat__name { display: block; font-weight: 700; font-size: var(--v2-fs-body); line-height: 1.4; }
.v2-cat__meta { display: block; font-size: var(--v2-fs-xs); color: var(--v2-ink-faint); margin-top: 2px; }
.v2-cat__count { font-family: var(--font-en, sans-serif); font-weight: 700; color: var(--v2-brand-deep); }
.v2-cat__go {
  flex: none; color: var(--v2-ink-faint); font-family: var(--font-en, sans-serif);
  transition: transform var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease);
}
a.v2-cat:hover .v2-cat__go { transform: translateX(3px); color: var(--v2-brand-deep); }

/* =====================================================================
   9. 記事カード
   サムネイルは1200x630なので aspect-ratio で固定し、CLSを出さない。
   ===================================================================== */
.v2-post { padding: 0; overflow: hidden; }
.v2-post__thumb {
  display: block; width: 100%; aspect-ratio: 1200 / 630;
  background: var(--v2-cream-2); overflow: hidden; margin: 0;
}
.v2-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--v2-ease); }
a.v2-post:hover .v2-post__thumb img { transform: scale(1.035); }
.v2-post__body { padding: var(--v2-s5); display: flex; flex-direction: column; gap: var(--v2-s2); flex: 1; }
.v2-post__cat {
  align-self: flex-start; font-size: var(--v2-fs-xs); font-weight: 700;
  color: var(--v2-brand-deep); background: var(--v2-brand-tint);
  border-radius: var(--v2-r-pill); padding: 3px 11px;
}
.v2-post__title { font-size: var(--v2-fs-h3); font-weight: 700; line-height: 1.5; margin: 0; }
.v2-post__date { margin: auto 0 0; font-family: var(--font-en, sans-serif); font-size: var(--v2-fs-xs); color: var(--v2-ink-faint); }

/* =====================================================================
   10. ツール（プロダクトUIモック）
   「準備中カード3枚」ではなく、将来ここで操作できると感じられる画面にする。
   ただし提供済みに見せてはいけないので、ウィンドウのタイトル横に常時「準備中」を
   出し、直下に「まだ公開していません」と明記する。
   Phase6で本物を入れるときは .v2-app__body の中身だけを差し替えられる構造。
   ===================================================================== */
.v2-app {
  background: var(--v2-paper); border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r); overflow: hidden; box-shadow: var(--v2-shadow);
}
.v2-app__bar {
  display: flex; align-items: center; gap: var(--v2-s3);
  padding: 11px var(--v2-s5);
  background: #f7fafd; border-bottom: 1px solid var(--v2-line-2);
}
.v2-app__dots { display: inline-flex; gap: 6px; flex: none; }
.v2-app__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d8e2ec; display: block; }
.v2-app__title { font-size: var(--v2-fs-sm); font-weight: 700; color: var(--v2-ink-soft); }
.v2-app__badge {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--v2-sky-deep); background: var(--v2-sky-tint);
  border: 1px solid #cfe4f6; border-radius: var(--v2-r-pill); padding: 3px 11px;
}
.v2-app__body { display: grid; gap: var(--v2-s5); padding: var(--v2-s6) var(--v2-s5); }
.v2-app__form { display: grid; gap: var(--v2-s3); align-content: start; }
.v2-app__field { display: grid; gap: 5px; }
.v2-app__label { font-size: var(--v2-fs-xs); font-weight: 700; color: var(--v2-ink-soft); }
.v2-app__input {
  display: flex; align-items: center; justify-content: flex-end;
  height: 42px; padding: 0 var(--v2-s4);
  border: 1px solid var(--v2-line-2); border-radius: var(--v2-r-sm);
  background: #fbfdff; color: var(--v2-ink);
  font-family: var(--font-en, sans-serif); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.v2-app__btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; margin-top: var(--v2-s2); border-radius: var(--v2-r-pill);
  /* 押せないことは見た目で伝えるが、ラベルの「（準備中）」は
     この節が誠実であるための表示なので、薄くして読めなくしてはいけない。
     #8695a6 では 2.4:1 しかなかった。 */
  background: #dce6f0; color: #4b5b6e; font-weight: 700; font-size: var(--v2-fs-sm);
}
.v2-app__result {
  display: grid; gap: 4px; align-content: center; justify-items: center;
  padding: var(--v2-s8) var(--v2-s5);
  border-radius: var(--v2-r-sm);
  background: linear-gradient(160deg, var(--v2-brand-tint), #fffdf8);
  border: 1px solid var(--v2-brand-line);
}
.v2-app__result-label { font-size: var(--v2-fs-xs); font-weight: 700; color: var(--v2-brand-deep); }
.v2-app__result-value {
  font-family: var(--font-en, sans-serif); font-weight: 900;
  font-size: clamp(30px, 4vw, 42px); line-height: 1.1;
  color: var(--v2-brand-deep); font-variant-numeric: tabular-nums;
}
.v2-app__result-note { font-size: var(--v2-fs-xs); color: var(--v2-ink-soft); }
.v2-app__note { margin: var(--v2-s5) 0 0; font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); text-align: center; }

/* 補助の2枚。小さなモックで中身を想像させる。 */
.v2-mini { background: var(--v2-paper); border: 1px dashed #cddced; border-radius: var(--v2-r); padding: var(--v2-s5); }
.v2-mini__head { display: flex; align-items: center; gap: var(--v2-s3); margin-bottom: var(--v2-s4); }
.v2-mini__head .v2-chip { margin: 0; width: 38px; height: 38px; }
.v2-mini__head .v2-chip svg { width: 19px; height: 19px; }
.v2-mini__name { font-size: var(--v2-fs-body); font-weight: 700; }
.v2-mini__badge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--v2-sky-deep); background: var(--v2-sky-tint); border-radius: var(--v2-r-pill); padding: 2px 9px; }
.v2-mini__rows { display: grid; gap: 7px; }
.v2-mini__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3);
  font-size: var(--v2-fs-xs); color: var(--v2-ink-soft);
  padding: 9px 12px; border-radius: var(--v2-r-xs); background: #f8fafc;
}
.v2-mini__row b { font-family: var(--font-en, sans-serif); color: var(--v2-ink); }
.v2-mini__ok { color: var(--v2-mint-deep); font-weight: 700; }
.v2-mini__bar { height: 6px; border-radius: var(--v2-r-pill); background: #e6edf4; overflow: hidden; width: 92px; flex: none; }
.v2-mini__bar i { display: block; height: 100%; background: var(--v2-sky); border-radius: inherit; }
.v2-mini__desc { margin: var(--v2-s4) 0 0; font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); }

/* =====================================================================
   11. 信頼性
   カードをやめ、縦の区切り線だけで3列に分ける。直前のUIモックと質感を変える。
   ===================================================================== */
.v2-trust__item { display: flex; gap: var(--v2-s4); align-items: flex-start; }
.v2-trust__item + .v2-trust__item { margin-top: var(--v2-s6); }
.v2-trust__item .v2-chip { margin-bottom: 0; }
.v2-trust__name { display: block; font-weight: 700; font-size: var(--v2-fs-body); margin-bottom: 2px; }
.v2-trust__desc { display: block; font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); }

/* =====================================================================
   12. ヘッダー（body.home 限定）
   PCはロゴマーク + 左寄せ + 右ナビの1行。
   モバイルは「ロゴ + ハンバーガー」の1段に畳む。
   Cocoonの既存マークアップを使うので、HTMLは1文字も変えていない。
   ===================================================================== */
body.home #header-container-in { background: var(--v2-paper); }
body.home #header { padding: 0; }
body.home #header-in { padding-block: var(--v2-s4); }
body.home .tagline { display: none; }

body.home .logo-header { margin: 0; }
body.home .logo-header .site-name-text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 700; letter-spacing: .01em;
  color: var(--v2-ink); text-decoration: none;
}
body.home .logo-header .site-name-text-link::before {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background-color: var(--v2-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1c02' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 18v-4'/%3E%3Cpath d='M11.5 18v-7'/%3E%3Cpath d='M17 18V9'/%3E%3Cpath d='M19.3 4.6l.6 1.5 1.5.6-1.5.6-.6 1.5-.6-1.5L17.2 6.7l1.5-.6z' fill='%232a1c02' stroke-width='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  box-shadow: 0 3px 10px rgba(226,149,26,.42);
}

body.home #navi { background: transparent; }
body.home #navi-in { padding: 0; }
body.home #navi .menu-header {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding-bottom: var(--v2-s4); margin: 0; list-style: none;
}
body.home #navi .menu-header > li > a {
  display: block; padding: 9px 16px; border-radius: var(--v2-r-pill);
  color: var(--v2-ink-soft); font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color var(--v2-dur) var(--v2-ease), color var(--v2-dur) var(--v2-ease);
}
body.home #navi .menu-header > li > a:hover { background: var(--v2-brand-tint); color: var(--v2-brand-deep); }
body.home #navi .menu-header .item-label { font-size: inherit; }

/* ハンバーガー。JSが挿入するので、JSが無ければ存在しない（＝従来のナビが出る）。 */
.v2-navtoggle {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: var(--v2-paper); border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-sm); cursor: pointer; padding: 0;
  color: var(--v2-ink);
}
.v2-navtoggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.v2-navtoggle__bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .24s var(--v2-ease), opacity .18s linear;
}
.v2-navtoggle__bars i:nth-child(1) { top: 0; }
.v2-navtoggle__bars i:nth-child(2) { top: 6px; }
.v2-navtoggle__bars i:nth-child(3) { top: 12px; }
.v2-navtoggle[aria-expanded="true"] .v2-navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.v2-navtoggle[aria-expanded="true"] .v2-navtoggle__bars i:nth-child(2) { opacity: 0; }
.v2-navtoggle[aria-expanded="true"] .v2-navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 899px) {
  /* JSが動いたときだけ1段ヘッダーにする。動かなければ従来どおりナビが見える。 */
  body.home.v2-nav-ready #header-container-in {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--v2-s4);
    padding-inline: var(--v2-pad-x);
    border-bottom: 1px solid var(--v2-line);
  }
  body.home.v2-nav-ready #header-in { padding-inline: 0; width: auto; text-align: left; }
  body.home.v2-nav-ready .v2-navtoggle { display: inline-flex; }

  body.home.v2-nav-ready #navi {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: var(--v2-paper);
    border-bottom: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow);
    padding: var(--v2-s3) var(--v2-pad-x) var(--v2-s5);
    display: none;
  }
  body.home.v2-nav-open #navi { display: block; }
  body.home.v2-nav-ready #navi .menu-header {
    flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 0;
  }
  body.home.v2-nav-ready #navi .menu-header > li { width: 100%; }
  body.home.v2-nav-ready #navi .menu-header > li > a {
    padding: 13px var(--v2-s4); border-radius: var(--v2-r-sm);
    font-size: 15px; color: var(--v2-ink);
  }
}

@media (min-width: 900px) {
  body.home #header-container-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--v2-s6);
    max-width: var(--v2-container); margin-inline: auto;
    padding-inline: var(--v2-pad-x);
    border-bottom: 1px solid var(--v2-line);
  }
  body.home #header-in { width: auto; padding-inline: 0; }
  body.home #navi { flex: 0 1 auto; min-width: 0; }
  /* #navi-in は Cocoon本体の .wrap（style.css, max-width:1200px）を継承している。
     ここでは #header-container-in が --v2-container(1120px)で幅を決めているので、
     子側の .wrap の max-width が残ると1200pxぶんの領域を要求し続け、
     1440/1280pxでナビがヘッダーの外まではみ出して横スクロールが出ていた
     （2026-09-10、本番で実測して確認）。ID > class の詳細度でここから上書きする。 */
  body.home #navi-in { max-width: none; width: auto; }
  body.home #navi .menu-header { justify-content: flex-end; padding-bottom: 0; }
  .v2-navtoggle { display: none !important; }
}

/* =====================================================================
   13. レスポンシブ
   ===================================================================== */
@media (max-width: 1099px) {
  /* ロードマップは縦のタイムライン。7つを横に無理やり詰めない。 */
  .v2-road__link { grid-template-columns: 40px 1fr; align-items: center; }
  .v2-road__track { left: 19px; top: 20px; bottom: 20px; width: 2px; }
  .v2-road__progress { transform-origin: center top; }
}
@media (min-width: 600px) {
  .v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-app__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
@media (min-width: 900px) {
  .v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  /* 信頼性は縦の区切り線で3列に分ける */
  .v2-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .v2-trust__item { padding-inline: clamp(16px, 2.4vw, 30px); }
  .v2-trust__item + .v2-trust__item { border-left: 1px solid var(--v2-line); margin-top: 0; }
}
@media (min-width: 1100px) {
  /* ロードマップを横一本の道にする */
  .v2-road__list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--v2-s3); }
  .v2-road__link { justify-items: center; text-align: center; gap: var(--v2-s3); }
  .v2-road__name { font-size: 15px; }
  .v2-road__desc { font-size: 12px; }
  /* 道はノードの中心（上から19px）を通す。左右は列の半分ずつ内側で止める。 */
  .v2-road__track { left: calc(100% / 14); right: calc(100% / 14); top: 19px; height: 2px; }
  .v2-road__progress { transform-origin: left center; }
}

@media (max-width: 599px) {
  /* メタのピルを詰める。既定のままだと2行で77px使い、Heroが縦に伸びる。 */
  .v2-hero__meta { gap: 6px; }
  .v2-hero__meta span { padding: 4px 9px; font-size: 11.5px; }

  /* スマホでは重なりの寄せを浅くする。寄せすぎるとカードが細くなって読みにくい。 */
  .v2-viz__slot--product { margin-right: 8%; }
  .v2-viz__slot--chart   { margin-left: 7%; }
  .v2-viz__slot--profit  { margin-left: 10%; margin-right: 2%; }
  .v2-viz__chip { margin-left: 0; }
  .v2-viz__card--product { --rot: -.7deg; }
  .v2-viz__card--chart   { --rot: .45deg; }
  .v2-viz__card--profit  { --rot: -.35deg; }
}
@media (max-width: 360px) {
  :root { --v2-pad-x: 14px; }
  .v2-card { padding: var(--v2-s5); }
  /* 320pxではピルが1行に1つしか入らず、メタだけで4行になってHeroが伸びる。
     この幅では枠を外して2列に組む。区切り記号を使わずに項目が分かれるので、
     ピルと同じく折り返しで行頭に点が残ることもない。 */
  .v2-hero__meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
    font-size: 11px;
  }
  .v2-hero__meta span { padding: 0; background: none; border: 0; }
}

/* =====================================================================
   14. アクセシビリティ
   ===================================================================== */
.v2 a:focus-visible,
.v2 button:focus-visible,
.v2-navtoggle:focus-visible,
body.home #navi a:focus-visible,
body.home .site-name-text-link:focus-visible {
  outline: 3px solid var(--v2-sky); outline-offset: 3px; border-radius: var(--v2-r-xs);
}
.v2-band--navy a:focus-visible { outline-color: var(--v2-brand); }

.v2-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   15. アニメーション層
   .v2-anim は js/design-v2.js が <html> に付ける。
   JSが動かなければ以下はすべて効かず、「完成した静止状態」が見える。
   ===================================================================== */

/* --- 15-1. スクロールで現れる ---------------------------------------- */
.v2-anim .v2-reveal { opacity: 0; transform: translateY(16px); }
.v2-anim .v2-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--v2-ease-out), transform .55s var(--v2-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* --- 15-2. Heroの短いストーリー --------------------------------------
   ① 商品カードが出る → ② グラフ線が左から描かれる → 終点が反応 →
   ✨ AI分析が点灯 → ③ 利益カードが出て強調 → ¥0から¥3,280へ
   → 完了後だけ全体がごく緩く浮遊しはじめる。
   合計およそ4.3秒。左のコピーは最初から読めるので、読書を妨げない。 */
@keyframes v2SlotIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.v2-anim .v2-viz__slot { opacity: 0; animation: v2SlotIn .62s var(--v2-ease-out) forwards; }
.v2-anim .v2-viz__slot--product { animation-delay: .15s; }
.v2-anim .v2-viz__slot--chart   { animation-delay: .60s; }
.v2-anim .v2-viz__slot--profit  { animation-delay: 2.75s; }

@keyframes v2ChipIn {
  0%   { opacity: 0; transform: translateY(8px) scale(.9); }
  60%  { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes v2Draw { to { stroke-dashoffset: 0; } }
@keyframes v2FadeIn { to { opacity: 1; } }

.v2-anim .v2-viz__line {
  stroke-dasharray: 560; stroke-dashoffset: 560;
  animation: v2Draw 1.25s var(--v2-ease-out) .95s forwards;
}
.v2-anim .v2-viz__area { opacity: 0; animation: v2FadeIn .7s ease-out 1.75s forwards; }

/* 終点の反応。真円のまま軽く弾んで、波紋を1度だけ出す。 */
@keyframes v2DotPop {
  0%   { opacity: 0; transform: scale(.3); box-shadow: 0 0 0 0 rgba(240,169,44,.55); }
  55%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 12px rgba(240,169,44,0); }
}
.v2-anim .v2-viz__dot { opacity: 0; animation: v2DotPop .8s var(--v2-ease-out) 2.05s forwards; }

/* AIチップは点灯してから、ゆっくり呼吸する。 */
@keyframes v2Pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(23,35,58,.26), 0 0 0 0 rgba(240,169,44,.40); }
  50%      { box-shadow: 0 8px 20px rgba(23,35,58,.26), 0 0 0 9px rgba(240,169,44,0); }
}
.v2-anim .v2-viz__chip {
  opacity: 0;
  animation: v2ChipIn .5s var(--v2-ease-out) 2.30s forwards,
             v2Pulse 3.4s ease-out 4.6s infinite;
}

/* 利益カードは出たあとに一度だけ淡く光る。 */
@keyframes v2ProfitGlow {
  0%, 100% { box-shadow: var(--v2-shadow); }
  40%      { box-shadow: var(--v2-shadow), 0 0 0 6px rgba(240,169,44,.20); }
}

/* 完了後の浮遊。位相をずらして同時に動かない。 */
@keyframes v2Float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-7px) rotate(var(--rot, 0deg)); }
}
.v2-anim .v2-viz__card--product { animation: v2Float 6.5s ease-in-out 4.30s infinite; }
.v2-anim .v2-viz__card--chart   { animation: v2Float 7.4s ease-in-out 4.70s infinite; }
.v2-anim .v2-viz__card--profit  {
  animation: v2ProfitGlow 1.1s ease-out 3.15s 1,
             v2Float 8.1s ease-in-out 5.10s infinite;
}

/* --- 15-3. 濃紺帯の装飾のごく緩い移動 --------------------------------- */
@keyframes v2AuraDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(2.5%, -2%, 0); }
}
.v2-anim .v2-band__aura { animation: v2AuraDrift 22s ease-in-out infinite; }

/* --- 15-4. ロードマップの進行線 --------------------------------------- */
.v2-anim .v2-road__progress { transform: scaleX(0); }
.v2-anim .v2-road.is-in .v2-road__progress {
  transform: scaleX(1);
  transition: transform 1.5s var(--v2-ease-out) .15s;
}
/* 演出中は未到達のノードを消灯・縮小しておく。線が届いた順に .is-lit が付く。 */
.v2-anim .v2-road__item:not(.is-lit) .v2-road__node {
  background: var(--v2-navy-deep); color: var(--v2-on-navy-soft);
  border-color: rgba(255,255,255,.22); box-shadow: none;
  transform: scale(.86);
}
.v2-anim .v2-road__node {
  transition: transform .4s var(--v2-ease-out), background-color .35s var(--v2-ease),
              color .35s var(--v2-ease), border-color .35s var(--v2-ease), box-shadow .35s var(--v2-ease);
}
@media (max-width: 1099px) {
  .v2-anim .v2-road__progress { transform: scaleY(0); }
  .v2-anim .v2-road.is-in .v2-road__progress {
    transform: scaleY(1);
    transition: transform 1.5s var(--v2-ease-out) .15s;
  }
}

/* --- 15-5. スマホは簡略化。読み始めるまでの速さを優先する。 ----------- */
@media (max-width: 767px) {
  .v2-anim .v2-reveal { transform: translateY(9px); }
  .v2-anim .v2-reveal.is-in { transition-duration: .42s; transition-delay: calc(var(--i, 0) * 45ms); }
  .v2-anim .v2-viz__card--product,
  .v2-anim .v2-viz__card--chart { animation: none; }
  .v2-anim .v2-viz__card--profit { animation: v2ProfitGlow 1.1s ease-out 3.15s 1; }
  .v2-anim .v2-viz__chip { animation: v2ChipIn .5s var(--v2-ease-out) 2.30s forwards; }
  .v2-anim .v2-band__aura { animation: none; }
}

/* --- 15-6. 動きを減らす設定を尊重する ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2-anim .v2-reveal { opacity: 1; transform: none; }
  .v2-anim .v2-viz__slot { opacity: 1; }
  .v2-anim .v2-viz__chip,
  .v2-anim .v2-viz__dot,
  .v2-anim .v2-viz__area { opacity: 1; }
  .v2-anim .v2-viz__line { stroke-dashoffset: 0; }
  .v2-anim .v2-road__progress { transform: none; }
  .v2-anim .v2-road__item:not(.is-lit) .v2-road__node {
    background: var(--v2-brand); color: var(--v2-on-brand);
    border-color: transparent; box-shadow: 0 4px 14px rgba(240,169,44,.45); transform: none;
  }
  .v2-anim *, .v2-anim *::before, .v2-anim *::after {
    animation: none !important; transition-duration: .01ms !important;
  }
}

/* =====================================================================
   16. ブランドキャラクター（v2.3）
   ---------------------------------------------------------------------
   ねらい
     「人の気配」を足して無機質さを減らす。ただし主役はあくまで
     商品 → 価格推移 → AI分析 → 想定利益 という体験のほうなので、
     人物はUIカードの背面に置き、カードの陰から覗く関係にしている。

   構造
     .v2-char            外枠。比率だけを先に確保するので画像が来てもCLSが出ない
       .v2-char__glow    背後のにじみ
       .v2-char__figure  画像またはプレースホルダー
       .v2-char__spark   スマホまわりのキラッ（AI分析の点灯と同期）
       .v2-char__ok      利益が出たときの小さな成功反応

   Hero専用にしていない。将来 .v2-char--spot / --full を足せば
   記事内の図解・404・無料ツールでも同じコンポーネントを使える。
   ===================================================================== */
:root {
  /* 画像の比率。素材を別比率にするときはここと README を合わせて変える。 */
  --v2-char-ratio: 3 / 4;

  /* 反応マーク(成功マーク・キラッ)の位置。人物の枠に対する割合で指定する。
     絵柄が決まったあと「肩の横」「スマホの先」へ寄せるのはこの4つだけを触ればよく、
     CSSの他の場所を読む必要がない。既定値は README の余白規定
     (人物の周囲に上下左右5%以内)を満たす素材を想定している。 */
  /* 2026-09-09、正式素材を入れて実測し直した値。
     素材を入れる前の既定値(4%/17%・70%/41%)では、
     チェックが人物から外れてリード文の上に浮き、
     キラッがスマホ画面の中央に乗っていた。 */
  --v2-char-ok-x:   15%;   /* 上げた手の外側。人物に付いて見える位置 */
  --v2-char-ok-y:   28%;
  --v2-char-spark-x: 78%;  /* スマホの上端。絵柄側の効果線と同じ塊に見える位置 */
  --v2-char-spark-y: 34%;

  /* 足元のなじませ。人物の下端は画面外へ続く前提で切るが、
     Heroの中では「切った線」がそのまま出てしまうので、下だけ透明へ送る。 */
  --v2-char-fade: 82%;
}

.v2-char {
  position: relative;
  z-index: 0;                 /* UIカード(.v2-viz__slot は z-index:1)より背面 */
  width: var(--v2-char-w, 34%);
  aspect-ratio: var(--v2-char-ratio);
  pointer-events: none;       /* 装飾なのでクリックを奪わない */
}
.v2-char__figure {
  position: absolute; inset: 0; display: block;
  /* 人物の下端を透明へ送る。素材の切り口が Hero の中で
     水平な直線として見えてしまうのを防ぐ（v2.3のQAで実素材を入れて判明）。
     マスク非対応のブラウザでは単に従来どおり切り口が出るだけで、内容は欠けない。 */
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--v2-char-fade), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--v2-char-fade), transparent 100%);
}
.v2-char__figure img,
.v2-char__ph {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}

/* 背後のにじみ。人物を地に馴染ませるためだけの装飾。 */
.v2-char__glow {
  position: absolute; z-index: -1;
  inset: 6% -20% -6% -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,169,44,.26), rgba(240,169,44,0) 78%);
  filter: blur(2px);
}

/* --- プレースホルダー（画像が置かれるまでの配置枠） ------------------- */
.v2-char--placeholder .v2-char__figure { display: grid; place-items: center; }
/* 注記は上端に置く。下端は 900px 未満でカードの背面に回り込むため、
   下に置くと文字が途中で隠れて壊れて見える（768のQAで判明）。 */
.v2-char__phnote {
  position: absolute; left: 50%; top: 7%;
  transform: translateX(-50%);
  width: max-content; max-width: 92%;
  text-align: center; line-height: 1.5;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--v2-brand-deep);
  background: rgba(255,255,255,.86);
  border-radius: var(--v2-r-xs);
  padding: 4px 9px;
}

/* --- 小さな反応 ------------------------------------------------------- */
.v2-char__spark {
  position: absolute; left: var(--v2-char-spark-x); top: var(--v2-char-spark-y);
  width: 22px; height: 22px;
  color: var(--v2-brand);
  filter: drop-shadow(0 2px 6px rgba(240,169,44,.5));
}
.v2-char__spark svg { display: block; width: 100%; height: 100%; }

.v2-char__ok {
  position: absolute; left: var(--v2-char-ok-x); top: var(--v2-char-ok-y);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-mint); color: #fff;
  box-shadow: 0 4px 12px rgba(29,143,106,.4);
}
.v2-char__ok svg { display: block; width: 14px; height: 14px; }

/* --- Hero での配置 ---------------------------------------------------
   スマホは流し込み（UIカードの上に右寄せ）。
   PCは絶対配置で、カードの左下から覗かせる。
   絶対配置の親は .v2-viz（position: relative）で、さらに外側の .v2-hero が
   overflow: hidden なので、はみ出しても横スクロールは発生しない。 */
.v2-char--hero {
  --v2-char-w: 33%;
  justify-self: end;
  margin-right: 3%;
  /* 商品カードに深めに重ねる。スマホでHeroが縦に伸びるのを抑えるため、
     人物の下半分はカードの背面に隠す。頭と手元だけが見えていればよい。 */
  margin-bottom: -21%;
}
/* プレースホルダーの注記は狭い画面では収まらないので出さない。
   実素材が入ればこの要素自体が出力されない。 */
@media (max-width: 480px) {
  .v2-char__phnote { display: none; }
}

/* タブレット幅では、人物の右をグラフカードの右端にそろえ、重なりを深くする。
   3%の右余白と -21% の重なりのままだと、人物の左に 145px の空白の帯ができて
   Heroの真ん中が抜けて見えていた（768のQAで実測）。 */
@media (min-width: 600px) and (max-width: 899px) {
  .v2-char--hero { --v2-char-w: 34%; margin-right: 0; margin-bottom: -26%; }
}

@media (min-width: 900px) {
  /* PCでは人物の居場所を作るため、カードの帯を右へ寄せる。
     こうしないと人物がカードにほぼ完全に隠れてしまう（v2.3の初回検証で判明）。
     カード幅は288〜338pxを確保できるので、金額の可読性は落ちない。 */
  .v2-viz__slot--product { margin-left: 20%; margin-right: 0; }
  .v2-viz__slot--chart   { margin-left: 26%; }
  .v2-viz__slot--profit  { margin-left: 32%; }
  .v2-viz__chip { margin-left: 24%; }

  .v2-char--hero {
    --v2-char-w: 41%;
    position: absolute;
    left: -9%;
    bottom: 0;
    margin: 0;
  }
  .v2-char__spark { width: 26px; height: 26px; }
  .v2-char__ok { width: 30px; height: 30px; }
  .v2-char__ok svg { width: 16px; height: 16px; }
}

/* 320pxでは人物をさらに小さくして、Heroが縦に伸びるのを抑える。 */
@media (max-width: 360px) {
  .v2-char--hero { --v2-char-w: 30%; margin-bottom: -15%; }
  .v2-char__spark { width: 18px; height: 18px; }
  /* 320pxでは人物が76px幅しかなく、22pxのマークだと顔にかかるほど大きく見える。
     PCでの比率(人物幅の約18%)に合わせて詰める。 */
  .v2-char__ok { width: 18px; height: 18px; }
  .v2-char__ok svg { width: 10px; height: 10px; }
}

/* =====================================================================
   15-7. キャラクターの演出（v2.3）
   Heroのストーリーに軽く同期させる。人物自体は大きく動かさない。
     0.35s 人物が現れる（商品カード 0.15s の直後）
     2.30s AI分析チップと同時にキラッ
     3.15s 利益カードの強調と同時に成功マーク
     4.4s〜 2〜3pxのごく緩い上下と、ごくわずかな左右揺れ
   ===================================================================== */
@keyframes v2CharIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes v2CharFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-1.5px, -3px, 0); }
}
@keyframes v2SparkIn {
  0%   { opacity: 0; transform: scale(.4) rotate(-24deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes v2SparkTwinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.88); }
}
@keyframes v2OkIn {
  0%   { opacity: 0; transform: scale(.4); }
  65%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: none; }
}

.v2-anim .v2-char { opacity: 0; animation: v2CharIn .7s var(--v2-ease-out) .35s forwards; }
.v2-anim .v2-char__figure { animation: v2CharFloat 7.8s ease-in-out 4.4s infinite; }
.v2-anim .v2-char__spark {
  opacity: 0;
  animation: v2SparkIn .55s var(--v2-ease-out) 2.30s forwards,
             v2SparkTwinkle 3.6s ease-in-out 4.4s infinite;
}
.v2-anim .v2-char__ok { opacity: 0; animation: v2OkIn .5s var(--v2-ease-out) 3.15s forwards; }

/* スマホは浮遊を止める。出現だけ残す。 */
@media (max-width: 767px) {
  .v2-anim .v2-char__figure { animation: none; }
  .v2-anim .v2-char__spark {
    animation: v2SparkIn .55s var(--v2-ease-out) 2.30s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-anim .v2-char,
  .v2-anim .v2-char__spark,
  .v2-anim .v2-char__ok { opacity: 1; }
}