@charset "UTF-8";

/* ====================================
	変数定義
==================================== */
:root {
	--img-on-text-color: #fff;
	--text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

/* ====================================
	共通スタイル
==================================== */

/* ページナビ下部 */
.page-navi-bottom {
	padding-bottom: 10rem;
}

/* メインビジュアル */
.main-visual {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	block-size: 74vw;
	margin-bottom: 5rem;
	background: url(images/main-visual-live_sp.jpg) no-repeat bottom / cover;
	color: var(--img-on-text-color);
	text-shadow: var(--text-shadow);

	.base-width {
		inline-size: 100%;
	}
}

.work-main-visual {
	background-image: url(images/main-visual-work_sp.jpg);
}

.main-visual-title-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	gap: 2rem;
	inline-size: 100%;
	font-weight: 700;
	color: #fff;
}

.main-visual-title {
	inline-size: 100%;
	font-size: 4.2rem;
	font-weight: 700;
	line-height: 1;
}

.main-visual-text {
	inline-size: 100%;
}

/* セクション */
.section-header,
.section-header-no-img {
	padding-bottom: 3rem;
}

.section-header {
	block-size: 52vw;
	background: url(images/live-zone1_sp.jpg) no-repeat bottom / cover;
	color: var(--img-on-text-color);
	text-shadow: var(--text-shadow);

	.base-width {
		display: flex;
		align-items: flex-end;
		block-size: 100%;
	}
}

#live-zone2 .section-header {
	background-image: url(images/live-zone2_sp.jpg);
}

#live-zone3 .section-header {
	background-image: url(images/live-zone3_sp.jpg);
}

#live-zone4 .section-header {
	background-image: url(images/live-zone4_sp.jpg);
}

#work-zone1 .section-header {
	background-image: url(images/work-zone1_sp.jpg);
}

#work-zone2 .section-header {
	background-image: url(images/work-zone2_sp.jpg);
}

#work-zone3 .section-header {
	background-image: url(images/work-zone3_sp.jpg);
}

#work-zone4 .section-header {
	background-image: url(images/work-zone4_sp.jpg);
}

.section-header-no-img {
	padding-top: 4rem;
}

.section-title-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.section-sub-title {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0;

	.section-title-zone {
		inline-size: 100%;
		text-align: center;
	}
}

.section-title-zone-num {
	font-size: 5.5rem;
	line-height: 1.2;
}

.section-title-zone {
	font-size: 1.4rem;
}

.section-title {
	inline-size: 100%;
	font-size: 2rem;
	line-height: 1.5;
}

/* セクション：サマリー */
.summary {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.list-summary__item {
	padding: 3rem 5%;

	&:not(:first-child) {
		border-top: solid 1px var(--border-gray);
	}
}

.summary-title {
	font-size: 1.8rem;
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {

	/* ページナビ下部 */
	.page-navi-bottom {
		padding-bottom: 15rem;
	}

	/* メインビジュアル */
	.main-visual {
		block-size: 62.8rem;
		margin-bottom: 10rem;
		background-image: url(images/main-visual-live.jpg);
	}

	.work-main-visual {
		background-image: url(images/main-visual-work.jpg);
	}

	.main-visual-title-wrap {
		gap: 5rem;
	}

	.main-visual-title {
		font-size: 6rem;
	}

	.main-visual-text {
		font-size: 2rem;
	}

	/* セクション */
	.section-header,
	.section-header-no-img {
		padding-bottom: 5rem;
	}

	.section-header {
		block-size: 36.8rem;
		background-image: url(images/live-zone1.jpg);
	}

	#live-zone2 .section-header {
		background-image: url(images/live-zone2.jpg);
	}

	#live-zone3 .section-header {
		background-image: url(images/live-zone3.jpg);
	}

	#live-zone4 .section-header {
		background-image: url(images/live-zone4.jpg);
	}

	#work-zone1 .section-header {
		background-image: url(images/work-zone1.jpg);
	}

	#work-zone2 .section-header {
		background-image: url(images/work-zone2.jpg);
	}

	#work-zone3 .section-header {
		background-image: url(images/work-zone3.jpg);
	}

	#work-zone4 .section-header {
		background-image: url(images/work-zone4.jpg);
	}

	.section-header-no-img {
		padding-top: 6rem;
	}

	.section-title-zone-num {
		font-size: 9rem;
	}

	.section-title-zone {
		font-size: 2rem;
	}

	.section-title {
		font-size: 3.6rem;
	}

	/* セクション：サマリー */
	.summary {
		padding-top: 4rem;
		padding-bottom: 7rem;
	}

	.summary-title {
		font-size: 2rem;
	}

	.list-summary {
		padding-inline: 5%;
	}

	.list-summary__item {
		padding: 4rem 5%;
	}
}

/* ====================================
	1600px以上専用スタイル
==================================== */
@media screen and (width >=1600px) {

	/* メインビジュアル */
	.main-visual {
		block-size: 38.8vw;
	}

	.section-header {
		block-size: 22.8vw;
	}
}