/*! © 2026 youside.me — 絵巻フレーム (Emaki Frame). All rights reserved. 無断での複製・転載・改変・再配布を禁じます。 https://youside.me */
@import url(effects.css);#intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer;font-family:var(--serif, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif)}#intro .bk{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(var(--c),.55),rgba(10,6,4,.88) 72%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:bkIn .6s ease-out both}#intro .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#fff 0,rgba(255,233,168,.9) 12%,transparent 46%);opacity:0;animation:flash .9s ease-out .05s both;pointer-events:none}#intro .rays{position:absolute;left:50%;top:46%;width:230vmax;height:230vmax;margin:-115vmax 0 0 -115vmax;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(255,233,168,.22) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 40%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 40%);animation:burst 1.2s cubic-bezier(.1,.8,.2,1) both,spin 60s linear 1.2s infinite}#intro .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#intro .stage{position:relative;width:min(940px,94vw);max-height:90vh;cursor:default}#intro .scroll{position:relative}#intro .paper{position:relative;max-height:88vh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;color:#3b2f26;background:linear-gradient(180deg,rgba(var(--c),.16),rgba(var(--c),0) 38%),repeating-linear-gradient(0deg,rgba(120,90,50,.04) 0 1px,transparent 1px 3px),#f7ecd0;border:2px solid #b8962f;box-shadow:0 0 0 5px rgba(247,236,208,.25),0 0 0 7px rgba(184,150,47,.8),0 0 90px rgba(var(--c),.7),0 20px 70px #000c;clip-path:inset(0 50% 0 50% round 6px);animation:unroll .95s cubic-bezier(.2,.85,.25,1) .25s forwards;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto}#intro .paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-120%);animation:shine 1.4s ease-out 1.15s 1 both}#intro .rl,#intro .rr{position:absolute;top:-10px;bottom:-10px;width:20px;z-index:3;border-radius:6px;background:linear-gradient(90deg,#2b1d13,#7a5a3a 40%,#c49b63 55%,#4a3321);box-shadow:0 0 14px #000a;pointer-events:none}#intro .rl{left:calc(50% - 10px);animation:rollL .95s cubic-bezier(.2,.85,.25,1) .25s forwards}#intro .rr{right:calc(50% - 10px);animation:rollR .95s cubic-bezier(.2,.85,.25,1) .25s forwards}#intro .hd{padding:22px 8px 16px 26px;display:flex;align-items:stretch;border-right:1px dashed rgba(var(--c),.6);background:linear-gradient(180deg,rgba(var(--c),.1),transparent)}#intro .nmwrap{position:relative;display:flex;flex-direction:row;align-items:flex-start;gap:6px}#intro .nm{margin:0;display:flex;flex-direction:column;align-items:center;gap:.05em;font-weight:900;line-height:1;color:rgb(var(--c));white-space:nowrap;text-shadow:0 2px 0 #fff8,0 0 28px rgba(var(--c),.55);animation:nm 1s cubic-bezier(.2,.9,.3,1) .55s both,glow 3s ease-in-out 1.6s infinite}#intro .stamp{position:relative;flex:none;align-self:flex-end;display:flex;flex-direction:column;align-items:center;font-size:15px;line-height:1.15;font-weight:700;color:#fff;background:#b13a2c;padding:7px 6px;border-radius:3px;box-shadow:0 0 0 2px #b13a2c,inset 0 0 0 1px #fff8;transform:rotate(-8deg);animation:stamp .55s cubic-bezier(.2,1.5,.4,1) 1.05s both}#intro .bd{padding:24px 30px 18px 26px;min-width:0}#intro .bd>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) var(--d,1s) both}#intro .rg{display:inline-block;font-size:13px;letter-spacing:.12em;color:#fff;background:rgb(var(--c));padding:2px 14px;border-radius:14px;text-shadow:0 1px 2px #0006}#intro .ct{margin:10px 0 6px;font-size:clamp(20px, 3.4vw, 32px);line-height:1.35;font-weight:800;color:#2b1d13}#intro .sm{margin:0 0 4px;font-size:14.5px;line-height:1.85;color:#4a3b2e}#intro h4{margin:16px 0 6px;font-size:12px;letter-spacing:.2em;color:#8a6a2a;display:flex;align-items:center;gap:8px}#intro h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#b8962f,transparent)}#intro .ft{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}#intro .ft li{position:relative;padding-left:28px;font-size:14px;line-height:1.55;animation:slideIn .6s cubic-bezier(.2,.8,.2,1) var(--d) both}#intro .ft li b{position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;text-align:center;line-height:21px;font-size:12px;color:#fff;background:radial-gradient(circle at 35% 30%,#f1d98a,#b8862b);box-shadow:0 1px 3px #0005}#intro .ev2,#intro .pp2{display:flex;flex-wrap:wrap;gap:8px}#intro button{font:inherit;cursor:pointer}#intro .pr{display:flex;flex-direction:column;align-items:center;gap:2px;width:74px;padding:4px 2px;font-size:11.5px;color:#3b2f26;background:0 0;border:1px solid transparent;border-radius:6px;animation:pop .55s cubic-bezier(.2,1.4,.4,1) var(--d) both}#intro .pr:hover{background:#fff6;border-color:#b8962f}#intro .pr .av{width:54px;height:54px;border-radius:50%;overflow:hidden;background:radial-gradient(#efe0b6,#d8c590);border:2px solid rgb(var(--c));box-shadow:0 2px 6px #0004}#intro .pr .av svg{display:block;width:100%;height:100%}#intro .ec{font-size:13px;padding:4px 11px;color:#3b2f26;background:#fbf3dc;border:1px solid #8a7253;border-left:4px solid rgb(var(--c));border-radius:3px;animation:pop .55s cubic-bezier(.2,1.4,.4,1) var(--d) both}#intro .ec small{color:#7a5f3a;margin-right:6px;font-size:11px}#intro .ec:hover{background:#fff;box-shadow:0 0 0 2px #d7b45a}#intro .tp{margin:16px 0 0;text-align:center;font-size:11.5px;color:#8a7a62;letter-spacing:.15em;animation:rise .7s ease var(--d) both,blink 2.4s ease-in-out 3s infinite}#intro .mt{grid-column:1/-1;height:82px;background:var(--motif) repeat-x center bottom/auto 100%;opacity:.55;border-top:1px solid rgba(var(--c),.35)}#intro .bd.fu{display:flex;flex-direction:column;justify-content:center;min-height:300px;text-align:center}#intro .bd.fu .ct{font-size:clamp(24px, 4.6vw, 44px);line-height:1.6;margin:20px 0 30px;background:linear-gradient(100deg,#2b1d13 20%,#b8862b 50%,#2b1d13 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .7s cubic-bezier(.2,.8,.2,1) var(--d,1s) both,sheen 4s ease-in-out 2s infinite}#intro .mt.fut{background:radial-gradient(ellipse at 50% 100%,rgba(var(--c),.55),transparent 70%);opacity:1;border-top:0}@keyframes sheen{50%{background-position:100% 0}}#intro.nav .paper{animation:none;clip-path:inset(0 0 0 0 round 6px)}#intro.nav .rl{animation:none;left:-12px}#intro.nav .rr{animation:none;right:-12px}#intro.nav .bd>*,#intro.nav .ec,#intro.nav .ft li,#intro.nav .pr{animation-delay:calc(var(--d, 1s) * .2)}#intro.nav .nm{animation-delay:.05s,.6s}#intro.nav .stamp{animation-delay:.25s}#intro.nav .tp{animation-delay:calc(var(--d, 1s) * .2),1.5s}#intro .paper{user-select:none;-webkit-user-select:none}#intro .paper.swout-l{animation:swOutL .24s ease-in forwards!important}#intro .paper.swout-r{animation:swOutR .24s ease-in forwards!important}#intro .paper.swin-r{animation:swInR .38s cubic-bezier(.2,.9,.3,1) both!important}#intro .paper.swin-l{animation:swInL .38s cubic-bezier(.2,.9,.3,1) both!important}#intro .paper.bnc-l{animation:bncL .35s ease!important}#intro .paper.bnc-r{animation:bncR .35s ease!important}@keyframes swOutL{to{opacity:0;transform:translateX(-90px) rotate(-1.5deg);filter:blur(4px)}}@keyframes swOutR{to{opacity:0;transform:translateX(90px) rotate(1.5deg);filter:blur(4px)}}@keyframes swInR{from{opacity:0;transform:translateX(90px) rotate(1.5deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes swInL{from{opacity:0;transform:translateX(-90px) rotate(-1.5deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes bncL{40%{transform:translateX(-26px)}}@keyframes bncR{40%{transform:translateX(26px)}}#intro.rolling .paper{animation:rollup .85s cubic-bezier(.6,0,.35,1) forwards}#intro.rolling .rl{animation:rollLb .85s cubic-bezier(.6,0,.35,1) forwards}#intro.rolling .rr{animation:rollRb .85s cubic-bezier(.6,0,.35,1) forwards}#intro.melt .scroll{animation:melt .95s ease-in forwards}#intro.melt .bk{animation:bkOut .95s ease-in forwards}#intro.melt .flash,#intro.melt .fx,#intro.melt .rays{transition:opacity .7s;opacity:0}#intro.melt{pointer-events:none}#intro.calm .paper,#intro.calm .rl,#intro.calm .rr,#intro.calm.rolling .paper,#intro.calm.rolling .rl,#intro.calm.rolling .rr{animation-duration:.01s;animation-delay:0s}@keyframes bkIn{from{opacity:0}to{opacity:1}}@keyframes bkOut{to{opacity:0}}@keyframes flash{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(1.5)}}@keyframes burst{from{transform:scale(.1) rotate(-30deg);opacity:0}40%{opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes unroll{from{clip-path:inset(0 50% 0 50% round 6px)}to{clip-path:inset(0 0 0 0 round 6px)}}@keyframes rollup{from{clip-path:inset(0 0 0 0 round 6px)}to{clip-path:inset(0 50% 0 50% round 6px)}}@keyframes rollLb{from{left:-12px}to{left:calc(50% - 10px)}}@keyframes rollRb{from{right:-12px}to{right:calc(50% - 10px)}}@keyframes rollL{to{left:-12px}}@keyframes rollR{to{right:-12px}}@keyframes shine{to{transform:translateX(120%)}}@keyframes nm{from{opacity:0;transform:scale(2.2);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}@keyframes glow{50%{text-shadow:0 2px 0 #fff8,0 0 44px rgba(var(--c),.9)}}@keyframes stamp{from{opacity:0;transform:scale(3.2) rotate(-24deg)}to{opacity:.95;transform:scale(1) rotate(-8deg)}}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:scale(.5) translateY(10px)}to{opacity:1;transform:none}}@keyframes blink{50%{opacity:.35}}@keyframes melt{0%{opacity:1;filter:blur(0);transform:none;clip-path:inset(0 0 0 0 round 6px)}100%{opacity:0;filter:blur(22px) saturate(1.6) brightness(1.15);transform:scale(1.14) translateY(-14px);clip-path:inset(0 0 0 0 round 6px)}}@keyframes meltRoll{to{opacity:0;filter:blur(10px)}}@media (max-width:680px){#intro .paper{grid-template-columns:1fr}#intro .hd{padding:16px 16px 6px;border-right:0;border-bottom:1px dashed rgba(var(--c),.6)}#intro .nm{flex-direction:row;font-size:clamp(44px, 16vw, 84px)!important}#intro .nmwrap{align-items:flex-end}#intro .stamp{flex-direction:row;padding:3px 8px}#intro .bd{padding:14px 16px 12px}#intro .ft{grid-template-columns:1fr}}#intro .tb{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:6px;grid-column:1/-1}#intro .nv,#intro .xb{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid rgba(120,80,40,.45);background:rgba(255,250,238,.88);color:#5a3a1e;font:400 24px/1 sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .2s,background .2s}#intro .nv{font-size:26px}#intro .nv:disabled{opacity:.3;cursor:default}#intro .nv:not(:disabled):hover{background:#fff;transform:scale(1.1)}#intro .xb:hover{background:#fff;transform:rotate(90deg) scale(1.08)}#intro .xb:focus-visible{outline:2px solid #c0392b;outline-offset:2px}#intro .fl{align-self:center;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:12px 34px;border-radius:40px;text-decoration:none;color:#fff;font-weight:800;font-size:clamp(16px, 2.4vw, 22px);letter-spacing:.12em;background:linear-gradient(135deg,#e0a53a,#b8641f);box-shadow:0 0 0 2px #fff8 inset,0 4px 18px rgba(var(--c),.8),0 0 36px rgba(var(--c),.6);text-shadow:0 1px 3px #0007;animation:pop .6s cubic-bezier(.2,1.4,.4,1) var(--d,1.5s) both,pulse 2.4s ease-in-out 2.4s infinite;transition:transform .2s}#intro .fl small{font-size:11px;font-weight:600;letter-spacing:.1em;opacity:.85}#intro .fl:hover{transform:translateY(-2px) scale(1.04)}#intro .fl:focus-visible{outline:3px solid #fff;outline-offset:3px}#intro.nav .fl{animation-delay:.35s,1.2s}@keyframes pulse{50%{box-shadow:0 0 0 2px #fff8 inset,0 4px 18px rgba(var(--c),.9),0 0 60px rgba(var(--c),.95)}}.fi{display:block;width:100%;height:100%;object-fit:cover}#intro .tb{position:absolute;top:10px;right:10px;z-index:6;animation:rise .5s ease 1.1s both}#intro.nav .tb{animation:none}#intro.rolling .tb{opacity:0;transition:opacity .2s}#intro .stage .scroll{position:relative}@media (max-width:680px){#intro .paper{grid-template-columns:minmax(0,1fr)}#intro .hd{padding-top:54px;min-width:0}#intro .nm{font-size:clamp(30px, calc(68vw / var(--n, 4)), 84px)!important}}