@charset "utf-8";
/* ===================================================================
　各サイト共通のモーダル
=================================================================== */
.js-modalVideo {
	cursor: pointer;
}

#js-modalWindowClose {
	font-size: 13px;
	line-height: 1;
	display: table;
	box-sizing: border-box;
	width: 250px;
	max-width: 100%;
	margin: 0 auto;
	padding: 1.25em;
	cursor: pointer;
	transition: opacity .25s;
	text-align: center;
	color: #FFFFFF;
	border-radius: 40px;
	background-color: #14A0DC;
}

#js-modalWindowClose:hover {
	opacity: .5;
}
@media screen and (min-width: 35.5em) {
	#js-modalWindowClose {
		font-size: 15px;
	}
}

#js-modalVideoWindow:modal {
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100vh;
	max-height: 100%;
	margin: 0;
	padding: 5vw;
	border: none;
	background-color: transparent;

	-webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 35.5em) {
	#js-modalVideoWindow:modal {
		padding: 30px;
	}
}

#js-modalVideoWindow::backdrop {
	background: rgba(0, 0, 0, .7);

	backdrop-filter: blur(4px);
}

#js-modalVideoWindow.is-fadein {
	animation: fadeInModal .5s forwards;
}
#js-modalVideoWindow.is-fadein::backdrop {
	animation: fadeInModal .5s forwards;
}
@keyframes fadeInModal {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#js-modalVideoWindow.is-fadeout {
	animation: fadeOutModal .2s forwards;
}
#js-modalVideoWindow.is-fadeout::backdrop {
	animation: fadeOutModal .2s forwards;
}
@keyframes fadeOutModal {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

#js-modalVideo__element {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 5vw 8vw;
	text-align: center;
	border-radius: 5vw;
	background-color: #FFFFFF;
}

@media screen and (min-width: 35.5em) {
	#js-modalVideo__element {
		max-width: 960px;
		padding: 50px 80px;
		border-radius: 30px;
	}
}

#js-modalVideo__elementTitle {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	margin: 1em 0;
	text-align: center;
}
@media screen and (min-width: 35.5em) {
	#js-modalVideo__elementTitle {
		font-size: 20px;
	}
}

#js-modalVideo__elementMovie {
	box-sizing: border-box;
	width: 100%;
	vertical-align: bottom;
	outline: none;

	aspect-ratio: 16 /9;
}

#js-modalVideo__annotation {
	font-size: 14px;
	text-align: right;
	margin-top: 0.5em;
	color: #444;
}
@media screen and (min-width: 35.5em) {
	#js-modalVideo__annotation {
		font-size: 16px;
	}
}

/* サイト別ボタン色
-------------------------------------------------------------------- */
.js-modalVideoWindow--skysea #js-modalWindowClose {
	background-color: #0064BA;
}

.js-modalVideoWindow--skydiv #js-modalWindowClose {
	background-color: #0082CE;
}

.js-modalVideoWindow--skypce #js-modalWindowClose {
	background-color: #0C92D1;
}