@charset "UTF-8";

/************************************
** カウントダウンタイマー [smw_countdown]
** デザイン: WEB SR COUNTDOWN_02.pdf
**
** 文字サイズと余白はデザインの実測値をパネル幅に対する比率（cqi）にしてある。
** .p-countdown 自身がコンテナなので、パネルの幅が 100cqi になる。
** clamp() の上限はパネル幅 1500px 相当までデザイン比率が保たれる値。
************************************/
:root {
	--title-font-family: "Poppins", sans-serif;
	/* 数字だけデザイン指定が Arial Black */
	--countdown-number-font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif;
}

.p-countdown {
	/* パネル幅を基準に文字サイズを決めるので、置き場所を選ばない */
	container-type: inline-size;

	position: relative;
	color: #fff;
	background-color: #262526;
	/* デザインの背景（水平方向。52% あたりに緑がかったハイライト）を実測して再現 */
	background-image: linear-gradient(90deg,
		#1e1716 0%,
		#342e2e 20%,
		#4a484b 40%,
		#696d63 52%,
		#48494d 60%,
		#262526 80%,
		#0e0f0e 100%);
}

.p-countdown__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(20px, 6.2cqi, 93px) 4cqi clamp(14px, 3.45cqi, 52px) !important;
	text-align: center;
}

/* ------------------------------------------------
 * ブランドロゴ
 * ------------------------------------------------ */

.p-countdown__brands {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 1.2;
}

.p-countdown__brand {
	padding: 0 1.3cqi;
}

.p-countdown__brand + .p-countdown__brand {
	border-left: 1px solid rgba(255, 255, 255, 0.55);
	padding-top: 10px;
	padding-bottom: 10px;
}

.p-countdown__brand img {
	display: block;
	width: auto;
}

/* ロゴごとに見た目の高さが揃うようデザイン実測値で分けている */
.p-countdown__brand--siematic img {
	height: clamp(18px, 3.45cqi, 52px);
}

.p-countdown__brand--rimadesio img {
	height: clamp(15px, 2.95cqi, 44px);
}

/* ------------------------------------------------
 * 見出し
 * ------------------------------------------------ */

.p-countdown__title {
	font-family: var(--title-font-family);
	font-size: clamp(1rem, 4.5cqi, 4.2rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	margin: clamp(10px, 3.1cqi, 47px) 0 0 !important;
}

/* ------------------------------------------------
 * 数字（D H M S）
 * ------------------------------------------------ */

.p-countdown__timer {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(10px, 4.35cqi, 65px);
	margin-top: clamp(18px, 5.5cqi, 83px) !important;
}

.p-countdown__unit {
	display: block;
}

/* 数字の上の単位の頭文字 */
.p-countdown__initial {
	display: block;
	font-family: var(--title-font-family);
	font-size: clamp(1rem, 7.6cqi, 7.1rem);
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.8cqi;
}

.p-countdown__number {
	display: block;
	font-family: var(--countdown-number-font-family);
	font-size: clamp(1.75rem, 12cqi, 11.25rem);
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* 到達後は数字を隠して文言に差し替える */
.p-countdown__finished {
	display: none;
	margin: clamp(18px, 5.5cqi, 83px) 0 0 !important;
	font-size: clamp(1.5rem, 8cqi, 7.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.p-countdown.is-finished .p-countdown__timer {
	display: none;
}

.p-countdown.is-finished .p-countdown__finished {
	display: block;
}

/* ------------------------------------------------
 * COUNTDOWN ラベル
 * ------------------------------------------------ */

.p-countdown__label {
	font-family: var(--title-font-family);
	font-size: clamp(0.9rem, 5.05cqi, 4.7rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	margin: clamp(16px, 5.5cqi, 83px) 0 0 !important;
}

.p-countdown.is-finished .p-countdown__label {
	display: none;
}

/* ------------------------------------------------
 * 日時未設定などの編集者向けメッセージ
 * ------------------------------------------------ */

.p-countdown__notice {
	padding: 1em;
	border: 1px dashed #c1272d;
	color: #c1272d;
	font-size: 0.875rem;
}