:root{
  --bg:#050608;         /* 背景（ほぼ黒） */
  --fg:#e8eaf1;         /* 本文 */
  --muted:#a7b1c2;      /* 補助 */
  --brand:#e35d6a;      /* 紅（和） */
  --accent:#2f6c8f;     /* 藍（和） */
  --card:#0e1117;       /* コンポーネント面 */
  --line:#1b2230;       /* ボーダー */
  --chip:#6aa6ff;       /* チップ */
  --gloss:rgba(255,255,255,.05); /* 面のハイライト */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'M PLUS Rounded 1c', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  background:#050608; /* ループを廃止し、黒ベースへ */
  color:var(--fg);
  letter-spacing:.02em;
}
/* 暗いキャンバス質感（和紙/墨のにじみ） */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px),
    radial-gradient(80px 60px at 18% 8%, rgba(255,255,255,.03), transparent 40%),
    radial-gradient(100px 80px at 82% 6%, rgba(255,255,255,.025), transparent 45%);
  mix-blend-mode:soft-light; opacity:.2;
}

img{max-width:100%; display:block}
a{color:inherit}

h1{font-family:'Yusei Magic','M PLUS Rounded 1c',sans-serif; letter-spacing:.03em}
h2,h3{font-family:'Shippori Mincho B1','M PLUS Rounded 1c',serif; letter-spacing:.02em}

.container{width:min(1100px, 94vw); margin-inline:auto; position:relative; z-index:1}

header{position:sticky; top:0; z-index:40;
  backdrop-filter: blur(8px) saturate(130%);
  background:rgba(5,6,8,.65); border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.35)
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:800; letter-spacing:.05em}
.brand__logo{width:28px; height:28px; background:radial-gradient(circle at 35% 35%, var(--brand), #6aa6ff 55%, var(--accent) 100%); border-radius:50%; box-shadow:0 1px 0 var(--gloss) inset, 0 10px 22px rgba(0,0,0,.4)}
.nav a{opacity:.96; text-decoration:none; padding:.5rem .75rem; border-radius:12px}
.nav a:hover{background:#0c1016}
.cta{background:linear-gradient(180deg,var(--brand), #b84b57); color:white; font-weight:800; box-shadow:0 1px 0 var(--gloss) inset, 0 10px 24px rgba(0,0,0,.45)}

.hero{isolation:isolate; position:relative; padding:5rem 0 3.5rem; overflow:hidden}
/* ループ背景は無効化 */
.hero__bg{display:none}
.hero h1{font-size:clamp(1.9rem, 2.6vw + 1rem, 3.1rem); line-height:1.18; margin:0 0 1rem}
.lead{color:var(--muted); font-size:1.05rem}
.hero__art{position:relative; margin-top:2rem; display:grid; grid-template-columns: 1.2fr .8fr; gap:1.2rem}

/* 面に“重さ”を与える共通スタイル */
.surface{background:linear-gradient(180deg,#131722,#0b0f17); border:1px solid var(--line); border-radius:22px; box-shadow:0 1px 0 var(--gloss) inset, 0 -1px 0 rgba(0,0,0,.6) inset, 0 18px 40px rgba(0,0,0,.55)}

.hero__card{padding:1.1rem; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg,#131722,#0b0f17); box-shadow:0 1px 0 var(--gloss) inset, 0 -1px 0 rgba(0,0,0,.55) inset, 0 14px 30px rgba(0,0,0,.5)}
.hero__card h3{margin:.2rem 0 .75rem; font-size:1.05rem}
.hero__chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:999px; background:#101520; border:1px solid var(--line); font-size:.86rem; color:#cfd7ea; box-shadow:0 8px 22px rgba(0,0,0,.35)}
.chip::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--chip)}

/* セクションの“始まり”にオレンジの刷毛帯を入れる */
section{position:relative; padding:4rem 0; border-top:1px solid var(--line)}
section::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:68px; pointer-events:none; opacity:.65;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(550px 54px at 16% 0, rgba(255,158,44,.22), transparent 62%),
    radial-gradient(550px 54px at 50% 0, rgba(255,122,0,.18), transparent 64%),
    radial-gradient(550px 54px at 84% 0, rgba(255,207,83,.16), transparent 62%);
}
section h2{font-size:1.6rem; margin:0 0 1.1rem; display:flex; align-items:center; gap:.6rem}
/* 和っぽい見出しの丸（家紋風ドット） */
section h2::before{content:""; width:14px; height:14px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 6px rgba(227,93,106,.18); display:inline-block}

.story{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.balloon{border-radius:18px; padding:1rem 1.1rem; border:1px solid var(--line); background:linear-gradient(180deg,#131722,#0b0f17); box-shadow:0 1px 0 var(--gloss) inset, 0 -1px 0 rgba(0,0,0,.55) inset, 0 16px 34px rgba(0,0,0,.5)}
.quote{position:relative; padding:1rem 1rem 1.1rem 3.1rem; border-left:4px solid var(--brand); background:#1a1416; border-radius:14px; line-height:1.7; color:#f0e5ef}
.quote::before{content:"👹"; position:absolute; left:.6rem; top:.7rem; font-size:1.25rem}
.mono{font-family:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.94rem}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (min-width: 860px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{border-radius:22px; overflow:hidden; display:flex; flex-direction:column; min-height:320px; background:linear-gradient(180deg,#131722,#0b0f17); border:1px solid var(--line); box-shadow:0 1px 0 var(--gloss) inset, 0 -1px 0 rgba(0,0,0,.6) inset, 0 18px 40px rgba(0,0,0,.55)}
.card__media{aspect-ratio: 3 / 4; background:#090c12; display:flex; align-items:center; justify-content:center}
.card__media img{width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.05)}
.card__body{padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.6rem}
.num{font-variant-numeric:tabular-nums; font-family:"Roboto Mono",ui-monospace; color:#8aa0ff}
.name{font-weight:800}
.meta{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.pill{font-size:.78rem; padding:.28rem .6rem; border-radius:999px; background:#0f131c; border:1px solid #28314a; color:#c5d0ea}
.small{color:#c4cada; font-size:.94rem; line-height:1.7}
.card__actions{margin-top:auto; display:flex; justify-content:space-between; align-items:center}

.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:14px; border:1px solid var(--line); text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 1px 0 var(--gloss) inset, 0 8px 22px rgba(0,0,0,.32);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 1px 0 var(--gloss) inset, 0 10px 26px rgba(0,0,0,.4); background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04))}
.btn--ghost{opacity:.95}

.rules{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.rule{border-radius:18px; padding:1rem 1.1rem; min-height:220px; background:linear-gradient(180deg,#131722,#0b0f17); border:1px solid var(--line); box-shadow:0 1px 0 var(--gloss) inset, 0 -1px 0 rgba(0,0,0,.55) inset, 0 16px 34px rgba(0,0,0,.5)}
.rule h3{margin:.2rem 0 .8rem; font-size:1.05rem}
.rule ul{margin:.2rem 0 0 1rem}

footer{padding:3rem 0; color:#9aa6be}
.foot{display:flex; gap:1rem; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:1.6rem}

dialog{background:linear-gradient(180deg,#131722,#0b0f17); color:var(--fg); border:1px solid var(--line); border-radius:20px; max-width:min(680px, 92vw); box-shadow:0 40px 90px rgba(0,0,0,.65)}
dialog::backdrop{background:rgba(3,5,8,.6)}
.modal__head{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--line)}
.modal__body{display:grid; grid-template-columns: 1fr 1.1fr; gap:1rem; padding:1rem}
.close{all:unset; cursor:pointer; padding:.3rem .55rem; border-radius:10px}
.close:hover{background:#0f131a}

@media (max-width:840px){
  .story{grid-template-columns: 1fr}
  .hero__art{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .modal__body{grid-template-columns:1fr}
}

.notice{position:fixed; right:12px; bottom:14px; background:#0b0f16; border:1px solid var(--line); padding:.65rem .8rem; border-radius:12px; color:#cfd7ea; font-size:.85rem; box-shadow:0 10px 30px rgba(0,0,0,.55)}