/* ===========================================================
   Object / Component / Notice Bar
   FV周辺に表示されるお知らせカード（白カード + ベルアイコン + 日付 + 本文 + 矢印）
   - クリニック設定の「お知らせバナー表示ON/OFF」がONの時のみテンプレで出力
   =========================================================== */

.c-notice-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	background-color: var(--color-pink-200);
	border: 1px solid var(--color-notice);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: var(--transition-base);
}

@media (hover: hover) and (min-width: 768px) {
	.c-notice-bar:hover {
		color: var(--color-text);
		box-shadow: var(--shadow-md);
		transform: translateY(-1px);
	}
}

@media (min-width: 768px) {
	.c-notice-bar {
		gap: 20px;
		padding: 16px 24px;
		border-radius: 14px;
		/* PCは枠線なし・白背景に上書き（SPは pink-200 + notice 枠線を維持） */
		background-color: var(--color-white);
		border: none;
	}
}

/* 左：ピンク円形のベルアイコン */
.c-notice-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background-color: var(--color-pink-500);
	border-radius: 50%;
}

.c-notice-bar__icon img,
.c-notice-bar__icon svg {
	width: 20px;
	height: 20px;
}

@media (min-width: 768px) {
	.c-notice-bar__icon {
		width: 44px;
		height: 44px;
	}
	.c-notice-bar__icon img,
	.c-notice-bar__icon svg {
		width: 22px;
		height: 22px;
	}
}

/* 中央：日付 + 本文 */
.c-notice-bar__body {
	flex: 1;
	min-width: 0; /* テキスト折返し用 */
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.c-notice-bar__date {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-navy-500);
	letter-spacing: 0.02em;
}

.c-notice-bar__text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.c-notice-bar__date { font-size: 13px; }
	.c-notice-bar__text { font-size: 15px; }
}

/* 右：矢印 */
.c-notice-bar__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.c-notice-bar__arrow img,
.c-notice-bar__arrow svg {
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.c-notice-bar__arrow {
		width: 24px;
		height: 24px;
	}
}

/* ===========================
   配置ラッパー
   - PC：FV下の navy 帯の中で中央に配置
   =========================== */

/* お知らせバナー（PC）：features セクション本体の最上部に配置される。
   背景色は features__body のナビーに任せ、ここでは内側余白だけを担う。 */
.p-notice-band {
	width: 100%;
	padding: 40px 16px 80px;
}

.p-notice-band__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: clamp(0px, 2vw, 24px);
}

/* SP用配置（FV内のオーバーレイ）
   - 横幅は親 .p-fv__notice の left/right: 16px で確定するため、ここでは余白を持たない。
     こうすることでバナーの幅が下にある特徴バッジ（.p-fv__sub margin-inline 16px）と揃う。 */
.p-notice-overlay {
	padding: 0;
}

@media (min-width: 768px) {
	/* SP用ラッパーはPCでは非表示（PCはバンドで出す） */
	.p-notice-overlay {
		display: none;
	}
}

@media (max-width: 767px) {
	/* バンド表示はPCのみ。SPはoverlayに任せる */
	.p-notice-band {
		display: none;
	}
}