@media (max-width: 980px) {
  .info-wrapper {
    min-width: 17rem;
    max-height: 147px;
  }

  .info-nsspe {
    font-size: 14px !important;
  }

  .info-depth {
    width: auto !important;
    min-width: 50px;
  }

  .info-mag-val,
  .info-depth-val {
    font-size: 20px !important;
    margin-top: 14px !important;
    min-width: 70px;
    width: auto;
  }

  .info-mag-val {
    width: auto !important;
  }

  .report-depth-val {
    font-size: 25px !important;
    margin-top: -2px !important;
  }

  .report-depth-val:after {
    font-size: 16px !important;
  }

  .report-mag-val:before,
  .info-mag-val:before {
    font-size: 20px !important;
  }

  .info-depth-val:after {
    font-size: 17px !important;
  }

  .info-mag-text,
  .info-depth-text,
  .report-mag-text,
  .report-depth-text {
    font-size: 24px !important;
    margin-top: 5px;
  }

  .info-title-box {
    width: 55px !important;
    height: 55px !important;
    font-size: 35px !important;
    line-height: unset !important;
  }

  .max-station-intensity {
    width: 45px !important;
    height: 45px !important;
    font-size: 27px !important;
  }

  .max-intensity {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
  }

  .max-intensity-pga-wrapper {
    width: 9.3em;
  }

  .info-body-wrapper {
    min-height: 85px !important;
    max-height: 85px;
    min-width: auto;
    gap: 0;
  }

  .info-loc {
    font-size: 18px !important;
  }

  .station-pga-wrapper {
    top: 9.55rem !important;
    left: 0.3rem !important;
  }

  .current-station-pga {
    width: 175px !important;
    margin-top: 1px !important;
  }

  .max-intensity-pga-wrapper {
    display: flex !important;
    flex-direction: column-reverse !important;
    top: 12.5rem !important;
  }

  .max-pga {
    left: 4.5rem !important;
    position: relative !important;
    height: 35px !important;
    margin-top: -1px !important;
    width: 70px;
  }

  .max-intensity {
    margin-top: 4px !important;
    padding: 3px !important;
    width: 72px;
  }

  #max-pga {
    margin-top: 0px;
  }

  .info-more {
    gap: 7px;
  }

  .info-footer {
    margin-top: -5px;
  }

  .rts-info-box {
    height: 35px;
    justify-content: center;
    margin-top: 3px !important;
  }

  .report-loc {
    font-size: 17px !important;
  }

  .report-time {
    font-size: 12px !important;
  }

  .report-box-items {
    width: 275px !important;
    right: -13px !important;
  }

  .report-wrapper {
    width: 292px !important;
  }

  .report-wrapper.hidden {
    translate: 92%;
  }

  .report-wrapper.hidden ~ .rts-intensity-list-wrapper {
    transform: translateX(135%);
  }

  .rts-intensity-list-wrapper {
    bottom: 2px;
    max-height: 100px !important;
    width: auto !important;
    right: 17rem;
    min-height: fit-content;
  }

  .rts-intensity-list {
    height: auto !important;
    max-height: 87px;
  }

  .rts-loc {
    font-size: 13px !important;
  }

  .current-version-view {
    transform: translateX(50px);
  }

  .fab {
    margin-top: -10px;
  }

  .intensity-0:not(
      #max-intensity,
      #max-pga,
      #current-station-intensity,
      .rts-intensity
    )::after {
    content: "不明";
    font-size: 20px !important;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .info-unit,
  .info-number {
    font-size: 14px !important;
    margin-right: 5px;
  }

  .current-station-loc {
    font-size: 14px !important;
  }

  .current-station-intensity-box {
    font-size: 12px !important;
  }

  .max-pga-text,
  .max-intensity-text {
    font-size: 12px !important;
  }

  .max-station-pga {
    font-size: 11px !important;
  }

  .current-station-info {
    min-width: 130px;
    width: auto !important;
    margin-right: 0 !important;
  }

  .current-station-intensity {
    height: 40px !important;
    width: 40px !important;
  }

  .report-box-item-wrapper {
    width: 95% !important;
    /* height: 40px; */
  }

  .report-box-item-wrapper:first-child {
    /* height: 115px; */
    .report-box-item-contain {
      padding: 6px !important;
    }

    .report-mag-val {
      font-size: 20px !important;
      margin-top: 4px !important;
    }
    .report-mag-val:before {
      font-size: 20px !important;
    }
    .report-loc {
      font-size: 21px !important;
    }

    .report-intensity-val {
      height: 78px !important;
      width: 78px !important;
      font-size: 40px !important;
    }

    .report-intensity-text {
      font-size: 13px !important;
    }

    .report-depth-val {
      font-size: 20px !important;
      margin-top: 0px !important;
    }

    .report-depth-val :after {
      font-size: 15px !important;
    }
  }

  .report-depth {
    width: 95px !important;
  }

  .report-intensity-val {
    width: 43px !important;
    height: 40px !important;
    font-size: 22px !important;
  }

  #time {
    font-size: 15px !important;
  }

  .connect {
    min-width: 140px !important;
  }

  .warning-message-wrapper {
    width: auto !important;
    transform: translateX(45px) !important;

    .title {
      font-size: 14px !important;
    }

    .text {
      font-size: 12px !important;
    }
  }

  .report-wrapper.hidden ~ .warning-message-wrapper {
    transform: translateX(315px) !important;
  }

  .warning-message-contain {
    padding: 10px !important;
  }
}

@media (max-height: 660px) {
  .intensity-color-list {
    height: 185px !important;
  }
}

@media (max-height: 635px) {
  .intensity-color-list {
    display: none !important;
  }
}
