@charset "UTF-8";
/* CSS Document */
:root {
	--red: #fb3722;
	--black: #17162f;
	--white: #ffffff;
	--gray_light: #f5f5f5;
	--wave_color: #0057aa;
}
/* ===============================================================
	 contents01
=============================================================== */
.contents01{margin-bottom: 100px;}
.contents01 .max_w800{margin: 40px auto 0;}
.contents01>img:nth-child(2){margin-top: 30px;}
.contents01 .max_w800 p{line-height: 2;}
.contents01 .max_w800 div{
	text-align: right;
	margin-top: 30px;
}
@media (max-width: 850px) {
	.contents01 .max_w800{margin-top: 20px;}
	.contents01 .max_w800 p{line-height: 1.6;}
.contents01>img:nth-child(2){
	height: 350px;
    object-fit: cover;
}
}
/* ===============================================================
	 contents02
=============================================================== */
.contents02{
	max-width: 1300px;
	padding: 70px 0 100px;
	background: url(../img/contents02_bg.jpg) no-repeat bottom center/contain;
	background-color: #ffe0dd;
	text-align: center;
}
/* --- リスト（カード一覧） --- */
.popup_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 5%;
	margin-top: 50px;
}
.popup_box li {
	max-width: 300px;
	width: 30%;
	cursor: pointer;
}
.popup_box li div {
	font-weight: bold;
	border-radius: 100%;
	aspect-ratio: 1 / 1;
	padding: 40px 1em;
	background: url(../img/logo_img.png) no-repeat center/80%;
	background-color: #e9f4ff;
	color: var(--black);
	transition: 0.3s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.popup_box li div:hover{
	background: var(--wave_color);
	color: var(--white);
}
.popup_box li div span {
	font-size:35px;
	color: var(--wave_color);
	line-height: 1;
}
.popup_box li div:hover span {color: var(--white);}
.popup_box li div p {font-size: clamp(18px, 2.0vw, 25px);}
.popup_box li div b {
	font-size:20px ;
	color: var(--red);
	text-decoration:underline;
}
/* --- ポップアップ オーバーレイ --- */
.popup_overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: #0058aaf2;
	z-index: 1000;
	justify-content: center;
	align-items: center;
}
.popup_overlay.is-open {display: flex;}
/* --- ポップアップ 内側ボックス --- */
.popup_inner {position: relative;}
/* --- 閉じるボタン --- */
.popup_close {
	position: absolute;
	top: -15px;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color:var(--white);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.popup_close::before,
.popup_close::after {
	content: '';
	position: absolute;
	width: 23px;
	height: 2px;
	background-color: var(--wave_color);
	border-radius: 2px;
}
.popup_close::before { transform: rotate(45deg); }
.popup_close::after  { transform: rotate(-45deg); }


/* --- Q ボックス --- */
.Q_box {
	color: var(--white);
	margin-bottom: 16px;
	font-weight: bold;
	font-size: 25px;
}
.Q_box i {
	display: block;
	font-size: 30px;
}
/* --- A ボックス --- */
.A_box {
	background-color: var(--white);
	padding: 50px 0 70px;
}
.A_box > div{
	width: 85%;
    margin: 0 auto;
	max-height: 50vh;
    height: 100%;
    overflow-x: auto;
}
.A_box > div > div {
	font-weight: bold;
	margin-bottom:.8em;
	font-size: 40px;
}
.A_box > div > div i {
	display: block;
	color: var(--red);
	font-size: 30px;
}
.A_box > div > p {
	line-height: 1.8;
	text-align: justify;
	margin: 25px auto 0;
}
/* --- ポップアップ中身は非表示で保持 --- */
.popup_contents {display: none;}
/* ===============================================================
	 RESPONSIVE — タブレット（850px〜1024px）
=============================================================== */
@media (max-width: 1024px) {}

/* ===============================================================
	 RESPONSIVE — スマートフォン（〜850px）
=============================================================== */
@media (max-width: 900px) {
	.contents01{margin-bottom: 60px;}
	.popup_box li {width: 47.5%;}
	.popup_box li div p {font-size: clamp(15px, 3.5vw, 25px);}
}
/* ===============================================================
	 RESPONSIVE — 小さいスマートフォン（〜480px）
=============================================================== */
@media (max-width: 650px) {
	.contents02{padding: 40px 0;}
	.contents02 img.pc{display: none;}
	.contents02 img.sp{
		display: block;
		margin: 0 auto;
		max-width: 220px;
	}
	.popup_box{
		width: 75%;
		margin-top: 25px;
		row-gap: 18px
	}
	.popup_box li {width: 90%;}
	.popup_box li div p {font-size: clamp(15px, 5.2vw, 25px);}
	.popup_box li div span {font-size:25px;}
	.popup_box li div b{font-size: 16px;}

	.A_box > div > div,.Q_box{font-size: 18px;}
	.A_box > div > div i,.Q_box i{font-size: 20px;}
}
@media (max-width: 480px) {}