@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;
  /* 2026-09-19（PASS 5）: 節と節のあいだを約2割詰めた（52→40px / 96→76px）。
     AIが作るサイトにありがちな「大きすぎる section padding」が、
     読む理由のない空白として375pxで節ごとに104px積み上がっていた。
     節の区切り自体は背景・罫線・形の違いで付いているので、余白は要らない。 */
  --v2-section-y: clamp(40px, 6vw, 76px);
  --v2-gap:       clamp(16px, 2.2vw, 24px);

  /* --- 文字サイズ: すべて clamp。ブレークポイントで飛ばない ------------- */
  /* 2026-09-20（PASS 6）: 下限を27→31px。
     375pxでは Hero の見出しも節の見出しもどちらも27pxで、
     ページで一番言いたいことと、ただの節タイトルが同じ強さになっていた。
     31pxにすると3行組みになり「もっと簡単に。」が独立した行として立つ。
     Heroの高さは603px（PASS 4で許容と判断された値）に収まり、
     主CTAも1画面目の中に残る。PC（52px）は変えていない。 */
  --v2-fs-display: clamp(31px, 8vw, 52px);
  --v2-fs-h2:      clamp(23px, 3.2vw, 34px);
  --v2-fs-h3:      clamp(17px, 1.7vw, 20px);
  /* 2026-09-20（PASS 6）: 下限を15→16px。日本語の本文で15pxは小さく、
     375pxのリード文が「読み飛ばす細字」になっていた。 */
  --v2-fs-lead:    clamp(16px, 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--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; }
/* 2026-09-20（PASS 5）: 濃紺帯の中でにじんでいた装飾（.v2-band__aura）を外した。
   ぼかした琥珀と青の円を重ねて緩く動かすのは、AIが作るSaaSサイトの背景そのもの。
   帯そのものが紺のグラデーションで既に奥行きを持っているので、無くても沈まない。
   帯からはみ出す唯一の要素でもあったので、9幅の計測から「はみ出し」の報告も消える。 */

/* =====================================================================
   3. タイポグラフィ
   ===================================================================== */
/* 節の名札。2026-09-20（PASS 6）で、淡い琥珀の丸ピルをやめた。
   ピル＋英字フォント＋大文字化＋字間広めは、英語のSaaSサイトの eyebrow の作法を
   日本語にそのまま当てたもので、トップに3つ並ぶと一気に「テンプレート」に見える。
   日本語には大文字も無いので text-transform も効いていなかった。
   短い琥珀の罫線を頭に置くだけにして、線をブランドの言語に寄せる。 */
.v2-eyebrow {
  display: flex; align-items: center; gap: var(--v2-s3);
  font-size: var(--v2-fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--v2-brand-deep);
  margin: 0 0 var(--v2-s3);
}
.v2-eyebrow::before {
  content: ""; flex: none;
  width: 22px; height: 3px;
  background: var(--v2-brand);
}
.v2-band--navy .v2-eyebrow { color: #ffd894; }
/* 濃紺の帯では中央寄せの見出しに付くので、線ごと中央へ寄せる。 */
.v2-section-head:not(.v2-section-head--left) .v2-eyebrow { justify-content: center; }

.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; }

/* 見出しの位置もリズムの一部にする。
   全部を中央に置くと、節が変わったことが背景色でしか分からなくなる。
   本文が続く節（リスト・記事・タグ）は左に、面で見せる節（ロードマップ）は中央に。 */
.v2-section-head--left { text-align: left; margin-bottom: clamp(20px, 2.6vw, 30px); }
.v2-section-head--left .v2-lead { margin-inline: 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; align-items: center; gap: var(--v2-s3) var(--v2-s6); }

/* 主CTAの隣に置く副リンク。丸ボタンにしない（押しどころを1つに保つ）。
   タップ領域は確保するので、高さだけボタンと同じにしておく。 */
.v2-textlink {
  display: inline-flex; align-items: center; gap: var(--v2-s2);
  min-height: 48px;
  font-size: var(--v2-fs-body); font-weight: 700;
  color: var(--v2-ink); text-decoration: none;
  border-bottom: 2px solid var(--v2-brand-line);
}
.v2-textlink:hover { color: var(--v2-brand-deep); border-bottom-color: var(--v2-brand); }
.v2-textlink:hover .v2-btn__arrow { transform: translateX(3px); }

/* =====================================================================
   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行になる）。
   項目ごとに淡いピルを与えれば、区切り記号そのものが要らなくなり、
   どの幅で何行に折り返しても崩れない。 */
/* 2026-09-20（PASS 6）: 白い丸枠のチップ2つをやめた。
   Heroの下に小さなピルが並ぶのも「AIが作ったサービスサイト」の記号で、
   しかも中身は事実の1行（無料であること・記事数と更新日）でしかない。
   枠を外して、区切り線1本で分けたただの1行にする。 */
.v2-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--v2-s4);
  margin: var(--v2-s6) 0 0;
  font-size: var(--v2-fs-xs); color: var(--v2-ink-soft);
}
/* 区切り線は同じ行に並んだときだけ意味がある。折り返すと行頭に縦線が残って
   誤字のように見えるので、2つが確実に1行へ収まる幅でだけ出す。 */
@media (min-width: 600px) {
  .v2-hero__meta span + span {
    padding-left: var(--v2-s4);
    border-left: 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ビジュアル
   ---------------------------------------------------------------------
   2026-09-19（PASS 5）で全面的に書き直した。
   それまでは「商品カード → 価格推移グラフ → AI分析 → 想定利益カード」を
   浮かせて重ねていたが、これはAIが生成するSaaSサイトの見た目そのもので、
   サイト全体から外してきた記号が、一番目立つ場所にだけ残っていた。

   いま置くのは、仕入れの判断そのもの1件だけ。
     何を・いくらで仕入れて、いくらで売ると、いくら残るか
   面も枠も影も傾きも持たせない。罫線1本と文字の大小だけで組む。
   ツールの「仕入れメモ」（入力欄のある紙）とは形を変える。Heroは紹介で、
   同じものを2回見せない。
   ===================================================================== */
.v2-hero__visual { position: relative; }
.v2-viz { position: relative; display: flex; align-items: flex-end; gap: var(--v2-s4); }

.v2-case {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: var(--v2-s5);
}
.v2-case__item {
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  color: var(--v2-ink);
}
.v2-case__flow {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px var(--v2-s2);
  margin: 2px 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--v2-ink-soft);
}
.v2-case__leg b {
  font-family: var(--font-en, sans-serif); font-weight: 700;
  color: var(--v2-ink); font-variant-numeric: tabular-nums;
}
.v2-case__to { color: var(--v2-ink-faint); }

/* 答え。上に1本だけ罫線を引いて、ここから下が結論だと示す。 */
.v2-case__out {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--v2-s3);
  margin: var(--v2-s3) 0 0;
  padding-top: var(--v2-s3);
  border-top: 2px solid var(--v2-ink);
}
.v2-case__outlabel { font-size: 13px; font-weight: 700; color: var(--v2-ink-soft); }
.v2-case__outnum {
  font-family: var(--font-en, sans-serif);
  font-size: clamp(26px, 2.4vw, 34px); font-weight: 900; line-height: 1.1;
  color: var(--v2-brand-deep); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.v2-viz__note {
  position: relative; z-index: 1; margin: var(--v2-s3) 0 0;
  font-size: 11.5px; color: var(--v2-ink-faint);
}

/* =====================================================================
   7. 悩み別の1行リスト（旧「悩みカード」）
   ---------------------------------------------------------------------
   PHASE B（2026-09-18）でカード4枚から罫線区切りの行へ変えた。
   面・枠・影・アイコンを4回繰り返すぶんの高さ（375pxで約900px）が丸ごと消え、
   4つの悩みを一度に見比べて自分のものを選べるようになる。
   節ごとに形を変えるという方針の起点でもある（前後はカードではない）。
   ===================================================================== */

/* 2026-09-18（PASS 4）：カード（.v2-card / .v2-post）はトップから無くなった。
   最後まで残っていた新着記事を、日付から読む一覧（.v2-news）へ変えたため。
   使っていないクラスは残さない。必要になったらそのときの形で書く。 */


/* ---- 悩み別リスト ---- */
.v2-asks {
  list-style: none; margin: 0; padding: 0;
  max-width: 920px;
  border-top: 2px solid var(--v2-ink);
}
.v2-ask { border-bottom: 1px solid var(--v2-line); }
.v2-ask:last-child { border-bottom: 2px solid var(--v2-ink); }
.v2-ask__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "q go" "a go";
  align-items: center;
  column-gap: var(--v2-s4);
  row-gap: 2px;
  min-height: 74px;
  padding: var(--v2-s4) 2px;
  text-decoration: none; color: inherit;
}
.v2-ask__q {
  grid-area: q;
  font-size: var(--v2-fs-h3); font-weight: 700; line-height: 1.45;
  color: var(--v2-ink);
}
.v2-ask__a {
  grid-area: a;
  /* 375pxで14pxだと、答えの一言が「読む気が無くても拾える」濃さ・大きさに届かない。
     悩みを選ぶ材料そのものなので、本文と同じ15pxまで上げる。 */
  font-size: 15px; line-height: 1.7; color: var(--v2-ink-soft);
}
.v2-ask__go {
  grid-area: go;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--v2-r-pill);
  background: var(--v2-brand-tint); color: var(--v2-brand-deep);
  font-family: var(--font-en, sans-serif);
  transition: transform var(--v2-dur) var(--v2-ease), background-color var(--v2-dur) var(--v2-ease);
}
.v2-ask__link:hover { background: var(--v2-cream-2); }
.v2-ask__link:hover .v2-ask__go { transform: translateX(3px); background: var(--v2-brand); color: var(--v2-on-brand); }

/* ---- まず読んでほしい3本（番号つきの行） ---- */
/* 読める幅に絞る。PCで1120px全部を使うと、視線が横に流れて順番が読めなくなる。 */
.v2-pick { list-style: none; margin: 0; padding: 0; max-width: 920px; }
.v2-pick__item { border-top: 1px solid var(--v2-line); }
.v2-pick__item:first-child { border-top: 2px solid var(--v2-ink); }
.v2-pick__item:last-child { border-bottom: 2px solid var(--v2-ink); }
.v2-pick__link {
  display: grid;
  grid-template-columns: auto 88px 1fr;
  align-items: center;
  gap: var(--v2-s4);
  padding: var(--v2-s4) 2px;
  text-decoration: none; color: inherit;
}
.v2-pick__no {
  font-family: var(--font-en, sans-serif);
  font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; line-height: 1;
  /* 2026-09-20（PASS 6）: --v2-brand(#f0a92c) はクリーム地で 1.94:1 しかなく、
     大きな文字の基準 3:1 にも届いていなかった（読む順番を示す数字なので装飾ではない）。
     淡い面用に用意してある --v2-brand-deep に替える。 */
  color: var(--v2-brand-deep); font-variant-numeric: tabular-nums;
  width: 1.1em; text-align: center;
}
.v2-pick__thumb {
  display: block; border-radius: var(--v2-r-sm); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--v2-cream-2);
}
.v2-pick__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-pick__body { display: block; min-width: 0; }
.v2-pick__cat {
  display: block; font-size: var(--v2-fs-xs); font-weight: 700;
  color: var(--v2-brand-deep); margin-bottom: 2px;
}
.v2-pick__title {
  display: block; font-size: var(--v2-fs-h3); font-weight: 700; line-height: 1.5;
}
.v2-pick__link:hover .v2-pick__title { color: var(--v2-brand-deep); }

/* =====================================================================
   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. カテゴリー（その他の入口）
   ---------------------------------------------------------------------
   ページ末尾の俯瞰用なので、タイル6枚をやめてタグの一列にした。
   ここを重くすると、上の「悩み別」「3本」と入口が競合して選べなくなる。
   ===================================================================== */
.v2-tags { list-style: none; margin: 0; padding: 0; max-width: 920px; display: flex; flex-wrap: wrap; gap: var(--v2-s3); }
.v2-tag {
  display: inline-flex; align-items: center; gap: var(--v2-s2);
  min-height: 46px; padding: 0 var(--v2-s5);
  border-radius: var(--v2-r-pill);
  background: var(--v2-paper); border: 1px solid var(--v2-line);
  text-decoration: none; color: var(--v2-ink);
  font-size: var(--v2-fs-sm); font-weight: 700;
  transition: border-color var(--v2-dur) var(--v2-ease), background-color var(--v2-dur) var(--v2-ease);
}
.v2-tag:hover { border-color: var(--v2-brand); background: var(--v2-brand-tint); color: var(--v2-ink); }
.v2-tag__n {
  font-family: var(--font-en, sans-serif); font-size: var(--v2-fs-xs);
  color: var(--v2-ink-faint); font-variant-numeric: tabular-nums;
}

/* =====================================================================
   9. 新着記事（日付から読む一覧）
   ---------------------------------------------------------------------
   2026-09-18（PASS 4）でサムネイル付きカード3枚をやめた。
   「この3本」が既に番号＋図版で記事へ誘っているので、ここで同じ見せ方を
   繰り返す必要がない。新着に要るのは「いつ更新されたか」だけで、
   カード3枚分の高さ（375pxで約700px）はその情報量に見合っていなかった。
   日付を先に置き、題名を主役にした素の一覧にして、節の役割を分ける。
   ===================================================================== */
/* 悩み別（.v2-asks）と同じ「罫線で区切った行」にならないよう、
   ここでは上下の太罫線を持たせない。選ばせる場所ではなく、記録を並べる場所。 */
.v2-news {
  list-style: none; margin: 0; padding: 0;
  max-width: 920px;
}
.v2-news__item + .v2-news__item { border-top: 1px solid var(--v2-line); }
.v2-news__link {
  display: block; padding: var(--v2-s4) 0;
  text-decoration: none; color: inherit;
  transition: background var(--v2-dur) var(--v2-ease);
}
.v2-news__link:hover { background: var(--v2-cream-2); }
.v2-news__meta { display: flex; align-items: center; gap: var(--v2-s3); }
.v2-news__date {
  font-family: var(--font-en, sans-serif); font-size: var(--v2-fs-xs);
  color: var(--v2-ink-faint); font-variant-numeric: tabular-nums;
}
.v2-news__cat { font-size: var(--v2-fs-xs); font-weight: 700; color: var(--v2-brand-deep); }
.v2-news__title {
  display: block; margin-top: 2px;
  font-size: var(--v2-fs-h3); font-weight: 700; line-height: 1.55;
}
.v2-news__link:hover .v2-news__title { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   10. ツール節（トップで一度だけ「使える感じ」を見せる場所）
   ---------------------------------------------------------------------
   PHASE B（2026-09-18）で、ブラウザ窓ふうのSaaSモック（.v2-app）をやめた。
   窓・信号ドット・角丸カードは「よくあるAI製SaaSサイト」の記号そのもので、
   しかも本物のツールの画面（仕入れメモ）と似ていなかった。
   ここで見る紙と、ツールを開いて出てくる紙を同じ形にする。

   クリームの地に紙を1枚置くだけにして、角丸カードを重ねない。
   数字は本番の利益計算ツールで実測した入力例（2026-09-14）。
   ===================================================================== */
.v2-toolzone {
  display: grid;
  gap: clamp(24px, 3.4vw, 40px);
  padding: clamp(28px, 4.2vw, 52px) clamp(18px, 3.2vw, 40px);
  background: var(--v2-cream-2);
  /* 2026-09-20（PASS 6）: 角丸12px → 2px。
     Heroが角丸26pxの大きな面なので、その直下にもう1枚 角丸の面が来ると
     「同じ景色が2回」に見えていた。角をほぼ立てると、Heroは“顔”、
     ここは“机に置いた作業用の紙”という別物として読める。
     琥珀の上罫線も、角丸だと端が丸まって線に見えなかった。 */
  border-radius: 2px;
  border-top: 3px solid var(--v2-brand);
}
/* 2026-09-19（PASS 5）: 右の紙（伝票）の視覚的な強さに対して左が負けていた。
   文章を増やさずに、見出しだけを一段大きくして釣り合いを取る。 */
.v2-toolzone__say .v2-h2 { font-size: clamp(27px, 3.4vw, 42px); }
.v2-toolzone__say .v2-lead { margin-bottom: 0; }
/* グリッドの行に入れると、既定の stretch でボタンが行の高さまで伸びる（1440pxで82px）。
   Heroのボタン(52px)と高さが食い違うので、ここで止める。 */
.v2-toolzone__act { gap: var(--v2-s3); align-items: start; align-self: start; }
.v2-toolzone__fine {
  margin: 0; font-size: var(--v2-fs-xs); line-height: 1.7; color: var(--v2-ink-faint);
}

/* ---- 仕入れメモ（入力例） ----
   ツール本体（css/profit-calculator.css）と同じ作り：
   紙の地、上辺の紺の太線、下罫線だけの記入欄、上下を挟む答えの伝票。 */
.v2-memo {
  background: #fffdf8;
  border: 1px solid var(--v2-line);
  border-top: 4px solid var(--v2-navy);
  border-radius: 3px;
  padding: var(--v2-s5) var(--v2-s5) var(--v2-s4);
  box-shadow: 0 1px 2px rgba(23, 35, 58, .05);
}
.v2-memo__head { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-s3); }
.v2-memo__title {
  font-size: var(--v2-fs-body); font-weight: 700; letter-spacing: .08em; color: var(--v2-navy);
}
/* 「入力例」。紙の上に押した判のように、角をほぼ立てて枠で囲う。
   丸ピルだと紙の語彙から浮く（角丸の使い分け：丸＝数字とボタン、角＝紙と本文）。 */
.v2-memo__badge {
  font-size: 11.5px; font-weight: 700; color: var(--v2-brand-deep);
  border: 1px solid var(--v2-brand-line); border-radius: 2px; padding: 2px 8px;
}
.v2-memo__rows { margin: var(--v2-s4) 0 0; display: grid; }
.v2-memo__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-s4);
  padding: 9px 0;
  border-bottom: 1px solid var(--v2-line);
}
.v2-memo__row dt { font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); }
.v2-memo__row dd {
  margin: 0; font-size: 20px; font-weight: 700; color: var(--v2-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.v2-memo__out {
  display: grid; gap: 2px;
  margin-top: var(--v2-s5);
  padding: var(--v2-s4) 0 var(--v2-s2);
  border-top: 3px solid var(--v2-navy);
}
.v2-memo__where { font-size: var(--v2-fs-xs); font-weight: 700; color: var(--v2-ink-soft); }
.v2-memo__value {
  font-family: var(--font-en, sans-serif); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 48px); line-height: 1.1;
  color: var(--v2-mint-deep); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.v2-memo__note { font-size: var(--v2-fs-xs); color: var(--v2-ink-soft); }

/* =====================================================================
   11. 信頼性
   カードをやめ、縦の区切り線だけで3列に分ける。直前のUIモックと質感を変える。
   ===================================================================== */
/* 2026-09-20（PASS 6）: 項目ごとの上罫線（横線）をやめ、左の縦線1本に変えた。
   375pxでは「悩み別 → この3本 → つくり方」と、横罫線で区切った行の縦積みが
   3節続いていて、形は違うのに景色が同じに見えていた。
   線の向きを変えるだけで節が切り替わったと分かる。装飾は増やしていない。 */
.v2-trust { border-left: 3px solid var(--v2-brand); padding-left: var(--v2-s5); }
.v2-trust__item { display: block; }
.v2-trust__item + .v2-trust__item { margin-top: var(--v2-s5); }
.v2-trust__name { display: block; font-weight: 700; font-size: var(--v2-fs-body); margin-bottom: 4px; }
.v2-trust__desc { display: block; font-size: var(--v2-fs-sm); color: var(--v2-ink-soft); max-width: 34em; }

/* =====================================================================
   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: 900px) {
  .v2-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  /* ツール節は「言うこと」と「見本の紙」を左右に置く。
     文章は読める幅に絞り、紙の方を主役にする。 */
  .v2-toolzone {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    grid-template-areas:
      "say  memo"
      "act  memo"
      "fine memo";
    align-content: center;
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: var(--v2-s6);
  }
  .v2-toolzone__say { grid-area: say; align-self: end; }
  .v2-toolzone__act { grid-area: act; }
  .v2-toolzone__fine { grid-area: fine; align-self: start; }
  .v2-memo { grid-area: memo; align-self: center; }
  /* 悩み別リストは、質問と答えを同じ行に並べて視線を1回で通す。 */
  .v2-ask__link {
    grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
    grid-template-areas: "q a go";
    align-items: center;
    min-height: 82px;
  }
  .v2-pick__link { grid-template-columns: auto 132px 1fr; }
  /* 信頼性は縦の区切り線で3列に分ける */
  /* PCは3列。縦線は列ごとに引く（外枠の1本だと3列のどれに掛かるか分からない）。 */
  .v2-trust {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    border-left: 0; padding-left: 0;
  }
  .v2-trust__item { border-left: 3px solid var(--v2-brand); padding-left: var(--v2-s4); }
  .v2-trust__item + .v2-trust__item { 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); }
  /* 2026-09-20（PASS 6）: 7列に組むために縮めていたが、375px（16px/12.5px）より
     PCのほうが小さいという逆転が起きていた。列幅に収まる範囲で戻す。 */
  .v2-road__name { font-size: 16px; }
  .v2-road__desc { font-size: 12.5px; }
  /* 道はノードの中心（上から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が縦に伸びる。 */
  /* スマホでは縦に積む。1行に2つ入れると必ず折り返す長さになる。
     span は既定が inline なので、block にしないと2つが地続きに繋がる。 */
  .v2-hero__meta { display: block; font-size: 11.5px; line-height: 1.9; }
  .v2-hero__meta span { display: block; }

  /* Heroの仕事は「何のサイトか」と「次へ進む」まで。
     スマホでは全部を説明しようとせず、次の節（利益計算ツール）を早く見せる。
     2026-09-18 実測で、Heroだけで1250px＝1画面半を使っていた。 */
  .v2-hero__lead { font-size: 16px; }
  .v2-actions .v2-btn { width: 100%; }

  /* スマホのHeroは、いまも人物だけ。
     すぐ下のツール節が本物の仕入れメモと実測値で同じことを見せるので、
     ここに例をもう1件置くと、別々の金額が2つ続いて見えてしまう。
     PC幅では左のコピーの横が空くので、そこにだけ例を1件置いている。 */
  .v2-case,
  .v2-viz__note { display: none; }
  .v2-viz { justify-content: flex-end; }
  .v2-char--hero { --v2-char-w: 48%; margin-bottom: 0; margin-right: 0; }
}
@media (max-width: 360px) {
  :root { --v2-pad-x: 14px; }
  /* 320pxではピルが1行に1つしか入らず、メタだけで4行になってHeroが伸びる。
     この幅では枠を外して2列に組む。区切り記号を使わずに項目が分かれるので、
     ピルと同じく折り返しで行頭に点が残ることもない。 */
  .v2-hero__meta { font-size: 11px; }
}

/* =====================================================================
   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秒。左のコピーは最初から読めるので、読書を妨げない。 */
/* 2026-09-19（PASS 5）: Heroの登場・浮遊・グラフ描画・チップ点灯・カウントアップの
   演出は、対象だった3枚のUIカードごと消えたのでまとめて削除した。
   いまHeroで動くのは .v2-hero__main / .v2-hero__visual の共通フェードだけ。 */

/* --- 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); }
}

/* --- 15-6. 動きを減らす設定を尊重する ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2-anim .v2-reveal { opacity: 1; transform: none; }
  .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;                 /* 文字（例）より背面。人物は主役にしない */
  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に次ぐ2か所目。ここが最後で、他の節には出さない。
   帯の右上から半身だけ覗かせる。文章の邪魔をしないよう、面の外へ逃がす。 */
.v2-char--spot {
  --v2-char-w: 120px;
  --v2-char-fade: 88%;
  position: absolute;
  right: clamp(10px, 2.5vw, 34px);
  top: -34px;
}
.v2-made { position: relative; }
.v2-made .v2-section-head--left { padding-right: 130px; }
@media (max-width: 599px) {
  .v2-char--spot { --v2-char-w: 78px; top: -24px; right: 6px; }
  .v2-made .v2-section-head--left { padding-right: 86px; }
}

/* --- 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の初回検証と同じ理由）。 */
  .v2-case { margin-left: 36%; }
  .v2-viz__note { margin-left: 36%; }

  .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 / 2026-09-19 調整）
   人物自体は大きく動かさない。
     0.35s 人物が現れる
     0.90s キラッ
     1.20s 成功マーク
     3.0s〜 2〜3pxのごく緩い上下と、ごくわずかな左右揺れ
   以前は 2.30s・3.15s・4.4s だったが、これはHeroのUIカードが1枚ずつ出てくる
   4.3秒の流れに合わせた待ち時間だった。その流れごと無くなったので、
   ただ遅いだけの点滅になる。人物が出た直後に畳む。
   ===================================================================== */
@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 3.0s infinite; }
.v2-anim .v2-char__spark {
  opacity: 0;
  animation: v2SparkIn .55s var(--v2-ease-out) .90s forwards,
             v2SparkTwinkle 3.6s ease-in-out 3.0s infinite;
}
.v2-anim .v2-char__ok { opacity: 0; animation: v2OkIn .5s var(--v2-ease-out) 1.20s forwards; }

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

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