:root { color-scheme: light dark; }
body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; margin: 0; padding: 0; line-height: 1.8; color: #1a1a1a; background: #fff; }

header.hero { background: linear-gradient(135deg, #d02b55, #7a1f3d); color: #fff; padding: 72px 20px; text-align: center; }
header.hero h1 { font-size: 2.2em; margin: 0 0 12px; letter-spacing: 0.02em; }
header.hero p { font-size: 1.05em; margin: 0 auto; max-width: 560px; opacity: 0.95; }
header.hero.small { padding: 48px 20px 40px; }
header.hero.small h1 { font-size: 1.7em; }
header.hero .back { display: inline-block; margin-bottom: 18px; color: #ffd9e2; text-decoration: none; font-size: 0.95em; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 680px; }

section { padding: 56px 0; border-bottom: 1px solid #eee; }
section h2 { font-size: 1.5em; margin-bottom: 0.6em; }

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.video-card iframe, .article-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.video-card p { margin: 10px 0 0; font-size: 0.95em; color: #444; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 24px; }
.feature h3 { font-size: 1.05em; margin-bottom: 6px; }
.feature p { margin: 0; color: #444; font-size: 0.95em; }

.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.guide-card { display: block; border: 1px solid #eee; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease; }
.guide-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.guide-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.guide-card .guide-card-body { padding: 14px 16px; }
.guide-card h3 { margin: 0 0 4px; font-size: 1em; }
.guide-card p { margin: 0; font-size: 0.9em; color: #666; }

.characters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 24px; }
.character-card { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #eee; border-radius: 10px; padding: 20px 16px; }
.character-card img { max-height: 260px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 14px; }
.character-card h3 { margin: 0 0 8px; font-size: 1.1em; }
.character-role { margin: 0 0 8px; font-size: 0.92em; color: #444; }
.character-trait { margin: 0; font-size: 0.88em; color: #666; }

.links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.links a { display: inline-block; padding: 10px 20px; border-radius: 24px; background: #d02b55; color: #fff; text-decoration: none; font-weight: 600; }
.links a.secondary { background: #222; }

.cta-box { background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 32px; text-align: center; margin-top: 40px; }
.cta-box h2 { margin-top: 0; }

footer { text-align: center; padding: 40px 20px; font-size: 0.9em; color: #666; }
footer a { color: #d02b55; }

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
  section { border-bottom-color: #2a2a2a; }
  .feature p, .video-card p { color: #bbb; }
  .guide-card { border-color: #2a2a2a; }
  .guide-card p { color: #999; }
  .cta-box { background: #1a1a1a; border-color: #2a2a2a; }
  footer { color: #999; }
  .character-card { border-color: #2a2a2a; }
  .character-role { color: #bbb; }
  .character-trait { color: #999; }
}