.yyy-join{background:#111;border:1px solid #2a2a2a;border-radius:18px;padding:22px 18px;max-width:640px;margin:0 auto;color:#f2f2f2}
.yyy-join .join-title{font-size:clamp(1.6rem,6vw,2.2rem);margin:0 0 6px;color:#F8E008}
.yyy-join .join-comp{background:#F8E008;color:#000;border-radius:12px;padding:10px 14px;font-weight:600;margin:10px 0 14px}
.yyy-join .row{display:grid;grid-template-columns:1fr;gap:0 12px}@media(min-width:600px){.yyy-join .row{grid-template-columns:1fr 1fr}}
.yyy-join label{display:block;font-size:.88rem;color:#ccc;margin:8px 0}
.yyy-join input[type=text],.yyy-join input:not([type]),.yyy-join input[type=email],.yyy-join input[type=tel],.yyy-join select{display:block;width:100%;margin-top:4px;background:#000;color:#fff;border:1px solid #333;border-radius:10px;padding:12px;font-size:16px;font-family:inherit;box-sizing:border-box}
.yyy-join input:focus,.yyy-join select:focus{outline:none;border-color:#F8E008}
.yyy-join fieldset{border:0;padding:0;margin:10px 0}.yyy-join legend{font-size:.88rem;color:#ccc;margin-bottom:6px}
.join-chips{display:flex;flex-wrap:wrap;gap:6px}.join-chips .chk{display:inline-flex;align-items:center;gap:6px;margin:0;border:1px solid #333;border-radius:999px;padding:7px 12px;color:#eee;cursor:pointer}
.join-chips .chk:has(input:checked){border-color:#F8E008;color:#F8E008}
.yyy-join .consent{display:flex;gap:10px;align-items:flex-start;color:#fff;font-size:.92rem;background:#0b0b0b;border:1px solid #2a2a2a;border-radius:12px;padding:12px;margin-top:12px}
.yyy-join .consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#F8E008}
.yyy-join .join-purpose{font-size:.8rem;color:#999;margin:10px 0 14px}.yyy-join .join-purpose a{color:#F8E008}
.yyy-join .btn{width:100%;border:0;cursor:pointer;font-size:1rem}
.yyy-join .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-msg .ok{color:#7ddc7d;font-weight:600}.join-msg .err{color:#ff8a8a;font-weight:600}
.join-band{background:#F8E008;color:#000;padding:18px 0;margin-top:0}
.join-band .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.join-band strong{display:block;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.6rem;letter-spacing:.03em}.join-band span{font-size:.92rem}
.join-band .btn{background:#000;color:#F8E008}

.join-modal{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;justify-content:center;padding:0}
.join-modal[hidden]{display:none}
.join-box{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:joinUp .3s ease}
@media(min-width:700px){.join-modal{align-items:center;padding:20px}}
.join-box .yyy-join{border:1.5px solid #F8E008;border-radius:22px 22px 0 0;padding-top:26px}@media(min-width:700px){.join-box .yyy-join{border-radius:22px}}
.join-x{position:absolute;top:10px;right:12px;z-index:2;background:#1a1a1a;border:1px solid #333;color:#fff;border-radius:50%;width:34px;height:34px;cursor:pointer}
@keyframes joinUp{from{transform:translateY(30px);opacity:0}}
body.yyy-join-on .yyyh-fab,body.yyy-join-on .yyyh-teaser{opacity:0;pointer-events:none}
.join-box .join-title{padding-right:40px;font-size:clamp(1.4rem,5.4vw,2rem)}
.yyy-join .row.names{grid-template-columns:1fr 1fr}
.join-box .yyy-join{padding:22px 16px 18px}.join-box .yyy-join label{margin:6px 0}.join-box .yyy-join input,.join-box .yyy-join select{padding:10px 12px}
.join-home{padding-top:40px}
.yyy-join input.invalid,.yyy-join select.invalid{border-color:#ff5c5c;background:#1a0606}
.yyy-join .ferr{display:block;color:#ff8a8a;font-size:.82rem;font-weight:600;margin-top:5px}.yyy-join .ferr::before{content:"⚠ "}
.join-success{text-align:center;padding:18px 6px 8px;outline:none;animation:joinUp .35s ease}
.join-success h2{color:#fff;font-size:clamp(1.9rem,8vw,2.6rem);margin:.35em 0 .25em}
.join-success p{font-size:1.08rem;color:#e6e6e6;max-width:30em;margin:0 auto 18px;line-height:1.5}
.join-tick{width:96px;height:96px;display:block;margin:0 auto}
.join-tick circle{fill:#1fa84f}.join-tick path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:joinTick .5s .2s ease forwards}
@keyframes joinTick{to{stroke-dashoffset:0}}
.join-success .join-close{max-width:260px}