@charset "UTF-8";


/***********************************************************************
 * slider
 ********************************************************************** */

 .area-weather-area .weather-area-list{
   display: flex;
   font-weight: bold;
   height: 40px;
   font-size: 12px;
   align-items: center;
   padding: 20px 10px;
 }

 .area-weather-area .weather-area-list li{
   flex: 1;
   text-align: center;
   display: table;
   height: 100%;
   width: 33%;
   background-color: #eee;
   color: #666;
   margin: auto;
 }

 .area-weather-area .weather-area-list li:first-child{
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border-right: solid 1px #ddd;
 }

 .area-weather-area .weather-area-list li:last-child{
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-left: solid 1px #ddd;
 }

 .area-weather-area .weather-area-list .current{
   background-color: #2258a2;
   color: #fff;
 }

 .area-weather-area .weather-area-list li span{
   display: table-cell;
   vertical-align: middle;
   height: 100%;
 }
 .area-weather-area .weather-area-list li span{
   display: table-cell;
   vertical-align: middle;
   height: 100%;
 }
 .area-weather-area .weather-area-list li span .sub{
    display: inline-block;
    font-size: 9px;
    text-align: center;
    height: auto;
 }

 /* -------------------------------------
  天気
 -------------------------------------- */

.tenkiPlacesTtltime{
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: bold;
  color: #666;
}

.weather-wrapper{
  margin-bottom: 20px;
}

.weather-wrapper > h4{
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #2258a2;
  padding: 15px 0 0 20px;
}

.weather-wrapper > div{
  width: calc(100% -30px);
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 20px 15px;
  border-bottom: solid 1px #ddd;
}

.weather-wrapper div[class^="tenki"]{
  height: 70px;
  margin: 10px 0;
}

.tenkiData
,.tenkiRain{
  display: block;
  flex: 1;
}

.tenkiData{
  margin-right: 20px;
}

.tenkiData tbody
,.tenkiRain tbody{
  display: table;
  width: 100%;
}

.tenkiRain{
  margin-top: -23px;
}

.tenkiData .saikou
,.tenkiData2 .saikou {
  color: #f44336;
  padding: 0;
}

.tenkiData .saitei
,.tenkiData2 .saitei {
  color: #2258a2;
  padding: 5px 0 0;
}

.tenkiData tr:first-child td {
  font-weight: bold;
}

.tenkiData td {
  text-align: center;
  padding: 8px 0;
  line-height: 1.5;
}

.tenkiData td div[class^="tenki"]{
  transform: scale(1.5);
}


.tenkiRain caption {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: #666;
}

.tenkiRain th {
  background-color: #eef2f8;
  color: #666;
  padding: 8px;
  border: solid 1px #ddd;
  text-align: center;
}

.tenkiRain td {
  padding: 8px;
  border: solid 1px #ddd;
  text-align: center;
}

.tenkiRain tr td:first-child::after {
  content:"時";
  font-size: 10px;
}

.tenkiRain tr td:last-child::after {
  content:"％";
  font-size: 10px;
}


/* -------------------------------------
10日間天気
-------------------------------------- */

/*縦並び対応*/
.weather_table_places.week
,.weather_table_places.week tbody
,.weather_table_places.week tr
,.weather_table_places.week th
,.weather_table_places.week td{
  display: block;
}

.weather_table_places.week tr{
  width: 23%;
  float: left;
}

.weather_table_places.week tr:nth-child(4n+2){
  width: 45%;
}

.weather_table_places.week tr:nth-child(4n+3)
,.weather_table_places.week tr:nth-child(4n){
  width: 16%;
}

.weather_table_places.week th
,.weather_table_places.week td{
  height: 50px;

  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}


.weather_table_places.week tbody::after{
  content: "";
  display: block;
  clear: both;
}

.weather_table_places.week {
  width: 100%;
  margin: 0 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.weather_table_places.week tbody {
  border-top:1px solid #ddd;
}

.weather_table_places.week tbody th,
.weather_table_places.week tbody td{
	text-align:center;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
	padding:8px;
}

.weather_table_places.week tbody tr:nth-child(4n) td{
  border-right: none;
}

.weather_table_places.week tbody tr.head th{
	text-align:center;
	background:#eef2f8;
	padding:8px 4px;
  width: calc(100% - 4px);
  line-height: 1.6;

  flex-direction: column;
}

.weather_table_places.week tbody tr.head td{
  width: calc(100% - 16px);
}

.weather_table_places.week tr.head th .sun
,.weather_table_places.week td .saikou{
	color:#f44336;
}

.weather_table_places.week .head th .sat
,.weather_table_places.week td .saitei{
	color:#2258a2;
}


.weather_table_places.week .head th{
  color: #333;
}

.weather_table_places.week tr:nth-child(4n-2) td{
  font-weight: bold;
  flex-wrap: nowrap;
  padding-left: 64px;
  position: relative;
  line-height: 1.5;
}

.weather_table_places.week tr:nth-child(4n-1) td{
  flex-direction: column;
  line-height: 1.5;
}

.weather_table_places.week td .saikou::after
,.weather_table_places.week td .saitei::after{
  content:"℃";
  font-size: 10px;
}

.weather_table_places.week tr:nth-child(4n) td::after{
  content:"％";
  font-size: 10px;
}

.weather_table_places.week div[class^="tenki"]{
  height: 60px;
  width: 60px;
  display: block;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
  transform: scale(0.8);
}

/* -------------------------------------
 曜日の設定
-------------------------------------- */

.maximum,.holiday{ color:#f44336; }
.minimum,.saturday{ color:#2258a2; }




 /* -------------------------------------
  雨雲の動き
 -------------------------------------- */

.tab_nimbus {
  width:100%;
}
.tab_nimbus ul.box {
  display: flex;
  font-weight: bold;
  height: 40px;
  font-size: 12px;
  align-items: center;
  padding: 20px 10px;
}
.tab_nimbus ul.box li{
  flex: 1;
  text-align: center;
  display: table;
  height: 100%;
  width: 50%;
  background-color: #eee;
  color: #666;
  margin: auto;
}
.tab_nimbus ul.box li:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.tab_nimbus ul.box li:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.mainNimbus .tab_nimbus ul.box li.on
,.afterNimbus .tab_nimbus ul.box li.on{
  background-color: #2258a2;
  color: #fff;
}

.tab_nimbus ul.box li a{
  display: block;
  padding: 10px;
  text-align: center;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.tab_nimbus ul.box li a img{
	margin:0 auto;
width: 100%;
height: auto;
}

.mainNimbus p.day,
.afterNimbus p.day{
  display: block;
  padding: 8px 10px;
  font-size: 15px;
  font-weight: bold;
  background-color: #eee;
  color: #666;
}
.mainNimbus img,
.afterNimbus img{
	display:block;
	text-align:center;
	margin:10px auto;
}
.mainNimbus .tenkiNimbusAnimeLegend,
.afterNimbus .tenkiNimbusAnimeLegend{
	padding:5px;
	width:95%;
	margin:5px auto;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation01,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation01 {
	color:#33d9d9;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation02,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation02 {
	color:#08bbdb;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation03,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation03 {
	color:#0597e0;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation04,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation04 {
	color:#056de8;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation05,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation05 {
	color:#0535dd;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation06,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation06 {
	color:#e1e103;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation07,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation07 {
	color:#d98c30;
}
.mainNimbus .tenkiNimbusAnimeLegend span.Precipitation08,
.afterNimbus .tenkiNimbusAnimeLegend span.Precipitation08 {
	color:#dd3333;
}
.mainNimbus .image_next_area,
.afterNimbus .image_next_area{
	padding:5px;
	text-align:center;
	color:#eee;
	letter-spacing: 0.5em;
	font-size:140%;
}
.mainNimbus .image_next_area .act
,.afterNimbus .image_next_area .act{
	color:#2258a2;
}


#mainNimbus_1 .weatherImg li{
	display:none;
}
#mainNimbus_1 .weatherImg li.current{
	display:block;
}
#mainNimbus_1 .layout p.off a
,#mainNimbus_1 .layout p.off a::after{
	color:#E7E7E7;
  border-color:#E7E7E7;
}

.box.mtb15{
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  padding: 20px 10px;
}

.box.mtb15 > div{
  flex: 1;
}

.box.mtb15 > div.boxFlex{
  flex: 2;
}

.bgBlue.boxFlex{
  font-size: 15px;
  text-align: center;
  color: #333;
  font-weight: bold;
}

.button.bordered{
  display: block;
  flex: 1;
  padding: 12px 10px;
  font-size: 15px;
  position: relative;
  border-radius: 5px;
  border: solid 1px #ddd;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
  text-align: center;
  color: #2258a2;
  font-weight: bold;
}

.button.bordered.back::before{
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0px;
  border-top: solid 2px #2258a2;
  border-right: solid 2px #2258a2;
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  position: absolute;
  top: 47%;
  left: 11px;
}

.button.bordered.next::after{
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0px;
  border-top: solid 2px #2258a2;
  border-right: solid 2px #2258a2;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 47%;
  right: 11px;
}



/* -------------------------------------
表示エリア
-------------------------------------- */

.areaContents h3{
  display: block;
  padding: 8px 10px;
  font-size: 15px;
  font-weight: bold;
  background-color: #eee;
  color: #666;
}

.areaContents h3 img{
  zoom:0.5;
}

.areaContents .title{
  font-size: 15px;
  border-bottom: solid 1px #ddd;
  display: block;
  position: relative;
}
.areaContents .title a{
  display: block;
  padding: 10px 20px 10px 10px;
  line-height: 1.5rem;
  font-weight: bold;
  color: #333;
}
.areaContents .title a::after{
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0px;
  border-top: solid 2px #2258a2;
  border-right: solid 2px #2258a2;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 11px;
  transition: all 0.3s;
}
.areaContents .title a.is-open::after{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 19px;
}
.title img {
  zoom: 1;
  height: 28px;
}

.weather_table {
  width:100%;
}
.weather_table th{
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-align:left;
	background:url("/common/sp/img/icon_btn_arrow.png") no-repeat right center;
	background-size:18px auto;
	width:40%;
	vertical-align:middle;
}
.weather_table th a {
	display: block;
	padding:12px 12px 12px 24px;
  position: relative;
}
.weather_table th a::after{
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0px;
  border-top: solid 2px #2258a2;
  border-right: solid 2px #2258a2;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 47%;
  right: 11px;
  transition: all 0.3s;
}

table.weather_table td{
	border-bottom:1px solid #ccc;
	padding:0 5px;
	vertical-align:middle;
}
.areaContents td img {
  zoom: 1;
  width: 44px;
}

table.weather_table td.warning{
	width:50%;
	padding:10px;
}
table.weather_table td.syosai{
	width:10%;
}
.tenkiState00, .tenkiState01, .tenkiState02, .tenkiState03 {
  background: none repeat scroll 0 0 #CC3333;
  color: #FFFFFF;
  display: inline-block;
  margin: 1px 0 1px 5px;
  padding: 3px 9px 3px;
}
.tenkiState00 {
  background: none repeat scroll 0 0 #C800FF;
  color: #fff;
}
.tenkiState01 {
  background: none repeat scroll 0 0 #CC3333;
  color: #fff;
}
.tenkiState02 {
  background: none repeat scroll 0 0 #F3C100;
  color: #333333;
}
.tenkiState03 {
  display:none;
}


.common-tab-contents .tenki_check {
	margin:10px;
  height: auto;
}
.common-tab-contents .tenki_check img{
 zoom:0.5;
}
.common-tab-contents .tenki_check p{
	background:#E2F0FF;
	border:1px solid #bdbdbd;
	width:99%;
	margin:5px auto 10px;
	padding:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


 /* -------------------------------------
  24時間天気
 -------------------------------------- */

.detail-weather-wrapper h2{
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  padding: 12px 11px;
  border-bottom: solid 1px #ddd;
}

.detail-weather-wrapper h2 .back{
  float: right;
  padding-right: 20px;
  position: relative;
}
.detail-weather-wrapper h2 .back::after{
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0px;
  border-top: solid 2px #666;
  border-right: solid 2px #666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 40%;
  right: 5px;
  transition: all 0.3s;
}

.detail-weather-wrapper .memo{
  display: block;
  padding: 0px 10px 8px;
  font-size: 12px;
  color: #666;
}

.detail-weather-wrapper .weather_table_places {
	width:100%;
	margin:20px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.detail-weather-wrapper .weather_table_places thead th{
	text-align:left;
	background:#eef2f8;
	padding:8px;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
}
.detail-weather-wrapper .weather_table_places tbody th{
	padding:8px 3px;
	vertical-align:middle;
	background:#F5F5F5;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
	width:16%;
	height:60px;
}
.detail-weather-wrapper .weather_table_places tbody th
,.detail-weather-wrapper .weather_table_places tbody td{
	vertical-align:middle;
	text-align:center;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
}
.detail-weather-wrapper .weather_table_places tbody th.tenkiClose{
	background:#ccc;
}
.detail-weather-wrapper .weather_table_places tbody td {
	width:28%;
	padding:8px;
}


/* -------------------------------------
 見出しタブ
-------------------------------------- */

.select-list{
  display: flex;
  border-bottom: 4px solid #2258a2;
}

.select-list li{
  flex: 1;
  height: 46px;
  background-color: #eef2f8;
  color: #2258a2;
  text-align: center;
  border-right: solid 2px #fff;
}

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

.select-list .current{
  color: #fff;
  background-color: #2258a2;
}

.select-list li .link-wrapper{
  display: table;
  width: 100%;
}

.select-list li a{
  display: table-cell;
  vertical-align: middle;
  height: 46px;
  font-size: 14px;
  padding-left: 45px;
  position: relative;
}

.select-list .icn-weather a::before{
  content: "";
  display: inline-block;
  background: url(../../images/svg/icn-weather.svg) no-repeat;
  background-size: contain;
  width: 25px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  margin: auto;
}
.select-list .icn-weather.current a::before{
  content: "";
  background: url(../../images/svg/icn-weather-current.svg) no-repeat;
  background-size: contain;
}

.select-list .icn-zisin a::before{
  content: "";
  display: inline-block;
  background: url(../../images/svg/icn-zisin.svg) no-repeat;
  background-size: contain;
  width: 24px;
  height: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  margin: auto;
}
.select-list .icn-zisin.current a::before{
  content: "";
  background: url(../../images/svg/icn-zisin-current.svg) no-repeat;
  background-size: contain;
}

.select-list .icn-tsunami a::before{
  content: "";
  display: inline-block;
  background: url(../../images/svg/icn-tsunami.svg) no-repeat;
  background-size: contain;
  width: 23px;
  height: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18%;
  margin: auto;
}
.select-list .icn-tsunami.current a::before{
  content: "";
  background: url(../../images/svg/icn-tsunami-current.svg) no-repeat;
  background-size: contain;
}


.select-list li.icn-hinan{
  background-color: #eee;
  color: #666;
}
.select-list li.icn-hinan a{
  padding-left: 20px;
  text-align: center;
}
.select-list li.icn-hinan a .sub{
  display: block;
  font-size: 8px;
}
.select-list .icn-hinan a::before{
  content: "";
  display: inline-block;
  background: url(../../images/svg/icn-hinan.svg) no-repeat;
  background-size: contain;
  width: 18px;
  height: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7%;
  margin: auto;
}


/* -------------------------------------
 花粉
-------------------------------------- */

.kafun-list {
  margin: 15px 20px;
}

.kafun-list > li{
  width: 50%;
}

.kafun-list .area-name{
  font-size: 15px;
}

.kafun-list .kafun-icn{
  display: inline-block;
  height: auto;
  width: 92px;
  min-height: 80px;
  margin: 20px auto;
}

.kafun-list .kafun-icn.kafun1{
 background: url(../../images/common/img-kafun1.png) no-repeat;
 background-size: contain;
 background-position: bottom;
 width: 92px;
}
.kafun-list .kafun-icn.kafun2{
 background: url(../../images/common/img-kafun2.png) no-repeat;
 background-size: contain;
 background-position: bottom;
}
.kafun-list .kafun-icn.kafun3{
 background: url(../../images/common/img-kafun3.png) no-repeat;
 background-size: contain;
 background-position: bottom;
 width: 98px;
}
.kafun-list .kafun-icn.kafun4{
 background: url(../../images/common/img-kafun4.png) no-repeat;
 background-size: contain;
 background-position: bottom;
 width: 75px;
}

/* -------------------------------------
 警報
-------------------------------------- */
p.attention {
	background:#CC3333;
	color:#fff;
	text-align:center;
	padding:10px;
	margin:10px 0;
}
p.attention span.bold{
	padding:0 5px;
}

/* -------------------------------------
特別警報
-------------------------------------- */
.attention_tokubetsu {
background: #C800FF;
color:#ffffff;
text-align:center;
padding: 12px 0px;
margin-top:10px;
}

.attention_tokubetsu p{
font-weight: bold;
font-size:90%;
}

.attention_tokubetsu_setsumei{
width:90%;
margin:10px auto 0px auto;
background-color:#ffffff;
text-align:center;
}


.attention_tokubetsu_text1{
clear:both;
color:#C800FF;
text-align:center;
font-weight:bold;
padding:8px 0px;
font-size:90%;
}

.attention_tokubetsu_text2{
clear:both;
padding-bottom:8px;
color:#666666;
text-align:center;
line-height:0.7;
font-weight:bold;
text-align:center;
font-size:85%;
display:block;
}

/* ------------------------------------
地震・津波情報アラート表示
------------------------------------ */
.tenki_detail_jishin_alart{
background-color:#F9EC30;
width:100%;
clear:both;
margin-top:5px;
text-align:center;
}

.tenki_detail_jishin_alart img{
padding:0 auto;
width:630px;
}


/* ------------------------------------
地震の追加CSS
------------------------------------ */
.jishin-joho-wrapper{
    position:relative;
    }

@media screen and (max-width: 599px) {
    .jishin-joho-appendix{
    position:absolute;
    top:71px;
    right:10px;
    font-size:14px;
    color:#ffffff;
    font-weight:bold;    
    }
}

@media screen and (min-width: 600px) {
    .jishin-joho-appendix{
    position:absolute;
    top:87px;
    right:20px;
    font-size:16px;
    color:#ffffff;
    font-weight:bold;    
    }
}

@media screen and (min-width: 1300px) {
    .jishin-joho-appendix{
    right:1000px;    
    }
}

/* ------------------------------------
日付文字のはみだし防止対応
------------------------------------ */
.weather_table_places th{
    font-size:90%;
}

/* ------------------------------------
注意報の表示崩れに対応　20171227
------------------------------------ */
.detail-weather-wrapper .cautions{
    display: inline-block;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #666;

.tenkiState00　+　.cautions:before,
.tenkiState01　+　.cautions:before,
.tenkiState02　+　.cautions:before,
.tenkiState03　+　.cautions:before{
	content: "\a" ;
	white-space: pre ; 
}