/* TOPPAGE~TEMP
============================== */
@media all and (min-width: 768px) {
	
}

@media all and (max-width: 767px) {

}


/*	HERO
============================== */
/* HERO */
#top-main-wrap{
	width: 100%;
	position: relative;
}
.top-logo{
	background-image: url(../img/top_logo.png);
	background-image: image-set(url(../img/top_logo.png) 1x, url(../img/top_logo@2x.png) 2x);
	background-image: -webkit-image-set(url(../img/top_logo.png) 1x, url(../img/top_logo@2x.png) 2x);
	background-repeat: no-repeat;
}
.top-onair{
	background-image: url("../img/top_onair_2.png");
	background-image: image-set(url("../img/top_onair_2.png") 1x, url("../img/top_onair_2@2x.png") 2x);
	background-image: -webkit-image-set(url(../img/top_onair_2.png) 1x, url("../img/top_onair_2@2x.png") 2x);
	background-repeat: no-repeat;
}

.topbanner-movie img{
	width: 100%;
}

/* BD02025 */
/*
.topbanner-movie,
#toplink-area{
	display: none;
}
*/

@media all and (min-width: 768px) {
	/* HERO */
	#visual-area{
		width: 100%;
		height: 140.4761904761905%;
		height: -webkit-calc(1680 / 2360 * 100%);
		height: calc(1680 / 2358 * 100%);
		background-image: url(../img/visual_01.jpg);
		background-image: image-set(url("../img/visual_02.jpg") 1x, url(../img/visual_02@2x.jpg) 2x);
		background-image: -webkit-image-set(url(../img/visual_02.jpg) 1x, url(../img/visual_02@2x.jpg) 2x);
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 140.4761904761905%;
		position: relative;
		opacity: 1; /* 初期状態で可視 */
 		transition: opacity 1.0s ease-in-out; /* 透明度の変化にアニメーションを適用 */
	}
	/* BD02025 */
	/*
	.top-logo{
		width: 50%;
		position: absolute;
		bottom: -6%;
		left: 1%;
		background-size: contain;
		padding-top: 19.29555895865237%;
	}
	*/
	.top-logo{
		width: 70.738095%;
		position: absolute;
		top: 9.2%;
		left: 8.1%;
		background-size: contain;
		padding-top: 19.29555895865237%;
	}
	.top-onair{
		width: 68.77381%;
		position: absolute;
		top: 18.5%;
		left: 9.0%;
		background-size: contain;
		padding-top: 15.688367129135539%;
	}
	.topbanner-movie{
		width: 30%;
		position: absolute;
		bottom: 10%;
		right: 4%;
	}
}

@media all and (max-width: 767px) {
	#visual-area{
		width: 100%;
		height: 140.4761904761905%;
		height: -webkit-calc(1680 / 2360 * 100%);
		height: calc(1680 / 2358 * 100%);
		background-image: url(../img/visual_02.jpg);
		background-image: image-set(url("../img/visual_02.jpg") 1x, url(../img/visual_02@2x.jpg) 2x);
		background-image: -webkit-image-set(url(../img/visual_02.jpg) 1x, url(../img/visual_02@2x.jpg) 2x);
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 140.4761904761905%;
		position: relative;
		opacity: 1; /* 初期状態で可視 */
 		transition: opacity 1.0s ease-in-out; /* 透明度の変化にアニメーションを適用 */
	}
	/* BD02025 */
	/*
	.top-logo{
		width: 50%;
		position: absolute;
		bottom: -7%;
		left: 1%;
		background-size: contain;
		padding-top: 19.29555895865237%;
	}
	*/
	.top-logo{
		width: 72.738095%;
		position: absolute;
		top: 8.0%;
		left: 6.1%;
		background-size: contain;
		padding-top: 19.29555895865237%;
	}
	.top-onair{
		width: 72.77381%;
        position: absolute;
        top: 17.6%;
        left: 6.1%;
        background-size: contain;
        padding-top: 15.688367129135539%;
	}
	.topbanner-movie{
		width: 37%;
		position: absolute;
		bottom: 14%;
		right: 6%;
	}

}

/*	TOP-LINK
============================== */
.toplink-banner img
.toplink-banner-event img{
	width: 100%;;
}
@media all and (min-width: 768px) {
	#toplink-area{
		width: 100%;
		background-color: rgba(232, 247, 255, .7);
		position: absolute;
		bottom: 0;
	}
	.toplink-ul{
		width: 1030px;
		margin: 0 auto;
		padding: 20px 0 10px;
		display: flex;
		justify-content: center;
	}
	.toplink-banner{
		width: 470px;
		margin: 5px;
	}
	.toplink-banner-event{
		width: 630px;
		margin: 5px auto;
		padding: 20px 0 10px;
	}
	
}

@media all and (max-width: 767px) {
	#toplink-area{
		width: 100%;
		background-color: rgba(232, 247, 255, .7);
		padding: 0.5em 0;
		position: absolute;
		bottom: 0;
	}
	.toplink-ul{
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.toplink-banner{
		width: 48%;
		margin: 0 1%;
	}
	.toplink-banner-event{
		width: 80%;
		margin: 0 auto;
	}

}

/*	TOP-UPDATE
============================== */
#top-update-wrap{
	width: 100%;
	background: 
		url("../img/bg_flower_rightup.png"),
		url("../img/bg_flower_leftdown.png"),
		#e8f7ff;
	background-position: 
		right top,
		left bottom;
	background-attachment: local;
	background-repeat: no-repeat;
}
.btn-moreinfo img{
	width: 100%;;
}
.top-h2-update{
	background-image: url(../img/h2_update.png);
	background-image: image-set(url("../img/h2_update.png") 1x, url(../img/h2_update@2x.png) 2x);
	background-image: -webkit-image-set(url(../img/h2_update.png) 1x, url(../img/h2_update@2x.png) 2x);
	background-repeat: no-repeat;
}
.update-li{
	background: #fff;
	font-weight: bold;
}	

@media all and (min-width: 768px) {
	.top-content-inner{
		width: 1080px;
		margin: 0 auto;
		padding: 70px 0;
	}
	.top-h2-update{
		width: 225px;
		height: 95px;
		margin: 0 auto 20px;
	}
	.btn-moreinfo{
		width: 390px;
		margin: 50px auto 0;
	}	
	.update-li{
		width: 790px;
		margin: 0 auto 30px;
		padding: 30px 80px 24px;
		border-radius: 15px;
	}
	.update-date{
		font-size: 14px;
		margin: 0 0 0.5em;
	}
	.update-title{
		font-size: 20px;
		line-height: 1.4em;
	}
	
}

@media all and (max-width: 767px) {
	#top-update-wrap{
		background-size: 
			75%,
			75%;
	}
	.top-content-inner{
		width: 100%;
		margin: 0 auto;
		padding: 2em 0;
	}
	.top-h2-update{
		width: 30%;
		padding-top: 9%;
		margin: 0 auto 1em;
		background-size: contain;
	}
	.btn-moreinfo{
		width: 60%;
		margin: 2em auto 0;
	}	
	.update-li{
		width: 80%;
		margin: 0 auto 1em;
		padding: 5% 5% 3%;
		border-radius: 15px;
	}
	.update-date{
		font-size: 0.7em;
		margin: 0 0 0.5em;
	}
	.update-title{
		font-size: 0.9em;
		line-height: 1.4em;
	}

}

/*	TOP-INTRO
============================== */
#top-intro-wrap{
	width: 100%;
	background-image: url("../img/bg_beach.jpg");
	background-size: cover;
	background-position: top center;
}
.top-h2-intro{
	background-image: url("../img/h2_introduction.png");
	background-image: image-set(url("../img/h2_introduction.png") 1x, url(../img/h2_introduction@2x.png) 2x);
	background-image: -webkit-image-set(url(../img/h2_introduction.png) 1x, url(../img/h2_introduction@2x.png) 2x);
	background-repeat: no-repeat;
}
@media all and (min-width: 768px) {
	#top-intro-wrap{
		height: 780px;
	}
	.top-h2-intro{
		width: 381px;
		height: 95px;
		margin: 0 auto 20px;
	}
	.top-intro-text{
		width: 1037px;
		height: 458px;
		margin: 50px auto 0px;
		background-image: url("../img/top_introtext_pc.png");
		background-image: image-set(url("../img/top_introtext_pc.png") 1x, url(../img/top_introtext_pc@2x.png) 2x);
		background-image: -webkit-image-set(url(../img/top_introtext_pc.png) 1x, url(../img/top_introtext_pc@2x.png) 2x);
		background-repeat: no-repeat;
	}
	
}

@media all and (max-width: 767px) {
	#top-intro-wrap{
		padding: 0 0 1em;
	}
	.top-h2-intro{
		width: 56%;
		padding-top: 10%;
		margin: 0 auto 1em;
		background-size: contain;
	}
	.top-intro-text{
		width: 90%;
		margin: 2em auto 0px;
		padding-top: 133%;
		background-image: url("../img/top_introtext_sp.png");
		background-image: image-set(url("../img/top_introtext_sp.png") 1x, url(../img/top_introtext_sp@2x.png) 2x);
		background-image: -webkit-image-set(url(../img/top_introtext_sp.png) 1x, url(../img/top_introtext_sp@2x.png) 2x);
		background-repeat: no-repeat;
		background-size: contain;
	}

}