@charset "utf-8"; /*文字コード*/
/*
=======================================
	top CSS
=======================================
*/
/* スマホ用設定（640px以上の場合） */
#main_image{
    position: relative;
    width: 100%;
    /* background: #b64b70; */
    line-height: 0px;
}

.top_background_img{
    width: 100%;
}

/* .top_whiteline_img{
    position: absolute;
    top:0;
    width: 100%;
} */

.main_title_img{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right:0;
    width: 100%;
    text-align: center;
    padding:4% 28% 0;
}
.main_sudachi_img{
    position: absolute;
    width: 12%;
    top:65%;
    left: 60%;
    bottom: 0;
    right:0;
}

.main_sup_img{
    position: absolute;
    width: 10%;
    left: 0%;
    top:13%;
    bottom: 0;
    right:0;
}

.main_rafting_img{
    position: absolute;
    width: 16%;
    left: 9%;
    top:33%;
    bottom: 0;
    right:0;
}

.main_surfin_img{
    position: absolute;
    width: 11%;
    left: 75%;
    top:35%;
    bottom: 0;
    right:0%;
}

.main_canue_img{
    position: absolute;
    width: 15%;
    left: 25%;
    top:65%;
    bottom: 0;
    right:0%;
}


.fuwafuwa {
-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;
}
@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -15%) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -15%) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}

.pukapuka {
-webkit-animation:pukapuka 15s infinite linear normal;
animation:pukapuka 15s infinite linear normal;
}
@-webkit-keyframes pukapuka {
    0% {-webkit-transform:translate(-100%, 0%);}
    6% {-webkit-transform:translate(-36%, 5%);}
    12% {-webkit-transform:translate(28%, 0%);}
    18% {-webkit-transform:translate(92%, -7%);}
    24% {-webkit-transform:translate(156%, 0%);}
    30% {-webkit-transform:translate(220%, 5%);}
    36% {-webkit-transform:translate(284%, 0%);}
    42% {-webkit-transform:translate(348%, -7%);}
    48% {-webkit-transform:translate(412%, 0%);}
    54% {-webkit-transform:translate(476%, 5%);}
    60% {-webkit-transform:translate(540%, 0%);}
    66% {-webkit-transform:translate(604%, -7%);}
    72% {-webkit-transform:translate(668%, 0%);}
    78% {-webkit-transform:translate(732%, 5%);}
    84% {-webkit-transform:translate(796%, 0%);}
    89% {-webkit-transform:translate(860%, -7%);}
    93% {-webkit-transform:translate(924%, 0);}
    98% {-webkit-transform:translate(1000%, 0);}
    100% {-webkit-transform:translate(1200%, 5%);}
}
@keyframes pukapuka {
    0% {transform:translate(-100%, 0%);}
    6% {transform:translate(-36%, 5%);}
    12% {transform:translate(28%, 0%);}
    18% {transform:translate(92%, -7%);}
    24% {transform:translate(156%, 0%);}
    30% {transform:translate(220%, 5%);}
    36% {transform:translate(284%, 0%);}
    42% {transform:translate(348%, -7%);}
    48% {transform:translate(412%, 0%);}
    54% {transform:translate(476%, 5%);}
    60% {transform:translate(540%, 0%);}
    66% {transform:translate(604%, -7%);}
    72% {transform:translate(668%, 0%);}
    78% {transform:translate(732%, 5%);}
    84% {transform:translate(796%, 0%);}
    89% {transform:translate(860%, -7%);}
    93% {transform:translate(924%, 0);}
    98% {transform:translate(1000%, 0);}
    100% {transform:translate(1200%, 5%);}
}

.zabazaba {
-webkit-animation:zabazaba 2s infinite linear alternate;
animation:zabazaba 2s infinite linear alternate;
}
@-webkit-keyframes zabazaba {
    0% {-webkit-transform:translate(0%, 0) rotate(5deg);}
    100% {-webkit-transform:translate(0%, 6%)rotate(10deg);}
}
@keyframes zabazaba {
0% {transform:translate(0%, 0) rotate(5deg);}
100% {transform:translate(0%, 6%)rotate(10deg);}
}

.zabuzabu {
-webkit-animation:zabuzabu 2s infinite linear alternate;
animation:zabuzabu 2s infinite linear alternate;
}
@-webkit-keyframes zabuzabu {
0% {-webkit-transform:translate(0, 0) rotate(10deg);}
100% {-webkit-transform:translate(0%, 0)rotate(-10deg);}
}
@keyframes zabuzabu {
    0% {transform:translate(0, 0%) rotate(15deg);}
    100% {transform:translate(0%, 0%)rotate(-10deg);}
}

.suisui {
-webkit-animation:suisui 3s infinite linear alternate;
animation:suisui 3s infinite linear alternate;
}
@-webkit-keyframes suisui {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -15%) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@keyframes suisui {
0% {transform:translate(-30%, -40%) rotate(-15deg);}
50% {transform:translate(0%, 0)rotate(0deg);}
100% {transform:translate(30%, 20%)rotate(-10deg);}
}


/* PC用設定（640px以上の場合） */
@media screen and (min-width:640px){
/* PC用CSSはこの下より記述してください */
    .text{
        margin: 50px 0 50px;
        position: relative;
        width:55%;
        height: 200px;
        background:#1f9985;
    }
    .text::after{
        position:absolute;
        top:-17%;
        left:105%;
        content: "";
        display: inline-block;/*忘れずに！*/
        width: 150%;/*画像の幅*/
        height: 150%;/*画像の高さ*/
        background-image: url(../images/mokumoku.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        z-index: -1;
    }
    .slider{
        height: 200px;
        background: #181af4;
    }
}


/* タブレット表示調整用（不要なら使わなくてOK）*/
/* タブレットの画面サイズでどうしても調整したい場合に利用してください（640～1023px）*/
@media screen and (min-width:640px) and (max-width:1023px) {
    /* タブレット用CSSはこの下より記述してください */

}