@charset "utf-8";

/*

************************************************************************

 背景画像

************************************************************************

*/



.bg-color-belt {
    padding-top: 3em;
    padding-bottom: 5em;
    background: rgb(255,240,0);
    background: linear-gradient(180deg, #fff000 0%, #fff000 45%, #21ddee 45%, #21ddee 100%);
}


.bg-color-belt::before {
    content: "";
    display: inline-block;
    position: absolute;
    max-width: 2000px;
    width: 100%;
    height: 681px;
    background-image: url(../../img/flare/top-event.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: overlay;

    top: 0;
    left: 50%;
    transform:translateX(-50%);

}


.bg-rainbow {
    background-image: url(../../img/common/rainbow-top.jpg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
#top-news .bg-rainbow {
	padding-top: 5em;
	padding-bottom: 10em;
	background-image: url(../../img/common/rainbow-top.jpg);
	background-size: cover;
}
.bg-ocean {
    padding-top: 10em;
    padding-bottom: 15em;

    background-image: url(../../img/common/ocean.jpg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-palm {
    padding: 15em 0 20em 0;
    background-image: url(../../img/common/palm.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-stage-palm {
	background-image: url(../../img/common/palm-left-big.png),url(../../img/common/palm-right-big.png);
	background-position: 0 100%, 100% 0;
	background-repeat: no-repeat;
	background-size: auto;
}

.bg-hibiscus {
    padding: 0 0 0 3em;
    height: 100%;
    background-image: url(../../img/page/index/hibiscus.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.bg-island {
    /*
    background-image: url(../../img/page/index/island-left.png),url(../../img/page/index/island-right.png);
    */
    background-image: url(../../img/page/index/bg-island.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: 2000px auto;

    text-align: center;

    padding: 4em 0;
}
.flare::before {
    content: "";
    display: inline-block;
    position: absolute;

    width: 100%;
    height: 100%;


    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}

.flare.flare-stage::before {
    background-image: url(../../img/flare/top-stage.png);
}
.flare.flare-shop::before {
    background-image: url(../../img/flare/top-shop.png);
}
.flare.flare-hawaii::before {
    background-image: url(../../img/flare/top-hawaii.png);
}




@media screen and (max-width:2000px) {
	.bg-stage-palm {
		background-size: 40% auto;
	}
}

@media screen and (max-width:1600px) {
	.bg-stage-palm {
		background-size: 40% auto;
	}
}


@media screen and (max-width:640px) {
    .bg-color-belt {
        padding: 4em 0 2em 0;
    }
    .bg-color-belt::before {
        width: 100vw;
        height: 50vw;
    }
    #top-news .bg-rainbow {
        padding-top: 0;
        padding-bottom: 0;
        background-size: 200vw auto;
    }
    .bg-ocean {
        padding: 2em 0;
    }
    .bg-palm {
        padding: 5em 0 5em 0;
        background-image: url(../../img/common/palm-right.png), url(../../img/common/palm-left.png);
        background-position: 100% 0, 0 100%;
        background-repeat: no-repeat;
        background-size: 50vw auto, 50vw auto;
    }
    .bg-island {

    }
    .bg-stage-palm {
		background-size: 20vw auto;
	}
}