:root {--sun:#FFD060; --sun-warm:#FFB347; --sun-glow:rgba(255, 210, 80, 0.4); --sky-1:#3a7fc1; --sky-2:#5fa3d8; --sky-3:#8dc4eb; --rain:rgba(210, 238, 255, 0.55); --text:#eaf5ff; --text-soft:#a8d4f0; --muted:#86afd0; --border:rgba(140, 210, 255, 0.2); --surface:rgba(20, 55, 95, 0.55); --font:'Noto Sans JP', sans-serif; --serif:'Noto Serif JP', serif;}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0;}
html { scroll-behavior:smooth;}
body {font-family:var(--font); color:var(--text); line-height:1.85; font-size:15px; -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden; position:relative; background:
 radial-gradient(ellipse at 8% 52%, rgba(4,12,28,0.28) 0%, transparent 44%),
 radial-gradient(ellipse at 92% 50%, rgba(4,12,28,0.22) 0%, transparent 40%),
 radial-gradient(ellipse at 50% 94%, rgba(2,8,18,0.36) 0%, transparent 42%),
 linear-gradient(172deg,
 #0e2040 0%, #163568 12%, #205a8e 24%,
 #2c78b8 36%, #3e9ad4 50%, #58b8e8 65%,
 #82d0f6 80%, #b0e8fb 100%
 ); background-attachment:fixed;}
body::before {content:""; position:fixed; inset:0; background:
 radial-gradient(ellipse at 72% 8%, rgba(255,242,150,0.52) 0%, transparent 34%),
 radial-gradient(ellipse at 72% 8%, rgba(255,225,110,0.26) 0%, transparent 54%); animation:sun-breathe 22s ease-in-out infinite; pointer-events:none; z-index:0;}
@keyframes sun-breathe {0%,100% { opacity:0.80; transform:scale(1);}
50% { opacity:1.0; transform:scale(1.06);}
}
body::after {content:""; position:fixed; inset:0; background:repeating-linear-gradient(
 96deg,
 transparent 0px, transparent 3px,
 rgba(200,235,255,0.018) 3px, rgba(200,235,255,0.018) 4px
 ); animation:rain-angle 0.8s linear infinite; pointer-events:none; z-index:0; transition:opacity 3s ease;}
body.rain-stopped::after {opacity:0; animation:none;}
@keyframes rain-angle {0% { background-position:0 0;}
100% { background-position:0 40px;}
}
img { max-width:100%; height:auto; display:block;}
a { color:inherit; text-decoration:none;}
p { color:var(--text-soft); font-size:15px; line-height:1.9;}
.weather-wrap {position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.rain-wrap { position:absolute; inset:-60px; transition:opacity 3s ease;}
.rain-drop {position:absolute; top:-80px; background:linear-gradient(to bottom, transparent 0%, rgba(190,225,255,0.1) 20%, var(--rain) 100%); border-radius:0 0 3px 3px; animation:rain-fall linear infinite; transform:rotate(9deg); will-change:transform;}
.rain-far { width:1px;}
.rain-mid { width:1.5px;}
.rain-near { width:2px; background:linear-gradient(to bottom, transparent 0%, rgba(210,238,255,0.60) 70%, rgba(255,235,180,0.45) 100%);}
.rain-front { width:2.5px; background:linear-gradient(to bottom, transparent 0%, rgba(200,235,255,0.55) 60%, rgba(255,230,150,0.55) 100%);}
@keyframes rain-fall {0% { transform:rotate(9deg) translateY(0);}
100% { transform:rotate(9deg) translateY(115vh);}
}
.cloud-shape {position:absolute; left:-520px; background:radial-gradient(ellipse at center, rgba(255,252,245,0.88) 0%, rgba(220,240,255,0.30) 55%, transparent 75%); border-radius:50%; animation:cloud-drift linear infinite; box-shadow:25px -8px 0 12px rgba(255,252,245,0.25), -15px -4px 0 8px rgba(255,248,240,0.18); will-change:transform;}
.cloud-fluffy {position:absolute; left:-400px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,255,255,0.60) 0%, rgba(240,248,255,0.32) 50%, transparent 72%); animation:cloud-drift linear infinite; box-shadow:30px -12px 0 14px rgba(255,255,255,0.28), -22px -6px 0 10px rgba(255,255,255,0.22);}
.cloud-rain {position:absolute; left:-500px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(80,105,140,0.50) 0%, rgba(60,85,125,0.22) 55%, transparent 75%); animation:cloud-drift linear infinite; filter:blur(4px);}
.cloud-cirrus {position:absolute; left:-250px; height:28px; background:linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.10) 30%, rgba(255,248,220,0.14) 50%, transparent 100%); border-radius:50%; animation:cloud-drift linear infinite; filter:blur(5px);}
@keyframes cloud-drift {0% { transform:translateX(0);}
100% { transform:translateX(calc(100vw + 640px));}
}
.bubble-wrap { position:absolute; inset:0;}
.water-bubble {position:absolute; border-radius:50%; border:1px solid rgba(255, 235, 180, 0.5); background:radial-gradient(circle at 35% 35%, rgba(255,248,220,0.50) 0%, rgba(200,235,255,0.15) 60%, transparent 100%); animation:bubble-rise ease-in infinite;}
@keyframes bubble-rise {0% { transform:translateY(0) scale(1); opacity:0;}
10% { opacity:0.8;}
80% { opacity:0.5;}
100% { transform:translateY(-55vh) scale(0.55); opacity:0;}
}
.caustic-wrap { position:absolute; inset:0;}
.caustic-blob {position:absolute; background:radial-gradient(ellipse at center, rgba(255,230,120,0.22) 0%, rgba(255,200,80,0.08) 50%, transparent 100%); border-radius:50%; animation:caustic-ripple ease-in-out infinite alternate; filter:blur(8px);}
@keyframes caustic-ripple {0% { transform:scale(1) rotate(0deg); opacity:0.3;}
33% { transform:scale(1.4) rotate(10deg); opacity:0.8;}
66% { transform:scale(0.8) rotate(-6deg); opacity:0.4;}
100% { transform:scale(1.2) rotate(14deg); opacity:0.65;}
}
.sunray {position:absolute; background:linear-gradient(to bottom, rgba(255,230,100,0.34) 0%, rgba(255,220,100,0.12) 25%, rgba(255,255,255,0.03) 55%, transparent 100%); border-radius:2px; transform-origin:top center; animation:sunray-pulse ease-in-out infinite; filter:saturate(1.25);}
.ray-1 { right:24%; top:-2%; width:6px; height:80vh; transform:rotate( 22deg); animation-duration:8s; animation-delay:0s;}
.ray-2 { right:28%; top:-2%; width:3px; height:70vh; transform:rotate( 10deg); animation-duration:11s; animation-delay:-3s; opacity:.75;}
.ray-3 { right:20%; top:-2%; width:4px; height:75vh; transform:rotate( 35deg); animation-duration:10s; animation-delay:-6s; opacity:.80;}
.ray-4 { right:15%; top:-2%; width:2px; height:60vh; transform:rotate( 50deg); animation-duration:14s; animation-delay:-9s; opacity:.55;}
.ray-5 { right:38%; top:-2%; width:5px; height:66vh; transform:rotate( -6deg); animation-duration:9s;  animation-delay:-2s;  opacity:.62;}
.ray-6 { right:46%; top:-2%; width:3px; height:55vh; transform:rotate(-19deg); animation-duration:13s; animation-delay:-6s;  opacity:.42;}
.ray-7 { right:30%; top:-2%; width:7px; height:70vh; transform:rotate(  8deg); animation-duration:8s;  animation-delay:-3s;  opacity:.78;}
.ray-8 { right:54%; top:-2%; width:2px; height:46vh; transform:rotate(-32deg); animation-duration:16s; animation-delay:-10s; opacity:.32;}
@keyframes sunray-pulse { 0%,100% { opacity:.08;}
50% { opacity:.38;}
}
.rainbow-arc {position:fixed; width:100vw; height:80vh; left:0; top:0;
 background:radial-gradient(ellipse at 50% 100%,
  transparent 30%,
  rgba(255,60,60,0.92) 34%, rgba(255,60,60,0.92) 39%,
  rgba(255,150,0,0.92) 39%, rgba(255,150,0,0.92) 44%,
  rgba(220,220,0,0.92) 44%, rgba(220,220,0,0.92) 49%,
  rgba(0,200,80,0.92) 49%, rgba(0,200,80,0.92) 54%,
  rgba(30,120,255,0.92) 54%, rgba(30,120,255,0.92) 59%,
  rgba(130,50,255,0.92) 59%, rgba(130,50,255,0.92) 64%,
  transparent 68%
 ); pointer-events:none; filter:blur(10px); opacity:0; z-index:2;}
.rainbow-arc.rainbow-persistent {animation:rainbow-fadein 2.5s ease forwards, rainbow-glow 8s ease-in-out 2.5s infinite;}
@keyframes rainbow-fadein { 0% { opacity:0;}
100% { opacity:1;}
}
@keyframes rainbow-glow { 0%,100% { opacity:.88; filter:blur(8px);}
50% { opacity:1; filter:blur(6px);}
}
.lightning {position:absolute; width:3px; background:linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(200,225,255,0.70), rgba(150,200,255,0.40), transparent); pointer-events:none; animation:lightning-bolt 0.2s ease-out forwards; border-radius:1px; box-shadow:0 0 6px rgba(200,225,255,0.9), 0 0 18px rgba(150,200,255,0.6), 0 0 40px rgba(100,180,255,0.3);}
@keyframes lightning-bolt {0% { opacity:0; transform:scaleY(0); transform-origin:top;}
8% { opacity:1; transform:scaleY(1);}
55% { opacity:0.2;}
100% { opacity:0;}
}
.lightning-glow {position:fixed; inset:0; background:rgba(180,220,255,0.09); pointer-events:none; animation:glow-flash 0.35s ease-out forwards; z-index:10;}
@keyframes glow-flash { 0% { opacity:1;}
60% { opacity:.15;}
100% { opacity:0;}
}
.water-ripple {position:absolute; transform:translate(-50%,-50%); width:0; height:0; border:1.5px solid rgba(255,240,180,0.6); border-radius:50%; pointer-events:none; animation:ripple-expand 1.2s ease-out forwards; z-index:5;}
@keyframes ripple-expand {0% { width:0; height:0; opacity:.9; border-color:rgba(255,240,180,0.8);}
50% { border-color:rgba(180,220,255,0.5);}
100% { width:260px; height:260px; opacity:0; border-color:rgba(180,220,255,0);}
}
.header-drip {position:absolute; bottom:-18px; width:3px; height:18px; background:linear-gradient(to bottom, rgba(200,235,255,0.75) 0%, rgba(255,240,200,0.80) 60%, rgba(255,240,200,0.20) 100%); border-radius:0 0 50% 50%; animation:drip-fall 1.8s ease-in forwards; pointer-events:none; box-shadow:0 2px 6px rgba(255,230,150,0.3);}
@keyframes drip-fall {0% { transform:scaleY(0) translateY(0); opacity:1;}
30% { transform:scaleY(1) translateY(0); opacity:1;}
100% { transform:scaleY(1) translateY(36px); opacity:0;}
}
header {background:rgba(18, 40, 68, 0.80); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(180,225,255,0.2); position:sticky; top:0; z-index:100; overflow:visible;}
header::after {content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,
 transparent 0%, rgba(100,180,240,0.5) 15%,
 rgba(255,230,120,0.85) 40%, rgba(255,255,255,0.9) 50%,
 rgba(255,230,120,0.85) 60%, rgba(100,180,240,0.5) 85%, transparent 100%
 ); background-size:200% 100%; animation:shimmer-line 4s linear infinite;}
@keyframes shimmer-line { 0% { background-position:0% 0%;}
100% { background-position:200% 0%;}
}
.header-inner {max-width:1280px; margin:0 auto; padding:0 16px 0 20px; height:108px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; z-index:1;}
.site-title { display:flex; align-items:center; flex-shrink:0;}
.logo {max-height:64px; width:auto; filter:
 drop-shadow(0 0 10px rgba(255,220,100,0.5))
 drop-shadow(0 0 30px rgba(100,180,240,0.25))
 brightness(1.10); animation:logo-shimmer 7s ease-in-out infinite;}
@keyframes logo-shimmer {0%,100% { filter:drop-shadow(0 0 10px rgba(255,220,100,0.5)) drop-shadow(0 0 30px rgba(100,180,240,0.25)) brightness(1.10);}
50% { filter:drop-shadow(0 0 20px rgba(255,240,160,0.65)) drop-shadow(0 0 50px rgba(100,200,240,0.30)) brightness(1.15);}
}
.nav { display:flex; justify-content:flex-end; margin-top:0; min-width:0; flex:1;}
.nav ul { list-style:none; padding:0; display:flex; gap:3px; align-items:center; flex-wrap:nowrap; justify-content:flex-end;}
.nav li.nav-user a { width:auto !important; padding:0 8px !important; gap:6px; max-width:120px; overflow:hidden; text-overflow:ellipsis;}
.nav a {display:inline-flex; align-items:center; justify-content:center; width:auto; padding:0 6px; height:38px; font-size:11px; font-family:var(--font); letter-spacing:.04em; color:rgba(230,245,255,0.92); border:1px solid transparent; border-radius:20px; background:transparent; text-decoration:none; transition:color .25s, background .25s, border-color .25s, box-shadow .25s, letter-spacing .2s; white-space:nowrap; font-weight:500;}
.nav a:hover {color:#1a2e44; background:linear-gradient(135deg, var(--sun-warm), var(--sun)); border-color:rgba(255,210,80,0.6); box-shadow:0 4px 18px var(--sun-glow); letter-spacing:.12em;}
.container {max-width:900px; margin:60px auto; padding:0 24px; text-align:center; position:relative; z-index:1;}
h2 {font-family:var(--serif); font-size:clamp(20px, 3vw, 30px); font-weight:300; letter-spacing:.08em; color:var(--text); margin-bottom:20px; background:linear-gradient(135deg, #dff0fa 0%, #9dd4f0 25%, #ffe8a0 50%, #ffc848 65%, #9dd4f0 85%, #dff0fa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:250% 250%; animation:title-gradient 8s ease infinite, title-glow 6s ease-in-out infinite;}
@keyframes title-gradient { 0% { background-position:0% 50%;}
50% { background-position:100% 50%;}
100% { background-position:0% 50%;}
}
@keyframes title-glow { 0%,100% { filter:drop-shadow(0 2px 14px rgba(100,180,240,0.3));}
50% { filter:drop-shadow(0 2px 28px rgba(255,200,60,0.45));}
}
h3 {font-family:var(--serif); font-size:18px; font-weight:300; letter-spacing:.06em; color:var(--text); margin-bottom:14px;}
.btn {display:inline-flex; align-items:center; gap:6px; padding:12px 28px; font-size:12px; font-family:var(--font); font-weight:400; letter-spacing:.12em; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:background .25s, color .25s, box-shadow .3s, transform .25s, letter-spacing .22s; text-decoration:none; position:relative; overflow:hidden; font-feature-settings:"palt";}
.btn::after {content:""; position:absolute; top:-50%; left:-70%; width:50%; height:200%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.30), transparent); transform:skewX(-20deg); transition:left .5s;}
.btn:hover::after { left:140%;}
.btn:hover { letter-spacing:.18em;}
.btn:active {transform:scale(0.95) translateY(1px) !important; transition:transform 0.08s, letter-spacing 0.1s !important;}
.btn-primary {background:linear-gradient(135deg, var(--sky-1), var(--sky-2)); color:#fff; border-color:var(--sky-2); box-shadow:0 4px 20px rgba(58,127,193,0.4);}
.btn-primary:hover {background:linear-gradient(135deg, var(--sky-2), var(--sky-3)); color:#0d2a44; box-shadow:0 6px 30px rgba(100,180,240,0.6); transform:translateY(-2px);}
.btn-blue,
.btn.accent-blue,
.accent-blue {background:linear-gradient(135deg, var(--sun-warm), var(--sun)); color:#1a2e44; border-color:rgba(255,210,80,0.6); font-weight:500; box-shadow:0 4px 20px var(--sun-glow);}
.btn-blue:hover,
.btn.accent-blue:hover,
.accent-blue:hover {background:linear-gradient(135deg, var(--sun), #ffe880); box-shadow:0 6px 30px rgba(255,210,80,0.65); color:#1a2e44; transform:translateY(-2px);}
.btn-outline {background:transparent; color:rgba(255,235,160,0.9); border-color:rgba(255,210,80,0.45);}
.btn-outline:hover {background:rgba(255,210,80,0.1); box-shadow:0 0 24px rgba(255,210,80,0.35); transform:translateY(-2px);}
.btn-sub {display:inline-flex; align-items:center; padding:10px 24px; font-size:13px; font-family:var(--font); letter-spacing:.06em; color:#fff; border:1.5px solid rgba(180,225,255,0.7); border-radius:4px; background:rgba(100,180,240,0.22); text-decoration:none; transition:background .25s, box-shadow .25s, color .2s, border-color .2s; font-weight:600; text-shadow:0 1px 6px rgba(80,160,240,0.5);}
.btn-sub:hover {background:rgba(100,180,240,0.38); border-color:#fff; color:#fff; box-shadow:0 0 22px rgba(100,180,240,0.45); letter-spacing:.10em; text-shadow:0 0 14px rgba(200,235,255,0.8);}
.article-card {background:rgba(20,55,95,0.55); border:1px solid var(--border); border-radius:0; padding:0; margin-top:40px; text-align:left; position:relative; overflow:hidden; transition:border-color .35s, box-shadow .35s, transform .35s; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.article-card::before {content:""; position:absolute; top:0; left:-65%; width:45%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,240,160,0.06), rgba(255,255,255,0.05), transparent); transform:skewX(-15deg); animation:card-sunlight 9s ease-in-out infinite; pointer-events:none;}
@keyframes card-sunlight { 0%,100% { left:-65%; opacity:0;}
25% { opacity:1;}
50% { left:125%; opacity:0;}
}
.article-card:hover {border-color:rgba(255,210,80,0.45); box-shadow:0 8px 36px rgba(255,210,80,0.16), 0 0 60px rgba(100,180,240,0.08); transform:translateY(-4px);}
.article-card .btn,
.article-card .accent-blue {display:block; margin:16px auto 0; width:fit-content;}
.article-card h2,
.article-card h3 {font-family:var(--serif); font-weight:300; margin-bottom:16px; animation:title-glow 7s ease-in-out infinite;}
.article-card p { color:var(--text-soft);}
.article-img {max-width:100%; width:auto; height:auto; max-height:480px; display:block; margin:20px auto; border-radius:4px; border:1px solid var(--border); filter:brightness(0.85) saturate(1.15) hue-rotate(5deg); box-shadow:0 4px 20px rgba(0,0,0,0.25); transition:filter .35s;}
.article-card:hover .article-img { filter:brightness(0.95) saturate(1.25) hue-rotate(5deg);}
.article { max-width:700px; margin:0 auto; text-align:left;}
.article p { margin-bottom:16px;}
.article-body { color:var(--text-soft); line-height:2; font-size:16px;}
.article-body p { font-size:16px; }
.article-body ul { padding-left:1.4em; margin:8px 0; }
.article-body li { margin-bottom:4px; }
.md-table-wrap { overflow-x:auto; margin:24px 0; }
.md-table { width:100%; border-collapse:collapse; font-size:14px; }
.md-table th { padding:10px 16px; text-align:left; font-weight:400; letter-spacing:.06em; color:var(--sun); border-bottom:1px solid rgba(255,210,80,0.3); background:rgba(20,55,95,0.4); }
.md-table td { padding:9px 16px; border-bottom:1px solid var(--border); color:var(--text-soft); vertical-align:top; }
.md-table tr:last-child td { border-bottom:none; }
.md-table tr:hover td { background:rgba(100,180,240,0.05); }
.md-table strong { color:var(--text); }
.article-nav {border-top:1px solid var(--border); margin-top:40px; padding-top:20px; max-width:700px; margin-left:auto; margin-right:auto; display:flex; justify-content:space-between; align-items:center;}
.article-nav span { color:var(--muted); font-size:13px; font-style:italic;}
.about {padding:80px 24px; text-align:center; position:relative; z-index:1;}
.about-inner { max-width:750px; margin:0 auto;}
.about h2 {font-size:clamp(22px, 3vw, 32px); margin-bottom:12px;}
.about h2::after {content:""; display:block; width:40px; height:2px; background:linear-gradient(90deg, var(--sky-1), var(--sun), var(--sky-3)); margin:12px auto 40px; border-radius:1px; box-shadow:0 0 10px rgba(255,210,80,0.5);}
.about p { font-size:15px; color:var(--text-soft); line-height:2; margin-bottom:20px;}
.about p.last-text {margin-top:36px; padding:22px 28px; background:linear-gradient(135deg, rgba(58,127,193,0.12), rgba(255,210,80,0.07)); border-left:3px solid var(--sun); color:var(--text); line-height:2; font-weight:300; text-align:left;}
.map-container {max-width:900px; margin:40px auto; padding:32px 28px; background:rgba(20,55,95,0.55); border:1px solid var(--border); border-radius:4px; position:relative; z-index:1;}
.map-title {font-family:var(--serif); font-size:18px; font-weight:300; letter-spacing:.1em; color:var(--text); margin-bottom:6px;}
.map-description { font-size:13px; color:var(--muted); margin-bottom:18px;}
#map {height:520px; width:100%; border-radius:4px; border:1px solid var(--border); filter:brightness(0.82) saturate(0.88) hue-rotate(195deg);}
form {max-width:580px; margin:30px auto; padding:36px 40px; background:rgba(20,55,95,0.55); border:1px solid var(--border); border-radius:4px; position:relative; z-index:1; text-align:left;}
form::before {content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--sky-1), var(--sky-2), var(--sun), rgba(255,255,220,0.9), var(--sky-2), transparent); background-size:200% 100%; animation:shimmer-line 5s linear infinite;}
form label {display:block; font-size:11px; letter-spacing:.14em; color:var(--muted); margin-bottom:6px; font-weight:400; text-transform:uppercase; transition:color .25s;}
form:hover label { color:var(--sky-2);}
form p { color:var(--text-soft); font-size:14px; margin-bottom:6px;}
form input[type="text"],
form input[type="email"],
form textarea {width:100%; padding:10px 13px; border:1px solid var(--border); border-radius:2px; font-size:14px; font-family:var(--font); color:var(--text); background:rgba(100,180,240,0.05); margin-top:6px; margin-bottom:20px; outline:none; transition:border-color .25s, background .25s, box-shadow .25s;}
form input:focus,
form textarea:focus {border-color:rgba(255,210,80,0.6); background:rgba(255,210,80,0.05); box-shadow:0 0 20px rgba(255,210,80,0.20);}
form button,
form button.btn {display:block; margin:4px auto 0; width:fit-content; padding:11px 28px; font-size:12px; font-family:var(--font); font-weight:400; letter-spacing:.12em; color:#fff; border:1px solid var(--sky-2); border-radius:2px; background:linear-gradient(135deg, var(--sky-1), var(--sky-2)); cursor:pointer; transition:background .25s, box-shadow .3s, transform .2s; box-shadow:0 4px 18px rgba(58,127,193,0.35);}
form button:hover,
form button.btn:hover {background:linear-gradient(135deg, var(--sky-2), var(--sky-3)); box-shadow:0 6px 28px rgba(100,180,240,0.55); transform:translateY(-2px); color:#0d2a44;}
form p.success { color:var(--sun); text-align:center; padding:12px 0; text-shadow:0 0 10px var(--sun-glow);}
form p.error { color:#e87ca0; text-align:center; padding:6px 0;}
footer {margin-top:80px; border-top:1px solid var(--border); background:rgba(4,8,16,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); position:relative; z-index:1;}
.footer-inner {max-width:1040px; margin:0 auto; padding:28px 30px; display:flex; justify-content:center; align-items:center; font-size:11px; letter-spacing:.14em; color:var(--muted);}
.footer-inner p { font-size:11px; color:var(--muted);}
.aoba-page .article-card h2 {padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--border); font-size:clamp(18px, 2.5vw, 24px);}
.aoba-page .article-card h3 {font-size:14px; font-weight:400; color:var(--sun); padding-bottom:8px; margin:28px 0 10px; border-bottom:1px dashed rgba(255,210,80,0.3);}
.aoba-page .article-card strong {color:var(--text);}
.aoba-page .summary {background:linear-gradient(135deg, rgba(58,127,193,0.12), rgba(255,210,80,0.06)); border-left:3px solid var(--sun); padding:16px 20px 16px 48px; margin-top:28px; font-size:14px; position:relative; line-height:1.9; color:var(--text-soft);}
.aoba-page .summary::before { content:"🌤️"; position:absolute; left:14px; top:15px; font-size:15px;}
.hero {position:relative; padding:100px 40px 108px; text-align:center; overflow:hidden; z-index:1;}
.hero-label {display:inline-block; font-size:10px; letter-spacing:.28em; color:rgba(255,240,200,0.9); text-transform:uppercase; margin-bottom:28px; padding:5px 18px; border:1px solid rgba(255,220,100,0.35); border-radius:20px; background:rgba(255,220,100,0.07); text-shadow:0 0 14px rgba(255,220,100,0.6); animation:label-float 5s ease-in-out infinite;}
@keyframes label-float {0%,100% { transform:translateY(0);}
50% { transform:translateY(-3px); box-shadow:0 8px 28px rgba(255,210,80,0.22);}
}
.hero h2 {font-family:var(--serif); font-size:clamp(22px, 3.2vw, 42px); font-weight:300; letter-spacing:.1em; line-height:1.6; margin-bottom:24px; background:linear-gradient(135deg, #dff0fa 0%, #9dd4f0 18%, #ffe8a0 42%, #ffc848 58%, #9dd4f0 78%, #dff0fa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:250% 250%; animation:title-gradient 8s ease infinite, title-glow 6s ease-in-out infinite;}
.hero-line {display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 32px;}
.hero-line::before,
.hero-line::after {content:""; display:block; width:70px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,220,100,0.7), rgba(100,180,240,0.5), transparent);}
.hero-line-dot {width:7px; height:7px; border-radius:50%; background:radial-gradient(circle, #fff5c0 0%, var(--sun) 70%); display:inline-block; box-shadow:0 0 12px var(--sun), 0 0 28px var(--sun-glow); animation:dot-shine 3s ease-in-out infinite;}
@keyframes dot-shine {0%,100% { transform:scale(1);}
50% { transform:scale(1.5); box-shadow:0 0 22px #fff, 0 0 50px rgba(255,210,80,0.7);}
}
.hero p {font-size:14px; color:rgba(200,235,255,0.85); max-width:480px; margin:0 auto 52px; line-height:2.1; letter-spacing:.05em;}
.hero-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.section-title {font-family:var(--serif); font-size:16px; font-weight:300; letter-spacing:.15em; color:var(--text); -webkit-text-fill-color:var(--text); background:none; animation:none; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:40px; display:flex; align-items:center; gap:14px; text-align:left;}
.section-title::before {content:""; display:inline-block; width:3px; height:18px; background:linear-gradient(to bottom, var(--sun), var(--sky-2)); border-radius:2px; flex-shrink:0; box-shadow:0 0 10px rgba(255,210,80,0.5);}
.article-card-img {width:100%; height:280px; object-fit:cover; object-position:center; filter:brightness(0.82) saturate(1.2) hue-rotate(5deg); transition:filter .4s; display:block; border-radius:0;}
.article-card:hover .article-card-img {filter:brightness(0.92) saturate(1.3) hue-rotate(5deg);}
.article-card-body { padding:28px 32px 32px; position:relative; z-index:1;}
.article-card-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.article-tag {display:inline-block; font-size:10px; letter-spacing:.12em; padding:3px 10px; border:1px solid rgba(255,210,80,0.45); color:var(--sun); border-radius:2px; background:rgba(255,210,80,0.09);}
.article-date { font-size:12px; color:var(--muted); letter-spacing:.04em;}
.article-card h3 {font-family:var(--serif); font-size:20px; font-weight:300; color:var(--text); letter-spacing:.05em; line-height:1.6; margin-bottom:12px; -webkit-text-fill-color:var(--text); background:none; animation:none;}
.article-card:hover h3 { text-shadow:0 0 18px rgba(255,220,100,0.45);}
.article-card p { font-size:14px; color:var(--text-soft); margin-bottom:26px; line-height:1.9;}
.container { text-align:left;}
.nav-toggle {display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; padding:8px; background:transparent; border:1px solid rgba(180,225,255,0.25); border-radius:6px; cursor:pointer; flex-shrink:0; position:relative; z-index:201;}
.nav-toggle span {display:block; width:22px; height:2px; background:rgba(230,245,255,0.9); border-radius:2px; transition:transform .3s ease, opacity .3s ease, transform .3s ease; transform-origin:center;}
.nav-toggle--open span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
.nav-toggle--open span:nth-child(2) {transform:scaleX(0); opacity:0;}
.nav-toggle--open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
.nav-backdrop {display:none; position:fixed; inset:0; background:rgba(10,25,45,0.6); z-index:99; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
.nav-backdrop.active {display:block;}
@media (max-width:1220px) {
body { background-attachment:scroll; }
body.theme-boundary { background-attachment:fixed; }
body::before { animation:none; opacity:0.65; }
.ray-2,.ray-4,.ray-6,.ray-8 { display:none; }
.ray-1 { opacity:0.55; }
.ray-3 { opacity:0.45; }
.ray-5 { opacity:0.35; }
.ray-7 { opacity:0.50; }
.bubble-wrap { display:none; }
.caustic-blob { opacity:0.35; filter:blur(14px); }
.hare-btn { width:54px; height:54px; bottom:20px; right:18px; }
.hare-label { right:18px; width:54px; }
.header-inner {padding:0 16px; height:68px;}
.logo {max-height:48px;}
.nav-toggle {display:flex;}
.nav {position:fixed; top:0; right:-280px; width:260px; height:100vh; background:rgba(15,35,60,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-left:1px solid rgba(180,225,255,0.15); z-index:200; transition:right .3s cubic-bezier(.4,0,.2,1); padding-top:80px; overflow-y:auto; justify-content:flex-start; margin:0;}
.nav.nav-open {right:0;}
.nav ul {flex-direction:column; gap:0; padding:0; align-items:stretch; flex-wrap:nowrap;}
.nav li {width:100%;}
.nav li.nav-user a {
  max-width:none !important; overflow:visible !important;
  padding:16px 24px !important; font-size:16px !important;
  font-weight:700 !important; background:rgba(255,210,80,0.08) !important;
  border-bottom:1px solid rgba(255,210,80,0.18) !important;
  gap:10px !important;
}
.nav li.nav-user a img { width:32px !important; height:32px !important; }
.nav a {width:100% !important; height:auto !important; padding:14px 24px !important; font-size:14px !important; justify-content:flex-start !important; border-radius:0 !important; border:none !important; border-bottom:1px solid rgba(180,225,255,0.07) !important; background:transparent !important; box-shadow:none !important; letter-spacing:.06em !important;}
.nav a:hover {background:rgba(255,210,80,0.08) !important; color:var(--sun) !important; letter-spacing:.08em !important; box-shadow:none !important;}
.container {padding:0 16px; margin:40px auto;}
.about {padding:48px 16px;}
.map-container {margin:20px 12px; padding:20px 16px;}
#map {height:360px;}
form {padding:24px 18px;}
.article-img {max-width:100%; max-height:400px;}
.article-card-img {height:220px;}
.article-card-body {padding:20px 18px 22px;}
.article-card h3 {font-size:17px;}
.article-nav {flex-direction:column; gap:12px; align-items:flex-start;}
footer {margin-top:50px;}
.hero {padding:56px 20px 68px;}
.hero h2 {font-size:clamp(20px, 5.5vw, 28px);}
.hero p {font-size:13px;}
.hero-buttons {flex-direction:column; align-items:center;}
.hero-buttons .btn {width:100%; max-width:280px; justify-content:center;}
.like-wrap {padding:12px 16px 16px; gap:10px;}
.like-btn {padding:8px 16px; font-size:14px;}
.like-count {font-size:14px;}
.comments-section {padding:0 12px; margin-bottom:40px;}
.comment-submit {align-self:stretch; width:100%;}
.comment-textarea {font-size:16px;}
.community-card-body {padding:10px 12px 14px;}
.community-card-title {font-size:14px;}
.community-author-name {font-size:11px;}
.aoba-page .summary {padding:14px 16px 14px 40px;}
}
@media (max-width:480px) {h2 {font-size:20px;}
}
.community-section { margin-top:60px;}
.community-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; margin-top:20px;}
.community-card {background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.07); transition:transform .2s, box-shadow .2s;}
.community-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.12);}
.community-card-img { width:100%; height:160px; object-fit:cover; display:block;}
.community-card-no-img {width:100%; height:160px; background:#f0f4f8; display:flex; align-items:center; justify-content:center; font-size:2.5rem;}
.community-card-body { padding:14px 16px 18px;}
.community-card-author { display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.community-author-icon {width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid #e2e8f0; flex-shrink:0;}
.community-author-icon-default {width:28px; height:28px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
.community-author-name { font-size:12px; color:#888; font-weight:600;}
.community-card-title { font-size:15px; font-weight:700; margin-bottom:6px; line-height:1.5; color:#1e293b; -webkit-text-fill-color:#1e293b; background:none; animation:none;}
.community-card-text { font-size:13px; color:#777; line-height:1.6;}
.community-cta { text-align:center; margin-top:28px;}
@media (max-width:640px) {.community-grid { grid-template-columns:1fr 1fr; gap:12px;}
}
@media (max-width:400px) {.community-grid { grid-template-columns:1fr;}
}
.like-wrap {padding:16px 32px 24px; display:flex; align-items:center; gap:14px; border-top:1px solid var(--border);}
.like-btn {display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border:2px solid #e2e8f0; border-radius:30px; background:#fff; cursor:pointer; font-size:15px; transition:border-color .2s, transform .15s;}
.like-btn:hover { border-color:#f87171; transform:scale(1.04);}
.like-btn.liked { border-color:#f87171; background:#fff5f5;}
.like-heart { font-size:18px; line-height:1;}
.like-count { font-size:15px; font-weight:700; color:#555; min-width:16px;}
.like-login-hint { font-size:13px; color:#aaa;}
.like-login-hint a { color:#7ec8e3;}
.comments-section {max-width:760px; margin:0 auto 60px; padding:0 20px;}
.comments-title {font-size:1rem; font-weight:700; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.comments-count {display:inline-block; background:#e2e8f0; color:#555; border-radius:10px; font-size:12px; padding:1px 8px; margin-left:6px; font-weight:600;}
.comment-list { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:16px;}
.comment-item { background:#fff; border-radius:10px; padding:14px 16px; box-shadow:0 1px 6px rgba(0,0,0,.06);}
.comment-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.comment-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid #e2e8f0; flex-shrink:0;}
.comment-no-avatar {display:inline-flex; align-items:center; justify-content:center; background:#e2e8f0; font-size:14px;}
.comment-username { font-size:13px; font-weight:700; color:#1e293b; display:block; text-decoration:none;}
.comment-username:hover { color:#3a7fc1;}
.comment-date { font-size:11px; color:#bbb;}
.comment-body { font-size:14px; color:#444; line-height:1.75; white-space:pre-wrap;}
.comment-form { display:flex; flex-direction:column; gap:10px;}
.comment-textarea {width:100%; padding:12px 14px; border:1px solid #dde; border-radius:8px; font-size:14px; resize:vertical; outline:none; transition:border .2s; font-family:inherit;}
.comment-textarea:focus { border-color:#7ec8e3;}
.comment-submit {align-self:flex-end; padding:10px 24px; background:#2c3e50; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s;}
.comment-submit:hover { background:#3d5166;}
.comment-login-hint {font-size:13px; color:#aaa; text-align:center; padding:16px 0;}
.comment-login-hint a { color:#7ec8e3;}

/* ===== テーマ変更時は太陽光線・sun-breathe を無効化（boundary は themes.css で上書き） ===== */
body[class*="theme-"] .sunray  { display: none; }
body[class*="theme-"]::before  { animation: none; }
body.theme-boundary   .sunray  { display: block; }

/* ===== 晴れにするボタン ===== */
.hare-btn {position:fixed; bottom:28px; right:28px; z-index:200; width:68px; height:68px; border-radius:50%; border:none; background:transparent; cursor:pointer; padding:0; outline:none; transition:transform .3s ease;}
.hare-btn img {width:100%; height:100%; border-radius:50%; mix-blend-mode:screen; object-fit:cover; animation:hare-pulse 4s ease-in-out infinite; display:block;}
@keyframes hare-pulse {0%,100%{filter:brightness(0.75) drop-shadow(0 0 8px rgba(255,220,100,0.45));}50%{filter:brightness(1.05) drop-shadow(0 0 22px rgba(255,220,100,0.80));}}
.hare-btn:hover {transform:scale(1.14);}
.hare-label {position:fixed; bottom:12px; right:28px; width:68px; text-align:center; font-size:10px; letter-spacing:.1em; color:rgba(255,230,150,0); font-family:var(--font); pointer-events:none; z-index:200; transition:color .35s ease;}
.hare-btn:hover + .hare-label {color:rgba(255,230,150,0.85);}
/* ===== 白カード内フォームのグローバルスタイル上書きリセット ===== */
.login-card form,
.reg-card form,
.edit-card form,
.sub-card form,
.asahi-card form {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  max-width: none;
  position: static;
  z-index: auto;
}
.login-card form::before,
.reg-card form::before,
.edit-card form::before,
.sub-card form::before,
.asahi-card form::before {
  display: none;
}
.login-card form label,
.reg-card form label,
.edit-card form label,
.sub-card form label {
  color: #555;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
}
.login-card form:hover label,
.reg-card form:hover label,
.edit-card form:hover label,
.sub-card form:hover label {
  color: #555;
}
.login-card form input,
.login-card form textarea,
.reg-card form input,
.reg-card form textarea,
.edit-card form input,
.edit-card form textarea,
.sub-card form input,
.sub-card form textarea {
  background: #fff;
  color: #1e293b;
  border: 1px solid #dde;
  margin-top: 0;
  margin-bottom: 0;
}
.login-card form input:focus,
.login-card form textarea:focus,
.reg-card form input:focus,
.reg-card form textarea:focus,
.edit-card form input:focus,
.edit-card form textarea:focus,
.sub-card form input:focus,
.sub-card form textarea:focus {
  border-color: #7ec8e3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(126,200,227,0.12);
}
.login-card form button,
.reg-card form button,
.edit-card form button,
.sub-card form button {
  display: block;
  width: 100%;
  margin: 0;
  max-width: none;
  border-radius: 8px;
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 600;
}

/* ===== 昼夜反転（Night Mode） ===== */
body.theme-night {
  --sky-1:#1a0830; --sky-2:#2d0f5e; --sky-3:#481272;
  --sun:#c0a0ff; --sun-warm:#9060d0; --sun-glow:rgba(148,42,210,0.45);
  --text:#e8d4ff; --text-soft:#b890e8; --muted:#7850a8;
  --border:rgba(180,100,255,0.2); --surface:rgba(18,5,48,0.65);
  background:
    radial-gradient(ellipse at 28% 12%, rgba(148,42,210,0.55) 0%, rgba(70,10,140,0.22) 28%, transparent 52%),
    radial-gradient(ellipse at 72% 22%, rgba(55,8,110,0.35)   0%, transparent 40%),
    radial-gradient(ellipse at 50% 85%, rgba(8,2,25,0.45)     0%, transparent 42%),
    linear-gradient(168deg, #060312 0%, #160830 18%, #22105a 36%, #2e1270 52%, #3a1480 68%, #280d62 84%, #10062a 100%);
  background-attachment: fixed;
}
body.theme-night::before {
  background:
    radial-gradient(ellipse at 28% 10%, rgba(180,100,255,0.42) 0%, transparent 40%),
    radial-gradient(ellipse at 28% 10%, rgba(220,160,255,0.18) 0%, transparent 62%);
  animation: moon-glow 8s ease-in-out infinite !important;
  opacity: 1;
}
@keyframes moon-glow {
  0%,100% { opacity:.72; transform:scale(1); }
  50%     { opacity:1.0; transform:scale(1.06); }
}
body.theme-night::after { opacity:0 !important; animation:none !important; }
body.theme-night header { background:rgba(8,2,25,0.92); border-bottom-color:rgba(150,80,240,0.22); }
body.theme-night header::after {
  background: linear-gradient(90deg, transparent 0%, rgba(120,40,200,0.45) 18%, rgba(190,120,255,0.85) 50%, rgba(120,40,200,0.45) 82%, transparent 100%);
  background-size: 200% 100%;
}
/* 夜トグルボタン */
.night-toggle-btn {
  position:fixed; bottom:110px; right:28px; z-index:210;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  background:rgba(8,3,30,0.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 16px rgba(100,50,200,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.night-toggle-btn:hover {
  transform:scale(1.12);
  box-shadow:0 4px 24px rgba(148,42,210,0.65), inset 0 1px 0 rgba(255,255,255,0.14);
}
/* 星 */
.night-star {
  position:fixed; border-radius:50%; background:white;
  pointer-events:none; z-index:1;
  animation:star-twinkle ease-in-out infinite;
}
@keyframes star-twinkle {
  0%,100% { opacity:.12; transform:scale(0.8); }
  50%     { opacity:.92; transform:scale(1.3); }
}

/* ===== asahi-card 専用リセット ===== */
.asahi-card h2,
.asahi-card h3 {
  background: none;
  -webkit-text-fill-color: #1e293b;
  animation: none;
}
.asahi-card form input,
.asahi-card form textarea {
  background: #f8fafc;
  color: #1e293b;
  -webkit-text-fill-color: #1e293b;
  border: 1px solid #e2e8f0;
  margin-top: 0;
  margin-bottom: 0;
}
.asahi-card form input:focus,
.asahi-card form textarea:focus {
  border-color: #FFD060;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,208,96,0.18);
}
.asahi-card form label {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}
.asahi-card form:hover label {
  color: #64748b;
}
.asahi-card form button.submit-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #FFB347, #FFD060);
  color: #1a2e44;
  -webkit-text-fill-color: #1a2e44;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  box-shadow: 0 4px 16px rgba(255,180,70,0.35);
}

/* ============================================================
   視認性向上: 明るい空の背景でも文字が読めるように薄い影
   ============================================================ */
main h1, main h2, main h3, main h4,
main p, main li, main summary, main label, main span,
.map-description, .article-nav span {
  text-shadow: 0 1px 8px rgba(8,24,48,0.65), 0 0 3px rgba(8,24,48,0.45);
}
/* 白背景カード・ポップアップの中では影を消す（黒文字がにじむため） */
.sub-card h1, .sub-card h2, .sub-card h3, .sub-card p, .sub-card li,
.sub-card label, .sub-card summary, .sub-card span, .sub-card td, .sub-card th,
.asahi-card h1, .asahi-card h2, .asahi-card h3, .asahi-card p, .asahi-card label, .asahi-card span,
.leaflet-popup-content, .leaflet-popup-content span, .leaflet-popup-content b, .leaflet-popup-content a {
  text-shadow: none;
}

/* ============================================================
   マイクロアニメーション（わくわく・邪魔しない程度）
   ============================================================ */
/* ロゴがゆっくり浮き沈み */
.logo { animation: logo-float 6s ease-in-out infinite; }
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ナビリンク: ホバーでふわっと持ち上がる */
.nav a { transition: background .2s, color .2s, transform .2s; }
.nav a:hover { transform: translateY(-2px); }

/* ボタン全般: 押した感触 */
.btn:active, button:active { transform: scale(0.96); }
.btn { transition: transform .2s, box-shadow .25s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); }

/* コミュニティカード: ホバーで浮き上がり */
.community-card { transition: transform .3s ease, border-color .3s, box-shadow .3s; }
.community-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,210,80,0.45);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* 図鑑カード: 解放済みはホバーで小さく傾く、ロックは触ると震える */
.zukan-card { transition: transform .25s ease, border-color .25s; }
.zukan-card:not(.locked):hover { transform: translateY(-5px) rotate(-1.2deg); }
.zukan-card.locked:active { animation: zk-shake .35s ease; }
@keyframes zk-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-1deg); }
  75% { transform: translateX(5px) rotate(1deg); }
}

/* スクロール出現（footer.phpのJSが付与） */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rv.rv-on { opacity: 1; transform: none; }

/* ============================================================
   いいねボタン: 押した瞬間にハートが弾けて光の粒が散る
   （aoba.php の like-btn / JSで .like-burst を一時付与）
   ============================================================ */
.like-btn .like-heart { display:inline-block; transition: transform .18s ease; will-change: transform; }
.like-btn.like-burst .like-heart { animation: like-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(.88); }
  100% { transform: scale(1); }
}
/* 放射する光の粒（JSが生成して飛ばす） */
.heart-spark {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff5c0 0%, var(--sun-warm, #FFB347) 70%, transparent 100%);
  pointer-events: none; z-index: 9999; opacity: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255,210,120,0.7);
}

/* ============================================================
   記事ページ: 読書プログレス（ヘッダー直下の細い光の線）
   ============================================================ */
.read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 150; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(100,180,240,0.6) 0%,
    rgba(255,230,120,0.9) 50%,
    rgba(255,255,255,0.95) 100%);
  box-shadow: 0 0 8px rgba(255,210,80,0.55), 0 0 16px rgba(100,180,240,0.35);
  transition: width .12s linear;
}

/* ============================================================
   アクセシビリティ: 動きを減らす設定の端末では装飾アニメを停止
   （body.no-anim と同じ思想を OS 設定にも適用）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body::before, body::after { animation: none !important; }
  .read-progress { transition: none !important; }
}