@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root { --ink:#0b0b0b; --paper:#f3f0ea; --red:#ed2024; --soft-red:#ffebe7; --line:rgba(255,255,255,.18); --sans:"Noto Sans JP", "Hiragino Sans", sans-serif; --display:"Anton", Impact, sans-serif; --wide:"Archivo Black", "Noto Sans JP", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:#030303; color:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.72; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[id] { scroll-margin-top:92px; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:100; color:#fff; background:var(--red); padding:.7rem 1rem; font-weight:700; }
.skip-link:focus { top:1rem; }
.site-header { position:fixed; z-index:10; top:0; width:100%; height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.25rem, 4vw, 4.5rem); border-bottom:1px solid var(--line); color:#fff; background:#0b0b0b; }
.brand { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--wide); font-size:1.05rem; letter-spacing:-.06em; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:1.45rem; height:1.45rem; color:#fff; background:var(--red); font-family:var(--display); font-size:1.35rem; line-height:1; transform:skew(-13deg); }
.site-header nav { display:flex; height:100%; gap:clamp(1rem, 3vw, 3.25rem); align-items:center; }
.site-header nav a { position:relative; font-family:var(--wide); font-size:.72rem; letter-spacing:.04em; }
.site-header nav a::after { content:""; position:absolute; height:2px; bottom:-7px; left:0; width:0; background:var(--red); transition:width .25s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .site-header nav .is-current::after { width:100%; }
.header-contact { display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem; font-weight:700; border-bottom:1px solid #fff; padding:.2rem 0; }
.eyebrow,.section-kicker,.panel-number { margin:0; color:var(--red); font-family:var(--wide); font-size:.72rem; letter-spacing:.12em; line-height:1.25; }
.site-main { width:min(100%, 780px); margin:0 auto; padding-top:78px; background:var(--ink); overflow:hidden; }
.opening { position:relative; background:#0b0b0b; }
.opening-media { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0b0b0b; }
.opening-video,.opening-fallback { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.opening-video { z-index:1; opacity:0; transition:opacity .16s linear; }
.opening-fallback { z-index:0; opacity:0; }
.opening-curtain { position:absolute; z-index:3; inset:0; display:grid; place-items:center; overflow:hidden; }
.curtain-panel { position:absolute; top:0; bottom:0; width:50.2%; background:#ed2024; transition:transform .8s cubic-bezier(.76,0,.24,1); }
.curtain-panel-left { left:0; border-right:1px solid rgba(255,255,255,.54); }
.curtain-panel-right { right:0; border-left:1px solid rgba(0,0,0,.1); }
.opening-title { position:relative; z-index:1; margin:0; color:#fff; font-size:clamp(2rem,6.35vw,3.4375rem); font-weight:900; letter-spacing:-.1em; line-height:1.17; text-align:center; transition:opacity .22s ease; }
.opening-title span { display:block; white-space:nowrap; }
.opening[data-state="clip1"] .curtain-panel-left,.opening[data-state="done"] .curtain-panel-left,.opening[data-state="error"] .curtain-panel-left { transform:translateX(-101%); }
.opening[data-state="clip1"] .curtain-panel-right,.opening[data-state="done"] .curtain-panel-right,.opening[data-state="error"] .curtain-panel-right { transform:translateX(101%); }
.opening[data-state="clip1"] .opening-title,.opening[data-state="done"] .opening-title,.opening[data-state="error"] .opening-title { opacity:0; }
.opening[data-state="clip1"] .opening-video,.opening[data-state="done"] .opening-video { opacity:1; }
.opening[data-state="error"] .opening-fallback { opacity:1; }
.opening[data-state="done"][data-end-frame="static"] .opening-video { opacity:0; }
.opening[data-state="done"][data-end-frame="static"] .opening-fallback { opacity:1; }
.opening-controls { display:flex; flex-wrap:wrap; gap:.55rem; padding:1rem 1.1rem 1.15rem; background:#0b0b0b; border-top:1px solid rgba(255,255,255,.17); }
.opening-control { min-height:2.35rem; padding:.45rem .7rem; border:1px solid rgba(255,255,255,.46); color:#fff; background:transparent; font-family:var(--sans); font-size:.72rem; font-weight:700; cursor:pointer; }
.opening-control:hover:not(:disabled),.opening-control:focus-visible { border-color:var(--red); background:var(--red); outline:none; }
.opening-control:disabled { opacity:.38; cursor:not-allowed; }
.opening-play { border-color:var(--red); background:var(--red); }
.opening[data-state="ready"] .opening-controls { display:none; }
.opening[data-motion="reduce"] .opening-curtain { display:none; }
.opening[data-motion="reduce"] .opening-fallback { opacity:1; }
.opening[data-motion="reduce"] .opening-controls { display:flex; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.section-shell { padding-left:clamp(1.5rem,7vw,5rem); padding-right:clamp(1.5rem,7vw,5rem); }
.intro { padding-top:clamp(5.5rem,10vw,10rem); padding-bottom:clamp(5.5rem,10vw,10rem); background:var(--paper); color:var(--ink); }
.section-kicker { display:flex; align-items:center; gap:.85rem; }
.section-kicker span { display:grid; place-items:center; width:1.6rem; height:1.6rem; color:#fff; background:var(--red); font-size:.62rem; letter-spacing:0; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,3rem); margin-top:3rem; align-items:end; }
h2 { margin:0; font-size:clamp(2.35rem,5vw,4.4rem); line-height:1.08; letter-spacing:-.09em; font-weight:900; }
h2 > span,.panel-copy h3 > b,.story-list strong > span { display:block; width:max-content; max-width:100%; white-space:nowrap; }
.copy-chunks > span { display:block; width:max-content; max-width:100%; white-space:nowrap; }
.intro-grid h2 { font-size:clamp(2.35rem,4.5vw,2.4rem); }
.intro-grid p { margin:0; font-size:.86rem; line-height:2.05; }
.service-selector { padding:clamp(5rem,8vw,8rem) 0 0; background:var(--red); color:#fff; overflow:hidden; }
.selector-top { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding-bottom:3.2rem; }
.selector-top .section-kicker { color:#fff; }
.selector-top .section-kicker span { background:#0b0b0b; }
.selector-top h2 { margin-top:1rem; font-size:clamp(2.7rem,5.2vw,5.4rem); }
.selector-guide { margin:0; max-width:18rem; font-size:.88rem; line-height:1.8; }
.monster-tabs { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid rgba(255,255,255,.5); }
.monster-tab { position:relative; min-height:185px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1.5rem clamp(1rem,2vw,2.2rem); border:0; border-right:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; text-align:left; cursor:pointer; overflow:hidden; transition:color .25s ease, background .25s ease; }
.monster-tab:last-child { border-right:0; }
.monster-tab::before { content:""; position:absolute; inset:0; opacity:0; background:var(--paper); transition:opacity .25s ease; }
.monster-tab > span { position:relative; z-index:1; }
.tab-num { margin-bottom:auto; font-family:var(--wide); font-size:.64rem; letter-spacing:.08em; }
.tab-name { font-family:var(--wide); font-size:clamp(1rem,1.55vw,1.4rem); letter-spacing:-.05em; }
.tab-type { margin-top:.2rem; font-size:.76rem; }
.tab-portrait { position:absolute; z-index:1; right:.9rem; top:.9rem; width:clamp(4.25rem,8vw,6.5rem); height:clamp(4.25rem,8vw,6.5rem); border:1px solid rgba(255,255,255,.6); border-radius:50%; background-image:url("assets/original.png"); background-repeat:no-repeat; background-size:620% auto; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .25s ease, border-color .25s ease; }
.red-mic .tab-portrait { background-position:4% 33%; }
.red-small .tab-portrait { background-position:80% 69%; }
.black-horns .tab-portrait { background-position:25% 10%; }
.black-map .tab-portrait { background-position:90% 38%; }
.monster-tab:hover .tab-portrait,.monster-tab:focus-visible .tab-portrait,.monster-tab.is-selected .tab-portrait { transform:rotate(-6deg) scale(1.08); border-color:var(--red); }
.monster-tab:hover::before,.monster-tab:focus-visible::before,.monster-tab.is-selected::before { opacity:1; }
.monster-tab:hover,.monster-tab:focus-visible,.monster-tab.is-selected { color:var(--ink); outline:none; }
.monster-tab:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.service-stage { position:relative; min-height:665px; background:#0b0b0b; }
.service-panel { position:relative; display:grid; grid-template-columns:1fr; min-height:0; overflow:hidden; }
.service-panel[hidden] { display:none; }
.service-portrait { position:relative; min-height:0; height:430px; background-image:linear-gradient(0deg,rgba(0,0,0,.52),transparent 55%),url("assets/original.png"); background-repeat:no-repeat; background-size:360% auto; filter:saturate(.9) contrast(1.05); }
.portrait-mic { background-position:4% 33%; }
.portrait-small { background-position:80% 69%; }
.portrait-horns { background-position:25% 10%; }
.portrait-map { background-position:90% 38%; }
.service-panel.is-active .service-portrait { animation:selected-bounce .52s cubic-bezier(.2,.95,.3,1.25) both; }
.panel-copy { position:relative; z-index:2; align-self:center; max-width:none; padding:3.2rem clamp(2rem,6vw,4rem) 3.6rem; }
.panel-number { color:var(--red); }
.panel-copy h3 { margin:1rem 0 1.45rem; color:#fff; font-size:clamp(2rem,3.7vw,4.3rem); line-height:1.14; letter-spacing:-.08em; font-weight:900; }
.panel-copy h3 span { display:block; margin-bottom:.55rem; color:var(--red); font-family:var(--wide); font-size:clamp(.85rem,1.4vw,1.2rem); letter-spacing:-.04em; line-height:1.35; }
.panel-copy h3 b { font:inherit; }
.lead { margin:0; max-width:38rem; color:#dfdbd7; font-size:.95rem; line-height:2.05; }
.service-points { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:2.2rem 0 2.4rem; padding:0; list-style:none; background:#515151; border:1px solid #515151; }
.service-points li { padding:1rem .9rem; background:#161616; color:#fff; font-size:.73rem; line-height:1.65; }
.service-cta,.contact-button { display:inline-flex; align-items:center; gap:1.3rem; padding:1rem 1.25rem; color:#fff; background:var(--red); font-size:.88rem; font-weight:700; transition:background .25s ease, transform .25s ease; }
.service-cta span,.contact-button span { font-size:1.05rem; }
.service-cta:hover,.contact-button:hover { background:#ff4649; transform:translateY(-3px); }
.monster-speech { position:absolute; z-index:3; right:clamp(1.5rem,4vw,4rem); top:clamp(1.5rem,4vw,4rem); width:150px; height:150px; display:grid; place-items:center; padding:1.2rem; color:var(--ink); background:var(--paper); border-radius:50%; text-align:center; font-size:.8rem; font-weight:700; line-height:1.5; transform:rotate(8deg); }
.monster-speech::after { content:""; position:absolute; bottom:-13px; left:22px; width:28px; height:30px; background:var(--paper); clip-path:polygon(0 0,100% 0,0 100%); }
.story { position:relative; padding-top:clamp(6rem,11vw,11rem); padding-bottom:clamp(6rem,11vw,11rem); background:var(--paper); color:var(--ink); }
.story h2 { margin-top:2rem; max-width:49rem; font-size:clamp(2rem,5vw,3.4rem); }
.story-line { height:1px; margin:4rem 0 0; background:rgba(0,0,0,.2); }
.story-line span { display:block; width:38%; height:100%; background:var(--red); }
.story-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0; padding:0; list-style:none; background:rgba(0,0,0,.2); }
.story-list li { min-height:220px; padding:1.5rem; background:var(--paper); }
.story-list li>span { color:var(--red); font-family:var(--wide); font-size:.72rem; }
.story-list strong { display:block; margin-top:2.5rem; font-size:1rem; }
.story-list strong > span { max-width:none; }
.story-list p { margin:.75rem 0 0; font-size:.78rem; line-height:1.8; }
.about { display:flex; flex-direction:column; background:#181818; }
.about-image { min-height:0; height:430px; background:linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,.05)),url("assets/original.png") 48% 20% / cover no-repeat; filter:saturate(.8); }
.about-copy { align-self:center; padding:clamp(4rem,9vw,10rem); }
.about-copy h2 { margin-top:2rem; font-size:clamp(2.3rem,4.3vw,3.45rem); }
.about-copy > p:not(.section-kicker):not(.representative) { max-width:36rem; margin:2.1rem 0 0; color:#d9d5d0; font-size:.95rem; line-height:2.15; }
.representative { margin:2.5rem 0 1.5rem; color:#fff; font-size:.8rem; font-weight:700; }
.text-link { display:inline-flex; gap:.8rem; padding-bottom:.4rem; border-bottom:1px solid var(--red); font-size:.85rem; font-weight:700; }
.final-cta { padding-top:clamp(6rem,11vw,11rem); padding-bottom:clamp(6rem,11vw,11rem); background:var(--red); color:#fff; text-align:center; }
.final-cta .section-kicker { justify-content:center; color:#fff; }
.final-cta .section-kicker span { background:#0b0b0b; }
.final-cta h2 { margin-top:2rem; font-size:clamp(2.15rem,6vw,4rem); }
.final-cta p:not(.section-kicker) { margin:2rem auto 0; font-size:.95rem; }
.contact-button { margin-top:2.5rem; color:var(--ink); background:var(--paper); }
.contact-button:hover { background:#fff; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:92px; padding:1rem clamp(1.5rem,4vw,4.5rem); color:#aaa; background:#0b0b0b; }
.site-footer .brand { color:#fff; }
.site-footer p,.site-footer a:not(.brand) { margin:0; font-family:var(--wide); font-size:.6rem; letter-spacing:.1em; }
.site-footer a:not(.brand) { color:#fff; }

[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-revealed { opacity:1; transform:none; }
@keyframes selected-bounce { 0% { transform:scale(1.025) translateY(15px); } 58% { transform:scale(1.005) translateY(-7px); } 100% { transform:scale(1) translateY(0); } }
@media (max-width: 1100px) {
  .site-header { position:fixed; height:64px; padding:0 1.1rem; } .site-header nav { display:flex; height:auto; gap:0; margin-left:auto; margin-right:1rem; } .site-header nav a { display:none; } .site-header nav a[href="#monsters"] { display:block; font-size:.66rem; white-space:nowrap; } .header-contact { font-size:.68rem; }
  .site-main { padding-top:64px; } .opening-title { font-size:clamp(1.75rem,8.5vw,3.5rem); }
  .intro { padding-top:5rem; padding-bottom:5rem; } .intro-grid { display:block; margin-top:2.3rem; } .intro-grid p { margin-top:1.8rem; font-size:.93rem; }
  .selector-top { display:block; padding-bottom:2.3rem; } .selector-guide { margin-top:1.4rem; }
  .monster-tabs { grid-template-columns:repeat(2,1fr); } .monster-tab { min-height:145px; border-bottom:1px solid rgba(255,255,255,.5); } .monster-tab:nth-child(2) { border-right:0; }
  .service-stage,.service-panel { min-height:auto; } .service-panel { display:flex; flex-direction:column; } .service-portrait { min-height:auto; height:360px; background-size:310% auto; } .portrait-mic { background-position:4% 33%; } .portrait-small { background-position:80% 69%; } .portrait-horns { background-position:25% 10%; } .portrait-map { background-position:90% 38%; }
  .panel-copy { padding:2.7rem 1.25rem 3.4rem; } .panel-copy h3 { font-size:clamp(1.75rem,8vw,3.5rem); } .lead { font-size:.9rem; } .service-points { grid-template-columns:1fr; margin:1.8rem 0 2rem; } .service-points li { padding:.82rem .9rem; } .monster-speech { top:302px; right:1rem; width:112px; height:112px; font-size:.65rem; }
  .story { padding-top:5.5rem; padding-bottom:5.5rem; } .story-line { margin-top:2.8rem; } .story-list { grid-template-columns:1fr 1fr; } .story-list li { min-height:185px; padding:1rem; } .story-list strong { margin-top:1.6rem; font-size:.85rem; } .story-list p { font-size:.68rem; }
  .about { display:flex; flex-direction:column; } .about-image { min-height:auto; height:385px; background-position:48% 18%; } .about-copy { padding:4.7rem 1.25rem 5rem; } .about-copy > p:not(.section-kicker):not(.representative) { font-size:.9rem; }
  .final-cta { padding-top:5.5rem; padding-bottom:5.5rem; } .site-footer { min-height:80px; padding:1rem 1.25rem; } .site-footer p { display:none; }
}
@media (max-width: 360px) { .monster-tab { padding:1rem .85rem; } .tab-name { font-size:.88rem; } .tab-type { font-size:.65rem; } }
@media (max-width: 500px) { .selector-top h2 span { display:block; } .intro-grid h2 { font-size:clamp(2.15rem,11vw,2.4rem); } .story h2 { font-size:clamp(1.85rem,9.3vw,2.7rem); } .about-copy h2 { font-size:clamp(2.1rem,10.5vw,3rem); } .final-cta h2 { font-size:clamp(2rem,10.5vw,3rem); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }