:root{
  --bg:#fffaf0;
  --band-green:#e9f3d9;
  --band-yellow:#fff1c9;
  --bg-sea:#1f4650;
  --fg:#2b2a24;
  --fg-soft:#5c5a4e;
  --line:#ddd4bf;
  --card:#ffffff;
  --accent:#c41983;
  --accent-soft:#fbe0ee;
  --sea:#3d7f35;
  --sea-deep:#193a44;
  --font-display:'Shippori Mincho', serif;
  --font-body:'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15181a;
    --band-green:#1b2417;
    --band-yellow:#2a2412;
    --bg-sea:#0e2127;
    --fg:#ece7da;
    --fg-soft:#b6b0a0;
    --line:#38362e;
    --card:#1f2225;
    --accent:#ee74b9;
    --accent-soft:#3a1f2e;
    --sea:#5c93a1;
    --sea-deep:#0e2127;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --band-green:#1b2417;
  --band-yellow:#2a2412;
  --bg:#15181a;
  --bg-sea:#0e2127;
  --fg:#ece7da;
  --fg-soft:#b6b0a0;
  --line:#38362e;
  --card:#1f2225;
  --accent:#ee74b9;
  --accent-soft:#3a1f2e;
  --sea:#5c93a1;
  --sea-deep:#0e2127;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.9;font-size:17px;-webkit-text-size-adjust:100%}
.bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.bar .home{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:18px}
.bar img{border-radius:50%}
.bar .back{color:var(--accent);text-decoration:none;font-size:14.5px;min-height:44px;display:flex;align-items:center}
main{max-width:720px;margin:0 auto;padding:28px 16px 40px}
time{display:block;color:var(--fg-soft);font-size:14px}
h1{font-family:var(--font-display);font-size:clamp(23px,5.6vw,32px);line-height:1.5;margin:6px 0 22px}
article p{margin:0 0 1.1em}
figure{margin:1.4em 0}
figure img{width:100%;height:auto;border-radius:12px;display:block}
figcaption{font-size:13.5px;color:var(--fg-soft);margin-top:6px}
a{color:var(--accent);overflow-wrap:anywhere}
.note{margin-top:32px;font-size:13.5px;color:var(--fg-soft)}
.nav{margin-top:18px}.nav a{display:inline-flex;min-height:44px;align-items:center}
footer{text-align:center;padding:22px 16px;font-size:13px;color:var(--fg-soft);border-top:1px solid var(--line)}