:root { color-scheme:light; --ink:#202020; --gray:#777; --line:#d7d7d7; --blue:#4d8baa; --red:#d46161; --jp-font:"Yomogi","YuKyokasho","UD Digi Kyokasho N-R","Hiragino Maru Gothic ProN","Meiryo UI",sans-serif; --latin-font:"Meiryo UI",sans-serif; font-family:var(--jp-font); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-size:16px; line-height:1.9; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; top:0; left:1rem; padding:.5rem 1rem; color:#fff; background:#222; transform:translateY(-120%); }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.loading-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; align-content:center; gap:.8rem; background:#fff; opacity:0; visibility:hidden; transition:opacity .45s ease,visibility .45s ease; }
.loading-screen.is-ready { opacity:1; visibility:visible; }
.loading-screen.is-loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loading-mark { display:grid; justify-items:center; gap:.8rem; }
.loading-screen img { display:block; width:min(34vw,9rem); height:auto; }
.loading-screen p { margin:0; font-family:var(--jp-font); font-size:1rem; line-height:1; letter-spacing:0; }
@supports (-webkit-touch-callout: none) {
  .loading-screen { display:none; }
}
.site-header { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto; align-items:center; padding:1.5rem 2.5vw; border-bottom:1px solid transparent; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); }
.site-brand { display:flex; align-items:center; gap:.55rem; width:max-content; max-width:16rem; text-decoration:none; }
.site-brand img { display:block; width:2rem; height:2rem; border-radius:50%; object-fit:cover; }
.site-brand span { font-size:clamp(.86rem,1.2vw,1rem); line-height:1.2; white-space:nowrap; }
nav { display:flex; gap:clamp(1rem,2.4vw,2.8rem); }
nav a { font-size:.78rem; text-decoration:none; }
.hero { position:relative; min-height:82svh; display:grid; align-items:start; padding:3rem 5vw 4rem; overflow:hidden; }
.format { position:absolute; top:50%; left:1.4rem; margin:0; font-family:var(--latin-font); font-size:.6rem; font-weight:700; letter-spacing:.14em; writing-mode:vertical-rl; }
.title-block { position:relative; z-index:2; width:min(100%,56rem); margin:2rem auto 0; }
.roman { margin:0 0 1.4rem; font-family:var(--latin-font); font-size:.62rem; font-weight:700; letter-spacing:.18em; }
h1 { margin:0; line-height:1; }
.title-logo { display:block; width:100%; height:auto; }
.catch { display:inline-block; margin:3.2rem 0 0 clamp(1rem,6vw,7rem); padding:.55rem 1.1rem .65rem; border:1px solid #222; border-radius:999px; font-size:clamp(1rem,1.25vw,1.14rem); font-weight:400; }
.coming { position:absolute; right:3vw; bottom:2rem; margin:0; font-family:var(--latin-font); font-size:.65rem; font-weight:700; letter-spacing:.18em; }
.section { display:grid; grid-template-columns:minmax(8rem,.7fr) minmax(0,3fr); gap:4vw; padding:clamp(6rem,11vw,11rem) 5vw; border-top:1px solid var(--line); background:#fff; }
.section>header span { display:block; margin-bottom:2rem; font-family:var(--latin-font); font-size:2.8rem; font-weight:700; }
.section>header p { margin:0; font-family:var(--latin-font); font-size:.65rem; font-weight:700; letter-spacing:.16em; }
.section>div { max-width:67rem; }
h2 { margin:0 0 clamp(3rem,6vw,6rem); font-size:clamp(2.8rem,6vw,6.4rem); font-weight:600; letter-spacing:-.08em; line-height:1.08; }
.intro>div>p { font-size:clamp(1.05rem,1.4vw,1.3rem); }
.character-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.character-slots article { aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem; border:1px dashed #aaa; border-radius:48% 52% 46% 54%; }
.character-slots span,.character-slots p { margin:0; font-family:var(--latin-font); font-size:.62rem; font-weight:700; letter-spacing:.12em; }
.section-note { margin-top:1.8rem; color:var(--gray); }
.secret-trigger { position:relative; display:block; width:min(25%,12rem); margin:-1rem 0 2rem; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; }
.secret-box { display:block; width:100%; height:auto; }
.secret-message { position:absolute; left:50%; bottom:calc(100% - .25rem); display:block; width:max-content; max-width:calc(100vw - 2.2rem); padding:.22rem .45rem .28rem; border:1px solid #222; border-radius:999px; background:#fff; font-family:var(--jp-font); font-size:.45rem; opacity:0; pointer-events:none; transform:translate(-50%,.25rem); transition:opacity .2s ease,transform .2s ease; }
.secret-message::after { content:""; position:absolute; left:50%; bottom:-.45rem; width:.7rem; height:.7rem; border-right:1px solid #222; border-bottom:1px solid #222; background:#fff; transform:translateX(-50%) rotate(45deg); }
.secret-trigger.is-open .secret-message { opacity:1; transform:translate(-50%,0); }
.salmon-float { position:fixed; z-index:4; right:1.25rem; bottom:1.25rem; display:grid; place-items:center; width:clamp(4.5rem,9vw,7rem); height:clamp(4.5rem,9vw,7rem); padding:0; border:0; background:transparent; cursor:pointer; }
.salmon-float img { display:block; width:100%; height:100%; object-fit:contain; }
.salmon-message { position:absolute; right:0; bottom:calc(100% - .25rem); width:max-content; max-width:calc(100vw - 2.2rem); padding:.45rem .8rem .55rem; border:1px solid #222; border-radius:999px; background:#fff; font-family:var(--jp-font); font-size:.9rem; opacity:0; pointer-events:none; transform:translateY(.4rem); transition:opacity .2s ease,transform .2s ease; }
.salmon-message::after { content:""; position:absolute; right:1.8rem; bottom:-.45rem; width:.7rem; height:.7rem; border-right:1px solid #222; border-bottom:1px solid #222; background:#fff; transform:rotate(45deg); }
.salmon-float.is-open .salmon-message { opacity:1; transform:translateY(0); }
.pin-float { position:fixed; z-index:4; left:1.25rem; bottom:1.25rem; display:grid; place-items:center; width:clamp(4.5rem,9vw,7rem); height:clamp(4.5rem,9vw,7rem); padding:0; border:0; background:transparent; cursor:pointer; }
.pin-float img { display:block; width:100%; height:100%; object-fit:contain; }
.pin-message { position:absolute; left:0; bottom:calc(100% - .25rem); width:max-content; max-width:calc(100vw - 2.2rem); padding:.45rem .8rem .55rem; border:1px solid #222; border-radius:999px; background:#fff; font-family:var(--jp-font); font-size:.9rem; opacity:0; pointer-events:none; transform:translateY(.4rem); transition:opacity .2s ease,transform .2s ease; }
.pin-message::after { content:""; position:absolute; left:1.8rem; bottom:-.45rem; width:.7rem; height:.7rem; border-right:1px solid #222; border-bottom:1px solid #222; background:#fff; transform:rotate(45deg); }
.pin-float.is-open .pin-message { opacity:1; transform:translateY(0); }
.info-list { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.info-list article { width:100%; min-height:8rem; padding:1.4rem; border:1px solid #222; border-radius:1.4rem 2.4rem 1.2rem 2rem; }
.info-list p { margin:0 0 .8rem; font-family:var(--latin-font); font-size:.65rem; font-weight:700; letter-spacing:.14em; }
.info-list strong { font-size:clamp(1.7rem,2.55vw,2.9rem); font-weight:400; white-space:nowrap; }
.info-description { margin:.9rem 0 0; font-size:.92rem; line-height:1.8; }
.info-list p.info-description { font-family:var(--jp-font); font-size:.92rem; font-weight:400; letter-spacing:0; }
.text-link { display:inline-block; margin-top:1.6rem; font-family:var(--latin-font); font-size:.75rem; font-weight:700; letter-spacing:.12em; }
.movie-frame { width:100%; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border:1px solid #222; border-radius:1.2rem 2.4rem 1.1rem 2.2rem; background:#fff; }
.movie-frame iframe { width:100%; height:100%; border:0; }
.movie-placeholder { width:100%; height:100%; display:grid; place-items:center; align-content:center; gap:1.2rem; padding:1.5rem; text-align:center; }
.movie-placeholder span { display:grid; width:4.5rem; height:4.5rem; place-items:center; border:1px solid #222; border-radius:50%; color:#222; background:#fff; font-size:1.1rem; }
.movie-placeholder p,.movie-note { margin:0; }
.movie-placeholder p { font-size:clamp(.95rem,1.3vw,1.1rem); }
.movie-note { margin-top:1rem; color:var(--gray); font-size:.92rem; }
.news-item { display:grid; grid-template-columns:9rem 1fr; gap:2rem; padding:1.6rem 0; border-top:1px solid #222; }
.news-item:last-child { border-bottom:1px solid #222; }
.news-item time { font-family:var(--latin-font); font-size:.7rem; font-weight:700; }
.news-item p { margin:0; }
.social-banners { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.social-banner { min-height:8rem; display:grid; grid-template-columns:3rem minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1.2rem; border:1px solid #222; border-radius:1.4rem 2.8rem 1.2rem 2.5rem; text-decoration:none; }
.social-icon { display:grid; width:3rem; height:3rem; place-items:center; font-family:var(--latin-font); font-weight:700; }
.social-icon img { width:2.8rem; height:2.8rem; display:block; }
.social-banner:nth-child(1) .social-icon img { width:2.2rem; height:2.2rem; }
.social-banner b { font-weight:600; }
.social-banner small { font-family:var(--latin-font); font-size:.58rem; font-weight:700; letter-spacing:.1em; }
footer { display:grid; grid-template-columns:1fr auto; gap:2rem; padding:5rem 5vw 2rem; border-top:1px solid var(--line); background:#fff; }
footer strong { font-size:clamp(1.5rem,3vw,3rem); font-weight:600; }
footer p,footer a { margin:0; font-family:var(--latin-font); font-size:.65rem; font-weight:700; letter-spacing:.08em; }
footer .ai-note { grid-column:1/-1; font-family:var(--jp-font); font-size:.75rem; font-weight:400; letter-spacing:0; color:var(--gray); }
footer>p:last-child { grid-column:1/-1; padding-top:4rem; border-top:1px solid var(--line); }
.secret-page-main { min-height:calc(100svh - 6rem); display:grid; justify-items:center; align-content:center; gap:1.2rem; padding:5rem 1.1rem 8rem; text-align:center; }
.secret-page-main .roman { margin:0; }
.secret-page-main h1 { margin:0; font-size:clamp(2.5rem,7vw,6rem); font-weight:500; }
.secret-page-main img { display:block; width:min(80vw,34rem); height:auto; }
.secret-page-main p:not(.roman) { margin:0; font-size:clamp(1rem,1.4vw,1.25rem); }
@media (max-width:760px) {
  .site-header { grid-template-columns:1fr; padding:1.1rem; }
  .site-brand img { width:1.9rem; height:1.9rem; }
  .site-brand span { font-size:.82rem; }
  nav { grid-column:1/-1; justify-content:space-between; gap:.7rem; margin-top:1rem; }
  nav { flex-wrap:wrap; }
  nav a { font-size:.66rem; }
  .hero { grid-template-columns:1fr; gap:2.5rem; padding:1.5rem 1.1rem 4rem; }
  .format { display:none; }
  .title-block { width:100%; }
  .title-logo { width:100%; }
  .catch { margin-top:1.4rem; margin-left:1.2rem; }
  .catch { max-width:calc(100% - 1.2rem); }
  .coming { position:static; }
  .section { grid-template-columns:1fr; padding-inline:1.1rem; }
  .section>header { display:flex; align-items:baseline; gap:1rem; }
  .section>header span { margin:0; font-size:1.6rem; }
  h2 { font-size:clamp(1.9rem,8.5vw,3.2rem); line-height:1.24; }
  .character-slots { grid-template-columns:1fr 1fr; }
  .character-slots article:last-child { grid-column:1/-1; aspect-ratio:2/1; }
  .news-item { grid-template-columns:1fr; gap:.3rem; }
  .info-list { grid-template-columns:1fr; }
  .secret-trigger { width:min(42vw,9rem); }
  .social-banners { grid-template-columns:1fr; }
  .social-banner { min-height:5.8rem; grid-template-columns:2.6rem minmax(0,1fr) auto; }
  .social-icon { width:2.6rem; height:2.6rem; }
  .social-icon img { width:2.4rem; height:2.4rem; }
  .social-banner:nth-child(1) .social-icon img { width:1.9rem; height:1.9rem; }
  footer { grid-template-columns:1fr; padding-inline:1.1rem; }
  footer>p:last-child { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }