:root {
  --ink: #332b3a;
  --pink: #ff5d9e;
  --yellow: #ffc83d;
  --blue: #4da7ff;
  --mint: #57dba0;
  --cream: #fff9fb;
  --surface: #ffffff;
  --line: rgba(51,43,58,.1);
  --shadow: 0 24px 70px rgba(89,64,93,.13);
}
* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; color: var(--ink); background: var(--cream); font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; line-height: 1.8; overflow-x: hidden; }
img,video,svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: white; border-radius: 1rem; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; height: 72px; padding: 0 clamp(1.2rem,4vw,4.5rem); display: flex; align-items: center; justify-content: space-between; background: rgba(255,249,251,.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.8); }
.brand,.footer-brand { text-decoration: none; font-weight: 900; font-size: 1.5rem; letter-spacing: -.04em; color: var(--pink); }
nav { display: flex; gap: clamp(1rem,3vw,2.6rem); }
nav a { font-size: .9rem; font-weight: 700; text-decoration: none; position: relative; }
nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-.35rem; height:3px; background:var(--pink); border-radius:3px; transition:.25s; }
nav a:hover::after,nav a:focus-visible::after { right:0; }
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 7rem 1.5rem 5rem; isolation: isolate; background: radial-gradient(circle at 50% 42%, #fff 0 24%, transparent 56%), linear-gradient(140deg,#fff6fa 5%,#fffde8 48%,#eff9ff 100%); }
.hero::before { content:""; position:absolute; z-index:-1; width:min(80vw,850px); aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.72); filter:blur(2px); box-shadow:var(--shadow); }
.hero-copy { max-width: 900px; text-align: center; }
.hero-logo { width:min(780px,92vw); margin: 0 auto 1.5rem; mix-blend-mode:multiply; }
.hero-copy>p:not(.eyebrow) { font-weight: 700; font-size:clamp(1rem,2.1vw,1.28rem); letter-spacing:.06em; }
.eyebrow { margin:0 0 1.2rem; font:800 .75rem/1.4 ui-rounded,"Arial Rounded MT Bold",sans-serif; letter-spacing:.19em; color:#8c7b91; }
.button { display:inline-flex; gap:.7rem; align-items:center; margin-top:1.5rem; padding:.85rem 1.4rem; border-radius:99px; background:var(--ink); color:white; text-decoration:none; font-weight:800; box-shadow:0 10px 24px rgba(51,43,58,.2); transition:transform .2s; }
.button:hover { transform:translateY(-3px); }
.scroll-note { position:absolute; bottom:1.3rem; margin:0; writing-mode:vertical-rl; font:bold .65rem/1 sans-serif; letter-spacing:.2em; color:#a596aa; }
.floaters i { position:absolute; display:block; border-radius:50%; opacity:.8; animation:float 5s ease-in-out infinite; }
.floaters i:nth-child(1){ width:36px;height:36px;background:var(--pink);left:9%;top:26%; }
.floaters i:nth-child(2){ width:22px;height:22px;background:var(--mint);right:12%;top:30%;animation-delay:-2s; }
.floaters i:nth-child(3){ width:28px;height:28px;background:var(--yellow);left:16%;bottom:18%;animation-delay:-3s; }
.floaters i:nth-child(4){ width:17px;height:17px;background:var(--blue);right:18%;bottom:19%;animation-delay:-1s; }
@keyframes float { 50% { transform:translateY(-18px) rotate(10deg); } }
.section { padding:clamp(5rem,10vw,9rem) clamp(1.2rem,5vw,5rem); }
.section-heading { max-width:1080px; margin:0 auto 3.5rem; }
.section-heading.centered { text-align:center; }
h2 { margin:.2rem 0 1rem; font-size:clamp(2rem,5vw,4.4rem); line-height:1.28; letter-spacing:-.045em; }
.section-heading>p:last-child { font-weight:600; }
.origin { background:#fff; }
.origin-grid { max-width:1080px; margin:auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:clamp(2rem,6vw,5rem); align-items:center; }
.origin-grid>*,.team-grid>*,.character-grid>* { min-width:0; }
.origin-image { margin:0; border-radius:38% 62% 53% 47% / 47% 42% 58% 53%; overflow:hidden; background:#f5f0f5; box-shadow:var(--shadow); }
.origin-image img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.origin-copy { font-size:1.05rem; }
.signature { margin-top:2rem; padding-top:1.7rem; border-top:1px dashed #d9cfdc; }
.signature strong { font-size:1.45rem; color:var(--pink); }
.teams { background:linear-gradient(180deg,#fff9fb,#f6fbff); }
.team-grid { max-width:1180px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.team-card { overflow:hidden; position:relative; padding:2rem; border-radius:40px; box-shadow:var(--shadow); }
.team-pofutto { background:linear-gradient(145deg,#fff1b8,#fff); }
.team-fuwatto { background:linear-gradient(145deg,#dff5ff,#fff0fa); }
.team-card img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:28px; background:#fff; }
.team-card>p { text-align:center; margin:1.5rem 0 .4rem; font-weight:700; }
.team-label { text-align:center; margin-bottom:1rem; }
.team-label span { font:bold .68rem sans-serif; letter-spacing:.22em; color:#8d7b90; }
.team-label h3 { margin:.15rem 0 0; font-size:2.3rem; line-height:1.1; }
.team-label p { margin:0; font:bold .8rem sans-serif; letter-spacing:.12em; }
.friends { background:#fff; }
.filter { display:flex; justify-content:center; gap:.55rem; margin:-1rem auto 2.5rem; }
.filter button { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:99px; padding:.65rem 1.2rem; cursor:pointer; font-weight:800; }
.filter button.active { background:var(--ink); color:#fff; }
.character-grid { max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:1.15rem; }
.character-card { position:relative; border:1px solid var(--line); border-radius:28px; background:linear-gradient(#fff,#fffafb); padding:.8rem .8rem 1rem; cursor:pointer; text-align:left; color:var(--ink); box-shadow:0 10px 30px rgba(75,48,75,.07); transition:transform .25s,box-shadow .25s,opacity .2s; }
.character-card:hover,.character-card:focus-visible { transform:translateY(-7px); box-shadow:0 20px 38px rgba(75,48,75,.13); outline:3px solid rgba(255,93,158,.25); }
.character-card[hidden] { display:none; }
.character-card img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:21px; background:#fff; }
.character-card span { display:block; margin:.75rem .25rem 0; font-weight:900; font-size:1.05rem; line-height:1.35; }
.character-card small { display:block; margin:.15rem .25rem 0; color:#8d7b90; font-weight:700; }
.follow { max-width:1180px; margin:5rem auto; border-radius:48px; background:var(--ink); color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:clamp(2.5rem,6vw,5rem); }
.follow h2 { margin-bottom:0; }
.youtube-link { white-space:nowrap; display:inline-flex; gap:.7rem; align-items:center; border-radius:99px; background:#fff; color:var(--ink); padding:1rem 1.4rem; font-weight:900; text-decoration:none; }
footer { padding:4.5rem 1.5rem; text-align:center; border-top:1px solid var(--line); background:#fff; }
footer p { margin:.25rem 0; }
.copyright { font-size:.75rem; color:#918593; margin-top:2rem; }
dialog { width:min(840px,calc(100vw - 2rem)); border:0; border-radius:36px; padding:clamp(1.2rem,4vw,2.5rem); color:var(--ink); box-shadow:0 35px 100px rgba(51,43,58,.3); grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
dialog[open] { display:grid; animation:pop .22s ease-out; }
dialog::backdrop { background:rgba(51,43,58,.42); backdrop-filter:blur(5px); }
dialog img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:24px; background:#fff9fb; }
dialog h2 { font-size:clamp(2rem,5vw,3.5rem); }
dialog small { font-weight:800; color:var(--pink); }
dialog blockquote { margin:1.5rem 0 0; padding:1rem 1.2rem; border-radius:18px; background:#fff5f9; font-weight:800; }
.dialog-close { position:absolute; right:1rem; top:1rem; width:42px; height:42px; border:0; border-radius:50%; background:var(--ink); color:#fff; font-size:1.4rem; cursor:pointer; }
@keyframes pop { from { opacity:0; transform:scale(.96) translateY(10px); } }
@media (max-width:900px){ .character-grid{grid-template-columns:repeat(3,1fr)} .team-grid{grid-template-columns:1fr}.origin-grid{grid-template-columns:1fr}.origin-copy{max-width:680px}.follow{margin:2rem 1rem;align-items:flex-start;flex-direction:column} }
@media (max-width:620px){ .site-header{height:62px}.site-header nav a{display:none}.site-header nav a:last-child{display:block}.hero{padding-top:6rem}.hero-logo{width:100%;max-width:780px;margin-inline:auto}.section{padding-inline:1rem}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.character-card{border-radius:22px;padding:.55rem}.character-card span{font-size:.95rem}.team-card{padding:1rem;border-radius:28px}.origin-image{border-radius:28px}.follow{border-radius:32px}.follow>*{min-width:0}.youtube-link{max-width:100%;white-space:normal;text-align:center}dialog[open]{grid-template-columns:1fr;max-height:90vh;overflow:auto}dialog img{max-height:42vh} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.floaters i{animation:none}*{transition:none!important} }