/* ==========================================================
   猫の夜会（midnightclowder.com）の見た目　たたき台 2026-10-31
   ----------------------------------------------------------
   テーマ：真夜中の空・月の金色・猫の目の光。
   色を変えたいときは「① 色とフォント」だけを書きかえます。
   ========================================================== */

/* ① 色とフォント ------------------------------------------ */
:root {
  --night: #0E1430;        /* 夜空（背景） */
  --night-2: #1A2350;      /* 少し明るい夜空 */
  --moon: #F6E7B0;         /* 月の色 */
  --gold: #E8C26A;         /* 見出し・アクセント */
  --text: #E9E6F5;         /* 本文の文字 */
  --text-sub: #A9A7C4;     /* うすい文字 */
  --line: rgba(232, 194, 106, .25);
  --font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", Georgia, serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
}

/* ② ページ全体 -------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 2;
}
a { color: var(--gold); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; }

/* ③ メインビジュアル -------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 96px 20px 0;
  min-height: 92vh;
  background: linear-gradient(180deg, #060A1E 0%, var(--night-2) 70%, var(--night) 100%);
  display: flex; flex-direction: column; align-items: center;
}
/* 星：点を並べた背景 */
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent),
    radial-gradient(1px 1px at 63% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 16%, #fff, transparent),
    radial-gradient(1px 1px at 88% 44%, #fff, transparent),
    radial-gradient(1px 1px at 6% 56%, #fff, transparent),
    radial-gradient(1px 1px at 52% 52%, #fff, transparent);
  opacity: .8;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }
/* 月 */
.moon {
  position: absolute; top: 56px; right: 14%;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 60px 18px rgba(246, 231, 176, .35);
}
.hero-en, .hero h1, .hero-lead { position: relative; }
.hero-en { font-family: var(--font-en); font-style: italic; font-size: 22px; color: var(--gold); margin: 0; letter-spacing: .08em; }
.hero h1 { font-size: 56px; margin: 4px 0 20px; letter-spacing: .2em; }
.hero-lead { color: var(--text); font-family: var(--font-head); font-size: 18px; margin: 0; }
.rooftop { position: relative; width: calc(100% + 40px); max-width: none; margin: auto -20px 0; display: block; }

/* ④ 各セクション共通 -------------------------------------- */
.section { max-width: 760px; margin: 0 auto; padding: 72px 20px; }
.section h2 { font-size: 26px; margin: 0 0 24px; text-align: center; }
.section h2 .en { display: block; font-family: var(--font-en); font-style: italic; font-weight: 500; font-size: 18px; color: var(--gold); letter-spacing: .1em; }
.section > p { text-align: center; }

/* ⑤ たのしみ（3つの箱） ----------------------------------- */
.features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.features li { border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; background: rgba(26, 35, 80, .55); }
.features .num { font-family: var(--font-en); color: var(--gold); font-size: 22px; }
.features h3 { font-size: 18px; margin: 4px 0 6px; }
.features p { margin: 0; font-size: 14px; color: var(--text-sub); line-height: 1.8; }

/* ⑥ 配信 -------------------------------------------------- */
.stores { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.store { border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 6px 20px; font-size: 14px; }
.to-app { text-align: center; }

/* ⑦ フッター ---------------------------------------------- */
.site-footer { text-align: center; font-size: 13px; color: var(--text-sub); padding: 32px 20px; border-top: 1px solid var(--line); }
.site-footer p { margin: 4px 0; }

/* ⑧ スマホ用 ---------------------------------------------- */
@media (max-width: 640px) {
  .pc { display: none; }
  .hero { padding-top: 72px; min-height: 64vh; }
  .moon { width: 70px; height: 70px; top: 32px; right: 8%; }
  .hero h1 { font-size: 40px; }
  .hero-lead { font-size: 16px; }
  .section { padding: 52px 16px; }
  .features { grid-template-columns: 1fr; }
}