.obc{--bg:#f7f4ed;--ink:#1a1a2e;--soft:#7c766b;--pill:#e6e0d4;--paper:#f3efe6;--dash:#b9b2a3;--kr:var(--font-sans),system-ui,sans-serif;--jp:"Hiragino Sans","Noto Sans JP",var(--font-sans),sans-serif;--ms:5600ms;color-scheme:light;position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--ink);font-family:var(--kr);overflow:hidden;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}.obc *{box-sizing:border-box}.obc .app{height:100%;max-width:430px;margin:0 auto;flex-direction:column;padding:18px max(24px,env(safe-area-inset-left,0px)) 22px;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:pan-y}.obc .app,.obc .top{position:relative;display:flex}.obc .top{justify-content:space-between;align-items:center;height:40px;z-index:5}.obc .top b{font-weight:900;font-size:21px;letter-spacing:-.03em}.obc .top button{all:unset;cursor:pointer;color:var(--soft);font-size:15px;padding:10px 0 10px 16px}.obc .stage{position:relative;flex:1;min-height:0}.obc .slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .45s ease}.obc .slide.on{opacity:1}.obc .art{position:relative;flex:1;min-height:0}.obc .box{position:absolute;left:50%;top:50%;width:340px;transform-origin:50% 50%}.obc .copy{padding-top:6px}.obc .h{margin:0;font-weight:900;font-size:clamp(32px,9.6vw,40px);line-height:1.17;letter-spacing:-.05em}.obc .h span{display:block;overflow:hidden;padding-bottom:.06em}.obc .h span i{display:block;font-style:normal;transform:translateY(105%)}.obc .sub{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--soft);opacity:0}.obc .on .h span i{animation:obc-up .7s cubic-bezier(.2,.9,.2,1) forwards}.obc .on .h span:nth-child(2) i{animation-delay:.09s}.obc .on .sub{animation:obc-fade .6s .35s forwards}.obc .foot{position:relative;z-index:5}.obc .bars{display:flex;gap:6px;justify-content:center;margin:20px 0 16px}.obc .bars i{width:30px;height:4px;border-radius:4px;background:#e1dbcf;overflow:hidden;position:relative}.obc .bars i.cur:after,.obc .bars i.done:after{content:"";position:absolute;inset:0;background:var(--ink);border-radius:4px;transform-origin:left}.obc .bars i.cur:after{transform:scaleX(0);animation:obc-fill var(--ms) linear forwards}.obc .cta{all:unset;display:flex;align-items:center;justify-content:center;width:100%;height:58px;border-radius:999px;background:var(--ink);color:#f7f4ed;font-weight:700;font-size:17px;cursor:pointer;transition:transform .12s}.obc .cta:active{transform:scale(.97)}.obc .cta:focus-visible,.obc .top button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.obc .paused .bars i.cur:after,.obc .paused .slide *{animation-play-state:paused!important}@media(max-width:900px){.obc .hint{display:none}}.obc .sheet{position:absolute;filter:drop-shadow(0 18px 22px rgba(70,55,30,.16)) drop-shadow(0 2px 2px rgba(70,55,30,.12))}.obc .pp{background:var(--paper) var(--tex);background-size:220px;position:relative}.obc .dash{border-top:1.5px dashed var(--dash)}.obc .pill{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 13px;border-radius:999px;background:var(--pill);font-weight:700;font-size:14.5px}.obc .perf{height:10px;background:radial-gradient(circle,var(--bg) 3.2px,transparent 3.8px) 0 50%/15px 10px repeat-x}.obc .num{font-variant-numeric:tabular-nums}.obc .s1 .sheet{left:50%;top:6px;width:322px;margin-left:-161px;transform:rotate(-3deg)}.obc .s1 .rec{padding:22px 20px 8px}.obc .s1 .row{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:10px;padding:9px 0}.obc .s1 .row+.row{border-top:1.5px dashed var(--dash)}.obc .s1 .row .beer,.obc .s1 .row img{width:48px;height:48px;border-radius:50%}.obc .s1 .row b{font-size:17px;font-weight:900;letter-spacing:-.03em}.obc .s1 .row .y{font-weight:700;font-size:16px}.obc .s1 .tot{display:flex;justify-content:space-between;padding:12px 0 6px;border-top:1.5px dashed var(--dash);font-weight:900;font-size:18px}.obc .s1 .stubs{display:grid;grid-template-columns:1fr 1fr;margin-top:-1px}.obc .s1 .stub{padding:12px 20px 18px}.obc .s1 .stub small{display:block;font-weight:700;font-size:14px}.obc .s1 .stub strong{font-size:27px;font-weight:900;letter-spacing:-.03em}.obc .on.s1 .row>:first-child{animation:obc-pop .5s cubic-bezier(.3,1.6,.5,1) both}.obc .on.s1 .row:nth-child(2)>:first-child{animation-delay:.1s}.obc .on.s1 .row:nth-child(3)>:first-child{animation-delay:.2s}.obc .on.s1 .row:nth-child(4)>:first-child{animation-delay:.3s}.obc .s1 .row .pill{opacity:0}.obc .on.s1 .row .pill{animation:obc-stamp .38s cubic-bezier(.3,1.4,.5,1) forwards}.obc .on.s1 .row:first-child .pill{animation-delay:.7s}.obc .on.s1 .row:nth-child(2) .pill{animation-delay:.9s}.obc .on.s1 .row:nth-child(3) .pill{animation-delay:1.1s}.obc .on.s1 .row:nth-child(4) .pill{animation-delay:1.3s}.obc .on.s1 .stub.l{animation:obc-tearL .6s cubic-bezier(.2,.9,.3,1.2) 1.8s forwards}.obc .on.s1 .stub.r{animation:obc-tearR .6s cubic-bezier(.2,.9,.3,1.2) 1.8s forwards}.obc .s2 .orig{left:50%;top:2px;width:214px;margin-left:-107px;transform:rotate(4deg)}.obc .s2 .jp{padding:20px 18px 26px;font-family:var(--jp);font-size:12.5px;line-height:1.95;color:#45434d}.obc .s2 .jp .c{text-align:center;font-weight:700;font-size:15px;margin-bottom:4px}.obc .s2 .jp p{margin:0;display:flex;justify-content:space-between}.obc .s2 .jp .sm{font-size:10.5px;color:#8b867c}.obc .fr{position:absolute;inset:-16px -14px;opacity:0;pointer-events:none}.obc .fr i{position:absolute;width:30px;height:30px;border:0 solid var(--ink)}.obc .fr i:first-child{left:0;top:0;border-width:3.5px 0 0 3.5px;border-radius:10px 0 0 0}.obc .fr i:nth-child(2){right:0;top:0;border-width:3.5px 3.5px 0 0;border-radius:0 10px 0 0}.obc .fr i:nth-child(3){left:0;bottom:0;border-width:0 0 3.5px 3.5px;border-radius:0 0 0 10px}.obc .fr i:nth-child(4){right:0;bottom:0;border-width:0 3.5px 3.5px 0;border-radius:0 0 10px 0}.obc .flash{position:absolute;inset:-30px;background:radial-gradient(closest-side,#fff 55%,rgba(255,255,255,0) 100%);opacity:0;pointer-events:none;z-index:3}.obc .s2 .out{left:50%;top:132px;width:290px;margin-left:-145px;transform:rotate(-1.5deg);z-index:2}.obc .s5 .rv{clip-path:inset(0 0 100% 0)}.obc .s2 .out{filter:none}.obc .s2 .out .rv{position:relative;clip-path:inset(-40px -40px 100% -40px)}.obc .s2 .out .sh{position:absolute;inset:0;box-shadow:0 18px 22px rgba(70,55,30,.16),0 2px 2px rgba(70,55,30,.12)}.obc .s2 .out .in{padding:18px 20px 16px}.obc .s2 .kv{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:15px;opacity:0}.obc .s2 .kv+.kv{border-top:1.5px dashed var(--dash)}.obc .s2 .kv span{color:var(--soft)}.obc .s2 .kv.sum{border-top:1.5px dashed var(--dash)}.obc .s2 .kv b{font-size:19px;font-weight:900;letter-spacing:-.02em}.obc .s2 .items{padding:6px 0 8px;border-top:1.5px dashed var(--dash);opacity:0}.obc .s2 .items .hd{display:flex;justify-content:space-between;font-size:13px;color:var(--soft);padding:2px 0 3px}.obc .s2 .items .hd em{font-style:normal;font-size:11.5px}.obc .s2 .items p{margin:0;display:flex;justify-content:space-between;font-size:11.5px;line-height:1.6;color:#9a9488;opacity:0}.obc .s2 .items p span:first-child:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--dash);margin:0 7px 2px 2px;vertical-align:middle}.obc .on.s2 .items{animation:obc-fade .3s 1.95s forwards}.obc .on.s2 .items p{animation:obc-fade .25s forwards}.obc .on.s2 .items p:first-of-type{animation-delay:2.05s}.obc .on.s2 .items p:nth-of-type(2){animation-delay:2.15s}.obc .on.s2 .items p:nth-of-type(3){animation-delay:2.25s}.obc .on.s2 .items p:nth-of-type(4){animation-delay:2.35s}.obc .s2 .ok{display:flex;justify-content:flex-end;padding-top:10px;opacity:0}.obc .on.s2 .fr{animation:obc-frame 1.1s cubic-bezier(.3,1.4,.5,1) .2s forwards}.obc .on.s2 .flash{animation:obc-flash .55s ease-out 1.05s}.obc .on.s2 .orig{animation:obc-lift .7s cubic-bezier(.2,.8,.2,1) 1.25s forwards}.obc .on.s2 .out .rv{animation:obc-print2 1s cubic-bezier(.4,0,.2,1) 1.35s forwards}.obc .on.s2 .kv{animation:obc-fade .35s forwards}.obc .on.s2 .kv:first-child{animation-delay:1.7s}.obc .on.s2 .kv:nth-child(2){animation-delay:1.85s}.obc .on.s2 .kv.sum{animation-delay:2.5s}.obc .on.s2 .ok{animation:obc-stamp .35s cubic-bezier(.3,1.4,.5,1) 2.75s forwards}.obc .s3 .sheet{left:50%;top:6px;width:322px;margin-left:-161px;transform:rotate(2.5deg)}.obc .s3 .in{padding:22px 22px 26px}.obc .s3 .hd{text-align:center;font-weight:700;font-size:13px;color:var(--soft);font-family:var(--jp);padding-bottom:12px}.obc .s3 .it{display:grid;grid-template-columns:1fr auto;align-items:center;height:56px;border-top:1.5px dashed var(--dash);perspective:500px}.obc .s3 .w{position:relative;height:30px}.obc .s3 .w>*{position:absolute;left:0;top:0;white-space:nowrap;backface-visibility:hidden;transform-origin:50% 50%}.obc .s3 .ja{font-family:var(--jp);font-weight:500;font-size:16px;line-height:30px;color:#4a4752}.obc .s3 .ko{font-weight:900;font-size:19px;line-height:30px;letter-spacing:-.03em;transform:rotateX(-90deg);opacity:0;padding:0 6px;margin-left:-6px;border-radius:999px;background:linear-gradient(var(--pill),var(--pill)) no-repeat 0 0/0 100%}.obc .s3 .y{font-weight:700;font-size:16px}.obc .on.s3 .ja{animation:obc-flipOut .32s forwards}.obc .on.s3 .ko{animation:obc-flipIn .38s forwards}.obc .on.s3 .it:nth-of-type(2) .ja{animation-delay:.6s}.obc .on.s3 .it:nth-of-type(2) .ko{animation-delay:.9s}.obc .on.s3 .it:nth-of-type(3) .ja{animation-delay:.95s}.obc .on.s3 .it:nth-of-type(3) .ko{animation-delay:1.25s}.obc .on.s3 .it:nth-of-type(4) .ja{animation-delay:1.3s}.obc .on.s3 .it:nth-of-type(4) .ko{animation-delay:1.6s}.obc .on.s3 .it:nth-of-type(5) .ja{animation-delay:1.65s}.obc .on.s3 .it:nth-of-type(5) .ko{animation-delay:1.95s}.obc .on.s3 .it.pick .ko{animation:obc-flipIn .38s .9s forwards,obc-mark .5s cubic-bezier(.6,0,.2,1) 2.5s forwards}.obc .s3 .it.pick .y{transition:transform .3s}.obc .on.s3 .it.pick .y{animation:obc-bump .4s 2.6s both}.obc .s3 .it:not(.pick){transition:opacity .4s}.obc .on.s3 .it:not(.pick){animation:obc-dim .4s 2.5s forwards}.obc .s4 .card{position:relative;overflow:hidden;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}.obc .s4 .card .chip{position:relative;width:38px;height:28px;border-radius:7px;background:linear-gradient(135deg,#eceae4,#bdb9b0 55%,#e2dfd8);box-shadow:inset 0 0 0 1px #aaa69c}.obc .s4 .card .lb{position:relative;display:flex;justify-content:space-between;align-items:flex-end;font-weight:900;font-size:16px;letter-spacing:-.02em}.obc .s4 .c1{left:0;top:14px;transform:rotate(-9deg) translateX(-140%);opacity:0}.obc .s4 .c1 .card{width:212px;height:134px;background-color:#fbfaf7}.obc .s4 .c1 .g{position:absolute;font-weight:400;color:#e7e3db;line-height:1;font-family:Georgia,Times New Roman,serif}.obc .s4 .c2{right:4px;top:-4px;transform:rotate(8deg) translateX(140%);opacity:0}.obc .s4 .c2 .card{width:132px;height:206px;padding:14px;background-color:#1f1f25;background-blend-mode:multiply;color:#f3efe6}.obc .s4 .c2 .chip{width:30px;height:23px;margin-left:auto}.obc .s4 .c2 .lb{font-size:14px}.obc .s4 .c2 .pill{background:#3a3a44;color:#f3efe6;height:26px;padding:0 10px;font-size:13px}.obc .s4 .c2 .stk{position:absolute;filter:saturate(.6) brightness(.95)}.obc .s4 .cash{left:92px;top:150px;width:162px;height:76px;transform:rotate(-4deg) translateY(30px);opacity:0}.obc .s4 .cash .pp{height:100%;border-radius:5px;background-color:#ebe6d6;position:relative;overflow:hidden;box-shadow:inset 0 0 0 5px #ebe6d6,inset 0 0 0 6px #d6cfbb}.obc .s4 .cash .gl{position:absolute;inset:10px;border-radius:3px;background:repeating-radial-gradient(circle at 30% 50%,transparent 0 5px,rgba(150,138,110,.12) 5px 6px)}.obc .s4 .cash .wm{position:absolute;right:16px;top:50%;width:40px;height:50px;margin-top:-25px;border-radius:50%;background:radial-gradient(#f3efe3,#e3dcc8);box-shadow:inset 0 0 0 1px #d6cfbb}.obc .s4 .cash .n{position:absolute;font-weight:700;font-size:10px;letter-spacing:.04em;color:#9a9179}.obc .s4 .cash .pill{position:absolute;left:14px;bottom:10px;height:24px;padding:0 10px;font-size:12.5px}.obc .s4 .tk{left:50%;bottom:4px;width:310px;margin-left:-155px;opacity:0;transform:translateY(30px)}.obc .s4 .tk .in{padding:16px 22px 20px}.obc .s4 .tk .who{display:flex;align-items:center;gap:3px;font-weight:700;font-size:16px}.obc .s4 .tk strong{display:block;font-size:38px;font-weight:900;letter-spacing:-.04em;margin-top:2px}.obc .s4 .tk .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--soft);padding-top:10px;margin-top:10px;border-top:1.5px dashed var(--dash)}.obc .on.s4 .c1{animation:obc-inL .7s cubic-bezier(.2,.9,.3,1.1) .15s forwards}.obc .on.s4 .c2{animation:obc-inR .7s cubic-bezier(.2,.9,.3,1.1) .3s forwards}.obc .on.s4 .cash{animation:obc-drop .6s cubic-bezier(.3,1.4,.5,1) .55s forwards}.obc .on.s4 .c1,.obc .on.s4 .c2,.obc .on.s4 .cash{animation-fill-mode:forwards}.obc .on.s4 .tk{animation:obc-rise .6s cubic-bezier(.2,.9,.3,1.1) 1.3s forwards}.obc .s5 .sheet{left:50%;top:0;width:300px;margin-left:-150px;transform:rotate(-1.5deg)}.obc .s5 .in{padding:24px 24px 30px}.obc .s5 .ln{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-size:15.5px}.obc .s5 .ln span{color:var(--soft)}.obc .s5 .ln b{font-weight:700}.obc .s5 .rate{display:flex;justify-content:space-between;margin:8px 0;padding:10px 0;border-block:1.5px dashed var(--dash);font-size:14.5px}.obc .s5 .rate span{color:var(--soft)}.obc .s5 .big{padding-top:8px}.obc .s5 .big span{font-size:14px;color:var(--soft)}.obc .s5 .big strong{display:block;font-size:44px;font-weight:900;letter-spacing:-.045em;line-height:1.1}.obc .stampx{position:absolute;right:30px;top:206px;width:86px;height:86px;border-radius:50%;border:3px solid #c4503c;color:#c4503c;mix-blend-mode:multiply;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:15px;line-height:1.2;letter-spacing:.06em;opacity:0;transform:rotate(-14deg) scale(1.8);-webkit-mask:var(--grain) 0 0/90px;mask:var(--grain) 0 0/90px}.obc .on.s5 .rv{animation:obc-print 1.6s steps(14) .2s forwards}.obc .on.s5 .stampx{animation:obc-thump .32s cubic-bezier(.5,0,.6,1.4) 2s forwards}.obc .on.s5 .sheet{animation:obc-shake .25s 2.3s}@keyframes obc-up{to{transform:none}}@keyframes obc-fade{to{opacity:1}}@keyframes obc-fill{to{transform:scaleX(1)}}@keyframes obc-pop{0%{transform:scale(.4);opacity:0}}@keyframes obc-stamp{0%{transform:scale(1.5) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}@keyframes obc-tearL{to{transform:translate(-8px,14px) rotate(-4deg)}}@keyframes obc-tearR{to{transform:translate(9px,20px) rotate(5deg)}}@keyframes obc-snap{0%{transform:scale(1.25);opacity:0}to{transform:none;opacity:1}}@keyframes obc-flash{0%{opacity:0}15%{opacity:.95}to{opacity:0}}@keyframes obc-lift{to{transform:translateY(-34px) rotate(-3deg) scale(.8);opacity:.5}}@keyframes obc-frame{0%{transform:scale(1.22);opacity:0}25%{transform:none;opacity:1}78%{opacity:1}to{transform:scale(.96);opacity:0}}@keyframes obc-print{to{clip-path:inset(0 0 0 0)}}@keyframes obc-print2{to{clip-path:inset(-40px -40px -60px -40px)}}@keyframes obc-flipOut{to{transform:rotateX(90deg);opacity:0}}@keyframes obc-flipIn{to{transform:none;opacity:1}}@keyframes obc-mark{to{background-size:100% 100%}}@keyframes obc-bump{50%{transform:scale(1.25)}}@keyframes obc-dim{to{opacity:.35}}@keyframes obc-inL{to{transform:rotate(-9deg);opacity:1}}@keyframes obc-inR{to{transform:rotate(8deg);opacity:1}}@keyframes obc-drop{to{transform:rotate(-4deg);opacity:1}}@keyframes obc-rise{to{transform:none;opacity:1}}@keyframes obc-thump{to{transform:rotate(-14deg) scale(1);opacity:.82}}@keyframes obc-shake{30%{transform:rotate(-1.5deg) translateY(3px)}}@media (prefers-reduced-motion:reduce){.obc .slide *{animation-duration:1ms!important;animation-delay:0s!important}}