@charset "UTF-8";
/* -------------------------------------------------- */
/* PC */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* ページ内共通 */
/* -------------------------------------------------- */
/* 背景色ボックス */
.guaranteeBox01 {
	margin-bottom: 70px;
	padding: 30px 35px 50px;
	background: #f4f2ef;
}

.guaranteeBox01 .tit {
	margin-bottom: 25px;
	font-weight: 600;
	font-size: 2.4rem;
}


/* 白地ボックス */
.guaranteeBox02 {
	padding: 45px 65px 60px;
	background: #fff;
}

.guaranteeBox02 .subBox + .subBox {
	margin-top: 60px;
}

.guaranteeBox02 .tit {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid;
	font-weight: 600;
	font-size: 2rem;
}

.guaranteeBox02 .txt {
	font-size: 1.6rem;
	font-family: var(--font-family-sub);
}


/* -------------------------------------------------- */
/* GRACIAの保証制度 */
/* -------------------------------------------------- */
#system01 {
	margin-bottom: 95px;
}

/* 対象施術 */
#system01Target {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 23px;
}

#system01Target .item {
	min-height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	background: #fff;
	font-weight: 600;
	font-size: 1.8rem;
	text-align: center;
}


.system01Detail {
	font-size: 1.6rem;
	font-family: var(--font-family-sub);
}

.system01Detail + .system01Detail {
	margin-top: 30px;
	padding-top: 25px;
	border-top: 1px solid #d3d3d3;
}

.system01DetailTit {
	margin-bottom: 10px;
	font-weight: 600;
}


/* -------------------------------------------------- */
/* 交通費補助制度 */
/* -------------------------------------------------- */
#system02 {
	margin-bottom: 150px;
}

/* 交通費補助額 */
#system02Subsidy {
	padding: 25px 20px;
	background: #fff;
	font-weight: 600;
	font-size: 2.2rem;
	line-height: 1.8;
	text-align: center;
}
#system02Subsidy .color {
	color: #998a54;
}


#system02Target {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 25px;
	margin-bottom: 25px;
}

#system02Target .item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 15px 25px;
	border: 1px solid;
}

#system02Target .txt.isBold {
	font-weight: 600;
}


#system02Need {
	counter-reset: number;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 60px;
	margin-top: 25px;
}

#system02Need .item {
	padding: 20px 20px 25px;
	border: 1px solid;
}

#system02Need .system02NeedTit {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 17px;
	font-weight: 600;
	font-size: 1.6rem;
	font-family: var(--font-family-sub);
}
#system02Need .system02NeedTit::before {
	counter-increment: number;
	content: counter(number, decimal-leading-zero);
	width: 47px;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f4f2ef;
	border-radius: 50%;
	font-family: var(--font-family-en);
	flex-shrink: 0;
	order: -1;
}

#system02Other {
	margin-left: 10px;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1em;
}

#system02Other .item {
	padding-left: 2em;
	background: url(../../img/common/icon_cross01.svg) no-repeat left top .3em/1em;
	font-size: 1.6rem;
}


/* -------------------------------------------------- */
/* TAB&SP */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {
	/* -------------------------------------------------- */
	/* ページ内共通 */
	/* -------------------------------------------------- */
	/* 背景色ボックス */
	.guaranteeBox01 {
		margin-bottom: 50px;
		padding: max(30px, 5%) max(20px, 5%) max(20px, 5%);
	}

	.guaranteeBox01 .tit {
		margin-bottom: 20px;
		font-size: 2rem;
	}


	/* 白地ボックス */
	.guaranteeBox02 {
		padding: max(30px, 5%) max(20px, 5%);
	}

	.guaranteeBox02 .subBox + .subBox {
		margin-top: 40px;
	}

	.guaranteeBox02 .txt {
		font-size: 1.4rem;
	}


	/* -------------------------------------------------- */
	/* GRACIAの保証制度 */
	/* -------------------------------------------------- */
	#system01 {
		margin-bottom: 70px;
	}

	/* 対象施術 */
	#system01Target {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}

	#system01Target .item {
		font-size: 1.5rem;
	}


	.system01Detail {
		font-size: 1.4rem;
	}

	.system01Detail + .system01Detail {
		margin-top: 20px;
		padding-top: 20px;
	}


	/* -------------------------------------------------- */
	/* 交通費補助制度 */
	/* -------------------------------------------------- */
	#system02 {
		margin-bottom: 80px;
	}


	/* 交通費補助額 */
	#system02Subsidy {
		padding: 20px 15px;
		font-size: 1.7rem;
	}

	#system02Target {
		margin-bottom: 20px;
		grid-template-columns: 1fr;
		grid-gap: 20px;
	}

	#system02Target .item {
		padding-inline: 20px;
	}

	#system02Need {
		grid-template-columns: 1fr;
		grid-gap: 20px;
		margin-top: 20px;
	}

	#system02Need .item {
		padding: 20px 15px;
	}

	#system02Need .system02NeedTit {
		gap: 15px;
		font-size: 1.4rem;
	}
	#system02Need .system02NeedTit::before {
		width: 35px;
	}

	#system02Other {
		margin-left: 5px;
	}

	#system02Other .item {
		font-size: 1.4rem;
	}
}