:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2:#ffffff;
  --text:#222;
  --muted:#666;
  --accent:#ff2d92;
  --accent-2:#ff77b8;
  --ring: #ff2d9240;
  --radius:14px;
  --shadow: 0 4px 18px rgba(0,0,0,.08);
  --space: clamp(14px, 2vw, 24px);
  --max: 1120px;
  --font: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.7;
}

/* layout */
.container{width:min(100% - calc(2*var(--space)), var(--max)); margin-inline:auto}
.panel{
  background:var(--panel);
  border:1px solid #eee;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:#fff;
  border-bottom:1px solid #eee;
}
.nav{
  display:flex; align-items:center; gap:18px; padding:14px 0;
}
.brand{font-weight:700; letter-spacing:.3px; color:var(--accent);filter: drop-shadow(5px 5px 5px #aaa);}
.brand a{color:var(--accent); text-decoration:none}
.spacer{flex:1}
.nav a{
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
}
.nav a[aria-current="page"], .nav a:hover{ color:var(--accent); background:transparent }
.nav .cta{
  background:var(--accent);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:10px 16px;
}
.nav .cta:hover{ background:var(--accent-2); }

/* hero */
.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  align-items:center;
  justify-items:center;
  min-height:100vh;
  text-align:center;
  border-radius:calc(var(--radius) + 6px);
}
.hero::before{ content:""; position:absolute; inset:0; background:none; pointer-events:none; }
.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#fdfdfd url("../img/background.png") center center / cover no-repeat;
  opacity:.90;
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:1;
  padding:clamp(24px,6vw,56px);
  display:grid;
  align-content:center;
  gap:14px;
  justify-items:center;
}
.kicker{ color:var(--accent); font-weight:700; letter-spacing:.08em }
.hero h1{ margin:0; font-size:clamp(28px, 4.6vw, 48px); line-height:1.0;font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.hero h2{ margin:0; font-size:clamp(28px, 1.6vw, 48px); line-height:1.4;font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.hero p{ margin:0; color:var(--muted); max-width:60ch }
.buttons{ margin-top:20px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center }
.button{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  font-weight:600; text-decoration:none; cursor:pointer;
}
.button.primary{ background:var(--accent); color:#fff; border:none }
.button.primary:hover{ background:var(--accent-2) }
.button.ghost{ border:1px solid #ddd; background:#fff; color:var(--accent) }
.button.ghost:hover{ background:var(--accent-2); color:#fff }

/* cards */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(12, 1fr) }
.card{ padding:18px; grid-column:span 12; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); }
.card h3{ margin:.2em 0 .4em; font-size:1.1rem; color:var(--accent) }
.card p{ margin:0; color:var(--muted) }
@media (min-width:720px){
  .card--3{ grid-column:span 4 }
  .card--2{ grid-column:span 6 }
}

/* story */
.cover{
  aspect-ratio: 16 / 6;
  border-radius:calc(var(--radius) + 6px);
  background:#fff url("../img/storybg.png") center/cover no-repeat;
  opacity:.60;
  margin-bottom:var(--space);
  box-shadow:var(--shadow);
}
.toc{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 20px }
.tag{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #eee;
  color:var(--muted);
  text-decoration:none;
}
.tag[aria-current="true"], .tag:hover{ background:var(--accent); color:#fff }

details.panel{ padding:0; overflow:hidden; background:#fff; border:1px solid #eee; box-shadow:var(--shadow) }
details>summary{
  list-style:none; padding:16px 18px; cursor:pointer; font-weight:700; position:relative; color:var(--accent);
}
details>summary::-webkit-details-marker{display:none}
details .content{ padding:0 18px 18px; color:var(--muted) }
details:not(:last-child){ margin-bottom:12px }

/* characters */
.character-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)) }
.char{ overflow:hidden; transition:transform .25s ease; background:#fff; border:1px solid #eee; border-radius:var(--radius); box-shadow:var(--shadow) }
.char:hover{ transform:translateY(-2px) }
.char .img{
  aspect-ratio: 4 / 5; background:#f7f7f7 center/cover no-repeat; border-bottom:1px solid #eee
}
.char .meta{ padding:14px 16px }
.badges{ display:flex; gap:6px; flex-wrap:wrap; margin:.2rem 0 .6rem }
.badge{ font-size:.8rem; padding:4px 8px; border-radius:999px; background:var(--accent-2); border:none; color:#fff }

footer{
  margin:40px 0 60px; color:var(--muted); text-align:center; font-size:.9rem; border-top:1px solid #eee; padding-top:20px;
}

/* focus & a11y */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* 共通のユーティリティ：表示切替 */
.only-desktop{ display:initial }
.only-mobile{ display:none }

/* ====== モバイル（スマホ専用ビュー） ====== */
@media (max-width: 720px){
  :root{
    --space: 16px;
    --radius: 12px;
  }

  * { -webkit-tap-highlight-color: transparent }
  a, button { min-height: 44px }

  .nav{ padding:10px 0; position:relative }
  .hamburger{
    display:inline-flex; flex-direction:column; gap:5px; padding:8px 10px;
    background:#fff; border:1px solid #ddd; border-radius:10px; cursor:pointer
  }
  .hamburger span{ width:22px; height:2px; background:#333; display:block }

  .menu{
    position:absolute; left:0; right:0; top:100%; margin:8px auto 0;
    width:min(100% - calc(2*var(--space)), var(--max));
    display:grid; gap:10px; padding:12px;
    border:1px solid #eee; border-radius:12px;
    background:#fff;
    transform-origin: top; transform:scaleY(0); opacity:0; pointer-events:none; transition:.2s ease
  }
  .menu a{ display:block; padding:10px 12px; border-radius:10px; background:#f7f7f7; color:var(--text) }
  .menu .cta{ background:var(--accent); color:#fff; border:none }

  .menu.is-open{ transform:scaleY(1); opacity:1; pointer-events:auto }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

  .hero{
    min-height:100vh;
    display:grid;
    align-items:center;
    justify-items:center;
    border-radius:0;
  }
  .hero-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:#fff url("../img/background.png") center center / cover no-repeat !important;
    opacity:.9;
    z-index:0;
  }
  .hero-content{
    position:relative;
    z-index:1;
    padding:24px;
    align-content:end;
  }
  .hero h1{ font-size: clamp(22px, 6.2vw, 28px) }
  .hero p{ font-size:14px; max-width:none }
  .buttons{ flex-direction:column }
  .button, .button.primary{ width:100%; justify-content:center }

  .grid{ grid-template-columns:1fr !important }
  .card{ grid-column:1 / -1 }
  .card--2, .card--3{ grid-column:1 / -1 }

  .cover{
    aspect-ratio:16 / 9;
    margin-bottom:12px;
    background-image:url("../img/storybg.png") !important;
    opacity:.60;
  }

  .character-grid{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)) }
  .char .meta{ padding:10px 12px }
  .badge{ font-size:.75rem }

  footer{ margin:24px 0 40px; font-size:.85rem }
  .only-desktop{ display:none }
  .only-mobile{ display:initial }
}