/* ==========================
   ゆきどけ 完全版スタイル（桜＋なごり雪／広域グラデーション）
   変更点:
   - 春先の空をひと段階「深い青」へ（視認性UP）
   - 桜/雪に軽いドロップシャドウを付与（背景とのコントラストUP）
   - 保守用コメントと小さな最適化
   ========================== */
:root{
  /* 多段グラデーション: 「少し深い春空」方向へ色味を調整 */
  --sky-0: #eaf5ff; /* 旧 #f4fbff */
  --sky-1: #e2f0ff; /* 旧 #eef7ff */
  --sky-2: #d6ebff; /* 旧 #e6f3ff */
  --sky-3: #c8e4ff; /* 旧 #dcf0ff */
  --sky-4: #b9dcff; /* 旧 #d0eaff */
  --sky-5: #a9d3ff; /* 旧 #c4e4ff */
  --sky-6: #95c8ff; /* 旧 #b9dfff → やや深い青へ */

  --ink: #0f2b46;
  --blue: #2a6f97;
  --line: #cfe8ff;
  --radius: 14px;

  /* ナビの視認性維持（濃い空に負けない） */
  --nav-bg: rgba(255,255,255,.78);
  --nav-ink: #174567;
  --nav-hover: #e7f2ff;
}

/* ダークモードはコントラストを保ちつつ少しだけ明るく */
@media (prefers-color-scheme: dark){
  :root{
    --sky-0: #0e1a2b;
    --sky-1: #0b1626;
    --sky-2: #0a1523;
    --sky-3: #0c1930;
    --sky-4: #0f213a;
    --sky-5: #13304d;
    --sky-6: #194163;

    --ink: #e7f2ff;
    --blue: #8fc5ff;
    --line: #24415f;
    --nav-bg: rgba(9,15,24,.74);
    --nav-ink: #d6ebff;
    --nav-hover: rgba(80,120,170,.22);
  }
}

html, body { height: 100%; }
body{
  margin: 0;
  color: var(--ink);
  /* グラデーションは固定でバンディング低減（深い青でも滑らか） */
  background:
    linear-gradient(175deg,
      var(--sky-0) 0%,
      var(--sky-1) 14%,
      var(--sky-2) 30%,
      var(--sky-3) 47%,
      var(--sky-4) 65%,
      var(--sky-5) 83%,
      var(--sky-6) 100%);
  background-attachment: fixed;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* 超薄ノイズで縞軽減（※負荷の低いラジアルの少点配置） */
body::before{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.02) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 0%,   rgba(0,0,0,.02) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.015) 0 1px, transparent 2px);
  background-size: 280px 280px, 300px 300px, 260px 260px;
  z-index: 0;
}

:focus-visible{ outline: 3px solid #90caf9; outline-offset: 3px; }

/* スキップリンク：キーボード/スクリーンリーダー支援 */
.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: #ffffff; color: var(--blue);
  padding: 8px 12px; border-radius: 6px; z-index: 9999;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* レイアウト */
.container{
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 18px 64px;
  position: relative;
  z-index: 1;
  /* 初回レンダリング最適化（長文でも初期描画をスキップ可能） */
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px; /* だいたいの高さ仮置き */
}

/* タイトル群 */
.site-title{
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 48px);
  margin: 28px 0 4px;
  color: var(--blue);
  text-align: center;
  letter-spacing: 0.05em;
}
.sublogo{
  display: block;
  font-family: "Cardo", serif;
  font-weight: 700;
  font-size: clamp(16px, 2.8vw, 22px);
  color: var(--ink);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .9;
}
.tagline{
  text-align: center;
  margin: 0 0 16px;
  color: #3f6283;
  font-size: clamp(13px, 2.4vw, 16px);
}

/* 目立つピル型ナビ */
.nav{
  position: sticky; top: 0.5rem;
  display: flex; flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px;
  margin: 8px auto 24px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  width: fit-content;
  will-change: transform; /* スクロール時の合成最適化 */
}
.nav-item{
  color: var(--nav-ink);
  font-weight: 700;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.nav-item:hover,
.nav-item:focus{
  background: var(--nav-hover);
  border-color: var(--blue);
  outline: none;
}
.nav-item:active{ transform: translateY(1px); }

/* セクション */
section{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 3.4vw, 24px);
  margin: 0 0 20px;
}
@media (prefers-color-scheme: dark){
  section{ background: rgba(8,13,22,.75); }
}

h2{
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: clamp(18px, 3.2vw, 24px);
  margin: 0 0 12px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--blue);
}

p{ margin: 0 0 12px; }
ul{ margin: 0 0 12px 20px; }

.btn{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.btn:hover,.btn:focus{ filter: brightness(1.05); outline: none; }

footer{
  text-align: center;
  color: #4a6a88;
  font-size: 14px;
  margin-top: 26px;
}
@media (prefers-color-scheme: dark){
  footer{ color: #c2daff; }
}

/* ==============================
   背景アニメ: 桜（少なめ）＆ なごり雪（小粒中心）
   目的:
   - 深い空色の上でも粒が潰れず映える
   - 負荷を上げない（粒数は従来のまま）
   ============================== */
.sakura, .snow{
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}

/* 桜: ドロップシャドウで縁をふわっと強調（1px/負荷軽） */
.sakura span{
  position: absolute; top: -8%;
  width: var(--size, 12px); height: var(--size, 12px);
  background: radial-gradient(circle at 30% 30%, #ff9bb6 0 46%, transparent 47%);
  border-radius: 50% 70% 50% 70%;
  opacity: var(--alpha, .9);
  /* blur と影を一括指定（合成段数を抑える） */
  filter: drop-shadow(0 0 1px rgba(255,255,255,.65)) blur(var(--blur, 0px));
  animation: sakura-fall var(--dur, 22s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
@keyframes sakura-fall{
  to{ transform: translateY(110vh) translateX(var(--drift, 40px)) rotate(var(--rot, 360deg)); }
}

/* 雪: ほんのり縁どりで青空に埋もれない */
.snow span{
  position: absolute; top: -8%;
  width: var(--size, 4px); height: var(--size, 4px);
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 60%, transparent 61%);
  border-radius: 50%;
  opacity: var(--alpha, .75);
  filter: drop-shadow(0 0 1px rgba(255,255,255,.5)) blur(var(--blur, 1px));
  animation: snow-fall var(--dur, 18s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
@keyframes snow-fall{
  to{ transform: translateY(110vh) translateX(var(--drift, 20px)); }
}

/* ダークモードでも淡く映える色味に */
@media (prefers-color-scheme: dark){
  .sakura span{
    background: radial-gradient(circle at 30% 30%, #ff8aa6 0 46%, transparent 47%);
    opacity: var(--alpha, .86);
  }
  .snow span{
    background: radial-gradient(circle, rgba(255,255,255,.92) 0 60%, transparent 61%);
    opacity: var(--alpha, .68);
  }
}

/* 動きに敏感な方への配慮（OS設定に従い停止） */
@media (prefers-reduced-motion: reduce){
  .sakura, .snow{ display: none; }
}