/* モグの紹介ページ。
   色・角丸・余白は DESIGN.md のトークン。書体は「丸ゴシック」— DESIGN.md の SF Pro Rounded に対応する
   Web の書体として Zen Maru Gothic を使う(Hiragino Sans は角ゴシックで、指定と食い違っていた)。
   骨格は 1 枚もの、トーンは静か。派手さではなく「文字の大きさ」「余白」「昼と夜の落差」で見せる。 */
:root {
  color-scheme: light dark;
  --ink: #3B3A3E;
  --ink-soft: #67646F;
  --surface: #FBF7EE;
  --accent: #4F5D8C;
  --blush: #F2A9A0;
  --bg: #EFEAF7;
  --night-bg: #232331;
  --night-ink: #D9D5E3;
  --night-ink-soft: #A8A4B8;
  --night-accent: #9AA6D8;
  --radius: 24px;
  --line: rgba(79, 93, 140, .14);
  --star: rgba(79, 93, 140, .3);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #D9D5E3;
    --ink-soft: #A8A4B8;
    --surface: #2E2E3E;
    --accent: #9AA6D8;
    --bg: #232331;
    --line: rgba(154, 166, 216, .18);
    --star: rgba(154, 166, 216, .38);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }
section { padding: clamp(72px, 9vw, 112px) 0; }
a { color: inherit; }

/* 夜空の星。昼はほとんど見えず、夜の段でだけはっきりする(意味のある差) */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--star);
  animation: drift linear infinite;
}
@keyframes drift {
  from { transform: translateY(10vh); opacity: 0; }
  12%, 88% { opacity: 1; }
  to { transform: translateY(-110vh); opacity: 0; }
}
.bar-wrap, main, footer { position: relative; z-index: 1; }

/* ヘッダー */
.bar-wrap {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .bar-wrap { background: rgba(239, 234, 247, .85); }
}
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 680px; margin: 0 auto; padding: 8px 24px;
}
.brand {
  display: flex; align-items: center; gap: 9px; min-height: 48px;
  font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; text-decoration: none;
}
.brand img { width: 32px; height: 32px; }
.bar-count { color: var(--ink-soft); font-size: .8rem; }
.bar .cta {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 22px; font-size: .9rem; border-radius: 999px;
}

/* ボタン */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; border: 0; border-radius: 18px;
  background: var(--accent); color: #FDFBF6;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
  padding: 14px 34px; text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.cta:active { transform: scale(.985); opacity: .9; }
.cta.quiet {
  background: transparent; color: var(--ink-soft);
  font-weight: 500; font-size: .92rem; min-height: 48px; padding: 8px 16px;
  text-decoration: underline; text-underline-offset: 4px;
}

/* ── ヒーロー ───────────────────────────── */
.hero { text-align: center; padding: clamp(48px, 8vw, 88px) 0 clamp(72px, 11vw, 128px); }
.hero-figure { position: relative; display: grid; place-items: center; margin-bottom: 24px; }
/* 光だまり — DESIGN.md がキャラ背後にだけ認めている唯一のグラデーション */
.hero-figure::before {
  content: ''; position: absolute; width: min(560px, 92vw); aspect-ratio: 1;
  background: radial-gradient(circle, var(--surface) 0%, transparent 66%);
  opacity: .8;
}
.hero .mogu {
  position: relative; width: clamp(180px, 34vw, 260px); height: auto;
  cursor: pointer; animation: breathe 5.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.028); }
}
h1 {
  font-size: clamp(1.95rem, 5.2vw, 3.05rem);
  font-weight: 900; line-height: 1.42; letter-spacing: -.03em;
  margin: 0 0 20px;
}
.hero .lead {
  color: var(--ink-soft); font-size: clamp(.96rem, 1.9vw, 1.08rem);
  margin: 0 auto 36px; max-width: 26em; line-height: 1.95;
}
.hero .sub { display: block; margin-top: 14px; }

/* 見出し。器が細いので、導入は中央に置いて画面の真ん中に軸を通す */
.intro { text-align: center; margin-bottom: clamp(40px, 6vw, 64px); }
.eyebrow {
  color: var(--accent); font-size: .82rem; font-weight: 700;
  letter-spacing: .16em; margin: 0 0 14px;
}
h2 {
  font-size: clamp(1.65rem, 4.4vw, 2.6rem);
  font-weight: 900; line-height: 1.42; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.section-note { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ── 3 ステップ:カードをやめて、大きな数字の縦の流れに ── */
.steps { display: grid; gap: clamp(36px, 5vw, 56px); }
.step { display: grid; grid-template-columns: clamp(56px, 9vw, 84px) 1fr; gap: clamp(18px, 3vw, 32px); }
.step-no {
  font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 900; line-height: 1;
  color: var(--accent); opacity: .28; letter-spacing: -.04em;
}
.step h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 900; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.95; }

/* ── できること:塗りつぶしカードをやめて、線で仕切る ── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.tile { padding: clamp(24px, 3.4vw, 34px) 0; border-bottom: 1px solid var(--line); }
.tile:nth-child(odd) { padding-right: clamp(16px, 3vw, 32px); border-right: 1px solid var(--line); }
.tile:nth-child(even) { padding-left: clamp(16px, 3vw, 32px); }
.tile h3 { margin: 0 0 6px; font-size: 1.06rem; font-weight: 900; letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.85; }

/* ── モグのこと:ことばを主役の大きさに(語彙がこのプロダクトの中身) ── */
.voices { display: grid; gap: clamp(40px, 6vw, 68px); }
.voice { display: grid; grid-template-columns: clamp(88px, 15vw, 128px) 1fr; gap: clamp(20px, 3.4vw, 36px); align-items: start; }
.voice img { width: 100%; height: auto; }
.voice h3 {
  margin: 0 0 10px; font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; color: var(--accent);
}
.voice .line {
  margin: 0 0 12px; font-size: clamp(1.2rem, 3.1vw, 1.7rem);
  font-weight: 900; line-height: 1.62; letter-spacing: -.015em;
}
.voice p:last-child { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.9; }

/* ── やらないこと:カードをやめて、大きな否定の連なりに ── */
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.nots li { padding: clamp(22px, 3.2vw, 30px) 0; border-bottom: 1px solid var(--line); }
.nots strong {
  display: block; font-size: clamp(1.05rem, 2.5vw, 1.32rem);
  font-weight: 900; line-height: 1.6; letter-spacing: -.015em; margin-bottom: 4px;
}
.nots span { color: var(--ink-soft); font-size: .91rem; line-height: 1.85; }

/* ── 夜の段:ここだけ全幅で夜モードの配色に落とす(アプリが 23 時にやることと同じ) ── */
.night {
  background: var(--night-bg); color: var(--night-ink);
  text-align: center; position: relative; overflow: hidden;
}
.night .eyebrow { color: var(--night-accent); }
.night h2 { color: var(--night-ink); font-size: clamp(1.8rem, 5.2vw, 3.1rem); }
.night p { color: var(--night-ink-soft); margin: 0 auto; max-width: 30em; font-size: 1rem; line-height: 2; }
.night img { width: clamp(120px, 22vw, 172px); height: auto; margin-bottom: 28px; }
/* 夜は星がはっきり見える */
.night-sky { position: absolute; inset: 0; pointer-events: none; }
.night-sky i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(217, 213, 227, .45);
}
.night .wrap { position: relative; z-index: 1; }

/* ── 締め ── */
.closing { text-align: center; }
.closing img { width: clamp(120px, 22vw, 168px); height: auto; margin-bottom: 20px; }
.closing h2 { margin-bottom: 28px; }

/* ウェイトリスト */
.waitlist { margin: clamp(40px, 6vw, 60px) auto 0; max-width: 440px; text-align: left; }
.waitlist-label { display: block; font-size: .92rem; margin-bottom: 10px; }
.waitlist-row { display: flex; gap: 8px; }
.waitlist-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px;
  font-size: 1rem; font-family: inherit; background: var(--surface); color: var(--ink);
  min-height: 56px;
}
.waitlist-input::placeholder { color: var(--ink-soft); opacity: .75; }
.waitlist-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.waitlist-button { padding: 14px 22px; white-space: nowrap; }
.waitlist-note { color: var(--ink-soft); font-size: .8rem; margin: 10px 0 0; line-height: 1.8; }
.waitlist.done .waitlist-row { display: none; }
.waitlist.done .waitlist-label { color: var(--accent); font-weight: 700; }

footer {
  text-align: center; color: var(--ink-soft); font-size: .84rem;
  padding: 56px 24px 64px; border-top: 1px solid var(--line);
}
footer a { color: var(--ink-soft); }
footer .tagline { margin: 0 0 12px; font-weight: 700; color: var(--ink); }
footer nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
footer nav a { min-height: 48px; display: inline-flex; align-items: center; }

/* 入場 */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.33,0,.15,1); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .tile:nth-child(odd) { padding-right: 0; border-right: 0; }
  .tile:nth-child(even) { padding-left: 0; }
  .bar-count { display: none; }
  .voice { grid-template-columns: 72px 1fr; gap: 18px; }
  .waitlist-row { flex-direction: column; }
  .waitlist-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .mogu { animation: none; }
  .sky { display: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  .cta { transition: none; }
}