.join{max-width:540px;margin:0 auto;position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;background:var(--paper);color:var(--green);padding:36px 0 58px}
.join-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.join-route-line{fill:none;stroke:var(--yellow);stroke-width:3;stroke-dasharray:4 8;stroke-linecap:round;stroke-linejoin:round}
.join-route-trace{fill:none;stroke:white;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.join-lead{position:relative;z-index:1;text-align:center;padding:0 18px 13cqw}
.join-eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 14px;color:#b0832e;font:800 clamp(10px,2.9cqw,16px) Arial,sans-serif;letter-spacing:.22em}
.join-eyebrow::before,.join-eyebrow::after{content:"";height:3px;width:28px;background:var(--yellow);border-radius:3px}
.join-lead h2{margin:0;font-size:clamp(22px,7.5cqw,41px);line-height:1.3;letter-spacing:-.05em;font-weight:900}
.join-intro{font-size:clamp(11px,3.4cqw,18px);font-weight:800;line-height:1.75;letter-spacing:-.035em;margin:17px 0 0}
.join-underline{position:relative;display:inline-block;isolation:isolate}
.join-underline::after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:.25em;border-radius:40%;background:#ffe7a1;transform:rotate(-2deg);z-index:-1}
.join-steps{list-style:none;position:relative;z-index:1;margin:0;padding:0 5%}
.join-step{position:relative;min-width:0;margin:0;min-height:57cqw}
.join-step-tag{position:absolute;top:0;display:flex;align-items:center;gap:10px;width:fit-content;margin:0;color:#d5a030;font:800 clamp(13px,3.9cqw,21px) Arial,sans-serif;line-height:1;z-index:2;transform-origin:left center}
.join-step-number{display:grid;place-items:center;width:10cqw;height:10cqw;max-width:54px;max-height:54px;border-radius:50%;background:var(--green);color:var(--paper);font-size:clamp(15px,4cqw,22px);letter-spacing:-.01em}
.join-step-content{position:static;min-width:0}
.join-step-copy{position:absolute;top:13.5cqw;width:51%;z-index:2;min-width:0;text-align:left}
.join-step h3{margin:0;font-size:clamp(21px,7.25cqw,39px);font-weight:900;line-height:1.27;letter-spacing:-.05em;transform-origin:left center}
.join-step-copy p{font-size:clamp(12px,3.8cqw,20px);font-weight:800;line-height:1.6;letter-spacing:-.015em;margin:13px 0 0;color:#496257}
.join-visual-slot{position:absolute;z-index:1}
.join-visual{display:block;position:relative;width:100%;height:auto;color:var(--green);z-index:1}
.join-find .join-step-tag,.join-find .join-step-copy{left:46%}
.join-calendar{left:-3%;top:3cqw;width:45%;margin:0}
.join-apply{min-height:59cqw}
.join-apply .join-step-tag,.join-apply .join-step-copy{left:0}
.join-phone{right:-2%;top:-2cqw;width:47%;margin:0}
.join-phone-text{font-family:SpotRounded,"Hiragino Sans",Meiryo,sans-serif}
.join-enjoy{min-height:0;padding-top:43cqw}
.join-enjoy .join-step-tag,.join-enjoy .join-step-copy{left:0}
.join-enjoy .join-step-copy{width:57%}
.join-enjoy-photo{position:relative;aspect-ratio:1.6;margin:5cqw 0 7cqw;overflow:hidden;border:4px solid var(--paper);border-radius:12% 10% 10% 9% / 16% 13% 15% 16%;background:#735028;box-shadow:0 10px 24px #073f300d;transform:rotate(-6deg);transform-origin:50% 50%;z-index:1}
.join-enjoy-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.join-enjoy-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,#23170e33);pointer-events:none}
.join-enjoy-photo figcaption{position:absolute;z-index:2;right:3%;bottom:6%;display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--yellow);color:var(--green);border-radius:24px;font:900 clamp(10px,3.4cqw,18px) Arial,sans-serif;letter-spacing:-.03em;transform:rotate(3deg)}
.join-enjoy-photo figcaption span{color:#fff2ac;font-size:1.3em}
.join-dot{position:absolute;width:13px;height:13px;border-radius:50%;pointer-events:none;z-index:0;background:var(--yellow)}
.join-dot-one{left:4%;top:115px}.join-dot-two{right:5%;top:61%;width:9px;height:9px;background:var(--green)}
.join-enhanced .join-lead,.join-enhanced .join-step-tag,.join-enhanced .join-step h3,.join-enhanced .join-step-copy p,.join-enhanced .join-visual,.join-enhanced .join-enjoy-photo{opacity:0}
.join-enhanced .join-lead{scale:.85}.join-enhanced .join-step-tag{scale:.55}.join-enhanced .join-step h3{scale:.84;translate:0 7px}.join-enhanced .join-step-copy p{translate:0 10px}.join-enhanced .join-visual,.join-enhanced .join-enjoy-photo{translate:0 15px;scale:.96}
.join-enhanced .join-lead.is-seen{opacity:1;scale:1;transition:opacity .25s,scale .48s cubic-bezier(.2,.75,.25,1.2)}
.join-enhanced .join-lead .join-intro{opacity:0;translate:0 10px}.join-enhanced .join-lead.is-seen .join-intro{opacity:1;translate:0 0;transition:opacity .4s .18s,translate .45s .18s}
.join-enhanced .pin-ready .join-step-tag{opacity:1;scale:1;transition:opacity .2s,scale .44s cubic-bezier(.2,.75,.25,1.22)}
.join-enhanced .title-ready h3{opacity:1;scale:1;translate:0 0;transition:opacity .22s,scale .42s cubic-bezier(.2,.75,.25,1.17),translate .4s}
.join-enhanced .content-ready .join-step-copy p{opacity:1;translate:0 0;transition:opacity .4s,translate .45s ease-out}
.join-enhanced .content-ready .join-visual,.join-enhanced .content-ready .join-enjoy-photo{opacity:1;translate:0 0;scale:1;transition:opacity .5s,translate .55s ease-out,scale .5s cubic-bezier(.2,.75,.25,1.15)}
.join-enhanced .is-past *{transition:none!important}
@media(max-width:359px){.join-lead{padding-inline:13px}.join-step-copy p{margin-top:10px}.join-dot-one{width:9px;height:9px}.join-enjoy-photo figcaption{padding:8px 11px}}
@media(min-width:541px){.join{box-shadow:0 0 48px #073f3018}}
@media(prefers-reduced-motion:reduce){.join-enhanced .join-lead,.join-enhanced .join-intro,.join-enhanced .join-step-tag,.join-enhanced h3,.join-enhanced .join-step-copy p,.join-enhanced .join-visual,.join-enhanced .join-enjoy-photo{opacity:1;translate:none;scale:1;transition:none!important}}