@charset "UTF-8";

.main_container {
	background-image: url(../img/about_bg.webp);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 2220px 1665px;
}

.breadcrumb {
	margin-top: 0 !important;
}

.title_container {
	width: 100% !important;
}

.about_container {
	display: block;
	max-width: 800px;
	margin: 0 auto;
}
.about_container h3 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: clamp(1.563rem, -0.998rem + 5.33vw, 1.813rem);
	text-align: center;
	letter-spacing: 0.05em;
}
body.font-large .about_container h3 {
	font-size: calc(clamp(1.563rem, -0.998rem + 5.33vw, 1.813rem) + 2px);
}
body.font-extra-large .about_container h3 {
	font-size: calc(clamp(1.563rem, -0.998rem + 5.33vw, 1.813rem) + 6px);
}
.about_article {
	display: block;
	width: 100%;
	margin: 0 auto 30px;
}
.about_article p {
	margin-bottom: 2em;
	font-size: 14px;
	line-height: clamp(1.5rem, 0.22rem + 2.67vw, 1.625rem);
	text-align: justify;
}
body.font-large .about_article p {
	font-size: calc(14px + 2px);
}
body.font-extra-large .about_article p {
	font-size: calc(14px + 6px);
}
.about_article p:nth-last-of-type(1) {
	margin-bottom: 0;
}


.about_flow-container {
	display: flex;
	max-width: 515px;
	width: 100%;
	margin: 0 auto;
	flex-direction: column;
}
.about_flow-last {
	display: flex;
	margin-bottom: 10px;
	padding: 13.5px 15px;
	border: 4px solid #ff8c05;
	border-radius: 7px;
	background-color: #ffffff;
	column-gap: clamp(0.625rem, -4.127rem + 13.82vw, 2.5rem);
	justify-content: center;
	align-items: center;
}
.about_flow-last li {
	max-width: 105px;
	width: 100%;
}
.about_flow-last figure {
	display: block;
	position: relative;
	width: 100%;
}
.about_flow-last figure img {
	width: 100%;
	opacity: 0.1;
}
.about_flow-last figure figcaption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	font-weight: bold;
	font-size: 19px;
	white-space: nowrap;
}
body.font-large .about_flow-last figure figcaption {
	font-size: calc(19px + 2px);
}
body.font-extra-large .about_flow-last figure figcaption {
	font-size: calc(19px + 6px);
}



.about_arrow {
	display: block;
	position: relative;
	margin: 0 auto;
	margin-top: clamp(2.188rem, 1.395rem + 2.3vw, 2.5rem);
}
.about_arrow::before , .about_arrow::after {
	display: block;
	margin: 0 auto;
	content: "";
}
.about_arrow::before {
	height: clamp(4.375rem, 3.583rem + 2.3vw, 4.688rem);

	aspect-ratio: 1/3;
}
.about_arrow::after {
	position: absolute;
	bottom: calc(100% - 1px);
	left: 50%;
	transform: translateX(-50%);
	height: clamp(2.188rem, 1.395rem + 2.3vw, 2.5rem);

	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	aspect-ratio: 5/4;
}
.about_arrow span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	padding: clamp(0.281rem, -0.036rem + 0.92vw, 0.406rem) clamp(0.438rem, -10.969rem + 50vw, 0.75rem);
	border-width: 3px;
	border-style: solid;
	border-radius: 3px;
	background-color: #ffffff;
	font-weight: bold;
	font-size: clamp(0.875rem, 0.241rem + 1.84vw, 1.125rem);
	letter-spacing: 0.05em;
	white-space: nowrap;
}
body.font-large .about_arrow span {
	font-size: calc(clamp(0.875rem, 0.241rem + 1.84vw, 1.125rem) + 2px);
}
body.font-extra-large .about_arrow span {
	font-size: calc(clamp(0.875rem, 0.241rem + 1.84vw, 1.125rem) + 6px);
}
.about_arrow-red , .about_arrow-orange {
	margin-bottom: 10px;
}
.about_arrow-red::before , .about_arrow-red::after {
	background-color: #f00000;
}
.about_arrow-red span {
	border-color: #f00000;
}
.about_arrow-orange::before , .about_arrow-orange::after {
	background-color: #ff8c05;
}
.about_arrow-orange span {
	border-color: #ff8c05;
}
.about_wide {
	display: flex;
	max-width: 460px;
	max-width: clamp(14.688rem, -21.747rem + 105.99vw, 29.063rem);
	width: 100%;
	margin: 0 auto;
	margin-bottom: 10px;
	column-gap: clamp(0.313rem, -0.48rem + 2.3vw, 0.625rem);
}
.about_wide li {
	display: flex;
	justify-content: center;
}
.about_wide-first {
	width: 100%;
}
.about_wide-second {
	max-width: 130px;
	width: 100%;
}
.about_flow-second li {
	position: relative;
	padding: clamp(0.375rem, -1.13rem + 4.38vw, 0.969rem) 5px;
	border-radius: 5px;
	background-color: #ff8c05;
	color: #ffffff;
	font-weight: bold;
	font-size: clamp(0.875rem, 0.241rem + 1.84vw, 1.125rem);
	line-height: clamp(1.313rem, 0.837rem + 1.38vw, 1.5rem);
	text-align: center;
	letter-spacing: 0.05em;
	white-space: nowrap;
	align-items: center;
}
body.font-large .about_flow-second li {
	font-size: calc(clamp(0.875rem, 0.241rem + 1.84vw, 1.125rem) + 2px);
}
body.font-extra-large .about_flow-second li {
	font-size: calc(clamp(0.875rem, 0.241rem + 1.84vw, 1.125rem) + 6px);
}
.about_flow-second li span {
	display: block;
	position: absolute;
	bottom: calc(100% + clamp(0.188rem, -0.129rem + 0.92vw, 0.313rem));
	left: 50%;
	transform: translateX(-50%);
	color: #454545;
	font-size: 14px;
	line-height: normal;
	letter-spacing: 0.05em;
}
body.font-large .about_flow-second li span {
	font-size: calc(14px + 2px);
}
body.font-extra-large .about_flow-second li span {
	font-size: calc(14px + 6px);
}
.about_flow-first {
	display: flex;
	border: 4px solid #b4b4b4;
	border-radius: 5px;
	background-color: #ffffff;
	flex-wrap: wrap;
}

.about_reception-list {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;

	row-gap: 10px;
}
.about_reception-item {
	display: flex;
	position: relative;
	width: 50px;
	border-width: 3px;
	border-style: solid;
	border-radius: 5px;
	justify-content: center;
	align-items: center;

	aspect-ratio: 1/1;
}
.about_reception-item img {
	max-width: 38px;
	width: 86.3637%;
}
.about_reception-item span {
	display: block;
	position: absolute;
	top: calc(100% + clamp(0rem, -0.792rem + 2.3vw, 0.313rem));
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
	font-size: clamp(0.875rem, 0.083rem + 2.3vw, 1.188rem);
	letter-spacing: 0.05em;
	white-space: nowrap;
}
body.font-large .about_reception-item span {
	font-size: calc(clamp(0.875rem, 0.083rem + 2.3vw, 1.188rem) + 2px);
}
body.font-extra-large .about_reception-item span {
	font-size: calc(clamp(0.875rem, 0.083rem + 2.3vw, 1.188rem) + 6px);
}
.about_reception-default {
	border-color: #ff8c05;
}
.about_reception-eica {
	border-color: #1dba2f;
}

.about_flow-first p {
	display: flex;
	width: 100%;
	font-weight: bold;
	font-size: clamp(1rem, 0.683rem + 0.92vw, 1.125rem);
	text-align: center;
	letter-spacing: 0.05em;
}
body.font-large .about_flow-first p {
	font-size: calc(clamp(1rem, 0.683rem + 0.92vw, 1.125rem) + 2px);
}
body.font-extra-large .about_flow-first p {
	font-size: calc(clamp(1rem, 0.683rem + 0.92vw, 1.125rem) + 6px);
}


@media screen and (min-width: 551px) {
	.about_flow-container {
		max-width: 515px;
	}

	@media screen and (min-width: 591px) {
		.about_flow-second li br {
			display: none;
		}
	}
	.about_arrow span br {
		display: none;
	}
	.about_flow-first {
		padding: 15.5px 10px;
		flex-direction: column;
	}
	.about_reception-list {
		max-width: 460px;
		margin: 0 auto;
		margin-bottom: 5px;
	}
	.about_reception-item {
		width: 50px;
	}

	.about_flow-first p {
		max-width: 460px;
		margin: 0 auto;
	}
	.about_flow-first p span {
		display: block;
		width: calc(100% - 59px);
	}
}
@media screen and (max-width: 550px) {
	.about_flow-container {
		max-width: 335px;
	}
	.about_flow-first {
		padding: 3px 10px;
		justify-content: space-between;
	}
	.about_reception-list {
		max-width: 170px;
		padding-bottom: 16px;
	}
	.about_reception-item {
		width: 40px;
	}
	.about_flow-first p {
		justify-content: center;
		align-items: center;
	}
	@media screen and (min-width: 366px) {
		.about_flow-first p {
			max-width: 120px;
		}
	}
	@media screen and (max-width: 365px) {
		.about_wide-second {
			width: calc(30% - clamp(0.156rem, -0.24rem + 1.15vw, 0.313rem));
		}
		.about_flow-first {
			flex-direction: column;
			align-items: center;
		}
		.about_flow-first p br {
			display: none;
		}
	}
}



@media screen and (min-width: 768px) {
	.main_container {
		padding: 170px 0 100px;
	}
	.title_container {
		margin-bottom: 20px;
	}
	.about_container {
		width: 95%;
	}
}

@media screen and (max-width: 767px) {
	.main_container {
		padding: 120px 20px 50px;
	}
	.title_container {
		margin-bottom: 45px;
	}
	.about_container {
		width: 100%;
	}
}