@charset "utf-8";
/* CSS Document */





/*==================================================================

		section01　＊　左にテキスト・右に写真

==================================================================*/
.section01 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0 70px;
}
.section01 > .text {
	flex: 1;
	margin-bottom: 0;
}
.section01 > figure {
	flex-shrink: 0;
	width: 500px;
	border-radius: 10px;
	overflow: hidden;
}
.section01 > figure img {
	width: 100%;
	aspect-ratio: 500 / 340;
	object-fit: cover;
}
.section01 .btn {
	margin: 40px 0 0;
}
@media screen and (max-width:640px) {
	.section01 {
		flex-direction: column-reverse;
		gap: 25px 0;
	}
	.section01 > figure {
		width: 100%;
	}
	.section01 .btn {
		width: 100%;
		margin-top: 25px;
		padding: 18px 20px;
		text-align: center;
	}
}




/*==================================================================

		faq

==================================================================*/
.faq ul {
	border-top: 1px solid #ddd;
}
.faq li {
	padding: 35px 10px 30px;
	border-bottom: 1px solid #ddd;
}
.faq h3,
.faq li > .text {
	position: relative;
	padding-left: 60px;
}
.faq h3 {
	margin-bottom: 18px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
}
.faq li > .text {
	margin-bottom: 0;
}

/* Q・A の丸 */
.faq h3::before,
.faq li > .text::before {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	font-family: var(--font-en);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
}
.faq h3::before {
	content: "Q";
	background: var(--color-green);
}
.faq li > .text::before {
	content: "A";
	background: var(--color-orange);
}
@media screen and (max-width:640px) {
	.faq li {
		padding: 25px 0;
	}
	.faq h3,
	.faq li > .text {
		padding-left: 44px;
	}
	.faq h3 {
		margin-bottom: 12px;
		font-size: 16px;
	}
	.faq h3::before,
	.faq li > .text::before {
		width: 30px; height: 30px;
		font-size: 14px;
	}
}






/*==================================================================

		表(使い回し用)
		＊ table は <div class="table_wrap"> で囲む(SPで横スクロール)

==================================================================*/
.table_wrap {
	margin-bottom: 30px;
}
.table_wrap:last-child {
	margin-bottom: 0;
}
.table_wrap table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #8bc8ba;
	border-radius: 10px;
	overflow: hidden;
}
.table_wrap th,
.table_wrap td {
	padding: 18px 20px;
	text-align: center;
	line-height: 1.7;
	border-right: 1px solid #8bc8ba;
	border-bottom: 1px solid #8bc8ba;
}
.table_wrap tr > :last-child { border-right: 0; }
.table_wrap tbody:last-child tr:last-child > *,
.table_wrap tfoot tr:last-child > * { border-bottom: 0; }

/* 見出し行 */
.table_wrap thead th {
	background: var(--color-green);
	color: #fff;
	font-weight: 500;
}
/* 角丸に背景を合わせる */
.table_wrap thead th:first-child { border-top-left-radius: 9px; }
.table_wrap thead th:last-child { border-top-right-radius: 9px; }

/* 見出し列 */
.table_wrap tbody th,
.table_wrap tfoot th {
	background: #f4faf8;
	color: var(--color-green-text);
	font-weight: 500;
}

/* 合計の行 */
.table_wrap tfoot td {
	font-weight: 700;
	color: var(--color-green-text);
}
@media screen and (max-width:640px) {
	.table_wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.table_wrap table {
		min-width: 600px;
	}
	.table_wrap th,
	.table_wrap td {
		padding: 12px 10px;
		font-size: 14px;
	}
}




/*==================================================================

		link_list　＊　ほかのページへのリンク(使い回し用)

==================================================================*/
.link_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.link_list a {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 84px;
	padding: 15px 76px 15px 30px;
	border: 1px solid var(--color-green-light);
	border-radius: 10px;
	background: #fff;
	color: #222;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
}
.link_list a:hover {
	border-color: var(--color-green);
	background: #f4faf8;
	color: var(--color-green-text);
}
/* 右の丸い矢印 */
.link_list a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 24px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--color-green) url("../images/icon04.svg") no-repeat center / 8px auto;
	transform: translateY(-50%);
	transition: 0.3s ease-out;
}
.link_list a:hover::after {
	transform: translate(5px, -50%);
}
@media screen and (max-width:640px) {
	.link_list {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 25px;
	}
	.link_list a {
		min-height: 64px;
		padding: 12px 64px 12px 20px;
		font-size: 15px;
	}
	.link_list a::after {
		right: 16px;
		width: 32px; height: 32px;
	}
}




/*==================================================================

		column2　＊　中身を左右2列に並べる(使い回し用)

==================================================================*/
.column2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 60px;
}
@media screen and (max-width:640px) {
	.column2 {
		grid-template-columns: 1fr;
		gap: 35px 0;
	}
}




/*==================================================================

		flow　＊　STEP 01〜の流れ(使い回し用)
		＊ <ol class="flow"><li><h3>見出し</h3><p>文章</p></li></ol>
		＊ 途中から番号を始めるときは <ol class="flow" start="3">

==================================================================*/
.section01 > .flow {
	flex: 1;
}
.flow li {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr;
	column-gap: 30px;
	padding-bottom: 40px;
	counter-increment: list-item;	/* gridにしても番号が増えるように */
}
.flow li:last-child {
	padding-bottom: 0;
}
/* STEPの丸(番号はolのstartに合わせて自動で付く) */
.flow li::before {
	content: "STEP\A" counter(list-item, decimal-leading-zero);
	grid-row: 1 / 3;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px; height: 80px;
	border-radius: 50%;
	background: var(--color-green);
	color: #fff;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: pre;
}
/* 丸と丸をつなぐ線 */
.flow li::after {
	position: absolute;
	content: "";
	top: 80px;
	bottom: 0;
	left: 39px;
	width: 2px;
	background: var(--color-green-light);
}
.flow li:last-child::after {
	display: none;
}
.flow h3 {
	margin: 18px 0 8px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-green-text);
}
/* h3の後ろの補足　＊　<h3>見出し<span>補足</span></h3> */
.flow h3 span {
	margin-left: 12px;
	font-size: 14px;
	font-weight: 400;
	color: #666;
}
.flow p {
	line-height: 1.9;
}
@media screen and (max-width:640px) {
	.flow li {
		grid-template-columns: 56px 1fr;
		column-gap: 16px;
		padding-bottom: 30px;
	}
	.flow li::before {
		width: 56px; height: 56px;
		font-size: 11px;
		line-height: 1.2;
	}
	.flow li::after {
		top: 56px;
		left: 27px;
	}
	.flow h3 {
		margin: 12px 0 6px;
		font-size: 17px;
	}
	.flow h3 span {
		display: block;
		margin-left: 0;
		font-size: 13px;
	}
	.flow p {
		line-height: 1.8;
	}
}



/*==================================================================

		list_box　＊　薄い緑の箱に入ったリスト(使い回し用)
		＊ .text の中で <ul class="list_box">

==================================================================*/
.text ul.list_box {
	margin: 25px 0;
	padding: 28px 35px;
	border-radius: 10px;
	background: #f4faf8;
	line-height: 1.8;
}
.text ul.list_box li + li {
	margin-top: 10px;
}
.text ul.list_box li::before {
	top: 0.9em;
}
@media screen and (max-width:640px) {
	.text ul.list_box {
		margin: 20px 0;
		padding: 20px;
	}
	.text ul.list_box li + li {
		margin-top: 8px;
	}
}




/*==================================================================

		check_list　＊　チェックマーク付きのリスト(使い回し用)
		＊ .text の中で <ul class="check_list">

==================================================================*/
.text ul.check_list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
	margin: 25px 0 30px;
}
.text ul.check_list li {
	display: flex;
	align-items: center;
	min-height: 76px;
	padding: 16px 24px 16px 66px;
	border-radius: 10px;
	background: #f4faf8;	/* ボタンと見分けがつくよう、枠線なしの薄い緑に */
	font-weight: 500;
	line-height: 1.7;
}
/* チェックの四角 */
.text ul.check_list li::before {
	top: 50%;
	left: 24px;
	width: 26px; height: 26px;
	border-radius: 6px;
	background: var(--color-green);
	transform: translateY(-50%);
}
/* チェックマーク */
.text ul.check_list li::after {
	position: absolute;
	content: "";
	top: 50%;
	left: 33px;
	width: 8px; height: 13px;
	border-right: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: translateY(-65%) rotate(45deg);
}
@media screen and (max-width:640px) {
	.text ul.check_list {
		grid-template-columns: 1fr;
		gap: 8px 0;
		margin: 20px 0 25px;
	}
	.text ul.check_list li {
		min-height: 0;
		padding: 14px 16px 14px 54px;
		font-size: 14px;
	}
	.text ul.check_list li::before {
		left: 16px;
		width: 22px; height: 22px;
		border-radius: 5px;
	}
	.text ul.check_list li::after {
		left: 24px;
		width: 7px; height: 11px;
		border-width: 0 2px 2px 0;
	}
}