/**
 * スマートフォン全ページの配置基準を共通ルールで統一する。
 *
 * 通常コンテンツの中央配置と見出し装飾線の位置を共通管理する。
 * 明示的なモバイル用マークアップは各ページの責務として維持しつつ、
 * 430px以下では見出しに text-wrap: balance、本文・リストに text-wrap: pretty を適用し、
 * 最終行に1文字だけ残る折り返しを抑える。学校説明会の予約CTA見出しだけは、
 * 既存の明示改行を保ったまま text-wrap: pretty で補正する。PC表示には適用しない。
 */
@media screen and (max-width: 760px) {
	/* 意味のまとまりを明示した箇所は、スマホで文節途中に分断しない。 */
	.shs-mobile-keep-phrase,
	.shs-about-family .principal-letter__line,
	.shs-about-family .principal-quote blockquote span,
	.shs-about-family .philosophy-story__title-phrase,
	.shs-about-family .philosophy-story__copy-phrase,
	.shs-about-family .philosophy-step__title-mobile > span,
	.shs-about-family .philosophy-step__description-mobile > span,
	.application-consent__intro-title-mobile > span,
	.application-consent__intro-copy-mobile > span,
	.application-consent-document__title-mobile > span,
	.shs-application-intro__title-mobile > span,
	.shs-application-intro__copy-mobile > span {
		white-space: nowrap;
	}

	/*
	 * 全ページの通常コンテンツを中央寄せに統一する。
	 * main.site-main 限定にはせず、各ページ固有のmainクラスもすべて対象にする。
	 */
	body[class] :is(main[class], main) :where(
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			li,
			dt,
			dd,
			figcaption,
			blockquote,
			span,
			strong,
			small,
			a,
			button
		):not(
			:where(
				form *,
				nav *,
				.front-page-hero *,
				.application-consent-document__content *,
				.application-consent-document__agreement *,
				.shs-application-form *,
				.faq-question *,
				.faq-answer *,
				.contact-faq-question *,
				.contact-faq-answer *,
				.consultation-faq-item *,
				.event-detail-overview__table *,
				table *
			)
		) {
		text-align: center;
	}

	/* 下層ページ共通ヒーローは、パンくずからリードまで中央軸へ揃える。 */
	body[class] :is(main[class], main) .shs-lower-hero__inner {
		align-items: center;
		text-align: center;
	}

	body[class] :is(main[class], main) .shs-lower-hero__breadcrumb {
		justify-content: center;
		text-align: center;
	}

	body[class] :is(main[class], main) :where(
			.shs-lower-hero__title,
			.shs-lower-hero__lead,
			.section-copy
		) {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	/* eyebrow / kicker系は要素自体を中央へ移動する。 */
	body[class] :is(main[class], main) :where(
			.eyebrow,
			[class$="__eyebrow"],
			[class$="__kicker"]
		):not(:where(form *, nav *, .front-page-hero *)) {
		width: fit-content;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	/*
	 * 760px以下の明示的な改行指定は各ページの責務とする。
	 * 430px以下の自然折り返しだけは、ファイル末尾の共通 pretty 指定で補正する。
	 */

	/*
	 * 見出し直下の短い装飾線は、全ページで中央に統一する。
	 * ページ固有CSSより後段で読み込み、共通の中央基準へ揃える。
	 */
	body[class] :is(main[class], main) :where(
			.shs-lower-hero__line,
			.accent-line,
			.edu-accent,
			.profile-summary-card__line,
			.principal-quote__line,
			.shs-form-complete__accent
		) {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	/*
	 * absolute配置の短線は、基準要素の中央座標へ移動する。
	 * position:absoluteを前提とする線だけを対象にし、通常フローの疑似要素へtransformを掛けない。
	 */
	body[class] :is(main[class], main) :where(
			.link-card h3::after,
			.sub-info-card__title::after,
			.event-detail-section-head h2::after
		) {
		left: 50%;
		transform: translateX(-50%);
	}

	/*
	 * flex/block内に置く短線は通常フローのまま中央へ揃える。
	 * left/transformで位置をずらすと線幅の半分だけ左へ寄るため、inline方向のauto marginを使用する。
	 */
	body[class] :is(main[class], main) :where(
			.vertical-flow h3::after,
			.join-flow h3::after,
			.flow-step h3::after
		) {
		left: auto;
		margin-right: auto;
		margin-left: auto;
		transform: none;
	}

	/* 共通CTAのeyebrow内バーはflex配置なので中央揃えを明示する。 */
	body[class] :is(main[class], main) .shs-common-cta .eyebrow {
		align-items: center;
		margin-right: auto;
		margin-left: auto;
	}

	body[class] :is(main[class], main) .shs-common-cta .eyebrow::after {
		margin-right: auto;
		margin-left: auto;
	}

	/* 学校理念ページのタグ・ボタン・画像上ラベルも中央へ揃える。 */
	.is-school-philosophy-page .philosophy-step__tag {
		display: flex;
		width: fit-content;
		margin-right: auto;
		margin-left: auto;
	}

	.is-school-philosophy-page .p3-message__body .btn {
		display: flex;
		width: fit-content;
		margin-right: auto;
		margin-left: auto;
	}

	.is-school-philosophy-page .p3-collage span {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	/* 長文規約・フォーム・FAQ回答などは可読性と操作性のため左揃えを維持する。 */
	body[class] :is(main[class], main) :where(
			.application-consent-document__content,
			.application-consent-document__content *,
			.application-consent-document__agreement,
			.application-consent-document__agreement *,
			.shs-application-form,
			.shs-application-form *,
			.faq-question,
			.faq-question *,
			.faq-answer,
			.faq-answer *,
			.contact-faq-question,
			.contact-faq-question *,
			.contact-faq-answer,
			.contact-faq-answer *,
			.consultation-faq-item,
			.consultation-faq-item *,
			table,
			table *
		) {
		text-align: left;
	}

	/* フッターはmain外なので、スマホ共通中央寄せを個別に適用する。 */
	.shs-site-footer,
	.shs-site-footer :where(a, address, p, span, small) {
		text-align: center;
	}

	.shs-site-footer__brand-area {
		text-align: center;
	}

	.shs-site-footer__brand {
		justify-content: center;
	}

	.shs-site-footer__brand-copy,
	.shs-site-footer__school-name,
	.shs-site-footer__school-name-en {
		text-align: center;
		white-space: normal;
	}

	.shs-site-footer__meta {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.shs-site-footer__address,
	.shs-site-footer__phone,
	.shs-site-footer__mail {
		grid-column: 1;
		justify-content: center;
		text-align: center;
	}

	.shs-site-footer__bottom {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		text-align: center;
	}

	.shs-site-footer__bottom .footer-privacy-link,
	.shs-site-footer__bottom .footer-privacy-link a,
	.shs-site-footer__bottom small {
		text-align: center;
	}
}

@media screen and (max-width: 760px) {
	/* 画面外へはみ出した装飾が本文の中央軸をずらさないよう、公開領域の横方向だけを固定する。 */
	html,
	body,
	.site-container {
		max-width: 100%;
		overflow-x: clip;
	}

	.site-container,
	body[class] :is(main[class], main) {
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 430px) {
	/* 見出し全般は行長を均等化し、日本語1文字だけの最終行を抑える。 */
	body[class] :is(main[class], main) :where(
			h1,
			h2,
			h3,
			h4,
			h5,
			h6
		) {
		text-wrap: balance;
	}

	/* 本文とリストは段落全体の自然な折り返しを維持しながら最終行を補正する。 */
	body[class] :is(main[class], main) :where(p, li) {
		text-wrap: pretty;
	}

	/* 学校説明会の予約CTAは、この見出しだけ既存の明示改行を保ったまま補正する。 */
	#reservation-title {
		text-wrap: pretty;
	}
}