/* === Minimal Modaal CSS for Video === */
.modaal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 999;
}
.modaal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
.modaal-outer-wrapper {
	width: 92%;
	max-width: 960px;
}
.modaal-container {
	position: relative;
}
.modaal-video-wrap {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.modaal-video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	background: #000;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.modaal-video-container iframe, .modaal-video-container embed, .modaal-video-container object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modaal-close {
	position: absolute;
	top: -40px;
	right: 0px;
	width: 40px;
	height: 40px;
	border: none;
	background: #fff;
	cursor: pointer;
}
.modaal-close span {
	opacity: 0;
}
.modaal-close:before, .modaal-close:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background: #000;
	transform-origin: center;
}
.modaal-close:before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.modaal-close:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* === fade用の最小アニメーション === */
.modaal-wrapper{
  opacity: 1;
  transition: opacity .3s ease;
}
.modaal-wrapper.modaal-start_fade{
  opacity: 0; /* 開始時/終了時に0へ */
}

/* コンテンツとクローズボタンも同期してフェード */
.modaal-video-wrap,
.modaal-close{
  opacity: 1;
  transition: opacity .3s ease;
}
.modaal-wrapper.modaal-start_fade .modaal-video-wrap,
.modaal-wrapper.modaal-start_fade .modaal-close{
  opacity: 0;
}