/* 四日坊主シリーズ（yokkabouzu.caprix.jp）— ダーク×4色の光が動く背景 */
:root{
  --bg:#0E0E10;--ink:#FFFFFF;--sub:#DCDCE0;--faint:#C2C2C8;
  --glass:rgba(16,16,20,.62);--glass-line:rgba(255,255,255,.16);
  --mint:#7FCDB0;--pink:#FF8FB1;--sky:#78B4FF;--peach:#FFBE8C;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;color:var(--ink);background:transparent;line-height:1.85;font-size:17px;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:#F0F0F2;text-underline-offset:3px}a:hover{color:#fff}

/* 動く光（4色）。画面の後ろに固定して、大きく漂う。上に薄い黒をかけて文字を読みやすくする */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 30%,rgba(14,14,16,.15),rgba(14,14,16,.55))}
.aurora span{position:absolute;width:58vmax;height:58vmax;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.aurora .a1{background:var(--mint);top:-20vmax;left:-16vmax;animation:drift1 14s ease-in-out infinite alternate}
.aurora .a2{background:var(--pink);top:-12vmax;right:-20vmax;opacity:.48;animation:drift2 17s ease-in-out infinite alternate}
.aurora .a3{background:var(--sky);bottom:-24vmax;left:-10vmax;opacity:.45;animation:drift3 15s ease-in-out infinite alternate}
.aurora .a4{background:var(--peach);bottom:-22vmax;right:-14vmax;opacity:.42;animation:drift4 19s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}33%{transform:translate(38vw,18vh) scale(1.25)}66%{transform:translate(12vw,52vh) scale(.85)}100%{transform:translate(55vw,36vh) scale(1.1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}33%{transform:translate(-42vw,24vh) scale(.85)}66%{transform:translate(-18vw,58vh) scale(1.2)}100%{transform:translate(-56vw,30vh) scale(1)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}33%{transform:translate(36vw,-30vh) scale(1.2)}66%{transform:translate(62vw,-8vh) scale(.9)}100%{transform:translate(24vw,-52vh) scale(1.1)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)}33%{transform:translate(-34vw,-36vh) scale(1.15)}66%{transform:translate(-60vw,-12vh) scale(.9)}100%{transform:translate(-22vw,-56vh) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.aurora span{animation:none}}

main{max-width:1120px;margin:0 auto;padding:28px 22px 64px}
nav.top{display:flex;justify-content:space-between;align-items:center;font-size:14px;gap:16px}
nav.top .brand{font-weight:900;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px}
nav.top .brand img{width:30px;height:30px;border-radius:8px}

h1{font-size:clamp(36px,5.6vw,68px);line-height:1.2;font-weight:900;margin:64px 0 0;text-shadow:0 2px 24px rgba(0,0,0,.35)}
h1 .m{color:#A8F0D2}h1 .p{color:#FFC4D6}
.lead{margin:20px 0 0;color:var(--sub);font-size:18px;line-height:1.9;max-width:600px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.icons{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.icons img{width:68px;height:68px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.note{margin:14px 0 0;font-size:14px;color:var(--faint)}

.glass{margin-top:44px;border-radius:28px;padding:26px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
.app{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.app img{width:88px;height:88px;border-radius:20px;flex:none}
.app .t{flex:999 1 280px;min-width:0}
.app h2{margin:0;font-size:26px;font-weight:900}
.app p{margin:6px 0 0;color:var(--sub);font-size:16px}
.app .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:15px;font-weight:700}
.btn{display:inline-block;flex:1 1 180px;text-align:center;background:#fff;color:#111 !important;border-radius:14px;padding:16px 24px;font-weight:700;font-size:16px;text-decoration:none}
.btn:hover{background:#E8E8EA}

/* 下層ページ */
.page h1{font-size:clamp(28px,4vw,40px);margin-top:44px}
.page h2{font-size:20px;margin:30px 0 6px}
.page p,.page li,.page dd{font-size:16px;color:#ECECEF}
.page .meta{color:var(--faint);font-size:14px;margin-top:8px}
.page ul{padding-left:1.3em}
dl{margin:0}dt{font-weight:700;margin-top:20px;font-size:17px}dd{margin:4px 0 0;color:var(--sub)}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px}
.feat div{border-radius:20px;padding:20px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);font-size:15px;color:#ECECEF}
.feat b{display:block;font-size:17px;color:#fff;margin-bottom:6px}

footer{max-width:1120px;margin:0 auto;padding:0 22px 40px;color:var(--faint);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--faint)}