/* ==================== THEME：海月ノア ====================
  見た目はこのファイルだけで決まる（全ページ共通）
  ライト＝浅瀬 / ダーク＝深海
========================================================== */
:root {
  /* 配色 */
  --accent: #2b9fc4;
  --accent-2: #9a8cff;
  --on-accent: #fff;
  --bg: #f1f8fb;
  --bg-2: #e5f1f7;
  --surface: #fff;
  --text: #0f2638;
  --muted: #587185;
  --line: #d3e5ee;
  --star: #5fb9d6;
  /* 質感：やわらかい影・細い線・カプセル型 */
  --shadow: 0 16px 44px -20px rgb(16 70 110 / .32);
  --border-w: 1px;
  --radius: 20px;
  --visual-radius: 999px;
  /* フォント：欧文セリフ＋明朝の見出し */
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Zen Old Mincho", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-accent: "Zen Old Mincho", "Yu Mincho", serif;
  --en-heavy: 600;
  --en-light: 400;
  /* モチーフ：くらげ＋泡。背景は泡がのぼる */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24'%3E%3Cpath d='M3 12a9 8.5 0 0 1 18 0q-1.5 1.6-3 0-1.5 1.6-3 0-1.5 1.6-3 0-1.5 1.6-3 0-1.5 1.6-3 0-1.5 1.6-3 0z'/%3E%3Cpath d='M8 14.5c-1 2 1 3.8 0 6.5M12 14.5c-1 2.4 1 4.4 0 7.5M16 14.5c-1 2 1 3.8 0 6.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --motif-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7.6 10a4.8 4.8 0 0 1 3-3.2'/%3E%3C/svg%3E");
  --particle: var(--motif-2);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #47c4e6;
    --bg: #06121e;
    --bg-2: #0a1a2a;
    --surface: #0e2135;
    --text: #e2f1f8;
    --muted: #8ea8ba;
    --line: #1b3349;
    --star: #9fe6ff;
    --shadow: 0 16px 44px -20px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

/* サイト固有の微調整 */
.nav { font-size: 15px; }
.hero h1 { font-weight: 500; letter-spacing: .12em; }
.sec-head h2, .cta h2, .page-hero h1 { font-style: italic; letter-spacing: .02em; }
.romaji { letter-spacing: .6em; }
.visual .deco { top: 11%; right: 50%; translate: 50% 0; width: 54px; height: 54px; opacity: .9; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 10%, transparent)); }