:root {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-2: #161616;
  --border: #ffffff;
  --border-dim: #3a3a3a;
  --text: #ffffff;
  --muted: #a8a8a8;
  --muted-2: #6e6e6e;
  --green: #00e436;
  --yellow: #ffec27;
  --pink: #ff77a8;
  --cyan: #29adff;
  --red: #ff004d;
  /* Font stacks */
  --font-pixel-en: "Press Start 2P", monospace;   /* 8bit accent (英字・数字) */
  --font-pixel-jp: "DotGothic16", monospace;      /* ドット和文（本文・カード見出し） */
  --font-display: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, sans-serif;  /* 大見出し・シミュレーター用 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

/* Pixel-font elements keep crisp rendering */
.logo-text,
.eyebrow,
.stage-label,
.press-start-hint,
.press-start-banner,
.promise-tag,
.footer-logo,
.feature-num,
.hero-card,
.proof-strip-inner strong,
.proof-grid strong {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
}
.sprite, .feature-pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* Background dot grid */
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 8px 8px;
}
.bg-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 3px
  );
}

/* Accent text — solid green */
.grad-text {
  color: var(--green);
  text-shadow: 2px 2px 0 rgba(0, 125, 28, 0.7);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-text {
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  color: var(--green);
  letter-spacing: 0.04em;
}
.logo-suffix {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted-2);
  letter-spacing: 0.06em;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
}
.header-nav a {
  color: var(--muted);
  transition: color 0.1s;
  font-family: var(--font-display);
}
.header-nav a:hover { color: var(--green); }
.header-cta {
  padding: 10px 18px;
  margin-right: 80px;     /* badge 部分を80px左にずらす */
  background: var(--green);
  color: #000 !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  border: 2px solid var(--green);
  border-radius: 8px;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.header-cta:hover {
  color: #000 !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 228, 54, 0.35);
}
@media (max-width: 720px) {
  .header-nav a:not(.header-cta) { display: none; }
  .logo-suffix { display: none; }
}

/* Buttons — standard design */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.5;
  cursor: pointer;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s, background 0.15s;
  text-align: center;
  white-space: nowrap;
  min-height: 48px;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); opacity: 0.9; }
.button-primary {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}
.button-primary:hover {
  background: var(--green);
  color: #000;
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(0, 228, 54, 0.32);
}
.button-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong, rgba(255,255,255,0.4));
}
.button-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--text); }
.button-large { padding: 18px 36px; font-size: 17px; min-height: 56px; }

/* Eyebrow / heading */
.eyebrow {
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--green);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "▶ ";
  color: var(--yellow);
}
.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 900;
  margin: 0 0 16px;
  color: var(--text);
}
.section-heading h2::after {
  content: "▮";
  display: inline-block;
  margin-left: 4px;
  color: var(--green);
  animation: blink 1s steps(2, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.section-heading.centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.section-lead {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 2;
}

.section { padding: 96px 0; position: relative; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

/* Hero */
.hero { padding: 80px 0 60px; position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;   /* 上揃え：右の商品ステージが上スペースまで使う */
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 900;
  margin: 0 0 24px;
}
.hero-lead {
  color: var(--muted);
  font-size: 15px;
  line-height: 2.0;
  margin: 0 0 32px;
  max-width: 480px;
}
.hero-lead strong {
  color: var(--yellow);
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.hero-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-display);
}
.hero-bullets li { position: relative; padding-left: 18px; }
.hero-bullets li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--yellow);
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* Hero stage — pixel sprite cards */
.hero-stage {
  position: relative;
  aspect-ratio: 4 / 5;     /* 縦長に：上下スペースをより使う */
  max-height: 620px;
  margin-top: -20px;       /* 上端をさらに引き上げ */
}
.hero-card {
  position: absolute;
  width: 150px;
  height: 200px;
  background: #f4f4f4;        /* 商品画像が見やすい淡背景 */
  border: 3px solid var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
  box-shadow: 6px 6px 0 var(--text);
  transition: transform 0.15s;
  overflow: hidden;
}
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  display: block;
}
/* トレカ：画像全体を枠内にぴったり収める（ズームなし・はみ出しなし） */
.hero-card-1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}
.hero-card-label {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 6px;
  white-space: nowrap;
}
/* Collage layout — 7 cards, balanced（クリーン再配置）
   TOP: トレカ / アクキー / アクスタ
   MID: Tシャツ（左アンカー） / トートバッグ（右）
   BOT: 缶バッジ（左小） / アクリルパネル（右大アンカー） */
.hero-card-1 { top: 0%;  left: 0%;  width: 200px; height: 133px; border-color: var(--green);  box-shadow: 6px 6px 0 var(--green); }    /* トレカ（左上・横長） */
.hero-card-6 { top: 62%; left: 4%;  width: 190px; height: 140px; border-color: var(--yellow); box-shadow: 6px 6px 0 var(--yellow); }   /* アクキー（左下へ移動） */
.hero-card-2 { top: 0%;  right: 0%; width: 150px; height: 200px; border-color: var(--cyan);   box-shadow: 6px 6px 0 var(--cyan); }     /* アクスタ（右上・縦長） */
.hero-card-3 { top: 26%; left: 2%;  width: 240px; height: 200px; border-color: var(--yellow); box-shadow: 6px 6px 0 var(--yellow); }   /* Tシャツ（左中・最大アンカー） */
.hero-card-8 { top: calc(34% + 5px); right: calc(1% + 15px); width: 150px; height: 188px; border-color: var(--green);  box-shadow: 6px 6px 0 var(--green); }    /* トートバッグ（右中・下5px左15px） */
.hero-card-4 { top: calc(1% + 20px); left: 40%; width: 140px; height: 140px; border-color: var(--pink);   box-shadow: 6px 6px 0 var(--pink); }    /* 缶バッジ（上中央・下20px） */
.hero-card-5 { bottom: -5px; right: 2%; width: 236px; height: 236px; border-color: var(--red);  box-shadow: 6px 6px 0 var(--red); }     /* アクリルパネル（右下・下5px） */

.hero-card:hover { transform: translate(-3px, -3px); }

@media (max-width: 880px) {
  .hero-stage { display: none; }
}

/* Proof strip */
.proof-strip {
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  padding: 32px 0;
}
.proof-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.proof-strip-inner div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
  border-right: 2px dashed var(--border-dim);
}
.proof-strip-inner div:last-child { border-right: none; }
.proof-strip-inner strong {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--green);
  letter-spacing: 0.02em;
}
.proof-strip-inner span {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-display);
}
@media (max-width: 720px) {
  .proof-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .proof-strip-inner div { border-right: none; border-bottom: 2px dashed var(--border-dim); padding-bottom: 16px; }
}

/* Features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature-card {
  padding: 28px 22px;
  background: var(--surface);
  border: 3px solid var(--text);
  box-shadow: 6px 6px 0 var(--text);
  transition: transform 0.1s, box-shadow 0.1s;
}
.feature-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--green); }
.feature-icon {
  font-family: "Press Start 2P", monospace;
  font-size: 22px;
  color: var(--green);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.feature-card h3 {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--yellow);
  font-family: var(--font-display);
}
.feature-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.9;
}
.feature-card strong { color: var(--green); font-weight: 400; }
@media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } }

/* How */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.how-card {
  padding: 32px 24px;
  background: var(--surface);
  border: 3px solid var(--text);
  text-align: center;
  box-shadow: 6px 6px 0 var(--text);
}
.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  background: var(--green);
  color: #000;
  border: 3px solid var(--text);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.how-card h3 {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--yellow);
  font-family: var(--font-display);
}
.how-card p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.9;
}
@media (max-width: 720px) { .how-grid { grid-template-columns: 1fr; } }

/* Products */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.product-tag {
  padding: 12px 18px;
  background: var(--surface);
  border: 2px solid var(--text);
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-display);
  transition: transform 0.08s, box-shadow 0.08s, background 0.1s;
  box-shadow: 3px 3px 0 var(--text);
}
.product-tag:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--green);
  color: var(--green);
}
.product-tag-digital {
  background: var(--surface);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 3px 3px 0 var(--cyan);
}
.product-tag-digital:hover { box-shadow: 5px 5px 0 var(--cyan); }
.product-note {
  text-align: center;
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
}
.product-note a {
  color: var(--green);
  border-bottom: 2px solid currentColor;
}

/* Simulator */
.simulator {
  max-width: 960px;
  margin: 0 auto;
  background: var(--surface);
  border: 3px solid var(--text);
  padding: 36px;
  box-shadow: 8px 8px 0 var(--green);
}
.sim-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.sim-field { display: flex; flex-direction: column; gap: 8px; }
.sim-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.sim-field select,
.sim-field input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--text);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  outline: none;
  border-radius: 0;
}
.sim-field select:focus,
.sim-field input:focus { border-color: var(--green); }
.sim-readout {
  padding: 12px 14px;
  background: var(--bg);
  border: 2px solid var(--border-dim);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}
.sim-price-input {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 2px solid var(--text);
}
.sim-price-input:focus-within { border-color: var(--green); }
.sim-yen {
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-right: 2px solid var(--text);
  color: var(--yellow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.sim-price-input input {
  background: transparent !important;
  border: none !important;
  flex: 1;
  padding-left: 12px !important;
}
.sim-hint { font-size: 13px; color: var(--muted-2); font-family: var(--font-display); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  background: var(--bg);
  border: 2px solid var(--text);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--green);
  cursor: pointer;
  border: 2px solid var(--text);
  border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--green);
  cursor: pointer;
  border: 2px solid var(--text);
  border-radius: 0;
}

.sim-results {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding-top: 32px;
  border-top: 2px dashed var(--border-dim);
}
.sim-result-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--bg);
  border: 2px solid var(--text);
}
.sim-result-main {
  border-color: var(--green);
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--green);
}
.sim-result-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.sim-result-value {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sim-result-main .sim-result-value { color: var(--green); }
.sim-result-formula {
  font-size: 13px;
  color: var(--muted-2);
  font-family: var(--font-display);
}
.sim-disclaimer {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.8;
  font-family: var(--font-display);
}
@media (max-width: 720px) {
  .simulator { padding: 22px; }
  .sim-controls,
  .sim-results { grid-template-columns: 1fr; }
}

/* Proof section */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.proof-grid article {
  padding: 32px 22px;
  text-align: center;
  background: var(--surface);
  border: 3px solid var(--text);
  box-shadow: 6px 6px 0 var(--yellow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proof-grid strong {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--green);
  letter-spacing: 0.02em;
}
.proof-grid span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  font-family: var(--font-display);
}
.proof-note {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 720px) { .proof-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details {
  border: 2px solid var(--text);
  margin-bottom: 12px;
  background: var(--surface);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 50px 18px 18px;
  font-size: 14px;
  position: relative;
  font-family: var(--font-display);
  color: var(--text);
  transition: color 0.1s, background 0.1s;
}
.faq-list summary:hover { color: var(--green); background: var(--surface-2); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "Q";
  display: inline-block;
  margin-right: 12px;
  color: var(--yellow);
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
}
.faq-list summary::after {
  content: "[+]";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  color: var(--green);
}
.faq-list details[open] summary::after { content: "[-]"; }
.faq-list details p {
  margin: 0;
  padding: 0 18px 20px 38px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
  border-top: 2px dashed var(--border-dim);
  padding-top: 16px;
}
.faq-list details p::before {
  content: "A: ";
  color: var(--cyan);
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  margin-right: 4px;
}

/* Final CTA */
.final-cta { padding: 96px 0 120px; }
.final-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 36px;
  text-align: center;
  background: var(--surface);
  border: 4px solid var(--text);
  box-shadow: 12px 12px 0 var(--green);
}
.final-card h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--text);
}
.final-card h2::after { display: none; }
.final-card p {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 32px;
  line-height: 2;
  font-family: var(--font-display);
}
.final-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .final-card { padding: 40px 22px; }
  .final-card { box-shadow: 6px 6px 0 var(--green); }
}

/* Footer */
.site-footer {
  border-top: 2px solid var(--text);
  padding: 40px 0 80px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--muted-2);
  font-family: var(--font-display);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-logo {
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  color: var(--green);
  letter-spacing: 0.04em;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  font-size: 13px;
  font-family: var(--font-display);
}
.footer-nav a {
  color: var(--muted);
  transition: color 0.15s;
  padding: 4px 8px;
}
.footer-nav a:hover {
  color: var(--green);
}
.footer-copyright {
  margin: 0;
  font-size: 13px;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  padding-top: 16px;
  border-top: 1px dashed var(--border-dim);
}
@media (max-width: 720px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { gap: 10px 28px; }
  .footer-copyright { font-size: 13px; text-align: center; }
}

/* =========================================
   Pixel Cat — CSS Grid pixel art (no SVG)
========================================= */
:root {
  --pixel-cat-black: #444444;  /* 黒背景でも輪郭が見えるダークグレーに調整 */
  --pixel-cat-white: #ffffff;
  --pixel-cat-gray: #b0b0b0;   /* 耳内の影もコントラスト確保のため少し暗めに */
}
.pixel-cat-wrap {
  --pixel-cat-size: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  pointer-events: none;
  vertical-align: middle;
}
.pixel-cat {
  display: grid;
  grid-template-columns: repeat(20, var(--pixel-cat-size));
  grid-template-rows: repeat(20, var(--pixel-cat-size));
  width: calc(20 * var(--pixel-cat-size));
  height: calc(20 * var(--pixel-cat-size));
  image-rendering: pixelated;
  line-height: 0;
}
.pixel-cat__dot {
  display: block;
  width: var(--pixel-cat-size);
  height: var(--pixel-cat-size);
}
.pixel-cat__dot--transparent { background: transparent; }
.pixel-cat__dot--black { background: var(--pixel-cat-black); }
.pixel-cat__dot--white { background: var(--pixel-cat-white); }
.pixel-cat__dot--gray { background: var(--pixel-cat-gray); }

@media (max-width: 720px) {
  .pixel-cat-wrap { --pixel-cat-size: 4px; }
}
@media (max-width: 480px) {
  .pixel-cat-wrap { --pixel-cat-size: 3px; }
}

/* =========================================
   Cat Walking Sprite (4-frame PNG sprite sheet)
   Source: assets/cat-walk-sprite.png  (1672 x 941, 4 frames horizontal)
   1 frame = 418 x 941px
========================================= */
.cat-walk-sprite {
  --cat-w: 74px;   /* 2x size */
  --cat-h: 168px;
  --sheet-w: 296px;  /* = cat-w × 4 */
  display: block;
  width: var(--cat-w);
  height: var(--cat-h);
  background-image: url('cat-walk-sprite.png');
  background-repeat: no-repeat;
  background-size: var(--sheet-w) var(--cat-h);
  background-position: 0 0;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
@keyframes cat-walk-cycle {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--sheet-w) * -1) 0; }
}

/* Walker strip — use sprite cat with frame animation + horizontal scroll */
.walker-strip .cat-walk-sprite {
  position: absolute;
  bottom: 8px;
  left: calc(var(--cat-w) * -1);
  animation:
    walk-across 14s linear infinite,
    cat-walk-cycle 0.6s steps(4) infinite;
}

@media (max-width: 720px) {
  .cat-walk-sprite {
    --cat-w: 60px;
    --cat-h: 134px;
    --sheet-w: 240px;
  }
}
@media (max-width: 480px) {
  .cat-walk-sprite {
    --cat-w: 46px;
    --cat-h: 106px;
    --sheet-w: 184px;
  }
}

/* Walker strip: shop icon walks alongside cat at same speed */
.walker-strip .walker-shop {
  position: absolute;
  bottom: 38px;                    /* 猫の足元から +30px 上げ */
  left: -120px;
  image-rendering: pixelated;
  animation: walk-across 14s linear infinite;  /* 猫と同速 */
  animation-delay: -7s;            /* 半周期ずらして同時に画面内に出る */
  pointer-events: none;
}
@media (max-width: 720px) {
  .walker-strip .walker-shop { width: 56px; height: 47px; }
}
@media (max-width: 480px) {
  .walker-strip .walker-shop { width: 42px; height: 35px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .walker-strip .cat-walk-sprite,
  .walker-strip .walker-shop { animation: none !important; }
}

/* Final CTA: real cat images (replace pixel-cat) */
.final-cat-img {
  display: block;
  width: auto;
  height: 110px;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Hero stage cat images (real PNGs, replacing JS dot cats) */
.hero-cat-img {
  display: block;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* Promise section "YOU" cat image */
.promise-cat-img {
  display: block;
  width: auto;
  height: 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
@media (max-width: 480px) {
  .promise-cat-img { height: 76px; }
}
@media (max-width: 720px) {
  .final-cat-img { height: 90px; }
}
@media (max-width: 480px) {
  .final-cat-img { height: 72px; }
  .final-cat-img:last-of-type { display: none; }   /* 狭幅で1匹だけ残す */
}

/* Mobile fixed CTA */
.mobile-fixed-cta {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 16px;
  background: var(--green);
  color: #000;
  text-align: center;
  z-index: 100;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  border: 2px solid var(--green);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  min-height: 52px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 720px) {
  .mobile-fixed-cta { display: flex; }
  .site-footer { padding-bottom: 100px; }
}

/* =========================================
   Pixel sprites & animations
========================================= */
.sprite {
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
  pointer-events: none;
}

/* Bobbing — gentle up-down with chunky steps */
@keyframes bob-pixel {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.anim-bob { animation: bob-pixel 1.1s steps(2, end) infinite; }

/* Hopping — protagonist bounce */
@keyframes hop-pixel {
  0%, 70%, 100% { transform: translateY(0) scaleY(1); }
  20% { transform: translateY(-14px) scaleY(1); }
  35% { transform: translateY(-18px) scaleY(0.95); }
  55% { transform: translateY(0) scaleY(0.85); }
  60% { transform: translateY(0) scaleY(1.05); }
}
.anim-hop {
  animation: hop-pixel 1.4s steps(6, end) infinite;
  transform-origin: bottom center;
}

/* Coin spin — flip via scaleX, choppy frames */
@keyframes coin-spin {
  0%   { transform: scaleX(1); }
  20%  { transform: scaleX(0.3); }
  40%  { transform: scaleX(-1); }
  60%  { transform: scaleX(-0.3); }
  80%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.anim-spin { animation: coin-spin 1.4s steps(5, end) infinite; }

/* Pulse — heart beating */
@keyframes pulse-pixel {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.18); }
  40% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.anim-pulse { animation: pulse-pixel 1.1s steps(4, end) infinite; transform-origin: center; }

/* Floating — gentle drift for ghosts/slimes */
@keyframes float-pixel {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(4px, -6px); }
  50%      { transform: translate(0, -10px); }
  75%      { transform: translate(-4px, -6px); }
}
.anim-float { animation: float-pixel 3.6s steps(8, end) infinite; }

/* Walker strip — character walks across the page */
.walker-strip {
  position: relative;
  height: 188px;
  overflow: hidden;
  border-top: 2px dashed var(--border-dim);
  border-bottom: 2px dashed var(--border-dim);
  margin: 40px 0 0;
  background:
    repeating-linear-gradient(
      90deg,
      var(--bg) 0 14px,
      var(--surface) 14px 16px
    );
}
@keyframes walk-across {
  0%   { left: -80px; }
  100% { left: calc(100% + 80px); }
}
@keyframes walk-hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.walker-strip .sprite,
.walker-strip .pixel-cat-wrap {
  position: absolute;
  bottom: 10px;
  left: -80px;
  animation: walk-across 14s linear infinite;
}
.walker-strip .sprite > * {
  /* dummy — child hop handled via animation on parent's child wrapping not possible easily */
}
.walker-strip .anim-walk,
.walker-strip .pixel-cat-wrap.anim-walk {
  animation: walk-across 14s linear infinite, walk-hop 0.5s steps(2, end) infinite;
}

/* Section heading with side sprites */
.section-heading.with-sprite { position: relative; }
.sprite-deco-left,
.sprite-deco-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.sprite-deco-left { left: 6%; }
.sprite-deco-right { right: 6%; }
@media (max-width: 880px) {
  .sprite-deco-left, .sprite-deco-right { display: none; }
}

/* Final CTA sprites */
.final-sprites {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 18px;
  min-height: 70px;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .anim-bob, .anim-hop, .anim-spin, .anim-pulse, .anim-float,
  .walker-strip .anim-walk { animation: none !important; }
}

/* =========================================
   Hero sub & caption (new copy structure)
========================================= */
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.8vw, 28px);
  color: var(--text);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.hero-sub strong {
  color: var(--yellow);
  font-weight: 900;
}
.hero-caption {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 28px;
  line-height: 1.8;
  border-left: 3px solid var(--green);
  padding-left: 10px;
}
.sp-only { display: none; }
@media (max-width: 720px) { .sp-only { display: inline; } }

/* =========================================
   Simple Promise section (❷)
========================================= */
.promise-section {
  padding: 80px 0;
  background: var(--surface);
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}
.promise-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.promise-side {
  text-align: center;
  padding: 28px 20px;
  background: var(--bg);
  border: 3px solid var(--text);
  box-shadow: 6px 6px 0 var(--text);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.promise-side-you { box-shadow: 6px 6px 0 var(--cyan); }
.promise-side-fanme { box-shadow: 6px 6px 0 var(--green); }
.promise-actor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.promise-tag {
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 0.1em;
  border: 2px solid currentColor;
  padding: 4px 8px;
}
.promise-logo {
  font-family: "Press Start 2P", monospace;
  font-size: 22px;
  color: var(--green);
  text-shadow: 3px 3px 0 #007d1c;
  letter-spacing: 0.05em;
}
.promise-text {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.85;
}
.promise-text strong { color: var(--yellow); font-weight: 400; }
.promise-arrows {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  color: var(--green);
}
.promise-arrows span {
  animation: arrow-blink 0.9s steps(2, end) infinite;
}
.promise-arrows span:nth-child(2) { animation-delay: -0.3s; }
.promise-arrows span:nth-child(3) { animation-delay: -0.6s; }
@keyframes arrow-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@media (max-width: 720px) {
  .promise-grid { grid-template-columns: 1fr; }
  .promise-arrows { flex-direction: row; justify-content: center; transform: rotate(90deg); padding: 8px 0; }
}

/* =========================================
   Proof strip v2 (10万 + 職種タグ)
========================================= */
.proof-strip-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 8px 0;
}
.proof-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.proof-headline strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900;
  color: var(--green);
  letter-spacing: -0.01em;
}
.proof-headline span {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.proof-headline span b {
  font-weight: 900;
  color: var(--yellow);
  font-size: 1.15em;
}
.proof-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 920px;
}
.role-tag {
  font-family: var(--font-display);
  font-size: 13px;
  padding: 8px 14px;
  background: var(--bg);
  border: 2px solid var(--text);
  color: var(--text);
  box-shadow: 3px 3px 0 var(--cyan);
}
.role-tag:nth-child(2n) { box-shadow: 3px 3px 0 var(--pink); }
.role-tag:nth-child(3n) { box-shadow: 3px 3px 0 var(--yellow); }

/* How grid — 4 columns variant */
.how-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 960px) {
  .how-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .how-grid-4 { grid-template-columns: 1fr; }
}

/* =========================================
   Hero — Title Plaque & PRESS START hint
========================================= */
.title-plaque {
  position: relative;
  display: inline-block;
  padding: 20px 24px 24px;
  margin-bottom: 18px;
  border: 3px solid var(--text);
  background: var(--bg);
  box-shadow: 6px 6px 0 var(--green);
}
.title-plaque::before,
.title-plaque::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--green);
  border: 2px solid var(--text);
}
.title-plaque::before { top: -7px; left: -7px; }
.title-plaque::after { bottom: -7px; right: -7px; }
.title-plaque .eyebrow { margin-bottom: 14px; }
.title-plaque .hero-sub { margin-top: 14px; margin-bottom: 0; }

.press-start-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 16px;
  padding: 6px 10px;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.1em;
  animation: blink 1.2s steps(2, end) infinite;
}
.press-start-hint .ps-arrow { color: var(--yellow); }

/* =========================================
   Feature pixel icons
========================================= */
.feature-icon-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--border-dim);
}
.feature-pixel {
  flex-shrink: 0;
}
.feature-num {
  font-family: "Press Start 2P", monospace;
  font-size: 22px;
  color: var(--green);
  letter-spacing: 0.02em;
}
/* hide original .feature-icon (we replaced it) */
.feature-card .feature-icon { display: none; }

/* =========================================
   How it works — Stage Map
========================================= */
.stage-map {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 1100px;
  margin: 0 auto;
}
.stage-card {
  flex: 1 1 0;
  padding: 24px 18px;
  background: var(--surface);
  border: 3px solid var(--text);
  box-shadow: 5px 5px 0 var(--text);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.stage-card-goal {
  border-color: var(--green);
  box-shadow: 5px 5px 0 var(--green);
  background: var(--bg);
}
/* Clickable stage card (STAGE 01 -> signup) */
a.stage-card-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
a.stage-card-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--green);
  filter: brightness(1.05);
}
a.stage-card-link:active {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 var(--green);
}
.stage-label {
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border: 2px solid var(--yellow);
}
.stage-card-goal .stage-label {
  color: #000;
  background: var(--green);
  border-color: var(--green);
}
.stage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--bg);
  border: 2px solid var(--border-dim);
  image-rendering: pixelated;
}
.stage-card h3 {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}
.stage-card p {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}
.stage-path {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  color: var(--green);
  width: 26px;
  flex-shrink: 0;
}
.stage-path span {
  animation: blink 0.9s steps(2, end) infinite;
}
@media (max-width: 880px) {
  .stage-map { flex-direction: column; max-width: 480px; }
  .stage-path { width: auto; height: 26px; transform: rotate(90deg); margin: 4px 0; }
}

/* =========================================
   Final CTA — PRESS START banner
========================================= */
.press-start-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(14px, 2.4vw, 20px);
  color: var(--green);
  letter-spacing: 0.15em;
  animation: blink 1s steps(2, end) infinite;
}
.press-start-banner .ps-arrow {
  color: var(--yellow);
  font-size: 1em;
}

/* =========================================
   Product Sample Gallery (placeholder)
========================================= */
.sample-gallery-wrap {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 2px dashed var(--border-dim);
}
.sample-gallery-heading {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 720px;
}
.sample-gallery-heading h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--text);
}
.sample-gallery-heading .section-lead {
  color: var(--muted-2);
  font-size: 13px;
}
.sample-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .sample-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.sample-card {
  background: var(--surface);
  border: 3px solid var(--text);
  box-shadow: 5px 5px 0 var(--text);
  transition: transform 0.1s, box-shadow 0.1s;
}
.sample-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--green);
}
.sample-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;   /* 白っぽい背景：商品画像が映える */
  border-bottom: 3px solid var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sample-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 12px;
  box-sizing: border-box;
}
/* プレースホルダー枠だけは斜線パターン */
.sample-card[data-status="placeholder"] .sample-image {
  background:
    repeating-linear-gradient(
      45deg,
      var(--bg) 0 10px,
      #1a1a1a 10px 20px
    );
}
.sample-card[data-status="placeholder"] .sample-image::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 4px double var(--border-dim);
  pointer-events: none;
}
.placeholder-mark {
  position: relative;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  color: var(--green);
  text-align: center;
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  background: var(--bg);
  border: 2px solid var(--green);
  z-index: 1;
}
.sample-card[data-status="placeholder"] .sample-image {
  /* 後で実画像に差し替える際は image を入れて bg を解除 */
}
.sample-card[data-status="placeholder"] .sample-meta {
  color: var(--muted-2);
}
.sample-card[data-status="placeholder"] .sample-meta::before {
  content: "🚧 ";
  color: var(--yellow);
  font-family: var(--font-display);
}
.sample-meta {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
}
.sample-product {
  font-size: 13px;
  color: var(--text);
}

/* 横長バナー：これ以外も制作OK（ギャラリーの下） */
.sample-extra-banner {
  margin-top: 28px;
  padding: 24px 32px;
  background: var(--bg);
  border: 3px solid var(--green);
  box-shadow: 6px 6px 0 var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-family: var(--font-display);
}
.sample-extra-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--green);
  line-height: 1.35;
  white-space: nowrap;
}
.sample-extra-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
  justify-content: center;
}
.sample-extra-list li {
  position: relative;
  padding-left: 18px;
}
.sample-extra-list li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--yellow);
  font-size: 12px;
  top: 3px;
}
.sample-extra-cta {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: var(--yellow);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sample-extra-banner { flex-direction: column; gap: 14px; padding: 22px 18px; text-align: center; }
  .sample-extra-title { white-space: normal; }
}
.sample-creator {
  font-size: 13px;
  color: var(--muted);
}

/* =========================================
   RESPONSIVE — xs (small phones ≤480px)
========================================= */
@media (max-width: 480px) {
  /* Body / section spacing */
  .wrap { padding: 0 16px; }
  .section { padding: 56px 0; }

  /* Header */
  .site-header .logo-suffix { display: none; }
  .header-cta { padding: 8px 14px; font-size: 13px; margin-right: 0; }
  .logo-text { font-size: 14px; }

  /* Hero — tighter title plaque, smaller text */
  .hero { padding: 56px 0 32px; }
  .title-plaque { padding: 16px 14px 18px; box-shadow: 4px 4px 0 var(--green); }
  .title-plaque::before, .title-plaque::after { width: 8px; height: 8px; }
  .title-plaque::before { top: -6px; left: -6px; }
  .title-plaque::after { bottom: -6px; right: -6px; }
  .hero-copy h1 { font-size: 24px; line-height: 1.45; }
  .hero-sub { font-size: 16px; }
  .hero-caption { font-size: 13px; }
  .press-start-hint { font-size: 13px; margin: 14px 0 12px; }
  .hero-actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-actions .button { width: 100%; padding: 14px 20px; font-size: 14px; }
  .hero-bullets { gap: 8px 14px; font-size: 13px; }

  /* Walker strip — smaller sprite, shorter strip */
  .walker-strip { height: 124px; margin-top: 28px; }
  .walker-strip .sprite-nmi {
    width: 42px !important;
    height: 42px !important;
    bottom: 6px;
  }
  .walker-strip .pixel-cat-wrap {
    --pixel-cat-size: 2px !important;
    bottom: 6px;
  }
  .promise-side .pixel-cat-wrap {
    --pixel-cat-size: 3px !important;
  }
  .stage-card .pixel-cat-wrap {
    --pixel-cat-size: 3px !important;
  }
  .final-sprites .pixel-cat-wrap {
    --pixel-cat-size: 3px !important;
  }
  .final-sprites .pixel-cat-wrap:last-of-type { display: none; }
  /* Hero floating cats on xs — slightly smaller */
  .hero-stage .pixel-cat-wrap { --pixel-cat-size: 3px !important; }

  /* Promise section — tighter, smaller Nmi */
  .promise-section { padding: 56px 0; }
  .promise-side {
    padding: 22px 14px;
    min-height: 0;
    box-shadow: 4px 4px 0 var(--cyan);
  }
  .promise-side-fanme { box-shadow: 4px 4px 0 var(--green); }
  .promise-side .sprite-nmi {
    width: 70px !important;
    height: 70px !important;
  }
  .promise-logo { font-size: 18px; }
  .promise-tag { font-size: 13px; }
  .promise-text { font-size: 13px; line-height: 1.75; }

  /* Proof strip — horizontal scroll for role tags */
  .proof-strip { padding: 24px 0; }
  .proof-headline strong { font-size: 22px; }
  .proof-headline span { font-size: 14px; }
  .proof-roles {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .proof-roles::-webkit-scrollbar { display: none; }
  .role-tag {
    flex-shrink: 0;
    font-size: 13px;
    padding: 7px 12px;
  }

  /* Features — tighter cards */
  .feature-card { padding: 22px 18px; box-shadow: 4px 4px 0 var(--text); }
  .feature-pixel { width: 44px !important; height: 44px !important; }
  .feature-num { font-size: 18px; }
  .feature-icon-wrap { gap: 10px; padding-bottom: 10px; margin-bottom: 14px; }
  .feature-card h3 { font-size: 15px; }
  .feature-card p { font-size: 13px; line-height: 1.7; }

  /* Stage map — tighter cards, smaller sprite */
  .stage-card { padding: 18px 14px; box-shadow: 4px 4px 0 var(--text); }
  .stage-card-goal { box-shadow: 4px 4px 0 var(--green); }
  .stage-label { font-size: 13px; padding: 3px 8px; }
  .stage-icon { width: 64px; height: 64px; }
  .stage-card h3 { font-size: 13px; }
  .stage-card p { font-size: 13px; line-height: 1.65; }
  .stage-card .sprite-nmi { width: 56px !important; height: 56px !important; }

  /* Products tags */
  .product-tag { font-size: 13px; padding: 10px 14px; }

  /* Sample gallery — 2 cols on xs (already) but smaller cards */
  .sample-gallery { gap: 10px; }
  .sample-card { box-shadow: 3px 3px 0 var(--text); }
  .placeholder-mark { font-size: 13px; padding: 6px 8px; }
  .sample-meta { padding: 10px 12px; }
  .sample-product { font-size: 13px; }
  .sample-creator { font-size: 13px; }

  /* Simulator — tighter padding */
  .simulator { padding: 18px 16px; box-shadow: 6px 6px 0 var(--green); }
  .sim-controls { gap: 18px; }
  .sim-label { font-size: 13px; }
  .sim-readout { font-size: 16px; }
  .sim-result-card { padding: 18px; }
  .sim-result-label { font-size: 13px; }
  .sim-result-value { font-size: 24px; }
  .sim-disclaimer { font-size: 13px; }

  /* Proof grid (3 cards) - already 1 col on <720, tighter padding */
  .proof-grid article { padding: 24px 18px; box-shadow: 4px 4px 0 var(--yellow); }
  .proof-grid strong { font-size: 22px; }

  /* FAQ */
  .faq-list summary { padding: 16px 44px 16px 14px; font-size: 13px; }
  .faq-list summary::before { font-size: 13px; margin-right: 8px; }
  .faq-list summary::after { font-size: 13px; right: 12px; }
  .faq-list details p { padding: 16px 14px 18px 30px; font-size: 13px; }

  /* Final CTA — drop second Nmi, keep Nmi+heart */
  .final-cta { padding: 56px 0 96px; }
  .final-card { padding: 32px 18px; box-shadow: 6px 6px 0 var(--green); }
  .final-sprites { gap: 16px; min-height: 0; margin-bottom: 14px; }
  .final-sprites .sprite-nmi { width: 64px !important; height: 64px !important; }
  .final-sprites .sprite-nmi:last-of-type { display: none; }   /* hide 2nd Nmi on xs */
  .press-start-banner { font-size: 13px; gap: 10px; }
  .final-card h2 { font-size: 22px; line-height: 1.45; }
  .final-card p { font-size: 13px; }
  .final-actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .final-actions .button { width: 100%; }

  /* Mobile fixed CTA — larger touch target */
  .mobile-fixed-cta {
    padding: 14px 18px;
    font-size: 14px;
    min-height: 50px;
  }

  /* Footer */
  .site-footer { padding: 24px 0 96px; }
  .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
}

/* =========================================
   RESPONSIVE — md tweaks (721 〜 960px)
   Stage map: 2x2 grid instead of horizontal flow
========================================= */
@media (min-width: 721px) and (max-width: 960px) {
  .stage-map {
    flex-wrap: wrap;
    max-width: 600px;
  }
  .stage-card { flex: 1 1 calc(50% - 16px); min-width: 200px; }
  .stage-path { display: none; }   /* 2x2 grid doesn't need arrows */
}

/* =========================================
   Accessibility — prefer-reduced-motion already covered;
   add :focus-visible outlines for keyboard nav
========================================= */
.button:focus-visible,
.header-cta:focus-visible,
.mobile-fixed-cta:focus-visible,
.product-note a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
.faq-list summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 0;
}
.sim-field select:focus-visible,
.sim-field input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* =========================================
   Tap Heart — タップでハートがプチュン
========================================= */
.tap-heart {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  image-rendering: pixelated;
  will-change: transform, opacity;
  animation: tap-heart-pop 0.7s steps(8, end) forwards;
}
@keyframes tap-heart-pop {
  0%   { transform: scale(0) rotate(0deg);                          opacity: 0; }
  18%  { transform: scale(1.35) rotate(calc(var(--rot) * 0.4));     opacity: 1; }
  36%  { transform: scale(0.9)  rotate(var(--rot));                 opacity: 1; }
  55%  { transform: scale(1.05) rotate(var(--rot))
                    translate(calc(var(--drift) * 0.4), -14px);     opacity: 1; }
  100% { transform: scale(0.7)  rotate(var(--rot))
                    translate(var(--drift), -56px);                 opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tap-heart { display: none !important; }
}