/* ==========================================================
   記事ページ共通スタイル

   構成:
     1. ヘッダー・フッター  … トップページ（/index.html）から移植。
                              サイト全体で見た目を揃えるため、値は変えないこと。
                              index.html 側を直したら、ここも同じように直す。
     2. 記事レイアウト      … サムネイルと本文カラムの幅
     3. 本文タイポグラフィ  … 越境EC.com の .prose-jp を移植したもの

   新しい記事の作り方は README.md を参照。
   ========================================================== */

/* ── 1. 土台とヘッダー・フッター（トップページと共通）────── */

:root {
  --accent: #F2A93C;   /* ヲタクエストのブランドカラー（ヘッダー・フッター用） */
  --sub:    #1F2A44;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  color: #111;
  background: #ffffff;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* header */
.site-header { border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 100; }
.site-header__inner { max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo-mark { height: 72px; flex: none; }
.site-header__logo-mark img { height: 100%; width: auto; object-fit: contain; display: block; }
.site-nav { display: flex; gap: 28px; font-size: 14px; color: #222; font-weight: 500; }
.site-nav a:hover { opacity: .6; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #111; transition: all .3s; }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
.nav-overlay.open { display: block; }

@media (max-width: 768px) {
  .site-header__logo-mark { height: 44px; }
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border-top: 2px solid #eee; border-bottom: 2px solid #ddd;
    flex-direction: column; gap: 0; padding: 0; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .site-nav.open { display: flex; }
  .site-nav a { display: block; padding: 16px 24px; font-size: 15px; border-bottom: 1px solid #eee; }
  .site-nav a:last-child { border-bottom: none; }
}

/* footer */
.site-footer { border-top: 1px solid #eee; padding: 40px 24px; margin-top: 80px; }
.site-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.site-footer__brand { font-weight: 700; }
.site-footer__links { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; padding: 0; margin: 0; font-size: 13px; color: #555; }
.site-footer__copy { font-size: 12px; color: #999; }

@media (max-width: 768px) {
  .site-footer__top { flex-direction: column; gap: 20px; }
  .site-footer__links { gap: 12px; }
}

/* ── 2. 記事レイアウト ───────────────────────────── */

/* サムネイルは記事カラム幅いっぱい、本文は 42rem。
   42rem は日本語の1行が長くなりすぎない上限として決めている。 */
.article {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 0;
}

.article__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.article__body {
  max-width: 42rem;
  margin-top: 2.5rem;
}

/* 記事タイトル。サムネイルのない記事で h1 を立てるときに使う */
.article__title {
  margin: 0 0 2.5rem;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

@media (min-width: 640px) {
  .article__title { font-size: 2.125rem; }
}

/* 目次 */
.toc {
  border: 1px solid var(--color-rule);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--color-paper-3) 60%, var(--color-paper));
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .toc { padding: 1.5rem 1.75rem; }
}

.toc__title { margin: 0; font-size: 0.95rem; font-weight: 900; color: var(--color-ink); letter-spacing: -0.01em; }
.toc__list { margin: 1rem 0 0; padding: 0; list-style: none; }
.toc__list li + li { margin-top: 0.625rem; }

.toc__list a {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-ink-2);
}

.toc__list a:hover { color: var(--color-ink); }
.toc__list a:hover .toc__text { text-decoration: underline; text-underline-offset: 4px; }

.toc__dot {
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ── 2b. 記事一覧（/articles/）─────────────────── */

.list-page { max-width: 1000px; margin: 0 auto; padding: 56px 24px 0; }

/* 見出しはトップページの .section__heading に合わせている */
.list-page__heading {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #111;
  margin-bottom: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ddd;
}

.list-page__heading .heading-ja {
  font-size: 13px;
  font-weight: 400;
  color: #999;
  margin-left: 10px;
  letter-spacing: 0;
  vertical-align: middle;
}

.list-page__lead { font-size: 15px; line-height: 2; color: #555; margin: 24px 0 40px; }

.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }

.article-card { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }

.article-card__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #eee;
  transition: opacity .3s ease;
}

.article-card a:hover .article-card__thumb { opacity: .8; }

.article-card__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.65;
  color: #111;
  margin: 0 0 12px;
}

.article-card a:hover .article-card__title { text-decoration: underline; text-underline-offset: 4px; }

.article-card__excerpt { font-size: 14px; line-height: 1.95; color: #555; margin: 0; }

.article-card__more {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  border-bottom: 1px solid #111;
  padding-bottom: 2px;
}

@media (max-width: 760px) {
  .list-page { padding: 40px 20px 0; }
  .list-page__heading { font-size: 24px; }
  .article-card { grid-template-columns: 1fr; gap: 16px; }
}

/* ── 3. 本文タイポグラフィ ───────────────────────
   越境EC.com の globals.css / .prose-jp をそのまま移植。
   行間 2.0・行長 42rem・見出しに黄色の縦罫、が基本の組み。 */

:root {
  --color-paper:    oklch(100%  0     0);
  --color-paper-2:  oklch(98.6% 0.012 100);
  --color-paper-3:  oklch(96.4% 0.028 100);
  --color-ink:      oklch(26%   0.004 90);
  --color-ink-2:    oklch(44%   0.006 90);
  --color-muted:    oklch(62%   0.008 90);
  --color-rule:     oklch(91%   0.004 90);
  --color-accent:   oklch(87%   0.165 96);   /* 記事本文のアクセント（黄） */
  --color-accent-2: oklch(93%   0.100 100);
  --color-solid:    oklch(20%   0.004 90);
  --color-solid-ink: oklch(100% 0     0);
}

::selection { background: var(--color-accent); color: var(--color-ink); }

/* ブラウザ既定のマージンを要素セレクタで落とす。
   クラス付きで書くと `.prose-jp > * + *` の段落間マージンに勝ってしまい、
   行間が詰まってしまうので、必ず詳細度を低いままにしておくこと。 */
p, h1, h2, h3, h4, h5, h6,
blockquote, figure, ol, ul, dl, pre, table { margin: 0; }

.prose-jp {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-ink);
  font-feature-settings: "palt" 1;
}

.prose-jp > * + * { margin-top: 1.5em; }

.prose-jp h2 {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  padding-left: 0.85rem;
  border-left: 5px solid var(--color-accent);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  scroll-margin-top: 7rem;   /* ヘッダーが sticky なので、その分ずらす */
}

.prose-jp h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.9rem;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.6;
  scroll-margin-top: 7rem;
}

.prose-jp h4 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  scroll-margin-top: 7rem;
}

.prose-jp h2 + *,
.prose-jp h3 + *,
.prose-jp h4 + * { margin-top: 0; }

.prose-jp a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.prose-jp a:hover { background: var(--color-accent-2); }

/* 太字は黄色のマーカー引き。原稿の ** ** がここに対応する */
.prose-jp strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--color-accent) 62%);
}

.prose-jp ul,
.prose-jp ol { padding-left: 1.4em; }

.prose-jp ul { list-style: none; padding-left: 0; }

.prose-jp ul > li { position: relative; padding-left: 1.5em; }

.prose-jp ul > li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.85em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-accent);
}

.prose-jp ol { list-style: decimal; }
.prose-jp ol > li::marker { font-weight: 700; color: var(--color-ink-2); }
.prose-jp li + li { margin-top: 0.4em; }

/* 表は狭い画面でははみ出させず、表そのものを横スクロールさせる */
.prose-jp .table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-rule);
  border-radius: 0.75rem;
}

.prose-jp table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.85rem;
  line-height: 1.7;
}

.prose-jp th,
.prose-jp td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-rule);
}

.prose-jp th { background: var(--color-paper-3); font-weight: 700; white-space: nowrap; }
.prose-jp tbody tr:last-child td { border-bottom: 0; }

.prose-jp blockquote {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-size: 0.92rem;
}

.prose-jp blockquote > * + * { margin-top: 0.75em; }

.prose-jp hr { margin-block: 2.5rem; border: 0; border-top: 1px solid var(--color-rule); }

.prose-jp img { border-radius: 0.75rem; max-width: 100%; height: auto; }

/* 本文中の図版。画面キャプチャは実寸で置く（引き伸ばすと文字がぼやけるため）。
   width/height 属性の値をそのまま使い、狭い画面でだけ縮める。

   ただしスマホのスクリーンショットは縦横比が0.5前後あり、実寸で置くと
   高さが1300pxを超えて本文を押しのけてしまう。max-height で頭打ちにすると、
   横長のキャプチャ（本文幅に収まる時点で高さ550px前後）には触れず、
   縦長だけが縮む。画像ごとにクラスを足さずに済む。 */
.prose-jp figure {
  width: fit-content;      /* 縦長のとき、キャプションを画像の幅に揃えるため */
  max-width: 100%;
  margin-inline: auto;
}

.prose-jp figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 620px;
  height: auto;
  margin-inline: auto;
  border-radius: 0.9rem;
  /* 白背景のスクリーンショットが本文の地に溶けないよう、輪郭と落ち影を付ける */
  border: 1px solid var(--color-rule);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.prose-jp figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--color-muted);
}

/* ── 記事間の被リンクカード ───────────────────────
   本文中の「この記事も読んでね」を、サムネイル付きのカードで見せる。
   .prose-jp a の下線・ホバー背景が効いてしまうので、ここで打ち消している。 */
.prose-jp .linkcards { display: grid; gap: 0.75rem; margin-block: 1.9rem; }

.prose-jp .linkcards__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.prose-jp .linkcard {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 0.9rem;
  background: var(--color-paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.prose-jp .linkcard:hover {
  background: var(--color-paper);
  border-color: var(--color-ink);
  box-shadow: 0 6px 20px oklch(26% 0.004 90 / 0.08);
}

.prose-jp .linkcard__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  border-radius: 0.55rem;
  margin: 0;
}

.prose-jp .linkcard__body { display: grid; gap: 0.28rem; }

.prose-jp .linkcard__label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.prose-jp .linkcard__title {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.prose-jp .linkcard:hover .linkcard__title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.prose-jp .linkcard__more { font-size: 0.75rem; font-weight: 700; color: var(--color-muted); }

@media (min-width: 640px) {
  .prose-jp .linkcard { grid-template-columns: 170px minmax(0, 1fr); gap: 1.05rem; padding: 0.85rem; }
  .prose-jp .linkcard__title { font-size: 0.98rem; }
}

/* ── 監修者の一次情報 ────────────────────────────
   公式ヘルプの引用（blockquote）と混ざらないよう、意図的に別の見た目にしている。
   ここに入れてよいのは、実際にWhatnotで販売している監修者にしか書けない内容だけ。
   公式情報の言い換えを入れない（→ _docs/記事執筆ガイド.md「一次情報を入れる」）。
   .prose-jp p / .prose-jp > * + *（詳細度 0,1,1）に勝たせるため .prose-jp を重ねている。 */
.prose-jp .firsthand {
  margin-block: 1.9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-accent);
  border-radius: 0.75rem;
  background: var(--color-paper-2);
}

/* ラベルも <p> なので、下の .prose-jp .firsthand p（詳細度 0,2,1）に負ける。
   p. を付けて 0,3,1 にして勝たせている */
.prose-jp .firsthand p.firsthand__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.prose-jp .firsthand p.firsthand__label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.prose-jp .firsthand p { margin: 0; font-size: 0.95rem; }
.prose-jp .firsthand p + p { margin-top: 0.8em; }

/* ── 4. CTA ─────────────────────────────────────
   本文中に生URLを貼ると読み飛ばされるので、必ずこのブロックに包む。
   .prose-jp の中で使う前提。
   見た目はLP（/whatnot-support/）と同じネオブルータリズム：
   3pxの黒縁＋ハードシャドウ＋黄色。カードの主張はシャドウの色で付ける。 */

.cta {
  position: relative;
  border: 3px solid var(--color-ink);
  border-radius: 1.1rem;
  background: var(--color-paper);
  padding: 1.7rem 1.6rem;
  box-shadow: 7px 7px 0 var(--color-accent);
}

@media (min-width: 640px) {
  .cta { padding: 2rem 2.2rem; }
}

.cta__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

/* タイトル先頭の目印。テキストの「▼」はやめて、LPと同じドットで揃える */
.cta__title::before {
  content: "";
  flex: none;
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2.5px solid var(--color-ink);
}

.cta__text {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--color-ink-2);
}

.cta__button {
  /* 文言が長く狭い画面では折り返る。flex にすると矢印が独立した要素になり、
     折り返したときに矢印だけが次の行へ落ちてしまうため、inline-block にして
     矢印を文章の一部として流す。 */
  display: inline-block;
  max-width: 100%;
  margin-top: 1.3rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 3px solid var(--color-ink);
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--color-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* 本文リンクの指定（`.prose-jp a`）を打ち消す。
   詳細度が同じだと色も下線も向こうが勝ってしまい、ボタンが本文リンク色になる。 */
.prose-jp .cta__button {
  color: var(--color-ink);
  text-decoration: none;
}

/* ホバーはシャドウの分だけ沈む（ハードシャドウの定番の動き） */
.cta__button:hover,
.prose-jp .cta__button:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

.cta__button::after { content: " →"; font-weight: 900; }

/* 金額を大きく見せるブロック。
   数字だけが独り歩きしないよう、条件（.cta__bonus-note）と必ずセットで使うこと。
   「登録したらすぐ6万円もらえる」という誤読を招くと、訪問者との約束を破ることになる。 */
.cta__bonus {
  margin-top: 0.9rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
  line-height: 1.2;
}

.cta__bonus-amount {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  font-feature-settings: "palt" 1;
}

.cta__bonus-unit { font-size: 1rem; font-weight: 900; color: var(--color-ink); }

.cta__bonus-note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--color-ink-2);
}

@media (max-width: 480px) {
  .cta__bonus-amount { font-size: 2rem; }
}

/* いちばん押してほしいCTA（招待ボーナス）は黄色いカードにして主役にする。
   カードが黄色になるぶん、シャドウとボタンは黒に反転して沈み込みで魅せる */
.cta--primary {
  background: var(--color-accent);
  box-shadow: 7px 7px 0 var(--color-ink);
}
.cta--primary .cta__title::before { background: var(--color-paper); }
.cta--primary .cta__bonus-note { color: var(--color-ink); opacity: 0.72; }
.cta--primary .cta__button,
.prose-jp .cta--primary .cta__button {
  background: var(--color-solid);
  color: var(--color-solid-ink);
  box-shadow: 4px 4px 0 var(--color-paper);
}
.cta--primary .cta__button:hover,
.prose-jp .cta--primary .cta__button:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-paper);
}

/* 中盤の小さいCTAでは、金額を文中に収める */
.cta--inline .cta__bonus { margin-top: 0.5rem; }
.cta--inline .cta__bonus-amount { font-size: 1.7rem; }

/* 記事中盤に置く版。末尾のCTAより一回り小さくして、読む流れを止めすぎないようにする。 */
.cta--inline { padding: 1.4rem 1.5rem; box-shadow: 5px 5px 0 var(--color-ink); }

.cta--inline .cta__title { font-size: 0.95rem; }
.cta--inline .cta__text { margin-top: 0.45rem; font-size: 0.8rem; }

@media (min-width: 640px) {
  .cta--inline { padding: 1.6rem 1.9rem; }
  .cta--inline .cta__button { font-size: 0.92rem; padding: 0.9rem 1.8rem; }
}

/* 記事冒頭に置く版。まだ何も読んでいない相手に売り込むと離脱を招くので、
   白地に戻して「告知」のトーンに落とす。ボタンだけ黄色で他のCTAと揃える。
   （.cta--primary と併用されるため、こちらを後に書いて上書きする） */
.cta--lead {
  background: var(--color-paper);
  box-shadow: 5px 5px 0 var(--color-accent);
}
.cta--lead .cta__bonus { margin-top: 0; }
.cta--lead .cta__bonus-amount { font-size: 1.6rem; }
.cta--lead .cta__bonus-note { font-size: 0.76rem; color: var(--color-ink-2); opacity: 1; }
.cta--lead .cta__button,
.prose-jp .cta--lead .cta__button {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.cta--lead .cta__button:hover,
.prose-jp .cta--lead .cta__button:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

@media (max-width: 480px) {
  .cta { box-shadow: 5px 5px 0 var(--color-accent); }
  .cta--primary { box-shadow: 5px 5px 0 var(--color-ink); }
  .cta--lead { box-shadow: 4px 4px 0 var(--color-accent); }
  .cta__button { width: 100%; padding-inline: 1rem; }
}

/* ── 4b. 参入支援パネル ──────────────────────────
   記事内でいちばん行動を取ってほしい塊（見出し＋説明＋CTA）を一枚に包む。
   黒ベタは威圧感が出るので、地色はクリームのまま。
   上端の黄色いバーと太い枠、深いシャドウで「別格の一枚」に見せる。 */

.support-panel {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--color-ink);
  border-radius: 1.3rem;
  background: var(--color-paper);
  padding: 2.1rem 1.6rem 1.9rem;
  box-shadow: 8px 8px 0 var(--color-accent);
}

/* 上端の帯。パネルの「別格さ」はここで出す */
.support-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.62rem;
  background: var(--color-accent);
  border-bottom: 3px solid var(--color-ink);
}

@media (min-width: 640px) {
  .support-panel { padding: 2.6rem 2.4rem 2.4rem; }
}

.prose-jp .support-panel__badge {
  display: inline-block;
  margin: 0;
  background: var(--color-ink);
  color: var(--color-solid-ink);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.prose-jp .support-panel h3 {
  margin-top: 1.15rem;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

/* パネル自身が枠なので、中のCTAカードは枠を脱いでパネルと一体化させる。
   区切りは上の罫線だけで示す。 */
.prose-jp .support-panel .cta,
.support-panel .cta {
  border: none;
  border-top: 2px dashed var(--color-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.5rem 0 0;
  margin-top: 1.8rem;
}

@media (max-width: 480px) {
  .support-panel { padding: 1.9rem 1.25rem 1.6rem; box-shadow: 5px 5px 0 var(--color-accent); }
}

/* ── 4. 手順（ステップ）UI ────────────────────────
   スマホのスクリーンショットが縦長（およそ 1:2）なので、
   広い画面では本文の右に細く添え、狭い画面では本文の下に回す。
   .prose-jp > * + * の段落マージンに巻き込まれないよう、
   間隔は .step + .step で自前に持たせている。 */

.steps { list-style: none; margin: 0; padding: 0; }

/* .prose-jp ol の list-style / padding-left（詳細度 0,1,1）に負けるので、
   ここだけクラスを重ねて詳細度を上げている。番号は .step__num で描くため、
   ブラウザ既定のマーカーとインデントは消しておく。 */
.prose-jp .steps { list-style: none; padding-left: 0; }
.prose-jp .steps > li::marker { content: none; }
.prose-jp .steps > li + li { margin-top: 1rem; }

.step + .step { margin-top: 1rem; }

.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--color-rule);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--color-paper-3) 45%, var(--color-paper));
}

@media (min-width: 640px) {
  .step { grid-template-columns: minmax(0, 1fr) 172px; gap: 1.75rem; padding: 1.6rem 1.8rem; }
}

/* 見出しが2行以上になったとき、番号が真ん中に浮かないよう1行目に合わせる */
.step__head { display: flex; align-items: flex-start; gap: 0.7rem; }

.step__num {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--color-solid);
  color: var(--color-solid-ink);
  font-size: 0.85rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  margin-top: 0.1rem;
}

/* 最後の1枚だけは「完了」なのでアクセントカラーにする */
.step--done .step__num { background: var(--color-accent); color: var(--color-ink); }

/* .prose-jp h3 の margin-top: 2.5rem（詳細度 0,1,1）に負けて
   見出しだけが下にずれるので、ここも .prose-jp を重ねて潰す。 */
.prose-jp .step__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.step__body > * { margin-top: 0.8rem; font-size: 0.92rem; line-height: 1.9; color: var(--color-ink-2); }
.step__body > *:first-child { margin-top: 0; }
.step__body strong { color: var(--color-ink); }
.step__body ul { padding-left: 1.15rem; }
.step__body li + li { margin-top: 0.3rem; }

/* 画像は縦長なので、狭い画面では幅を抑えて中央に置く */
.step__shot { margin: 0; max-width: 210px; }

@media (min-width: 640px) {
  .step__shot { max-width: none; }
}

.step__shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule);
  border-radius: 0.7rem;
  background: var(--color-paper);
}

/* 本文中に単独で置くスマホ画面のキャプチャ。縦長なので幅を抑えて中央に寄せる。
   .prose-jp figure img（詳細度 0,1,2）に勝たせるため .prose-jp を重ねている。 */
.prose-jp .shot { margin: 1.8rem auto; max-width: 260px; }

.prose-jp .shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule);
  border-radius: 0.7rem;
  background: var(--color-paper);
}

.prose-jp .shot figcaption { text-align: center; }

/* 画像のないステップでは本文を1カラムいっぱいに広げる */
.step:not(:has(.step__shot)) { grid-template-columns: minmax(0, 1fr); }

/* 申請前チェックリスト。
   .prose-jp ul > li::before（黄色の丸ポチ・詳細度 0,1,2）に負けるので、
   ここも .prose-jp を重ねて上書きしている。角丸の四角＋チェックを自前で描く。 */
.prose-jp .checklist { list-style: none; padding-left: 0; }

.prose-jp .checklist > li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.95;
}

.prose-jp .checklist > li + li { margin-top: 0.7rem; }

.prose-jp .checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--color-ink);
  border-radius: 0.3rem;
  background: transparent;
}

.prose-jp .checklist > li::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.85em;
  width: 0.48rem;
  height: 0.24rem;
  border: 0;
  border-left: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  border-radius: 0;
  background: transparent;
  transform: rotate(-45deg);
}

/* ステップ内の行動ボタン。本文リンク（黄色い下線）だと手順の中で埋もれるため、
   CTAボタンと同じ塗りにして押せることを明示する。.prose-jp a の下線を消すので
   詳細度を上げてある。 */
.prose-jp .step__cta {
  display: inline-block;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.prose-jp .step__cta::after { content: " →"; font-weight: 700; }

.prose-jp .step__cta:hover { background: var(--color-solid); color: var(--color-solid-ink); }

@media (max-width: 480px) {
  .prose-jp .step__cta { width: 100%; padding-inline: 1rem; }
}

/* 監修者ボックス（顔写真つき）。公式ヘルプ引用のblockquoteとは class="supervisor" で区別する */
.prose-jp blockquote.supervisor { display: flex; gap: 1rem; align-items: flex-start; }
.prose-jp blockquote.supervisor > * + * { margin-top: 0; }
.prose-jp .supervisor__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.prose-jp .supervisor__body > * + * { margin-top: 0.75em; }
@media (max-width: 480px) {
  .prose-jp .supervisor__photo { width: 56px; height: 56px; }
}

/* ── 9. 追従CTA（右下フローティング） ─────────────
   参入支援LPへの導線を、記事を読んでいる最中にも出す。
   要素は article.js が生成するので、記事HTMLには何も書かない。
   記事末尾の .support-panel と同時に出ると導線が二重になるため、
   パネルが視界に入ったら引っ込める（制御は article.js 側）。 */

.float-cta {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: min(20rem, calc(100vw - 2.5rem));
  border: 3px solid var(--color-ink);
  border-radius: 1rem;
  background: var(--color-paper);
  box-shadow: 6px 6px 0 var(--color-accent);
  padding: 1rem 1.1rem 1.1rem;
  /* 出るまでは畳んでおく。display:none にすると transition が効かない */
  opacity: 0;
  transform: translateY(1.25rem);
  visibility: hidden;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.float-cta.is-on {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.float-cta__badge {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-solid-ink);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.float-cta__title {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.55;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.float-cta__text {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  line-height: 1.75;
  color: var(--color-ink-2);
}

.float-cta__button {
  display: block;
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 2.5px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}

.float-cta__button:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

/* 閉じるボタン。枠の外側に半分かかる位置に置いて、カード内の文字を圧迫しない */
.float-cta__close {
  position: absolute;
  top: -0.7rem;
  right: -0.7rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 2.5px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-cta__close:hover { background: var(--color-accent); }

@media (max-width: 480px) {
  .float-cta {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    padding: 0.85rem 0.95rem 0.95rem;
    box-shadow: 4px 4px 0 var(--color-accent);
  }
  .float-cta__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .float-cta { transition: none; }
  .float-cta__button:hover { transform: none; }
}

/* ── 10. 買い手／売り手の切り替えタブ ─────────────
   招待リンクは用途で別物なので、読者に自分の側だけを読ませる。
   JSが無効でも両方が縦に並んで読めるよう、初期状態は「開いている」にしておき、
   article.js が対応してから片方を隠す（.js-tabs が付いてから効く）。 */

.picker {
  border: 3px solid var(--color-ink);
  border-radius: 1.1rem;
  background: var(--color-paper);
  box-shadow: 7px 7px 0 var(--color-accent);
  overflow: hidden;
  margin-top: 2rem;
}

.picker__lead {
  margin: 0;
  padding: 1.1rem 1.3rem 0;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--color-ink);
}

/* 冒頭に置くほうは「もう決まっている人の近道」。読んだあとに選ばせる下2つより
   影を一段落として、記事の入口で選択を迫っている見え方にならないようにする。 */
/* 詳細度 0,2,0。@media(max-width:480px) の `.picker`（0,1,0）が後ろにいて
   後勝ちで影を戻してしまうので、クラスを重ねて順序に依存しない形にしている。 */
.picker.picker--express { box-shadow: 4px 4px 0 var(--color-accent-2); }

/* 詳細度 0,2,0。.prose-jp p（0,1,1）に font-size を奪われないよう .prose-jp を重ねている。 */
.prose-jp .picker__sub {
  margin: 0.35rem 0 0;
  padding: 0 1.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-ink-2);
}

.picker__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.9rem 1.3rem 1.1rem;
}

.picker__tab {
  padding: 0.8rem 0.6rem;
  border: 2.5px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.picker__tab small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.7;
}

.picker__tab[aria-selected="true"] {
  background: var(--color-accent);
  box-shadow: 3px 3px 0 var(--color-ink);
}

.picker__tab:hover { background: var(--color-accent); }

.picker__panel {
  padding: 0 1.3rem 1.4rem;
  border-top: 2px dashed var(--color-rule);
  padding-top: 1.2rem;
}

/* JSが効いていないときは、見出しを出して両方読める形にしておく */
.picker__panel-title {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--color-ink);
}
.js-tabs .picker__panel-title { display: none; }
/* HTML側に hidden を直書きしているので、何もしないとブラウザ既定の [hidden]{display:none}
   が効いて、JSが動かない環境で売り手用パネルが3箇所とも消える（＝招待リンクに到達できない）。
   まず既定を打ち消してから、.js-tabs（0,3,0）で閉じ直す。順番と詳細度の両方が必要。 */
.picker__panel[hidden] { display: block; }
.js-tabs .picker__panel[hidden] { display: none; }

.prose-jp .picker__panel p { font-size: 0.9rem; line-height: 1.95; }
.prose-jp .picker__panel p:first-of-type { margin-top: 0; }

.picker__btn {
  display: block;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 3px solid var(--color-ink);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--color-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.prose-jp .picker__btn { color: var(--color-ink); text-decoration: none; }
.picker__btn:hover,
.prose-jp .picker__btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-ink);
}
.picker__btn small { display: block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 700; opacity: 0.75; }

/* .prose-jp .picker__panel p（0,2,1）に font-size を奪われるので、
   p. を付けて 0,3,1 にしないと注記が本文と同じ大きさで出てしまう。 */
.prose-jp .picker__panel p.picker__note,
.picker__note {
  margin: 0.8rem 0 0;
  font-size: 0.72rem;
  line-height: 1.8;
  color: var(--color-ink-2);
}

@media (max-width: 480px) {
  .picker { box-shadow: 5px 5px 0 var(--color-accent); }
  .picker__tabs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .picker__tab, .picker__btn { transition: none; }
  .picker__btn:hover { transform: none; }
}