@charset "UTF-8";

/* トップ画面表示用スタイル（スマホ用） */

/* ------------------------ 情報エリア共通 ------------------------ */
div#infoarea{ margin: 80px 0 0; }
div.infoarea-in{ background-color: #fff; }
#infoarea1{ width: calc(100% - 40px); padding: 0 20px; }

div#infoarea h2{ padding: 40px 0 30px; }
div#infoarea1 h2{ -webkit-background-size: 138px; -moz-background-size: 138px; background-size: 138px; }
div#infoarea2 h2{ -webkit-background-size: 128px; -moz-background-size: 128px; background-size: 128px; }
div#infoarea3 h2{ -webkit-background-size: 96px; -moz-background-size: 96px; background-size: 96px; }
div#infoarea4 h2{ -webkit-background-size: 281px; -moz-background-size: 281px; background-size: 281px; }
div#infoarea5 h2{ -webkit-background-size: 316px; -moz-background-size: 316px; background-size: 316px; }
div#infoarea6 h2{ -webkit-background-size: 81px; -moz-background-size: 81px; background-size: 81px; }
div#infoarea7 h2{ -webkit-background-size: 285px; -moz-background-size: 285px; background-size: 285px; }

div#infoarea h2 span.eng{ font-size: 170%; }
div#infoarea h3{ font-size: 105%; padding: 0 0 20px; }
div#infoarea h3 span{ padding: 0 0 0 30px; }
div#infoarea h3 span:before, div#infoarea h3 span:after{ 
	width: 14px; height: 14px; 
}
div#infoarea h3 span:after{ top: 6px; left: 6px; }

/* 一覧ボタン */
.more_btn{ width: auto; }
.more_btn a{ display: inline-block; padding: 5px 20px; background: #002060; color: #fff; }
.more_btn a .arrow1:before{ top: 5px; border-color: #fff; }

@media only screen and (max-width: 750px){
	div#infoarea{ margin: 0; }
	div.infoarea-in{ padding: 60px 0 0; }
}

/* ------------------------スライダー共通ドット------------------------ */
.slide-dots li{ width: 20px }
.play_pause button{ 
	width: 14px; height: 16px; margin: 0 10px; 
	background-size: 14px 16px; 
}
.play_pause{ margin: 15px 0 0; }


/* ------------------------ トップ画像エリア ------------------------ */
#top_img{ position: relative; top: auto; }
#baseall.appear #top_img{ top: auto; height: calc(100vh - 60px); padding-top: 60px; }
#top_img .logo_area{ width: auto; top: calc(50% - 30px); }
#top_img .logo_area .logo{ width: 240px; height: 240px; max-width: unset; }
div#scroll_down{ top: 290px; }
div#scroll_down img{ width: 100px; }

@media only screen and (max-width: 750px){
	#top_img{ position: relative; height: 100vh; /* max-height: 600px;*/ overflow: hidden; }
	
	#top_img .bgWrap{ height: 100%; }
	#top_img .imgWrap.pc{ display: none; }
	#top_img .imgWrap.smp{ display: block; height: 100%; }
	#top_img .imgWrap.smp .item{ height: calc(100vh - 40px); }
	#baseall.appear #top_img .imgWrap.smp .item{ height: calc(100vh - 100px); }
	#top_img .imgWrap.smp img{ 
		display: none; position: relative; top: auto; bottom: auto; left: auto; right: auto; 
		width: 100%; height: 50%; object-fit:cover; 
	}

	#top_img .slide-dots{ margin: 15px auto 0; }
}

@media only screen and (max-width: 500px){
	#top_img .logo_area .logo{ width: 200px; height: 200px; }
	div#scroll_down{ top: 240px; }
}


/* ------------------------ 緊急情報エリア ------------------------ */
#kinkyu{ width: calc(100% - 60px); margin: 20px auto 40px; padding: 0; }
#kinkyu .kinkyu_wrap{ width: 100%; }
#kinkyu h2.title{ 
	width: calc(100% - 60px); padding: 10px 20px 10px 40px;
	background-size: 22px 20px; background-position: 10px 15px; 
}
#kinkyu h3.title{ width: calc(100% - 20px); padding: 0 0 0 20px; font-size: 100%; }
#kinkyu h3.title:before{ width: 10px; height: 10px; left: 5px; top: 6px; }
.kinkyu_box{ width: calc(100% - 20px); padding: 20px 10px 0; }
.kinkyu_box .cont{ margin: 0 20px 30px; }

@media only screen and (max-width: 750px){
	#kinkyu{ width: calc(100% - 40px); }
	.kinkyu_box div.item{ width: 100%; padding: 0; }
	#kinkyu div.h2bg{ margin: 0 0 10px; }
	#kinkyu div.h3bg{ margin: 0 0 10px; }
	#kinkyu div.h4bg{ margin: 0 0 10px; }

}
/* ------------------------ 情報をさがすエリア ------------------------ */
.top_search{ width: 100%; margin: 0 auto 40px; }
.top_search .key_search{ margin: 0 auto 20px; }
.top_search form.key-search input.fedbt{ width: 60px; height: 40px; }
.top_search form.key-search input.query{ width: calc(100% - 60px); height: 40px; }
.top_search .placeholder{ margin: 1px 0; background-size: 20px; background-position: 7px center; }
.top_search .placeholder span{ padding-left: 30px; }

ul.key_list .item{ margin: 0 10px 10px 0; }
ul.key_list .item a{ font-size: 90%; padding: 8px 25px 8px 10px; }
ul.key_list .arrow1:before{ top: 11px; }

.searc_wrap{ width: 100%; margin: 0; padding: 0; background: transparent; border: 0; }
.use_area{ width: 100%; margin: 0; }


/* ------------------------ TOPICSエリア ------------------------ */
#infoarea2{ padding: 60px 0; }
.topic_list{ width: calc(100% - 40px); }
.topic_list .item{ margin: 0 7px 10px; }
.topic_list .item a{ width: calc(100% - 20px); padding: 10px; font-size: 95%; }
.topic_list .fig{ margin: 0 0 10px; }
.topic_list .title{ min-height: 70px; padding: 0 25px 0 10px; }

@media only screen and (max-width: 750px){
	.topic_list{ width: calc(100% - 40px); }
}
@media only screen and (max-width: 550px){
	.topic_list{ width: 100%; }
}

/* ------------------------ NEWSエリア ------------------------ */
#infoarea3{ padding: 60px 0; }
#infoarea3 .news{ width: calc(100% - 60px); }
ul.news_tab li{ min-width: unset; margin: 0 5px; }
ul.news_tab li a{ height: 30px; line-height: 30px; width: auto; padding: 0 20px; }
.news_box ul{ margin: 0 0 30px; }
.news_box li{ display: block; padding: 10px; }
.news_box li span.date{ display: inline-block; margin: 0 0 5px; }
.news_box li span.title{ width: calc(100% - 15px); padding: 0 15px 0 0; }

@media only screen and (max-width: 750px){
	#infoarea3 .news{ width: calc(100% - 40px); }
}
@media only screen and (max-width: 600px){
	ul.news_tab{
		-ms-flex-wrap: wrap; flex-wrap: wrap;
	}
	#infoarea3 ul.news_tab li{ width: calc(50% - 10px); margin: 0 5px 10px; padding: 0; }
	ul.news_tab li a{ font-size: 90%; }
	ul.news_tab li a:after{ content: none; }
}


/* ------------------------ EVENTエリア ------------------------ */
#infoarea4{ padding: 60px 0 60px; }


/* ------------------------ CITYエリア ------------------------ */
#infoarea5{ padding: 60px 0 60px; }
#infoarea5 .city{ width: calc( 100% - 60px); }
/*ul.city_img_list .item a{ width: calc(100% - 20px); padding: 10px; }*/
ul.city_img_list .btn_wrap{ width: calc(100% - 14px); height: calc(100% - 14px); padding: 7px;}
ul.city_img_list .fig{ margin: 0 0 10px; }
ul.city_img_list .title{ padding: 0 25px 0 10px; }
ul.city_btn_list .item{ min-height: 60px; }
ul.city_btn_list .btn_wrap{ width: calc(100% - 10px); padding: 0 5px; }
ul.city_btn_list .icon{ width: 60px; }
ul.city_btn_list .icon img{ max-width: 40px; max-height: 40px; width: auto; height: auto; }
ul.city_btn_list .title{ width: calc(100% - 90px); margin: 0 10px 0 0; padding-right: 20px; }

@media only screen and (max-width: 750px){
	#infoarea5 .city{ width: calc(100% - 40px); }
	ul.city_img_list .item a{ /*width: 100%; padding: 0; */ }
	ul.city_img_list .fig{ border: 0; border-radius: 5px 5px 0 0; }
	ul.city_img_list .title{ margin: 0 0 5px; }
	
	ul.city_btn_list .item{ width: calc(50% - 20px); }
	 ul.city_btn_list .item a{ min-height: 60px; }
}

@media only screen and (max-width: 650px){
	ul.city_img_list{ display: block; }
	ul.city_img_list .item{ width: calc(100% - 12px); margin: 0 5px 10px; }
	ul.city_img_list .item .btn_wrap{ 
		display:-webkit-box; display:-ms-flexbox; display:flex;
		padding: 0; width: 100%; 
	}
	ul.city_img_list .fig{ width: 100px; height: auto; margin: 0; }
	ul.city_img_list .title{ 
		display:-webkit-box; display:-ms-flexbox; display:flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		width: calc(100% - 140px); margin: 0 10px 0 0; padding: 0 20px; 
	}
	ul.city_img_list .arrow1:before{ content: none; }

	ul.city_btn_list .item{ width: calc(50% - 11px); margin: 0 5px 10px; }
	/* ul.city_btn_list .item a{ min-height: 60px; } */
	ul.city_btn_list .icon{ width: 30px; }
	ul.city_btn_list .icon img{ max-width: 22px; max-height: 22px; }
	ul.city_btn_list .title{ width: calc(100% - 35px); margin: 0; font-size: 95%; padding-right: 0px; padding-left: 5px; }
	ul.city_btn_list .arrow1:before{ content: none; }
}


/* ------------------------ LINKエリア ------------------------ */
#infoarea6{ padding: 60px 0 60px; }



/* ------------------------ ADVエリア ------------------------ */
#infoarea7{ padding: 60px 0 60px; }
#infoarea7 .adv{ width: calc(100% - 60px); }
@media only screen and (max-width: 750px){
	#infoarea7 .adv{ max-width: 450px; width: calc(100% - 20px); }
	ul.adv_list{ margin: 0 0 10px; }
	ul.adv_list .item{ width: calc(33.3% - 10px); margin: 0 5px 10px; }
}
@media only screen and (max-width: 550px){
	#infoarea7 .adv{ max-width: 300px; }
	ul.adv_list .item{ width: calc(50% - 10px); }
}

/* ------------------------ DATAエリア ------------------------ */
#infoarea8:before{ width: 400px; }
ul.num_list .icon{ width: 80px; }
ul.num_list .icon img{ width: 40px; }
ul.num_list .num_data{ width: calc(100% - 80px); font-size: 150%; }
.data_wrap .memo{ font-size: 95%; }

.sns_wrap .title{ margin: 0 0 5px; font-size: 105%; }

@media only screen and (max-width: 750px){
	#infoarea8{ height: auto; }
	#infoarea8 .ft_info{ width: 80%; height: auto; padding: 30px 20px; }
	#infoarea8 .sns_wrap{ width: auto; }
	ul.num_list p{ width: calc(100% - 60px); padding: 0 0 0 10px; }
	ul.num_list img{ width: 50px; }
	ul.num_list .num{ font-size: 120%; }
	.data_wrap .memo{ width: auto; }
}
@media only screen and (max-width: 550px){
	ul.num_list{ display: block; }
	ul.num_list .item{ margin: 0 10px 10px; width: auto; justify-content: center; }
	ul.num_list p{ width: auto; }
	.data_wrap .memo{ width: 270px; margin: 0 auto 10px; text-align: center; }
	ul.sns_list .item img{ width: 40px; }
	ul.sns_list .item{ margin: 0 10px; }

}
/*
	#infoarea8{ height: 460px; background-image: url('images/top_data_smph.jpg');}
	#infoarea8:before{ content: none; width: 220px; height: 230px; right: 0;	}
	#infoarea8 .ft_info{ 
		position: absolute; top: 100px; left: 0;
		width: calc(100% - 20px); height: auto; margin: 0; 
	}
	#infoarea8 .info_wrap{ width: 310px; max-width: 100%; margin: 0 auto; }
	ul.num_list{ display: flex; justify-content: space-between; margin: 0 0 10px; }
	ul.num_list .item{ display: block; width: calc(50% - 25px); min-width: unset; margin: 0; padding: 10px; text-align: center; }
	ul.num_list .icon{ 
		display: flex; align-items: center; justify-content: center; 
		width: 100%; margin: 0 0 10px; 
	}
	ul.num_list .icon img{ margin: 0; }
	ul.num_list .num_data{ width: 100%; text-align: center; }
	#infoarea8 .sns_wrap{ width: calc(100% - 22px); margin: 0; }
*/