@charset "UTF-8";


/* ==================================================
   ステージページ
================================================== */


/* ==================================================
   現在表示しているナビゲーション
================================================== */

#nav a.current {
	background-color: #5BC0EB;
	color: #ffffff;
}


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

.stage-header {
	position: relative;

	overflow: hidden;

	margin-top: 35px;

	padding:
		75px 30px 65px !important;

	text-align: center;

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

	border-radius: 30px;

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


/* 背景装飾 */

.stage-header::before {
	content: "";

	position: absolute;

	width: 180px;
	height: 180px;

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

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

	border-radius: 50%;
}


.stage-header::after {
	content: "";

	position: absolute;

	width: 130px;
	height: 130px;

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

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

	border-radius: 50%;
}


.stage-header > * {
	position: relative;

	z-index: 2;
}


.stage-lead {
	max-width: 650px;

	margin:
		30px auto 0;

	font-weight: bold;
}


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

.stage-decoration {
	display: flex;

	justify-content: center;
	align-items: center;

	gap: 22px;

	margin-top: 30px;

	font-size: 24px;
}


.stage-decoration span:nth-child(1) {
	color: #FF6B9A;
}


.stage-decoration span:nth-child(2) {
	color: #FF9F43;
}


.stage-decoration span:nth-child(3) {
	color: #5BC0EB;
}


.stage-decoration span:nth-child(4) {
	color: #72D5A3;
}


.stage-decoration span:nth-child(5) {
	color: #C59BFF;
}


/* ==================================================
   各ステージセクション
================================================== */

.stage-section {
	padding-top:
		90px !important;
}


.mstage-section {
	margin-top: 30px;

	padding-bottom: 60px !important;
}


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

.stage-section-heading {
	display: flex;

	align-items: center;

	justify-content: center;

	gap: 20px;

	margin-bottom: 20px;
}


.stage-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;
}


.pink-number {
	background-color: #FF6B9A;

	box-shadow:
		5px 5px 0 #5BC0EB;
}


.stage-section-heading h2 {
	margin: 0;

	color: #243B80;

	font-size: 34px;

	line-height: 1.2;
}


.stage-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;
}


.stage-table {
	width: 100%;

	min-width: 760px;

	border-collapse: separate;

	border-spacing:
		0 15px;
}


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

.stage-table thead th {
	padding:
		18px 20px;

	background-color:
		#243B80;

	color: #ffffff;

	font-size: 16px;

	font-weight: 900;

	letter-spacing: 0.06em;
}


.stage-table thead th:first-child {
	border-radius:
		18px 0 0 18px;
}


.stage-table thead th:last-child {
	border-radius:
		0 18px 18px 0;
}


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

.name-column {
	width: 18%;
}


.pop-column {
	width: 52%;
}


.page-column {
	width: 30%;
}


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

.stage-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;
}


.stage-table tbody td:first-child {
	border-left:
		1px solid #eeeeee;

	border-radius:
		22px 0 0 22px;
}


.stage-table tbody td:last-child {
	border-right:
		1px solid #eeeeee;

	border-radius:
		0 22px 22px 0;
}


.stage-table tbody tr {
	filter:
		drop-shadow(
			0 5px 8px
			rgba(0,0,0,0.05)
		);

	transition:
		transform 0.25s ease;
}


.stage-table tbody tr:hover {
	transform:
		translateY(-4px);
}


/* ==================================================
   クラス・出演者表示
================================================== */

.stage-badge {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 90px;

	padding:
		11px 15px;

	color: #243B80;

	font-size: 17px;

	font-weight: 900;

	border-radius: 40px;
}


/* 色 */

.stage-badge.yellow {
	background-color: #FFD84D;
}


.stage-badge.pink {
	background-color: #FFB4CC;
}


.stage-badge.blue {
	background-color: #A7DFF4;
}


.stage-badge.orange {
	background-color: #FFC983;
}


.stage-badge.green {
	background-color: #AEE8C8;
}


.stage-badge.purple {
	background-color: #D7BEFF;
}


/* ==================================================
   POP画像の外枠
================================================== */

.stage-pop {
	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;
}


.stage-pop p {
	margin: 0;

	color: #243B80;

	font-weight: 900;

	line-height: 1.5;
}


/* ==================================================
   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;
}


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

.stage-pop-image {
	display: block;

	width: 100%;
	height: 100%;

	/* POP全体を切らずに表示 */
	object-fit: contain;

	object-position: center;

	margin: 0 auto;

	border-radius: 12px;
}


/* ==================================================
   詳しく見る
================================================== */

.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:
		#5BC0EB;

	box-shadow:
		0 8px 0 #FFD84D;
}


/* ==================================================
   下部案内
================================================== */

.stage-guide {
	margin-top: 80px;

	padding:
		70px 30px !important;

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

	text-align: center;

	border-radius: 30px;
}


.stage-guide > p:not(.section-label) {
	margin:
		30px auto;
}


/* ==================================================
   タイムテーブルボタン
================================================== */

.stage-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;
}


.stage-button:hover {
	transform:
		translateY(-4px);

	background-color:
		#FF6B9A;

	box-shadow:
		0 9px 0 #FFD84D;
}


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

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


	.stage-header {
		margin-top: 20px;

		padding:
			55px 20px 50px !important;

		border-radius: 22px;
	}


	.stage-lead br {
		display: none;
	}


	.stage-section-heading {
		justify-content:
			flex-start;
	}


	.stage-section-heading h2 {
		font-size: 28px;
	}


	.stage-number {
		width: 55px;
		height: 55px;

		font-size: 15px;
	}


	.section-description br {
		display: none;
	}


	.stage-table {
		min-width: 700px;
	}


	.stage-table tbody td {
		padding:
			18px 14px;
	}


	.stage-pop {
	height: 230px;

	padding: 10px;
}


	.stage-guide {
		padding:
			55px 20px !important;

		border-radius: 22px;
	}

}


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

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


	.stage-header {
		padding:
			45px 18px !important;
	}


	.stage-decoration {
		gap: 15px;

		font-size: 18px;
	}


	.stage-section-heading h2 {
		font-size: 24px;
	}


	.stage-table {
		min-width:
			650px;
	}


	.stage-badge {
		min-width:
			80px;

		font-size:
			14px;
	}


	.detail-button {
		padding:
			10px 18px;

		font-size:
			12px;
	}
	
	.stage-pop {
	height: 200px;
}

}