.b3-page{color:#262421;background:#eeece5;min-height:100svh;font-family:Arial,Noto Sans JP,sans-serif}.b3-page *{box-sizing:border-box}.b3-heading{letter-spacing:.15em;border-bottom:1px solid #29241e20;justify-content:space-between;align-items:center;max-width:1320px;margin:auto;padding:28px 36px;font-size:10px;display:flex}.b3-heading a{color:inherit;text-decoration:none}.b3-layout{grid-template-columns:1fr minmax(300px,420px) 1fr;align-items:center;gap:48px;max-width:1320px;margin:auto;padding:54px 36px;display:grid}.b3-kicker,.b3-try>label{letter-spacing:.23em;color:#76644b;font-size:10px}.b3-intro h1,.b3-try h2{letter-spacing:.05em;margin:24px 0;font:400 clamp(22px,2.6vw,36px)/1.8 Hiragino Mincho ProN,Yu Mincho,serif}.b3-intro p,.b3-try p{color:#777169;font-size:12px;line-height:2}.b3-spec{letter-spacing:.15em;align-items:center;gap:12px;margin-top:38px;font-size:9px;display:flex}.b3-spec i{background:#8e8170;width:25px;height:1px}.b3-demo{color:#f4eee6;background:#171516;min-width:0;box-shadow:0 30px 70px #25201a30}.b3-brand{justify-content:space-between;align-items:center;padding:24px 22px;display:flex}.b3-brand>span:first-child{letter-spacing:.1em;font:21px Georgia,serif}.b3-brand>span:last-child{letter-spacing:.18em;color:#c9bba8;font-size:8px}.b3-scene{aspect-ratio:3/4;isolation:isolate;touch-action:pan-y;cursor:grab;outline-offset:-3px;background:#342c30;width:100%;position:relative;overflow:hidden}.b3-scene:active{cursor:grabbing}.b3-scene:focus-visible{outline:2px solid #d8bb8b}.b3-under,.b3-cover{margin:0;position:absolute;inset:0}.b3-under{transform:scale(calc(.92 + var(--progress)*.08));filter:brightness(calc(.65 + var(--progress)*.35));transition:transform .45s,filter .45s}.b3-under img,.b3-cover>img{object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block}.b3-cover{transform:translateX(var(--drag)) rotate(var(--angle));transform-origin:50% 110%;will-change:transform;transition:transform .48s cubic-bezier(.2,.7,.2,1);box-shadow:0 8px 50px #0007}.b3-scene.is-dragging .b3-cover,.b3-scene.is-dragging .b3-under{transition:none}.b3-scene.is-leaving .b3-cover{transform:translateX(calc(var(--exit)*125%)) rotate(calc(var(--exit)*17deg));transition:transform .52s cubic-bezier(.32,.05,.4,1)}.b3-scene.is-leaving .b3-under{filter:brightness();transform:scale(1)}.b3-shade{background:linear-gradient(#0004,#0000 25% 43%,#100b0ac9);position:absolute;inset:0}.b3-topline{justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:24px;left:24px;right:24px}.b3-topline>span:first-child{letter-spacing:.24em;font-size:9px;line-height:1.6}.b3-topline>span:last-child{font:italic 34px Georgia,serif}.b3-topline small{opacity:.7;font:9px Arial,sans-serif}.b3-caption{animation:.9s .15s both b3-enter;position:absolute;bottom:30px;left:28px;right:24px}.b3-caption>span{letter-spacing:.3em;color:#ead7b9;font-size:9px}.b3-caption h2{letter-spacing:.07em;white-space:pre-line;color:#fff;text-shadow:0 2px 20px #0004;margin:15px 0 20px;font:400 clamp(30px,8vw,43px)/1.5 Hiragino Mincho ProN,Yu Mincho,serif}.b3-caption-rule{background:#e0c5a0;width:34px;height:1px}.b3-caption p{letter-spacing:.25em;margin:13px 0 0;font-size:8px}.b3-vertical{writing-mode:vertical-rl;letter-spacing:.23em;opacity:.75;font-size:7px;position:absolute;top:38%;right:12px}.b3-controls{justify-content:space-between;align-items:center;gap:10px;padding:20px 22px 16px;display:flex}.b3-count{font:italic 28px Georgia,serif}.b3-total{color:#a59b91;font-size:9px}.b3-swipe{letter-spacing:.15em;color:#c5b19a;font-size:7px}.b3-controls>div:last-child{gap:5px;display:flex}.b3-page button{cursor:pointer}.b3-controls button{color:#e8daca;background:0 0;border:1px solid #ffffff30;border-radius:50%;width:36px;height:36px;font-size:18px}.b3-controls button:disabled{opacity:.25;cursor:default}.b3-progress{gap:4px;margin:0 22px;display:flex}.b3-progress span{background:#ffffff20;flex:1;height:2px;transition:background .4s}.b3-progress .active{background:#d8bd93}.b3-bottom{letter-spacing:.16em;color:#a29789;justify-content:space-between;align-items:center;padding:15px 22px 20px;font-size:8px;display:flex}.b3-bottom button{color:#c3b8a9;background:0 0;border:0;min-height:30px;font-size:10px}.b3-upload{text-align:left;color:#29241e;background:0 0;border:1px solid #29241e55;border-left:0;border-right:0;justify-content:space-between;width:100%;margin-top:20px;padding:18px 0;font-size:12px;display:flex}.b3-upload span{font-size:20px}.b3-reset{color:#857c70;background:0 0;border:0;padding:18px 0;font-size:11px}.b3-try .b3-note{color:#958b80;margin-top:30px;font-size:10px}@keyframes b3-enter{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media (width<=900px){.b3-layout{grid-template-columns:minmax(0,420px);justify-content:center;gap:32px;padding:24px}.b3-intro{display:none}.b3-try{padding:15px 0}.b3-try h2{margin:16px 0;font-size:26px}.b3-heading{padding:18px 24px}.b3-demo{box-shadow:0 18px 45px #25201a20}}@media (width<=480px){.b3-layout{gap:16px;padding:0}.b3-heading{padding:16px 20px}.b3-demo{box-shadow:none}.b3-brand{padding:18px 22px}.b3-brand>span:first-child{font-size:20px}.b3-try{padding:28px}.b3-caption h2{font-size:36px}.b3-controls{padding-top:15px}.b3-bottom{padding-bottom:12px}}@media (prefers-reduced-motion:reduce){.b3-page *{transition:none!important;animation:none!important}}.b3-demo,.b3-demo *{box-sizing:border-box}.b3-demo{width:100%;font-family:Arial,sans-serif}.b3-photo-link{z-index:5;position:absolute;inset:0}.b3-cover a:focus-visible{outline-offset:-4px;outline:3px solid #d8bd93}.b3-cover{border:0!important;padding:0!important}.b3-demo button{cursor:pointer}.b3-caption h2,.b3-caption>span{overflow-wrap:anywhere}.b3-demo button:focus-visible{outline-offset:3px;outline:2px solid #d8bd93}
