/*
  雛形の最小スタイル。デザインが決まったらこのファイルごと差し替える。
  デザイントークンと共通パーツはこの1枚に集約し、ページごとの個別 CSS は作らない。
*/
:root {
  --bg: #fafaf9;
  --fg: #1a1a1e;
  --muted: #6b6b73;
  --line: #e7e7e4;
  --accent: #b4551f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.9;
}

.shell { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.hdr { padding: 40px 0 24px; border-bottom: 1px solid var(--line); }
.hdr__title { margin: 0; font-size: clamp(24px, 5vw, 34px); line-height: 1.4; }

.lead { color: var(--muted); }

.prose h2 { margin: 32px 0 8px; font-size: 17px; }
.prose p { margin: 0 0 12px; font-size: 15px; }

a { color: var(--accent); }

.foot {
  margin-top: 56px;
  padding: 24px 0 48px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.foot__links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot__meta { margin-top: 8px; font-size: 12px; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  :root { --bg: #16161a; --fg: #eceae6; --muted: #9a9aa2; --line: #2c2c33; --accent: #e08a4e; }
}


/* ---- ショート封印の LP。アプリの警告表示と同じ、太枠・角丸なしの印刷物の調子に揃える。
   枠と塗りは --fg / --bg に従うのでダークでも反転する。.warning だけはアプリと同じく白地・黒字に固定 ---- */
.shell--wide { max-width: 760px; }
.hero { padding: 40px 0 28px; border-bottom: 3px solid var(--fg); }
.hero__mark { width: 72px; height: 72px; border-radius: 50%; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 900; line-height: 1; }
.hero__name { margin: 16px 0 0; font-weight: 700; letter-spacing: .08em; }
.hero__title { margin: 8px 0 0; font-size: clamp(28px, 6.4vw, 44px); line-height: 1.25; font-weight: 900; letter-spacing: -.01em; }
.hero__lead { margin: 18px 0 0; font-size: 17px; line-height: 1.8; max-width: 34em; }
.hero__cta { margin: 24px 0 0; }
.badge { display: inline-block; padding: 12px 20px; background: var(--fg); color: var(--bg); font-weight: 700; }
.hero__note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin: 28px 0 8px; border: 2px solid var(--fg); }
.card { padding: 18px 18px 20px; border-right: 2px solid var(--fg); border-bottom: 2px solid var(--fg); margin: 0 -2px -2px 0; }
.card h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 900; }
.card p { margin: 0; font-size: 15px; line-height: 1.75; }
.prose h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
.prose ul { padding-left: 1.3em; line-height: 1.9; }
.warning { background: #fff; color: #000; border: 3px solid #000; padding: 14px 16px; margin: 16px 0 10px; max-width: 30em; }
.warning__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.warning__text { font-size: 18px; font-weight: 700; line-height: 1.45; margin: 4px 0; }
.warning__source { font-size: 11px; line-height: 1.4; }
.fine { color: var(--muted); font-size: 14px; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0 0; }
.shots img { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .shots { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; } .shots img { scroll-snap-align: start; } }