@charset "UTF-8";

/* blind */
.blind {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* font */
.font-orbitron{font-family: "Orbitron", sans-serif;}

/* weight */
.font-sb{font-weight: 600;}

/* color */
.col-v{color:#746FEF}

/* button */
.btn-type01{font-size:1.6rem; padding:0.8rem 3.1rem; font-weight: 500; outline: 1px solid #fff; border-radius: 20px;  display: inline-block;  color:#fff; position:relative; overflow:hidden; transition:color 0.3s ease;}
.btn-type01::before{content:""; position:absolute; inset:0; background:#fff; transform:scaleY(0); transform-origin:bottom; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);; z-index:-1;}
.btn-type01:hover{ color:#000; }
.btn-type01:hover::before{ transform:scaleY(1);}
.btn-type02{font-size:16px; padding:8px 32px; font-weight:500; background:#fff; border-radius:20px; display:inline-block; color:#121212; position:relative; overflow:hidden; transition:color 0.3s ease; z-index:0;}
.btn-type02::before{content:""; position:absolute; inset:0; background:#5B26D3; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); z-index:-1;}
.btn-type02:hover{color:#fff;}
.btn-type02:hover::before{transform:translateY(0);}

.btn-type03{font-size:1.8rem; padding:1.6rem 4.8rem; font-weight: 600; color:#5c21d6; background:#fff; border-radius: 6px; display: inline-flex; gap:1.5rem;}
.btn-type04{font-size:1.8rem; padding:1.6rem 2.8rem; color:#fff; background:#4D07DB; border-radius: 6px; display: inline-flex;}
.btn-type04 img{margin-left:2rem;}

/* toggle-check */
.toggle-input{display: none;}
.toggle-label{position: relative; display: block; width:64px; height:32px; background:#313131; border-radius:20px; cursor: pointer; transition: background-color 0.2s ease;}
.toggle-label:after{content:""; position: absolute; top:4px; left:4px; width:24px; height:24px; background:#D9D9D9; border-radius: 50%; transition: transform 0.3s ease;}
.toggle-input:checked + .toggle-label {background-color: #746FEF;}
.toggle-input:checked + .toggle-label::after {transform: translateX(32px);}
.wave-box{position:relative;}
.wave-line{position: absolute; top:0; left:0; z-index: -1; opacity:1;}
.wave-line02{position: absolute; top:1px; left:2px; z-index: -1; opacity:1;}
.wave-line03{position: absolute; top:2px; left:4px; z-index: -1; opacity:1;}
.wave1{ animation: wave1 2s linear infinite;}
.wave2{ animation: wave2 2s linear infinite; animation-delay: -0.66s;}
.wave3{ animation: wave3 2s linear infinite; animation-delay: -1.33s;}
.toggle-input:checked ~ .wave-line{animation: none; opacity:0;}
.toggle-input:checked ~ .wave-line02{animation: none; opacity:0;}
.toggle-input:checked ~ .wave-line03{animation: none; opacity:0;}

@keyframes wave1{
    0%{ transform:scale(1); opacity:1; }
    70%{ opacity:0.4; }
    100%{ transform:scale(1.45); opacity:0;}
}

@keyframes wave2{
    0%{ transform:scale(1); opacity:1; }
    70%{ opacity:0.4; }
    100%{ transform:scale(1.5); opacity:0; }
}

@keyframes wave3{
    0%{ transform:scale(1); opacity:1; }
    70%{ opacity:0.4; }
    100%{ transform:scale(1.55); opacity:0;}
}

/* block */
.block-tag{display: block;}
.block-tag02{display: block;}

@media all and (max-width:1300px){

    .block-tag02{display: inline;}
}

@media all and (max-width:1024px){

    .btn-type05{font-size:1.6rem; padding:0.8rem 3.1rem; font-weight: 500; outline: 1px solid #fff; border-radius: 20px;  display: inline-block;  color:#fff;}
    .btn-type06{font-size:16px; padding:8px 32px; font-weight:500; background:#fff; border-radius:20px; display:inline-block; color:#121212;}

    /* block */
    .block-tag{display: inline;}
    .block-m-tag{display: block;}
}


@media all and (max-width:767px){

    /* button */
    .btn-type01{font-size:1.2rem; padding:0.6rem 2rem; }
    .btn-type02{font-size:1.2rem; padding:0.6rem 2rem; }
    .btn-type03{font-size:1.6rem; padding:1.2rem 2.4rem;}
    .btn-type03 img{width: 20px;}
    .btn-type04{font-size:1.5rem; padding:1.6rem 3.2rem; }
    .btn-type04 img{width: 20px; margin-left:1.6rem;}
    .btn-type05{font-size:1.2rem; padding:0.6rem 2rem; }
    .btn-type06{font-size:1.2rem; padding:0.6rem 2rem; }

    /* toggle-check */
    .toggle-label{width:56px; height:28px;}
    .toggle-label:after{width:20px; height:20px;}
    .toggle-input:checked + .toggle-label::after{transform: translateX(28px);}
    .wave-line{top:-2px}
    .wave-line02{top:-1px; left:0px;}
    .wave-line03{top:0px; left:0px;}


}