@charset "UTF-8";
/* =========================================================
   news-bar.css  ニュース欄（メインビジュアル直下の告知バー）
   表示する告知があるときだけ template-parts/news-bar.php から出力される
   ========================================================= */

.news-bar {
	/* 左端は見出し（.headword）のグレー左端に揃える（section余白10px+headword5px=15px） */
	/* 右端は画面のちょうど真ん中（margin-right:50%）。画面が狭くなると右へ伸びる */
	/* 上=var(--gap)（ボタン／MV直下からの距離）。下=0にして、下の間隔はセクションの margin-top に任せる */
	/* ★fallback(55px)必須：--gapが未解決だと margin 宣言ごと無効化され、右50%も消えて全幅化するため */
	margin: var(--gap, 55px) 50% 0 15px;
	font-family: "BIZ UDPGothic", "Meiryo UI", "Hiragino Kaku Gothic ProN", sans-serif;
	box-sizing: border-box;
}

/* News 見出し帯（上部グレー） */
.news-bar__head {
	background: #A6A6A6;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 3px 20px;
	box-sizing: border-box;
}

/* 本文エリア（薄グレー） */
.news-bar__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #f2f2f2;
	padding: 13px 20px;
	box-sizing: border-box;
}

/* 本文テキスト（本文サイズに統一） */
.news-bar__text {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #333333;
}

/* ハイライト（赤字）＝サイト共通の赤に統一 */
.news-bar__hl {
	color: #EA3800;
	font-weight: 700;
}

/* 詳細ボタン（本文と同じ文字サイズに揃える） */
.news-bar__btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 3px 44px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
	color: #6d8aa8;
	background: #ffffff;
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .22);
	transition: background-color .3s ease, color .3s ease;
}
.news-bar__btn:hover {
	background: #6d8aa8;
	color: #ffffff;
}

/* スマホ対応：幅95%・適宜改行 */
@media screen and (max-width: 767px) {
	.news-bar {
		margin: var(--gap, 33px) auto 0;   /* 上=var(--gap)／下=0（未解決でも33px） */
		width: 95%;
	}
	.news-bar__head {
		font-size: 16px;
		padding: 4px 16px;
	}
	.news-bar__body {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px 16px;
	}
	.news-bar__text {
		font-size: 15px;
	}
	.news-bar__btn {
		align-self: center;
		width: 100%;
		max-width: 240px;
	}
}