@charset "utf-8";
/* ----------------------------

File Name: top_styles_topindex.css
Last Update:2018-06-14
トップINDEX用
※サブトップと共通パーツは「top_styles_base.css」へ

---------------------------- */

/* TOP段ブロック(色区分)------------------------------------------*/

.index_area_top ,
.index_area_middle ,
.index_area_bottom{
	margin:0;
	width: 100%;
	min-width: 768px;
	box-sizing: border-box;
}

.index_area_top{ background: #ffffff; padding: 40px 0 0 0;}
.index_area_middle{ background: #f6f6f6; padding: 40px 0 0 0;}
.index_area_bottom{ background: #ffffff; padding: 40px 0;}

/* TOPカラム分割------------------------------------------*/

.multi_column_1 ,
.multi_column_2 ,
.multi_column_3 ,
.multi_column_4{ /*border: solid 1px #000;*/
	width: 100%;
	max-width: 1280px;
	min-width: 768px;
	margin:0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.column_unit{/*border: solid 1px #000;*/
	float: left;
	box-sizing: border-box;
	padding-bottom: 40px;
}

.multi_column_1 .column_unit{
	width: 100%;
}

.multi_column_2 .column_unit{
	margin-left:3.5%; 
	width: 48.25%;
}
.multi_column_2 .column_unit:first-of-type{
	margin-left:0px;
}

.multi_column_3 .column_unit{
	width: 31%;
	margin-left:3.5%; 
}
.multi_column_3 .column_unit:first-of-type{
	margin-left:0px;
}

@media (max-width: 768px) {/* タブレット表示用：上段 */
	.multi_column_3 .column_unit{
	width: 48.25%;
	margin-left:0;
	float: left;
}
.multi_column_3 .column_unit:first-of-type{
	margin-left:0px;
	width: 100%;
}
.multi_column_3 .column_unit:last-of-type{
	width: 48.25%;
	margin-left:3.5%;
	float: left;
}
}

.multi_column_4 #anaContainer{
	width: 48.25%;
}
.multi_column_4 .column_unit{
	width: 22.375%;
	margin-left:3.5%; 
}

.multi_column_4 .column_unit:first-of-type{
	margin-left:0px;
}

@media (max-width: 768px) {/* タブレット表示用：下段 */
	.multi_column_3 .column_unit{
	width: 48.25%;
	margin-left:0;
	float: left;
}
.multi_column_3 .column_unit:first-of-type{
	margin-left:0px;
	width: 100%;
}
.multi_column_3 .column_unit:last-of-type{
	width: 48.25%;
	margin-left:3.5%;
	float: left;
}
	
.multi_column_4 .column_unit:first-child{
	width: 65%;
	margin-left:0%; 
}
.multi_column_4 .column_unit{
	width: 31.5%;
	margin-left:3.5%; 
}
/* タブレット表示用：下段(ツイッター領域) */
.multi_column_4 .column_unit:last-of-type{
	width: 31.5%;
}
}

/* TOPボタン------------------------------------------*/

/*共通*/
.unit_button{
	width: auto;
	margin: 20px 0 0 0;
	text-align: center;
	font-weight: bold;
	}

.unit_button a{
	display:block;
	margin: auto;
	width: 100%;
	padding: 13px;
	box-sizing: border-box;
	}

.unit_button a:hover{
	color: #c70404;
}

.button_infocam_weather a{/*天気*/
	max-width: 220px;
	color: #508eb1;
	background: #ffffff;
	border: solid 2px #508eb1;
}
.button_infocam_weather a:hover {
	text-decoration: none;
}

.button_monsuketv{/*もんすけTV*/
	margin: 20px auto 0 auto;
	text-align: center;
}

.button_monsuketv img{
	max-width: 320px;
	width:80%;
	border: solid 1px #353535;
}

.button_monsuketv a:hover {
	opacity: 0.8;
}

.button_newspost a{/*ニュースご意見・情報募集中*/
	margin: -20px 0 0;
	border-left: solid 3px #4d64ac;
	border-right: solid 3px #4d64ac;
	border-bottom: solid 3px #4d64ac;
	color: #4d64ac;
	background: #ffffff;
}

.button_newspost a:hover > img{
	opacity: 0.7;
}

@media (max-width: 768px) {/* 縮小版 */
.button_newspost a{/*ニュースご意見・情報募集中*/
	border-top: solid 3px #4d64ac;
	margin: -20px 0 0 0;}
}

.button_newspost img{/*ニュースご意見・情報募集中*/
	padding:0 4px;
	vertical-align: middle;
}

/*動画(画像ボタン)*/
.button_moviepost{
	margin: 20px 0 0;
	text-align: center;	
}

.button_moviepost img{
	width: 100%;
	max-width: 240px;
}

.button_moviepost a:hover img{
	opacity: 0.8;
}

.button_moviepost span{
	display: none;
}

/* 天気・カメラ地方リスト------------------------------------------*/

.list_area{}
.list_area ul{}

.list_area li{
	float: left;
	margin: 10px 0 0;
	list-style: none;
	text-align: center;
	border-right: solid 1px #000 ;/* 斜め線指定*/
	-webkit-transform: skewX(150deg);
	transform: skewX(150deg);
}

.list_area a{/* 斜め打消*/
	display:block;
	-webkit-transform: skewX(-150deg);
	transform: skewX(-150deg);
	padding:0 6px;
}
.list_area a:hover{
	text-decoration:underline;
}

.list_area li:last-child{
	border-right:none;
}

/*リストサブ見出し*/
.Container_subtxt{
	margin: 10px 0 0;
	color: #508eb1;
}

/*天気画像*/.weather_img{width: 100%;}

/*情報カメラ画像*/
.infocam_img{
	width: 100%;
	border: solid 4px #3a3a3a;
	box-sizing: border-box;
}

/* ニュース------------------------------------------*/

div#newsContainer {
	line-height: 1.6;
	}
div#newsBox {
	width: 100%;
	border: 3px solid #4d64ac;
	background: #ffffff;
	padding: 0;
	box-sizing: border-box;
	}

ul#newsFeed {
	height: 180px;
	overflow: auto;/*スクロール*/
	}

ul#newsFeed li {
	line-height: 1.6;
	border-bottom: 1px solid #CCCCCC;
	padding: 10px 5px 10px 25px;
	list-style: none;
	background: url(../image/icon_news_list.svg) no-repeat top 15px left 5px ;
	background-size: 12px 12px ;
	
	}
ul#newsFeed li.movie {
	list-style: none;
	background-image:none;
	}
ul#newsFeed li.movie p {
	margin: 5px 0px;
	}
ul#newsFeed li.movie img {
	float: left;
	margin-right: 7px;
	margin-bottom: 3px;
	}
ul#newsFeed li.movie p.date {
	text-align: right;
	color: #8b8b8b;
	}

/*ニュースリンク*/
div#newsBox a:link {
	text-decoration: none;
}
div#newsBox a:visited {
	text-decoration: none;
}
div#newsBox a:hover, div#newsBox a:active {
	text-decoration: underline;
}

/* ご意見・ムービーポストコーナー*/
.news_infoBox{}

@media (max-width: 768px) {/* タブレット表示用 */
	div#newsBox{ float: left;width: 65%}
	.news_infoBox{ float: right;width: 31.5%}
}

/* 動画コーナー------------------------------------------*/
div#movieContainer {}

/* 動画埋め込み*/
.video {
	margin: 0 auto ;
	position: relative;
	height: 0;
	padding: 0 0 56.25%;
	overflow: hidden;
	background: #3a3a3a;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 4px #3a3a3a;
	box-sizing: border-box;
}

/* トピックス--スライダーの指定は「top_sliders.cssのtopics_sliderを参考」------------------*/
#topicsContainer{}

#topicsContainer h1{ 
	float: left;
	padding: 0;
	display:inline-block;}

#topicsContainer h2{ 
	float: left;
	display:inline-block;
	vertical-align: bottom;;
	height: 26px;
	margin: 0 0 0 10px;
	padding: 0 0 0 10px;
	line-height: 30px;
	border-left: solid 1px #bbc0c3 ;/* 斜め線指定*/
	-webkit-transform: skewX(150deg);
	transform: skewX(150deg);
	font-weight: normal;
}

.topic_txt {/* 斜め打消*/
	display:block;
	-webkit-transform: skewX(-150deg);
	transform: skewX(-150deg);
	padding:0 6px;
}
@media (max-width: 960px) {
	.topic_txt { font-size: 10px; }
}	

/*リンクimg*/
#topicsContainer a:hover img {opacity: 0.8}

/* HBC制作番組------------------------------------------------------------------*/

.top_hbcbangumi_space {
	width: 100%;
	min-width: 768px;
	padding: 30px 0 0;
	background: #b6d5c5;
	box-shadow: 0px 8px 8px -1px rgb(174,200,179) inset, 0px -8px 8px -1px rgb(174,200,179) inset; }

/* 番組ボックス*/
.hbcbangumi_list{ 
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	list-style: none;
}
.hbcbangumi_list li{
	/*float: left;
	width: 18.4%;
	margin-left:2%;*/
	padding: 12px;
	margin-left:20px; 
	box-sizing: border-box;
	background: #ffffff;
	font-size: 12px;
}
.hbcbangumi_list li:first-of-type{margin-left: 0;}
.hbcbangumi_list img{width: 100%;}

@media (max-width: 768px) {/* 縮小版 */
.hbcbangumi_list li:last-child{
	display: none;}
}

/*カテゴリラベル*/
.Label{/*親div*/ position: relative;}

.hbcbangumi_list h3 {
	position: absolute;
	padding: 4px;
 	top: 0;
	left: 0;
	font-size: 10px;
	color: #ffffff;/*文字は白*/
	font-weight: normal;
  }

.bangumi_tv{background: #31acad;}
.bangumi_radio{background: #7abb08;}

.hbcbangumi_list h2 {
	padding: 5px 0;
	font-size: 13px;
}

@media (max-width: 980px) {/* タブレット用文字縮小 */
	.hbcbangumi_list h2 {font-size: 12px;}
}	

.hbcbangumi_list h2, 
.hbcbangumi_list p{
	line-height: 1.6;
}

/*リンクimg*/
.hbcbangumi_list a:hover img {opacity: 0.8}

/* HBCおすすめコンテンツ（旧 HBC制作番組）------------------------------------------------------------------*/

.top_recommend-contents_space {
	width: 100%;
	min-width: 768px;
	padding: 30px 0 0;
	background: #b6d5c5;
	box-shadow: 0px 8px 8px -1px rgb(174,200,179) inset, 0px -8px 8px -1px rgb(174,200,179) inset; }

/* 番組ボックス*/
.recommend-contents_list{ 
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin-top: -1.8%;
	list-style: none;
}
.recommend-contents_list li{
	width: 18.6%;
	margin-top: 1.8%;
	padding: 12px;
	box-sizing: border-box;
	background: #ffffff;
	font-size: 12px;
}
.recommend-contents_list li:nth-child(4n+2):last-child { margin-right: inherit; }
.recommend-contents_list li:nth-child(4n+3):last-child { margin-right: inherit; }
.recommend-contents_list li:nth-child(5n+2):last-child { margin-right: 61.05%; }
.recommend-contents_list li:nth-child(5n+3):last-child { margin-right: 40.7%; }
.recommend-contents_list li:nth-child(5n+4):last-child { margin-right: 20.35%; }
.recommend-contents_list img{width: 100%;}

@media (max-width: 959px) {/* 縮小版 */
.recommend-contents_list li{ width: 23.5%; }
.recommend-contents_list li:nth-child(4n+2):last-child { margin-right: 51%; }
.recommend-contents_list li:nth-child(4n+3):last-child { margin-right: 25.5%; }
}

/*カテゴリラベル*/
.recommend-contents_list h2 {
	margin: 5px 0 -0.3em;
	font-size: 13px;
}
.recommend-contents_list h2 + p {
	margin: 5px 0 -0.3em;
}

@media (max-width: 980px) {/* タブレット用文字縮小 */
	.recommend-contents_list h2 {font-size: 12px;}
}	

.recommend-contents_list h2, 
.recommend-contents_list p{
	line-height: 1.6;
}

/*リンクimg*/
.recommend-content_list a:hover img {opacity: 0.8}

/* アナウンサー日記------------------------------------------*/
div#anaContainer {}

.topindex_ana_diary {}

.topindex_ana_diary li{
	list-style: none;
	width: 48.25%;
}

.topindex_ana_diary li:first-child{
	float: left;}

.topindex_ana_diary li:last-child{
	float: right;}

.topindex_ana_diary img{ width: 100%; }

.topindex_ana_diary h2/*日付*/{
	display: inline-block;
	margin: 10px 0;
	padding: 4px 10px;
	background: #69b1e2;
	color: #ffffff;
}

.topindex_ana_diary h3/*日記タイトル*/{}

.topindex_ana_diary h2 ,
.topindex_ana_diary h3{
	font-weight: normal;
	font-size: 13px;
	line-height: 1.6;
}

@media (max-width: 980px) {/* タブレット用文字縮小 */
.topindex_ana_diary h2 ,
.topindex_ana_diary h3 {font-size: 12px;}
}	

/*リンクimg*/
.topindex_ana_diary a:hover img {opacity: 0.8}

/* アナウンサーカレンダー告知-----------------------------------------*/
#ana_rectangle_space {}

#ana_rectangle_space img {width: 100%;}

/* アナウンサーブログ-----------------------------------------*/
#anablogContainer div {}

.anablog_list li{
	vertical-align: middle;
	padding: 10px 0;
	border-bottom: solid 1px #d1b8e6;
	zoom: 1; /* clear: bothのfor IE6/7対応 */
}
.anablog_list li:first-child{
	border-top: solid 1px #d1b8e6;
}

.anablog_list li::after{
	content: "";
	display: block;
	clear: both;
	height: 0;
    visibility: hidden;
}

.anablog_list_txt{
	float: left;
	width: 70%;
	padding: 10px 20px 10px 0;
	box-sizing: border-box;
	line-height: 1.8;
}

.anablog_list_txt h2{/*アナウンサー名*/
	font-size: 12px;
	font-weight: normal;
}

.anablog_list_txt h3{/*ブログ名*/
	font-size: 15px;
}

.anablog_list_txt h4{/*日付*/
	display: inline-block;
	font-size: 11px;
	margin: 0 5px 5px 0;
	padding: 2px 5px;
	background: #97ced3;
	color: #ffffff;
	font-weight: normal;
}

.anablog_list_txt h5{/*記事タイトル*/
	display: inline;
	font-weight: normal;
}

.anablog_list a > .anablog_list_txt h5{
	color: #08278c;
	text-decoration: underline;
}

.anablog_list a:hover > .anablog_list_txt h5{
	color: #c70404
}

.anablog_list img{
	width: 30%;
	max-width: 100px;
	border-radius: 100%;
	float: right;
}

.anablog_list a:hover > img{
	opacity: 0.8;
}

/* HBCの取組------------------------------------------*/
div#activityContainer {}

ul.hbc_activity{
	border: solid 4px #aadaf1;
	padding: 0px;
	color: #399edf;
	width: 100%;
	box-sizing: border-box;
	
}
.hbc_activity li{
	border-top: dotted 3px #9bd1ed;
	list-style: none;
	background: url(../image/icon_activity_list.svg) no-repeat center left 5px ;
	background-size: 12px 12px ;
	padding: 0 0 0 25px;
	line-height: 1.6;
	}

.hbc_activity li:first-child{
	border-top: none;}

.hbc_activity a{
	display: block;
	color: #399edf;
	padding: 15px 0;
}
.hbc_activity a:hover{text-decoration: underline;}

/* 緊急放送 */
#emergency_live {
  background: #666666;
  padding: 40px;
}
#emergency_live h2 {
  font-size: 1.9rem;
  text-align: center; 
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.6;
}
#emergency_live h2 .txt_small {
  display: inline-block;
  font-size: 1.5rem;
}
#emergency_live div.movie {
  width: 85%;
  max-width: 800px;
  margin: 0 auto;
  border: 5px solid #000;
  background: #000;
}
#emergency_live div.youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  margin: 0 auto;
  padding: 56.25% 0 0;
}
#emergency_live div.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}