@charset "utf-8";
/*------------------------------------
 気仙沼市 top.css
------------------------------------ */
#TOP{margin:0;padding:0;}
.header{position:relative;padding-top:11%;background:url(../img/top_image.jpg) no-repeat center center;background-size:cover;}
.header .wrap { clear: both;}
.header .wrap ,.header form.search .wrap{width:auto;}
.header .wrap .title,.header h1 { position:absolute;top: calc(8px + 8px + 48px);left:8px;width:300px;height:80px;background:rgba(0,0,0,0.1) url(../img/title_top.png) no-repeat center center;background-size:276px 62px; z-index: 2;}

.header form.search{position:absolute;top: calc(0px + 48px);left:0px;right:0px;background:transparent;height:auto;}
.header form.search .wrap{position:relative;background:transparent;overflow:visible;margin:0;padding:0;}
.header form.search .input_area{border:4px solid rgba(0,0,0,0.5);position:absolute;right:0px;width:350px;background-color:#ffffff;}

.header form.search .option_area{display:none;}
.header .nav .nav_bg { position: relative;}
.header .nav ul li.menu01 a{background-image:url(../img/top_menu01.png);}
.header .nav ul li.menu02 a{background-image:url(../img/top_menu02.png);}
.header .nav ul li.menu03 a{background-image:url(../img/top_menu03.png);}
.contents{margin:0;padding:0;}


/* グローバルメニュー */
.top #menu.nav_bg ul { position: relative;  overflow: visible;}
.top #menu.nav_bg ul:after { display: block; content: ""; clear: both;}

/* common menu */
.common_menu { position: absolute; top: 0%; left: 0%; right: 0%; background-color: #fff; z-index: 50;}
.common_menu .page_control { margin: 0;}


.menu_bg,
.conf_bg { padding: 0;}



.emergency {position: absolute; top: calc(80px + 48px); right: 9px; clear: both; width: 222px; margin: 0px 0px 0px 0px;padding:8px 8px 8px 110px; background-color: #ffffff; border:5px solid #FFD0D0; z-index: 3;}
.emergency h2{position:absolute;top:0px;left:0px;bottom:0px;width:100px;margin:0px;color:#ffffff;text-indent:-10em;background:none no-repeat center center;border:none;}
.emergency h2{background-image:url(../img/emergency_title.png);background-color:#B22D00;background-size:73px 20px;}
.emergency p{margin:0px;padding:0px;list-style:none;}
.emergency ul { margin: 10px 0px 10px; padding: 0px; list-style: none;}
.emergency ul li{position:relative;padding-left:1.6em;}
.emergency ul li:before{display: block;content: " ";position: absolute;top: 0.35em;left: 8px;width: 0.6em;height: 0.6em;background: #B22D00;border-radius: 50%;}
.emergency ul li.nodata{padding-left:0;}
.emergency ul li.nodata:before{display:none;}

.header .wrap .right { clear: both; text-align: center ; margin:0 30px 0.8em; padding:0; overflow: hidden;}
.header .wrap .right { position: absolute; bottom: 44px; right: 0%; min-height: initial; z-index: 2;} /* haedから移動 */
.header .wrap .right img { display: block; margin: 0 auto 30px;}


/* 20211015 */
#xp1 { background-color: #fff;}
body div[id^="bg"],
#xp1 + div { padding-bottom: 0;} /* トップ画像のpaddingを解除 */
.header { border-bottom: 6px solid #fff;}
.header > .wrap { min-height: 360px;} /* トップバナーとか緊急情報の枠の最低高さを指定 */


.switch,.pager{display:inline-block;margin:0 auto;padding:0;}
.switch input {display: none;}
.switch label{display:inline-block;}
.switch label span{display:inline-block;border:1px solid #8091A8;margin:0;padding:0;text-indent:-100em;width:28px;height:28px;cursor: pointer;}

/*再生中*/
.switch input + label span.start{background:#002251 url(../img/bt_play_on.png) no-repeat center center;color:#FFFFFF;border-right:none;border-radius:5px 0 0 5px;}
.switch input + label span.stop{background:#FFFFFF url(../img/bt_pause.png) no-repeat center center;color:#002251;border-left:none;border-radius:0 5px 5px 0;}

/*停止中*/
.switch input:checked + label span.start{background-color:#FFFFFF;background-image:url(../img/bt_play.png);color:#002251;}
.switch input:checked + label span.stop{background-color:#002251;background-image:url(../img/bt_pause_on.png);color:#FFFFFF;}


/* pager */
.pager{margin-right:.5em;width:6em;overflow: hidden;}
.pager a {display: inline-block;border:1px solid #002251;background:#FFFFFF;;text-indent:-100em;height:0.8em;width:0.8em;margin:0.44em .3em;padding:0;border-radius:50%;}
.pager a:hover{background-color:#002251;border-color:#FFFFFF;}


/* link */
.imglink{font-size:.8em;width:200px;background-color: rgba(255,255,255,0.8);margin:0 8px 10px;padding:4px 1em;}


/* add 170329 --------------*/
body{position:relative;}
.header { padding-top: calc(11% + 48px); background:url(/topimage/001.jpg) no-repeat center center;background-size:cover;}
/* -------------------------*/


/* add 180124 --------------*/
.contents { margin: 2em auto 1em;}


/* tabmenu */
.tabmenu{margin-bottom:15px; clear:both;border:1px solid #E5E5E5;background:#F6F6F6;}
.tabmenu .section{margin:0px;padding:0px 20px;clear:both;}
.tabmenu .section h2{position:absolute;width:0px;height:0px;padding:0px;border:none;text-indent:-100em;}
.tabmenu .division{position:relative;padding:1em;}
.tabmenu > ul{margin:0px;padding:0px;list-style:none;}
.tabmenu > ul li{width:33.33%;padding:0px;float:left;}
.tabmenu > ul li a{display:block;min-height:50px;color:#ffffff;border-right:1px solid #EEEEEE;background:#002251 url(../img/tab1_title.png) no-repeat center center;text-indent:-100em;}
.tabmenu > ul li.tab2 a{background-image:url(../img/tab2_title.png);}
.tabmenu > ul li.tab3 a{background-image:url(../img/tab3_title.png);border:none;}
.tabmenu > ul li.active a{color:#333333;background-color:#F6F6F6;background-image:url(../img/tab1_title_s2.png);}
.tabmenu > ul li.active.tab2 a{background-image:url(../img/tab2_title_s2.png);}
.tabmenu > ul li.active.tab3 a{background-image:url(../img/tab3_title_s2.png);}
.tabmenu .list_link{float:right;}
.tabmenu .list_link a{display:block;margin-left:8px;padding:0.5em 2em;float:left;background:#F0B500;color:#333333;font-weight:bold;text-decoration:none;}
.tabmenu .list_link a:hover{background:#ffe28a;}
.tabmenu .list_link span.sup{display:block;width:0px;text-indent:-100em;float:left;}

.tabmenu dd span { position: relative; display: block; float: left; width: 8em; margin-top: -0.5em; margin-right: 1.75em; text-align: center; color: #ffffff; font-weight: bold;}
.tabmenu span.category01 { background-color: #0B3C84; border: solid 0.5em #0B3C84;}
.tabmenu span.category02 { background-color: #2858A8; border: solid 0.5em #2858A8;}
.tabmenu span.category03 { background-color: #2D65BF; border: solid 0.5em #2D65BF;}

.contents .news_section .news,
.contents .news_section .news dd { overflow: visible;}
.contents .news_section .news dd { padding-left: 6em;}

/* access ranking */
.tabmenu .division .feedList ul{list-style:none;padding-left:0px;}
.tabmenu .division .feedList li{margin-bottom:0.3em;padding-left:1.6em;position:relative;}
.tabmenu .division .feedList li:before{content:"";display:block;position:absolute;top:0.35em;left:8px;width:0.6em;height:0.6em;background:#002251;border-radius:50%;}



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

@media screen and (min-width: 0px) and (max-width: 1000px) {
  .header .wrap { margin-top: 0; margin-bottom: 0;}  
  
  .header .nav ul li.menu01 a{background-image:url(../img/top_menu01_s.png);}
  .header .nav ul li.menu02 a{background-image:url(../img/top_menu02_s.png);}
  .header .nav ul li.menu03 a{background-image:url(../img/top_menu03_s.png);}
  .header .nav ul li.menu03::before,
  .header .nav ul li.menu01::after{display:none;}
  .emergency{ right: 3%; margin: 0px 0px 0px 0px;}
}



@media screen and (min-width: 0px) and (max-width: 787px) {
  .header { position: relative; padding-top: calc(11% + 96px);}
  .header .wrap .title,
  .header h1 {top: calc(8px + 8px + 96px);}
  .header form.search .input_area{ left:0; top: calc(46px + 96px); margin: 0; width:300px;}
  .header .wrap .right{ padding-top: 0;}
  .emergency{ top: calc(162px + 96px); left: 9px; width: 172px;}

  
/* add 180124 --------------*/
  .tabmenu dd { position: relative;}
  .tabmenu dd span { position: absolute; top: -2.75em; margin-top: 0em;}
  .contents .news_section .news dt { padding-bottom: 1em}
/* -------------------------*/
  
  /* グローバルメニュー - 下階層 */
  .top #menu ul.sub_category { display: block;} /* topではまだ表示 */
  
}



@media screen and (max-width: 700px) {
  .header > .wrap { margin-top: 0;}

  .header .wrap .title,
  .header h1 {margin-top: 0;}

  .header .wrap .right { margin-right: 0px;}

}


@media screen and (max-width: 640px) {
  .imglink { display: none !important;}

}



@media screen and (max-width:584px) {
  div.right,
  div.left {float: none;} /* sytle.css 484px */
  .header{padding-top:8px;}
  
  .header .wrap .title,
  .header h1  {left:1%; width:98%; top: calc(4px + 98px); background-position: 0 center;}
  
  .header form.search { padding:0;}
  .header form.search .wrap { max-width:100%;}
  .header form.search .input_area { left:1%; width:98%; top: calc(48px + 98px);}
  
  .header .wrap .right{padding-top:150px;margin-left:auto;margin-right:auto;}
  .header .wrap .right img{display:block;margin:0 auto;}
  .emergency{position:relative;margin: 10px 0px; padding:8px;top:auto;left:auto;right:auto;width: auto;}
  .emergency h2{position:relative;width:100%;height:auto;margin-bottom:.5em;}
  .header .wrap .right img{margin-bottom:20px;}
  .imglink{width:auto;margin-left:1%;margin-right:1%;font-size:1em;line-height:3em;}
  .switch,.pager{display:block;margin-right:auto;margin-left:auto;}
  .pager{margin-bottom:20px;}
  .switch label span{font-size:1em;}


  /* add 170329 + 211015 --------------*/
  .emergency { width: 100%;}
  .header > .wrap {
      display: flex; align-items: flex-end; align-content: flex-end; flex-wrap: wrap;
      margin-top: 240px; min-height: 370px;
  }
  .header .wrap .right { position: static; margin-right: 4px; margin-bottom: 0;}
  .header .wrap .right a { display: block; width: 172px; height: 126px; overflow: hidden;}
  .header .wrap .right img { width:130px; height: auto; margin-bottom: 0;}
  /* -------------------------*/


  /* add 180124 --------------*/
  .tabmenu > ul li.tab3 a{background-size:contain;}
  /* -------------------------*/
  
  /* グローバルメニュー - 下階層 */
  .top #menu ul.sub_category { display: none;} /* topではここのブレイクポイントからサブカテゴリは非表示 */
  

}



@media screen and (max-width:484px) {
  /* add 180124 --------------*/
  .tabmenu .division:not(#tab3){ padding: 0px;}
  .tabmenu dd span { top: -2.7em;}
  .contents .news_section .news dt { padding-bottom: 0.5em;}
  .contents .news_section .news dd { margin-bottom: 1em; padding-bottom: 1em;}
  /* -------------------------*/
  
  .header { margin-top: 52px; padding-top: 8px;}
  .header h1  { top: calc(4px + 0px);}
  .header form.search .input_area { top: calc(48px + 0px);}

  .header .wrap .right { height: auto; padding-top: 0px;}
  .header > .wrap { margin-top: 160px; min-height: 300px;}
  .common_menu { position: fixed; top: 0%; left: 0%; right: 0%; background-color:  transparent; z-index: 50;}
 
}



/* ハイコントラスト・モード */
@media screen and (-ms-high-contrast:active){
  .header form.search .input_area{top:32px;}
  .header form.search label.search_txt{position: absolute;right: 260px;right:calc(350px - 6em);}
  .emergency{top:112px;}
  .emergency{display:table;padding:8px;width:324px;}
  .emergency > *{display:table-cell;}
  .emergency h2{position:relative;widht:auto;text-indent:0;font-size:1em;vertical-align:middle;text-align:center;}

  /* add 180124 --------------*/
  .tabmenu > ul li a,
  .tabmenu > ul li.tab2 a,
  .tabmenu > ul li.tab3 a,
  .tabmenu > ul li.active a,
  .tabmenu > ul li.active.tab2 a,
  .tabmenu > ul li.active.tab3 a{text-indent:0;text-align:center;padding-top:.5em;}
  .tabmenu > ul li.active a{font-weight:bold;font-size:1.2em;}
  /* -------------------------*/
}

/* !!! */
.pager { display: none !important;}

/* add 180222 --------------*/
.header .wrap .right a img { max-width: 100%; height: auto;}

@media screen and (max-width: 584px) {
  .header .wrap .right a { height: 80px;}
  .header .wrap .right a:last-of-type { height: 126px;}
}
/* -------------------------*/

/* おすすめメニュー　*/
.pickup_menu button#pickup_menu {top: auto;bottom: 200px;}
@media screen and (max-width: 580px){
.pickup_menu button#pickup_menu {top: 67px;bottom: auto;}
.header > .wrap {margin-top: 160px;min-height: 460px;}
}