@import "./style.css";

.c-section-heading {
	display: block grid;
	justify-items: center;
	margin-block-end: calc(40 * var(--rem));
	margin-inline: auto;
	@media (width >= 768px) {
		margin-block-end: calc(80 * var(--rem));
	}
	span:lang(en) {
		--clamp-min: 57;
		--clamp-max: 88;
		color: var(--color-gray02);
		font-family: var(--font-ins);
		font-weight: 400;
		line-height: 1.8;
		margin-block: var(--leading-trim);
	}
	span:lang(ja) {
		--clamp-min: 26;
		--clamp-max: 40;
		font-family: var(--font-zen);
		line-height: 1.6;
		margin-block-start: -1.85em;
		scale: 0.85 1;
	}
}

/* requirements */
.p-requirements__requirements {
	margin-block-start: calc(64 * var(--rem));
}

.p-table {
	margin-inline: auto;
	max-inline-size: 900px;
}

.p-table__inner {
	border-collapse: collapse;
	inline-size: 100%;
}

.p-table__row {
	border-block-end: 1px solid var(--color-gray03);
	&:first-of-type {
		border-block-start: 1px solid var(--color-gray03);
	}
}

.p-table__header,
.p-table__text {
	display: block;
	text-align: left;
	@media (width >= 768px) {
		display: revert;
	}
}

.p-table__header {
	--clamp-min: 15;
	--clamp-max: 16;
	font-weight: 500;
	padding-block: calc(24 * var(--rem)) calc(6 * var(--rem));
	vertical-align: top;
	@media (width >= 768px) {
		padding-block: calc(40 * var(--rem));
		inline-size: calc(200 / 900 * 100%);
		white-space: nowrap;
	}
}

.p-table__text {
	--clamp-min: 14;
	--clamp-max: 16;
	padding-block: calc(6 * var(--rem)) calc(24 * var(--rem));
	@media (width >= 768px) {
		padding-block: calc(40 * var(--rem));
		padding-inline-start: calc(48 * var(--rem));
	}
}

:where(.p-table__text) p + p {
	margin-top: 1em;
}

.p-dlist__row {
	display: flex;
}

.p-dlist__term {
	white-space: nowrap;
}

/* flow */
.p-requirements__flow {
	margin-block-start: calc(144 * var(--rem));
	@media (width >= 768px) {
		margin-block-start: calc(184 * var(--rem));
	}
}

.p-flow {
	aspect-ratio: 520 / 360;
	display: block grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7.692%;
	margin-inline: auto;
	max-inline-size: 520px;
}

.p-flow__item {
	background-color: var(--color-blue01);
	block-size: 100%;
	container: flow-item / size;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content 1fr;
	inline-size: 100%;
	justify-items: center;
	position: relative;
	&:not(:last-of-type)::after {
		content: "";
		display: block;
		block-size: 33.94cqi;
		inline-size: 24cqi;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		position: absolute;
		right: 0;
		top: 50%;
		translate: 100% -50%;
	}
}

.p-flow__item:nth-child(1) {
	background-color: var(--color-blue01-light03);
	&::after {
		background-color: var(--color-blue01-light03);
	}
	.p-flow__label {
		color: var(--color-blue01-light03);
	}
}

.p-flow__item:nth-child(2) {
	background-color: var(--color-blue01-light02);
	&::after {
		background-color: var(--color-blue01-light02);
	}
	.p-flow__label {
		color: var(--color-blue01-light02);
	}
}

.p-flow__item:nth-child(3) {
	background-color: var(--color-blue01-light01);
	&::after {
		background-color: var(--color-blue01-light01);
	}
	.p-flow__label {
		color: var(--color-blue01-light01);
	}
}

.p-flow__label {
	align-items: baseline;
	background-color: var(--color-white);
	color: var(--color-blue01);
	display: grid;
	font-family: var(--font-ins);
	font-weight: 400;
	grid-template-columns: repeat(2, min-content);
	justify-content: center;
	justify-self: stretch;
	padding: 12cqi 5cqi;
	margin: 12cqi 12cqi 0;
	@media (width >= 768px) {
		gap: 2cqi;
	}
	.text {
		font-size: max(calc(12 * var(--rem)), 16cqi);
		line-height: 1;
		scale: 0.85 1;
	}
	.num {
		font-size: max(calc(19 * var(--rem)), 26cqi);
		line-height: 1.1;
		scale: 0.85 1;
	}
}

.p-flow__title {
	color: var(--color-white);
	display: block;
	font-size: max(calc(16 * var(--rem)), 18cqb);
	letter-spacing: 0.1em;
	margin-inline-end: 11cqi;
	text-align: center;
	writing-mode: vertical-rl;
}