@charset "UTF-8";

.sectionTitle {
	text-align: center;
}

.pageCopy {
	color: #376028;
	font-size: clamp(22px, 1.04rem + 0.7vw, 30px);
	line-height: 1.6;
}
.pageCopy + .sectionText {
	margin-top: 2em;
}

.pageCaption > li {
	font-size: 10px;
	line-height: 2;
	padding-left: 1em;
	text-indent: -1em;
}

.sectionText .em {
	color: var(--color-orange);
	font-weight: 500;
}

@media screen and (max-width: 768px) {
	.pageCopy {
		width: 110%;
		transform: translateX(-5%);
		text-align: center;
	}

	.modal__container {
		width: 100%;
		padding: 0;
	}
}

/* zehSection
---------------------------------------------- */
.zehSection {
	padding-block: clamp(80px, 3.18rem + 7.77vw, 200px);
}

.zehContents {
	max-width: 1300px;
	padding-bottom: clamp(60px, 2.84rem + 3.88vw, 120px);
}
.zehContents + .zehContents {
	border-top: 1px solid #d1d1d1;
	padding-top: clamp(50px, 2.37rem + 3.24vw, 100px);
}

/* about
---------------------------------------------- */
.about {
	margin-top: 140px;
}

.aboutBox {
	gap: 30px 5%;
}

.aboutBox__head {
	flex: 1;
}

.aboutBox__copy {
	color: #376028;
}
.aboutBox__copy::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background-color: var(--color-orange);
	margin-top: 40px;
}

.aboutBox__text {
	margin-top: 45px;
}
.aboutBox__text + .aboutBox__text {
	margin-top: 1em;
}

.aboutBox__body {
	width: calc(600 / 1300 * 100%);
}

.aboutMerit {
	gap: 30px 5%;
	margin-top: 70px;
}

.aboutMerit__copy {
	flex: 1;
	color: #666;
	font-size: clamp(22px, 1.21rem + 0.35vw, 26px);
	line-height: 1.2;
}

.aboutMeritList {
	display: flex;
	justify-content: flex-end;
	gap: 10px calc(30 / 880 * 100%);
	width: calc(880 / 1300 * 100%);
}
.aboutMeritList > li {
	width: calc((100% - 120px) / 2);
	background-color: #618154;
	color: #fff;
	font-family: YakuHanJP,'Noto Sans JP',sans-serif;
	font-size: clamp(18px, 0.96rem + 0.35vw, 22px);
	font-weight: 500;
	padding: 0.9em .5em;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.about {
		margin-top: 40px;
	}

	.aboutBox__head {
		flex: revert;
		width: 100%;
	}

	.aboutBox__copy {
		font-size: 22px;
		text-align: center;
	}
	.aboutBox__copy::after {
		width: 36px;
		margin-top: 20px;
		margin-inline: auto;
	}

	.aboutBox__text {
		margin-top: 25px;
	}

	.aboutBox__body {
		width: 100%;
		max-width: 400px;
		margin-inline: auto;
	}

	.aboutMerit {
		margin-top: 50px;
	}

	.aboutMerit__copy {
		flex: revert;
		width: 100%;
		text-align: center;
	}

	.aboutMeritList {
		flex-direction: column;
		width: calc(280 / 320 * 100%);
		margin-inline: auto;
	}
	.aboutMeritList > li {
		width: 100%;
		font-size: 18px;
		padding-block: 1.15em;
	}
}

/* comfort
---------------------------------------------- */
.comfort__img {
	margin-top: 60px;
}

@media screen and (max-width: 768px) {
	.comfort__img {
		max-width: 400px;
		margin-top: 50px;
		margin-inline: auto;
	}
}

/* bels
---------------------------------------------- */
.belsBox {
	gap: 40px 5%;
}

.belsBoxHead {
	flex: 1;
}

.belsBoxBody {
	width: calc(500 / 1300 * 100%);
}

.bels .pageCaption {
	margin-top: 1em;
}

@media screen and (max-width: 768px) {
	.belsBoxHead {
		flex: revert;
		width: 100%;
	}

	.belsBoxBody {
		width: 100%;
	}
}

/* merit
---------------------------------------------- */
.meritList {
	row-gap: 40px;
	margin-top: 60px;
}

.meritList > li {
	width: calc((100% - 100px) / 3);
}

.meritList__copy {
	font-size: 18px;
	line-height: 1.5;
	margin-top: 1.5em;
}
.meritList__copy sup {
	top: -1em;
	font-size: 50%;
}


.meritList__text {
	margin-top: 1.5em;
}
.meritList__text .small {
	display: block;
	font-size: 10px;
	margin-top: 0.5em;
}

@media screen and (max-width: 768px) {
	.meritList {
		max-width: 400px;
		margin-top: 40px;
		margin-inline: auto;
	}

	.meritList > li {
		width: 100%;
	}

	.meritList__text {
		margin-top: 1em;
	}

}

/* loan
---------------------------------------------- */
.loanBox {
	margin-top: 60px;
}

.loan .pageCaption {
	margin-top: 2em;
}

@media screen and (max-width: 768px) {
	.loanBox {
		max-width: 400px;
		margin-top: 40px;
		margin-inline: auto;
	}
}

/* system
---------------------------------------------- */
.system {
	padding-bottom: 0;
}

.system .pageCopy {
	color: inherit;
}

.systemBox {
	margin-top: 60px;
}

.system .pageCaption {
	margin-top: 1em;
}

@media screen and (max-width: 768px) {
	.systemBox {
		max-width: 400px;
		margin-top: 40px;
		margin-inline: auto;
	}

	.system .pageCaption {
		margin-top: 1em;
	}

	.systemModal .swipeInner {
		padding: 20px;
	}
}