@charset "UTF-8";
/* CSS Document */

/* ==================================================
ヘッダービジュアル設定
================================================== */
#siteHdr::before {
	background-image: url(/original/dc7/asset/img/hdr_bg.jpg);
}


/* ###################################################################### */
/* ※以下、必要に応じて調整してください。 */



/* ==================================================
ヘッダータイトル書体設定
================================================== */
/* どちらか使う方の設定のみでOK */

/* Ver.明朝体 */
#siteHdr.minchoTitle .titleBlock h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
}

/* Ver.明朝体 */
#siteHdr.gothicTitle .titleBlock h1 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}


/* ==================================================
ヘッダー内テキストのフォントサイズ設定
================================================== */

/* タイトルフォントサイズ */
#siteHdr .titleBlock h1 { font-size: 6rem; }

@media screen and (max-width: 900px) {
	#siteHdr .titleBlock h1 { font-size: 5rem; }
}
@media screen and (max-width: 420px) {
	#siteHdr .titleBlock h1 { font-size: 3.5rem; }
}


/* タイトル 1文字目のフォントサイズ */
#siteHdr .titleBlock h1:first-letter { font-size: 140%; }

/* ナビゲーターサムネイルのフォントサイズ */
#siteHdr .naviBlock figure figcaption { font-size: 1.4rem; }
#siteHdr .naviBlock figure figcaption i { font-size: 70%; }



/* ==================================================
各カラー設定
================================================== */

/* ##############################
.lightMode → ヘッダー内テキストカラー BLACK
（※明るい背景ビジュアル用）
------------------------------ */

/* タイトルフォントカラー */
/* オンエア時間･ナビゲーターのフォントカラー */
/* リードコメントカラー */
#siteHdr.lightMode .titleBlock h1,
#siteHdr.lightMode .titleBlock h1 a,
#siteHdr.lightMode .titleBlock .info,
#siteHdr.lightMode .leadBlock {
	color: #282828;
	fill: #282828; /* SVGアイコン用の指定 */
}


/* タイトル下部の罫線カラー */
#siteHdr.lightMode .titleBlock h1::after { background-color: #282828; }


/* ナビゲーターサムネイル上の帯カラー */
#siteHdr.lightMode .naviBlock figure figcaption { background: rgba(255,255,255,0.8); }


/* ヘッダーエリア内のボタンカラー */
#siteHdr.lightMode .linkBtn.message a {
	background-color: #3e3e3e;
	color: #fff;
}
#siteHdr.lightMode .linkBtn.message a:hover { background-color: #5494a1; }

/* コンテンツ内のボタンカラー */
#siteHdr.lightMode + #snsArea + #main-contents .linkBtn.message a {
	background-color: #3e3e3e;
	color: #fff;
}
#siteHdr.lightMode + #snsArea + #main-contents .linkBtn.message a:hover { background-color: #5494a1; }
/* --- */


/* ##############################
.darkMode → ヘッダー内テキストカラー BLACK
（※明るい背景ビジュアル用）
------------------------------ */

/* タイトルフォントカラー */
/* オンエア時間･ナビゲーターのフォントカラー */
/* リードコメントカラー */
#siteHdr.darkMode .titleBlock h1,
#siteHdr.darkMode .titleBlock h1 a,
#siteHdr.darkMode .titleBlock .info,
#siteHdr.darkMode .leadBlock {
	color: #fff;
	fill: #fff; /* SVGアイコン用の指定 */
}


/* タイトル下部の罫線カラー */
#siteHdr.darkMode .titleBlock h1::after { background-color: #fff; }


/* ナビゲーターサムネイル上の帯カラー */
#siteHdr.darkMode .naviBlock figure figcaption { background: rgba(255,255,255,0.8); }


/* ヘッダーエリア内のボタンカラー */
#siteHdr.darkMode .linkBtn.message a {
	background-color: #ec8404;
	color: #fff;
}
#siteHdr.darkMode .linkBtn.message a:hover { background-color: #5494a1; }

/* コンテンツ内のボタンカラー */
#siteHdr.darkMode + #snsArea + #main-contents .linkBtn.message a {
	background-color: #ec8404;
	color: #fff;
}
#siteHdr.darkMode + #snsArea + #main-contents .linkBtn.message a:hover { background-color: #5494a1; }
/* --- */






/* --- */