/* CSS Document */
/* =============================================
共通パーツ
============================================= */
html {font-size: 62.5%;}
body {
  font-family: 'Lato',"游ゴシック体", "Yu Gothic","ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  letter-spacing: 1px;
  font-size: 1.6rem;
  line-height: 170%;
  font-weight: 600;
}
#content-wrapper{padding: 4rem 0 0;}
.common_inner {max-width: 1000px;width: 100%;margin: 0 auto;}
.common_title {
  font-family: 'Lato', sans-serif;
  border-bottom: 5px solid #FCD004;
  position: relative;
  margin-top: 20px;
}
.common_title h2 {
  background: #FCD004;
  display: inline-block;
  padding: 10px 12px 7px 12px;
  text-align: center;
  width: 160px;
  font-size: 2.2rem;
  position: absolute;
  top: -39px;
}
.common_title span {font-size: 1.9rem;position: absolute;top: -27px;left: 180px;}
/* =============================================
ヘッダー
============================================= */
header {background: #FCD004;height: auto;}
header .inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 114px;
  position: relative;
}
header .inner h1 img {position: absolute;top: 41px;left: 0;}
header .inner .titlelogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 289px;
}
header nav {width: 100%;background: #050505;}
header .nav_inner {
  align-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  text-align: center;
}
/*header .nav_inner li {border-right: 1px dotted #fff;width: 12.5%;}*/
header .nav_inner li {border-right: 1px dotted #fff;width: 14.2%;}
header .nav_inner li:last-child {border-right: 0;}
header .nav_inner li a {
  color: #fff;
  display: block;
  font-size: 1.5rem;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
}
header .nav_inner li a:hover {color: #FCD004;transition: 0.5s;}
header .pcnav {display: block;}
header .spnav {display: none;}
/*通常トップページへのボタンPC　イレギュラー*/
.pcgenerally_btn {
  display: block;
  background: #E50011;
  font-family: 'Noto Sans JP', sans-serif;
  width: 237px;
  text-align: center;
  padding: 2rem 0;
  right: 50%;
  font-size: 1.6rem;
  position: fixed;
  top: 0;
  z-index: 10;
  margin-right: -490px;
  animation: animation 0.8s ease;
}
.pcgenerally_btn:after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 22px;
}
.pcgenerally_btn :hover {opacity: 0.9;transform-style: 0.5s;}
.pcgenerally_btn a {display: block;text-decoration: none;color: #fff;}
/*通常トップページへのボタンSP　イレギュラー*/
@media only screen and (min-width : 1000px) {
.spgenerally_btn{display: none!important;}}
.animation {transition: all 1s ease;-webkit-transition: all 1s ease;}
.animeright {margin-right: 0 !important;right: 0 !important;}
/* =============================================
introduction　警戒、避難、気象情報一覧
============================================= */
.introduction {padding: 3rem 0;}
/*一番上の見出し　災害など*/
.introduction .latest {
  background: #FCD004;
  height: auto;
  position: relative;
  margin: 1em 0 3.5em 0;
}
.introduction .latest p {
  color: #050505;
  font-size: 1.9rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  width: 70%;
  text-align: center;
  line-height: 28px;
  margin: 0 auto;
  padding: 30px 0;
}
.introduction .latest p a {
  color: #050505;
  display: block;
  font-size: 1.9rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: none;
}
.introduction .latest a {text-decoration: none;}
.introduction .latest .item {
  background: #E50011;
  font-size: 1.9rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 5px 25px;
  width: auto;
  display: block;
  text-align: center;
  color: #fff;
  position: absolute;
  top: -36px;
}
.latest .thumbnail_box {padding: 20px;}
.latest .thumbnail_box .thumbnail {width: 140px;height: auto;display: inline-block;margin-right: 0%;vertical-align: middle;}
.latest .thumbnail_box .thumbnail_text {
  max-width: 700px;
  margin-left: 3rem;
  text-align: center;
  display: inline-block;vertical-align: middle;
}
.latest .thumbnail_box .thumbnail_text p {
  width: 100%;
  color: #050505;
  font-size: 1.9rem;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
}
/*警戒・避難・気象情報などの一覧*/
.introduction .catch{margin: 0 0 3em 0;}
.introduction .catch ul {display: flex;justify-content: center;list-style: none;}
.introduction .catch ul .catch-item {
  width: 100%;
  border-top: 5px solid #FCD004;
  border-bottom: 5px solid #FCD004;
  margin-right: 5rem;
  margin-top: 2.7em;
  position: relative;
}
.introduction .catch ul .catch-item:last-child {margin-right: 0;}
.introduction .catch .catch-item h3 {
  background: #FCD004;
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 10px 0;
  width: 160px;
  text-align: center;
  position: absolute;
  top: -47px;
  left: 0;
  font-size: 1.9rem;
}
.introduction .catch .catch-item .wrap {margin:2rem 0 2rem 0;text-align: center;}
/*警戒・避難情報のステータス*/
.introduction .catch .catch-item .wrap .level {max-width: 180px;margin: 0 1rem 1rem 0;line-height: 35px;}
.introduction .catch .warningttl {width: 100%;padding: 15px 0;font-family: 'Noto Sans JP', sans-serif;font-weight: bold;}
/*テキスト２行の時下*/
.introduction .catch .warningttl span {display: block;font-size: 1.4rem;font-weight: normal;}
/*警戒情報の背景黒*/
.introduction .catch .bg_bl {
  background: #050505;
  color: #FFF000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem;
  line-height: 25px;
}
/*避難情報の背景紫*/
.introduction .catch .bg_pu {
  color: #fff;
  font-size: 1.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  background: #5F1885;
  line-height: 25px;
}
/*避難情報の背景黄色*/
.introduction .catch .bg_yl {
  background: #FFF000;
  color: #050505;
  font-size: 2rem;
  line-height: 25px;
}
/*避難情報の背景赤*/
.introduction .catch .bg_re {
  background: #E50011;
  color: #fff;
  font-size: 1.8rem;
  line-height: 25px;
}
/*警戒・避難情報のテキスト*/
.introduction .catch .catch-item .wrap .detail {
  width: 60%;
  text-align: left;
  line-height: 30px;
  word-break: break-all;
}
.introduction .catch .catch-item .wrap .detail a {
  display: block;
  color: #050505;
  font-size: 1.8rem;
  text-decoration-line: underline;
}
/*気象情報ステータス*/
.introduction .catch ul.keiho .catch-item-rain {width: 31%;margin: 3rem 5px 5rem 5px;}
.introduction .catch div.keiho .bg_re, 
.introduction .catch div.keiho .bg_yl, 
.introduction .catch div.keiho .bg_wh {
  line-height: 20px;
  margin: 10px 0;
  padding: 10px 4px;
  display: block;
  font-size: 1.6rem;
}
.introduction .catch div.keiho .bg_wh {background: #FFF;border: 1px solid #ccc;color: #050505;}
/*気象情報内のボタン*/
div.rainshi {margin-bottom: 2em;}
div.rainshi a {
  display: block;
  background: #FCD004;
  max-width: 280px;
  text-align: center;
  margin: auto;
  text-decoration: none;
  padding: 15px 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #050505;
  font-weight: bold;
  position: relative;
  margin-top: 1rem;
}
div.rainshi a::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  /* left: 0; */
  margin-top: -4px;
  right: 43px;
}
div.rainshi a:hover{opacity: 0.8;}
/* =============================================
movie　動画
============================================= */
.movie {background: #F7F7F7;width: 100%;padding: 4rem 0;}
.moviebox {
  max-width: 550px;
  margin: 0 auto;
  height: auto;
  text-align: center;
  margin-top: 4rem;
}
.moviebox p {margin-bottom: -8px;}
.moviebox .dummy {width: 100%;height: auto;margin: 10px 0 25px 0;}
.moviebox .more_btn {
  display: block;
  background: #FCD004;
  max-width: 280px;
  text-align: center;
  margin: auto;
  text-decoration: none;
  padding: 15px 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #050505;
  font-weight: bold;
  position: relative;
  margin-top: 1rem;
}
.moviebox .more_btn::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  /* left: 0; */
  margin-top: -4px;
  right: 43px
}
.moviebox .more_btn:hover {opacity: 0.8;}
/* =============================================
variouslist　防災、災害関連の記事一覧
============================================= */
.variouslist {width: 100%;padding: 4rem 0;}
.variouslist ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
  align-items: inherit;
}
.variouslist ul li {
  background: #FCD004;
  width: 48%;
  height: auto;
  margin: 0 0 3rem 0;
  position: relative;
}
.variouslist ul li span.listtitle{font-size: 1.7rem; font-weight: bold;margin-bottom: 1rem;padding-bottom: .5rem;}
.variouslist ul li p {padding: 20px;line-height: 27px;}
.variouslist img {width: 100%;vertical-align: bottom;}
.variouslist a {color: #050505;display: block;text-decoration: none;}
.variouslist .thumbnail_box, .latest .thumbnail_box {padding: 20px 0 20px 20px;width: 100%;height: auto;}
.variouslist .thumbnail_box img.thumbnail{width: 35%;display: inline-block;margin-right: 0%;vertical-align: middle;}
.variouslist .thumbnail_box .thumbnail_text {width: 62%;display: inline-block;vertical-align: middle;}
/*レーダー　衛星画像　天気図　アメダス一覧*/
.variouslist ul.raderlist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
  align-items: inherit;
}
.variouslist ul.raderlist li.rader {width: 24%;background: #fff;}
.variouslist ul.raderlist li.rader .rader_box {padding: 20px 8px;}
.variouslist ul.raderlist li.rader .rader_box img {max-width: 100%;height: auto;}
/* =============================================
news ニュース
============================================= */
.news {width: 100%;padding: 4rem 0;background: #F7F7F7;}
.news_wrapper {display: flex;flex-wrap: wrap; padding-top: 1rem;}
.news_wrapper .article_box {width: 65%;margin-right: 5%;}
.news .common_title {margin-bottom: 4rem;}
.news_wrapper ul.newsarticleList {background: #fff;list-style: none;padding: 3rem;}
.news_wrapper ul.newsarticleList li {border-bottom: 2px dotted #FCD004;padding: 2.5rem 0;}
.news_wrapper ul.newsarticleList li:first-child {padding: 0 0 2.5rem 0;}
.news_wrapper ul.newsarticleList li a {display: block;text-decoration: none;}
.news_wrapper ul.newsarticleList li a:hover{opacity: 0.8;}
.news_wrapper ul.newsarticleList li figure {
  width: 48%;
  margin-right: 2%;
  position: relative;
  display: inline-block;
  vertical-align: text-top;
}
.news_wrapper ul.newsarticleList li figure::before {content: "";display: block;padding-top: 56.25%;}
.news_wrapper ul.newsarticleList li figure img {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.news_wrapper ul.newsarticleList li .newsarticletext {width: 47%;display: inline-block;vertical-align: text-top;}
.news_wrapper ul.newsarticleList li .newsarticletext span{
  display: block;
  color: #050505;
  font-size: 1.6rem;
  font-weight: bold;
  overflow: hidden;
  margin-bottom: .5rem;
}
.news_wrapper ul.newsarticleList li .newsarticletext time {color: #DDB80A;font-weight: bold;font-size: 1.4rem;}
.news_wrapper .news_btn {
  display: block;
  max-width: 280px;
  background: #FCD004;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  color: #050505;
  margin: auto;
  margin-top: 2rem;
  position: relative;
}
.news_wrapper .news_btn:after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  /* left: 0; */
  margin-top: -4px;
  right: 60px;
}
.news_wrapper .news_btn:hover {opacity: 0.7;transform-style: 0.5s;}
.news_wrapper .rightbox {width: 30%;margin-top: 1rem;}
.news_wrapper .banner {text-align: center;}
.news_wrapper .banner img {width: 80%;margin: 1.5rem 0;}
.snstweetbox-pc {display: block;}
.snstweetbox-sp {display: none;}
/* =============================================
link　各種リンク
============================================= */
.link {width: 100%;padding: 4rem 0;background-color: #fff;}
.link ul.link_list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem 0 0 0;
  width: 100%;
}
.link ul.link_list li {width: 23%;margin: 1%;background-color: #ddd;text-align: center;}
.link ul.link_list li:hover{opacity: 0.8;}
.link ul.link_list li a {
  display: block;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  padding: 2rem 0;
}
.link ul.link_list img {width: 100%;height: auto;vertical-align: bottom;}
/* =============================================
フッター
============================================= */
footer {background: #000;padding: 5rem 0;}
#footer_navWrap{max-width: 1000px;margin: 0 auto;color: #999999;}
#footer_navWrap figure.f-logo{display: inline-block;max-width: 100%;vertical-align: middle;}
#footer_navWrap p.nudan{display: inline-block;margin-left: 3%;vertical-align: middle;font-size: 1.5rem;}
#footer-logo{border-bottom: 1px solid #333;margin-bottom: 3rem;padding-bottom: 2rem;}
#footer_navWrap a:hover{opacity: 0.8;}
#footer-nav{display: flex;justify-content: space-between;margin-bottom: 3rem;}
#footer-nav .f_nav{width: 16.6%;}
#footer-nav .f_nav h3.foot_tit{color: #fff;font-size: 1.6rem;margin-bottom: .8rem;}
#footer-nav .f_nav h3.foot_tit a{color: #fff;font-size: 1.6rem;text-decoration: none;}
#footer-nav .f_nav ul{list-style: none;}
#footer-nav .f_nav ul li{margin-bottom: .5rem;}
#footer-nav .f_nav ul li:last-child{margin-bottom: 1rem;}
#footer-nav .f_nav ul li a{text-decoration: none;color: #999999;font-size: 1.5rem;}
#footer-subnav{border-bottom: 1px solid #333;padding-bottom: 3rem;margin-bottom: 2rem;}
#footer-subnav ul{display: flex;justify-content: flex-start;list-style: none;}
#footer-subnav ul li:first-child{padding-left: 0;}
#footer-subnav ul li{padding: 0 1.5rem;}
#footer-subnav ul li a{text-decoration: none;color: #999999;font-size: 1.6rem;}

/* =========================================================
下層ページ
============================================================ */
/* ==========================================
共通
============================================= */
.detailpage,.detailpagem {background: #F7F7F7;}
.detailpage h2 {font-size: 2.2rem}
.detailpagem h2 {font-size: 2.2rem;}
.detailpage .det_title h2.h2wide {
  font-size: 2.2rem;
  width: 100%;
  text-align: left;
  position: inherit;
  top: 5px;
}
.detailpage .det_title .common_title{margin-top: -2rem;}
.detailpage .det_title .common_title span {display: none;}
.detailpage .det_title .common_title h2.h2wides {width: 220px;}
.detailpage .introduction {padding: 3rem 0;margin: 0;}
.detailpage .introduction .catch .catch-item h3::after{content: "";}
.detailpage .variouslist{padding: 3rem 0;margin: 0;}
.detailpage .variouslist .thumbnail_box {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 0 1.5rem 1rem;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: auto;
}
.detailpage .thumbnail_box {padding: 20px;}
.detailpage .variouslist .thumbnail_box .thumbnail {max-width: 800px;width: 100%;}

/* ==========================================
警戒・非難ページ keikaidt hinandt 
============================================= */
.keikaidt #content-wrapper,.hinandt #content-wrapper{padding: 4rem 0;}
.keikaidt .infocontents,.hinandt .infocontents{padding:2rem 0;}
.keikaidt .infocontents .introduction{padding:2rem 0;}
.hinandt .infocontents .introduction{padding: 0;}
.keikaidt .infocontents .variouslist,.hinandt .infocontents .variouslist{padding: 0;}
.keikaidt .det_title{margin-top: 4rem;margin-bottom: 3rem;}
.keikaidt .variouslist,.hinandt .variouslist{padding: 3rem 0;}
.keikaidt .introduction,.hinandt .introduction{padding: 3rem 0;}
.detailpage .enbody {margin-left: 1rem;}
.detailpage .introduction .catch ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
/*警戒・避難情報のレベル*/
.detailpage .introduction .catch .catch-item-detail .wrap .level {width: 50%;padding-left: 0;line-height: 35px;}
/*警戒・避難情報の詳細*/
.introduction .catch .catch-item-detail .wrap .detail {
  width: 50%;
  text-align: left;
  padding-left: 1rem;
  line-height: 30px;
}
.detailpage .introduction .catch .catch-item-detail .wrap .detail p {
  font-size: 1.8rem;
  display: block;
  color: #050505;
  word-break: break-all;
}
/*大雨情報*/
.introduction .catch ul.rain {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: row;
}
.introduction .catch ul .catch-item-rain {
  width: 19%;
  margin: 3rem 1% 5rem 0;
  border-top: 3px solid #FCD004;
  background: transparent
}
.introduction .catch .catch-item-rain .wrap {margin: 10px 0;text-align: center;}
.introduction .catch .catch-item-rain .wrap .level {padding-left: 0;width: 100%;}
.introduction .catch .bg_5 {
  background: #050505;
  color: #FFF000;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2rem;
  line-height: 25px;
}
.btop_gray {border-top: 3px solid #f7f7f7;padding: 1em;}
.detailpage .introduction .catch ul .catch-item-detail {
  max-width: 475px;
  margin-right: 30px;
  position: relative;
  background-color: #fff;
  margin-bottom: 2rem;
}
.detailpage .introduction .catch ul .catch-item-detail:nth-child(even) {margin-right: 0;}
.detailpage .introduction .catch .catch-item-detail .wrap {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
/* ==========================================
レーダー　衛星画像　天気図　アメダスページ トップからの遷移
============================================= */
.detailpage #weathermap,.detailpage #rader,.detailpage #amedas,.detailpage #satellite{max-width: 800px;margin: 1rem auto 2rem;}
.detailpage .common_inner_rader {background-color: #fff;padding: 2rem;}
.detailpage .variouslist .iframeWrap{position: relative;padding-top: 56.25%;height: 0;overflow: hidden;}
.detailpage .variouslist .iframeWrap iframe{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: none;
}
.detailpage #weathermap .iframeWrap,.detailpage #amedas .iframeWrap{padding-top: 66.66%;}
/* ==========================================
動画ページ
============================================= */
.detailpagem .movie{padding: 0 0 4rem;}
.detailpagem .moviebox {
  max-width: 760px;
  margin-top: 4rem;
  background-color: #fff;
  padding: 2rem;
}
.detailpagem .moviebox p {margin: 0;}
.detailpagem .moviebox .dummy {margin: .5rem 0;}

/* ==========================================
交通情報
============================================= */
.detailpagem .traffic {}
.detailpagem .traffic h2 {
  font-size: 3.3rem;
  text-align: center;
  padding: 5px 0;
  margin: 1rem 0 3rem 0;
}
.detailpagem .traffic h3 {
  background: #FCD004;
  display: inline-block;
  padding: 10px 12px 7px 12px;
  text-align: center;
  width: 200px;
  font-size: 2.2rem;
  position: absolute;
  top: -39px;
}
.detailpagem .traffic .trafficbox {margin-bottom: 7rem;}
.detailpagem .traffic .trafficbox ul.trafficlist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
  width: 100%;
  margin-top: 3rem;
}
.detailpagem .traffic .trafficbox ul.trafficlist li {width: 100%;height: auto;margin-left: 1rem;}
.detailpagem .traffic .trafficbox ul.trafficlist .onecolumn {width: 100%;height: auto;}
.detailpagem .trafficbox ul li p:before {
  content: '■';
  color: #000;
  font-size: 1.5rem;
  display: inline-block;
}
.detailpagem .trafficbox ul li p a {color: #333;}
.detailpagem .trafficbox ul li p a[target="_blank"]:after {
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  color: #808080;
  font-size: 1.5rem;
  display: inline-block;
  font-weight: 800;
  margin-left: 10px;
  text-decoration: none;
}
/* =============================================
防災タイムライン
============================================= */
.timeline .introduction {padding: 0 0 4rem 0;}
.timelinebox {margin: 0 0 2em 0;}
.timeline_announce {
  color: #000;
  padding: 0.5em 1em;
  text-align: center;
  margin: 2em auto 0;
}
.accordionList {padding-left: 0;list-style: none;}
.accordionList .accordion_item, .accordionList .GeneralLink {margin: 0 0 1em 0;}
/*アコーディオン用*/
.accordionList .accordion_header {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #FCD004;
  color: #333;
  font-size: 1.9rem;
  font-weight: bold;
  padding: 2rem;
  position: relative;
  z-index: +1;
  cursor: pointer;
}
.accordionList .time {width: 10%;}
.accordionList .detail {width: 80%;}
.accordionList .detail .small {font-weight: 600;font-size: 1.5rem;}
.accordionList .GeneralLink a {text-decoration: none;}
/*アコーディオンの中身*/
.accordionList .accordion_item .accordion_inner {
  display: none;
  padding: 30px 30px;
  box-sizing: border-box;
  position: relative;
}
.accordionList .innerbox {height: auto;}
.accordionList .innerbox .i_close::before {
  content: '';
  width: 20px;
  height: 20px;
  border-top: solid 3px #c7c7c7;
  border-right: solid 3px #c7c7c7;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  right: 30px;
  bottom: 0;
}
.accordionList .innerbox .eqinfo {margin: 0;}
.accordionList .innerbox .common_title {display: none;}
/*矢印*/
.accordionList .i_box {position: relative;width: 10%;}
.accordionList .i_box::before {
  content: '';
  width: 20px;
  height: 20px;
  border-top: solid 3px #333;
  border-right: solid 3px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -12px;
  transition: all 0.2s ease-in;
}
/* =============================================================
ここからは全てトップと、下層の警戒、避難情報ページに共通で表示される
自動連係部分
大雨情報
地震情報
=============================================================== */

/* =============================================
自動連携部分
============================================= */
.Series {background-color: #fff;padding: 1em;margin: 1em;}
.TimeDefine {
  background-color: #ffffff;
  padding: 0.5em 0.5em;
  border: 2px solid #FCD004;
  /*    margin-top: 1em;*/
  margin-bottom: 1em;
}
.areaname {font-size: 120%;font-weight: bold;padding-left: 1em;}
.Type {color: #DDB80A;font-weight: bold;}
/* =============================================
大雨危険度通知
============================================= */
.introduction .catch ul li.catch-item {border-bottom: none;}
.introduction .catch ul.rain.keiho {justify-content: center;}
.introduction .catch ul li.catch-item-rain:last-child {/*  margin-right: 0;*/}
.introduction .catch ul li.catch-item-rain h3 {
  background: none;
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  position: absolute;
  top: -47px;
  left: 0;
  font-size: 1.9rem;
}
/*警戒・避難情報のレベル*/
.introduction .catch .catch-item-rain .wrap .level {padding-left: 0;width: 100%;}
/*テキスト２行の時下*/
.introduction .catch .warningttl span {display: block;font-size: 1.5rem;font-weight: normal;}
/*避難情報の背景紫*/
.introduction .catch .bg_4 {
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  background: #5F1885;
  line-height: 25px;
  /*  padding: 20px 0;*/
}
/*避難情報の背景赤*/
.introduction .catch .bg_3 {
  background: #E50011;
  color: #fff;
  font-size: 1.5rem;
  line-height: 25px;
  /*  padding: 20px 0;*/
}
/*避難情報の背景黄色*/
.introduction .catch .bg_2 {
  background: #FFF000;
  color: #050505;
  font-size: 1.5rem;
  line-height: 25px;
  /*  padding: 20px 0;*/
}
/*避難情報の背景白*/
.introduction .catch .bg_1, .introduction .catch .bg_0 {
  background: #FFF;
  /*  color: #fff;*/
  font-size: 1.5rem;
  line-height: 25px;
  /*  padding: 20px 0;*/
  border: solid 1px #F7F7F7
}
/* =============================================
地震情報
============================================= */
.eqinfo {margin: 5em 0;font-weight: 500;}
.introduction .eqinfo .catch ul li.catch-item {border-top: none;}
.introduction .eqinfo .catch ul li.catch-item .wrap .level {width: 40%;display: inline-block;vertical-align: middle;}
.introduction .eqinfo .catch .cenfuku .wrap .level {width: 27%;}
.introduction .eqinfo .catch .catch-item .wrap .detail {width: 59%;display: inline-block;vertical-align: middle;}
.introduction .eqinfo .catch .cenfuku .wrap .detail {width: 70%;}
.introduction .eqinfo .catch ul .catch-item {margin-top: 0;}
.cenfuku .wrap {border: 2px solid #888;}
.cenfuku .wrap .level p {
  background-color: #666;
  color: #fff;
  margin: 12px 0;
  border: 5px solid #aaa;
  font-size: 32px;
  font-weight: normal;
  width: 100px;
}
.prefuku {padding: 1em 1.5em;margin-top: 1em;background-color: #F7F7F7;}
.cenfuku .prefuku p.area {
  font-weight: bold;
  background-color: #fff;
  text-align: center;
  margin-top: 20px;
}
.headline {font-weight: bold;text-align: center;padding-top: 1em;}
.comments {
  /*text-align: center;*/
  font-size: 0.8em;
  margin-top: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.infauth {text-align: center;}
.targetvalid {margin-top: 30px;}
.station {margin-left: 12em;}
.infotype {text-align: center;font-weight: 500;}
.eqinfo .kenmax {text-align: center;font-size: 1.1em;font-weight: bold;/*    color: #E50011;*/}
.eqinfo .catch-item dl {
  display: flex;
  flex-wrap: wrap;
  border-top: none;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-top: 1em;
}
.eqinfo .catch-item dt {
  background: #ddd;
  width: 37%;
  padding: 3px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  font-size: 0.8em;
  font-weight: 500;
}
.eqinfo .catch-item dd {
  background: #fff;
  width: 63%;
  padding: 3px;
  margin: 0;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  font-size: 0.8em;
  font-weight: 500;
}
.introduction .eqinfo .catch .cenfuku .bg_bl {
  background: #050505;
  color: #FFF000;
  font-size: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 30px;
}
.introduction .eqinfo .catch .cenfuku .bg_pu {
  color: #fff;
  background: #5F1885;
  font-size: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 30px;
}
.introduction .eqinfo .catch .cenfuku .bg_re {
  background: #E50011;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 30px;
}
.introduction .eqinfo .catch .cenfuku .bg_yl {
  background: #FFF000;
  color: #050505;
  font-size: 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 30px;
}
.introduction .eqinfo .memo5p {text-align: center;margin-top: 2rem;}
/* =============================================
随時 extra
============================================= */
.extra #content-wrapper{padding: 4rem 0 0;}
.extra .common_title{margin-top: 0;}
.enbody p.area {
  /*border-top: 2px solid #aaa;*/
  font-weight: bold;
  background-color: #fff;
  padding: 0.5em;
  margin-right: 1rem;
  margin-top: 1em;
  letter-spacing: -.9em;
}
.enbody p.area span.ken {
  /*padding-left:1em;*/
  color: #E50011;
  /*    white-space: nowrap;*/
  display: inline-block;
  letter-spacing: normal;
  margin-right: 4%;
}
.enbody p.area span.areal {
  /*padding-left:1em;*/
  color: #FCD004;
  /*white-space: nowrap;*/
  display: inline-block;
  letter-spacing: normal;
  margin-right: 4%;
}
.enbody p.area span.areas {display: inline-block;letter-spacing: normal;margin-right: 4%;}
.enbody p.eqvolarea, .enbody p.eqvoltd {
  font-weight: bold;
  background-color: #fff;
  padding: 0.5em;
  margin-right: 1rem;
  letter-spacing: -.9em;
  font-weight: 500;
}
.enbody .eqvolarea .ken, .enbody .eqvolth .ken, .enbody .eqvoltd .ken {
  /*padding-left:1em;*/
  color: #E50011;
  /*white-space: nowrap;*/
  display: inline-block;
  letter-spacing: normal;
  margin-right: 4%;
  font-weight: 500;
}
.enbody .eqvolarea .areal, .enbody .eqvolth .areal, .enbody .eqvoltd .areal {
  color: #ff4700;
  display: inline-block;
  letter-spacing: normal;
  /*margin-right: 4%;*/
  /*font-weight: 500;*/
  margin: 3px;
}
.enbody .eqvolarea .areas, .enbody .eqvolth .areas, .enbody .eqvoltd .areas {display: inline-block;letter-spacing: normal;}
table {
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 10px 0;
  width: 98%;
}
th.eqvolth, td.eqvoltd {
  border: solid 5px #FCD004;
  border: solid 1px #000;
  background-color: #fff;
  padding: 0.5em;
  text-align: left;
}
th.eqvolth {width: 30%;background: #FCD004;}
th.eqvoltd {width: 70%;}
.enbody td.eqvoltd span.kind {margin-left: 1em;}
.enbody td.eqvoltd .station {margin-left: 0em;padding: .5em .5em .5em 0;border-top: 1px solid #ddd;}
.enbody span.kind {
  margin-left: 10em;
}
.enbody span.eqvolkind {color: #E50011;font-weight: bold;}
.enbody p.kind {margin-left: 10em;}
.bodyinfo {margin-bottom: 2rem;}
.listtitle {padding: 0;display: block;border-bottom: 2px dotted #000;}
hr.infoht {background: #F7F7F7;border-top: 2px dotted #000;margin: 2em 0;}
/*警報と注意報の背景*/
span.keiho54 {
  background-color: #E50011;
  color: #fff;
  padding: 5px 10px;
  margin: 0 1.5% 1.5% 0;
  display: inline-block;
  letter-spacing: normal;
}
span.chui54 {
  background-color: #FCD004;
  padding: 5px 10px;
  margin: 0 1.5% 1.5% 0;
  display: inline-block;
  letter-spacing: normal;
}
dl.areakind {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  margin: 0 0 1.5rem;
  padding: 1rem 0;
}
dl.areakind dt {width: 20%;padding-left: 1rem;font-size: 1.8rem;}
dl.areakind dd {width: 80%;}
span.ken {/*  font-size:140%;*/vertical-align: middle;}
span.areal {text-decoration-line: underline;}
span.areas {display: block;}
.headtit {text-align: center;font-size: 2.8rem;}
.ftmemo {margin-top: 30px;font-size: 1.3rem;}
.common_title .author {text-align: center;padding: 10px 0;}
.localm {padding: 1em 0;margin-top: 3em;}
.localm .localname {}
.localms {border-bottom: solid 0px #000;}
.locals {border-top: solid 3px #F7F7F7; margin-left: 0em;}
.enbody .locals p.area {
  /*width:10em;*/
  min-width: 10em;
  margin-top: 1em;
}
.enbody .locals p.kind {
  /*margin-left: 1em;*/
  /*padding: 0.5em;*/
}
/*-----------------------------------------*/
.introduction .latest p.ltit {
  width: 100%;
  color: #E50011;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  line-height: 1.7rem;
  padding-top: 20px;
}
/*L字*/
.introduction .latest p.linfo {
  width: 100%;
  padding: 12px;
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-weight: 500;
}
.introduction .latest p.ltit:before, .introduction .latest p.ltit:after {
  content: "";
  flex-grow: 1;
  height: 3px; /* 線の太さ */
  background: #E50011; /* 線の色 */
  margin: 0 2em; /* 文字と線の余白 */
}
/*
====================================================================
SP・TB用CSS
====================================================================
*/
@media screen and (min-width: 1px) and (max-width: 1000px) {
/* === 共通 === */
.common_inner, header .inner, #footer_navWrap {width: 93%;}
/* === ヘッダー === */
header .nav_inner li a {letter-spacing: 0;}
/*通常トップページへのボタンPC　イレギュラー*/
.pcgenerally_btn {display: none;}
/*通常トップページへのボタンSP　イレギュラー*/
.spgenerally_btn{display: block;}
.is-fade {
  background: rgba(255, 255, 255, 0.6);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 15px 0;
  position: fixed;
  bottom: 0;
  z-index: 3;
}
.spgenerally_btn a {
  width: 230px;
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0 auto;
  padding: 15px;
  background: #E50011;
  text-decoration: none;
  color: #fff;
  position: relative;
}
.spgenerally_btn a::after{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 19px;
  margin-top: -3px;
}
}/*max-width : 1000px end*/
@media screen and (min-width: 1px) and (max-width: 896px) {
body {font-size: 1.4rem;}
/* === 共通パーツ === */
#content-wrapper{padding: 3.5rem 0 0;}
.introduction{padding: 2rem 0;}
.introduction .catch .catch-item h3 {width: 6em;top: -41px;padding: 10px 0 5px 0;font-size: 1.6rem;}
.common_title span {font-size: 1.3rem;left: 130px;}.common_title h2 {font-size: 1.9rem;padding: 7px 0;top: -33px;width: 6em;}
/* === ヘッダー === */
header {box-shadow: 3px 3px 5px #00000029;}
header .pcnav {display: none;}
header .inner {height: 58px;}
header .inner h1 img {
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 50px;
}
header .inner .titlelogo {width: 150px;}
header .spnav {display: block;}
header #spmenu-bt {z-index: 100;width: 80px;}
header #spmenu-bt img#drower {
  position: absolute;
  right: 0;
  z-index: 100;
  right: 12px;
  top: 17px;
  width: 33px;
  cursor: pointer;
}
header nav#spmenu {
  width: 100%;
  z-index: 5;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.9);
  height: auto;
  overflow: auto;
}
header #spmenu-bt-active {
  background: #bbb;
  width: 57px;
  height: 57px;
  position: absolute;
  right: 0;
}
header nav#spmenu ul li {list-style-type: none;border-bottom: 1px solid #707070;}
header nav#spmenu ul li a {
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  width: 100%;
  display: block;
  color: #fff;
  text-align: left;
  padding: 25px 0px 25px 23px;
  text-decoration: none;
}
/* === フッター === */
footer{padding: 3rem 0 5rem 0;}
#footer_navWrap{text-align: center;}
#footer-logo{border-bottom:none;margin-bottom: 1rem;}
#footer-nav, #footer-subnav {display: none;}
#footer_navWrap figure.f-logo{display: block;margin-bottom: 1rem;}
#footer_navWrap figure.f-logo img{max-width: 50%;}
#footer_navWrap p.nudan,#footer_navWrap p.copyright small{font-size: 1.1rem;}
/*各種リンク*/
.link{padding: 2.5rem 0;}
.link ul.link_list{justify-content: space-around;}
.link ul.link_list li {width: 47%;}
.link ul.link_list li{margin: 0 0 3% 0;}	
.link ul.link_list li a{font-size: 1.3rem;padding: 1.6rem;}
 /* =============================================
トップページ用
============================================= */
/*一番上の情報　災害など*/
.introduction .latest {margin: 0 0 2.5em 0;}
.introduction .latest p {font-size: 1.4rem;padding: 15px 0;width: 80%;}
.introduction .latest .item {font-size: 1.8rem;padding: 5px 20px; top: -33px;}
.introduction .latest .thumbnail_box .thumbnail {max-width: 30%;}
.introduction .latest .thumbnail_box .thumbnail_text {max-width: 63%; margin-left: 2%;}

/*L字*/
.introduction .latest p.linfo{font-size: 1.4rem;}
/*警戒、避難、気象情報*/
.introduction .catch{margin: 0 0 2em 0;}
.introduction .catch ul {flex-direction: column;}
.introduction .catch div.keiho .bg_re, 
.introduction .catch div.keiho .bg_yl, 
.introduction .catch div.keiho .bg_wh {
   width: 46%;
   display: inline-block;
   margin: 2% 1%;
   font-size: 1.3rem;
}
.introduction .catch ul li.catch-item{margin-bottom: 3rem;}
.introduction .catch ul li.catch-item:last-child{margin-bottom: 0;}
.introduction .catch ul li.catch-item .title{margin-top: 2rem;}
.introduction .catch ul li.catch-item .wrap{
  width: 48%;
  display: inline-block;
  margin: 0 1% 2rem 0;
  vertical-align: top;
}
.introduction .catch .catch-item .wrap .level{margin: 0;max-width: 100%;}
.introduction .catch .catch-item .wrap .detail a{font-size: 1.4rem;}
.introduction .catch .warningttl{font-size: 1.6rem;}
.introduction .catch .warningttl span{font-size: 1.4rem;}
.introduction .catch ul.keiho li.catch-item-rain .title{margin-top: 1rem;}
.introduction .catch ul.keiho li.catch-item-rain {width: 100%;margin: 0 1rem 7rem 0;text-align: center;}
.introduction .catch ul.keiho li.catch-item-rain:last-child {margin: 0 1rem 3rem 0;}	
/*津波、地震情報*/
.introduction .eqinfo .catch{margin-bottom: 2em;}
.introduction .eqinfo .catch  ul li.catch-item{margin-bottom: 0;}
.introduction .eqinfo .catch  ul li.catch-item .wrap {width: 100%;}
.introduction .eqinfo .catch  ul li.catch-item .wrap .level, 
.introduction .eqinfo .catch  ul li.catch-item .wrap .detail { width: 48%;display: inline-block;vertical-align: middle;margin-right: 2%;}
/*災害、防災関連の記事一覧*/
.variouslist ul li {width: 100%;margin: 0 0 2rem 0;}
.variouslist ul li span.listtitle{font-size: 1.5rem;}
.variouslist .thumbnail_box, .latest .thumbnail_box {height: auto;}
/*レーダー、衛星画像、天気図、アメダス一覧*/
.variouslist ul.raderlist li.rader {width: 48%;}
.variouslist ul.raderlist li.rader .rader_box{padding: 0;}
/*動画*/
.moviebox .dummy {position: relative;padding-top: 56.25%;overflow: hidden;}
.moviebox .dummy iframe {position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
/*ニュース*/
.news .common_title{margin-bottom: 2rem;}
.news_wrapper .article_box {width: 100%;margin-right: 0;}
.news_wrapper ul.newsarticleList{padding:2rem;}
.news_wrapper ul.newsarticleList li .newsarticletext span{font-size: 1.3rem;}
.news_wrapper .rightbox {width: 100%;text-align: center;}
.snstweetbox-pc {display: none;}
.snstweetbox-sp {display: block;margin: auto;width: 100%;}
.news_wrapper .news_btn{margin-bottom: 3rem;}
 /* =============================================
下層ページ用 detailpage
============================================= */
/*共通*/
.detailpagem .traffic h2 {font-size: 2.2rem;margin: 0 0 1rem 0;}
.detailpagem .traffic h3 {font-size: 1.6rem;padding: 10px 0 5px 0;width: 9em;top: -36px;}
.detailpage .det_title h2.h2wide{font-size: 1.8rem;padding: 1rem;}
.detailpage .variouslist .thumbnail_box{padding: 0 0 1rem;}
.detailpage .enbody{margin-left: 0;}
/*警戒、避難情報*/
.keikaidt #content-wrapper, .hinandt #content-wrapper{padding: 2rem 0;}
.keikaidt .infocontents .variouslist, .hinandt .infocontents .variouslist{padding: 3rem 0;}
.keikaidt .det_title{margin-bottom: 1rem;}
.detailpage .introduction .catch ul .catch-item-rain {width: 100%;margin: 1rem 0 5rem 0;}
.detailpage .introduction .catch ul .catch-item-rain .title {margin-top: 1rem;}
.detailpage .introduction .catch .catch-item-rain .wrap {width: 48%;display: inline-block;margin:0 1% 2% 0;vertical-align: top;}
.detailpage .introduction .level .warningttl {min-height: 0;padding: 12px 0;}
.detailpage .introduction .catch .catch-item .wrap {width: 49%;display: inline-block;vertical-align: top;}
.detailpage .introduction .catch .catch-item .wrap .level {padding: 0 .8rem 0 0;}
.detailpage .introduction .catch .catch-item .wrap .level, .introduction .catch .catch-item .wrap .detail {width: 100%;}
/*気象警報、注意報　extra*/
.extra #content-wrapper{padding:  2rem 0 0;}
.headtit{font-size: 2.2rem;}
dl.areakind dt{font-size: 1.6rem;width: 35%;margin-bottom: .5rem;}
dl.areakind dd{width: 65%;}
dl.areakind dd span.keiho54{margin: 0 2% 3% 0;padding: 5px 4px;}
dl.areakind dd span.chui54{margin: 0 2% 3% 0;padding: 5px 4px;}
/* レーダー　衛星画像　天気図　アメダスページ トップからの遷移 */
.detailpage #weathermap, .detailpage #rader, .detailpage #amedas, .detailpage #satellite{margin:  0 auto;}
.detailpage .common_inner_rader{padding: 1rem;}
/*動画*/
.detailpagem .moviebox{padding: 1.5rem;}
.detailpagem .moviebox .dummy{margin: 0;}
/*各種情報*/
.detailpagem .traffic .trafficbox ul.trafficlist .onecolumn{margin-left: 0;}
/*交通情報*/
.detailpagem .traffic .trafficbox ul.trafficlist{margin-top: 1.5rem;}
.detailpagem .traffic .trafficbox ul.trafficlist li {width: 46%;margin-left: 0;}
/*タイムライン*/
.accordionList .accordion_header {font-size: 1.4rem;padding: 1rem;}
.accordionList .time {width: 18%;font-size: 1.6rem;margin-right: 2%;}
.accordionList .detail {width: 72%;font-size: 1.6rem;}
.accordionList .detail .small{font-size:1.3rem;}
.accordionList .i_box{width: 7%;}
.accordionList .i_box::before{width: 15px;height: 15px; right: 5px;border-top: solid 2px #333;border-right: solid 2px #333;}
.accordionList .innerbox .i_close::before{width: 15px;height: 15px;right: 15px;}
} /*max-width:896px end*/