/*
 * WOLFS（ウルフズ）公式サイト共通スタイル（hosting/ の全ページ。ヘッダー・フッターは hosting/scripts/build-legal.mjs の layout()）
 * - トップページ以外（規約・料金プラン・サポートなど）の色は、アプリの src/constants/theme.ts のライトの配色と同じ値
 *   （黒白モノトーン＋小さな差し色 highlight）。
 * - トップページ（ヘッダーに .is-home が付くページ）だけは、このファイルの末尾の「トップページ: ストリート・ポップ」で
 *   黄・生成り・ブルー・黒・白・レッドオレンジの欄に塗り分ける（運営者が選んだ案 D。2026-10-09）。そこの色は欄ごとに
 *   WCAG AA のコントラストを満たす組み合わせだけを使う（値と比は末尾のコメント。tests/functions/site-home.test.ts が確かめる）。
 *   セレクターはすべて .is-home から始め、ほかのページの見た目は変えない。画面だけ（@media screen）で、印刷はほかのページと
 *   同じ白地・黒文字にする。
 * - 端末のダークモードの設定（prefers-color-scheme）にかかわらず同じ配色にする（ダークモードの切り替えは無い。トップページ
 *   以外は白地・黒文字・黒のロゴ。アプリのトップ画面と同じく、ブランドの見た目を固定する）。color-scheme は only light にして、
 *   ブラウザの自動ダーク（Android の Chrome の「ウェブサイトをダークにする」、Samsung Internet のダークモードなど）
 *   でも暗く塗り替えられないようにする（light だけだと自動ダークの対象になり、黒いロゴが見えなくなる）。
 * - CSP（firebase.json）で script-src 'none' のため、スクリプトは使わない（例外は「Web でアカウントを削除する」のページの
 *   hosting/delete-account-web.js だけ）。外部のフォント・画像も使わない（端末の日本語フォントで表示する）。
 *   トップページのロゴの演出は hosting/intro.css（CSS だけ）。
 */
:root {
  --text: #111111;
  --background: #ffffff;
  --background-element: #f2f2f2;
  --background-selected: #e4e4e4;
  --text-secondary: #666666;
  --accent: #111111;
  --on-accent: #ffffff;
  --highlight: #d11a44;
  --on-highlight: #ffffff;
  --border: #dddddd;
  /* 操作できる部品・枠で囲む要素の輪郭（背景と 3:1 以上） */
  --border-strong: #767676;
  --todo-bg: #fff3c4;
  --todo-text: #5c4500;
  --radius: 16px;
  /* 本文の幅（16px の日本語で1行およそ40字） */
  --measure: 720px;
  --wide: 1040px;
  --gutter: 20px;
  --header-height: 64px;
  color-scheme: only light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI',
    Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  /* 本文が短いページ（404 など）でも、フッターを画面の下に置く */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  flex-shrink: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* hidden 属性の要素は、display を指定したクラスが付いていても出さない（Web でアカウントを削除するページのフォームなど） */
[hidden] {
  display: none !important;
}

/* 画面には出さず、読み上げだけに使う */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  padding: 8px 14px;
  border: 2px solid var(--text);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  font-weight: 700;
}

.skip-link:focus {
  left: 16px;
}

h1,
h2,
h3 {
  line-height: 1.45;
  letter-spacing: 0.03em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

p {
  margin: 0 0 14px;
}

ul,
ol {
  margin: 0 0 14px;
  padding-left: 1.4em;
}

li + li {
  margin-top: 4px;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

/* トップページはロゴをヒーローに大きく出すため、ヘッダーは固定せず、線も引かない */
.site-header.is-home {
  position: static;
  border-bottom-color: transparent;
}

.site-header .inner {
  max-width: var(--wide);
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header.is-home .inner {
  justify-content: flex-end;
}

.brand {
  display: block;
  width: 112px;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 20px;
  font-size: 14px;
}

.site-nav a {
  display: inline-block;
  padding: 8px 0;
  color: var(--text-secondary);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
}

.site-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- 本文（法的文書・サポートなど） ---------- */
main {
  display: block;
  flex: 1 0 auto;
}

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 80px;
}

.container h1 {
  font-size: clamp(24px, 5vw, 30px);
  margin: 0 0 10px;
}

.container h2 {
  font-size: 19px;
  margin: 48px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.container h3 {
  font-size: 16px;
  margin: 24px 0 8px;
}

/* 目次から飛んだ先の見出しが、固定のヘッダーに隠れないようにする */
.container [id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.meta {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
}

.lead {
  font-size: 17px;
}

.muted {
  color: var(--text-secondary);
}

.small {
  font-size: 14px;
}

.box {
  background: var(--background-element);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 16px;
}

.box > :last-child {
  margin-bottom: 0;
}

.notice {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 24px;
  font-size: 14px;
}

.notice.draft {
  border-color: var(--todo-text);
  background: var(--todo-bg);
  color: var(--todo-text);
}

/* オーナーが埋める必要がある箇所 */
.todo {
  background: var(--todo-bg);
  color: var(--todo-text);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

/* 目次（法的文書） */
.toc {
  background: var(--background-element);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0 8px;
  font-size: 14px;
}

.toc-title {
  font-weight: 700;
  margin: 0 0 6px;
}

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

.toc li + li {
  margin-top: 2px;
}

.toc a {
  color: var(--text-secondary);
  text-decoration: none;
}

.toc a:hover {
  color: var(--text);
  text-decoration: underline;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  min-height: 28px;
}

.steps li + li {
  margin-top: 12px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  letter-spacing: 0;
}

/* 表形式（特定商取引法に基づく表記） */
.table {
  margin: 0 0 16px;
  border-top: 1px solid var(--border);
}

.table .row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.table dt {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-secondary);
}

.table dd {
  margin: 4px 0 0;
}

.table dd > :last-child {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .table .row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
  }

  .table dd {
    margin: 0;
  }
}

/*
 * 比べ表（料金プラン。hosting/scripts/pages/premium.html）
 * - 横にはみ出さない: 幅は 100%・列の幅は固定（table-layout: fixed）で、長い文字は折り返す（320px の画面でも横に動かない）。
 * - 表の構造（th の scope・caption）は変えない（display を変えると読み上げで表として扱われなくなる端末があるため）。
 * - .tiers（無料とプレミアム）: プレミアムの列を薄い灰色、見出しを黒地にする（黒白モノトーン）。
 */
.compare {
  width: 100%;
  margin: 28px 0 12px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.7;
}

.compare caption {
  margin: 0 0 10px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.compare th,
.compare td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  word-break: auto-phrase;
}

.compare thead th {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--text);
  font-size: 13px;
  letter-spacing: 0.04em;
  vertical-align: bottom;
}

/* 行の見出し（機能・プラン）の列 */
.compare thead th:first-child {
  width: 40%;
}

.compare tbody th {
  font-weight: 700;
}

.compare.tiers thead th:last-child {
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-color: var(--accent);
}

.compare.tiers td:last-child {
  background: var(--background-element);
}

.compare .no {
  color: var(--text-secondary);
}

/* セルの中の補足（例: 会話の上限の「メッセージの送信数の上限は、無料と同じです」） */
.compare .cell-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.compare.prices td:nth-child(2) {
  font-weight: 700;
}

/* 表のすぐ下の注記 */
.table-notes {
  margin: 0 0 36px;
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 479px) {
  .compare {
    font-size: 13px;
  }

  .compare th,
  .compare td {
    padding: 10px 6px;
  }

  .compare thead th {
    font-size: 12px;
  }
}

/*
 * トップページの料金の案内（hosting/scripts/pages/index.html。くわしくは料金プランのページ）。
 * すぐ下は灰色の「よくある質問」（.band）のため、下の余白は .section と同じ（72px）にする。
 */
.section.pricing {
  max-width: 880px;
  text-align: center;
}

.pricing-points {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
}

.pricing-points li {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
}

@media (min-width: 720px) {
  .pricing-points {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

.pricing p {
  color: var(--text-secondary);
  word-break: auto-phrase;
}

.pricing .more {
  margin-top: 28px;
}

/*
 * 料金プランの「近日追加予定」の機能（まとめてブロック。hosting/scripts/pages/index.html の #bulk-block）。まだ使えないので、
 * プレミアムで変わることの並び（.pricing-points）には入れず、ラベル（近日追加予定・プレミアム）を付けた別のカードにする。
 * 広い画面では、左に名前と一言・右に説明の2列。トップページの色は末尾のストリート・ポップで上書きする（印刷はこの白地・黒文字）。
 */
.soon-feature {
  margin: 32px 0 0;
  padding: 20px 22px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  text-align: left;
}

.soon-feature h3 {
  margin: 12px 0 8px;
  font-size: 22px;
  line-height: 1.4;
}

.pricing .soon-badges {
  margin: 0 0 10px;
}

.soon-badges span {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}

.pricing .soon-lead {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.soon-body {
  margin-top: 16px;
}

.soon-feature .check-list li {
  word-break: auto-phrase;
}

.pricing .soon-feature .small {
  margin: 12px 0 0;
}

/* カードの後ろの「プライバシーと安全を守る機能は、すべて無料です。…」（カードの影と離す） */
.soon-feature + p {
  margin-top: 32px;
}

@media (min-width: 720px) {
  .soon-feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 0 32px;
    align-items: start;
    padding: 26px 30px 28px;
  }

  .soon-body {
    margin-top: 0;
  }
}

/* よくある質問 */
details {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

details:first-of-type {
  border-top: 1px solid var(--border);
}

summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  position: relative;
  padding-right: 28px;
  /* 見出しと同じく文節で折り返す（幅 360px で「か？」だけが次の行に残らないように） */
  word-break: auto-phrase;
  text-wrap: pretty;
}

summary::-webkit-details-marker {
  display: none;
}

/* 記号は見た目だけ（読み上げの名前に入れない）。「/ ''」に対応しないブラウザは1つ目の宣言を使う */
summary::after {
  content: '+';
  content: '+' / '';
  position: absolute;
  right: 4px;
  top: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
}

details[open] summary::after {
  content: '−';
  content: '−' / '';
}

details .answer {
  padding-top: 10px;
}

details .answer > :last-child {
  margin-bottom: 0;
}

/* ボタン */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
}

.button.secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.button:hover {
  opacity: 0.85;
}

.button:focus-visible {
  border-radius: 999px;
}

.button svg {
  width: 16px;
  height: 16px;
}

/* ---------- トップページ ---------- */
.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(32px, 9vh, 104px) var(--gutter) clamp(56px, 11vh, 120px);
  text-align: center;
}

.hero-logo {
  position: relative;
  width: min(560px, 88%);
  margin: 0 auto;
  line-height: 0;
}

.hero-logo > img {
  width: 100%;
}

/*
 * ロゴの演出の部品（ウサギ・O を塗りつぶしたワードマーク・顔。読み上げない）。既定は出さず、ふつうのロゴだけを出す
 * （動きを減らす設定・印刷のときもこのまま）。演出は hosting/intro.css（トップページだけが読み込む）。
 */
.intro-parts {
  display: none;
}

.catch {
  margin: clamp(28px, 6vh, 48px) 0 0;
  font-size: clamp(22px, 5.6vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  word-break: auto-phrase;
}

/*
 * ロゴの演出（hosting/intro.css）では、ウサギがロゴの下（キャッチコピーと説明の場所。顔が出そろうまで出さない）を跳ねる。
 * その下のストアの表示に重ならないよう、演出があるときはキャッチコピーの上の余白を画面の高さで縮めない
 * （ロゴが最大の幅 560px のとき、影の下からストアの枠まで 7px）。
 */
@media screen and (prefers-reduced-motion: no-preference) {
  .catch.intro-fade {
    margin-top: 48px;
  }
}

.hero-lead {
  max-width: 32em;
  margin: 14px auto 0;
  color: var(--text-secondary);
  word-break: auto-phrase;
}

/* ストアの公開前の「近日公開」（公開後はストアのリンクに差し替える。hosting/scripts/pages/index.html のコメント） */
.store-soon {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 36px 0 0;
  padding: 0;
}

.store-soon li {
  margin: 0;
  min-width: 168px;
  padding: 10px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
  text-align: left;
}

.store-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.store-status {
  font-size: 12px;
  color: var(--text-secondary);
}

.hero-note {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
  word-break: auto-phrase;
}

.hero-note + .hero-note {
  margin-top: 4px;
}

.section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 72px var(--gutter);
}

.section-title {
  margin: 0 0 40px;
  font-size: clamp(20px, 4.4vw, 24px);
  text-align: center;
}

.band {
  background: var(--background-element);
}

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px 56px;
  max-width: 880px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature h3 {
  font-size: 18px;
  margin: 14px 0 8px;
}

.feature p {
  margin: 0 0 10px;
  color: var(--text-secondary);
}

.feature > :last-child {
  margin-bottom: 0;
}

.icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: inline-grid;
  place-items: center;
}

.icon svg {
  width: 22px;
  height: 22px;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 0;
}

.chips li {
  margin: 0;
  padding: 2px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
}

.more {
  margin-top: 48px;
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 880px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .split {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
  }
}

.split h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.split p {
  color: var(--text-secondary);
}

.split .actions {
  margin: 20px 0 0;
}

/*
 * トップページの「プレゼントキャンペーン」（hosting/scripts/pages/index.html。画像は hosting/scripts/make-campaign-images.sh）。
 * 画像は幅いっぱい（広い画面では 880px まで）。本文は読みやすい幅（--measure）で左寄せ。幅 360px でも横にはみ出さない
 * （見出しは改行の位置を <br> と auto-phrase で決め、画像は width/height の比で高さを先に取る）。
 */
.campaign {
  text-align: center;
}

.campaign-eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--text-secondary);
}

.campaign .section-title {
  margin-bottom: 28px;
  line-height: 1.5;
  word-break: auto-phrase;
}

.campaign-visual {
  display: block;
  max-width: 880px;
  margin: 0 auto;
}

.campaign-visual img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--background-element);
}

.campaign-body {
  max-width: var(--measure);
  margin: 32px auto 0;
  text-align: left;
}

.campaign-catch {
  font-weight: 700;
}

.campaign-catch span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-secondary);
}

.campaign-steps {
  margin: 24px 0;
}

.campaign-notes {
  margin: 0;
  padding-left: 1.3em;
  font-size: 14px;
  color: var(--text-secondary);
}

.campaign-tagline {
  margin: 24px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-align: center;
}

.campaign-tagline span {
  display: block;
}

.campaign-tagline span[lang='en'] {
  letter-spacing: 0.16em;
}

.campaign .more {
  margin-top: 32px;
}

/*
 * トップページの「アイコンを自由に変えられる」（設定の「アプリのアイコン」で選べるアイコンの全部。HTML は
 * hosting/scripts/build-legal.mjs の appIconMarquee）。アイコンが右から左へ一定の速さで流れ続ける（CSS だけ）。
 * - 同じ並び（.icon-marquee-group）を2つ続けた帯（.icon-marquee-track）を、並び1つ分（帯の幅の 50%）だけ左へ動かして
 *   繰り返す。並びの右端にもアイコンの間と同じ余白を付けるので、2つ目の並びが1つ目の位置に来たところで最初に戻っても
 *   継ぎ目が見えない。
 * - 並び1つの幅（アイコンの数 ×（大きさ＋間））は、見える幅（画面の幅。広い画面では --icon-view-max まで）より広くする
 *   （狭いと、並びの終わりの後ろが空いて見える）。今は16個で、幅 720px 未満は 16 × (64 + 16) = 1280px、720px 以上は
 *   16 × (80 + 28) = 1728px。アイコンを減らす・大きさや間を変えるときは、この関係を保つ。
 * - 速さは毎秒 40px（並び1つの幅 ÷ --icon-duration）。アイコンの数・大きさ・間を変えたら --icon-duration もそろえる。
 * - 既定（動きを減らす設定・印刷・メディアクエリの無いブラウザ）は流さず、1つ目の並びだけを折り返して並べる。流すのは
 *   prefers-reduced-motion: no-preference の画面のときだけ。マウスを乗せている間と「動きを止める」を選んだときは止まる
 *   （「動きを止める」は :has() で止めるため、:has() の無いブラウザには出さない）。
 * - 角はアプリの見本と同じ丸み（一辺の 22.37%。src/components/app-icon-preview.tsx の APP_ICON_CORNER）。白い背景の
 *   アイコンがページの白に溶けないよう、細い線で縁取る。
 */
.app-icons {
  /* すぐ下のキャンペーンも白地のため、下の余白はそちらの上の余白だけにする（運営者の依頼 2026-10-08 でキャンペーンの上に移した。
     トップページは末尾のストリート・ポップで欄ごとに色が変わるため、そこで下の余白を戻す） */
  padding: 72px 0 0;
}

.app-icons-head {
  max-width: var(--measure);
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
  text-align: center;
}

.app-icons-head .section-title {
  margin-bottom: 14px;
}

.app-icons-head p {
  margin: 0;
  color: var(--text-secondary);
  word-break: auto-phrase;
}

.icon-marquee {
  --icon-size: 64px;
  --icon-gap: 16px;
  --icon-duration: 32s;
  --icon-view-max: 1440px;
}

@media (min-width: 720px) {
  .icon-marquee {
    --icon-size: 80px;
    --icon-gap: 28px;
    --icon-duration: 43.2s;
  }
}

.icon-marquee-view {
  max-width: 880px;
  margin: 0 auto;
  padding: 2px var(--gutter);
}

.icon-marquee-group {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--icon-gap);
  margin: 0;
  padding: 0;
}

.icon-marquee-group li {
  flex: none;
  margin: 0;
}

.icon-marquee-group img {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 22.37%;
  box-shadow: 0 0 0 1px var(--border);
}

/* 2つ目の並び（見た目だけの写し）と「動きを止める」は、流すときだけ出す */
.icon-marquee-group[aria-hidden='true'],
.icon-marquee-control {
  display: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .icon-marquee-view {
    max-width: var(--icon-view-max);
    padding: 2px 0;
    overflow: hidden;
    /* 両端は白に溶かす */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .icon-marquee-track {
    display: flex;
    width: max-content;
    animation: icon-marquee var(--icon-duration) linear infinite;
  }

  .icon-marquee-group {
    flex-wrap: nowrap;
    padding-right: var(--icon-gap);
  }

  .icon-marquee-group[aria-hidden='true'] {
    display: flex;
  }

  .icon-marquee:has(.icon-marquee-control input:checked) .icon-marquee-track {
    animation-play-state: paused;
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
  .icon-marquee-view:hover .icon-marquee-track {
    animation-play-state: paused;
  }
}

@supports selector(:has(*)) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .icon-marquee-control {
      display: flex;
      justify-content: center;
      margin: 12px 0 0;
      padding: 0 var(--gutter);
      font-size: 13px;
      color: var(--text-secondary);
    }
  }
}

.icon-marquee-control label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  cursor: pointer;
}

.icon-marquee-control input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--text);
}

@keyframes icon-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/*
 * トップページの「アプリの画面」「安全とプライバシー」「はじめかた」「よくある質問」（hosting/scripts/pages/index.html）。
 * 土台は白地の欄と灰色の欄（.band）が交互になるように並べる（アプリの画面＝白 → 安全とプライバシー＝灰色 → はじめかた・アイコン・
 * 料金プラン＝白 → よくある質問＝灰色 → 招待・お知らせ＝白）。白地の欄が続くところは、上の欄の下の余白を 0 にする。
 * 実際の色と余白は、末尾の「トップページ: ストリート・ポップ」で欄ごとに塗り分けて上書きする（隣の欄と色が変わるので、
 * はじめかた・アイコン・招待の下の余白もそこで戻す）。
 * 動きは付けない（ロゴの演出とアイコンの流れのほかに動くものを置かない。トップページのボタンの浮き沈みの遷移は、動きを減らす設定では付けない）。
 */

/* 欄の見出しと説明（.app-icons-head と同じ形） */
.section-head {
  max-width: var(--measure);
  margin: 0 auto 36px;
  text-align: center;
}

.section-head .section-title {
  margin-bottom: 14px;
}

.section-head p {
  margin: 0;
  color: var(--text-secondary);
  word-break: auto-phrase;
}

/*
 * アプリの画面（画像は hosting/scripts/make-screen-images.sh。480x1043）。幅 720px 未満は「左に画像・右に説明」の1列、
 * 720px 以上は4列で画像の下に説明。画像は width/height の比で高さを先に取る。白い画面がページの白に溶けないよう、細い線で縁取る。
 */
.screens {
  list-style: none;
  display: grid;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}

.screens > li {
  margin: 0;
}

.screen {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 0;
}

.screen picture {
  display: block;
}

.screen img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--border);
  background: var(--background-element);
}

.screen h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.screen p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

@media (min-width: 720px) {
  .screens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .screen {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }
}

/* 安全とプライバシー（灰色の欄。中の枠は白地にする） */
.check-list {
  margin: 0;
  padding-left: 1.3em;
  color: var(--text-secondary);
}

.check-list li + li {
  margin-top: 8px;
}

.feature .check-list + .small {
  margin-top: 12px;
}

.safety-more {
  max-width: 880px;
  margin: 48px auto 0;
}

.safety-more .notice {
  margin-bottom: 36px;
  background: var(--background);
}

.safety-more h3 {
  font-size: 18px;
  margin: 0 0 14px;
}

.setting-list {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.setting-list div {
  padding: 14px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--background);
}

.setting-list dt {
  font-weight: 700;
}

.setting-list dd {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
}

@media (min-width: 720px) {
  .setting-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.safety-more .more {
  margin-top: 36px;
}

/*
 * はじめかた（番号の丸は .steps。.steps より後ろに置き、li + li の余白を打ち消す）。
 * すぐ下の料金プランも白地のため、下の余白はそちらの上の余白だけにする（トップページは末尾のストリート・ポップで
 * レッドオレンジの欄にするため、そこで下の余白を戻す）。
 */
.section.how-to {
  padding-bottom: 0;
}

.how-steps {
  display: grid;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
}

.how-steps li + li {
  margin-top: 0;
}

.how-steps h3 {
  font-size: 17px;
  line-height: 28px;
  margin: 0 0 6px;
}

.how-steps p {
  margin: 0;
  color: var(--text-secondary);
}

@media (min-width: 720px) {
  .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

.how-note {
  max-width: 880px;
  margin: 28px auto 0;
  text-align: center;
  word-break: auto-phrase;
}

/* よくある質問（トップページ。開け閉めの見た目は上の details・summary） */
.faq {
  max-width: var(--measure);
  margin: 0 auto;
}

.faq-more {
  max-width: var(--measure);
  margin: 24px auto 0;
  color: var(--text-secondary);
}

/*
 * 招待（hosting/scripts/pages/index.html の #invite。シェアのボタンの並びは hosting/scripts/build-legal.mjs の inviteShareLinks）。
 * - すぐ下の「お知らせとお問い合わせ」も白地のため、下の余白はそちらの上の余白だけにする（トップページは末尾のストリート・ポップで
 *   黄色の欄にするため、そこで下の余白を戻す）。
 * - 見出しは文節（span）ごとに折り返す（word-break: auto-phrase に対応していない Safari でも「大切な人に」の途中で切れないように）。
 * - シェアのボタン（.button.secondary。高さ 48px 以上）は同じ幅にそろえる: 幅 560px 未満は1列（幅いっぱい）、1024px 未満は2列、
 *   それより広い画面は4つを1行に並べる（4列のときの1つの幅は 229px 以上。最も長い「Bluesky でシェア」が約 210px）。
 * - リンク（.invite-url）は1回のクリック・長押しで全部を選べる（user-select: all。スクリプトを使えないのでコピーのボタンは無い）。
 * - 印刷ではシェアのボタンを出さない（紙では押せない。紹介の文とリンクは残す）。
 */
.section.invite {
  padding-bottom: 0;
}

.invite .section-title > span {
  display: inline-block;
}

.share-links {
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0;
}

.share-links li {
  margin: 0;
}

.share-links .button {
  width: 100%;
  /* 「LINE で送る（スマホ）」が「スマ／ホ」のように語の途中で折り返さないように（幅 320px の1列でも1行に入る） */
  white-space: nowrap;
}

@media (min-width: 560px) {
  .share-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
}

@media (min-width: 1024px) {
  /* 1行に4つ並べるときは、ボタンの幅を中身に合わせる（「LINE で送る（スマホ）」はほかより長い） */
  .share-links {
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    max-width: none;
  }
}

.invite-copy {
  max-width: var(--measure);
  margin: 36px auto 0;
  padding: 16px 20px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
}

.invite-copy-label {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-secondary);
  word-break: auto-phrase;
}

.invite-copy-text {
  margin: 0;
  font-weight: 700;
  line-height: 1.7;
}

.invite-url {
  -webkit-user-select: all;
  user-select: all;
  letter-spacing: 0.04em;
}

.invite-note {
  max-width: var(--measure);
  margin: 20px auto 0;
  color: var(--text-secondary);
  word-break: auto-phrase;
}

/*
 * 都道府県ごとのおおかみ・うさぎ（トップページの #side-map と、Functions の siteSideMap が出す表のページ /side-map.html の
 * .side-map-page。地図の画像 /side-map.svg も Functions が出す。docs/ARCHITECTURE.md の「公式サイトの都道府県のおおかみ・うさぎの地図」）。
 * - すぐ上の「アプリの画面」も白地のため、そちらの下の余白を 0 にする（トップページは末尾のストリート・ポップで黒の欄にするため、
 *   そこで下の余白を戻す）。
 * - 地図は幅いっぱい（最大 720px）で、高さは width・height の比（viewBox と同じ）で決める。凡例の色の見本はインラインの SVG
 *   （fill 属性。印刷で背景が落ちても残る）。
 * - 表のページは Functions が作るので、版の付かない /styles.css を読む（ここを変えた直後は、CDN とブラウザに前の CSS が最大1日残る。
 *   表のページでは、前からある見た目（.container・.meta・.small）だけでも読めるようにする）。
 */
.section#screens {
  padding-bottom: 0;
}

.side-map-figure {
  max-width: var(--measure);
  margin: 0 auto;
}

.side-map-card {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #ffffff;
}

.side-map-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.side-map-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  font-size: 14px;
}

.side-map-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.side-map-swatch {
  flex: none;
}

/* かっこの中（「（おおかみ56〜64%）」）は途中で折り返さない（狭い画面では、かっこの前で折り返す） */
.side-map-legend-range {
  display: inline-block;
}

.side-map-note,
.side-map-credit {
  margin: 16px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  word-break: auto-phrase;
}

.side-map-credit {
  margin-top: 8px;
  font-size: 12px;
}

.side-map-page .side-map-figure {
  margin: 24px 0 0;
}

/* 表のページで、凡例のすぐ後に続く説明（集計の準備中・止めているとき）を凡例から離す */
.side-map-page .side-map-legend + p {
  margin-top: 24px;
}

.side-map-table-wrap {
  margin: 24px 0 0;
  overflow-x: auto;
}

.side-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.side-map-table caption {
  margin: 0 0 8px;
  text-align: left;
  font-weight: 700;
}

.side-map-table th,
.side-map-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

/* 名前・割合・列の見出しは折り返さない（区分の列だけ折り返して、幅 320px の画面でも横にはみ出さない） */
.side-map-table thead th,
.side-map-table tbody th,
.side-map-table td:nth-child(2),
.side-map-table td:nth-child(3) {
  white-space: nowrap;
}

.side-map-table thead th {
  border-bottom: 2px solid var(--text);
}

.side-map-table td > span {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .side-map-table {
    font-size: 14px;
  }
}

.side-map-table td:nth-child(2),
.side-map-table td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- フッター ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}

.site-footer .inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 48px var(--gutter) 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 720px) {
  .site-footer .inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
  }
}

.footer-logo {
  width: 104px;
  margin-bottom: 14px;
}

.footer-about p {
  margin: 0 0 12px;
  word-break: auto-phrase;
}

.footer-info {
  margin: 0;
}

.footer-info div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}

.footer-info dt {
  font-weight: 700;
  color: var(--text);
}

.footer-info dd {
  margin: 0;
}

.footer-heading {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.06em;
}

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

.footer-links li + li {
  margin-top: 6px;
}

.footer-links a,
.footer-info a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-links a:hover,
.footer-info a:hover,
.footer-links a[aria-current='page'] {
  color: var(--text);
  text-decoration: underline;
}

.copyright {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.copyright small {
  font-size: 13px;
}

/* ---------- Web でアカウントを削除する（delete-account-web.html。フォームは hosting/delete-account-web.js が出す） ---------- */
.container .actions {
  margin: 8px 0 20px;
}

.button.danger {
  background: var(--highlight);
  border-color: var(--highlight);
  color: var(--on-highlight);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button.danger:disabled {
  opacity: 0.55;
  cursor: progress;
}

.web-delete {
  display: grid;
  gap: 18px;
  max-width: 480px;
  margin: 8px 0 32px;
}

.web-delete .field {
  display: grid;
  gap: 6px;
}

.web-delete label {
  font-weight: 700;
}

.web-delete input[type='tel'],
.web-delete input[type='password'] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--background);
  color: var(--text);
  font: inherit;
  font-size: 17px;
}

.web-delete .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
}

.web-delete .check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: var(--text);
}

.web-delete .button {
  justify-self: start;
}

.form-error {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--highlight);
  border-radius: 12px;
  color: var(--highlight);
  font-weight: 700;
}

/* ---------- 印刷 ---------- */
@media print {
  .skip-link,
  .site-nav,
  .toc,
  .share-links {
    display: none;
  }

  .site-header {
    position: static;
  }
}

/*
 * ---------- トップページ: ストリート・ポップ ----------
 * - トップページだけ（ヘッダーの .is-home の後ろの main・footer）。HTML は変えず、今のクラス・id で欄を選ぶ。ほかのページは今のまま。
 * - 色: 黒 #111111・白 #ffffff・生成り #f4f1e8 を土台に、シグナルイエロー #ffd400・エレクトリックブルー #1f5bff・
 *   レッドオレンジ #ff4a1c を差す。太い黒の線（3px）・ずらした影（ぼかさない）・網点・斜めのストライプ・テープのラベル。
 * - コントラスト（WCAG AA）: #111 に対して 黄 13.2・生成り 16.7・白 18.9・レッドオレンジ 5.6。白に対して ブルー 5.3・黒 18.9。
 *   ブルーの上の文字は白だけ（黒は 3.6 で足りない）。レッドオレンジの上の文字は黒だけ（白は 3.4 で足りない）。
 *   補足の文字 #3d3d3d は 白 10.9・生成り 9.6・黄 7.6。黒地の補足 #cfcfcf は 12.1。
 *   ブルーの欄の上の角の白い斜線（13〜14%）の上の白は 4.2 のため、その範囲には大きい見出し（3 以上でよい）とテープ・カードだけを置く
 *   （本文・補足の文字は斜線の消えた下に来る）。黒の欄の斜線（7%）の上は 白 15.9・#cfcfcf 10.2。
 * - おおかみ・うさぎはブランドのマーク（assets/brand/wolf-face.png・assets/images/splash-icon-black.png を
 *   hosting/scripts/make-images.swift が切り抜いた hosting/assets/brand/*-stamp.png。手で作らない）を mask にして、
 *   スタンプのように色を塗る（読み上げない・押せない）。文字と重なるスタンプの色も上の比を満たす（濃いブルー #164be0 に白 6.7、
 *   濃いオレンジ #ee4413 に黒 4.9、#1c1c1c に #cfcfcf 10.9、招待の濃い黄色 #ebc300 に黒 11.1）。
 * - 英字のテープ（ICONS・FEATURES など）は CSS の content で出し、読み上げの代わりの文字は空（content: … / ''）にする。
 * - 動き: ボタンの浮き沈みの遷移は、ほかの動きと同じく @media screen and (prefers-reduced-motion: no-preference) の中だけ
 *   （tests/functions/site-app-icons.test.ts が確かめる）。ほかに動くものは足さない。
 * - 画面だけ（ここから最後までを @media screen で囲む）。印刷では使わず、土台の白地・黒文字のまま印刷する（ブラウザの既定の
 *   「背景を印刷しない」では欄の色が落ち、色の地に合わせた白・黄・#cfcfcf の文字やテープ、白に反転したロゴが白い紙に残って
 *   読めなくなるため）。tests/functions/site-home.test.ts が確かめる。
 * - 色・余白・飾りの位置を変えたら tests/functions/site-home.test.ts（色の組み合わせ・セレクターが .is-home から始まること）を通し、
 *   360・390・1280px の幅で横にはみ出さないことを確かめる。
 */
@media screen {
  .is-home,
  .is-home ~ main,
  .is-home ~ .site-footer {
    --st-ink: #111111;
    --st-paper: #f4f1e8;
    --st-white: #ffffff;
    --st-yellow: #ffd400;
    --st-blue: #1f5bff;
    --st-red: #ff4a1c;
    --st-sub: #3d3d3d;
    --st-sub-dark: #cfcfcf;
    --st-line: 3px;
    --st-off: 4px;
    --st-radius: 6px;
    --st-latin: 'Avenir Next Condensed', 'Helvetica Neue', 'Arial Narrow', system-ui, sans-serif;
    --st-wolf: url('/assets/brand/wolf-stamp.png');
    --st-rabbit: url('/assets/brand/rabbit-stamp.png');
  }

  @media (min-width: 720px) {
    .is-home ~ main {
      --st-off: 6px;
    }
  }

  /* ---------- 欄（幅いっぱいの色の帯） ---------- */
  .is-home ~ main > section {
    --st-bg: var(--st-paper);
    --st-fg: var(--st-ink);
    --text: var(--st-fg);
    --text-secondary: var(--st-sub);
    --kicker-bg: var(--st-ink);
    --kicker-fg: var(--st-yellow);
    --title-shadow: var(--st-yellow);
    position: relative;
    isolation: isolate;
    background: var(--st-bg);
    color: var(--st-fg);
    border-top: var(--st-line) solid var(--st-ink);
  }

  /* 幅いっぱいに色を塗り、中身は今と同じ幅（--wide）に収める */
  .is-home ~ main > .hero,
  .is-home ~ main > .section {
    max-width: none;
    padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
    padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
  }

  .is-home ~ main > .section.pricing {
    padding-left: max(var(--gutter), calc((100% - 880px) / 2 + var(--gutter)));
    padding-right: max(var(--gutter), calc((100% - 880px) / 2 + var(--gutter)));
  }

  /* 飾りの層（読み上げない・押せない。中身の後ろ） */
  .is-home ~ main > section::before,
  .is-home ~ main > section::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }

  /* ---------- 見出し（大きく太く。上に英字のテープ） ---------- */
  .is-home ~ main .section-title {
    font-size: clamp(27px, 7vw, 46px);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-shadow: 3px 3px 0 var(--title-shadow);
  }

  .is-home ~ main .section-title::before,
  .is-home ~ main .campaign-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 18px;
    padding: 6px 16px 5px;
    background: var(--kicker-bg);
    color: var(--kicker-fg);
    font-family: var(--st-latin);
    font-size: clamp(14px, 1.4vw + 9px, 16px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-shadow: none;
    transform: rotate(-2deg);
    /* テープのちぎれた両端 */
    clip-path: polygon(0 0, 100% 0, 98% 22%, 100% 44%, 97.5% 66%, 100% 100%, 0 100%, 2% 78%, 0 56%, 2.5% 34%);
  }

  .is-home ~ main .section-title::before {
    content: var(--kicker);
    content: var(--kicker) / '';
  }

  .is-home ~ main .app-icons { --kicker: 'ICONS'; }
  .is-home ~ main [aria-labelledby='features-title'] { --kicker: 'FEATURES'; }
  .is-home ~ main #screens { --kicker: 'SCREENS'; }
  .is-home ~ main #safety { --kicker: 'SAFETY & PRIVACY'; }
  .is-home ~ main #how-to { --kicker: 'HOW TO START'; }
  .is-home ~ main .pricing { --kicker: 'PRICING'; }
  .is-home ~ main #faq { --kicker: 'FAQ'; }
  .is-home ~ main #invite { --kicker: 'INVITE FRIENDS'; }
  .is-home ~ main #side-map { --kicker: 'SIDE MAP'; }

  .is-home ~ main .section-head p,
  .is-home ~ main .app-icons-head p {
    color: var(--st-fg);
    font-weight: 500;
  }

  .is-home ~ main .section-head .section-title,
  .is-home ~ main .app-icons-head .section-title {
    margin-bottom: 20px;
  }

  /* ---------- カード（白・太い黒の線・ずらした影） ---------- */
  .is-home ~ main .campaign-body,
  .is-home ~ main .feature,
  .is-home ~ main .setting-list > div,
  .is-home ~ main .how-steps > li,
  .is-home ~ main .pricing-points > li,
  .is-home ~ main details,
  .is-home ~ main .invite-copy,
  .is-home ~ main .side-map-card,
  .is-home ~ main .split > div {
    --text: var(--st-ink);
    --text-secondary: var(--st-sub);
    border: var(--st-line) solid var(--st-ink);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-ink);
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-ink);
  }

  /* ---------- ボタン（角ばった札。押すと沈む） ---------- */
  .is-home ~ main .button {
    min-height: 52px;
    padding: 0 26px;
    border: var(--st-line) solid var(--st-ink);
    border-radius: 4px;
    background: var(--st-ink);
    color: var(--st-yellow);
    box-shadow: 4px 4px 0 var(--st-yellow), 4px 4px 0 var(--st-line) var(--st-ink);
    font-weight: 800;
  }

  .is-home ~ main .button.secondary {
    background: var(--st-white);
    color: var(--st-ink);
    box-shadow: 4px 4px 0 var(--st-ink);
  }

  .is-home ~ main .button:hover {
    opacity: 1;
    transform: translate(-2px, -2px);
  }

  .is-home ~ main .button.secondary:hover {
    background: var(--st-yellow);
    box-shadow: 6px 6px 0 var(--st-ink);
  }

  .is-home ~ main .button:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--st-ink);
  }

  .is-home ~ main .button:focus-visible {
    border-radius: 4px;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .is-home ~ main .button {
      transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
    }
  }

  /* ---------- ヘッダー（ヒーローと同じ黄色。左に小さな英字、メニューは黒い線の札） ---------- */
  .site-header.is-home {
    background: var(--st-yellow);
  }

  .site-header.is-home .inner {
    justify-content: space-between;
  }

  .site-header.is-home .inner::before {
    content: 'WOLFS / OFFICIAL SITE';
    content: 'WOLFS / OFFICIAL SITE' / '';
    font-family: var(--st-latin);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--st-ink);
    white-space: nowrap;
  }

  @media (max-width: 599px) {
    .site-header.is-home .inner::before {
      content: none;
    }

    .site-header.is-home .inner {
      justify-content: flex-end;
    }
  }

  .is-home .site-nav {
    gap: 8px;
  }

  .is-home .site-nav a {
    padding: 3px 12px;
    border: 2px solid var(--st-ink);
    border-radius: 3px;
    color: var(--st-ink);
    font-weight: 700;
    line-height: 1.6;
  }

  .is-home .site-nav a:hover {
    background: var(--st-ink);
    color: var(--st-yellow);
  }

  /* ---------- ヒーロー（黄色・網点・おおかみとうさぎのスタンプ） ---------- */
  .is-home ~ main > .hero {
    --st-bg: var(--st-yellow);
    --text-secondary: var(--st-ink);
    border-top: 0;
    overflow: hidden;
    overflow: clip;
    padding-bottom: clamp(96px, 14vh, 150px);
  }

  /* 網点（左下と右上の角だけ） */
  .is-home ~ main > .hero::before {
    inset: 0;
    background-image: radial-gradient(circle, var(--st-ink) 0 1.7px, transparent 2.2px);
    background-size: 11px 11px;
    --dots-a: 470px;
    --dots-b: 400px;
    -webkit-mask-image: radial-gradient(circle var(--dots-a) at 0% 100%, #000 0, transparent), radial-gradient(circle var(--dots-b) at 100% 0%, #000 0, transparent);
    mask-image: radial-gradient(circle var(--dots-a) at 0% 100%, #000 0, transparent), radial-gradient(circle var(--dots-b) at 100% 0%, #000 0, transparent);
  }

  @media (max-width: 719px) {
    .is-home ~ main > .hero::before {
      --dots-a: 230px;
      --dots-b: 190px;
    }
  }

  /*
   * おおかみのスタンプ（左下）。うさぎ（右上）は、ヒーローの最後の一文（「18歳以上の方専用のアプリです。」の .hero-note）の ::before で描く
   * （ヒーローの ::before は網点に使っている。ストアの公開後に差し替える「近日公開」（.store-soon）には付けない。
   * p は position: static なので、置き場所はヒーローが基準。tests/functions/site-home.test.ts が、その要素がヒーローの最後にあることを確かめる）
   */
  .is-home ~ main > .hero::after,
  .is-home ~ main > .hero > .hero-note:last-child::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: var(--st-ink);
    -webkit-mask: var(--st-wolf) center / contain no-repeat;
    mask: var(--st-wolf) center / contain no-repeat;
  }

  /* 広い画面の大きさ（1280px 幅で おおかみ 290px・うさぎ 230px）。960〜1279px では画面の幅に合わせて小さくし、ロゴ・キャッチコピーに重ねない */
  .is-home ~ main > .hero::after {
    left: -34px;
    bottom: 70px;
    width: min(290px, 22.7vw);
    aspect-ratio: 550 / 560;
    transform: rotate(-11deg);
  }

  .is-home ~ main > .hero > .hero-note:last-child::before {
    right: -26px;
    top: 64px;
    width: min(230px, 18vw);
    aspect-ratio: 489 / 560;
    -webkit-mask-image: var(--st-rabbit);
    mask-image: var(--st-rabbit);
    transform: rotate(12deg);
  }

  @media (max-width: 959px) {
    .is-home ~ main > .hero {
      padding-bottom: 184px;
    }

    .is-home ~ main > .hero::after {
      left: -18px;
      bottom: 34px;
      width: 124px;
    }

    .is-home ~ main > .hero > .hero-note:last-child::before {
      right: -14px;
      top: auto;
      bottom: 40px;
      width: 100px;
    }
  }

  /*
   * ロゴの O の中のうさぎは切り抜き（透明）のため、後ろを白で埋める（演出で O から出てくる顔と同じ白にし、演出の終わりに
   * うさぎが黄色に変わらないようにする）。埋めるのはうさぎの切り抜きとふちの画素だけ（logo-rabbit-fill.png。ロゴと同じ 1200x281 で
   * make-images.swift が作る。補間でふちに黄色が透けないよう 2px 広げてある）。ロゴの黒は不透明でない（約 91%）ため、白を O の
   * 円盤の下まで敷くと、そこだけ黒が灰色になって黄色の上の黒（ほかの文字と同じ色）と二重の輪に見える。.intro-still は演出の間
   * clip-path で隠れるので、背景も一緒に隠れる
   */
  .is-home ~ main .intro-still {
    background: url('/assets/brand/logo-rabbit-fill.png') 0 0 / 100% 100% no-repeat;
  }

  /* キャッチコピーは黒いテープ */
  .is-home ~ main .catch {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 8px clamp(14px, 3vw, 24px) 9px;
    background: var(--st-ink);
    color: var(--st-white);
    font-size: clamp(18px, 4.9vw, 34px);
    font-weight: 900;
    letter-spacing: 0.04em;
    transform: rotate(-2deg);
    clip-path: polygon(0 0, 100% 0, 99% 25%, 100% 50%, 98.8% 75%, 100% 100%, 0 100%, 1.2% 75%, 0 50%, 1% 25%);
  }

  .is-home ~ main .hero-lead {
    margin-top: 26px;
    color: var(--st-ink);
    font-weight: 500;
  }

  .is-home ~ main .store-soon {
    gap: 18px;
  }

  .is-home ~ main .store-soon > li {
    min-width: 0;
    padding: 10px 18px 12px;
    border: var(--st-line) solid var(--st-ink);
    border-radius: var(--st-radius);
    background: var(--st-white);
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-ink);
    align-items: center;
    text-align: center;
  }

  @media (min-width: 480px) {
    .is-home ~ main .store-soon > li {
      min-width: 180px;
    }
  }

  .is-home ~ main .store-name {
    font-size: 19px;
    font-weight: 800;
  }

  /* 「近日公開」はレッドオレンジのラベル */
  .is-home ~ main .store-status {
    margin-top: 5px;
    padding: 1px 10px 2px;
    background: var(--st-red);
    color: var(--st-ink);
    font-weight: 800;
    letter-spacing: 0.1em;
  }

  .is-home ~ main .hero-note {
    color: var(--st-ink);
  }

  .is-home ~ main .hero-note a {
    font-weight: 700;
    text-decoration-thickness: 2px;
  }

  /* ---------- アイコン（生成り。上の境目に黒いテープを斜めに渡す） ---------- */
  .is-home ~ main > .app-icons {
    z-index: 1;
    border-top: 0;
    padding: 104px 0 76px;
  }

  /* テープ（傾きは skewY なので横幅は 100% のまま。横にはみ出さない） */
  .is-home ~ main > .app-icons::before {
    z-index: 1;
    left: 0;
    right: 0;
    top: -26px;
    height: 48px;
    overflow: hidden;
    padding-left: 12px;
    border-top: var(--st-line) solid var(--st-ink);
    border-bottom: var(--st-line) solid var(--st-ink);
    background: var(--st-ink);
    color: var(--st-yellow);
    content: 'FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT?';
    content: 'FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT? \2002\25CF\2002 FIND YOUR PACK \2002\25CF\2002 WOLF OR RABBIT?' / '';
    font-family: var(--st-latin);
    font-size: 20px;
    font-weight: 800;
    line-height: 42px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    transform: skewY(-2.2deg);
  }

  .is-home ~ main > .app-icons::after {
    inset: 0;
    background-image: radial-gradient(circle, var(--st-ink) 0 1.4px, transparent 1.9px);
    background-size: 10px 10px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0, transparent 30%);
    mask-image: radial-gradient(circle at 100% 100%, #000 0, transparent 30%);
  }

  .is-home ~ main .icon-marquee-view {
    padding-top: 6px;
    padding-bottom: 12px;
  }

  .is-home ~ main .icon-marquee-group img {
    box-shadow: 0 0 0 var(--st-line) var(--st-ink), 4px 4px 0 var(--st-line) var(--st-ink);
  }

  .is-home ~ main .icon-marquee-control {
    color: var(--st-ink);
    font-weight: 700;
  }

  .is-home ~ main .icon-marquee-control input {
    accent-color: var(--st-ink);
  }

  /* ---------- プレゼントキャンペーン（ブルー。文字は白、本文は白いカード） ---------- */
  .is-home ~ main > .campaign {
    --st-bg: var(--st-blue);
    --st-fg: var(--st-white);
    --text-secondary: var(--st-white);
    --kicker-bg: var(--st-yellow);
    --kicker-fg: var(--st-ink);
    --title-shadow: var(--st-ink);
    overflow: hidden;
    overflow: clip;
  }

  /* 斜めのストライプ（上の角） */
  .is-home ~ main > .campaign::before {
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.13) 0 3px, transparent 3px 16px);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 38%);
    mask-image: linear-gradient(180deg, #000, transparent 38%);
  }

  /* 濃いブルーのおおかみ（同じ色のなかで少し濃く。広い画面の右下） */
  .is-home ~ main > .campaign::after {
    right: -60px;
    bottom: -40px;
    width: 420px;
    aspect-ratio: 550 / 560;
    background: #164be0;
    -webkit-mask: var(--st-wolf) center / contain no-repeat;
    mask: var(--st-wolf) center / contain no-repeat;
    transform: rotate(-8deg);
  }

  .is-home ~ main .campaign-eyebrow {
    font-size: 15px;
  }

  .is-home ~ main .campaign .section-title {
    color: var(--st-white);
    font-size: clamp(25px, 6.4vw, 46px);
    line-height: 1.4;
    text-shadow: 4px 4px 0 var(--st-ink);
  }

  .is-home ~ main .campaign-visual img {
    border: var(--st-line) solid var(--st-ink);
    border-radius: var(--st-radius);
    box-shadow: 8px 8px 0 var(--st-ink);
  }

  .is-home ~ main .campaign-body {
    margin-top: 44px;
    padding: 28px clamp(18px, 4vw, 36px) 32px;
  }

  .is-home ~ main .campaign-catch {
    font-size: 19px;
    font-weight: 900;
  }

  .is-home ~ main .campaign-catch span {
    margin-top: 4px;
    font-weight: 500;
  }

  /* 応募の流れの番号は黄色の四角 */
  .is-home ~ main .steps li::before {
    border: 2px solid var(--st-ink);
    border-radius: 3px;
    background: var(--st-yellow);
    color: var(--st-ink);
    font-weight: 900;
    line-height: 24px;
  }

  .is-home ~ main .campaign-steps li {
    font-weight: 700;
  }

  .is-home ~ main .campaign-tagline {
    margin: 28px -4px 0;
    padding: 14px 10px;
    background: var(--st-ink);
    color: var(--st-white);
    font-weight: 700;
  }

  .is-home ~ main .campaign-tagline span[lang='en'] {
    margin: 4px 0;
    color: var(--st-yellow);
    font-family: var(--st-latin);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2em;
  }

  /* ---------- 特徴（生成り。白いカード） ---------- */
  .is-home ~ main > [aria-labelledby='features-title'] {
    overflow: hidden;
    overflow: clip;
  }

  .is-home ~ main > [aria-labelledby='features-title']::before {
    inset: 0;
    background-image: radial-gradient(circle, var(--st-ink) 0 1.4px, transparent 1.9px);
    background-size: 10px 10px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 0, transparent 32%);
    mask-image: radial-gradient(circle at 0% 0%, #000 0, transparent 32%);
  }

  .is-home ~ main .features {
    gap: 28px;
  }

  @media (min-width: 720px) {
    .is-home ~ main .features {
      gap: 32px;
    }
  }

  .is-home ~ main .feature {
    padding: 24px 24px 26px;
  }

  .is-home ~ main .feature h3 {
    font-size: 20px;
    font-weight: 900;
    margin-top: 16px;
  }

  .is-home ~ main .feature p {
    color: var(--st-sub);
  }

  .is-home ~ main .icon {
    width: 52px;
    height: 52px;
    border: var(--st-line) solid var(--st-ink);
    border-radius: 4px;
    background: var(--st-yellow);
    color: var(--st-ink);
  }

  .is-home ~ main .icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.4;
  }

  /* 安全とプライバシーのカードの記号は、ブルー（白地で 5.3） */
  .is-home ~ main #safety .icon {
    background: var(--st-blue);
    color: var(--st-white);
  }

  .is-home ~ main .chips li {
    padding: 3px 12px;
    border: 0;
    border-radius: 3px;
    background: var(--st-ink);
    color: var(--st-white);
    font-weight: 700;
  }

  /* ---------- アプリの画面（黒。画面は白い線と黄色の影） ---------- */
  .is-home ~ main > #screens {
    --st-bg: var(--st-ink);
    --st-fg: var(--st-white);
    --text-secondary: var(--st-sub-dark);
    --kicker-bg: var(--st-yellow);
    --kicker-fg: var(--st-ink);
    --title-shadow: var(--st-blue);
    overflow: hidden;
    overflow: clip;
  }

  .is-home ~ main > #screens::before {
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 16px);
    -webkit-mask-image: linear-gradient(200deg, #000, transparent 45%);
    mask-image: linear-gradient(200deg, #000, transparent 45%);
  }

  /* 黒の中に少しだけ明るいおおかみ（左下） */
  .is-home ~ main > #screens::after {
    left: -40px;
    bottom: -50px;
    width: 340px;
    aspect-ratio: 550 / 560;
    background: #1c1c1c;
    -webkit-mask: var(--st-wolf) center / contain no-repeat;
    mask: var(--st-wolf) center / contain no-repeat;
    transform: rotate(9deg);
  }

  .is-home ~ main .screen img {
    border: var(--st-line) solid var(--st-white);
    border-radius: 18px;
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-yellow);
  }

  .is-home ~ main .screen h3 {
    font-size: 17px;
    font-weight: 900;
    color: var(--st-white);
  }

  .is-home ~ main .screen p {
    color: var(--st-sub-dark);
  }

  @media (min-width: 720px) {
    .is-home ~ main .screen figcaption {
      padding-top: 8px;
    }
  }

  /* 下の「都道府県ごとのおおかみ・うさぎ」（生成り）と色が変わるので、下の余白を戻す（土台の CSS では 0） */
  .is-home ~ main > #screens {
    padding-bottom: 72px;
  }

  /* ---------- 都道府県ごとのおおかみ・うさぎ（生成り。地図は白いカード。テープはブルー） ---------- */
  .is-home ~ main > #side-map {
    --st-bg: var(--st-paper);
    --kicker-bg: var(--st-blue);
    --kicker-fg: var(--st-white);
    --title-shadow: var(--st-yellow);
  }

  .is-home ~ main .side-map-card {
    padding: clamp(6px, 2vw, 14px);
  }

  /* 「都道府県ごとの割合を表で見る」が幅 320px でも1行に入るように、左右の余白を少し狭くする */
  .is-home ~ main #side-map .button {
    padding: 0 16px;
  }

  .is-home ~ main .side-map-legend {
    margin-top: 24px;
    color: var(--st-ink);
    font-weight: 700;
  }

  .is-home ~ main .side-map-note {
    color: var(--st-ink);
    font-weight: 500;
  }

  .is-home ~ main .side-map-credit {
    color: var(--st-sub);
  }

  /* ---------- 安全とプライバシー（白。上下に黄色と黒の注意テープ） ---------- */
  .is-home ~ main > #safety {
    --st-bg: var(--st-white);
    border-top: 0;
    padding-top: 24px;
  }

  .is-home ~ main > #safety::before {
    left: 0;
    right: 0;
    top: 0;
    height: 24px;
    border-top: var(--st-line) solid var(--st-ink);
    border-bottom: var(--st-line) solid var(--st-ink);
    background: repeating-linear-gradient(-45deg, var(--st-ink) 0 14px, var(--st-yellow) 14px 28px);
  }

  .is-home ~ main #safety .feature {
    background: var(--st-paper);
  }

  .is-home ~ main .check-list {
    color: var(--st-sub);
  }

  .is-home ~ main .check-list li::marker {
    color: var(--st-ink);
  }

  .is-home ~ main .safety-more .notice {
    border: var(--st-line) solid var(--st-ink);
    border-radius: var(--st-radius);
    background: var(--st-yellow);
    color: var(--st-ink);
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-ink);
    font-size: 15px;
  }

  .is-home ~ main .safety-more h3 {
    font-size: 22px;
    font-weight: 900;
  }

  .is-home ~ main .setting-list div {
    box-shadow: none;
  }

  .is-home ~ main .setting-list dt {
    font-weight: 900;
  }

  /* ---------- はじめかた（レッドオレンジ。文字は黒） ---------- */
  .is-home ~ main > #how-to {
    --st-bg: var(--st-red);
    --text-secondary: var(--st-ink);
    --kicker-bg: var(--st-ink);
    --kicker-fg: var(--st-white);
    --title-shadow: var(--st-white);
    padding-bottom: 72px;
    overflow: hidden;
    overflow: clip;
  }

  /* 少し濃いオレンジのうさぎ（左下。重なる黒い文字は 4.9） */
  .is-home ~ main > #how-to::after {
    left: -50px;
    bottom: -60px;
    width: 300px;
    aspect-ratio: 489 / 560;
    background: #ee4413;
    -webkit-mask: var(--st-rabbit) center / contain no-repeat;
    mask: var(--st-rabbit) center / contain no-repeat;
    transform: rotate(14deg);
  }

  .is-home ~ main .how-steps > li {
    padding: 26px 22px 24px 22px;
  }

  .is-home ~ main .how-steps > li::before {
    position: static;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 4px;
    background: var(--st-ink);
    color: var(--st-yellow);
    font-family: var(--st-latin);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    content: '0' counter(step);
  }

  .is-home ~ main .how-steps h3 {
    font-size: 19px;
    font-weight: 900;
  }

  .is-home ~ main .how-steps p {
    color: var(--st-sub);
  }

  .is-home ~ main .how-note {
    color: var(--st-ink);
    font-weight: 700;
  }

  /* ---------- 料金プラン（生成り） ---------- */
  .is-home ~ main > .pricing {
    --title-shadow: var(--st-blue);
  }

  .is-home ~ main .pricing p {
    color: var(--st-ink);
  }

  .is-home ~ main .pricing-points li {
    padding: 16px 18px;
    font-weight: 500;
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-blue), var(--st-off) var(--st-off) 0 var(--st-line) var(--st-ink);
  }

  .is-home ~ main .pricing .more {
    margin-top: 36px;
  }

  /*
   * 「近日追加予定」のまとめてブロック（黄色のカード・黒い影。上の角に黒いテープの COMING SOON）。黄の上の黒 13.2・補足 #3d3d3d 7.6、
   * ラベルはレッドオレンジに黒 5.6（ヒーローの「近日公開」と同じ）・ブルーに白 5.3、記号は黒地に黄 13.2
   */
  .is-home ~ main .soon-feature {
    position: relative;
    margin-top: 56px;
    padding: 36px clamp(18px, 4vw, 32px) 28px;
    border: var(--st-line) solid var(--st-ink);
    border-radius: var(--st-radius);
    background: var(--st-yellow);
    color: var(--st-ink);
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-ink);
  }

  .is-home ~ main .soon-feature::before {
    position: absolute;
    top: -19px;
    left: 14px;
    padding: 6px 16px 5px;
    background: var(--st-ink);
    color: var(--st-yellow);
    font-family: var(--st-latin);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2em;
    transform: rotate(-3deg);
    clip-path: polygon(0 0, 100% 0, 98% 22%, 100% 44%, 97.5% 66%, 100% 100%, 0 100%, 2% 78%, 0 56%, 2.5% 34%);
    content: 'COMING SOON';
    content: 'COMING SOON' / '';
  }

  .is-home ~ main .soon-feature .icon {
    width: 56px;
    height: 56px;
    background: var(--st-ink);
    color: var(--st-yellow);
  }

  .is-home ~ main .soon-feature .icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
  }

  .is-home ~ main .soon-feature h3 {
    margin-top: 16px;
    font-size: clamp(27px, 5vw, 34px);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-shadow: 3px 3px 0 var(--st-white);
  }

  .is-home ~ main .soon-badges span {
    margin-right: 6px;
    padding: 1px 10px 2px;
    border: 2px solid var(--st-ink);
    border-radius: 3px;
    font-weight: 800;
    letter-spacing: 0.1em;
  }

  .is-home ~ main .badge-soon {
    background: var(--st-red);
    color: var(--st-ink);
  }

  .is-home ~ main .badge-premium {
    background: var(--st-blue);
    color: var(--st-white);
  }

  .is-home ~ main .pricing .soon-lead {
    font-size: clamp(19px, 1vw + 14px, 22px);
    font-weight: 900;
    line-height: 1.6;
    word-break: auto-phrase;
  }

  .is-home ~ main .soon-feature .check-list {
    color: var(--st-ink);
    font-weight: 500;
  }

  .is-home ~ main .soon-feature .small {
    color: var(--st-sub);
  }

  /* ---------- よくある質問（ブルー。質問は白いカード） ---------- */
  .is-home ~ main > #faq {
    --st-bg: var(--st-blue);
    --st-fg: var(--st-white);
    --text-secondary: var(--st-white);
    --kicker-bg: var(--st-yellow);
    --kicker-fg: var(--st-ink);
    --title-shadow: var(--st-ink);
    overflow: hidden;
    overflow: clip;
  }

  .is-home ~ main > #faq::before {
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 16px);
    -webkit-mask-image: linear-gradient(160deg, #000, transparent 30%);
    mask-image: linear-gradient(160deg, #000, transparent 30%);
  }

  /* 少し濃いブルーのうさぎ（右上。質問のカードの後ろ） */
  .is-home ~ main > #faq::after {
    right: -46px;
    top: 36px;
    width: 300px;
    aspect-ratio: 489 / 560;
    background: #164be0;
    -webkit-mask: var(--st-rabbit) center / contain no-repeat;
    mask: var(--st-rabbit) center / contain no-repeat;
    transform: rotate(10deg);
  }

  .is-home ~ main .faq {
    display: grid;
    gap: 14px;
  }

  .is-home ~ main details {
    padding: 0;
  }

  .is-home ~ main details:first-of-type {
    border-top: var(--st-line) solid var(--st-ink);
  }

  .is-home ~ main summary {
    padding: 16px 64px 16px 20px;
    font-weight: 800;
  }

  /*
   * 質問のフォーカスの枠は、カードの内側（白の上。黒 3px で 18.9）に出す。既定の外側の枠（:focus-visible）だと、
   * カードの黒い線のすぐ外に付いて、右と下は黒い影に、右上は後ろの濃いブルーのうさぎ（#111 と 2.8）に溶ける
   */
  .is-home ~ main summary:focus-visible {
    outline: 3px solid var(--st-ink);
    outline-offset: -8px;
    /* 開いた質問の下の点線の両端を、フォーカスの間だけ丸めない（内側の枠は角の丸みを使わない） */
    border-radius: 0;
  }

  /* 開け閉めの記号は黄色の四角 */
  .is-home ~ main summary::after {
    right: 14px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border: 2px solid var(--st-ink);
    border-radius: 3px;
    background: var(--st-yellow);
    color: var(--st-ink);
    font-weight: 800;
    font-size: 22px;
    line-height: 27px;
    text-align: center;
  }

  .is-home ~ main details .answer {
    padding: 0 20px 18px;
    color: var(--st-sub);
  }

  .is-home ~ main details[open] summary {
    border-bottom: 2px dashed var(--st-ink);
    margin-bottom: 14px;
  }

  .is-home ~ main .faq-more {
    color: var(--st-white);
  }

  /* ---------- 招待（黄色。ヒーローと同じ色で、ページの終わりを閉じる。シェアのボタンは白い札、紹介の文は白いカード） ---------- */
  .is-home ~ main > #invite {
    --st-bg: var(--st-yellow);
    --text-secondary: var(--st-ink);
    --title-shadow: var(--st-white);
    padding-bottom: 80px;
    overflow: hidden;
    overflow: clip;
  }

  /*
   * 少し濃い黄色 #ebc300 のおおかみ（左下）とうさぎ（右上）。文字と重なっても黒は 11.1。
   * 幅 720px 未満は小さくして、見出し・ボタンの後ろに大きくかからないようにする
   */
  .is-home ~ main > #invite::before,
  .is-home ~ main > #invite::after {
    background: #ebc300;
    -webkit-mask: var(--st-wolf) center / contain no-repeat;
    mask: var(--st-wolf) center / contain no-repeat;
  }

  .is-home ~ main > #invite::before {
    left: -44px;
    bottom: -36px;
    width: 300px;
    aspect-ratio: 550 / 560;
    transform: rotate(-10deg);
  }

  .is-home ~ main > #invite::after {
    right: -30px;
    top: 40px;
    width: 230px;
    aspect-ratio: 489 / 560;
    -webkit-mask-image: var(--st-rabbit);
    mask-image: var(--st-rabbit);
    transform: rotate(12deg);
  }

  @media (max-width: 719px) {
    .is-home ~ main > #invite::before {
      left: -24px;
      bottom: -20px;
      width: 150px;
    }

    .is-home ~ main > #invite::after {
      right: -18px;
      top: 18px;
      width: 104px;
    }
  }

  .is-home ~ main #invite .section-title {
    font-size: clamp(25px, 6.6vw, 46px);
  }

  .is-home ~ main .share-links {
    gap: 20px;
  }

  @media (min-width: 560px) {
    .is-home ~ main .share-links {
      gap: 18px 22px;
    }
  }

  .is-home ~ main .share-links .button {
    padding: 0 18px;
  }

  .is-home ~ main #invite .button.secondary:hover {
    background: var(--st-ink);
    color: var(--st-yellow);
  }

  /*
   * シェアのボタンのフォーカスの枠は、ずらした影（4〜6px。押す前の浮きは 6px）より外に出す（黒 3px・外へ 9px。黄色の上で 13.2。
   * 既定の外へ 3px の枠だと、右と下がボタンの黒い影に溶ける。よくある質問の質問の枠と同じ考え）
   */
  .is-home ~ main #invite .button:focus-visible {
    outline: 3px solid var(--st-ink);
    outline-offset: 9px;
  }

  .is-home ~ main .invite-copy {
    margin-top: 44px;
    padding: 20px clamp(18px, 4vw, 28px) 22px;
  }

  .is-home ~ main .invite-copy-label {
    color: var(--st-sub);
    font-weight: 500;
  }

  .is-home ~ main .invite-copy-text {
    font-size: 17px;
    font-weight: 900;
  }

  /* リンクは黒いテープ（黄色の文字。13.2） */
  .is-home ~ main .invite-url {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 12px 3px;
    background: var(--st-ink);
    color: var(--st-yellow);
    font-family: var(--st-latin);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .is-home ~ main .invite-note {
    color: var(--st-ink);
    font-weight: 500;
  }

  /* ---------- お知らせとお問い合わせ（黒。カードは白） ---------- */
  .is-home ~ main > section:last-child {
    --st-bg: var(--st-ink);
    --st-fg: var(--st-white);
    --text-secondary: var(--st-sub-dark);
  }

  .is-home ~ main .split > div {
    padding: 26px 24px 28px;
    box-shadow: var(--st-off) var(--st-off) 0 var(--st-yellow);
    border-color: var(--st-white);
  }

  .is-home ~ main .split h2 {
    font-size: 24px;
    font-weight: 900;
  }

  .is-home ~ main .split p {
    color: var(--st-sub);
  }

  /* ---------- フッター（黒。ロゴは白に反転） ---------- */
  .is-home ~ .site-footer {
    border-top: var(--st-line) solid var(--st-white);
    background: var(--st-ink);
    color: var(--st-sub-dark);
  }

  .is-home ~ .site-footer .footer-logo {
    filter: invert(1);
  }

  .is-home ~ .site-footer .footer-heading {
    color: var(--st-yellow);
    font-family: var(--st-latin);
    letter-spacing: 0.14em;
  }

  .is-home ~ .site-footer .footer-info dt {
    color: var(--st-white);
  }

  .is-home ~ .site-footer .footer-links a,
  .is-home ~ .site-footer .footer-info a {
    color: var(--st-sub-dark);
  }

  .is-home ~ .site-footer .footer-links a:hover,
  .is-home ~ .site-footer .footer-info a:hover {
    color: var(--st-white);
  }

  .is-home ~ .site-footer .copyright {
    border-top-color: #3a3a3a;
  }

  .is-home ~ .site-footer :focus-visible {
    outline-color: var(--st-white);
  }
}