@charset "UTF-8";
/* ------------------------------==
  道路状況
------------------------------== */
.p-roadStatus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px 5%;
}
.p-roadStatus__detail {
  flex: 1 1 clamp(350px, 40%, 550px);
}
/* -- マップエリア --*/
.p-roadStatus__mapWrap {
  flex: 1 1 clamp(350px, 55%, 550px);
  position: relative;
  aspect-ratio: 550/452;
  width: 100%;
}

.p-roadStatus__mapImage {
  position: relative;
  object-fit: contain;
  width: 100%;
}

.p-roadStatus__mapList {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

.p-roadStatus__mapItem {
  width: 100%;
}
.p-roadStatus__mapItem img {
  width: 100%;
}

/* -- 位置情報 --*/
.p-roadPosition__list {
  display: grid;
  gap: 0.5em;
}
.p-roadPosition__item {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  gap: 0.5em;
}
.p-roadPosition__icon {
  background: var(--color-text);
  color: var(--color-white);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  border-radius: 50px;
  aspect-ratio: 1/1;
  font-size: 0.845em;
}

/* ------  道路状況 -------*/
.p-roadStatus__listWrap {
  margin-bottom: 40px;
}
.p-roadStatus__title {
  font-weight: 900;
  font-size: 1.2em;
}
.p-roadStatus__list {
  display: grid;
  gap: 0.3em;
  margin-top: 10px;
}
.p-roadStatus__item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
}
.p-roadStatus__box {
  display: block;
  width: 1.5em;
  aspect-ratio: 1/0.7;
  border: 1px solid #666;
}

.p-roadStatus__box--1 {
  background: #fe0000;
}
.p-roadStatus__box--2 {
  background: #fd9902;
}
.p-roadStatus__box--3 {
  background: #fdfe00;
}
.p-roadStatus__box--5 {
  background: #33cc3c;
}
.p-roadStatus__box--4 {
  background: #0099ff;
}

/* -- お知らせ --*/
.p-roadStatus__memo {
  margin-top: 40px;
  background: var(--color-lightgray);
  padding: min(1.5em, 3vw);
  width: 100%;
}

.p-roadStatus__memoText {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.p-roadStatus__update {
  text-align: right;
  font-size: 0.845rem;
  color: #666;
}