/* 締め日バナー */
.cc-koukou-banner {
	--_font-family-roboto: 'Roboto', 'Noto Sans JP', sans-serif;
	--_font-family-yugothic: YuGothic, 'Yu Gothic', 'Noto Sans JP', sans-serif;

	--_font-weight-light: 300;
	--_font-weight-regular: 400;
	--_font-weight-medium: 500;
	--_font-weight-semi-bold: 600;
	--_font-weight-bold: 700;

	font-weight: var(--_font-weight-bold);
	padding: 40px 20px;

	.cc-koukou-banner__inner {
		container-type: inline-size;
		max-width: 600px;
		width: 100%;
		margin-inline: auto;
	}

	.cc-koukou-banner__cp {
		border-radius: 1.4245014245cqw;
		display: flex;
		gap: 0px;
		box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16);
		overflow: hidden;
		transition: opacity 300ms linear;
		&:hover {
			opacity: 0.6;
		}
	}

	.cc-koukou-banner__cp-copy {
		display: grid;
		place-items: center;
		align-content: center;
		padding: 0.2849002849cqw;
		flex-grow: 1;
		&:has(.cc-koukou-banner__cp-countdown-item.is-active) {
			padding-top: 1.7cqw;
		}
	}

	.cc-koukou-banner__cp-img {
		flex-shrink: 0;
		width: 50.1424501425%;

		img {
			max-width: 100%;
			height: auto;
			opacity: 1;
			padding: 0;
		}
	}

	.cc-koukou-banner__cp-title {
		font-family: var(--_font-family-yugothic);
		font-size: 3.9886039886cqw;
		line-height: 1.24;
		margin-top: 2.1cqw;
		span {
			font-size: 1.5357142857em;
		}
	}

	.cc-koukou-banner__cp-label {
		font-size: 2.849002849cqw;
		border-radius: 9999px;
		width: max-content;
		letter-spacing: 0;
		margin-inline: auto;
		padding: 0.2849002849cqw 2.2792022792cqw 0.2cqw;
	}

	.cc-koukou-banner__cp-countdown {
		width: max-content;
		margin-inline: auto;
	}

	.cc-koukou-banner__cp-countdown-item {
		font-family: var(--_font-family-yugothic);
		font-size: 5.8304843305cqw;
		line-height: 1;

		&.-default {
			display: grid;
			place-items: center;
			grid-template-columns: auto auto auto auto;
			grid-template-rows: auto auto;
			font-family: var(--_font-family-roboto);
			font-size: 13.9943019943cqw;
			line-height: 0.8;
			width: max-content;
			height: min-content;
			gap: 4px;
			margin-top: 3.6cqw;
			.cc-koukou-banner__countdown-month {
				letter-spacing: -0.04em;
				grid-row: 1 / 3;
			}

			.cc-koukou-banner__countdown-slash {
				grid-row: 1 / 3;
				display: block;
				width: 0.5826210826cqw;
				height: 10.4957264957cqw;
				border-radius: calc(infinity * 1px);
				transform: rotate(15.52deg);
				margin-inline: 1.4cqw 0.25cqw;
			}

			.cc-koukou-banner__countdown-date {
				letter-spacing: -0.04em;
				grid-row: 1 / 3;
			}

			.cc-koukou-banner__countdown-day {
				justify-self: center;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 4.0811965812cqw;
				font-weight: var(--_font-weight-medium);
				text-align: center;
				letter-spacing: 0;
				width: 1.5835951134em;
				height: 1.5835951134em;
				border-radius: 50%;
			}

			.cc-koukou-banner__countdown-till {
				justify-self: center;
				font-size: 3.2763532764cqw;
				font-weight: var(--_font-weight-semi-bold);
				letter-spacing: -0.05em;
			}
		}

		&.-till1,
		&.-till0 {
			&.is-active {
				display: block;
				margin-top: 1.5cqw;
				margin-left: -1.3cqw;
			}
			> span:first-of-type {
				font-size: 12.3931623932cqw;
				letter-spacing: -0.1em;
			}
		}

		span {
			&:first-of-type {
				letter-spacing: -0.12em;
			}
			&:last-of-type {
				letter-spacing: -0.19em;
			}
		}
	}

	.cc-koukou-banner__countdown-number {
		display: inline-block;
		font-family: var(--_font-family-roboto);
		font-size: 2.711947227em;
		transform: translateY(1.1cqw);
		margin-inline: 1.1cqw 1.7cqw;
	}

	.cc-koukou-banner__deadline {
		text-align: center;
		margin-top: 25px;
		img {
			width: 100%;
			max-width: 600px;
		}
	}
}