@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');

:root { --ink:#edf5ff; --muted:#9db2cc; --paper:#030a1a; --green:#08234d; --mint:#102f5c; --orange:#f31b2b; --line:#1d4778; --surface:#071a38; --surface-raised:#0a2550; --input:#061631; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Noto Sans JP',sans-serif; }
header, main, footer { max-width:1120px; margin:auto; }
header { height:82px; display:flex; align-items:center; justify-content:space-between; }
a { color:inherit; text-decoration:none; }
.brand { font-size:19px; font-weight:700; letter-spacing:-.06em; }.brand b { color:var(--orange); }
nav { display:flex; align-items:center; gap:23px; font-size:14px; }
.button { display:inline-block; background:var(--orange); color:#fff; border:0; border-radius:5px; padding:14px 23px; font:700 14px inherit; cursor:pointer; box-shadow:0 8px 24px #f31b2b4d; transition:.15s; }.button:hover { background:#ff3947; }.button.small { padding:10px 16px; }
.hero { display:grid; grid-template-columns:1.45fr .7fr; gap:80px; padding:42px 0 67px; }.eyebrow { margin:0 0 16px; color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.15em; }
h1 { margin:0 0 20px; font-size:clamp(31px,4vw,51px); line-height:1.28; letter-spacing:-.07em; } h2 { margin:0; font-size:25px; }.hero p:not(.eyebrow), .form-head>p:last-child { max-width:575px; margin-bottom:26px; color:var(--muted); font-size:15px; line-height:2; }
.hero-note { display:flex; flex-direction:column; gap:14px; align-self:center; padding:31px 30px; border:1px solid #26639b; border-radius:3px; background:linear-gradient(145deg,var(--surface-raised),var(--green)); color:#fff; box-shadow:0 16px 35px #00000042; }.hero-note strong { font-size:17px; }.hero-note span { padding-top:13px; border-top:1px solid #ffffff42; font-size:13px; }
.section-title, .admin-heading { display:flex; align-items:end; justify-content:space-between; margin:22px 0; }.section-title>span { color:var(--muted); font-size:13px; }
.search-form { display:flex; max-width:600px; margin:24px 0 14px; }.search-form input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line); border-radius:4px 0 0 4px; background:var(--input); color:var(--ink); font:13px inherit; }.search-form button { padding:0 22px; border:0; border-radius:0 4px 4px 0; background:var(--green); color:#fff; font:700 13px inherit; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0; }.chips>* { border:1px solid var(--line); border-radius:20px; padding:7px 13px; background:var(--surface); font-size:12px; transition:.15s; }.chips>a:hover, .chips>a.is-active { border-color:var(--orange); background:var(--orange); color:#fff; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.card { display:flex; flex-direction:column; min-height:225px; padding:22px; border:1px solid var(--line); border-radius:4px; background:var(--surface); box-shadow:0 10px 24px #00000026; transition:.15s; }.card:hover { border-color:#78b9ff; background:var(--surface-raised); transform:translateY(-2px); }.card:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }.meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }.meta span { color:#78b9ff; font-weight:700; }.story { flex:1; white-space:pre-line; font-size:14px; line-height:1.85; }.reference { margin:-2px 0 14px; color:#78b9ff; font-size:12px; font-weight:700; }.author { padding-top:14px; border-top:1px solid var(--line); font-size:13px; font-weight:700; }.author small { color:var(--muted); font-weight:400; }
footer { padding:65px 0 30px; color:var(--muted); font-size:12px; }.empty { grid-column:1/-1; padding:50px; background:var(--surface); color:var(--muted); }
.pagination { margin:32px 0; }.pagination nav>div:first-child { display:none; }.pagination nav>div:last-child { display:flex; align-items:center; justify-content:center; gap:18px; }.pagination nav>div:last-child>div:first-child { color:var(--muted); font-size:12px; }.pagination nav>div:last-child>div:last-child>span { display:inline-flex; }.pagination nav a, .pagination nav span[aria-current] span, .pagination nav span[aria-disabled] span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13px; }.pagination nav span[aria-current] span { border-color:var(--orange); background:var(--orange); color:#fff; }.pagination nav span[aria-disabled] span { background:#0a1730; color:#607797; }.pagination nav a:hover { background:var(--mint); }.pagination nav svg { width:16px; height:16px; }
.post-detail { max-width:760px; margin:58px auto; }.post-detail .meta { margin-bottom:22px; }.post-detail .story { margin:0 0 24px; font-size:15px; line-height:2; }.post-navigation { display:flex; justify-content:space-between; gap:16px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); }.post-navigation a { color:#78b9ff; font-size:13px; font-weight:700; }.post-navigation .next { margin-left:auto; text-align:right; }
.form-head { padding:66px 0 20px; }.post-form { max-width:680px; margin-bottom:50px; padding:32px; border:1px solid var(--line); background:var(--surface); }.post-form label { display:block; margin-bottom:20px; font-size:13px; font-weight:700; }.post-form input:not([type=checkbox]), .post-form select, .post-form textarea, .login input { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:3px; background:var(--input); color:var(--ink); font:14px inherit; }.post-form textarea { resize:vertical; line-height:1.7; }.post-form small { color:var(--muted); font-weight:400; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.captcha { display:grid; grid-template-columns:100px 1fr 130px; align-items:center; gap:10px; margin:14px 0 22px; padding:13px; background:var(--mint); font-size:13px; }.captcha strong { font-size:22px; letter-spacing:.08em; }.captcha input { padding:9px; border:1px solid #3972a4; }.form-note { color:var(--muted); font-size:11px; }.notice, .errors { margin:18px 0; padding:13px 16px; border-radius:3px; font-size:13px; }.success { background:#0b3d3a; color:#c2f3df; }.error, .errors { background:#501723; color:#ffd8d2; }
.login { max-width:440px; margin:70px auto; }.login form { padding:28px; border:1px solid var(--line); background:var(--surface); }.login label { display:block; margin-bottom:17px; font-size:13px; font-weight:700; }.login p:last-child { color:var(--muted); font-size:12px; line-height:1.7; }
.admin { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }.admin aside { display:flex; flex-direction:column; gap:8px; padding:30px 22px; background:linear-gradient(180deg,#082650,#04152f); color:#fff; }.admin aside .brand { margin-bottom:35px; }.admin aside>a { padding:10px; border-radius:3px; font-size:14px; }.admin aside>a:hover { background:#ffffff1b; }.admin aside form { margin-top:auto; }.admin aside button, .delete button { padding:10px; border:0; background:none; color:inherit; cursor:pointer; font:13px inherit; }.admin main { width:min(100%,1050px); padding:48px; }.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:28px 0 45px; }.stats div { padding:22px; border:1px solid var(--line); background:var(--surface); }.stats b { display:block; font-size:31px; }.stats span { color:var(--muted); font-size:12px; } table { width:100%; border-collapse:collapse; background:var(--surface); font-size:13px; } th, td { padding:15px; border-bottom:1px solid var(--line); text-align:left; } th { color:var(--muted); font-size:11px; }.status { padding:5px 8px; border-radius:20px; font-size:11px; }.status.published { background:#0b4a4b; color:#bdf5e1; }.status.pending { background:#4a3810; color:#ffe6a3; }.status.hidden { background:#26354b; color:#c0ccda; }.check { font-weight:400!important; }.delete { margin:-35px 0 45px; }.delete button { color:#ff7780; }
@media (max-width:700px) { header, main, footer { padding-right:18px; padding-left:18px; } header nav>a:first-child { display:none; }.hero { grid-template-columns:1fr; gap:25px; padding:23px 0 45px; }.cards { grid-template-columns:1fr; }.form-grid, .captcha { grid-template-columns:1fr; }.pagination nav>div:last-child { flex-direction:column; gap:12px; }.admin { display:block; }.admin aside { min-height:auto; }.admin main { padding:30px 18px; }.stats { grid-template-columns:1fr 1fr; } table { display:block; overflow-x:auto; }.post-form { padding:20px; }.form-head { padding-top:40px; } }