/**
 * 【山口防災】トップページ用css
 * ------
 * 更新履歴
 * [00] 新規作成
 * [01] 2017.05.17 SGK 地震・津波地図の県内影響有無個別対応
 * [02] 2017.07.13 SGK 災害系地図の色塗りパターンを追加。合わせてcssクラス名をわかりやすいものに見直し。
 * [03] 2017.08.23 SGK 地図周りのパーツが、県内の範囲に重ならないようレイアウトを調整
 * [04] 2022.02.05 避難発令種別を全体的に見直し（レベル表記追加、種別6追加・種別3削除、名称表記・色変更）
 */
/*[03]発表時刻欄の左上余白を狭くする*/
.disapre-map-content-info-time {
  top: 5px;
  left: 5px;
}
/*[03]地震発生日時欄は右下余白を狭くする*/
.disapre-map-content-occured-time {
  right:5px;
}
#evac-map #tsunami_ev,
#shelter-map #tsunami_sh,
#damage-map #tsunami_dm,
#headquarter-map #tsunami_hq,
#evac-map #text_ev,
#shelter-map #text_sh,
#damage-map #text_dm,
#headquarter-map #text_hq {
  display: none;
}
#disapre-evac-info,
#disapre-shelter-info,
#disapre-damage-info,
#disapre-headquarter-info {
  display: none;
}
/* 凡例 */
ul.disaster-legend li:not(.kindName) {
  display:block;/*[04]レベル表記追加のためレイアウト調整*/
}
ul.disaster-legend li:not(.kindName):before {
  content: '';
  margin-right: 3px;
  padding: 0 6px;
  vertical-align: middle;
  font-size: 8px;
}
/* 避難発令 */
/*[04]避難発令種別を全体的に見直し（種別6追加・種別3削除、色変更）*/
ul.disaster-legend li.evacLv6:before{
  background-color: #0C000C;
}
ul.disaster-legend li.evacLv4:before{
  background-color: #AA00AA;
}
ul.disaster-legend li.evacLv2:before{
  background-color: #FF2800;
}
.evacLv6 {
  fill: #0C000C !important;
}
.evacLv4 {
  fill: #AA00AA !important;
}
.evacLv2 {
  fill: #FF2800 !important;
}
/* 避難所開設 */
/* [02]全体的にcssクラス名をわかりやすいものに変更 */
ul.disaster-legend li.shelterLv3:before{
  background-color: #E42222;
}
ul.disaster-legend li.shelterLv2:before{
  background-color: #FF8F8F;
}
ul.disaster-legend li.shelterLv1:before{
  background-color: #FFDDDD;
}
ul.disaster-legend li.shelterOpen:before{/*[02]避難所開設中のパターン追加*/
  background-color: #FFED87;
}
.shelterLv3 {
  fill: #E42222 !important;
}
.shelterLv2 {
  fill: #FF8F8F !important;
}
.shelterLv1 {
  fill: #FFDDDD !important;
}
.shelterOpen {/*[02]避難所開設中のパターン追加*/
  fill: #FFED87 !important;
}
/* 被害 */
ul.disaster-legend li.damageLv3:before{
  background-color: #E42222;
}
ul.disaster-legend li.damageLv2:before{
  background-color: #FF8F8F;
}
ul.disaster-legend li.damageLv1:before{
  background-color: #FFDDDD;
}
ul.disaster-legend li.houseDamage:before{/*[02]住家被害ありのパターン追加*/
  background-color: #FFED87;
}
.damageLv3 {
  fill: #E42222 !important;
}
.damageLv2 {
  fill: #FF8F8F !important;
}
.damageLv1 {
  fill: #FFDDDD !important;
}
.houseDamage {/*[02]住家被害ありのパターン追加*/
  fill: #FFED87 !important;
}
/* 本部設置 */
#disapre-headquarter-info .prefData{
  width: auto;
  line-height: 1.6;
  font-size: 1.4rem;
  position: absolute;
  top:auto;/*[03]右下に配置*/
  bottom: 5px;/*[03]右下に配置*/
  right: 5px;/*[03]右上の余白を調整*/
  background-color: #fff;
  padding:0 5px 5px 5px;/*[03]余白を調整*/
  border-radius: 4px;
  text-align: center;/*[03]2行になるのでセンタリング*/
}
#disapre-headquarter-info .prefData span{
  display: block;/*[03]2行になるように表示*/
  padding: 0 10px;
  min-width: 100px;
  text-align: center;
}
.disapre-popup .disapre-popup-list label{
  width: 100%;
}
ul.disaster-legend li.headquarterLv4:before,
.disapre-popup .disapre-popup-list.headquarterLv4 label,
#disapre-headquarter-info .prefData span.headquarterLv4{
  background-color: #E42222;
  color: #fff;
}
ul.disaster-legend li.headquarterLv3:before,
.disapre-popup .disapre-popup-list.headquarterLv3 label,
#disapre-headquarter-info .prefData span.headquarterLv3{
  background-color: #FFA21A;
  color: #000;
}
ul.disaster-legend li.headquarterLv2:before,
.disapre-popup .disapre-popup-list.headquarterLv2 label,
#disapre-headquarter-info .prefData span.headquarterLv2{
  background-color: #FFED87;
  color: #000;
}
.headquarterLv4 {
  fill: #E42222 !important;
}
.headquarterLv3 {
  fill: #FFA21A !important;
}
.headquarterLv2 {
  fill: #FFED87 !important;
}
/* [01]地震・津波の発表欄 */
#disapre-bigwave-info .disapre-map-content-info-time label ,
#disapre-earthquake-info .disapre-map-content-info-time label {
  width: auto;/*[03]1行で表示する*/
  display: inline-block;
}
/* [01]地震・津波の県内影響有無欄*/
.disapre-map-content-info-link {
  position: absolute;
  top:auto;/*[03]右下に配置*/
  bottom: 5px;/*[03]右下に配置*/
  right: 5px;/*[03]右下に配置*/
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.5);
  vertical-align: middle;
  line-height: 1.4rem;
  font-size: 1.4rem;
  text-align: center;
  width: auto;/*[03]サイズ調整*/
}