/**
 * 【山口防災】避難勧告等発令状況用css
 * ------
 * 更新履歴
 * [00] 新規作成
 * [02] 2022.02.05 避難発令種別を全体的に見直し（レベル表記追加、種別6追加・種別3削除、名称表記・色変更）
 *					個別cssをdisapre_sp.cssより移植
 */

/*********************
	[02]避難情報
**********************/
.disapre-refuge-status-area-wrapper label {
  display: block;
  padding: 5px 0 9px 10px;
  font-weight: bold;
  font-size: 1.4rem;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-list {
  width: 100%;
  font-size: 0;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-list > li {
  padding-right: 20px;
  margin: 0;
  border-bottom: 1px solid #386598;
  position: relative;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-list > li:after {
  content: " ";
  position: absolute;
  display: inline-block;
  right: 0;
  top: calc(50% - 5px);
  width: 6px;
  height: 10px;
  margin-right: 5px;
  background: url('../common/img/sp-link.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-list > li:first-child {
  border-top: 1px solid #386598;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-link {
  width: 100%;
  padding: 3px 0;
  padding-left: 5px;
  background-color: #eaf2f9;
  font-size: 1.4rem;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status,
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter {
  display: table-cell;
  vertical-align: middle;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status {
  padding: 4px 0;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul {
  border-right: 1px solid #b4b4b5;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul li {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  text-align: center;
  border-radius: 5px;
  font-size: 1.2rem;
  line-height: 1.4rem;
  padding: 0.3rem;
  opacity: 0.2;/* 半透過を基本にして、ONの場合に透過なしにする */
}
/*種別6：レベル5：緊急安全確保*/
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul li.disapre-evacuation-occurrence {
  background-color: #0C000C;
  color: #ffffff;
}
/*種別4：レベル4：避難指示*/
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul li.disapre-evacuation-directive {
  background-color: #AA00AA;
  color: #ffffff;
}
/*種別2：レベル3：高齢者等避難*/
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul li.disapre-evacuation-prepared {
  background-color: #FF2800;
  color: #ffffff;
}
/*種別0：避難解除*/
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul li.disapre-evacuation-release {
  background-color: #3e71b8;
  color: #ffffff;
  width: 200px;
  opacity:1;
  line-height: 2.8rem;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-status ul li.disapre-refuge-status-on {
  opacity: 1;/* ONの場合に透過なしにする */
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter {
  width: 73px;
  padding-left: 10px;
  font-size: 1.4rem;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter p {
  color: #232323;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-closed p:before {
  content: url("../../../res/img/shelter-closed-small.png");
  margin-right: 7px;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-not-open p:before {
  content: url("../../../res/img/shelter-not-open-small.png");
  margin-right: 7px;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-open p:before {
  content: url("../../../res/img/shelter-open-small.png");
  margin-right: 7px;
}

.disapre-refuge-status-area-wrapper ul li:first-child{
  margin-top: -1px;
}
/* 避難所開設状況 */
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-closed p:before {
  content: url("../../../res/img/shelter-not-open-small.png");
  margin-right: 7px;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-not-open p:before {
  content: none;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-not-open {
  font-size: 0;
}
.disapre-refuge-status-area-wrapper .disapre-refuge-status-table .disapre-refuge-shelter.disapre-refuge-status-open p:before {
  content: url("../../../res/img/shelter-open-small.png");
  margin-right: 7px;
}