@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap");
#information .box#weather_box {
  display: grid;
  width: 99.513%;
  grid-template-columns: 42.4472fr 108fr 36.663fr 200fr 20.8898fr;
  padding: 5.393% 0;
  overflow: hidden;
  background: #fff;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box {
    width: 32rem;
    grid-template-columns: 40.6437fr 79.0384fr 40.318fr 140fr 20fr;
    padding: 6.25% 0;
  }
}
#information .box#weather_box .weather-card_forecast {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 31.411%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease;
}
#information .box#weather_box .weather-card_forecast.is-leaving {
  opacity: 0;
  transform: translateY(-0.8rem);
}
#information .box#weather_box .weather-card_forecast.is-entering {
  opacity: 0;
  transform: translateY(0.8rem);
  transition: none;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box .weather-card_forecast {
    padding-top: 26.115%;
  }
}
#information .box#weather_box .weather-card_location {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.681rem;
  margin: 0;
  padding: 0;
  transform: translateX(-0.474rem);
  color: #333;
  font-size: 1.8rem;
  line-height: 1.0618055556;
  white-space: nowrap;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box .weather-card_location {
    font-size: 1.5rem;
  }
}
#information .box#weather_box .weather-card_location > span {
  min-width: 0;
  white-space: nowrap;
}
#information .box#weather_box .weather-card_location > img {
  display: block;
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.865rem;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box .weather-card_location > img {
    width: 1.093rem;
    height: 1.567rem;
  }
}
#information .box#weather_box .weather-card_condition {
  width: 100%;
  margin: 6.823% 0 0;
  padding: 0;
  display: block;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
#information .box#weather_box .weather-card_temperature {
  position: relative;
  width: 100%;
  margin: 4.526% 0 0;
  padding: 0;
  color: #333;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box .weather-card_temperature {
    font-size: 1.4rem;
  }
}
#information .box#weather_box .weather-card_temperature > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
#information .box#weather_box .weather-card_temperature > span.weather-card_temperature-high {
  grid-column: 1;
  color: #e32f2f;
}
#information .box#weather_box .weather-card_temperature > span.weather-card_temperature-separator {
  grid-column: 2;
  overflow: visible;
  color: #333;
  font-size: 1.4rem;
  text-overflow: clip;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box .weather-card_temperature > span.weather-card_temperature-separator {
    font-size: 1.2rem;
  }
}
#information .box#weather_box .weather-card_temperature > span.weather-card_temperature-low {
  grid-column: 3;
  color: #1c96ff;
}
#information .box#weather_box .weather-card_photo-frame {
  grid-column: 4;
  position: relative;
  overflow: hidden;
}
#information .box#weather_box .weather-card_photo-frame::before {
  content: "";
  display: block;
  width: 100%;
  margin-top: 90%;
}
@media screen and (max-width: 768px) {
  #information .box#weather_box .weather-card_photo-frame::before {
    margin-top: 100%;
  }
}
#information .box#weather_box .weather-card_photo-frame .weather-card_photo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 1;
  transition: opacity 200ms ease;
}
#information .box#weather_box .weather-card_photo-frame .weather-card_photo.is-leaving {
  opacity: 0;
}
#information .box#weather_box .weather-card_photo-frame .weather-card_photo.is-entering {
  opacity: 0;
  transition: none;
}
#information .box#weather_box .weather-card_photo-frame .weather-card_photo.weather-card_photo--previous {
  z-index: 1;
}

#information .box#hare_box {
  display: grid;
  width: 99.513%;
  grid-template-columns: 188fr 200fr 20fr;
  padding: 5.393% 0;
  overflow: hidden;
  color: #333;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box {
    width: 32rem;
    grid-template-columns: 160fr 140fr 20fr;
    padding: 6.25% 0;
  }
}
#information .box#hare_box .hare-card_left {
  position: relative;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  overflow: hidden;
}
#information .box#hare_box .hare-card_profile {
  position: absolute;
  top: 6.387rem;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_profile {
    top: 4.803rem;
  }
}
#information .box#hare_box .hare-card_school {
  flex: 0 0 auto;
  border-radius: 200vh;
  background: #ef8fb0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.1428571429;
  white-space: pre;
  text-align: center;
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
  padding: 0.354rem 1.262rem;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_school {
    font-size: 1.1rem;
    line-height: 1.1818181818;
    padding: 0.317rem 0.815rem;
  }
}
#information .box#hare_box .hare-card_school.is-multiline {
  padding-right: 2rem;
  padding-left: 2rem;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_school.is-multiline {
    padding-right: 1.644rem;
    padding-left: 1.644rem;
  }
}
#information .box#hare_box .hare-card_name {
  color: #333;
  font-size: 1.8rem;
  line-height: 1.223em;
  text-align: center;
  white-space: pre;
  font-weight: 700;
  margin-top: 0.885rem;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_name {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0.577rem;
  }
}
#information .box#hare_box .hare-card_item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 78.764%;
  overflow: hidden;
  border-radius: 0.8rem;
  background: #e5f4fc;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_item {
    width: 11.8rem;
    border-radius: 0.8rem;
  }
}
#information .box#hare_box .hare-card_item::before {
  content: "";
  width: 100%;
  display: block;
  padding-top: 47.298%;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_item::before {
    padding-top: 50%;
  }
}
#information .box#hare_box .hare-card_item .hare-card_item-label {
  position: absolute;
  left: 6.458%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #1a3661;
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_item .hare-card_item-label {
    font-size: 1rem;
  }
}
#information .box#hare_box .hare-card_item .hare-card_item-label::after {
  content: "";
  position: absolute;
  width: 6.131rem;
  left: 0;
  bottom: 0;
  border-bottom: 0.1rem solid #1a3661;
}
#information .box#hare_box .hare-card_item .hare-card_item-image {
  position: absolute;
  top: 2.234%;
  left: 61.207%;
  display: block;
  width: 37.908%;
  height: auto;
  transform: rotate(18deg);
  transform-origin: left top;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_item .hare-card_item-image {
    left: 67.797%;
  }
}
#information .box#hare_box .hare-card_photo-frame {
  grid-column: 2;
  position: relative;
  overflow: hidden;
}
#information .box#hare_box .hare-card_photo-frame::before {
  content: "";
  display: block;
  width: 100%;
  margin-top: 90%;
}
@media screen and (max-width: 768px) {
  #information .box#hare_box .hare-card_photo-frame::before {
    margin-top: 100%;
  }
}
#information .box#hare_box .hare-card_photo-frame .hare-card_photo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

@media screen and (max-width: 768px) {
  #map {
    width: 36.034297rem;
    margin-left: -2.017149rem;
    padding-bottom: 6rem;
  }
}
#map .weather-map {
  position: relative;
  width: 66.212541rem;
  height: 67.012744rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #map .weather-map {
    width: 36.034297rem;
    height: 35.603515rem;
  }
}
#map .weather-map_picture,
#map .weather-map_image {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: block;
  width: 100%;
  height: 100%;
}
#map .weather-map_point {
  position: absolute;
  left: var(--map-left-pc);
  top: var(--map-top-pc);
  display: grid;
  grid-template-rows: 3.43rem 3.533rem 1fr;
  justify-items: center;
  width: 6.02717rem;
  height: 7.533963rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.271626rem;
  background: #fff;
  box-shadow: 0.5rem 0.5rem 0.8rem rgba(0, 0, 0, 0.1);
  color: #333;
  font: inherit;
  font-size: 1.644rem;
  line-height: 1.461em;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  #map .weather-map_point {
    left: var(--map-left-sp);
    top: var(--map-top-sp);
    grid-template-rows: 2.504rem 2.579rem 1fr;
    width: 4.4rem;
    height: 5.5rem;
    border-radius: 0.198294rem;
    font-size: 1.2rem;
    line-height: 1.5em;
  }
}
#map .weather-map_point > span {
  align-self: center;
  grid-row: 1;
}
#map .weather-map_point > img {
  display: block;
  grid-row: 2;
  width: 4.795rem;
  height: 3.533rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 768px) {
  #map .weather-map_point > img {
    width: 3.5rem;
    height: 2.579rem;
  }
}
#map .weather-map_point:focus-visible {
  outline: 0.3rem solid #1a3661;
  outline-offset: 0.2rem;
}
#map .weather-map_credit {
  position: absolute;
  bottom: 1.944rem;
  right: 0.345rem;
  display: flex;
  align-items: center;
  gap: 1.18rem;
}
@media screen and (max-width: 768px) {
  #map .weather-map_credit {
    bottom: -4.947rem;
    right: 2.043rem;
  }
}
#map .weather-map_credit_text {
  font-size: 1.4rem;
  font-weight: 500;
  color: #333;
}
@media screen and (max-width: 768px) {
  #map .weather-map_credit_text {
    font-size: 1.2rem;
  }
}
#map .weather-map_credit_logo {
  width: 4.4rem;
}
@media screen and (max-width: 768px) {
  #map .weather-map_credit_logo {
    width: 3.4rem;
  }
}