/* よるの余白 公式サイト - 夜のテーマ */
:root {
  --night-900: #141a2e;
  --night-800: #1c2440;
  --night-700: #273256;
  --moon: #f2d492;
  --moon-soft: #f7e7bd;
  --ink: #23283b;
  --ink-soft: #565d75;
  --paper: #faf8f3;
  --card: #ffffff;
  --line: #e3e0d5;
  --accent: #5b6fb4;
}

* { letter-spacing: .01em; }

body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
}

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

/* ヘッダー */
.site-header, header.bg-light {
  background: var(--night-900);
}
.site-header .navbar, header.bg-light .navbar { padding-top: .8rem; padding-bottom: .8rem; }
.navbar-brand {
  color: #fff !important;
  font-weight: 800;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.navbar-brand img { border-radius: 22%; }
.nav-link { color: #cfd6ee !important; font-weight: 500; }
.nav-link:hover { color: var(--moon) !important; }
.navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-toggler-icon { filter: invert(1); }

/* ページ見出し（下層ページ） */
.page-header {
  background: linear-gradient(160deg, var(--night-900), var(--night-700));
  color: #fff;
  padding: 3.2rem 0 2.6rem;
}
.page-header h1 { font-weight: 800; font-size: 2rem; margin: 0; }

/* ヒーロー */
.hero {
  background:
    radial-gradient(ellipse 60% 45% at 78% 18%, rgba(242, 212, 146, .20), transparent 60%),
    linear-gradient(165deg, var(--night-900) 0%, var(--night-800) 55%, var(--night-700) 100%);
  color: #eef0fa;
  padding: 4.5rem 0 4rem;
}
.hero-inner { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.hero-icon { width: 132px; height: 132px; border-radius: 28px; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.eyebrow {
  color: var(--moon);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.hero h1 { font-weight: 800; font-size: 2.3rem; line-height: 1.45; margin-bottom: 1rem; }
.hero-lead { color: #c6cde6; max-width: 34em; }
.hero-notes { margin-top: 1.4rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.hero-notes span {
  border: 1px solid rgba(242, 212, 146, .45);
  color: var(--moon-soft);
  border-radius: 999px;
  padding: .25rem .9rem;
  font-size: .88rem;
}
.btn-primary {
  background: var(--moon);
  border-color: var(--moon);
  color: var(--night-900);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--moon-soft);
  border-color: var(--moon-soft);
  color: var(--night-900);
}
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); }

/* セクション */
.section { padding: 3.6rem 0; }
.section-soft { background: #f1eee4; }
.section-contrast { background: var(--night-900); color: #e8ebf7; }
.section-contrast .eyebrow { color: var(--moon); }
.section-heading { max-width: 40em; margin-bottom: 2.2rem; }
.section h2 { font-weight: 800; font-size: 1.65rem; line-height: 1.5; }

/* 機能カード */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
}
.feature-icon {
  display: inline-block;
  color: var(--accent);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .12em;
  margin-bottom: .5rem;
}
.feature-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .5rem; }
.feature-card p { color: var(--ink-soft); margin: 0; font-size: .96rem; }

/* Plusプラン */
.plan-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: center; }
@media (max-width: 768px) { .plan-layout { grid-template-columns: 1fr; } }
.plan-panel {
  background: var(--night-800);
  border: 1px solid rgba(242, 212, 146, .35);
  border-radius: 18px;
  padding: 1.8rem;
}
.plan-label { color: var(--moon); font-weight: 700; margin-bottom: .2rem; }
.plan-price { font-size: 1.7rem; font-weight: 800; }
.plan-price span { font-size: .95rem; color: #aab4d4; font-weight: 500; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: .3rem 0 .3rem 1.6rem; position: relative; }
.check-list li::before {
  content: "―";
  position: absolute; left: 0;
  color: var(--moon);
  font-weight: 800;
}
.section-contrast p { color: #c6cde6; }

/* サポートリンク */
.support-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.support-links a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.support-links a:hover { border-color: var(--moon); background: #fffdf4; }
.contact-note { margin-top: 1.4rem; color: var(--ink-soft); }

/* 下層ページ本文 */
main h2 { font-weight: 800; font-size: 1.35rem; margin-bottom: .8rem; }
main h3 { font-weight: 700; font-size: 1.08rem; margin-top: 1.4rem; margin-bottom: .5rem; }
.guide h2 { border-left: 5px solid var(--moon); padding-left: .7rem; }
.card { border-color: var(--line); border-radius: 14px; }

/* フッター */
.site-footer, footer.bg-dark {
  background: var(--night-900) !important;
  color: #aab4d4;
  padding: 2rem 0;
  text-align: center;
}
.site-footer a, footer.bg-dark a { color: #cfd6ee; }
.site-footer p, footer.bg-dark p { margin-bottom: .3rem; }