@charset "utf-8";

@media screen and (max-width:1480px){
    body{
        overflow-x: hidden;

    }
    .tt{
        font-size: 38px;
    }
    /* nav */
    .nav-wrap{
        width: 100%;
        padding: 0 5%;
    }
    /* main */
    .main-wrap .main-text{
        width: 100%;
        padding: 0 5%;
    }
    .main-wrap .ttt{
        font-size: 50px;
    }
    .main-wrap p{
        font-size: 20px;
    }
    .main-cta, .btn{
        margin: 60px 0;
        width: 200px;
        height: 60px;
        border-radius: 30px;   
    }
    .main-cta a, .btn a{
        line-height: 58px;
        font-size: 22px;
    }
    
    /* cont1 */
    .cont1-wrap{
        width: 100%;
        padding: 180px 5%;
    }
    .cont1-1 .sub{
        font-size: 20px;
    }
    .cont1-2 .tt{
        padding: 0 80px;
    }

    /* cont2 */
    .cont2-wrap .box ul li .text{
        top: 60px;
    }
    .cont2-wrap .box ul li .text .title{
        font-size: 30px;
    }
    .cont2-wrap .box ul li .text .sub{
        font-size: 16px;
        line-height: normal;
    }
    /* cont3 */
    .cont3-wrap{
        width: 100%;
        padding: 200px 0;
    }
    .cont3-wrap .tt{
        font-size: 40px;
    }
    .cont3-wrap .movie{
        column-gap: 8px;
    }
    .cont3-wrap .movie a{
        width: 200px;
        height: 300px;
        column-gap: normal;
    }
    .cont3-wrap .movie a.active{
        width: 540px;
    }
    .cont3-wrap .movie a .thum-img{
        width: 100%;
        height: 300px;
    }

    

    /* cont4 */
    .cont4-wrap{
        width: 100%;
        padding: 160px 5%;
    }
    .cont4-wrap .box li{
        padding: 12px;
    }
    .cont4-wrap .box li .text .title{
        font-size: 22px;
    }
    .cont4-wrap .box li .text .sub{
        font-size: 15px;
    }
    
    /* cont5 */
    .cont5-wrap{
        width: 100%;
        padding: 180px 5%;
    }
    .cont5-wrap .step{
        padding: 0;
        gap: 20px;
        justify-content: center;
        margin-bottom: 100px;
    }
    .cont5-wrap .step div{
        font-size: 22px;
        border: 4px dotted #ffcc55;
    }
    .cont5-wrap .text .title{
        font-size: 40px;
    }
    .cont5-wrap .text .sub{
        font-size: 18px;
    }
    
    /* cont6 */
    .cont6-wrap{
        width: 100%;
        padding: 160px 5%;
    }
    .cont6-wrap .cont6-cta{
        width: 200px;
        height: 60px;
    }
    /* footer */
    .footer-wrap{
        width: 100%;
        padding: 120px 5%;
    }
}

@media screen and (max-width:1120px){
    .tt{
        font-size: 32px;
        font-weight: 600;
    }
    /* nav */
    h1 a{
        height: 23px;
    }
    .nav-wrap .menu{
        display: none;
    }
    .nav-wrap .cta{
        display: none;
    }
    .nav-wrap .mobile-menu{
        display: block;
    }
    .mobile-menu > img{
        cursor: pointer;
    }
    .mobile-menu .wrap{
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #080b1cee;
        z-index: 50;
    }
    .mobile-menu .wrap .menu{
        display: block;
        margin-top: 100px;
    }
    .mobile-menu .wrap .menu a{
        display: block;
        text-align: center;
        padding: 32px 0;
    }
    .mobile-menu .wrap .cta{
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 32px;
    }
    /* main */
    .main-wrap .ttt{
        font-size: 38px;
    }
    .main-wrap p{
        font-size: 18px;
    }
    .main-cta, .btn{
        width: 180px;
        height: 50px;
        margin: 40px 0;
    }
    .main-cta a, .btn a{
        line-height: 50px;
    }
    /* cont1 */
    .cont1-1{
        margin-bottom: 0;
    }
    .cont1-1 .sub{
        font-size: 16px;
    }
    .cont1-1 .icon ul{
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    .icon ul li div{
        width: 60px;
        height: 60px;
    }
    .icon ul li:hover div{
        width: 60px;
    }
    .icon ul li div img{
        height: 32px;
    }
    .icon ul li div img.sm{
        height: 28px;
    }
    .icon ul li p{
        font-size: 15px;
    }
    /* cont2 */
    .cont2-wrap{
        padding: 100px 0 160px;
    }
    .cont2-wrap .tt{
        margin-bottom: 64px;
    }
    .cont2-wrap .box ul li .text{
        top: 32px;
    }
    .cont2-wrap .box ul li .text .title{
        font-size: 22px;
        margin-bottom: 16px;
    }
    .cont2-wrap .banner p{
        font-size: 24px;
    }
    /* cont3 */
    .cont3-wrap .tt{
        font-size: 34px;
    }
    .cont3-wrap .movie{
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }
    .cont3-wrap .movie a{
        width: 500px;
        aspect-ratio: 1.75;
        height: auto;
    }
    .cont3-wrap .movie a.active{
        width: 500px;
        aspect-ratio: 1.75;
        height: auto;
    }
    .cont3-wrap .movie a .thum-img video{
        width: 100%;
    }
    .cont3-wrap .movie a .thum-img{
        width: 100%;
        height: 100%;
    }
    .cont3-wrap .movie a.fir .thum-img{background-image: url(../images/cont3-1-m.jpg);}
    .cont3-wrap .movie a.sec .thum-img{background-image: url(../images/cont3-2-m.jpg);}
    .cont3-wrap .movie a.thi .thum-img{background-image: url(../images/cont3-3-m.jpg);}
    .cont3-wrap .movie a.four .thum-img{background-image: url(../images/cont3-4-m.jpg);}
    
    /* cont4 */
    .cont4-wrap .box{
        flex-wrap: wrap;
    }
    .cont4-wrap .box li{
        width: calc(50% - 20px);
    }
    .cont4-wrap .box li .text{
        text-align: center;
    }
    .cont4-wrap .box li .text .title{
        justify-content: center;
        font-size: 20px;
        min-height: 60px;
    }

    /* contr5 */
    .cont5-wrap .step{
        margin-bottom: 64px;
    }
    .cont5-wrap .text .title{
        font-size: 36px;
    }
    .cont5-wrap .text .sub{
        font-size: 16px;
    }
    /* cont6 */
    .cont6-wrap .cont6-cta{
        width: 180px;
        height: 50px;
    }
    .cont6-wrap .cont6-cta a{
        line-height: 42px;
    }
    /* footer */
    .footer-wrap .logos img{
        height: 28px;
    }
    .footer-wrap .logos .unity img{
        height: 32px;
    }

}
@media screen and (max-width:855px){
    .nav-wrap{
        padding: 0 3%;
    }
    .main-wrap .main-text{
        padding: 0 3%;
        text-align: center;
    }
    .main-wrap .ttt{
        font-size: 32px;
    }
    .main-wrap p{
        font-size: 16px;
        margin-top: 16px;
    }
    .main-cta, .btn{
        width: 160px;
        height: 44px;
        border-radius: 22px;   
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .main-cta a, .btn a{
        line-height: 42px;
        font-size: 17px;
    }    
    .cont1-wrap{
        padding: 140px 3%;
    }
    .cont1-1 .icon ul{
        padding: 0 80px;
    }
    .cont2-wrap .banner{
        height: 200px;
    }
    .cont3-wrap{
        padding: 160px 3%;
    }
    .cont4-wrap{
        padding: 140px 3%;
    }
    .cont4-wrap .box{
        justify-content: center;
    }
    .cont5-wrap{
        padding: 140px 3%;
    }
    .cont6-wrap{
        padding: 140px 3%;
    }
    .footer-wrap{
        padding: 100px 3%;
    }
}
@media screen and (max-width:700px){
    .tt{
        font-size: 24px;
    }
    /* nav */
    nav{
        height: 60px;
    }

    h1 a{
        height: 22px;
    }
    .mobile-menu .wrap{
        top: 60px;
    }
    /* main */
    .main-gif{
        height: 500px;
        overflow: hidden;
    }
    .main-gif video{
        width: 160%;
    }
    .main-wrap .ttt{
        font-size: 24px;
    }
    /* cont1 */
    .cont1-wrap{
        padding: 100px 3%;
    }
    .cont1-1{
        margin-bottom: 100px;
    }
    .cont1-1 .icon ul{
        padding: 0 30px;
    }
    .cont1-2 .tt{
        padding: 0 20px;
        margin-bottom: 28px;
    }
    /* cont2 */
    .cont2-wrap{
        padding-top: 100px;
    }
    .cont2-wrap .box ul li{
        aspect-ratio: 1;
    }
    .cont2-wrap .box ul li img{
        height: 100%;
    }
    .cont2-wrap .box ul li .text{
        width: 85%;
    }
    .cont2-wrap .box ul li .text .title{
        font-size: 20px;
    }
    .cont2-wrap .box ul li .text .sub{
        font-size: 14px;
    }
    .cont2-wrap .banner p{
        font-size: 20px;
    }
    /* cont3 */
    .cont3-wrap{
        padding: 120px 3%;
    }
    .cont3-wrap .tt{
        font-size: 28px;
        margin-bottom: 40px;
    }
    .cont3-wrap .movie a{
        width: 500px;
        aspect-ratio: 1.6;
    }
    .cont3-wrap .movie a.active{
        width: 500px;
        aspect-ratio: 1.6;
    }
    /* cont4 */
    .cont4-wrap{
        padding: 100px 3%;
    }
    .cont4-wrap .tt{
        margin-bottom: 40px;
    }
    .cont4-wrap .box li .text .sub{
        font-size: 14px;
    }
    /* cont5 */
    .cont5-wrap .step div{
        width: 76px;
        aspect-ratio: 1;
        font-size: 16px;
    }
    .cont5-wrap .step div.fou{
        width: 180px;
    }
    .cont5-wrap .text .title{
        font-size: 24px;
        margin-bottom: 28px;
    }
    /* cont6 */
    .cont6-wrap{
        padding: 120px 3%;
    }
    .cont6-wrap .tt{
        font-size: 20px;
    }
    .cont6-wrap .cont6-cta{
        width: 160px;
        height: 44px;
    }
    .cont6-wrap .cont6-cta a{
        line-height: 38px;
    }
}

@media screen and (max-width:570px){
    .tt{
        font-size: 22px;
        font-weight: 600;
    }
    h1 a{
        height: 20px;
    }
    /* main */
    .main-gif video{
        width: 260%;
    }
    /* cont1 */
    .cont1-1 .tt{
        font-size: 18px;
        letter-spacing: -1px;
        color: #ffcc55;
    }
    .cont1-1 .sub{
        font-size: 14px;
        font-weight: 300;
    }
    .cont1-1 .icon ul{
        padding: 0;
    }
    .cont1-2 .img-box{
        aspect-ratio: 2;
    }
    .cont1-2 .img-box img{
        height: 100%;
    }
    /* cont2 */
    .cont2-wrap{
        padding: 100px 3%;
        background-size: 150%;
    }
    .cont2-wrap .tt{
        margin-bottom: 48px;
    }
    .cont2-wrap .tt span{
        display: block;
    }
    .cont2-wrap .box ul{
        gap: 10px;
    }
    .cont2-wrap .box ul li{
        width: 100%;
        aspect-ratio: 1.5;
    }
    .cont2-wrap .box ul li img{
        width: 100%;
    }
    .cont2-wrap .banner{
       height: 240px;
    }
    .cont2-wrap .banner p{
        width: 90%;
    }
    /* cont3 */
    .cont3-wrap .movie a{
        border: none;
        border-radius: 8px;
    }
    .cont3-wrap .movie a video{
      width: 100%;
      position: relative;
      top: -50px;
    }
    .cont3-wrap .movie a iframe{
      width: 100%;
      position: relative;
      top: -40px;
    }
    /* cont4 */
    .cont4-wrap .box li{
        width: 100%;
        background-color: #222;
    }

    .cont4-wrap .box li .text .sub{
        margin: 0 0 20px;
        font-size: 15px;
    }

    /* cont5 */
    .cont5-wrap .step{
        gap: 8px;
    }
    .cont5-wrap .step div{
        font-size: 15px;
        font-weight: 400;
    }
    .cont5-wrap .text .sub{
        padding: 0 40px;
    }
    /* cont6 */
    .cont6-wrap{
        padding: 100px 5%;
    }
    .cont6-wrap .tt{
        font-size: 24px;
    }


}