/**
 * トップページの830px以下で必要なモバイル配置を一元管理する。
 *
 * お問い合わせ、ニュース、提携校のレスポンシブ値をこのファイルへ集約し、foundation/layout.cssとの競合を防ぐ。
 * ファーストビュー固有の調整はpages/home/mobile-fv.cssへ分離し、通常レイアウトと責務を重ねない。
 */

/**
 * 1.0 830px以下のお問い合わせ導線
 *
 * PCの横並びを縦配置へ切り替え、電話リンクを画面幅内へ収める。
 * この幅ではセクション構造だけを変更し、FV固有の配置はmobile-fv.cssへ委ねる。
 */
@media screen and (max-width: 830px) {
	.front-page-contact {
		display: block;
		width: calc(100% - 36px);
		margin: 72px auto 56px;
		overflow: hidden;
		border-radius: 0;
	}

	.front-page-contact .contact-detail {
		width: 100%;
		padding: 38px 24px 34px;
		text-align: center;
		border-right: 0;
		border-bottom: 1px solid var(--shs-border);
	}

	.front-page-contact .contact-detail h2 {
		font-size: 1.35rem;
		line-height: 1.45;
	}

	.front-page-contact .front-page-contact__copy span {
		display: block;
		white-space: nowrap;
	}

	.front-page-contact .contact-tel {
		width: 100%;
		display: block;
	}

	.front-page-contact .contact-tel p a {
		width: 100%;
		min-height: 88px;
		padding: 22px 16px;
		line-height: 1.7;
		overflow-wrap: normal;
		white-space: nowrap;
		word-break: keep-all;
	}

}

/**
 * 2.0 768px以下の主要セクション配置
 *
 * 学校理念・新着情報・提携校をスマートフォンの読み順へ揃える。
 * 見出しの左基準と本文・カードの中央基準を分け、PC用の非対称余白を持ち込まない。
 */
@media screen and (max-width: 768px) {
	.front-page-philosophy,
	.front-page-news,
	.front-page-partner-school {
		padding-right: 18px;
		padding-left: 18px;
		text-align: center;
	}

	/* トップページは見出しだけ左揃え、それ以外の本文・カード・導線は中央揃えにする。 */
	.front-page-philosophy > h2,
	.front-page-philosophy .service-area section h3,
	.front-page-partner-school > h2,
	.front-page-partner-school .partner-school-copy h3,
	.front-page-news__head h2,
	.front-page-contact .contact-detail h2 {
		text-align: left;
	}

	/**
	 * PC向けの左右非対称な余白をスマートフォンへ持ち込まない。
	 * セクション本体だけでなく、本文・教育方針・画像の基準線も画面中央へ揃える。
	 */
	.front-page-philosophy .service-lead {
		width: 100%;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-right: 0;
		padding-left: 0;
		text-align: center;
	}

	/*
	 * ワイプ演出用のspanがインライン幅のままだと、文章本体だけ親要素の中央基準から外れて見える。
	 * スマートフォンでは演出ラッパーも本文幅いっぱいのブロックにし、文章の中心線を画面中央へ固定する。
	 */
	.front-page-philosophy .service-lead > .bgextend,
	.front-page-philosophy .service-lead > .bgextend > .bgappearTrigger,
	.front-page-philosophy .service-lead > .bgextend > .bgappear {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding-right: 0;
		padding-left: 0;
		text-align: center;
	}

	.front-page-philosophy .service-lead__line {
		display: inline;
		line-break: strict;
		word-break: normal;
		overflow-wrap: normal;
		text-wrap: balance;
	}

	/* SCHOOL PHILOSOPHY導入文は意味のまとまりで改行し、端末幅による不自然な折返しを防ぐ。 */
	.front-page-philosophy .service-lead__mobile-segment {
		display: block;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		white-space: nowrap;
	}

	.front-page-philosophy .service-area {
		justify-content: center;
		padding-right: 0;
		padding-left: 0;
	}

	.front-page-philosophy .service-area section {
		margin-right: auto;
		margin-left: auto;
		padding-right: 0;
		padding-left: 0;
		text-align: center;
	}

	.front-page-philosophy .service-area section h3,
	.front-page-philosophy .service-area section p,
	.front-page-philosophy .service-img-wrapper {
		margin-right: auto;
		margin-left: auto;
	}

	.front-page-philosophy .service-area section p {
		text-align: center;
	}

	/*
	 * 箇条書きはセクション中央に共通幅で配置する。
	 * 本文はその共通幅の中心線で中央揃えにし、マーカーだけを同じ左位置へ固定する。
	 * 文量が異なっても「・」の位置と本文の中心が項目ごとに動かないようにする。
	 */
	.front-page-philosophy .service-area section .service-points {
		width: min(92%, 34rem);
		margin-right: auto;
		margin-left: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		text-align: center;
	}

	.front-page-philosophy .service-area section .service-point {
		position: relative;
		display: block;
		width: 100%;
		padding-right: 1.45em;
		padding-left: 1.45em;
		box-sizing: border-box;
		text-align: center;
	}

	.front-page-philosophy .service-area section .service-point::before {
		position: absolute;
		top: 0;
		left: 0.25em;
		width: 1em;
		text-align: center;
	}

	.front-page-philosophy .service-area.startwd::after {
		left: 0;
		right: 0;
		width: 100%;
	}

	.front-page-partner-school .partner-school-copy {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.front-page-news {
		padding: 72px 0 78px;
		text-align: center;
	}

	.front-page-news__inner {
		width: calc(100% - 36px);
	}

	/* トップページの見出しはスマホで左寄せ、それ以外の新着情報要素は中央基準にする。 */
	.front-page-news__head h2,
	.front-page-news__eyebrow {
		text-align: left;
	}

	.front-page-news__lead {
		text-align: center;
	}

	.front-page-news__filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-bottom: 28px;
		border-radius: 12px;
	}

	.front-page-news__filter {
		min-height: 54px;
		padding: 0 10px;
		font-size: 13px;
	}

	.front-page-news__filter:nth-child(2n) {
		border-right: 0;
	}

	.front-page-news__filter:nth-child(n + 3) {
		border-top: 1px solid rgba(239, 120, 188, 0.34);
	}

	.front-page-news__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.front-page-news-card {
		max-width: 520px;
		margin-inline: auto;
	}

	.front-page-news-card__body {
		min-height: 0;
		align-items: center;
		text-align: center;
	}

	.front-page-news-card__meta {
		justify-content: center;
	}

	.front-page-news-card__link {
		margin-right: auto;
		margin-left: auto;
	}

	.front-page-partner-school {
		padding-top: 18%;
		padding-bottom: 16%;
		overflow: hidden;
	}

	.front-page-partner-school .partner-school-area {
		width: 100%;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding: 34px 22px 36px;
	}

	/* FV直下の3導線は縦積みを解除し、スマホでも横1列で比較できる高さに揃える。 */
	.top-priority-links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		margin-top: 16px;
		padding: 0 10px;
	}

	.top-priority-links a {
		min-width: 0;
		min-height: 76px;
		gap: 5px;
		padding: 10px 7px 10px 9px;
		border-radius: 12px;
		font-size: 10px;
		line-height: 1.35;
		text-align: left;
	}

	.top-priority-link__eyebrow {
		margin-bottom: 4px;
		font-size: 9px;
		letter-spacing: 0.08em;
	}

	.top-priority-link__label {
		font-size: 10px;
		letter-spacing: 0.02em;
	}

	.top-priority-link__arrow {
		width: 24px;
		height: 24px;
		font-size: 13px;
	}

	.front-page-partner-school .partner-school-inner {
		display: block;
	}

	.front-page-partner-school .partner-school-copy,
	.front-page-partner-school .partner-school-card {
		width: 100%;
	}

	.front-page-partner-school .partner-school-copy h3 {
		margin-bottom: 20px;
		font-size: clamp(1.45rem, 7vw, 1.9rem);
		line-height: 1.65;
		letter-spacing: 0.06em;
	}

	.front-page-partner-school .partner-school-copy p {
		font-size: 0.95rem;
		line-height: 2.05;
		line-break: strict;
		word-break: normal;
		overflow-wrap: normal;
	}

	.front-page-partner-school .partner-school-copy__description span {
		display: block;
		white-space: normal;
		text-wrap: balance;
	}

	.front-page-partner-school .partner-school-card {
		margin-top: 28px;
		margin-right: auto;
		margin-left: auto;
		padding: 16px 18px;
		background: #fff;
		box-shadow: 0 16px 36px rgba(158, 83, 105, 0.1);
	}

	.front-page-partner-school .partner-school-card img {
		width: 100%;
		max-width: 360px;
		margin-inline: auto;
	}
}

/**
 * 3.0 570px以下の学校理念画像
 *
 * 教育方針の写真を1カラム幅へ広げ、文章から画像へ自然に読み進められる高さを確保する。
 * 背景位置は人物が狭い画面でも残る右基準を維持する。
 */
@media screen and (max-width: 570px) {
	.front-page-philosophy .service-area section {
		width: 100%;
		margin-top: 0;
		margin-bottom: 100px;
	}

	.front-page-philosophy .service-img-wrapper,
	.front-page-philosophy .service-img {
		width: 100%;
		height: 40vh;
		min-height: 260px;
		background-position: right center;
	}

	.front-page-philosophy .service-img-wrapper {
		margin-top: 0;
		margin-bottom: 50px;
	}

	.front-page-philosophy .service-area.startwd::after {
		min-height: 0;
		bottom: 4%;
	}
}

/**
 * 4.0 500px以下の余白と文字サイズ
 *
 * お問い合わせと提携校の内側余白をさらに縮め、狭い端末でも本文と導線を欠けさせない。
 * セクションの意味上の改行は維持し、端末幅だけを理由に不要な横スクロールを発生させない。
 */
@media screen and (max-width: 500px) {
	.front-page-philosophy .service-lead br {
		display: block;
	}

	.front-page-contact {
		width: calc(100% - 36px);
		margin: 62px auto 48px;
	}

	.front-page-contact .contact-detail {
		padding: 34px 22px 30px;
	}

	.front-page-contact .contact-detail p {
		font-size: 0.92rem;
		line-height: 1.9;
	}

	.front-page-contact .contact-tel p a {
		min-height: 82px;
	}

	.front-page-partner-school {
		padding: 20% 14px 18%;
	}

	.front-page-partner-school .partner-school-area {
		width: 100%;
		padding: 32px 18px 34px;
	}

	.front-page-partner-school .partner-school-copy h3 {
		font-size: clamp(1.35rem, 7.2vw, 1.7rem);
	}

	.front-page-partner-school .partner-school-copy h3 br {
		display: block;
	}
}

/**
 * 5.0 400px以下の最小幅調整
 *
 * 固定改行を解除して長文を折り返し可能にし、提携校・お問い合わせの本文が画面外へはみ出すのを防ぐ。
 */
@media screen and (max-width: 400px) {
	.front-page-contact .front-page-contact__copy span,
	.front-page-partner-school .partner-school-copy__description span {
		white-space: normal;
		text-wrap: balance;
	}

	.front-page-partner-school .partner-school-area {
		padding-inline: 16px;
	}

	.front-page-partner-school .partner-school-copy p {
		font-size: 0.9rem;
		line-height: 2;
	}

	.front-page-contact {
		font-size: 0.9rem;
	}
}