/**
 * 学校概要ページの基本情報、特徴カード、学校データ領域の固有表示を管理する。
 *
 * 1200px以下の基本情報レイアウトは中間幅の圧迫を避けるため2カラムへ切り替える。
 * スマホの文字配置は共通レイヤーに任せ、ページ固有の構造・寸法だけをここで管理する。
 */

/**
 * 1.0 学校概要ページの共通基盤
 *
 * ページ内で共有する色・コンテナ幅・見出し余白を定義し、各情報ブロックの基準を揃える。
 */

.shs-about-family.page-profile {
	background: #fff;
}

/**
 * 2.0 学校の特徴
 *
 * 教育方針や立地などの特徴をカードで比較できるよう、見出し・アイコン・説明文の読み順を統一する。
 */

.shs-about-family .profile-features {
	padding: 72px 0 42px;
	background: #fff;
}

.shs-about-family .profile-section-head {
	margin: 0 auto 38px;
	max-width: 760px;
	text-align: center;
}

.shs-about-family .profile-section-head .accent-line {
	margin-inline: auto;
}

.shs-about-family .profile-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.shs-about-family .profile-feature-card {
	min-height: 190px;
	padding: 27px 18px;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 12px 32px rgba(158, 83, 105, 0.07);
	transition:
		transform var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		box-shadow var(--shs-hover-lift-duration) var(--shs-hover-lift-ease);
}

.shs-about-family .profile-feature-card > div {
	min-width: 0;
	align-self: start;
	padding-top: 6px;
}

.shs-about-family .profile-feature-card:hover {
	transform: translateY(var(--shs-hover-card-lift-distance));
	box-shadow: var(--shadow);
}

.shs-about-family .profile-feature-card__icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	color: #ef78bc;
	background: var(--rose-pale);
	border-radius: 50%;
}

.shs-about-family .profile-feature-card__icon.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-size: 27px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: "liga";
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 27;
}

.shs-about-family .profile-feature-card__icon.shs-material-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.shs-about-family .profile-feature-card h3 {
	margin: 0;
	color: #9e5369;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(17px, 1.32vw, 18px);
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.55;
	line-break: strict;
	overflow-wrap: normal;
	white-space: normal;
	word-break: normal;
}

/* PCの4列表示ではLOCATIONカードだけ本文列を確保し、見出し末尾の孤立改行を防ぐ。 */
@media (min-width: 1171px) {
	.shs-about-family .profile-feature-grid > .profile-feature-card:first-child {
		column-gap: 8px;
	}

	.shs-about-family .profile-feature-grid > .profile-feature-card:first-child h3 {
		letter-spacing: 0;
	}
}

.shs-about-family .profile-feature-card p {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.9;
}

/**
 * 3.0 学校基本情報
 *
 * 学校名・所在地・設置情報と写真を同じ情報群として扱う。中間幅では写真を次段へ送るため、
 * このセクションのグリッド変更はページ全体のブレークポイントと分けて管理する。
 */

.shs-about-family .profile-information {
	padding: 56px 0 92px;
	background: radial-gradient( circle at 91% 10%,
		 rgba(239,
		 120,
		 188,
		 0.08),
		 transparent 25% ),
		 radial-gradient( circle at 8% 88%,
		 rgba(239,
		 120,
		 188,
		 0.05),
		 transparent 20% ),
		 #fffafc;
}

.shs-about-family .profile-information__head {
	max-width: 760px;
	margin: 0 auto 34px;
	text-align: center;
}

.shs-about-family .profile-information__head .accent-line {
	margin-right: auto;
	margin-left: auto;
}

.shs-about-family .profile-information__head .section-copy {
	max-width: 660px;
	margin-right: auto;
	margin-left: auto;
}

.shs-about-family .profile-information__layout {
	display: grid;
	grid-template-columns: minmax(260px, 0.84fr) minmax(430px, 1.25fr) minmax( 260px, 0.78fr );
	gap: 20px;
	align-items: stretch;
}

.shs-about-family .profile-summary-card,
.shs-about-family .profile-information-list,
.shs-about-family .profile-information-photo {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 22px;
}

.shs-about-family .profile-information-list,
.shs-about-family .profile-information-photo {
	background: #fff;
	box-shadow: 0 16px 42px rgba(158, 83, 105, 0.08);
}

.shs-about-family .profile-summary-card {
	position: relative;
	padding: 34px 26px 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: linear-gradient( 180deg, rgba(239, 120, 188, 0.2) 0%, #ffffff 48%, rgba(239, 120, 188, 0.07) 100% ), #ffffff;
	border-color: rgba(239, 120, 188, 0.46);
	box-shadow: inset 0 5px 0 #ef78bc, 0 18px 44px rgba(158, 83, 105, 0.11);
}

.shs-about-family .profile-summary-card::after {
	content: "";
	position: absolute;
	right: -18px;
	bottom: -42px;
	left: -18px;
	height: 120px;
	opacity: 0.16;
	background: linear-gradient( 135deg,
		 transparent 46%,
		 rgba(239,
		 120,
		 188,
		 0.2) 47% 48%,
		 transparent 49% ) 0 0/40px 40px,
		 linear-gradient( 45deg,
		 transparent 46%,
		 rgba(239,
		 120,
		 188,
		 0.15) 47% 48%,
		 transparent 49% ) 0 0/54px 54px;
	pointer-events: none;
}

.shs-about-family .profile-summary-card__mark {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	color: #9e5369;
	background: #ffffff;
	border: 1px solid rgba(239, 120, 188, 0.55);
	box-shadow: 0 8px 22px rgba(158, 83, 105, 0.12);
	border-radius: 50%;
	overflow: hidden;
}

.shs-about-family .profile-summary-card__mark img {
	width: 54px;
	height: 54px;
	object-fit: contain;
	display: block;
}

.shs-about-family .profile-summary-card h3 {
	margin: 20px 0 3px;
	color: #9e5369;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 500;
	letter-spacing: 0.12em;
}

.shs-about-family .profile-summary-card__english {
	margin: 0;
	color: #6f5d65;
	font-family: Georgia, serif;
	font-size: 10px;
	letter-spacing: 0.06em;
}

.shs-about-family .profile-summary-card__line {
	width: 52px;
	height: 1px;
	margin: 18px 0;
	background: var(--rose);
}

.shs-about-family .profile-summary-card__copy {
	margin: 0;
	color: #5f5057;
	font-size: 13px;
	line-height: 1.95;
}

.shs-about-family .profile-summary-card__tags {
	position: relative;
	z-index: 2;
	width: min(100%, 232px);
	margin: 20px auto 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.shs-about-family .profile-summary-card__tags span {
	min-height: 31px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9e5369;
	background: #ffffff;
	border: 1px solid rgba(239, 120, 188, 0.58);
	box-shadow: 0 4px 12px rgba(158, 83, 105, 0.06);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.shs-about-family .profile-summary-card__facts {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: auto;
	padding: 20px 12px 10px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(239, 120, 188, 0.38);
	border-radius: 16px;
}

.shs-about-family .profile-summary-card__facts > div {
	min-width: 0;
	padding: 0 6px;
}

.shs-about-family .profile-summary-card__facts > div + div {
	border-left: 1px solid var(--line);
}

.shs-about-family .profile-summary-card__fact-icon.material-symbols-outlined {
	display: block;
	width: 27px;
	height: 27px;
	margin: 0 auto 7px;
	color: #9e5369;
	font-family: "Material Symbols Outlined";
	font-size: 27px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: "liga";
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 27;
}

.shs-about-family .profile-summary-card__fact-icon.shs-material-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.shs-about-family .profile-summary-card__facts strong,
.shs-about-family .profile-summary-card__facts small {
	display: block;
}

.shs-about-family .profile-summary-card__facts strong {
	color: #9e5369;
	font-size: 9px;
	line-height: 1.45;
	white-space: nowrap;
}

.shs-about-family .profile-summary-card__facts small {
	margin-top: 3px;
	color: #66575e;
	font-size: 8px;
	line-height: 1.45;
}

.shs-about-family .profile-information-list {
	display: flex;
	flex-direction: column;
}

.shs-about-family .profile-information-row {
	min-height: 67px;
	padding: 14px 18px;
	display: grid;
	grid-template-columns: 38px 94px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	color: #51484d;
}

.shs-about-family .profile-information-row + .profile-information-row {
	border-top: 1px solid var(--line);
}

.shs-about-family .profile-information-row__icon {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	color: #ef78bc;
	background: var(--rose-pale);
	border-radius: 50%;
}

.shs-about-family .profile-information-row__icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.shs-about-family .profile-information-row__label {
	color: #ef78bc;
	font-size: 12px;
	font-weight: 700;
}

.shs-about-family .profile-information-row__value {
	padding-left: 14px;
	border-left: 1px solid var(--line);
	font-size: 12px;
	line-height: 1.7;
}

.shs-about-family .profile-information-photo {
	position: relative;
	min-height: 580px;
	margin: 0;
}

.shs-about-family .profile-information-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, transparent 52%, rgba(158, 83, 105, 0.63) 100% );
	pointer-events: none;
}

.shs-about-family .profile-information-photo img {
	width: 100%;
	height: 100%;
	min-height: 580px;
	object-fit: cover;
	object-position: 50% center;
}

.shs-about-family .profile-information-photo figcaption {
	position: absolute;
	z-index: 2;
	right: 24px;
	bottom: 24px;
	left: 24px;
	color: #fff;
	text-align: right;
}

.shs-about-family .profile-information-photo figcaption span {
	display: block;
	margin-bottom: 5px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.shs-about-family .profile-information-photo figcaption strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(22px, 2.4vw, 31px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
}

.shs-about-family .profile-information__message {
	max-width: 900px;
	margin: 42px auto 0;
	text-align: center;
}

.shs-about-family .profile-information__message p {
	margin: 0;
	color: #ef78bc;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 500;
	letter-spacing: 0.1em;
}

.shs-about-family .profile-information__message span {
	display: block;
	margin-top: 15px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.9;
}

.shs-about-family .profile-feature-card__label {
	margin: 0 0 3px;
	color: var(--rose);
	font-family: Georgia, serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

/**
 * 4.0 学習環境
 *
 * 校内設備や学び方の補足を基本情報の後に提示し、学校データから実際の学習環境へ自然に接続する。
 */

.shs-about-family .profile-spaces {
	padding: 88px 0 100px;
	background: #fff;
}

.shs-about-family .profile-space-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.shs-about-family .profile-space-card {
	min-height: 390px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 12px 34px rgba(158, 83, 105, 0.07);
	transition:
		transform var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		box-shadow var(--shs-hover-lift-duration) var(--shs-hover-lift-ease);
}

.shs-about-family .profile-space-card:hover {
	transform: translateY(var(--shs-hover-card-lift-distance));
	box-shadow: var(--shadow);
}

.shs-about-family .profile-space-card__image {
	height: 205px;
	overflow: hidden;
}

.shs-about-family .profile-space-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.shs-about-family .profile-space-card:hover .profile-space-card__image img {
	transform: scale(1.04);
}

.shs-about-family .profile-space-card__body {
	padding: 24px 17px 27px;
}

.shs-about-family .profile-space-card__label {
	margin: 0;
	color: var(--rose);
	font-family: Georgia, serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
}

.shs-about-family .profile-space-card h3 {
	margin: 4px 0 10px;
	color: var(--rose);
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.45;
	white-space: nowrap;
}

.shs-about-family .profile-space-card p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.85;
}

/**
 * 1050pxを少し超える幅でも3カラムの最小幅が不足するため、
 * 学校基本情報だけは1200px以下から2カラムへ切り替える。
 * 写真を次段へ送ることで、学校プロフィールと詳細情報の可読幅を確保する。
 */
@media (max-width: 1200px) {
	.shs-about-family .profile-information__layout {
		grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
	}

	.shs-about-family .profile-information-photo {
		grid-column: 1 / -1;
		min-height: 380px;
	}

	.shs-about-family .profile-information-photo img {
		min-height: 380px;
	}
}

@media (max-width: 1170px) {
	.shs-about-family .profile-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1050px) {
	.shs-about-family .profile-space-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 650.01px) and (max-width: 864px) {
	.shs-about-family .profile-summary-card__facts {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 20px;
		padding: 14px 12px;
	}

	.shs-about-family .profile-summary-card__facts > div {
		padding: 10px 0;
	}

	.shs-about-family .profile-summary-card__facts > div + div {
		border-top: 1px solid var(--line);
		border-left: 0;
	}

	.shs-about-family .profile-summary-card__facts strong {
		white-space: normal;
	}
}

@media (max-width: 650px) {
	.shs-about-family .profile-feature-grid,
	.shs-about-family .profile-space-grid {
		grid-template-columns: 1fr;
	}

	.shs-about-family .profile-feature-card {
		min-height: 0;
	}

	.shs-about-family .profile-feature-card h3 {
		white-space: normal;
	}

	.shs-about-family .profile-space-card h3 {
		white-space: normal;
	}

	.shs-about-family .profile-information__layout {
		grid-template-columns: 1fr;
	}

	.shs-about-family .profile-summary-card {
		min-height: 500px;
	}

	.shs-about-family .profile-information-row {
		grid-template-columns: 38px 94px minmax(0, 1fr);
		padding-inline: 16px;
	}

	.shs-about-family .profile-information-photo,
	.shs-about-family .profile-information-photo img {
		min-height: 330px;
	}

	.shs-about-family .profile-information__message {
		margin-top: 34px;
	}

	.shs-about-family .profile-space-card {
		min-height: 0;
	}
}

@media (max-width: 480px) {
	.shs-about-family .profile-information {
		padding-top: 44px;
	}

	.shs-about-family .profile-information-row {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 10px 12px;
		align-items: start;
	}

	.shs-about-family .profile-information-row__label {
		padding-top: 6px;
	}

	.shs-about-family .profile-information-row__value {
		grid-column: 2;
		padding: 0;
		border-left: 0;
	}

	.shs-about-family .profile-summary-card {
		min-height: 0;
	}

	.shs-about-family .profile-summary-card__facts {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 20px;
	}

	.shs-about-family .profile-summary-card__facts > div {
		padding: 10px 0;
	}

	.shs-about-family .profile-summary-card__facts > div + div {
		border-top: 1px solid var(--line);
		border-left: 0;
	}
}