@charset "UTF-8";

/* トップページレスポンシブスタイル */


div.baseall { width: 100%; background: none; }
div#main{ width: 100%; padding: 0; margin: 0; }
div#main-box { position: relative; width: 100%; padding: 0; }
div.mainbox-r { width: 100%; }


/*--- header --------------------------------------*/
div#baseright, div#h0bgwrap{ width: 100%; margin: 0!important; padding: 0; }
div#baseright div.wrap { width: 100%; margin: 0; margin-bottom: 0; padding: 0;  }
div#baseright hr.vis{ margin-top: 0; }
div#baseright .guidance, div#main-box .guidance { height: 0; }
div.h0wrap{ position: relative; display: block; width: 100%; padding: 10px 0; }
div#h0left2{ clear: both; float: none; width: 100%; height: auto; }
div#h0left2 img{ margin-top: 0; width: auto; height: 60px; }

div#h1left2, img.head_img{ display: none; }

div#h0right-top{ display: none; }
ul.headlist_smph{ 
  clear: both; float: none; width: 100%; height: auto; margin: 20px 0 0; padding: 0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
ul.headlist_smph li { clear: both; float: none; width: auto; height: auto; margin: 0 15px 10px 0; padding: 0 0 0 13px; background-position: 0px 3px; line-height: auto;  }
ul.headlist_smph li p{ margin: 0; background-color: transparent; }
ul.headlist_smph li a { text-decoration: underline; }
.navi-btn { 
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%); 
  display: block; width: 40px; height: 40px; font-size: 0; 
  background-image: url('/images/spmenu_o.png'); background-repeat: no-repeat; background-size: cover;
}
.navi-btn.selected { background-image: url('/images/spmenu_c.png'); }
.navi-btn:hover { cursor: pointer; }


/*--- header-menu --------------------------------------*/
div#globalnavi { display: none; position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0; z-index: 99; background: #d6e8f1;}
div#gnb { padding: 20px 20px 10px;  }
ul.gnavi{ 
  width: 100%; margin: 0; padding: 0; 
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
ul.gnavi li{ clear: both; float: none; width: calc(100% - 20px); height: auto; padding: 3px 10px; font-size: 85%; }
ul.gnavi a{ display:-webkit-box; display:-ms-flexbox; display:flex; }
ul.gnavi li img { clear: both; float: none; margin-top: 0; width: 40px; height: auto; }
div#gnb span{ 
  width: calc(100% - 50px); height: 40px; margin: 0; padding: 0 0 0 10px;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
ul.gnavi li.gnb09 { clear: both; float: none; width: 100%; padding: 0; }
ul.gnavi li.gnb09 a{ padding: 3px 5px; }
div#gnb span.gnb09, div#gnb span.gnb10 { 
  width: 100%; margin: 0; padding-top: 0; padding-left: 0; 
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}

@media (max-width: 399px) {
  ul.gnavi li{ font-size: 80%; }
}


/*--- top-slider --------------------------------------*/
div.mainbox-r { clear: both; float: none; width: 100%; height: auto; margin: 0; padding: 0; }
div.featured, div.featured-img, div#mainimg { position: relative; clear: both; float: none; width: 100%; height: 100%; margin: 0; padding: 0; }
div.ui-tabs-panel img{ width: 100%; height: auto; }
div.featured ul.ui-tabs-nav{ bottom: 10px; left: 10px; }
div.featured ul.ui-tabs-nav li{ width: 10px; height: 10px; }
div.featured ul.ui-tabs-nav li img{ width: 10px; height: 10px; }
div.mainbox-r div.img-area{ margin: 0; }


div.kinkyu{ width: 100%; margin: 0 auto; padding: 0 0 10px; border-right: 0; border-left: 0; }


/*--- infoarea1:検索、観光サイト --------------------------------------*/
div#infoarea1{ width: 100%; height: auto; }
div#infoarea1-l, div#infoarea1-r_top, div#infoarea1-r_under { clear: both; float: none; width: 100%; }
div.search_top, div.search_l{ clear: both; float: none; width: 100%; }
div#infoarea1-l{ height: auto; }
div#infoarea1-l h2{ padding: 0 0 15px; text-align: center; }

div.search_top{ width: calc(100% - 40px); padding: 30px 20px 0; }
.search-box { display:-webkit-box; display:-ms-flexbox; display:flex; }
.search-wp{ width: 100%; max-width: 100%; }
.search_txt_box { clear: both; float: none; width: calc(100% - 75px); padding: 0 10px 0 0;}
.search_txt_box input[type="text"]{ width: calc(100% - 4px); }
.search_submit{ clear: both; float: none; }

div.search_l{ width: calc(100% - 40px); padding: 30px 20px 20px; }
div.search_l h2{ width: 100%; padding: 0 0 15px; text-align: center; }
ul.keywordlist { 
  width: 100%; 
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
div.search_l p.innerLink { background-position: 0 2px; padding: 0 0 0 15px; margin: 0 15px 15px 0; }

div#infoarea1-r_top{ width: calc(100% - 40px); height: auto; padding: 30px 20px 0; background-color: #ffffff; }
div.kankou{ clear: both; float: none; width: 100%; padding: 0; }
div.kankou h2 { clear: both; float: none; width: 100%; padding: 0 0 15px; text-align: center; }
div.kankou ul { 
  clear: both; float: none; width: 100%; padding: 0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
div.kankou li { clear: both; float: none; padding: 0; margin: 0 10px 20px; }
div.kankou-img { width: 100%; height: auto; }
div.kankou-img img { width: 100%; max-width: 150px; height: auto;}

div#infoarea1-r_under{ width: calc(100% - 40px); height: auto; margin: 0; padding: 10px 20px 30px; background-color: #ffffff; }
div.sns { clear: both; float: none; width: 100%; padding: 0; }
div.sns h2{ clear: both; float: none; width: 100%; padding: 0 0 15px; text-align: center; }
div.sns ul { 
  clear: both; float: none; width: 100%; 
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
div.sns li { clear: both; float: none; padding: 0; margin: 0 5px 5px; }
div.sns-img { width: 100%; height: auto; }
div.sns-img img { width: 100%; max-width: 55px; height: auto; }


@media (max-width: 499px) {
  div.search_top{ width: calc(100% - 20px); padding: 30px 10px 0; }
  div.search_l{ width: calc(100% - 20px); padding: 30px 10px 20px; }
  div#infoarea1-r_top{ width: calc(100% - 20px); padding: 30px 10px 0; }
  div#infoarea1-r_under{ width: calc(100% - 20px); padding: 10px 10px 30px; }  
}

@media (max-width: 399px) {
  div.kankou li{ width: calc(50% - 20px); }
  div.kankou-img a { 
    width: 100%; height: 100%; 
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  }
  
  div.sns li { width: calc(20% - 10px); }
  div.kankou-img a { 
    width: 100%; height: 100%; 
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  }

}


/*--- infoarea2-3：ボックスメニュー --------------------------------------*/
div#infoarea2, div#infoarea3{ clear: both; float: none; width: 100%; margin: 0 0 5px; }
div#kurashi, div#mokuteki{ clear: both; float: none; width: 100%; padding: 0; margin: 0; }
div#infoarea2 .area-box-bottom, div#infoarea3 .area-box-bottom { position: relative; }

div#kurashi h2, div#mokuteki h2 { 
  position: relative; margin: 0; padding: 20px; text-align: center;
}
.area-box-bottom .menu-title:hover { cursor: pointer; }
.area-box-bottom .menu-btn{ 
  width: calc(100% - 80px); height: 20px; padding: 0 40px; margin: 0; 
  background-image: url('/images/sp_down.png'); background-repeat: no-repeat; background-size: 18px 18px;
  background-position: 99% 49%; 
}

div#kurashi .menu-box, div#mokuteki .menu-box { display: none; padding: 0 20px 20px; }

div#kurashi ul li.img-li, div#mokuteki ul li.img-li{
  clear: both; float: none; width: calc(20% - 10px); margin: 0 5px 10px; padding: 0; 
}
div.kurashibox, div.mokutekibox { width: 100%; }

@media (max-width: 499px) {
  div#kurashi .menu-box, div#mokuteki .menu-box { display: none; padding: 0 10px 15px; }
  div#kurashi ul li.img-li, div#mokuteki ul li.img-li{ width: calc(33.3% - 10px); }
  div#kurashi h2, div#mokuteki h2 { font-size: 105%; }
  .area-box-bottom .menu-btn{ width: calc(100% - 50px); padding: 0 25px 0 0; background-size: 15px 15px; }
}


/*--- infoarea4：トピックス --------------------------------------*/
div#infoarea4{ clear: both; float: none; width: 100%; padding: 0; margin: 0; }
div#bannerlist{ clear: both; float: none; width: 100%; margin: 0; background-color: #ffffff; }
div#bannerlist h2 { position: relative; margin: 0; padding: 20px; text-align: center; }

div#bannerlist ul li { width: calc(33.3% - 10px); margin: 0 5px 10px; }
ul.info-select li.li3{ width: 33.4%; }

@media (max-width: 499px) {
  div#bannerlist ul{ padding: 10px; }
  div#bannerlist ul li{ width: calc(50% - 10px); }
  div#bannerlist h2 { padding: 20px 20px 10px; font-size: 105%; }
}

/*--- infoarea5：ニュースボックス --------------------------------------*/
/* タブ */
div#infoarea5{ clear: both; float: none; width: calc(100% - 40px); padding: 20px 20px 0; margin: 0; }
ul.info-select{ 
  width: 100%;
  display:-webkit-box; display:-ms-flexbox; display:flex;
}
ul.info-select:after { content: none; }
ul.info-select li{ clear: both; float: none; display: block; width: 33.3%; height: 40px; margin: 0; padding: 0 }
ul.info-select li a{ width: 100%; height: 100%; }
ul.info-select li a span { width: 100%; height: 100%!important; line-height: 40px!important; margin: 0!important; margin-top: 0!important; padding: 0!important; }

/* ボックス */
ul.info-list li span.date{ clear: both; float: none; width: 100%; padding: 0; margin: 0; }
ul.info-list li span{ clear: both; float: none; width: 100%; padding: 0; margin: 0; }

@media (max-width: 499px) {
  div#infoarea5{ width: calc(100% - 20px); padding: 30px 10px 0; }
  ul.info-select li a span{ font-size: 90%; }
  ul.info-select li a#infoli-1 span, ul.info-select li a#infoli-2 span, ul.info-select li a#infoli-3 span{ font-size: 105%; }
}


/*--- 注目施策バナー --------------------------------------*/
div.cyumoku-box{ width: calc(100% - 42px); margin: 20px; border: 1px solid #aeaeae; }
div.cyumoku-box h2{ padding: 10px 0; text-align: center; }
#slide_space{ position: relative; }
.bx-wrapper { width: 100%; }
div.cyumoku-box ul{ margin: 0;  }
div.cyumoku-box ul li p { 
  height: 100%; margin: 0; padding: 0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; 
}
div.cyumoku-box ul li img{ display: block; margin: 0 auto; height: auto; }
#slide_space > .bx-wrapper{ width: calc(100% - 50px);  }
.bx-wrapper .bx-controls-direction a{ display: block; width: 25px!important; padding-left: 0!important; text-align: center; }
.bx-wrapper .bx-prev{ left: -25px!important; }
.bx-wrapper .bx-next{ right: -25px!important;}
/* .bx-viewport .bx-controls{ display: none; } 後で消す */

@media (max-width: 499px) {
  div.cyumoku-box{ width: calc(100% - 22px); margin: 10px; }
  div.cyumoku-box ul li{ margin: 0 5px; }
}


/*--- 広告バナー --------------------------------------*/
div.ad-box{ width: calc(100% - 42px); margin: 20px; border: 1px solid #aeaeae; }
div.ad-box h2{ padding: 10px 0; text-align: center; }
div.ad-box ul{ 
  width: calc(100% - 48px);  margin: 10px 24px;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
div.ad-box ul li { clear: both; float: none; display: inline-block; width: calc(33.3% - 16px); margin: 7.5px; height: auto; }
div.ad-box ul li img { width: 100%; height: auto; margin: 0 auto;  }

@media (max-width: 599px) {
  div.ad-box ul{ width: calc(100% - 20px); margin: 10px; }
}
@media (max-width: 499px) {
  div.ad-box{ width: calc(100% - 22px); margin: 10px; }
  div.ad-box ul li{ width: calc(50% - 16px); }

}


/*--- フッター --------------------------------------*/
div.topfoot4bg{ width: 100%; }
div.topfoot3bg{ width: 100%; background: none; border-top: 7px solid #0066a7; }
div.topf0add{ position: relative; width: calc(100% - 40px); height: auto; margin: 0; padding: 20px;}
div.topf0add h2 { width: 100%; margin: 10px 0; padding: 0; }
address { clear: both; float: none; width: 100%; margin: 0; padding: 0; }
div.topf0add img{ position: absolute; height: auto; left: auto; right: 30px; top:30px;}
div.tothispage{ margin: 10px 10px 0; }

@media (max-width: 499px) {
  div.topf0add{ width: calc(100% - 30px); padding: 10px 15px 20px; }
  div.topf0add img{ width: 80px; right: 10px; top: 10px; }

}


/*--- 大規模災害用トップページ --------------------------------------*/
div.baseall-s{ width: calc(100% - 20px); }
div.baseall-s div.main-wrap{ display: block; }
div.baseall-s div.main-l{ width: 100%; }
div.bgbox-s.main-r{ width: 100%; margin: 0; }
div.bgbox-s.s-anzen{ width: calc(100% - 2px);  }
div.baseall-s h1#h0left{ padding: 10px; font-size: 150%; }

div#sg_footer div.f_top{ display: block; }
div#sg_footer div.f_top_title{ width: 100%; }



/*--- トップへ戻るボタン --------------------------------------*/
div.tothispage{ right: 5px; }
div.tothispage a{ width: 60px; height: 60px; }


/* 202403　防災無線連携用設定　追加 */
div.bousai {
  margin: 0;
  padding: 0;
  width: auto;
}
div.bousai-in {
  margin: 10px 0;
  padding: 0 10px 10px;
  background-color: #d5442c;
  display: block;
  width: auto;
}
h2#bousai-h2 {
  width: auto;
  padding: 20px 10px;
  font-size: 120%;
  color: #fff;
  line-height: 1%;
}
div.bousai-main {
  padding: 10px 0;
  width: auto;
  background-color: #ffffff;
}
div.bousai-main p {
  margin: 0.56em 0 0.1em 10px;
  padding: 0 0 0 20px;
  background: url(../images/c_icon_li_red.gif) no-repeat top 7px left 6px;
}