@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
.modal {
	display: none;
}

.modal.is-open {
	display: block;
}

.modal .outer-base-width {
	inline-size: 100%;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
	background: rgba(0, 0, 0, .6);
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-container {
	background-color: #fff;
	inline-size: 100%;
	max-inline-size: 1080px;
	block-size: fit-content;
	max-block-size: 100dvh;
	padding: 4rem 5%;
	overflow-y: auto
}

/* スクロールバー・iOSは非対応 */
.modal-container::-webkit-scrollbar {
	inline-size: 10px;
}

.modal-container::-webkit-scrollbar-thumb {
	border: 4px solid transparent;
	background-color: #000;
	background-clip: content-box;
}

.modal-container::-webkit-scrollbar-track {
	background-color: transparent;
}

/* 閉じるボタン */
.btn-modal-close {
	inline-size: 30px;
	block-size: 30px;
	position: absolute;
	top: 8px;
	right: 8px;
}

.btn-modal-close::before {
	content: '';
	display: block;
	inline-size: 20px;
	block-size: 20px;
	background: url('images/icon-close-b.svg') no-repeat center center/contain;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* 見出し */
.modal-title {
	font-size: 1.8rem;
	margin-bottom: 1em;
	font-weight: 700;
	text-align: center;
}

/* ====================================
	モーダルアニメ
 ==================================== */
@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.micromodal-slide[aria-hidden="false"] .modal-overlay {
	animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal-overlay {
	animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide .modal-container,
.micromodal-slide .modal-overlay {
	will-change: transform;
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {

	.modal-overlay {
		padding-inline: 1.5%;
	}

	.modal-container {
		max-block-size: 90vh;
		margin-inline: auto;
		padding: 6rem 4rem;
	}

	/* 閉じるボタン */
	.btn-modal-close {
		inline-size: 50px;
		block-size: 50px;
		top: 10px;
		right: 10px;
	}

	.btn-modal-close::before {
		inline-size: 30px;
		block-size: 30px;
	}

	/* 見出し */
	.modal-title {
		font-size: 3rem;
	}
}