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

/* ==================================================
ヘッダービジュアル設定
================================================== */
#siteHdr::before {
	background-image: url(../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; }

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

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


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
#siteHdr .titleBlock h1 { font-size: 4.5rem; letter-spacing: 0; }
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
#siteHdr .titleBlock h1 { font-size: 3.5rem; letter-spacing: 0; }
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
#siteHdr .titleBlock h1 { font-size: 3.2rem; letter-spacing: 0; }
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


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

/* ##############################
.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: #fe4d44;
	color: #fff;
}
#siteHdr.lightMode .linkBtn.message a:hover { background-color: #5494a1; }

/* コンテンツ内のボタンカラー */
.linkBtn.message a {
	background-color: #7e7e7e;
	color: #fff;
}
.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(87, 44, 85, 0.6); color: #fff; }

#siteHdr.darkMode .naviBlock figure:nth-of-type(1) figcaption { background: rgba(83, 12, 12, 0.6); }
#siteHdr.darkMode .naviBlock figure:nth-of-type(2) figcaption { background: rgba(5, 15, 39, 0.7); }


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

/* コンテンツ内のボタンカラー */
.linkBtn.message a {
	background-color: #991343;
	color: #fff;
}
.linkBtn.message a:hover { background-color: #f99524; }
/* --- */






/* --- */


/* ==================================================
ベース設定変更
================================================== */

#siteHdr .titleBlock .info {
	flex-direction: column;
	align-items: flex-start;
}

.dir2nd #siteHdr .titleBlock .info {
	align-items: center;
}

#siteHdr .titleBlock .info>div:not(:first-child) {
	margin-left: 0;
}

#siteHdr .titleBlock .info .time {
	margin-bottom: 20px;
}

#siteHdr .titleBlock .info .name {
	align-items: flex-start;
}

#siteHdr .titleBlock .info .name .icon {
	padding: 4px 0 0 4px;
	width: 20px;
	margin-right: 20px;
}

.dir2nd #siteHdr .titleBlock .info .name .txt {
	text-align: left;
}


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#siteHdr::before {
		min-height: 580px;
	}
	#siteHdr .mainSet {
		min-height: 580px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
	#siteHdr::before {
		height: 720px;
	}
	#siteHdr .mainSet {
		height: 720px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 480px) {
	#siteHdr::before {
		height: 580px;
	}
	#siteHdr .mainSet {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* .naviBlock
------------------------------ */

/* ナビゲーター 3名の場合 */

#siteHdr .naviBlock.naviThree {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	flex-direction: row;
	bottom: -4.5%;
}

.dir2nd #siteHdr #and-more,
.dir2nd #siteHdr .naviBlock {
	display: none;
}

#siteHdr .naviBlock.naviThree figure {
	width: 58%;
	position: relative;
}

#siteHdr .naviBlock.naviThree figure:nth-of-type(1) {
	margin-right: auto;
	z-index: 1;
}

#siteHdr .naviBlock.naviThree figure:nth-of-type(2) {
	margin-left: auto;
	margin-top: -30%;
	z-index: 2;
}

#siteHdr .naviBlock.naviThree figure:nth-of-type(3) {
	margin-right: auto;
	margin-top: -22%;
	z-index: 3;
	transform: translateX(8%);
}

/* --- */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	/* ナビゲーター 3名の場合 */
	#siteHdr .naviBlock.naviThree {
		max-width: 100%;
		flex-wrap: nowrap;
	}
	#siteHdr .naviBlock.naviThree figure:nth-of-type(1) {
		margin: 0;
		z-index: 0;
	}
	#siteHdr .naviBlock.naviThree figure:nth-of-type(2) {
		margin: 0 0 0 -20px;
	}
	#siteHdr .naviBlock.naviThree figure:nth-of-type(3) {
		margin: -30px 0 0 -40px;
	}
	/* --- */
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	/* ナビゲーター 3名の場合 */
	#siteHdr .naviBlock.naviThree figure {
		max-width: 240px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
	#siteHdr .mainSet {}
	#siteHdr .titleBlock {
		height: 360px;
	}
	/* ナビゲーター 3名の場合 */
	#siteHdr .naviBlock.naviThree {
		max-width: 100%;
		flex-wrap: wrap;
		height: 410px;
	}
	#siteHdr .naviBlock.naviThree figure {
		width: 50% !important;
		max-width: 220px;
	}
	#siteHdr .naviBlock.naviThree figure:nth-of-type(3) {
		margin: -40px 0 0 -20px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 480px) {
	#siteHdr .mainSet {
		height: 580px;
	}
	#siteHdr .titleBlock {
		height: 300px;
	}
	/* ナビゲーター 3名の場合 */
	#siteHdr .naviBlock {
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	#siteHdr .naviBlock.naviThree {
		max-width: 94%;
		height: 280px;
		align-items: flex-start;
	}
	#siteHdr .naviBlock.naviThree figure {
		width: 150px !important;
		/*! max-width: 180px; */
	}
	#siteHdr .naviBlock.naviThree figure:nth-of-type(2) {
		margin: 0 0 0 -10px;
	}
	#siteHdr .naviBlock.naviThree figure:nth-of-type(3) {
		margin: -30px 0 0 -22px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 360px) {
	#siteHdr .naviBlock.naviThree {
		max-width: 100%;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */