/* ----------　ヘッダー ---------- */
/* 見出し部分は非表示 */
header {
	display: none;
}

/* ----------　ヘッダー ロゴ---------- */
/* デフォルト 文字色：白、背景色なし */
#headerLogo {
	border-radius: var(--bs-border-radius-xxl) !important;
	margin-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	transition: background .4s;
}
#headerLogo a {
	color: #fff;
}

/* デフォルト(背景色あり) 文字色：白、背景色：濃紺透過 */
#headerLogo.bg-on {
	background: #141b2e82;
}

/* アクティブ 文字色：メインカラー、背景色：白透過 */
#headerLogo.bg-on.color-switch {
	background: #ffffffad;
}
#headerLogo.color-switch a  {
	color: #113B55;
}

@media ( max-width : 991px) {
	#headerLogo {
		position: absolute;
		left: 4px;
		top: 4px;
		margin-top: 0;
	}
}

/* ----------　コンテンツ幅 ---------- */
@media ( min-width : 1200px) {
	.container:not(.wide) {
		max-width: 1140px;
	}
}

/* ---------- KV ---------- */
.mv {
	background: image-set(
		url("/meteor-shower/img/bg_mv.webp") type("image/webp"),
		url("/meteor-shower/img/bg_mv.jpg") type("image/jpeg")
	) center / cover no-repeat;
	padding: 8rem 0 6rem;
}

@font-face {
	font-family: 'Kaisei Decol';
	font-weight: 500;
	src: url("/meteor-shower/fonts/KaiseiDecol-Medium.woff2") format("woff");/* 「流星群ライブ配信」のみ格納したフォントファイル */
	font-display: swap;
}

.kaisei-decol-medium {
	font-family: "Kaisei Decol", serif;
	font-weight: 500;
	font-style: normal;
}

.heading-main {
	background: linear-gradient(180deg, #FFFFFF 42.41%, #FAD483 131.25%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(3.3750rem, 2.4951rem + 3.7540vw, 7.0000rem);
}

/* 配信スケジュール */
.schedule-wrapper {
	background: linear-gradient(90deg, #4B6CB7 0%, #182848 100%);
	margin-top: -80px;
	position: relative;
	z-index: 1;
}

.schedule-badge {
	display: inline-block;
	padding: 2px 16px;
	background: linear-gradient(90deg, #E0EAFC 0%, #CFDEF3 100%);
	border-radius: 999px;
}

/* ライブ配信 */
.streaming-wrapper {
	background: linear-gradient(90deg, #E0EAFC 0%, #CFDEF3 100%);
}

.streaming-icon {
	color: #FF0034;
	font-size: 12px;
	background: #FF003414;
}
.live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #FF0034;
	border-radius: 50%;
	margin-right: 4px;
}
/* 配信時間外 */
.streaming-icon.offline {
	color: #6c757d;
	background: #6c757d14;
}

.streaming-icon.offline .live-dot {
	background-color: #6c757d;
}

.live-info-card {
	box-shadow: 0px 2px 6px 2px rgba(59, 83, 145, 0.2);
}
.icon-img {
	background: linear-gradient(90deg, #E0EAFC 0%, #CFDEF3 100%);
	border-radius: 50%;
	width: 64px;
	height: 64px;
}

/* 注意事項 */
@media ( min-width : 768px) {
	.notice-wrapper {
		margin-bottom: 15rem;
	}
}

/* 主な流星群 */
.about-wrapper {
	position: relative;
	background: linear-gradient(90deg, #4B6CB7 0%, #182848 100%);
	margin-top: 80px;
	padding-bottom: 48px;
}

@media ( min-width : 768px) {
	.about-wrapper {
		margin-top: 140px;
		padding-bottom: 64px;
	}
	.about-wrapper::before {
		content: "";
		position: absolute;
		top: -99px;
		left: 0;
		width: 100%;
		height: 100px;
		background: linear-gradient(90deg, #4B6CB7 0%, #182848 100%);
		clip-path: polygon(
			0% 0%,
			11% 25%,
			22% 0%,
			38% 30%,
			44% 0%,
			55% 35%,
			66% 0%,
			77% 25%,
			90% 0%,
			100% 30%,
			100% 100%,
			0% 100%
		);
	}
}

.about-text {
	text-shadow: 0px 4px 20px #000000;
}

.meteor-item {
	position: relative;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	column-gap: 40px;
	padding-bottom: 28px;
}

.meteor-month {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.meteor-month::after {
	content: "";
	position: absolute;
	top: 52%;
	left: calc(100% + 12px);
	width: clamp(20px, 3vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, .8);
	transform: translateY(-50%);
}

.meteor-month.no-month::after {
	left: calc(100% + 12px);
	width: clamp(30px, 5vw, 60px);
}

.meteor-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
}
.meteor-dot-top3  {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #F1F160;
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
}

.meteor-card-featured {
	background: linear-gradient(90deg, #E0EAFC 0%, #CFDEF3 100%);
}

.meteor-card-body {
	display: grid;
	grid-template-columns: 1fr 290px;
	gap: 40px;
	align-items: center;
}

.meteor-badge {
	background: #F1F160;
}

.meteor-item:not(:last-child) .meteor-month::before {
	content: "";
	margin-top: 24px;
	position: absolute;
	top: 50%;
	bottom: -120px;
	right: 8px;
	border-left: 1px solid rgba(255,255,255,.8);
	z-index: 1;
}

.meteor-info {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr 1.9fr;
	gap: 24px;
	min-width: 0;
}
.meteor-info > div {
	display: grid;
	grid-template-columns: 75px minmax(0, 1fr);
	gap: 15px;
	align-items: start;
	min-width: 0;
}

.meteor-info dt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #27B2A6;
	white-space: nowrap;
}

/* ---三大流星群 */
.meteor-card-featured .meteor-card-body {
	grid-template-columns: minmax(0, 1fr) 40%;
	gap: 30px;
	align-items: stretch;
}

.meteor-card-featured .meteor-info {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.meteor-card-featured .meteor-info > div:nth-child(3) {
	grid-column: 1 / -1;
}

@media (max-width: 991px) {
	.meteor-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	
	.meteor-item {
		display: block;
	}
	.meteor-month {
		justify-content: flex-start;
		padding-top: 0;
		margin-bottom: 12px;
		width: 100%;
	}
	.meteor-month::after {
		top: 50%;
		left: 94px;
		right: 0;
		width: auto;
		border-top: 1px solid rgba(255,255,255,.8);
		z-index: 0;
	}
	.meteor-month.no-month::after {
		left: 10%;
		width: 90%;
	}
	
	.meteor-item:not(:last-child) .meteor-month::before {
		display: none;
	}
	
	.meteor-card-body,
	.meteor-card-featured .meteor-card-body,
	.meteor-card-featured .meteor-info {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.meteor-card-featured .meteor-info > div:nth-child(3) {
		grid-column: auto;
	}
}
/* ---通常カードは一部画面幅でラベルの並びを変更 */
@media (min-width: 992px) and (max-width: 1200px) {
	.meteor-item:not(:has(.meteor-card-featured)) .meteor-info {
		grid-template-columns: 1fr 1fr;
	}
	.meteor-item:not(:has(.meteor-card-featured)) .meteor-info > div:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* ----------　その他情報 ---------- */
.info {
	background-color: #141B2E;
}

.card-img  {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

@media ( min-width : 992px) {
	.card-img  {
		border-bottom-left-radius: var(--bs-border-radius-xl)!important;
		border-top-right-radius: 0!important;
	}
}