/**
 * インライン動画モーダル用スタイル。
 *
 * `.inline-modal-link` / `.inline-modal-content` 向け。
 * 既存の Colorbox（#cboxOverlay 等）とはクラスを分離して共存する。
 */

.inline-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99998;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.inline-modal-overlay.is-open {
	opacity: 1;
}

.inline-modal-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: visible;
	z-index: 999999;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.inline-modal-dialog.is-open {
	opacity: 1;
}

.inline-modal-dialog__body {
	margin: 0;
	overflow: visible;
	background: transparent;
}

.inline-modal-dialog__body > div,
.inline-modal-dialog__body video {
	width: 100%;
	height: 100%;
	display: block;
}

.inline-modal-dialog__close {
	position: absolute;
	top: 0;
	right: -30px;
	width: 29px;
	height: 29px;
	padding: 0;
	border: none;
	background: url(../images/close.svg) no-repeat center center;
	cursor: pointer;
}

.inline-modal-dialog__close:hover {
	opacity: 0.5;
	transition: all 0.3s;
}