/* vedimharoksable.com — yosegi puzzle box: veneer bands, plates sliding out with a hard step shadow */
:root{--ink:#2B1F17;--ink2:#5A4636;--mizuki:#F2E6CC;--paper:#FBF5E6;--nigaki:#E1B53E;--honey:#CC9648;--enju:#8A5A33;--chanchin:#A8432C;--step:#2B1F17EB;--d:"Dela Gothic One",system-ui,sans-serif;--t:"M PLUS 2",system-ui,sans-serif;--pad:72px}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mizuki);color:var(--ink);font:400 15px/1.45 var(--t);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px dashed var(--chanchin);outline-offset:2px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--mizuki);padding:10px 14px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.m-o{display:none}

/* veneers */
.vn{--ss:var(--s,.3);background-image:var(--vi);background-size:calc(var(--tw)*var(--ss)*var(--lu,1px)) calc(var(--th)*var(--ss)*var(--lu,1px))}
.v-asanoha{--vi:url(/assets/img/v-asanoha.webp);--tw:240;--th:416}
.v-ichimatsu{--vi:url(/assets/img/v-ichimatsu.webp);--tw:192;--th:192}
.v-uroko{--vi:url(/assets/img/v-uroko.webp);--tw:160;--th:160}
.v-yabane{--vi:url(/assets/img/v-yabane.webp);--tw:192;--th:192}
.v-masu{--vi:url(/assets/img/v-masu.webp);--tw:160;--th:160}
.v-saya{--vi:url(/assets/img/v-saya.webp);--tw:192;--th:192}
.lid{position:absolute;overflow:hidden;background:var(--ink)}
.lid-r{position:absolute;left:50%;top:50%;display:flex;gap:calc(6*var(--lu,1px));transform:translate(-50%,-50%) rotate(-40deg) translateX(calc((var(--bw) + 6)*var(--lu,1px)/-2))}
.lid-r i{flex:none;width:calc(var(--bw)*var(--lu,1px));height:calc(var(--dg)*var(--lu,1px));border:2px solid var(--mizuki)}
.band{flex:none;width:100%;height:calc(var(--bh) + 10px);border-block:3px solid var(--ink);padding-block:2px;background-color:var(--mizuki);background-clip:content-box;background-origin:content-box}
.rails{display:block;height:6.5px;border-top:3px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.vw{position:relative;display:inline-block;--sw:2px;--edge:var(--ink);--sd:0px;white-space:nowrap}
.vw::before{content:attr(data-t);position:absolute;left:0;top:0;color:var(--edge);-webkit-text-stroke:calc(var(--sw)*2) var(--edge);text-shadow:var(--sd) var(--sd) 0 var(--ink)}
.vf{position:relative;display:inline-block;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ps{position:relative;flex:none;display:inline-block;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:2px;background:linear-gradient(var(--ink),var(--ink)) center/8px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 8px no-repeat,var(--psb,var(--nigaki))}
.stamp{display:inline-flex;padding:3px 9px;border:1.5px solid var(--st,var(--chanchin));border-radius:4px;color:var(--st,var(--chanchin));transform:rotate(2deg)}
.stamp span{display:block;padding:2px 7px;border:.75px solid currentColor;border-radius:2px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:20px}
.btn{display:inline-block;padding:15px 24px;border:2px solid var(--ink);border-radius:4px;background:var(--nigaki);color:var(--ink);font:700 16px/1.45 var(--t);text-decoration:none;box-shadow:4px 4px 0 var(--step);cursor:pointer;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.dark{background:var(--ink);color:var(--mizuki);box-shadow:4px 4px 0 #2B1F1780}
.btn.pap{background:var(--paper)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--step)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--step)}
.plate{--fr:10px;--shw:5px;display:block;padding:var(--fr);border:2px solid var(--ink);border-radius:4px;box-shadow:var(--shw) var(--shw) 0 var(--step)}
.pl-in{display:flex;flex-direction:column;gap:12px;padding:14px 14px 18px;background:var(--paper);border:1.5px solid var(--ink);border-radius:2px}
.cv{display:block;border:2px solid var(--ink);border-radius:2px;overflow:hidden}
.cv img{width:100%;aspect-ratio:1;object-fit:cover}
.d-o{display:inline}

/* scroll reveal: 3 steps of 12 px with the hard shadow growing in */
.js .slide:not(.is-out):not(.is-done){transform:translateY(36px);box-shadow:0 0 0 var(--step)}
.slide.is-out{animation:slideout .36s steps(3) backwards}
.grid>:nth-child(3n+2) .slide{animation-delay:.08s}
.grid>:nth-child(3n) .slide{animation-delay:.16s}
@keyframes slideout{from{transform:translateY(36px);box-shadow:0 0 0 var(--step)}}

/* dock */
.dock{position:fixed;z-index:50;left:50%;bottom:32px;transform:translateX(-50%);width:min(900px,calc(100% - 24px));display:flex;align-items:center;gap:20px;padding:10px 12px 10px 16px;background:var(--ink);border:2px solid var(--ink);border-radius:4px;box-shadow:4px 4px 0 #2B1F1759;color:var(--mizuki)}
.dock-h{left:48px;transform:none;width:min(790px,calc(100% - 96px))}
.dk-r{flex:1;min-width:0;display:flex;align-items:center;gap:16px}
.dk-r nav{flex:1}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.dock .mark{width:26px;height:26px;border-color:var(--mizuki)}
.dock .lg-t{font-size:16px}
.mark{flex:none;width:30px;height:30px;border:2px solid var(--ink);border-radius:4px;--s:.18}
.lg-t{font:400 20px/1.2 var(--d);letter-spacing:-.01em}
.nav{display:flex;justify-content:center;gap:6px}
.nav a{display:block;padding:7px 11px;border:1px solid transparent;border-radius:4px;font-weight:700;text-decoration:none;line-height:1.45}
.nav a.is-on{background:var(--nigaki);border-color:var(--mizuki);color:var(--ink)}
.nav a:not(.is-on):hover{text-decoration:underline}
.dk-m{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #F2E6CC66;border-radius:4px;font-size:14px;text-decoration:none;white-space:nowrap}
.dk-m:hover{border-color:var(--mizuki)}
.dock :focus-visible{outline-color:var(--mizuki)}

/* hero */
.hero{position:relative;z-index:2;background:var(--nigaki);--h:1px}
.hs{position:relative}
.h1r{display:block;font-weight:700;letter-spacing:-.02em}
.hero h1{display:flex;flex-direction:column;align-items:flex-start;font:inherit}
.vw-h{font-family:var(--d);line-height:.96;letter-spacing:-.02em}
.sf{color:var(--ink)}
.cap a{font-weight:700}
.slip{background:var(--paper);border:2px solid var(--ink);border-radius:4px;transform:rotate(2deg);transform-origin:0 0}
.slip h2{font-weight:800;font-size:inherit}
.slip li{display:flex;align-items:center}
.slip li a{flex:1;font-weight:700;text-decoration:none}
.slip li a:hover{text-decoration:underline}
.slip li span:last-child{font-weight:500;color:var(--chanchin);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.h-pn{position:absolute;border:3px solid var(--ink);border-radius:4px;--s:.34;box-shadow:12px 12px 0 var(--step)}
.h-pe{position:absolute;left:-3px;right:-3px;top:-3px;height:18px;border:2px solid var(--ink);--s:.2}
.h-cs{position:absolute;border-radius:50%;background:#2B1F1759;filter:blur(3px)}
.h-top{position:absolute;max-width:none}
.hd{position:absolute;display:block}

/* sections */
.sec{position:relative;padding:104px var(--pad);display:flex;flex-direction:column;gap:32px}
.sh{display:flex;flex-direction:column;gap:12px}
.h2{font:400 52px/1.08 var(--d);letter-spacing:-.02em;max-width:720px}
.h2.w820{max-width:820px}
.p2{font-size:17px;line-height:1.6;color:var(--ink2);max-width:620px}
.s-g{padding-top:168px;gap:40px}
.s-g .sh{gap:14px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;align-items:start}
.card h3{font:400 26px/1.1 var(--d);letter-spacing:-.01em}
.c-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--ink2)}
.c-o{font-size:15px;line-height:1.6;color:var(--ink2)}
.c-b{align-self:flex-start}
.card{position:relative;transition:box-shadow .16s steps(2)}
.card .pl-in{transition:margin .16s steps(2)}
.c-b::after{content:"";position:absolute;inset:0}
.card:hover,.card:focus-within{--shw:12px}
.card:hover .pl-in,.card:focus-within .pl-in{margin:6px;background:var(--nigaki)}
.card:hover h3,.card:focus-within h3{text-decoration:underline;text-underline-offset:3px}
.card:hover .stamp,.card:focus-within .stamp{--st:var(--ink)}
.card:hover .c-m,.card:focus-within .c-m,.card:hover .c-o,.card:focus-within .c-o{color:var(--ink)}
.card:hover .c-b,.card:focus-within .c-b{background:var(--ink);color:var(--mizuki);box-shadow:4px 4px 0 #2B1F1780;transform:none}
.card .c-b:focus-visible{outline-color:var(--ink)}
.s-x{background:var(--paper)}
.tb{border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--paper)}
.tb table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.tb thead{background:var(--ink)}
.tb thead th{padding:14px 8px 14px 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nigaki);text-align:left}
.tb th:first-child{padding-left:16px}
.tb th:nth-child(1){width:280px}.tb th:nth-child(2){width:150px}.tb th:nth-child(3){width:360px}.tb th:nth-child(4){width:170px}.tb th:nth-child(5){width:140px}
.tb tbody tr{border-top:1px solid #2B1F174D}
.tb tbody tr:nth-child(even){background:var(--mizuki)}
.tb tbody th,.tb td{padding:14px 8px 14px 0;vertical-align:middle;text-align:left;font-weight:400}
.tb tbody th{display:flex;align-items:center;gap:12px;min-height:75px;padding-left:16px;font-size:16px;font-weight:700}
.tb tbody th a{text-decoration:none}
.tb tbody th a:hover{text-decoration:underline}
.sw{flex:none;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:2px;--s:.2}
.s-f{background:var(--nigaki)}
.lid-f{right:0;top:0;width:230px;height:900px}
.f-w{display:flex;flex-direction:column;gap:28px;width:964px;max-width:100%;position:relative}
.f-w .h2{max-width:700px}
.qa{display:flex;gap:40px;padding-block:6px}
.qa h3{flex:none;width:380px;display:flex;gap:12px;font:400 21px/1.2 var(--d)}
.qa p{flex:1;font-size:17px;line-height:1.6}
.ps{--psb:var(--nigaki)}
.s-f .ps{--psb:var(--mizuki)}
.s-c{background:var(--ink);gap:36px;color:var(--mizuki)}
.s-c .p2{color:var(--mizuki)}
.gn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.gn li{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.vw-i{--edge:var(--mizuki);--sw:2.5px;font:400 150px/1 var(--d);letter-spacing:-.02em}
.vw-i .vf{--s:.32;--sm:.2}
.gn h3{font-size:22px;font-weight:800;color:var(--nigaki)}
.gn p{font-size:15px;line-height:1.5}
.s-y{gap:32px}
.shelf{display:flex;gap:28px;margin-right:calc(var(--pad)*-1);padding:0 var(--pad) 14px 0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--enju) transparent}
.shelf li{flex:none;width:280px;display:flex;flex-direction:column;gap:10px}
.fr{display:block;padding:6px;border:2px solid var(--ink);border-radius:4px;box-shadow:5px 5px 0 var(--step);--s:.24}
.shelf h3{font-size:16px;font-weight:700}
.shelf h3 a{text-decoration:none}
.shelf h3 a:hover{text-decoration:underline}
.shelf p{font-size:15px}
.shelf small{font-size:13px;color:var(--ink2)}

/* footer */
.foot{padding-bottom:104px}
.mq{padding:26px 0 30px;background:var(--ink);overflow:hidden}
.mq-t{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq:hover .mq-t,.mq:focus-within .mq-t{animation-play-state:paused}
.mq-g{display:flex;align-items:center;gap:48px;padding-right:48px}
.mq-g a{text-decoration:none}
.vw-m{--edge:var(--mizuki);font:400 96px/1 var(--d);letter-spacing:-.01em}
.vw-m .vf{--s:.32;--sm:.2}
.mq :focus-visible{outline-color:var(--mizuki)}
.inlay{flex:none;width:22px;height:22px;border-radius:2px;background:var(--nigaki)}
@keyframes mq{to{transform:translateX(-50%)}}
.f-b{display:flex;gap:64px;padding:56px var(--pad) 36px}
.f-a{flex:none;width:420px;display:flex;flex-direction:column;gap:14px}
.f-l{font-size:15px;line-height:1.6;color:var(--ink2)}
.f-d{font-size:13px;color:var(--ink2)}
.f-cs{flex:1;display:flex;gap:56px}
.f-c{display:flex;flex-direction:column;gap:10px}
.f-c h2{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.f-c ul{display:flex;flex-direction:column;gap:10px;font-size:15px}
.f-c a:not(.u){text-decoration:none}
.f-c a:not(.u):hover,.f-c button:hover{text-decoration:underline}
.f-c button{padding:0;border:0;background:none;cursor:pointer;font-size:15px}
.f-c2{padding:16px var(--pad) 24px;border-top:1px solid #2B1F1740;font-size:13px;color:var(--ink2)}

/* inner heads */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.crumbs li{display:flex;align-items:center;gap:8px}
.phead{background:var(--nigaki);overflow:hidden;gap:16px}
.phead h1{position:relative;font:400 88px/1 var(--d);letter-spacing:-.03em;max-width:760px}
.phead>*{position:relative}
.phead>.lid{position:absolute}
.phead .lead{font-size:15px;line-height:1.6;max-width:640px;font-size:17px}
.ph-g{padding:56px var(--pad) 64px}
.lid-p{right:0;top:0;width:420px;height:400px}
.ph-a{padding:56px var(--pad) 72px}
.ph-a h1{font-size:80px;max-width:836px;overflow-wrap:anywhere}
.ph-a .lead{font-size:19px;max-width:620px}
.lid-a{right:0;top:0;width:460px;height:420px}
.ph-gd{padding:32px var(--pad) 64px;gap:24px;overflow:visible}
.ph-gd .band{display:none}
.lid-gd{right:0;top:0;width:360px;height:300px}
.gcard{--fr:10px;--shw:8px}
.gcard>.pl-in{flex-direction:row;gap:40px;padding:28px}
.g-cv{flex:none;align-self:flex-start;width:440px}
.g-r{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.g-r h1{font:400 64px/1 var(--d);letter-spacing:-.02em;max-width:none}
.g-s{font-size:18px;line-height:1.6}
.g-m{font-size:13px;font-weight:500;color:var(--enju)}
.g-f{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.facts{width:100%}
.facts div,.kr div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid #2B1F1740}
.facts dt,.kr dt{flex:none;width:130px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--enju)}
.facts dd,.kr dd{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}

/* games index */
.s-idx{flex-direction:row;align-items:flex-start;gap:48px;padding:64px var(--pad) 104px}
.idx{flex:none;width:700px}
.ix{display:flex;align-items:center;gap:18px;padding:20px 18px;border-bottom:1px solid #2B1F174D;text-decoration:none}
.ix-c{display:none}
.ix-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ix h2{font:400 34px/1.1 var(--d);letter-spacing:-.01em}
.ix-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ix-m small{font-size:13px;color:var(--ink2)}
.ix-o{font-size:14px;font-weight:700;text-decoration:underline}
.pv{flex:1;min-width:0;--shw:10px}
.pv .pl-in{gap:14px;padding:16px 16px 20px}
.pv-l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--enju)}
.pv h2{font:400 28px/1.15 var(--d)}
.pv p:not(.pv-l){font-size:15px;line-height:1.6;color:var(--ink2)}
.pv .btn{align-self:flex-start}
@media (min-width:1200px){
  .ix.is-on{background:var(--nigaki);border:2px solid var(--ink);border-radius:4px;box-shadow:5px 5px 0 var(--step);--st:var(--ink);--psb:var(--mizuki)}
  .ix.is-on small{color:var(--ink2)}
}

/* body columns */
.s-b{align-items:center;padding:104px var(--pad)}
.col{width:820px;max-width:100%;display:flex;flex-direction:column;gap:48px}
.c-a{gap:44px}
.blk{display:flex;flex-direction:column;gap:14px}
.blk h2{font:400 34px/1.08 var(--d);letter-spacing:-.02em}
.c-a .blk h2{font-size:32px}
.p{font-size:17px;line-height:1.6}
.pt .p{font-size:15px}
.kk{display:flex;align-items:center;gap:16px;font-size:15px}
kbd{flex:none;width:200px;padding:6px 12px;background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--step);font:700 14px/1.45 var(--t)}
.tips{display:flex;flex-direction:column;gap:14px}
.tips li{display:flex;gap:12px;font-size:17px;line-height:1.6}
.kc .tips li{font-size:15px;align-items:center}
.kc .tips .ps{margin-top:0}
.tips .ps{margin-top:3px}
.two{display:flex;align-items:flex-start;gap:32px}
.pt{flex:1;min-width:0}
.pt .pl-in{gap:10px}
.pt h2{font:400 22px/1.15 var(--d)}
.sim{display:flex;align-items:center;gap:16px;text-decoration:none}
.sim .cv{flex:none;width:88px}
.sim b{display:block;font-size:17px}
.sim small{display:block;font-size:14px;color:var(--ink2)}
.sim:hover b{text-decoration:underline}
.poki{align-self:flex-start;font-size:16px;font-weight:700}
.gq{display:flex;gap:24px}
.gq h3{flex:none;width:280px;font-size:16px;font-weight:700}
.gq p{flex:1;font-size:15px;line-height:1.6;color:var(--ink2)}
.gq+.gq{margin-top:0}
.kc{--shw:8px}
.kc .pl-in{gap:14px}
.kc h2{font:400 30px/1.15 var(--d)}
.kr dt{width:100px}
.kr div{border-bottom:0;border-top:1px solid #2B1F1740;padding:8px 0}

/* legal */
.lhead{background:var(--paper);padding:48px var(--pad) 56px;gap:14px}
.lhead h1{font:400 72px/1 var(--d);letter-spacing:-.02em}
.upd{font-size:14px;font-weight:500;color:var(--enju)}
.s-l{align-items:center;padding:56px var(--pad) 96px}
.c-l{width:760px;gap:32px}
.ps-b .pl-in{gap:8px}
.ps-b .pv-l{font-size:13px;letter-spacing:.1em}
.ps-b .p{font-size:17px}
.ls{display:flex;flex-direction:column;gap:10px}
.ls h2{display:flex;align-items:center;gap:12px;font:400 24px/1.15 var(--d)}
.ls .p{font-size:16px}

/* cookie */
.cookie{position:fixed;z-index:60;right:24px;bottom:112px;width:min(468px,calc(100% - 24px));max-height:calc(100dvh - 130px);overflow:auto}
.cookie .pl-in{padding:20px 20px 22px}
.ck-h{font:400 22px/1.15 var(--d)}
.ck-p{font-size:14px;line-height:1.6}
.ck-acts{display:flex;flex-wrap:wrap;gap:10px 12px}
.ck-l{align-self:flex-start;font-size:13px;font-weight:700}
.ck-manage{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:14px}
.ck-manage label{display:flex;align-items:center;gap:8px}
.ck-manage input{accent-color:var(--chanchin)}

/* desktop hero: Figma coordinates of the 1368 × 900 frame */
@media (min-width:1200px){
  .hero{container-type:inline-size}
  .hs{--u:min(100cqw/1368,1.2px);--h:var(--u);--lu:var(--u);height:calc(900*var(--u))}
  .lid-m{display:none}
  .lid-d{left:calc(664*var(--u));right:0;top:0;bottom:0}
  .h-r1{left:calc(652*var(--u));width:calc(4*var(--u));top:0;bottom:0;background:var(--ink)}
  .h-r2{left:calc(658*var(--u));width:calc(2*var(--u));top:0;bottom:0;background:var(--ink)}
  .h-s1{left:calc(664*var(--u));right:0;top:calc(452*var(--u));height:calc(4*var(--u));background:var(--ink)}
  .h-s2{left:calc(664*var(--u));right:0;top:calc(458*var(--u));height:calc(2*var(--u));background:var(--ink)}
  .h-sh{left:calc(664*var(--u));right:0;top:calc(460*var(--u));height:calc(10*var(--u));background:#2B1F1747}
  .h-op{right:calc(16*var(--u));top:calc(22*var(--u));width:calc(334*var(--u));height:calc(412*var(--u));background:var(--ink);border:3px solid var(--ink);border-radius:2px;box-shadow:inset 6px 6px 14px #0000008C}
  .h-ed{right:calc(4*var(--u));top:calc(10*var(--u));width:calc(358*var(--u));height:calc(12*var(--u));border:2px solid var(--ink);--s:.2}
  .h-st{left:calc(664*var(--u));top:calc(470*var(--u));width:calc(330*var(--u));height:calc(26*var(--u));border:2px solid var(--ink);--s:.22;box-shadow:6px 6px 0 var(--step)}
  .ht{position:absolute;left:calc(64*var(--u));top:calc(116*var(--u));width:calc(580*var(--u));display:flex;flex-direction:column;gap:calc(20*var(--u))}
  .hero h1{gap:calc(20*var(--u))}
  .vw-h{font-size:calc(128*var(--u));--sd:calc(8*var(--u))}
  .vw-h .vf{--s:.36}
  .h1r{font-size:calc(46*var(--u));line-height:1.08}
  .sf{width:calc(500*var(--u));font-size:calc(18*var(--u));line-height:1.6}
  .cta{padding-top:calc(8*var(--u))}
  .cta .btn{font-size:calc(16*var(--u));padding:calc(15*var(--u)) calc(24*var(--u))}
  .cap{display:flex;align-items:center;gap:calc(10*var(--u));width:calc(540*var(--u));padding-top:calc(4*var(--u));font-size:calc(14*var(--u))}
  .cap span{flex:1}
  .ho{position:absolute;inset:0;pointer-events:none}
  .ho a{pointer-events:auto}
  .slip{position:absolute;right:calc(34*var(--u));top:calc(40*var(--u));width:calc(300*var(--u));padding:calc(18*var(--u)) calc(18*var(--u)) calc(20*var(--u));box-shadow:calc(10*var(--u)) calc(10*var(--u)) 0 var(--step);display:flex;flex-direction:column;gap:calc(8*var(--u));font-size:calc(20*var(--u))}
  .slip ul{display:flex;flex-direction:column;gap:calc(8*var(--u))}
  .slip li{gap:calc(10*var(--u));padding-block:calc(2*var(--u));font-size:calc(15*var(--u))}
  .slip li span:last-child{font-size:calc(12*var(--u))}
  .slip>p{font-size:calc(13*var(--u));color:var(--ink2)}
  .h-pn{right:calc(60*var(--u));top:calc(716*var(--u));width:calc(440*var(--u));height:calc(300*var(--u))}
  .h-pe{height:calc(18*var(--u))}
  .h-cs{right:calc(242*var(--u));top:calc(704*var(--u));width:calc(210*var(--u));height:calc(28*var(--u))}
  .h-top{right:calc(208*var(--u));top:calc(438*var(--u));width:calc(280*var(--u));height:calc(302*var(--u))}
}
/* tablet and below: lid strip, text, then the slip and the top */
@media (max-width:1199.98px){
  :root{--pad:40px}
  .lid-d,.hd{display:none}
  .lid-m{position:relative;height:132px}
  .hs::before{content:"";position:absolute;left:0;right:0;top:132px;height:6.5px;border-top:3px solid var(--ink);border-bottom:1.5px solid var(--ink)}
  .ht{padding:20px var(--pad) 0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
  .hero h1{gap:14px}
  .vw-h{font-size:min(72px,20vw);--sd:4px}
  .vw-h .vf{--s:.22}
  .h1r{font-size:30px;line-height:1.1}
  .sf{font-size:15px;line-height:1.6;max-width:600px}
  .cap{display:flex;flex-direction:column;gap:4px;font-size:13px}
  .ho{position:relative;height:320px;margin-top:18px}
  .slip{position:absolute;left:calc(var(--pad) + 4px);top:0;width:230px;padding:14px 14px 16px;box-shadow:7px 7px 0 var(--step);display:flex;flex-direction:column;gap:7px;font-size:17px}
  .slip ul{display:flex;flex-direction:column;gap:7px}
  .slip li{gap:8px;font-size:13px}
  .slip li span:last-child,.slip>p{display:none}
  .h-pn{right:14px;top:250px;width:196px;height:150px;border-width:2.5px}
  .h-pe{height:12px;--s:.14;border-width:1.5px}
  .h-pn{--s:.22}
  .h-cs{right:50px;top:240px;width:110px;height:18px}
  .h-top{right:24px;top:88px;width:150px}
  .s-g{padding-top:136px}
  .grid,.gn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-w{width:calc(100% - 200px)}
  .qa{flex-direction:column;gap:8px}
  .qa h3{width:auto}
  .s-idx{flex-direction:column}
  .idx{width:100%}
  .pv{display:none}
  .ix{padding:12px 0}
  .ix>.ps,.ix-o{display:none}
  .ix-c{display:block;flex:none;width:88px}
  .ix-m .d-o{display:none}
  .ph-a h1,.phead h1{font-size:64px;max-width:calc(100% - 120px)}
  .gcard>.pl-in{flex-direction:column}
  .g-cv{width:min(320px,100%)}
  .f-b{flex-direction:column;gap:32px}
  .f-a{width:100%;max-width:520px}
}
@media (min-width:768px) and (max-width:1199.98px){
  .dock,.dock-h{left:50%;transform:translateX(-50%);width:min(790px,calc(100% - 24px));bottom:20px}
  .lid-f{width:160px}
  .tb{overflow-x:auto}
  .tb table{min-width:960px}
}
/* phone */
@media (max-width:767.98px){
  :root{--pad:16px}
  body{font-size:15px}
  .vn{--ss:var(--sm,var(--s,.3))}
  .band{height:calc(var(--bhm) + 10px)}
  .d-o{display:none}.m-o{display:inline}
  .dock,.dock-h{left:12px;right:12px;bottom:12px;transform:none;width:auto;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px}
  .dk-r{flex-direction:column;align-items:flex-start;gap:12px;width:100%}
  .dk-r nav{width:100%}
  .nav{justify-content:flex-start;gap:4px}
  .nav a{padding:6px 9px;font-size:13px}
  .dock .mark{width:22px;height:22px}
  .dock .lg-t{font-size:15px}
  .dk-m{padding:4px 0;border:0;font-size:12px}
  .sec{padding:56px var(--pad);gap:20px}
  .s-g{padding-top:104px;gap:24px}
  .h2{font-size:30px}
  .p2{font-size:15px}
  .sf{max-width:none}
  .grid{gap:18px 14px}
  .plate{--fr:8px}
  .pl-in{padding:12px 12px 16px}
  .card .pl-in{gap:8px;padding:8px 8px 12px}
  .card h3{font-size:16px}
  .card .c-b{padding:0;border:0;background:none;box-shadow:none;font-size:13px;text-decoration:underline;white-space:nowrap}
  .card .c-b:hover{transform:none;box-shadow:none}
  .card:hover .c-b,.card:focus-within .c-b{background:none;color:var(--ink);box-shadow:none}
  .card:hover .pl-in,.card:focus-within .pl-in{margin:3px}
  .s-x{gap:20px}
  .tb{border:0;border-radius:0;background:none;overflow:visible}
  .tb table,.tb tbody{display:block;width:100%;min-width:0}
  .tb thead{display:none}
  .tb tbody{display:flex;flex-direction:column;gap:20px}
  .tb tbody tr,.tb tbody tr:nth-child(even){display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--mizuki);border:1.5px solid var(--ink);border-radius:4px}
  .tb tbody tr th:first-child{min-height:0;padding:0;gap:10px;font-size:15px}
  .sw{width:22px;height:22px;--sm:.16}
  .tb td{display:flex;gap:8px;padding:0;font-size:13px}
  .tb td::before{content:attr(data-l);flex:none;width:76px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--enju)}
  .tb td:last-child{display:none}
  .lid-f{display:none}
  .f-w{width:100%;gap:18px}
  .qa{padding-block:2px}
  .qa h3{font-size:17px}
  .qa p{font-size:15px}
  .s-c{gap:22px}
  .gn{gap:22px 14px}
  .gn li{gap:12px}
  .vw-i{font-size:76px;--sw:1.5px}
  .gn h3{font-size:16px}
  .gn p{font-size:13px}
  .shelf{gap:16px}
  .shelf li{width:240px}
  .foot{padding-bottom:150px}
  .mq{padding:16px 0 18px}
  .mq-g{gap:24px;padding-right:24px}
  .vw-m{font-size:52px;--sw:1.5px}
  .inlay{width:12px;height:12px}
  .f-b{gap:28px;padding:36px var(--pad)}
  .f-cs{flex-direction:column;gap:22px}
  .f-c2{padding:14px var(--pad) 24px}
  .phead,.ph-g,.ph-a{padding:28px var(--pad) 36px}
  .phead h1,.ph-g h1{font-size:40px;max-width:none}
  .ph-a h1{font-size:36px;max-width:calc(100% - 100px)}
  .phead .lead,.ph-a .lead{font-size:15px}
  .ph-a .lead{max-width:calc(100% - 100px)}
  .lid-p,.lid-gd{display:none}
  .lid-a{width:110px;height:300px}
  .ph-gd{padding:20px var(--pad) 32px;gap:16px}
  .ph-gd .band{display:block}
  .gcard{--shw:8px}
  .gcard>.pl-in{gap:16px;padding:12px 12px 16px}
  .g-cv{width:240px}
  .g-r{gap:10px;width:100%}
  .g-r h1{font-size:34px}
  .g-s{font-size:15px}
  .facts div{flex-direction:column;gap:2px}
  .facts dt{width:auto}
  .s-idx{padding:28px var(--pad) 48px;gap:16px}
  .ix{gap:12px}
  .ix h2{font-size:18px}
  .s-b{padding:56px var(--pad)}
  .col{gap:30px}
  .p,.tips li{font-size:15px}
  .c-a{gap:28px}
  .blk h2,.c-a .blk h2{font-size:24px}
  .c-a .blk h2{font-size:22px}
  kbd{width:130px}
  .two{flex-direction:column;gap:24px;align-items:stretch}
  .gq{flex-direction:column;gap:6px}
  .gq h3{width:auto}
  .kc h2{font-size:22px}
  .lhead{padding:24px var(--pad) 28px}
  .lhead h1{font-size:34px}
  .s-l{padding:28px var(--pad) 48px}
  .c-l{gap:22px}
  .ps-b .p{font-size:15px}
  .ls h2{font-size:19px}
  .ls .p{font-size:15px}
  .cookie{left:16px;right:16px;bottom:140px;width:auto;max-height:calc(100dvh - 156px)}
  .ck-h{font-size:18px}
}
@media (max-width:767.98px) and (max-height:560px){.dk-m{display:none}.cookie{bottom:112px}}
@media (prefers-reduced-motion:reduce){
  .js .slide{transform:none!important}
  .slide.is-out{animation:none}
  .mq-t{animation:none}
  .btn,.card,.card .pl-in{transition:none}
}

.soc{display:flex;align-items:center;gap:4px;margin-left:-12px}.soc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit;transition:opacity .15s}.soc a:hover{opacity:.65}.soc a:focus-visible{outline:2px solid currentColor;outline-offset:-4px}