:root {
  --color-bg: #F6F3F5;
  --color-surface: #FFFFFF;
  --color-surface-light: #EEE8F0;
  --color-primary: #A73562;
  --color-secondary: #69478A;
  --color-accent: #176A72;
  --color-orange: #A34F26;
  --color-text: #252339;
  --color-text-muted: #646071;
  --color-border: #D8CEDB;
  --color-success: #28734F;
  --color-warning: #865B17;
  --color-danger: #AD3D4D;
  --color-navy: #211D36;
  --color-coral: #FF977F;
  --color-pink: #F2A1C3;
  --color-cyan: #8ADAD3;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --content-max: 1200px;
  --article-max: 800px;
  --sidebar-width: 352px;
  --button-height: 48px;
  --input-height: 56px;
  --border: 1px solid var(--color-border);
  --shadow-menu: 0 8px 24px rgb(0 0 0 / 18%);
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Meiryo", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:17px; line-height:1.88; }
a { color:var(--color-accent); text-underline-offset:.2em; }
:focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; }
.container { width:calc(100% - 32px); max-width:var(--content-max); margin-inline:auto; }
.card-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.card { min-width:0; padding:16px; border-radius:var(--radius-md); background:var(--color-surface); }
.article-body { min-width:0; max-width:var(--article-max); overflow-wrap:anywhere; }
.article-body p { margin:0 0 24px; }
h1 {font-size:26px; line-height:1.5;} h2 {font-size:22px; line-height:1.5;} h3 {font-size:20px; line-height:1.5;}
button, input, select { font:inherit; } button { min-height:48px; } input,select {min-height:56px; max-width:100%;}
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:8px 24px; border-radius:8px; color:#FFFFFF; background:var(--color-primary); font-size:15px; font-weight:700; text-decoration:none; }
.button:hover {background:#812449;} .button:disabled {background:var(--color-surface-light); color:var(--color-text-muted); cursor:not-allowed;}
img { max-width:100%; height:auto; } .card-image { aspect-ratio:16/9; object-fit:cover; } .db-image {aspect-ratio:16/9; object-fit:contain;}
.spec-list {margin:0;} .spec-row {padding:16px; border-bottom:var(--border); background:var(--color-surface);}
.spec-row dt {color:var(--color-text-muted); font-size:14px;} .spec-row dd {margin:8px 0 0;}
.sidebar {display:none;} .mobile-nav-trigger {display:inline-flex;} .desktop-nav {display:none;}
.ad-slot {clear:both; min-height:120px; margin:32px 0; border:var(--border); border-radius:8px;}
[id] {scroll-margin-top:96px;}
@media(min-width:600px) {
 .container {width:calc(100% - 64px);} .card-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
 .spec-row {display:grid; grid-template-columns:40% 60%;} .spec-row dd {margin:0;}
 h1 {font-size:32px;} h2 {font-size:26px;} h3 {font-size:23px;}
}
@media(min-width:1200px) {
 .container {width:calc(100% - 96px);} .card-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
 .article-layout {display:grid; grid-template-columns:minmax(0,800px) 352px; gap:48px;}
 .sidebar {display:block;} .toc-sticky {position:sticky; top:96px; max-height:calc(100dvh - 120px); overflow:auto;}
 .mobile-nav-trigger {display:none;} .desktop-nav {display:flex;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important; transition:none!important; animation:none!important;}}

/* 夕焼けと夜の街をモチーフにした日本語メディア */
.site-header {background:var(--color-navy); color:#fff; border-bottom:3px solid var(--color-coral);}
.site-header a {color:#fff;}
.section-heading {position:relative; padding:10px 20px 10px 40px; min-height:54px; background:var(--color-navy); color:#fff; border-radius:4px; line-height:1.5;}
.section-heading::before {content:""; position:absolute; left:16px; top:16px; width:6px; height:26px; transform:skew(-20deg); background:var(--color-coral);}
.section-heading::after {content:""; position:absolute; bottom:-3px; left:0; width:40%; max-width:160px; height:3px; background:var(--color-coral);}
.article-body h2 {padding:8px 16px; border-left:4px solid var(--color-coral); background:var(--color-navy); color:#fff; border-radius:4px;}
.article-card {border:1px solid var(--color-border); border-bottom:4px solid var(--color-primary);}
.article-card:nth-child(even) {border-bottom-color:var(--color-secondary);}
.category-badge {display:inline-block; background:var(--color-primary); color:#fff; font-size:12px; line-height:24px; padding-inline:8px; border-radius:4px;}
.hero-cta {background:var(--color-coral); color:var(--color-navy);}
.hero-cta:hover {background:#FFB19F;}
@media(max-width:599px) {
 .card.article-card {display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; padding:12px; border-bottom:1px solid var(--color-border); border-left:3px solid var(--color-primary);}
 .article-card .card-image {width:104px; aspect-ratio:4/3; object-fit:cover;}
 .article-card .card-content {min-width:0;}
 .article-card .card-title {font-size:15px; line-height:1.6; margin:8px 0;}
 .article-card .card-date {font-size:12px; color:var(--color-text-muted);}
}