/*
 * 会社情報ページ（Figma PC 15:607 / SP 15:5546）。
 * 2カラム構図は共通の .section-split、見出し帯は共通の .page-hero を使う。
 */
.about-page {
	padding-bottom: var(--section-space);
}

.about-block > * {
	margin-block: 0;
}

.about-block--message {
	padding-top: 120px;
	grid-template-areas:
		"head ."
		"figure body";
	row-gap: 54px;
}

.about-block--company {
	margin-top: 160px;
	grid-template-areas: "head profile";
	align-items: start;
}

.about-block__head {
	grid-area: head;
}

.about-block__figure {
	grid-area: figure;
	width: 100%;
	aspect-ratio: 640 / 460;
	border-radius: 12px;
	background: #d9d9d9;
	object-fit: cover;
}

.about-block__body {
	grid-area: body;
}

.about-message__text > p {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/* Figmaの空行1行分をそのまま段落間の余白として扱う。 */
.about-message__text > p + p {
	margin-top: 1.8em;
}

.about-message__signature {
	margin: 40px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-align: right;
}

.about-profile {
	--profile-pad-left: 40px;
	--profile-pad-right: 24px;
	--profile-label: 142px;
	--profile-gap: 24px;

	grid-area: profile;
	margin: 0;
	border-top: 1px solid rgb(255 255 255 / 45%);
}

.about-profile__row {
	display: grid;
	grid-template-columns: var(--profile-label) minmax(0, 1fr);
	gap: var(--profile-gap);
	padding: 24px var(--profile-pad-right) 24px var(--profile-pad-left);
	border-bottom: 1px solid rgb(255 255 255 / 45%);
}

.about-profile dt {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.about-profile dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.about-profile dd > p {
	margin: 0;
}

.about-profile__row--address dd {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Googleマップ埋め込み。APIキー不要の従来型URLを使い、読み込みは遅延させる。 */
.about-profile__map {
	order: 2;
	width: 100%;
	margin-top: 40px;
	aspect-ratio: 530 / 320;
	overflow: hidden;
	background: #d9d9d9;
}

.about-profile__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.about-profile__maplink {
	order: 3;
	margin-top: 12px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-position: from-font;
}

.about-profile__list {
	margin: 0;
	padding-left: 24px;
	list-style: disc;
}

@media (max-width: 899px) {
	.about-block--message,
	.about-block--company {
		grid-template-areas: none;
		row-gap: 0;
	}

	.about-block > * {
		grid-area: auto;
	}

	.about-block__figure {
		margin-top: 54px;
	}

	.about-block__body {
		margin-top: 40px;
	}

	.about-profile {
		margin-top: 40px;
	}
}

@media (max-width: 899px) {
	.about-block--message {
		padding-top: 60px;
	}

	.about-block--company {
		margin-top: 120px;
	}

	.about-block__figure {
		margin-top: 30px;
		aspect-ratio: 350 / 252;
	}

	.about-message__text > p {
		font-size: 14px;
	}

	.about-message__signature {
		font-size: 18px;
	}

	.about-profile {
		--profile-pad-left: 20px;
		--profile-pad-right: 0px;
		--profile-label: 80px;
		--profile-gap: 16px;

		margin-top: 27px;
		border-top: 0;
	}

	.about-profile__row {
		padding-block: 20px;
	}

	.about-profile dt,
	.about-profile dd {
		font-size: 14px;
	}

	/* SPは地図だけレール全幅へ広げる（Figma 350px）。 */
	.about-profile__map {
		order: 3;
		width: calc(100% + var(--profile-pad-left) + var(--profile-label) + var(--profile-gap));
		margin-top: 20px;
		margin-left: calc(-1 * (var(--profile-pad-left) + var(--profile-label) + var(--profile-gap)));
		aspect-ratio: 350 / 211;
	}

	.about-profile__maplink {
		order: 2;
		margin-top: 12px;
		font-size: 12px;
	}

	.about-profile__list {
		padding-left: 21px;
	}
}