@charset "UTF-8";
.portal-wrap {
  background-color: #ECECEC;
  padding: 16px 2vw;
  font-size:1rem;
}
.portal {
  height:100%;
  width: 100%;
  display: grid;
  grid-auto-rows: minmax(80px, auto);
  grid-template-columns: repeat(6, calc(100% / 6));
  justify-items: center;
  align-items: center;
}
.tenki_emgcy .portal {
  grid-template-columns: repeat(3, calc(100% / 3));
}
.portal.maint {
  grid-template-columns: none!important;
}
.portal-item {
  box-sizing:border-box;
  border: solid 1px #fff;
  display: flex;
  width: calc(100% - 8px);
  height:calc(100% - 8px);
  padding: .75em;
  gap:.5em;
  align-items: center;
  background-color: #fff;
}
.portal-item.portal-area {
  background-color:transparent;
  border:0;
  justify-content: center;
}
.portal-item > img {
  height:clamp(30px,3vw,38px );
  width: auto;
  flex-shrink:0;
}
.portal-item-right {
  width: 100%;
  overflow: hidden;
  border-left: 1px solid #aaa;
  padding-left: .5em;
}
.portal-item .select-wrapper {
  width: clamp(17em,70%,70% );
  font-size:clamp(0.8em,3vw,1em);
  position: relative;
  text-align: center;
}
.portal-item select[name="select_city"] {
  border: 2px solid #A7A7AA;
  border-radius: 6px;
  width: 50%;
  height:2.5em;
  padding: .25em .5em;
  padding-left: 1.75em;
  font-size:clamp(0.8em,3vw,1em);
  font-weight:bold;
  appearance: none;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
}

.portal-item .select-wrapper::after {
  content:"";
  position:absolute;
  width: 1em;
  height: 0.8em;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%);
  background-color: #000000;
  right:calc(25% + 1em);
  top:calc(50% - 0.4em);
}
.portal-item .select-wrapper::before {
  content:"";
  position:absolute;
  width: 1em;
  height: 1em;
  background-image:url(./img/ic_map.svg);
  background-size:cover;
  left:calc(25% + 0.5em);
  top:calc(50% - 0.5em);
}
.portal-title { font-weight: bold; }
@media screen and (max-width:500px) { .portal-title { font-size: 0.9em; } }
.portal .portal-detail {
  font-size:0.8em;
  width: 100%;
  line-height: 1.5em;
  overflow: hidden;
}
.portal .portal-detail span {
  display: inline-block;
  white-space: nowrap;
  line-height: 1em;
  animation: scrollAnime 15s linear infinite;
  padding-left: 100%;
}
@keyframes scrollAnime {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media screen and (max-width:1280px) {
  .portal{ grid-template-columns:repeat(3,calc(100%/3)); }
  .portal-item select[name="select_city"] { width: 100%;}
  .portal-item .select-wrapper::after { right:1em; }
  .portal-item .select-wrapper::before { left:.5em; }
}
@media screen and (max-width:800px) {
  .portal, .tenki_emgcy .portal{ grid-template-columns:repeat(2,calc(100%/2)); }
}
/* 避難・気象・土砂災害 */
.portal-item.level-1 { background-color: rgb(255 255 255); }
.portal-item.level-2 { background-color: rgb(242 231 0); }
.portal-item.level-3 { background-color: rgb(255 40 0); color:white; }
.portal-item.level-4 { background-color: rgb(170 0 170); color:white; }
.portal-item.level-5 { background-color: rgb(12 0 12); color:white; }
/* 地震 */
.portal-item.earthquake.level-1 { background-color: rgb(242 242 255); }
.portal-item.earthquake.level-2 { background-color: rgb(0 170 255); color:white; }
.portal-item.earthquake.level-3 { background-color: rgb(0 65 255); color:white; }
.portal-item.earthquake.level-4 { background-color: rgb(250 230 150); color:initial; }
.portal-item.earthquake.level-5row { background-color: rgb(255 230 0); }
.portal-item.earthquake.level-5high { background-color: rgb(255 153 0); }
.portal-item.earthquake.level-6row { background-color: rgb(255 40 0); color:white; }
.portal-item.earthquake.level-6high { background-color: rgb(165 0 33); color:white; }
.portal-item.earthquake.level-7 { background-color: rgb(180 0 104); color:white; }
/* 津波 */
.portal-item.tsunami.level-1 { background-color: rgb(242 242 255); }
.portal-item.tsunami.level-2 { background-color: rgb(250 245 0); }
.portal-item.tsunami.level-3 { background-color: rgb(255 170 0); color:initial; }
.portal-item.tsunami.level-4 { background-color: rgb(250 40 0); color:white; }
.portal-item.tsunami.level-5 { background-color: rgb(200 0 255); color:white; }

.portal-item .portal-img img {
  display: none;
  width: 38px;
  height: 38px;
}
.portal-item .portal-img {
  background-repeat: no-repeat;
  width: 38px;
  height: 38px;
  background-size: contain;
}
/* 避難 */
#Evacuation.portal-item .portal-img {
  background-image: url(./img/ic_hinan.svg);
}
#Evacuation.portal-item.level-3 .portal-img,
#Evacuation.portal-item.level-4 .portal-img,
#Evacuation.portal-item.level-5 .portal-img {
  background-image: url(./img/ic_hinan-w.svg);
}
/* 気象 */
#WeatherEmergency.portal-item .portal-img {
  background-image: url(./img/ic_weather.svg);
}
#WeatherEmergency.portal-item.level-3 .portal-img,
#WeatherEmergency.portal-item.level-4 .portal-img,
#WeatherEmergency.portal-item.level-5 .portal-img {
  background-image: url(./img/ic_weather-w.svg);
}
/* 河川洪水 */
#Flood.portal-item .portal-img {
  background-image: url(./img/ic_river_flood.svg);
}
#Flood.portal-item.level-3 .portal-img,
#Flood.portal-item.level-4 .portal-img,
#Flood.portal-item.level-5 .portal-img {
  background-image: url(./img/ic_river_flood-w.svg);
}
/* 土砂災害 */
#SedimentDisasters.portal-item .portal-img {
  background-image: url(./img/ic_sand.svg);
}
#SedimentDisasters.portal-item.level-3 .portal-img,
#SedimentDisasters.portal-item.level-4 .portal-img,
#SedimentDisasters.portal-item.level-5 .portal-img {
  background-image: url(./img/ic_sand-w.svg);
}
/* 地震 */
#Earthquake.portal-item .portal-img {
  background-image: url(./img/ic_earthquake.svg);
}
#Earthquake.portal-item.level-2 .portal-img,
#Earthquake.portal-item.level-3 .portal-img,
#Earthquake.portal-item.level-6row .portal-img,
#Earthquake.portal-item.level-6high .portal-img,
#Earthquake.portal-item.level-7 .portal-img {
  background-image: url(./img/ic_earthquake-w.svg);
}
/* 津波 */
#Tsunami.portal-item .portal-img {
  background-image: url(./img/ic_tsunami.svg);
}
#Tsunami.portal-item.level-4 .portal-img,
#Tsunami.portal-item.level-5 .portal-img {
  background-image: url(./img/ic_tsunami-w.svg);
}