@charset "utf-8";
/* CSS Document */

.information-page{
	background:#050505;
	color:#fff;
}

/* =========================
   HEADER
========================= */

.information-header{
	position:relative;
	padding:160px 8% 120px;
	background:
	linear-gradient(
		to bottom,
		rgba(0,0,0,.35),
		rgba(0,0,0,.88)
	),
	url('../images/top_back.jpg') center center / cover no-repeat;
}

.information-header-inner{
	max-width:1200px;
	margin:0 auto;
}

.information-header h1{
	font-size:clamp(46px, 8vw, 120px);
	font-weight:normal;
	letter-spacing:.14em;
	line-height:1;
	margin-bottom:28px;
}

.information-header p{
	font-size:14px;
	letter-spacing:.24em;
	line-height:2;
	color:rgba(255,255,255,.72);
}


/* =========================
   MAIN
========================= */

.information-main{
	padding:110px 8% 140px;
}

.info-section{
	max-width:1100px;
	margin:0 auto 120px;
}

.info-section h2{
	font-size:clamp(28px, 3vw, 48px);
	font-weight:normal;
	letter-spacing:.16em;
	margin-bottom:45px;
}

/* =========================
   EVENT INFO
========================= */

.info-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:26px;
}

.info-card{
	padding:42px 36px;
	background:#0b0b0b;
	border:1px solid rgba(255,255,255,.08);
}

.info-label{
	display:block;
	margin-bottom:18px;
	font-size:11px;
	letter-spacing:.28em;
	color:rgba(255,255,255,.45);
}

.info-card h3{
	font-size:clamp(28px, 2.6vw, 44px);
	font-weight:normal;
	letter-spacing:.08em;
	line-height:1.4;
}

/* =========================
   TICKET
========================= */

.ticket-box{
	background:#0b0b0b;
	border:1px solid rgba(255,255,255,.08);
	padding:48px;
}

.ticket-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:18px 0;
	border-bottom:1px solid rgba(255,255,255,.08);
}

.ticket-row:last-child{
	border-bottom:none;
}

.ticket-row span{
	font-size:13px;
	letter-spacing:.28em;
	color:rgba(255,255,255,.55);
}

.ticket-row strong{
	font-size:clamp(28px, 2.5vw, 42px);
	font-weight:normal;
	letter-spacing:.08em;
}

.ticket-info{
	display:flex;
	flex-direction:column;
}

.ticket-note{
	margin-top:10px;
	font-size:12px;
	line-height:1.8;
	letter-spacing:.08em;
	color:rgba(255,255,255,.58);
}

/* =========================
   ACCESS
========================= */

.access-box{
	padding:54px;
	background:#0b0b0b;
	border:1px solid rgba(255,255,255,.08);
}

.access-text h3{
	font-size:clamp(28px, 2.6vw, 42px);
	font-weight:normal;
	letter-spacing:.1em;
	line-height:1.5;
	margin-bottom:26px;
}

.access-text p{
	font-size:14px;
	line-height:2;
	color:rgba(255,255,255,.75);
}

.access-note{
	margin-top:28px;
	font-size:13px;
	line-height:2;
	color:rgba(255,255,255,.55);
}

.access-button-area{
	margin-top:40px;
	text-align:right;
}



/* =========================
   BUTTON
========================= */

.info-button{
	display:inline-block;
	padding:16px 58px;
	border:1px solid rgba(255,255,255,.5);
	color:#fff;
	text-decoration:none;
	font-size:12px;
	letter-spacing:.34em;
	background:rgba(255,255,255,.03);
	transition:.35s;
}

.info-button:hover{
	background:rgba(255,255,255,.1);
	border-color:rgba(255,255,255,.9);
	letter-spacing:.42em;
}

/* =========================
   NOTICE
========================= */

.notice-box{
	padding:60px 48px;
	background:#0b0b0b;
	border:1px solid rgba(255,255,255,.08);
	text-align:center;
}

.notice-box p{
	font-size:14px;
	line-height:2;
	color:rgba(255,255,255,.75);
}

.notice-coming{
	margin-top:34px;
	font-size:12px !important;
	letter-spacing:.34em;
	color:rgba(255,255,255,.45) !important;
}

/* =========================
   MOBILE
========================= */

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

	.information-header{
		padding:120px 7% 90px;
		background:
		linear-gradient(
			to bottom,
			rgba(0,0,0,.35),
			rgba(0,0,0,.9)
		),
		url('../images/top_sp_back.jpg') center center / cover no-repeat;
	}

	.information-header h1{
		font-size:clamp(42px, 10vw, 70px);
	}

	.information-main{
		padding:80px 7% 110px;
	}

	.info-section{
		margin-bottom:90px;
	}

	.info-grid{
		grid-template-columns:1fr;
	}

	.info-card,
	.ticket-box,
	.access-box,
	.notice-box{
		padding:34px 28px;
	}

	.ticket-row{
		display:block;
	}

	.ticket-row strong{
		display:block;
		margin-top:14px;
	}

	.access-button-area{
		text-align:center;
	}

	.info-button{
		width:100%;
		padding:16px 20px;
	}

}