@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-image { background-image: url(../img/about/key-image.jpg); }

/* --------------------------------------------------------------------------------------
	quality
--------------------------------------------------------------------------------------- */

.quality {
	background: url(../img/top/main-bg.jpg) no-repeat center center / cover;
	position: relative;
	z-index: 0;
}

/* 下端のテクスチャを黒へ溶かして、次セクションとの境目を消す */
.quality::after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
	bottom: 0;
	content: "";
	display: block;
	height: 160px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.quality .template-section { width: min(100% - 60px, 1100px); }

.template-section .text-column {
	margin: 64px auto auto;
	max-width: 836px;
}

.template-section .sub-title {
	font-size: 20px;
	font-weight: var(--Bold);
}

.template-section .head-title + .sub-title { margin-top: 64px; }

.template-section .text {
	line-height: 200%;
	margin: 40px auto auto;
}

.template-section .text + .text { margin-top: 20px; }

.template-section .list {
	counter-reset: number 0;
	display: flex;
	gap: 32px;
	margin-top: 52px;
	text-align: left;
}

.template-section .list dl {
	background: rgba(255, 255, 255, 0.20);
	border-radius: 16px 0 0 0;
	padding: 16px 24px;
	width: 100%;
}

.template-section .list dt {
	font-size: 20px;
	font-weight: var(--Bold);
	position: relative;
}

.template-section .list dd {
	font-size: 14px;
	line-height: 170%;
	margin-top: 11px;
}

.template-section .list dd .dotted li {
	line-height: 150%;
	padding-left: 21px;
	position: relative;
}

.template-section .list dd .dotted li::before {
	background-color: #fff;
	border-radius: 100vw;
	content: "";
	height: 5px;
	left: 8px;
	position: absolute;
	top: 8px;
	width: 5px;
}

.frame-message {
	border-image: url(../img/about/frame-message.svg) 32 stretch;
	border-style: solid;
	border-width: 32px;
	margin-top: 64px;
	padding: 20px 40px;
}

.frame-message p {
	font-size: 20px;
	font-weight: var(--Bold);
	line-height: 220%;
	margin-left: auto;
	margin-right: auto;
	max-width: 830px;
	text-align: center;
}

.quality .note {
	font-size: 14px;
	margin-top: 24px;
	text-align: center;
}

.text-section p { line-height: 200%; }

.text-section p:nth-of-type(n+2) { margin-top: 24px; }

@media (max-width: 900px) {

	.quality .template-section { width: min(100% - 12.484vw, 1100px); }

	.quality .note {
		font-size: 2.996vw;
		margin-top: 3.995vw;
	}

	.template-section .text-column { margin-top: 7.99vw; }

	.template-section .sub-title { font-size: 3.995vw; }

	.template-section .head-title + .sub-title { margin-top: 6.991vw; }

	.template-section .text { margin-top: 4.994vw; }

	.template-section .text + .text { margin-top: 3.496vw; }

	.template-section .list {
		flex-direction: column;
		gap: 2.996vw;
		margin-top: 6.991vw;
	}

	.template-section .list dl {
		border-radius: 2.996vw 0 0 0;
		padding: 2.996vw 3.995vw;
	}

	.template-section .list dt { font-size: 3.745vw; }

	.template-section .list dd {
		font-size: 2.996vw;
		margin-top: 1.998vw;
	}

	.template-section .list dd .dotted li { padding-left: 5.243vw; }

	.template-section .list dd .dotted li::before {
		height: 0.999vw;
		left: 1.748vw;
		top: 1.748vw;
		width: 0.999vw;
	}

	.frame-message {
		border-width: 5.993vw;
		margin-top: 7.99vw;
		padding: 2.996vw 1.998vw;
	}

	.frame-message p {
		font-size: 3.246vw;
		line-height: 200%;
		max-width: none;
	}

	.frame-message p br { display: none; }

	.text-section p:nth-of-type(n+2) { margin-top: 3.995vw; }

}

/* --------------------------------------------------------------------------------------
	future
--------------------------------------------------------------------------------------- */

.future {
	background-color: var(--color-gray);
	color: #000;
}

.future .inner {
	text-align: center;
	width: min(100% - 60px, 1100px);
}

.future.template-section .list dl {
	background-color: #fff;
	padding-bottom: 24px;
	padding-top: 24px;
}

.future.template-section .list dd .dotted li::before { background-color: #000; }

.future.template-section .list dt {
	font-size: 18px;
	line-height: 150%;
}

.template-section .numbering dt { padding-left: 56px; }

.template-section .numbering dt::before {
	background: url(../img/common/icon-diamond.svg) no-repeat center center / contain;
	content: "";
	height: 40px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
}

@media (max-width: 900px) {

	.future .inner { width: min(100% - 12.484vw, 1100px); }

	.future.template-section .list dl {
		padding-bottom: 3.995vw;
		padding-top: 3.995vw;
	}

	.future.template-section .list dt { font-size: 3.496vw; }

	.template-section .numbering dt { padding-left: 8.386vw; }

	.template-section .numbering dt::before {
		height: 5.99vw;
		width: 5.99vw;
	}

}

/* --------------------------------------------------------------------------------------
	rate
--------------------------------------------------------------------------------------- */

.rate { width: min(100% - 60px, 1100px); }

.rate-text {
	margin-top: 64px;
	text-align: center;
}

.rate > section { margin-top: 48px; }

.rate .features .features-content {
	counter-reset: number 0;
	display: flex;
	gap: 32px;
	justify-content: center;
	margin-top: 40px;
}

.rate .features .features-content dl {
	border: 1px solid var(--color-gold);
	border-top-left-radius: 16px;
	padding: 80px 36px 40px;
	position: relative;
	width: 100%;
}

.rate .features .features-content dl::before {
	color: var(--color-gold);
	content: "Features: 0" counter(number);
	counter-increment: number 1;
	display: block;
	font-size: 14px;
	font-weight: var(--Bold);
	left: 0;
	position: absolute;
	text-align: center;
	top: 12px;
	width: 100%;
}

.rate .features .features-content dt {
	font-size: 20px;
	font-weight: var(--Bold);
	text-align: center;
}

.rate .features .features-content dd {
	font-size: 14px;
	line-height: 200%;
	margin-top: 10px;
}

.rate .flow .flow-content {
	display: flex;
	gap: 60px;
	justify-content: center;
	margin-top: 63px;
}

.rate .flow .flow-content .column {
	max-width: 160px;
	text-align: center;
	width: 100%;
}

.rate .flow .flow-content .column .thum {
	margin-left: auto;
	margin-right: auto;
	max-width: 160px;
	position: relative;
	z-index: 0;
}

.rate .flow .flow-content .column:not(:last-of-type) .thum::before {
	border-top: 1px solid #fff;
	content: "";
	display: block;
	left: 100%;
	position: absolute;
	top: 50%;
	width: 97%;
}

.rate .flow .flow-content .column:last-of-type .thum::before,
.rate .flow .flow-content .column:last-of-type .thum::after {
	border-top: 1px solid #fff;
	content: "";
	display: block;
	left: -26px;
	position: absolute;
	top: 50%;
	width: 30px;
}

.rate .flow .flow-content .column:last-of-type .thum::before { transform: translateY(calc(-50% - 11px)) rotate(45deg); }
.rate .flow .flow-content .column:last-of-type .thum::after { transform: translateY(calc(-50% + 11px)) scale(-1,1) rotate(45deg); }

.rate .flow .flow-content dt {
	font-size: 20px;
	font-weight: var(--SemiBold);
	margin-top: 16px;
}

.rate .flow .flow-content dd {
	font-size: 14px;
	font-weight: var(--SemiBold);
	line-height: 170%;
	margin-top: 16px;
	text-align: left;
}

.rate .item { margin-top: 63px; }

.rate .item .item-text {
	line-height: 200%;
	margin-top: 40px;
	text-align: center;
}

.rate .item .item-content {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 40px;
}

.rate .item .item-content li {
	align-items: center;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.20);
	border-radius: 999px;
	display: flex;
	flex-direction: column;
	font-size: 20px;
	justify-content: center;
	min-height: 97px;
	text-align: center;
	width: 100%;
}

.rate .item .item-content li small {
	font-size: 16px;
	font-weight: var(--Bold);
}

.rate .label .label-content { margin-top: 40px; }

.rate .label .label-content .column {
	align-items: center;
	border-bottom: 1px solid #fff;
	display: flex;
	gap: 30px;
	padding: 24px 0;
}

.rate .label .label-content .column h4 {
	align-items: center;
	background: rgba(255, 255, 255, 0.10);
	border-radius: var(--border-radius);
	display: flex;
	min-width: 200px;
	padding: 20px 24px;
}

.rate .label .label-content .column h4 span {
	display: inline-block;
	font-size: 24px;
	font-weight: var(--SemiBold);
	line-height: 1;
	margin: auto;
}

.rate .label .label-content .column h4 .last { font-size: 20px; }

.rate .label .label-content .column h4 strong {
	font-weight: var(--SemiBold);
	margin-left: 16px;
}

.rate .label .label-content .column dl {
	align-items: center;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.rate .label .label-content .column dt {
	font-size: 18px;
	font-weight: var(--Bold);
	width: 55%;
}

.rate .label .label-content .column dd {
	font-size: 14px;
	font-weight: var(--SemiBold);
	line-height: 200%;
	width: 100%;
}

.rate .label .note { margin-top: 40px; }

@media (max-width: 900px) {

	.rate { width: min(100% - 12.484vw, 1100px); }

	.rate-text { margin-top: 6.991vw; }

	.rate > section { margin-top: 7.99vw; }

	.rate .features .features-content {
		flex-direction: column;
		gap: 2.996vw;
		margin-top: 5.993vw;
	}

	.rate .features .features-content dl {
		border-top-left-radius: 2.996vw;
		padding: 8.739vw 4.994vw 4.994vw;
	}

	.rate .features .features-content dl::before {
		font-size: 2.996vw;
		top: 2.497vw;
	}

	.rate .features .features-content dt { font-size: 3.995vw; }

	.rate .features .features-content dt br { display: none; }

	.rate .features .features-content dd {
		font-size: 2.996vw;
		line-height: 180%;
		margin-top: 1.998vw;
	}

	.rate .flow .flow-content {
		flex-direction: column;
		gap: 7.99vw;
		margin-top: 6.991vw;
	}

	.rate .flow .flow-content .column {
		align-items: center;
		display: flex;
		gap: 4.245vw;
		max-width: none;
		text-align: left;
	}

	.rate .flow .flow-content .column .thum {
		flex-shrink: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: none;
		width: 28.963vw;
	}

	.rate .flow .flow-content .column dl { width: 100%; }

	.rate .flow .flow-content .column:not(:last-of-type) .thum::before {
		border-left: 1px solid #fff;
		border-top: none;
		height: 7.99vw;
		left: 50%;
		top: 100%;
		width: 0;
	}

	.rate .flow .flow-content .column:nth-last-of-type(2) .thum::before { height: 6.973vw; }

	.rate .flow .flow-content .column:last-of-type .thum::before,
	.rate .flow .flow-content .column:last-of-type .thum::after {
		left: 50%;
		margin-left: -2.622vw;
		top: -2.871vw;
		width: 5.243vw;
	}

	.rate .flow .flow-content .column:last-of-type .thum::before { transform: translateX(-1.873vw) rotate(45deg); }
	.rate .flow .flow-content .column:last-of-type .thum::after { transform: translateX(1.873vw) rotate(-45deg); }

	.rate .flow .flow-content dt {
		font-size: 4.994vw;
		margin-top: 0;
	}

	.rate .flow .flow-content dd {
		font-size: 3.496vw;
		line-height: 160%;
		margin-top: 2.996vw;
	}

	.rate .item { margin-top: 7.99vw; }

	.rate .item .item-text {
		line-height: 180%;
		margin-top: 4.994vw;
	}

	.rate .item .item-content {
		flex-wrap: wrap;
		gap: 2.996vw;
		justify-content: center;
		margin-top: 4.994vw;
	}

	.rate .item .item-content li {
		font-size: 3.496vw;
		line-height: 150%;
		min-height: 15.98vw;
		padding: 1.998vw;
		text-align: center;
		width: calc(50% - 1.498vw);
	}

	.rate .item .item-content li small { font-size: 2.996vw; }

	.rate .label .label-content { margin-top: 4.994vw; }

	.rate .label .label-content .column {
		align-items: flex-start;
		flex-direction: column;
		gap: 3.995vw;
		padding: 6.242vw 0;
	}

	.rate .label .label-content .column h4 {
		justify-content: center;
		min-width: 0;
		padding: 4.994vw;
		width: 48.69vw;
	}

	.rate .label .label-content .column h4 span {
		font-size: 5.993vw;
		margin: 0;
	}

	.rate .label .label-content .column h4 .last { font-size: 4.994vw; }

	.rate .label .label-content .column h4 strong {
		font-size: 3.995vw;
		line-height: 1;
		margin-left: 3.995vw;
	}

	.rate .label .label-content .column dl {
		align-items: flex-start;
		flex-direction: column;
		gap: 3.995vw;
	}

	.rate .label .label-content .column dt {
		font-size: 4.494vw;
		width: 100%;
	}

	.rate .label .label-content .column dd {
		font-size: 3.496vw;
		line-height: 160%;
	}

	.rate .label .label-content .column dd br { display: none; }

	.rate .label .note {
		font-size: 2.996vw;
		line-height: 180%;
		margin-top: 4.994vw;
	}

}

/* --------------------------------------------------------------------------------------
	project
--------------------------------------------------------------------------------------- */

.project .head-text {
	font-size: 20px;
	font-weight: var(--SemiBold);
	margin-top: 80px;
	text-align: center;
}

.project .chart {
	margin: 74px auto auto;
	max-width: 795px;
	position: relative;
	right: -70px;
}

.project .member { margin-top: 98px; }

.project .text {
	margin-top: 32px;
	text-align: center;
}

.project .member-list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 80px;
	justify-content: center;
	margin-top: 32px;
}

.project .member-list .column {
	max-width: 153px;
	text-align: center;
	width: 100%;
}

.project .member-list .column .thum {
	height: 160px;
	margin: auto;
	width: 153px;
}

.project .member-list .column .thum img {
	height: 100%;
	object-fit: cover;
	width: 100%;

}

.project .member-list .column dl { margin-top: 10px; }

.project .member-list .column dt { font-size: 14px; }

.project .member-list .column dd {
	font-weight: var(--SemiBold);
	margin-top: 10px;
}

@media (max-width: 900px) {

	.project .head-text {
		font-size: 3.745vw;
		margin-top: 6.991vw;
	}

	.project .chart {
		margin-top: 5.993vw;
		max-width: none;
		right: 0;
	}

	.project .chart img { width: 100%; }

	.project .member { margin-top: 9.988vw; }

	.project .text {
		font-size: 2.996vw;
		line-height: 180%;
		margin-top: 3.995vw;
	}

	.project .member-list {
		gap: 3.995vw 2.996vw;
		margin-top: 3.995vw;
	}

	.project .member-list .column {
		max-width: none;
		width: calc(33.333% - 1.998vw);
	}

	.project .member-list .column .thum {
		aspect-ratio: 153 / 160;
		height: auto;
		width: 100%;
	}

	.project .member-list .column dl { margin-top: 1.998vw; }

	.project .member-list .column dt {
		font-size: 2.497vw;
		line-height: 150%;
	}

	.project .member-list .column dd {
		font-size: 2.996vw;
		margin-top: 1.498vw;
	}

}

/* --------------------------------------------------------------------------------------
	logo-section
--------------------------------------------------------------------------------------- */

.logo-section {
	background-color: #fff;
	color: #000;
}

.logo-details {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
}

.logo-details .logo { width: 134px; }

.logo-details .details { width: 76%; }

.logo-details .details h3 {
	font-size: 18px;
	font-weight: var(--SemiBold);
}

.logo-details .details .inner {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin-top: 20px;
}

.logo-details .details .inner dl { width: 100%; }

.logo-details .details .inner dt {
	font-size: 14px;
	font-weight: var(--Bold);
}

.logo-details .details .inner dt + dd { margin-top: 20px; }

.logo-details .details .inner dd {
	font-size: 14px;
}

.logo-details .details .inner dd:last-of-type { float: right; }

.logo-section .link {
	line-height: 200%;
	margin-top: 8px;
	text-align: right;
}

.logo-section .link a {
	color: #000;
	text-decoration: underline;
}

@media (max-width: 900px) {

	.logo-details {
		align-items: center;
		flex-direction: column;
		gap: 4.994vw;
		margin-top: 7.99vw;
	}

	.logo-details .logo { width: 19.975vw; }

	.logo-details .details { width: 100%; }

	.logo-details .details h3 {
		font-size: 3.745vw;
		text-align: center;
	}

	.logo-details .details .inner {
		flex-direction: column;
		gap: 2.996vw;
		margin-top: 2.996vw;
	}

	.logo-details .details .inner dt {
		font-size: 2.996vw;
		line-height: 180%;
	}

	.logo-details .details .inner dt + dd { margin-top: 2.996vw; }

	.logo-details .details .inner dd {
		font-size: 2.996vw;
		line-height: 180%;
	}

	.logo-details .details .inner dd:last-of-type { float: none; }

	.logo-section .link {
		font-size: 2.996vw;
		margin-top: 3.995vw;
	}

}