@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(255, 248, 220, .8);
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-container {
	background-color: #fff;
	inline-size: 100%;
	max-inline-size: 120rem;
	block-size: fit-content;
	max-block-size: 100dvh;
	padding: 4rem 5%;
	overflow-y: auto;
	border-radius: 30px;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
}

.modal-container-title {
	text-align: center;
}

.about-shiori-container {
	display: flex;
	justify-content: space-between;
	margin-top: 4rem;
}

.about-shiori-img {
	inline-size: 47%;
}

.about-shiori-text-area {
	inline-size: 47%;
}

.about-shiori-text {
	line-height: 1.6;
}

/* リンクボタン */
.about-shiori-btn {
	display: block;
	inline-size: fit-content;
	margin-top: 3rem;
}

.about-shiori-btn a {
	display: grid;
	grid-template-columns: 1fr auto;
	place-content: center;
	align-items: center;
	grid-column-gap: .8em;
	inline-size: 100%;
	block-size: fit-content;
	padding-block: 1rem;
	padding-inline: 3rem;
	font-size: 1.6rem;
	font-weight: bold;
	color: #222;
	text-align: center;
	border-radius: 40px;
	background-color: #fff;
	box-shadow: 5px 5px 0px 0px var(--brown-color);
	border: 2px solid var(--border-color);
	transition: .3s;
}

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

.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: 60px;
	block-size: 60px;
	position: absolute;
	top: 10px;
	right: 20px;
	/* background-color: #fff;
	border-radius: 50%;
	box-shadow: 5px 5px 0px 0px var(--brown-color); */
}

.btn-modal-close::before {
	content: '';
	display: block;
	inline-size: 30px;
	block-size: 3px;
	background-color: var(--border-color);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-modal-close::after {
	content: '';
	display: block;
	inline-size: 30px;
	block-size: 3px;
	background-color: var(--border-color);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* ====================================
	モーダルアニメ
 ==================================== */
@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;
}


/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {
	.modal-container {
		inline-size: 90%;
		max-block-size: 80dvh;
		margin-top: 0;
		padding: 6rem 5%;
	}

	.about-shiori-container {
		flex-direction: column;
	}

	.about-shiori-text-area {
		inline-size: 100%;
		margin-top: 3rem;
		font-size: 1.4rem;
	}

	.about-shiori-img {
		inline-size: 100%;
	}

	.about-shiori-btn {
		inline-size: fit-content;
		margin-inline: auto;
	}

	.about-shiori-btn a {
		font-size: 1.4rem;
	}

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


}


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

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

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

}