@charset "UTF-8";

@keyframes opad{
    0%{
        opacity: 0;
    }
   
    100%{
        opacity: 1;
    }
}

#mainvisual{
    width:100%;
    height:100vh;
    position:relative;
    z-index: 1;
    overflow: hidden; 
    transition: all 0.4s;
    background:#fff;
}

#mainvisual:after{
    display:block;
    content:'';
    clear:both;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50%;
}
#mainvisual .bg-cover{
    position:relative;
    animation: opad 1s 1s forwards ease;
    opacity: 0;
    height:100%;
}
#mainvisual .bg-cover img{
    width:100%;
    height:100%;
}

#mainvisual .shot{
    position: absolute;
    z-index: 2;
    top:0;
    left:0;
    
}
#mainvisual .shot ul{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    display:none;
}

#mainvisual .shot ul li{
    position:absolute;
    z-index: 12;
    width:0px;
    height:0px;
    border-radius: 50%;
    background:#fff;
}
#mainvisual .shot ul li:after{
    display:block;
    content:'';
    clear:both;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:15px;
    height:15px;
    border-radius: 50%;
    background:#fff;
    transition: all 0.4s;
    animation:sh1 1s infinite ease-in-out;
}
@keyframes sh1 {
    0%{
        filter: blur(2px);
    }
    50%{
        filter: blur(5px);
    }
    100%{
        filter: blur(2px);
    }
}
#mainvisual .shot ul li.sh1{
    top:215px;
    left:533px;
}
#mainvisual .shot ul li.sh2{
    top:390px;
    left:300px;
}
#mainvisual .shot ul li.sh3{
    top:342px;
    left:520px;
}
#mainvisual .shot ul li.sh4{
    top:216px;
    left:447px;
}
#mainvisual .shot ul li.sh5{
    top:165px;
    left:499px;
}
#mainvisual .shot ul li.sh6{
    top:226px;
    left:586px;
}
#mainvisual .shot ul li.sh2:after{
    width:10px;
    height:10px;
    animation:sh1 1s infinite ease-in-out;
}
#mainvisual .shot ul li.sh3:after{
    width:12px;
    height:12px;
    animation:sh1 1s infinite ease-in-out;
}
#mainvisual .shot ul li.sh4:after{
    width:11px;
    height:11px;
    animation:sh1 1s infinite ease-in-out;
}
#mainvisual .shot ul li.sh5:after{
    width:9px;
    height:9px;
    animation:sh1 1s infinite ease-in-out;
}
#mainvisual .shot ul li.sh5:after{
    width:8px;
    height:8px;
    animation:sh1 1s infinite ease-in-out;
}
@keyframes shot{
    0%{
        top:-20%;
        left:-10%;
    }
    100%{
        left:-100%;
        top:100%;
    }
}
#mainvisual .shot:after{
    display:block;
    content:'';
    clear:both;
    width:1500px;
    height:1500px;
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    animation: shot 2s cubic-bezier(.8,.27,.14,.96) forwards;
    border-radius: 50%;
  ;
    z-index: 3;
   
}
#mainvisual .shot img{
    
    height:auto;
   
}
@keyframes animatedBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 0;
    }
  }
#mainvisual .textrow{
    width: 100%;
    height: 11%;
    position: absolute;
    top: 40%;
    left: 0;
    transform: translateY(-50%);
    background: url(../img/economy-img.png) center/cover;
    background-repeat: repeat-x;
    background-position: 0 0;
    animation: animatedBackground 70s linear infinite;
    z-index: 3;
}
#mainvisual .textrow .mo_txt{
    display:none;
}



@keyframes slideUpAnimation {
    from { opacity:0;-webkit-transform: translate3d(0,30px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}

.txt_wrap{
    position:absolute;
    z-index: 6;
    top:55%;
    left:50%;
    transform: translatex(-50%);
    text-align: center;
    width:100%;
}

.txt_wrap .txt1{
    font-size:28px;
    font-weight: 300;
    line-height: 32px;
    overflow: hidden;
    position: relative;
    color:#fff;
    letter-spacing: -1;
    margin-top:40px;
}
.txt_wrap p b{
    color:#f08300;
    font-size:64px;
}
.txt_wrap .txt1 span{
    display:block;
    opacity: 0;
}

.txt_wrap .txt1 span{
    animation: slideUpAnimation 0.6s 1.6s forwards cubic-bezier(0, 0, 0.2, 1);
}

.txt_wrap .txt2 span{
    animation: slideUpAnimation 0.6s 1.3s forwards cubic-bezier(0, 0, 0.2, 1);
}

.txt_wrap .txt2{
    font-size:60px;
    margin-top:0px;
    font-weight: bold;
    line-height: 64px;
    color:#fff;
    overflow:hidden;
    position: relative;
}
.txt_wrap .txt2 .mo_br{
    display:none;
}
.txt_wrap .txt2 span{
    display:block;
    opacity: 0;
}




/* button */

.ulbutton{
    display:flex;
    position:absolute;
    bottom:0;
    left:50%;
    transform: translatex(-50%);
    width:1200px;
    height:50px;
    animation: opad 1s 1s forwards ease;
    opacity: 0;
    z-index: 5 ;
}
.ulbutton li{
    width:25%;
    text-align: center;
    line-height: 50px;
}


.ulbutton li a{
    display:block;
    background:transparent;
    color:#fff !important;
    height:100%;
    width:100%;
    font-size:20px;
    border:solid 1px #fff;
    box-sizing: border-box;
}
.ulbutton li.active a{
    color:#262626 !important;
    background:#fff !important;
}
.ulbutton li.on a{
    color:#262626 !important;
    background:#fff !important;
}


@media all and (min-width:320px) and (max-width:700px){
    .bg-cover img{}
    .shot img{
        width:300%;
    }
    #mainvisual .bg-cover{
       animation: none;
       opacity: 1;
    }
    #mainvisual .shot:after{
        display:none;
    }

    #mainvisual .textrow{
        background:none; 
        width: 100%;
   
        top:70%;
    }
    #mainvisual .textrow .mo_txt{
        display:block;
        font-size:26px;
        font-weight: 900;
        color:#fff;
        text-align: center;
    }
    #mainvisual .textrow .mo_txt span{
        color:#f08300;
    }
    .ulbutton{
        display:flex;
        position:absolute;
        bottom:0;
        left:50%;
        transform: translatex(-50%);
        width:100%;
        height:50px;
        opacity: 1;
        animation:none;
    }

    .ulbutton li a{
        display:block;
        background:transparent;
        color:#fff !important;
        height:100%;
        width:100%;
        font-size:14px;
        border:solid 1px #fff;
        box-sizing: border-box;
    }
    .txt_wrap{
        top:70%;
    }
    .txt_wrap .txt1{
        font-size:18px;
        font-weight: 300;
        line-height: 20px;
        overflow: hidden;
        position: relative;
        color:#fff;
        letter-spacing: -1;
    }

    .txt_wrap .txt2{
        font-size:24px;
        font-weight: bold;
        line-height: 28px;
        overflow: hidden;
        position: relative;
        color:#fff;
        word-break: keep-all;
    }
    .txt_wrap .txt2 .mo_br{
        display:block;
    }
    .txt_wrap .txt2 span b{
        font-size:26px;
    }
    .txt_wrap .txt2 span{
        animation: slideUpAnimation 0.6s 0.6s forwards cubic-bezier(0, 0, 0.2, 1);
    }
    .txt_wrap .txt1 span{
        animation: slideUpAnimation 0.6s 1s forwards cubic-bezier(0, 0, 0.2, 1);
    }

    #foot .inner .link_down .address p{
        margin-bottom: 0 !important;
    }

}