@charset "UTF-8";
/* CSS Document */

.animation_bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height:100vh;
    background-color: #fff9ed;
    overflow: hidden;
}

.anime_bg{
    position: absolute;
}

.anime_bg img{
    width: 100%;
    height: auto;
    display: block;
}

.anime_bg.a1{
    width: 138.8%;
    right: -92%;
    top: 0%;
    -webkit-transform: rotate(-134.4deg);
    transform: rotate(-134.4deg);
    overflow: hidden;
}

.anime_bg.a1 img{
    -webkit-animation: wave 5s linear infinite;
    animation: wave 5s linear infinite;
}

@-webkit-keyframes wave{
    0%{-webkit-transform: translateX(0);}
    100%{-webkit-transform: translateX(10.5%);}
}

@keyframes wave{
    0%{transform: translateX(0);}
    100%{transform: translateX(10.5%);}
}

.anime_bg.a2{
    width: 115.2%;
    left: -92%;
    bottom: -4%;
    -webkit-transform: rotate(50.3deg);
    transform: rotate(50.3deg);
}

.anime_bg.a2 img{
    -webkit-animation: wave4 5s linear infinite;
    animation: wave4 5s linear infinite;
}

@-webkit-keyframes wave4{
    0%{-webkit-transform: translateX(0);}
    100%{-webkit-transform: translateX(21%);}
}

@keyframes wave4{
    0%{transform: translateX(0);}
    100%{transform: translateX(21%);}
}

.anime_bg.a3{
    width: 38.19%;
    left: -11.2%;
    top: 67vh;
}

.anime_mask{
    position: absolute;
    width: 45.07%;
    left: 46.71%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.anime_mask2{
    position: absolute;
    width: 34.42%;
    left: 47.61%;
    bottom: -39vh;
}

.anime_mask img,
.anime_mask2 img{
    width: 100%;
    height: auto;
}

.anime_bg.a4{
    width: 36.99%;
    left: 45%;
    top:41%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.anime_bg.a5{
    width: 65.29%;
    left: 72%;
    top: 39%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.anime_bg.a5 img{
    -webkit-animation: roll 30s linear 0s infinite;
    animation: roll 30s linear 0s infinite;
    
}

@-webkit-keyframes roll{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}

@keyframes roll{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.anime_bg.a6{
    width: 35.5%;
    left: 11.39%;
    top: 72vh;
}

.anime_bg.a7{
    width: 34.5%;
    left: -3.5%;
    top: -6.6vh;
}

.anime_bg.a8{
    width: 30.03%;
    left: 68.9%;
    top: 1vh;
}

.anime_bg.a9{
    width: 19.03%;
    left: 1.3%;
    top: -300px;
}

.anime_bg.a10{
    width: 46.74%;
    left: -0.03%;
    top: 24.4vh;
    overflow: hidden;
}

.anime_bg.a10 img{
    width: 240.1%;
    -webkit-animation: wave_color 20s linear infinite;
    animation: wave_color 20s linear infinite;
}

.anime_bg.a11{
    width: 23.75%;
    left: 77.27%;
    top: 94.8vh;
    overflow: hidden;
}

.anime_bg.a11 img{
    width: 500.5%;
    -webkit-animation: wave_color 15s linear infinite;
    animation: wave_color 15s linear infinite;
}

.anime_bg.a12{
    width: 54.92%;
    left: 46.1%;
    top: 83.5vh;
    overflow: hidden;
}

.anime_bg.a12 img{
    width: 193.2%;
    -webkit-animation: wave_color 10s linear infinite;
    animation: wave_color 10s linear infinite;
}

@-webkit-keyframes wave_color{
    0%{-webkit-transform: translateX(0);}
    100%{-webkit-transform: translateX(-48.3%);}
}

@keyframes wave_color{
    0%{transform: translateX(0);}
    100%{transform: translateX(-48.3%);}
}

.anime_bg.a13{
    width: 60.74%;
    left: 70.54%;
    top: 58.7vh;
    overflow: hidden;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.anime_bg.a13 img{
    -webkit-animation: wave2 5s linear infinite;
    animation:wave2 5s linear infinite;
    
}

@-webkit-keyframes wave2{
    0%{-webkit-transform: translateX(0);}
    100%{-webkit-transform: translateX(-9%);}
}

@keyframes wave2{
    0%{transform: translateX(0);}
    100%{transform: translateX(-9%);}
}

.anime_bg.a14{
    width: 59.42%;
    left: 78.53%;
    top: 57.6vh;
    overflow: hidden;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.anime_bg.a14 img{
    -webkit-animation: wave3 10s linear infinite;
    animation:wave3 10s linear infinite;
    
}


@-webkit-keyframes wave3{
    0%{-webkit-transform: translateX(0);}
    100%{-webkit-transform: translateX(-9.5%);}
}

@keyframes wave3{
    0%{transform: translateX(0);}
    100%{transform: translateX(-9.5%);}
}



.anime_bg.a15{
    width: 71.29%;
    left: 52%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.anime_bg.a15 img{
    -webkit-animation: roll2 50s linear infinite;
    animation: roll2 50s linear infinite;
    
}

@-webkit-keyframes roll2{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(-360deg);}
}

@keyframes roll2{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-360deg);}
}

@media screen and (min-width: 737px) {
  .sp_only {
    display: none !important;
  }
}

@media screen and (max-width: 736px){
    
    .pc_only {
        display: none !important;
      }
    
    .sp_only {
        display:block !important;
      }
    
    .anime_mask{
        width: 68%;
        left: 5%;
        top: 9vh;
        -webkit-transform: none;
        transform: none;
    }
    
    .anime_mask2{
        width: 50.42%;
        left: 5.61%;
    }
    
    .anime_bg.a1{
        width: 100%;
        right: -80%;
        top: -29vh;
    }
    
    .anime_bg.a1 img{
        width: 200%;
        -webkit-animation: wave_sp 2.5s linear infinite;
        animation: wave_sp 2.5s linear infinite;
    }
    
    @-webkit-keyframes wave_sp{
        0%{-webkit-transform: translateX(0);}
        100%{-webkit-transform: translateX(18.5%);}
    }
    
    @keyframes wave_sp{
        0%{transform: translateX(0);}
        100%{transform: translateX(18.5%);}
    }
    
    .anime_bg.a4{
        width: 64.13%;
        left: -22.53%;
        top: 9vh;
        -webkit-transform: none;
        transform: none;
    }
    
    .anime_bg.a5{
        width: 114.2%;
        left: 17.06%;
        top: -12vh;
        -webkit-transform: translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
    
    .anime_bg.a8{
        width: 50.66%;
        left: 66.3%;
        top: 5vh;
    }
    
    .anime_bg.a11{
        width: 28.8%;
        left: 93.6%;
        top: 64vh;
    }
    
    .anime_bg.a11 img{
        -webkit-animation: wave_color_sp 10s linear infinite;
        animation: wave_color_sp 10s linear infinite;
    }
    
    .anime_bg.a12{
        width: 111.8%;
        left: 10.53%;
        top: 57vh;
    }
    
    .anime_bg.a12 img{
        -webkit-animation: wave_color_sp 10s linear infinite;
        animation: wave_color_sp 10s linear infinite;
    }
    
    @-webkit-keyframes wave_color_sp{
        0%{-webkit-transform: translateX(0);}
        100%{-webkit-transform: translateX(-48.2%);}
    }
    
    @keyframes wave_color_sp{
        0%{transform: translateX(0);}
        100%{transform: translateX(-48.2%);}
    }
    
    .anime_bg.a13{
        width: 124.2%;
        left: 12.6%;
        top: auto;
        bottom: 30vh;
    }
    
    .anime_bg.a14{
        width: 120.26%;
        left: 6.26%;
        top: auto;
        bottom: 18vh;
    }
    
    .anime_bg.a15{
        width: 139.6%;
        left: -46.53%;
        top: -9vh;
        -webkit-transform: none;
        transform: none;
    }
}