/* 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;
	}

}

/* =========================================================
 * TOP モーダル（1日1回・JST 基準）
 *   - 対応 JS: js/topmodal.js
 *   - 画像  : img/web_modal_260502.jpg
 *   - 既存の md-youtube モーダルとは独立
 * ========================================================= */
.top-modal[hidden]{
	display: none;
}
.top-modal{
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(0, 0, 0, 0);
	transition: background-color 0.45s ease;
	box-sizing: border-box;
}
.top-modal.is-open{
	background: rgba(0, 0, 0, 0.65);
}
.top-modal__overlay{
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.top-modal__panel{
	position: relative;
	max-width: 92vw;
	max-height: 90vh;
	display: inline-block;
	opacity: 0;
	transform: scale(0.96) translateY(8px);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.top-modal.is-open .top-modal__panel{
	opacity: 1;
	transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce){
	.top-modal,
	.top-modal__panel{
		transition: none;
	}
	.top-modal__panel{
		transform: none;
	}
}
.top-modal__image{
	display: block;
	max-width: 92vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	border-radius: 4px;
}
.top-modal__close{
	position: absolute;
	top: -44px;
	right: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.top-modal__close::before,
.top-modal__close::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 1px;
	background: #fff;
	transform-origin: center;
}
.top-modal__close::before{
	transform: translate(-50%, -50%) rotate(45deg);
}
.top-modal__close::after{
	transform: translate(-50%, -50%) rotate(-45deg);
}
.top-modal__close:hover,
.top-modal__close:focus-visible{
	opacity: 1;
	transform: rotate(90deg);
}
.top-modal__close:focus{
	outline: none;
}
@media all and (min-width: 768px){
	/* PC のみ画像表示域を約 10% 縮小 */
	.top-modal__panel{
		max-width: 82vw;
		max-height: 80vh;
	}
	.top-modal__image{
		max-width: 82vw;
		max-height: 80vh;
	}
}
@media all and (max-width: 767px){
	.top-modal{
		padding: 6vh 4vw;
	}
	.top-modal__close{
		top: -68px;
		right: 0;
		width: 56px;
		height: 56px;
	}
	.top-modal__close::before,
	.top-modal__close::after{
		width: 44px;
	}
}