@charset "utf-8";

* {
padding: 0; /* Reset `padding` and `margin` of all elements */
margin: 0;
box-sizing: border-box;
}

/* メインイメージ */
#illust-map .box-01,#illust-map .box-02 {position: relative;overflow: hidden;}

/*雲01*/
.kumo-bgroot{width: 100vw;height:100%;overflow: hidden;position: absolute;top:140px;}
.kumo-flow{animation: flowing03 30s linear infinite;transform: translateX(-100%);/*初期位置*/}
@keyframes flowing03 {100% {transform: translateX(100%);}}
.kumo-flow img{width:530px;}

/*雲02*/
.kumo-bgroot02{width: 100vw;height:100%;overflow: hidden;position: absolute;top:480px;}
.kumo-flow02{animation: flowing04 50s linear infinite;transform: translateX(-120%);/*初期位置*/}
@keyframes flowing04 {100% {transform: translateX(100%);}}
.kumo-flow img{width:530px;}


/*雲04*/
.kumo-bgroot04{width: 100vw;height:100%;overflow: hidden;position: absolute;top:160px;}
.kumo-flow04{animation: flowing06 30s linear infinite;transform: translateX(-100%);/*初期位置*/}
@keyframes flowing06 {100% {transform: translateX(100%);}}
.kumo-flow img{width:530px;}

/*雲03*/
.kumo-bgroot03{width: 100vw;height:100%;overflow: hidden;position: absolute;top:450px;}
.kumo-flow03{animation: flowing05 30s linear infinite;transform: translateX(-100%);/*初期位置*/}
@keyframes flowing05 {0% {transform: translateX(100%);}}
.kumo-flow img{width:530px;}


/*雲05*/
.kumo-bgroot05{width: 100vw;height:100%;overflow: hidden;position: absolute;top:250px;}
.kumo-flow05{animation: flowing07 100s linear infinite;transform: translateX(-100%);/*初期位置*/}
@keyframes flowing07 {0% {transform: translateX(100%);}}
.kumo-flow img{width:530px;}


/*鳥01*/
.tori-bgroot{width: 100vw;height:100%;overflow: hidden;position: absolute;top:150px;}
.tori-flow{animation: flowing 50s linear infinite;transform: translateX(100%);/*初期位置*/}
@keyframes flowing {100% {transform: translateX(-100%);}}
.tori-flow img{width:530px;}

/*鳥02*/
.tori-bgroot02{width: 100vw;height:100%;overflow: hidden;position: absolute;top: 350px;}
.tori-flow02{animation: flowing02 30s linear infinite;transform: translateX(100%);/*初期位置*/}
@keyframes flowing02 {100% {transform: translateX(-100%);}}
.tori-flow02 img{width:530px;}

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 1000px){
.kumo-bgroot{width: 100vw;height:100%;overflow: hidden;position: absolute;top:50px;}
.kumo-bgroot02{width: 100vw;height:100%;overflow: hidden;position: absolute;top: 400px;}
.tori-bgroot{width: 100vw;height:100%;overflow: hidden;position: absolute;top:80px;}
.tori-bgroot02{width: 100vw;height:100%;overflow: hidden;position: absolute;top: 200px;}
}

@media screen and (max-width: 768px){
.kumo-bgroot04{width: 100vw;height:100%;overflow: hidden;position: absolute;top:50px;}
.kumo-bgroot03{width: 100vw;height:100%;overflow: hidden;position: absolute;top:450px;}
}

@media screen and (max-width: 600px){
.kumo-bgroot{width: 100vw;height:100%;overflow: hidden;position: absolute;top:20px;}
.kumo-bgroot02{width: 100vw;height:100%;overflow: hidden;position: absolute;top: 320px;}
.tori-bgroot{width: 100vw;height:100%;overflow: hidden;position: absolute;top:20px;}
.tori-bgroot02{width: 100vw;height:100%;overflow: hidden;position: absolute;top: 200px;}
}

@media screen and (max-width: 480px){
.kumo-bgroot04{width: 100vw;height:100%;overflow: hidden;position: absolute;top:80px;}
.kumo-bgroot03{width: 100vw;height:100%;overflow: hidden;position: absolute;top:320px;}
}

/*--------------------------------------------------------------------------------*/

.fadeIn{
animation-name:fadeInAnime;
animation-duration:10s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from {opacity: 0;}
to {opacity: 1;}
}

/*鳥01の上下動き*/
.fluffy {
background: ;
width: 0px;
height: auto;
padding: 10px 0 0 0;
animation: fluffy1 3s ease infinite;
}
@keyframes fluffy1 {
0% { transform:translateY(2px) }
10% { transform:translateY(5px) }
15% { transform:translateY(2px) }
20% { transform:translateY(5px) }
25% { transform:translateY(-2px) }
30% { transform:translateY(5px) }
50% { transform:translateY(5px) }
100% { transform:translateY(-5px) }
}

/*鳥02の上下動き*/
.fluffy02 {
background: ;
width:0px;
height: auto;
padding: 10px 0 0 0;
animation: fluffy2 5s ease infinite;
}
@keyframes fluffy2 {
0% { transform:translateY(5px) }
10% { transform:translateY(5px) }
15% { transform:translateY(2px) }
20% { transform:translateY(2px) }
25% { transform:translateY(-2px) }
30% { transform:translateY(2px) }
50% { transform:translateY(5px) }
100% { transform:translateY(-2px) }
}