/*--------------------------------------------------------------
# Base Styles
# トップページ基本スタイル
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/
.front-page .container {
	max-width: 80rem;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Section Common
--------------------------------------------------------------*/
section {
	display: block;
	width: 100%;
}

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

.section-title {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-extrabold);
	margin-bottom: 1.5em;
	text-align: center;
	color: var(--color-gray-dark);
	letter-spacing: 0.05em;
	line-height: var(--line-height-snug);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2em;
}

/*--------------------------------------------------------------
# Responsive - Mobile (max-width: 768px)
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.front-page .container {
		max-width: 100%;
		padding: 0 var(--container-padding-x-sp);
	}
}

/*--------------------------------------------------------------
# SP Bottom Menu（TOPページ専用・スマートフォン用固定ナビゲーション）
# ヘッダーの .mobile-btn スタイルをベースに実装
--------------------------------------------------------------*/
.sp-bottom-menu {
	display: none;
}

@media screen and (max-width: 768px) {
	.sp-bottom-menu {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.sp-bottom-menu__item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 0.5rem 0.5rem calc(0.5rem + 4px);
		margin-bottom: -4px;
		text-decoration: none;
		color: #fff;
		font-size: clamp(0.5rem, 2.5vw, 0.75rem);
		font-weight: bold;
		line-height: 1rem;
		min-height: clamp(3rem, 12vw, 4rem);
		transition: box-shadow 0.3s ease, transform 0.3s ease;
	}

	.sp-bottom-menu__item img {
		width: 1.5rem;
		height: 1.5rem;
		flex-shrink: 0;
	}

	.sp-bottom-menu__item div {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.sp-bottom-menu__item--campus div span:first-child {
		letter-spacing: -1.44px;
	}

	/* オープンキャンパス（青）- 左端は角丸、上に影 */
	.sp-bottom-menu__item--campus {
		background: linear-gradient(0deg, #00B4FF 0%, #00B4FF 100%);
		border-radius: 8px 0 0 0;
		box-shadow: 0 -4px 0 0 #007AAD;
	}

	/* お問い合わせ（黄）- 上に影 */
	.sp-bottom-menu__item--contact {
		background: linear-gradient(0deg, #FC0 0%, #FC0 100%);
		box-shadow: 0 -4px 0 0 #C79F00;
	}

	/* 資料請求（緑）- 右端は角丸、上に影 */
	.sp-bottom-menu__item--document {
		background: #6DDB00;
		border-radius: 0 8px 0 0;
		box-shadow: 0 -4px 0 0 #4A9400;
	}

	/* ホバー時のアニメーション（ヘッダーと同じ実装、方向は上） */
	.sp-bottom-menu__item:hover {
		box-shadow: none;
		transform: translateY(-4px);
	}
}