/* Sleepgod 公式サイト共通スタイル — 「月・暖色」
   海から昇る満月。プラム〜温かい茶のグラデーション。
   トップページ(index) / サポート(support) / プライバシー(privacy) で共有。 */

:root{
  --bg-top:#261a2c;
  --bg-mid:#3a2630;
  --bg-bot:#4a302a;
  --ink:#f8eedc;
  --ink-dim:#cbb69a;
  --ink-faint:#9d8871;
  --gold:#e8c88a;
  --gold-soft:#f6e0b0;
  --line:rgba(232,200,138,.18);
  --card:rgba(58,42,44,.55);
  --wrap:1120px;
  --sans:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --serif:"Shippori Mincho","Yu Mincho",serif;
  --display:"Cormorant Garamond",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg-top);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(38,26,44,.82),rgba(38,26,44,0));
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:.85rem;letter-spacing:.08em;color:var(--ink-dim)}
.nav-links a:hover{color:var(--gold-soft)}
.nav-cta{
  padding:9px 22px;border:1px solid var(--gold);border-radius:999px;
  color:var(--gold-soft);transition:.3s;
}
.nav-cta:hover{background:var(--gold);color:#2e201a}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  background:
    radial-gradient(90% 60% at 72% 74%,rgba(232,196,150,.30),transparent 62%),
    radial-gradient(120% 80% at 50% 45%,rgba(150,96,80,.35),transparent 70%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 55%,var(--bg-bot) 100%);
}
.sky{position:absolute;inset:0}
.star{
  position:absolute;left:var(--x);top:var(--y);
  width:2px;height:2px;border-radius:50%;background:var(--gold-soft);
  opacity:.5;animation:tw var(--d) ease-in-out infinite alternate;
}
@keyframes tw{from{opacity:.18;transform:scale(.8)}to{opacity:.85;transform:scale(1.25)}}

.moon{
  position:absolute;right:10%;bottom:-14%;
  width:min(40vw,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fdf6e4,#f2ddb2 62%,#e6c98f);
  box-shadow:0 0 120px 50px rgba(244,224,180,.28),0 0 260px 120px rgba(232,180,120,.16);
  animation:rise 2.4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{transform:translateY(80px);opacity:0}to{transform:none;opacity:1}}

.hero-inner{position:relative;z-index:2;padding:120px 0 200px;text-align:center}
.badge{
  display:inline-block;margin:0 0 32px;
  padding:8px 24px;border:1px solid var(--gold);border-radius:999px;
  font-size:.78rem;letter-spacing:.14em;color:var(--gold-soft);
}
.logotype{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.4rem,10vw,7rem);letter-spacing:.02em;
  margin:0;line-height:1;
}
.tagline{
  font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.9rem);
  letter-spacing:.1em;margin:28px 0 20px;color:var(--ink);
}
.lede{color:var(--ink-dim);font-size:.95rem;letter-spacing:.04em;margin:0 0 44px}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;padding:16px 40px;border-radius:999px;
  font-size:.95rem;font-weight:500;letter-spacing:.06em;transition:.3s;
}
.btn-primary{background:var(--gold);color:#2e201a}
.btn-primary:hover{background:var(--gold-soft);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--ink-dim)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-lg{padding:20px 56px;font-size:1.05rem}

.waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;z-index:1}

/* ---------- sections ---------- */
.section{padding:clamp(88px,12vw,140px) 0;background:var(--bg-bot)}
.band{background:linear-gradient(180deg,#4a302a,#3a2630)}
.eyebrow{
  font-family:var(--display);font-size:.9rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;text-align:center;
}
.h2{
  font-family:var(--serif);font-weight:500;text-align:center;
  font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:.08em;margin:0 0 16px;
}
.h2-left{text-align:left}
.sub{text-align:center;color:var(--ink-dim);font-size:.92rem;margin:0 0 56px}

.grid-4{
  display:grid;gap:20px;margin-top:56px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  padding:38px 32px;border:1px solid var(--line);border-radius:18px;
  background:var(--card);transition:.35s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(232,200,138,.42)}
.ico{width:44px;height:44px;margin-bottom:22px;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.card h3{font-size:1.05rem;font-weight:500;letter-spacing:.06em;margin:0 0 12px}
.card p{margin:0;font-size:.87rem;color:var(--ink-dim);line-height:1.9}

.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.chips li{
  display:flex;align-items:center;gap:12px;
  padding:16px 26px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);font-size:.95rem;letter-spacing:.06em;
}
.chips em{font-style:normal;font-size:.74rem;color:var(--ink-faint);letter-spacing:.08em}
.dot{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--gold);flex:none}

.quote{
  max-width:760px;margin-inline:auto;padding:clamp(40px,6vw,64px);
  border:1px solid var(--line);border-radius:22px;background:var(--card);
}
.quote .eyebrow{text-align:left}
.quote-body{color:var(--ink-dim);font-size:.95rem;margin:24px 0 20px}
.quote-note{color:var(--ink-faint);font-size:.78rem;margin:0}

.download{background:linear-gradient(180deg,#3a2630,#261a2c)}
.center{text-align:center}
.price{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:.08em;margin:0 0 12px}
.price strong{font-weight:500;color:var(--gold-soft)}
.download .btn{margin-top:16px}
.hint{color:var(--ink-faint);font-size:.8rem;margin-top:28px}

/* ---------- 下層ページ（サポート / プライバシー） ---------- */
.page{
  min-height:100svh;
  padding:140px 0 100px;
  background:
    radial-gradient(80% 50% at 78% 4%,rgba(232,196,150,.16),transparent 60%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 60%,var(--bg-bot) 100%);
}
.article{width:min(100% - 48px,720px);margin-inline:auto}
.article .eyebrow{text-align:left}
.page-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,4.5vw,2.4rem);letter-spacing:.08em;margin:0 0 12px;
}
.updated{color:var(--ink-faint);font-size:.8rem;margin:0 0 48px}
.article h2{
  font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:.06em;
  color:var(--gold-soft);margin:56px 0 14px;padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.article p{color:var(--ink-dim);font-size:.93rem;margin:0 0 18px}
.article strong{color:var(--ink);font-weight:500}
.article a{color:var(--gold-soft);border-bottom:1px solid var(--line);transition:.25s}
.article a:hover{border-color:var(--gold)}
.qa{
  padding:26px 28px;border:1px solid var(--line);border-radius:16px;
  background:var(--card);margin:0 0 16px;
}
.qa p{margin:0}
.qa .q{color:var(--ink);font-weight:500;margin:0 0 8px}
.back{display:inline-block;margin-top:56px;font-size:.88rem;color:var(--ink-dim)}
.back:hover{color:var(--gold-soft)}

/* ---------- footer ---------- */
.footer{padding:64px 0 48px;background:#241826;border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.foot-brand{font-family:var(--display);font-size:1.4rem;letter-spacing:.06em;margin:0}
.foot-links{display:flex;gap:28px;font-size:.85rem;color:var(--ink-dim);flex-wrap:wrap;justify-content:center}
.foot-links a:hover{color:var(--gold-soft)}
.foot-note{color:var(--ink-faint);font-size:.75rem;line-height:1.9;margin:0}

@media(max-width:720px){
  .nav-links a:not(.nav-cta){display:none}
  .moon{right:-6%;bottom:-10%;width:62vw}
  .hero-inner{padding:110px 0 180px}
  .lede br{display:none}
  .page{padding:120px 0 80px}
}