@charset "UTF-8";


/* ==================================================
   模擬店・展示ページ
================================================== */


/* =========================
   現在ページのナビゲーション
========================= */

#nav a.current {

	background-color: #FF6B9A;

	color: #ffffff;

}


/* =========================
   ページタイトル
========================= */

.events-header {

	position: relative;

	overflow: hidden;

	margin-top: 35px;

	padding:
		75px 30px 65px !important;

	text-align: center;

	background:
		linear-gradient(
			135deg,
			#FFF1A8 0%,
			#FFD1E0 45%,
			#CFEFFF 100%
		);

	border-radius: 30px;

	box-shadow:
		0 10px 30px
		rgba(0,0,0,0.08);

}


/* 背景の丸 */

.events-header::before {

	content: "";

	position: absolute;

	width: 180px;
	height: 180px;

	top: -70px;
	left: -60px;

	background-color:
		rgba(255,255,255,0.45);

	border-radius: 50%;

}


.events-header::after {

	content: "";

	position: absolute;

	width: 130px;
	height: 130px;

	right: -30px;
	bottom: -40px;

	background-color:
		rgba(255,255,255,0.4);

	border-radius: 50%;

}


.events-header > * {

	position: relative;

	z-index: 2;

}


.events-lead {

	max-width: 650px;

	margin:
		30px auto 0;

	font-weight: bold;

}


/* =========================
   飾り
========================= */

.events-decoration {

	display: flex;

	justify-content: center;

	align-items: center;

	gap: 22px;

	margin-top: 30px;

	font-size: 22px;

}


.events-decoration span:nth-child(1) {

	color: #FF6B9A;

}


.events-decoration span:nth-child(2) {

	color: #FF9F43;

}


.events-decoration span:nth-child(3) {

	color: #5BC0EB;

}


.events-decoration span:nth-child(4) {

	color: #72D5A3;

}


.events-decoration span:nth-child(5) {

	color: #C59BFF;

}


/* ==================================================
   模擬店セクション
================================================== */

.shop-section {

	padding-top:
		90px !important;

}


/* セクション見出し */

.events-section-heading {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 20px;

	margin-bottom: 20px;

}


.events-number {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 65px;
	height: 65px;

	margin: 0;

	background-color: #243B80;

	color: #ffffff;

	font-size: 18px;

	font-weight: 900;

	border-radius: 50%;

	box-shadow:
		5px 5px 0 #FFD84D;

}


.events-section-heading h2 {

	margin: 0;

	color: #243B80;

	font-size: 34px;

	line-height: 1.2;

}


.events-english {

	margin: 0 0 3px;

	color: #FF6B9A;

	font-size: 12px;

	font-weight: 900;

	letter-spacing: 0.2em;

}


.section-description {

	margin:
		25px auto 45px;

	text-align: center;

}


/* ==================================================
   表
================================================== */

.table-scroll {

	width: 100%;

	overflow-x: auto;

	-webkit-overflow-scrolling: touch;

	padding:
		5px 5px 20px;

}


.events-table {

	width: 100%;

	min-width: 760px;

	border-collapse: separate;

	border-spacing: 0 15px;

}


/* =========================
   表ヘッダー
========================= */

.events-table thead th {

	padding:
		18px 20px;

	background-color:
		#243B80;

	color: #ffffff;

	font-size: 16px;

	font-weight: 900;

	letter-spacing: 0.06em;

}


.events-table thead th:first-child {

	border-radius:
		18px 0 0 18px;

}


.events-table thead th:last-child {

	border-radius:
		0 18px 18px 0;

}


.events-table thead span {

	display: block;

	font-size: 10px;

	font-weight: normal;

	opacity: 0.75;

}


/* =========================
   列の幅
========================= */

.class-column {

	width: 18%;

}


.pop-column {

	width: 52%;

}


.page-column {

	width: 30%;

}


/* =========================
   表データ
========================= */

.events-table tbody td {

	padding:
		24px 20px;

	background-color:
		#ffffff;

	text-align: center;

	vertical-align: middle;

	border-top:
		1px solid #eeeeee;

	border-bottom:
		1px solid #eeeeee;

}


.events-table tbody td:first-child {

	border-left:
		1px solid #eeeeee;

	border-radius:
		22px 0 0 22px;

}


.events-table tbody td:last-child {

	border-right:
		1px solid #eeeeee;

	border-radius:
		0 22px 22px 0;

}


.events-table tbody tr {

	filter:
		drop-shadow(
			0 5px 8px rgba(0,0,0,0.05)
		);

	transition:
		transform 0.25s ease;

}


.events-table tbody tr:hover {

	transform:
		translateY(-4px);

}


/* ==================================================
   クラス表示
================================================== */

.class-badge {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 86px;

	padding:
		11px 15px;

	color: #243B80;

	font-size: 17px;

	font-weight: 900;

	border-radius: 40px;

}


/* 色 */

.class-badge.yellow {

	background-color: #FFD84D;

}


.class-badge.pink {

	background-color: #FFB4CC;

}


.class-badge.blue {

	background-color: #A7DFF4;

}


.class-badge.orange {

	background-color: #FFC983;

}


.class-badge.green {

	background-color: #AEE8C8;

}


.class-badge.purple {

	background-color: #D7BEFF;

}


/* ==================================================
   POP画像エリア
================================================== */

.pop-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 430px;

	/* 全てのPOP枠の高さを統一 */
	height: 280px;

	margin: 0 auto;
	padding: 15px;

	border: 4px solid #ffffff;
	border-radius: 20px;

	box-shadow:
		0 5px 15px
		rgba(0, 0, 0, 0.07);

	/* 画像が枠から飛び出さないようにする */
	overflow: hidden;
}


/* ==================================================
   実際のPOP画像
================================================== */

.pop-image {
	display: block;

	width: 100%;
	height: 100%;

	/* 画像全体を枠の中に収める */
	object-fit: contain;

	/* 中央配置 */
	object-position: center;

	margin: 0 auto;

	border-radius: 12px;
}

.pop-placeholder p {

	margin: 0;

	color: #243B80;

	font-weight: 900;

	line-height: 1.5;

}


.pop-icon {

	font-size: 40px;

	color:
		rgba(36,59,128,0.40);

}


/* POP背景 */

.yellow-bg {

	background-color: #FFF1A8;

}


.pink-bg {

	background-color: #FFD1E0;

}


.blue-bg {

	background-color: #CFEFFF;

}


.orange-bg {

	background-color: #FFE0B5;

}


.green-bg {

	background-color: #D7F5E4;

}


.purple-bg {

	background-color: #E9DCFF;

}


/* ==================================================
   詳しく見るボタン
================================================== */

.detail-button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 15px;

	padding:
		12px 24px;

	background-color: #243B80;

	color: #ffffff;

	text-decoration: none;

	font-size: 14px;

	font-weight: bold;

	border-radius: 50px;

	box-shadow:
		0 5px 0 #FFD84D;

	transition:
		all 0.25s ease;

}


.detail-button span {

	font-size: 18px;

}


.detail-button:hover {

	transform:
		translateY(-3px);

	background-color:
		#FF6B9A;

	box-shadow:
		0 8px 0 #FFD84D;

}


/* ==================================================
   校内マップ案内
================================================== */

.events-guide {

	margin-top: 80px;

	padding:
		70px 30px !important;

	background:
		linear-gradient(
			135deg,
			#FFF1A8,
			#FFD1E0,
			#CFEFFF
		);

	text-align: center;

	border-radius: 30px;

}


.events-guide > p:not(.section-label) {

	margin:
		30px auto;

}


.map-button {

	display: inline-flex;

	align-items: center;

	gap: 20px;

	margin-top: 10px;

	padding:
		14px 30px;

	background-color:
		#243B80;

	color:
		#ffffff;

	text-decoration:
		none;

	font-weight:
		bold;

	border-radius:
		50px;

	box-shadow:
		0 6px 0 #FFD84D;

	transition:
		all 0.25s ease;

}


.map-button:hover {

	transform:
		translateY(-4px);

	background-color:
		#FF6B9A;

	box-shadow:
		0 9px 0 #FFD84D;

}


/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 768px) {


	.events-header {

		margin-top: 20px;

		padding:
			55px 20px 50px !important;

		border-radius: 22px;

	}


	.events-lead br {

		display: none;

	}


	.events-section-heading {

		justify-content:
			flex-start;

	}


	.events-section-heading h2 {

		font-size: 28px;

	}


	.events-number {

		width: 55px;
		height: 55px;

		font-size: 15px;

	}


	.section-description br {

		display: none;

	}


	.table-scroll {

		margin-left: 0;

		margin-right: 0;

	}


	.events-table {

		min-width: 700px;

	}


	.events-table tbody td {

		padding:
			18px 14px;

	}


	.pop-placeholder {

		min-height:
			130px;

	}


	.events-guide {

		padding:
			55px 20px !important;

		border-radius:
			22px;

	}
	
	.pop-placeholder {
	height: 230px;
	padding: 10px;
}

　  .pop-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

}


/* ==================================================
   小さいスマートフォン
================================================== */

@media screen and (max-width: 480px) {


	.events-header {

		padding:
			45px 18px !important;

	}


	.events-decoration {

		gap:
			15px;

		font-size:
			17px;

	}


	.events-section-heading h2 {

		font-size:
			24px;

	}


	.events-table {

		min-width:
			650px;

	}


	.class-badge {

		min-width:
			75px;

		font-size:
			14px;

	}


	.detail-button {

		padding:
			10px 18px;

		font-size:
			12px;

	}
	
	.pop-placeholder {
	height: 200px;
}
	
	.events-table tbody td {
	vertical-align: middle;
}

}