@charset "UTF-8";
/* Remodal */
iframe {
	vertical-align: bottom;
}
.box-trailer {
	width: 100%;
	max-width: 840px;
	background: #000;
}
.modal-block {
	text-align: left;
	padding: 5px;
}
.modal-block a {
	color: #f6905a;
}
.modal-block p {
	margin: 0.5em 0;
}
.modal-block h2.modal-title {
	font-size: 1.6rem;
	letter-spacing: 5px;
	font-weight: 400;
	font-family: serif;
	color: #ee81b2;
	margin: 20px;
	text-align: center;
}
.modal-block h3 {
	font-size: 1.9rem;
	font-family: serif;
	letter-spacing: 1px;
	margin: 20px 0;
	text-align: center;
}
.modal-block h4 {
	font-size: 1.6rem;
	color: #666;
}
.modal-block p {
	font-size: 1.4rem;
	margin: 20px;
	color: #666;
	line-height: 1.7em;
}
.modal-block .comments-list {
	margin: 45px;
}
.modal-block .comments-list dl {
	margin: 0 0 45px;
	clear: both;
}
.modal-block .comments-list dl.comment-l dt {
	text-align: left;
}
.modal-block .comments-list dl.comment-r dt {
	text-align: right;
}
.modal-block .comments-list dt {
	font-size: 2.3rem;
	font-weight: 400;
	font-family: sans-serif;
	letter-spacing: 1px;
	color: #666;
	line-height: 24px;
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: solid 1px #ee81b2;
}
.modal-block .comments-list dd {
	overflow: hidden;
}
.modal-block .comments-list dd p {
	margin: 1em 3px;
	color: #666;
}
.float-img {
	width: 48%;
}
.float-img img {
	box-sizing: border-box;
	border: solid 1px #DEDEDE;
}
.modal-block .comments-list dl.comment-l dd .float-img {
	padding: 1em 0 30px 30px;
	float: right;
}
.modal-block .comments-list dl.comment-r dd .float-img {
	padding: 1em 30px 30px 0;
	float: left;
}

.table-info {
	table-collapse: collapse;
	width: 100%;
}
.table-info th {
	width: 60px;
	text-align: center;
}
.table-info td {
}
.table-info th,
.table-info td {
	padding: 10px;
	background: #f9ecd9;
}
.table-inner {
	margin: 20px 0;
	padding: 20px;
	border: solid 4px #EFEFEF;
}
.caution {
	font-size: 1.3rem;
	padding: 20px;
	background: #EFEFEF;
}
.caution li {
	color: #666;
	font-size: 1.1rem;
}
.caution .care {
	background: #FFF;
	padding: 10px;
	margin-top: 10px;
}
.caution .care p {
	font-size: 1.1rem;
	line-height: 1.6em;
}
@media screen and (max-width: 768px) {
	.modal-block h3 {
		font-size: 2.1rem;
	}
	.modal-block h4 {
		font-size: 1.6rem;
	}
}
/* ==========================================================================
   予告編モーダル（remodal）— 開閉アニメーション
   ========================================================================== */

/* --- ダイアログ本体 ------------------------------------------------------ */
.box-trailer {
	padding: 0;
}

/* 16:9 の枠を先に確保しておくことで、開いた瞬間の高さのガタつきを防ぐ */
.box-trailer .yt-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.box-trailer .yt-frame > div,
.box-trailer .yt-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* アニメーション中は iframe を描画させない（YouTube の再ラスタライズ＝カクつきの主因）
   開ききってからふわっと出す */
.box-trailer .yt-frame > div,
.box-trailer .yt-frame iframe {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease-out, visibility 0s linear 0.28s;
}
.box-trailer.remodal-is-opened .yt-frame > div,
.box-trailer.remodal-is-opened .yt-frame iframe {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.28s ease-out 0.04s, visibility 0s;
}

/* --- オーバーレイ -------------------------------------------------------- */
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
	-webkit-animation-duration: 0.36s;
	animation-duration: 0.36s;
	-webkit-animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
	animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}

/* --- ダイアログのアニメーション ------------------------------------------ */
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
	-webkit-animation-duration: 0.44s;
	animation-duration: 0.44s;
	-webkit-animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutExpo 風 */
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.remodal.remodal-is-opened {
	will-change: auto;
}

/* デフォルトテーマのキーフレームを上書き（filter: blur(0) を外すのが重要） */
@-webkit-keyframes remodal-opening-keyframes {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 16px, 0) scale(0.96);
		transform: translate3d(0, 16px, 0) scale(0.96);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
}
@keyframes remodal-opening-keyframes {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 16px, 0) scale(0.96);
		transform: translate3d(0, 16px, 0) scale(0.96);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@-webkit-keyframes remodal-closing-keyframes {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 6px, 0) scale(0.98);
		transform: translate3d(0, 6px, 0) scale(0.98);
	}
}
@keyframes remodal-closing-keyframes {
	from {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 6px, 0) scale(0.98);
		transform: translate3d(0, 6px, 0) scale(0.98);
	}
}

/* 動きを抑える設定のユーザー向け */
@media (prefers-reduced-motion: reduce) {
	.remodal.remodal-is-opening,
	.remodal.remodal-is-closing,
	.remodal-overlay.remodal-is-opening,
	.remodal-overlay.remodal-is-closing {
		-webkit-animation-duration: 1ms;
		animation-duration: 1ms;
	}
	.box-trailer .yt-frame > div,
	.box-trailer .yt-frame iframe,
	.box-trailer.remodal-is-opened .yt-frame > div,
	.box-trailer.remodal-is-opened .yt-frame iframe {
		transition: none;
	}
}

@media screen and (max-width: 860px) {
	.remodal-wrapper {
		padding: 10px;
	}
}