.howto{padding:clamp(3rem,6vw,4.5rem) 0;background:var(--bg);position:relative;overflow:hidden}.howto:before{content:"";position:absolute;bottom:-20%;left:50%;transform:translate(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(212,0,42,.03) 0%,transparent 60%);pointer-events:none}.howto-header{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}.howto-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 .75rem}.howto-eyebrow svg{width:16px;height:16px;fill:var(--red)}.howto-title{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(1.3rem,2.5vw,1.7rem);font-weight:500;letter-spacing:.02em;line-height:1.2;margin-bottom:.3rem}.howto-jp{display:block;font-family:Shippori Mincho,serif;font-size:13px;color:var(--gray-400);letter-spacing:.15em}.howto-line{display:block;width:40px;height:2px;background:var(--red);margin:.75rem auto 0}.howto-desc{font-size:clamp(13px,1.3vw,14.5px);color:var(--text-muted);line-height:1.65;max-width:520px;margin:.85rem auto 0}.howto .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.howto-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:0;max-width:clamp(640px,70vw,1200px);margin:0 auto;position:relative}.howto-steps:before{content:"";position:absolute;top:clamp(1rem,2vw,1.5rem);bottom:clamp(1rem,2vw,1.5rem);left:calc(50% - .5px);width:1px;background:var(--border);z-index:0}.howto-step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;position:relative;z-index:1;padding:clamp(1rem,2vw,1.5rem) 0}.howto-step:nth-child(2n){direction:rtl}.howto-step:nth-child(2n)>*{direction:ltr}.howto-step-img{border-radius:12px;overflow:hidden;background:var(--gray-50);aspect-ratio:4/3;position:relative}.howto-step-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,1,.36,1)}.howto-step:hover .howto-step-img img,.howto-step:focus-within .howto-step-img img{transform:scale(1.03)}.howto-step-img .placeholder-svg{width:100%;height:100%;object-fit:cover;background:var(--gray-100)}.howto-step-duration{position:absolute;top:.65rem;right:.65rem;background:#0000008c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:10px;font-weight:700;padding:.25rem .55rem;border-radius:5px;display:flex;align-items:center;gap:.25rem}.howto-step-duration svg{width:11px;height:11px;fill:#fff}.howto-step-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--surface);border:2px solid var(--red);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--red);z-index:3;transition:background .2s,color .2s}.howto-step:hover .howto-step-node,.howto-step:focus-within .howto-step-node{background:var(--red);color:#fff}.howto-step-content{display:flex;flex-direction:column;gap:.4rem}.howto-step-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400)}.howto-step-name{font-size:clamp(15px,1.5vw,17px);font-weight:700;color:var(--text);line-height:1.3}.howto-step-jp{font-family:Shippori Mincho,serif;font-size:11px;color:var(--gray-400);letter-spacing:.1em}.howto-step-desc{font-size:clamp(12.5px,1.2vw,13.5px);color:var(--text-muted);line-height:1.6;overflow-wrap:anywhere}.howto-step-tip{display:flex;align-items:flex-start;gap:.5rem;margin-top:.35rem;padding:.55rem .7rem;background:var(--red-light);border-radius:8px;border-left:2px solid var(--red)}.howto-step-tip svg{width:14px;height:14px;fill:var(--red);flex-shrink:0;margin-top:.1rem}.howto-step-tip span{font-size:11.5px;color:var(--text);line-height:1.45;overflow-wrap:anywhere}.howto-step-tip strong{color:var(--red);font-weight:700}[data-theme=dark] .howto{background:var(--bg)}[data-theme=dark] .howto:before{background:radial-gradient(circle,rgba(212,0,42,.02) 0%,transparent 60%)}[data-theme=dark] .howto-steps:before{background:#ffffff0f}[data-theme=dark] .howto-step-img{background:#ffffff0a}[data-theme=dark] .howto-step-node{background:var(--surface);border-color:var(--red)}[data-theme=dark] .howto-step-tip{background:#d4002a0f;border-left-color:var(--red)}@media(max-width:700px){.howto-steps:before{left:1.15rem;top:1rem;bottom:1rem}.howto-step{grid-template-columns:1fr;gap:.85rem;padding-left:3rem}.howto-step:nth-child(2n){direction:ltr}.howto-step-node{left:1.15rem;top:0;transform:translate(-50%);width:32px;height:32px;font-size:11px}.howto-step-img{aspect-ratio:16/9}}@media(max-width:420px){.howto-step{padding-left:2.5rem}.howto-steps:before{left:.95rem}.howto-step-node{left:.95rem;width:28px;height:28px;font-size:10px}}@media(prefers-reduced-motion:reduce){.howto-step-img img,.howto-step-node{transition:none}.howto-step:hover .howto-step-img img,.howto-step:focus-within .howto-step-img img{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/section-whet-howto.css.map */