@charset "utf-8";
/* autoprefixer: on */

/* Project (セクション／スコープ用) */

/* #region global header */

.p-header {
  background-color: var(--wht);
  border-bottom: var(--THIN) solid var(--gry);
}

.p-header__inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 0 var(--s9);
}

.p-header__logo {
  display: flex;
  align-items: center;
  font-weight: var(--FNT-WGT-B);
  font-size: 24rem;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.p-header__logo span {
  position: relative;
  top: -0.09em;
  letter-spacing: -0.015em;
}

@media screen and (min-width: 768px) {

  .p-header__nav {
    display: block !important;
    position: static !important;
  }

}

.p-header__nav-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -moz-column-gap: var(--s4);
       column-gap: var(--s4);
  margin-left: var(--s9);
}

.p-header__nav-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 63rem;
  padding: 0 16rem;
  border-bottom: 2rem solid transparent;
  transition: color, border-bottom-color .4s ease-in-out;
  color: var(--blk);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}


.p-header__nav-btn.is-current {
  border-bottom-color: var(--blu);
  color: var(--blu);
}

@media (any-hover: hover) {
  .p-header__nav-btn:hover,
  .p-header__nav-btn:active {
    border-bottom-color: var(--blu);
    color: var(--blu);
  }
}

.p-header__nav-btn .c-icon {
  font-size: 20rem;
  color: var(--blu);
  margin-right: var(--s2);
}

.p-header__nav-label {
  font-weight: var(--FNT-WGT-M);
  font-size: 16rem;
  letter-spacing: -0.015em;
}

.p-header__actions {
  display: flex;
  justify-content: end;
  align-items: center;
  -moz-column-gap: var(--s4);
       column-gap: var(--s4);
  margin-right: 0;
  margin-left: auto;
  min-width: 0;
}

.p-header__action-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: var(--s4);
       column-gap: var(--s4);
  width: 77rem;
  height: 40rem;
  padding: 0 var(--s4);
  border-radius: var(--RAD-XS);
  transition: background-color .4s ease-in-out;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.p-header__action-btn.is-current {
  background-color: var(--blk-050);
}

@media (any-hover: hover) {
  .p-header__action-btn:hover,
  .p-header__action-btn:active {
    background-color: var(--blk-050);
  }
}

.p-header__action-btn .p-header__action-icon {
  font-size: 20rem;
  color: var(--blu);
}

.p-header__action-btn .p-header__arrow-icon {
  font-size: 10rem;
  color: var(--blu);
}

.p-header__user-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: var(--s4);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  min-width: 0;
  flex-shrink: 1;
}

.p-header__user-name {
  font-weight: var(--FNT-WGT-M);
  font-size: 16rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  min-width: 0;
  max-width: 12em;

  display: inline-block;
  flex-shrink: 1;
}

@media screen and (min-width: 1360px) { /* 1130px以上 */
  .p-header__user-name {
    max-width: 20em;
  }
}

@media screen and (max-width: 1129.98px) { /* 1129.98px以下 */
  .p-header__user-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.p-header__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40rem;
  height: 40rem;
  margin-right: var(--s2);
  border-radius: var(--RAD-FULL);
  background-color: var(--blk-300);
  color: var(--wht);
}
.p-header__avatar .c-icon { font-size: 20rem; }

.p-header__avatar .c-badge {
  position: absolute;
  top: -6rem;
  left: 23rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19rem;
  height: 19rem;
  padding: 0 5rem;
  border-radius: var(--RAD-FULL);
  background-color: var(--red);
  color: var(--wht);
  font-size: 12rem;
  font-weight: var(--FNT-WGT-M);
}

.p-header__user-btn .p-header__arrow-icon {
  font-size: 10rem;
  color: var(--blk-800);
  margin-left: var(--s2);
}

/* dropdown */

.p-header-dropdown__item {
  padding: var(--s1);
  padding-bottom: 0;
}

.p-header-dropdown__item:last-child {
  padding-bottom: var(--s1);
}

.p-header-dropdown__item.p-header-dropdown__item--signout {
  margin-top: var(--s1);
  padding: 0;
}

.p-header-dropdown__btn {
  padding: var(--s3) var(--s4);
  border-radius: var(--RAD-XS);
  background-color: var(--blu-050);
  color: var(--blk);
}

.p-header-dropdown__btn.is-current {
  background-color: var(--blu-050);
}

@media (any-hover: hover) {
  .p-header-dropdown__btn:hover,
  .p-header-dropdown__btn:active {
    background-color: var(--blu-050);
  }
}

.p-header-dropdown__icon {
  font-size: 18rem;
  margin-right: var(--s2);
  color: var(--blu);
}

.p-header-dropdown__label {
  font-weight: var(--FNT-WGT-R);
  font-size: 16rem;
}

.p-header-dropdown__btn.p-header-dropdown__btn--signout {
  position: relative;
  left: 0;
  right: 0;
  background-color: var(--blu);
  color: var(--wht);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  justify-content: center;
}

.p-header-dropdown__btn.p-header-dropdown__btn--signout .p-header-dropdown__icon {
  color: var(--wht);
}

@media (any-hover: hover) {
  .p-header-dropdown__btn.p-header-dropdown__btn--signout:hover,
  .p-header-dropdown__btn.p-header-dropdown__btn--signout:active {
    background-color: var(--blu-900);
    color: var(--wht);
  }
}

@media screen and (max-width: 767.98px) {

  .p-header__inner {
    padding: var(--s2);
    padding-right: var(--s4);
  }

  .p-header__navigation-btn {
    position: relative;
    width: 48rem;
    height: 48rem;
  }

  .p-header__navigation-btn::before,
  .p-header__navigation-btn::after {
    content: '';
    transition: 0.3s ease;
  }

  .p-header__navigation-btn::before,
  .p-header__navigation-btn::after,
  .p-header__navigation-btn > span {
    display: block;
    position: absolute;
    left: 12rem;
    width: 24rem;
    height: 2rem;
    background-color: var(--blk);
    transition: transform 0.3s ease , background-color 0.3s ease;
  }

  .p-header__navigation-btn::before { top: 16rem; }
  .p-header__navigation-btn > span { top: 23rem; }
  .p-header__navigation-btn::after { bottom: 16rem; }

  .p-header__navigation-btn.is-active > span { visibility: hidden; }

  .p-header__navigation-btn.is-active::before,
  .p-header__navigation-btn.is-active::after {
    top: 23rem;
    bottom: auto;
    margin-left: -3rem;
    opacity: 1;
    transform: rotate(45deg);
    transition: 0.3s ease;
    width: 30rem;
  }

  .p-header__navigation-btn.is-active::after { transform: rotate(-45deg); }

  .p-header__logo {
    margin-left: 12rem;
  }

  .p-header__actions {
    flex-shrink: 0;
    -moz-column-gap: 0;
         column-gap: 0;
  }

  .p-header__action-btn {
    width: 48rem;
    height: 48rem;
    -moz-column-gap: 0;
         column-gap: 0;
  }

  .p-header__action-btn.is-active {
    background-color: var(--blk-050);
  }

  .p-header__action-btn .p-header__action-icon {
    font-size: 24rem;
  }

  .p-header__user-btn {
    width: 48rem;
    height: 48rem;
    padding-right: 0;
  }

  .p-header__avatar {
    margin-right: 0;
  }
  .p-header__avatar .c-icon {
    font-size: 22rem;
  }

  .p-header__nav,
  .p-header-dropdown,
  .p-header-dropdown {
    display: none;
    z-index: var(--Z-NAV);
  }

  .p-header__nav.is-show,
  .p-header-dropdown.is-show,
  .p-header-dropdown.is-show {
    display: block;
    width: 350rem;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    top: 63rem;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: var(--wht);
    border-radius: var(--RAD-XS);
    box-shadow: var(--SDW-BS);
  }

  .p-header__nav-list {
    flex-wrap: wrap;
    gap: var(--s1);
    padding: var(--s1);
    margin-left: 0;
  }

  .p-header__nav-btn {
    flex-direction: column;
    width: 169rem;
    height: 104rem;
    border-radius: var(--RAD-XS);
    background-color: var(--blu-050);
  }

  .p-header__nav-btn:hover,
  .p-header__nav-btn:active {
    border-bottom-color: transparent;
    color: var(--blk);
  }

  .p-header__nav-btn .c-icon {
    font-size: 30rem;
    margin-right: 0;
    margin-bottom: var(--s2);
  }

  .p-header__nav-btn.is-current {
    border: none;
    border-bottom-color: transparent;
    background-color: var(--blu);
    color: var(--wht);
  }

  .p-header__nav-btn.is-current .c-icon {
    color: var(--wht);
  }

  .p-header-dropdown__btn {
    height: 50rem;
    padding-left: 20rem;
  }

  .p-header-dropdown__icon {
    font-size: 20rem;
    color: var(--blu);
    margin-right: 10rem;
  }

  .p-header-dropdown__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16rem 0;
    border-bottom: var(--THIN) solid var(--gry);
  }

  .p-header-dropdown__head .p-header__avatar {
    margin-bottom: 12rem;
  }

  .p-header-dropdown__user-name {
    padding: 0 12rem;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
  }

  .p-header-dropdown__item.p-header-dropdown__item--signout {
    margin-top: 0;
  }

  .p-header-dropdown__btn.p-header-dropdown__btn--signout {
    height: 52rem;
    padding: 0;
  }

}

/* #endregion */

/* #region main > header */

.p-main-header {
  width: 100%;
  margin-top: var(--s8);
}

.p-main-header__inner {
  display: flex;
}

.p-main-header__ttl {
  font-size: 28rem;
  font-weight: var(--FNT-WGT-M);
}

.p-main-header__action {
  margin-right: 0;
  margin-left: auto;
}

@media screen and (max-width: 767.98px) {

  .p-main-header {
    margin-top: 30rem;
  }

  .p-main-header__inner {
    flex-direction: column;
    row-gap: 30rem;
  }

  .p-main-header__action {
    margin-right: auto;
    margin-left: 0;
  }

}

/* #endregion */

/* #region section */

.p-section {
  margin-top: var(--s5);
  overflow: hidden;
}

.p-section.p-section--action {
  border: var(--THIN) solid var(--blu-100);
  border-radius: var(--RAD-S);
  background-color: var(--wht);
}

.p-section.p-section--display {
  border-radius: var(--RAD-S);
  box-shadow: var(--SDW-BS);
  background-color: var(--wht);
}

.p-section.p-section--entry {
  max-width: 756rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--RAD-S);
  box-shadow: var(--SDW-BS);
  background-color: var(--wht);
}

.p-section.p-section--plain {
  margin-top: 0;
  border-radius: var(--RAD-S);
  box-shadow: var(--SDW-BS);
  background-color: var(--wht);
}

/* p-section__header */

.p-section--action .p-section__header {
  padding: var(--s3);
  background-color: var(--blu-100);
}

.p-section--display .p-section__header {
  padding: var(--s6);
  display: flex;
  align-items: center;
}

.p-section--plain .p-section__header {
  padding: var(--s4);
  display: flex;
  align-items: center;
}

/* p-section__ttl */

.p-section--action .p-section__ttl {
  font-size: var(--s4);
  color: var(--blu);
}

.p-section--display .p-section__ttl {
  font-size: var(--s4);
  font-weight: var(--FNT-WGT-M);
}

.p-section__icon {
  font-size: var(--s4);
  color: var(--blu);
  margin-right: var(--s3);
}

/* p-section__content */

.p-section--action .p-section__content {
  padding: 0 var(--s4);
  padding-top: var(--s4);
}

.p-section--display .p-section__content {
  padding: 0 var(--s6);
  padding-bottom: var(--s6);
}

.p-section--plain .p-section__content {
  padding: 0 var(--s4);
}

.p-section--entry .p-section__content {
  padding: 0;
}

.p-section--entry .p-section__block {
  padding-bottom: var(--s10);
}

.p-section--entry .p-section__block-title {
  padding: var(--s6);
  background-color: var(--blu-100);
  font-size: var(--s5);
  font-weight: var(--FNT-WGT-M);
}

.p-section--entry .p-section__block-body {
  padding: 0 var(--s6);
  padding-top: var(--s4);
}

.p-section__block-label {
  font-size: 18rem;
  color: var(--blk-600);
  padding-bottom: var(--s4);
}

/* p-section__footer */

.p-section--action .p-section__footer {
  padding: var(--s4);
}

.p-section--action .p-section__footer::before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: var(--s4);
  border-top: var(--THIN) dashed var(--gry);
}

.p-section--display .p-section__footer {
  padding: var(--s6);
  padding-top: 0;
}

.p-section--plain .p-section__footer {
  padding: var(--s4);
}

.p-section--entry .p-section__footer {
  padding: var(--s4) var(--s6);
  border-top: var(--THIN) solid var(--gry);
}

/* sort-controls */

.p-sort-controls {
  margin-right: 0;
  margin-left: auto;
}

.p-sort-form__item {
  display: flex;
  align-items: center;
}

.p-sort-form__item .c-form-label {
  flex-shrink: 0;
  margin-right: var(--s4);
}

@media screen and (max-width: 767.98px) {

  .p-section--action .p-section__content {
    padding: 0 var(--s3);
    padding-top: var(--s3);
  }

  .p-section--action .p-section__content .c-form-input {
    padding: 0 var(--s2);
  }

  .p-section--display .p-section__header {
    padding: var(--s4) var(--s3) var(--s5) var(--s3);
    flex-direction: column;
    align-items: start;
    row-gap: var(--s3);
  }

  .p-section--display .p-section__content {
    padding: 0 var(--s3);
    padding-bottom: var(--s4);
  }

  .p-section--display .p-section__footer {
    padding: 0 var(--s3) var(--s4) var(--s3);
  }

  .p-sort-controls {
    margin-right: auto;
    margin-left: 0;
  }

  .p-sort-form__item {
    display: block;
  }

  .p-sort-form__item .c-form-label {
    margin-right: 0;
    font-weight: var(--FNT-WGT-R);
  }

  .p-section.p-section--entry {
    margin-top: 30rem;
  }

  .l-grid--special .p-section.p-section--entry { margin-top: 0; }

  .p-section--entry .p-section__block {
    padding-bottom: var(--s5);
  }

  .p-section--entry .p-section__content .c-form-input {
    padding: 0 var(--s2);
  }

  .p-section--entry .p-section__content .c-form-list {
    padding: 0 var(--s2);
  }

  .p-section--entry .p-section__content table .c-form-input {
    padding: 0;
  }

  .p-section--entry .p-section__block-title {
    padding: var(--s4) var(--s3);
    font-weight: var(--FNT-WGT-R);
  }

  .p-section--entry .p-section__block-body {
    padding: 0 var(--s3);
    padding-top: var(--s2);
  }

  .p-section__block-label {
    font-size: 16rem;
    padding-top: var(--s2);
    padding-bottom: var(--s3);
  }

  .p-section--entry .p-section__footer {
    padding: var(--s4) var(--s3);
  }

  .p-section--plain .p-section__header {
    padding: var(--s3);
  }

  .p-section--plain .p-section__content {
    padding: 0 var(--s3);
  }

  .p-section--plain .p-section__footer {
    padding: var(--s3);
  }

}

/* #endregion */

/* #region table */

/* --- p-list-table --- */

.p-list-table__inner {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16rem;
  line-height: 24rem;
}

.p-list-table__inner th,
.p-list-table__inner td {
  min-width: 80rem;
  padding: var(--s4) var(--s3);
  border-top: var(--THIN) solid var(--gry);
  border-bottom: var(--THIN) solid var(--gry);
  text-align: left;
  vertical-align: middle;
}

.p-list-table--condensed .p-list-table__inner th,
.p-list-table--condensed .p-list-table__inner td {
  padding: var(--s2) var(--s3);
}

.p-list-table__inner th {
  background-color: var(--blk-050);
  color: var(--blk);
  font-weight: var(--FNT-WGT-M);
  /* デフォルトは改行禁止 */
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.p-list-table__inner td {
  /* デフォルトは途中で改行 */
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* --- p-data-table --- */

.p-data-table__wrapper {
  padding-bottom: var(--s4);
}

.p-data-table__inner {
  table-layout: fixed;
  /* border-collapse: collapse; */
  border-collapse: separate;
  border-spacing:0;
  /* border: var(--THIN) solid var(--gry); */
    border-bottom: var(--THIN) solid var(--gry);
  border-left: var(--THIN) solid var(--gry);

  font-size: 14rem;
}

.p-data-table__inner th,
.p-data-table__inner td {
  padding: var(--s2);
  border-top: var(--THIN) solid var(--gry);
  border-right: var(--THIN) solid var(--gry);
  text-align: center;
  vertical-align: middle;
}

.p-data-table__inner th {
  background-color: var(--blk-050);
  color: var(--blk);
  font-weight: var(--FNT-WGT-M);
  line-height: 20rem;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.p-data-table__inner th span { font-size: 12rem; }

.p-data-table__inner td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* マイページ 観測局設定 */
.p-data-table__inner td input[type="text"].c-form-input__field[readonly] {
  cursor: not-allowed;
  pointer-events: none;
  border: none;
  padding: 7rem 0 7rem 12rem;
  text-align: left;
}

/* 横スクロール時の固定列（列数別） */
.p-data-table.is-scroll .p-data-table__inner th.is-sticky {
  position: sticky;
  z-index: 2;
  background-color: var(--blk-050);
}

.p-data-table.is-scroll .p-data-table__inner tbody td.is-sticky {
  position: sticky;
  z-index: 5;
  background-color: var(--wht);
}

/* sticky列より is-disabled の見た目を優先 */
.p-data-table.is-scroll .p-data-table__inner tbody tr.is-disabled td.is-sticky {
  background-color: var(--blk-050);
}

.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col2 {
  --sticky-col-1: 128rem;
  --sticky-col-2: 76rem;
}

.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 {
  --sticky-col-1: 108rem;
  --sticky-col-2: 84rem;
  --sticky-col-3: 96rem;
}

.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col2 th.is-sticky:nth-child(1),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col2 td.is-sticky:nth-child(1),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 th.is-sticky:nth-child(1),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 td.is-sticky:nth-child(1) {
  left: 0;
  width: var(--sticky-col-1);
  min-width: var(--sticky-col-1);
}

.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col2 th.is-sticky:nth-child(2),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col2 td.is-sticky:nth-child(2),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 th.is-sticky:nth-child(2),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 td.is-sticky:nth-child(2) {
  left: var(--sticky-col-1);
  width: var(--sticky-col-2);
  min-width: var(--sticky-col-2);
}

.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 th.is-sticky:nth-child(3),
.p-data-table.is-scroll .p-data-table__inner.p-table--sticky-col3 td.is-sticky:nth-child(3) {
  left: calc(var(--sticky-col-1) + var(--sticky-col-2));
  width: var(--sticky-col-3);
  min-width: var(--sticky-col-3);
}

/* モバイルで固定列を解除する（横スクロールが邪魔なため） */
@media (max-width: 767px) {
  .p-data-table.is-scroll .p-data-table__inner th.is-sticky,
  .p-data-table.is-scroll .p-data-table__inner tbody td.is-sticky {
    position: static;
    left: auto;
    width: auto;
    min-width: 0;
    z-index: auto;
  }
  /* ヘッダは他の th と同じ背景色に合わせる */
  .p-data-table.is-scroll .p-data-table__inner th.is-sticky {
    background-color: var(--blk-050);
  }
  /* ボディのセルは通常の背景色にする */
  .p-data-table.is-scroll .p-data-table__inner tbody td.is-sticky {
    background-color: var(--wht);
  }
}

/* --- p-entry-table --- */

.p-entry-table__wrapper {
  padding-bottom: var(--s4);
}

.p-entry-table__inner {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.p-entry-table__inner tbody:empty {
  display: none;
}

.p-entry-table__inner th,
.p-entry-table__inner td {
  min-width: 80rem;
  border-top: var(--THIN) solid var(--gry);
  border-bottom: var(--THIN) solid var(--gry);
  text-align: left;
  vertical-align: middle;
}

.p-entry-table__inner th {
  padding: var(--s4);
  background-color: var(--blk-050);
  color: var(--blk);
  font-weight: var(--FNT-WGT-M);
  /* デフォルトは改行禁止 */
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: 14rem;
}

.p-entry-table__inner td {
  padding: var(--s2) var(--s2);
  /* デフォルトは改行禁止 */
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: 16rem;
}

.p-entry-table__inner tr.is-disabled td,
.p-data-table__inner tr.is-disabled td {
  background-color: var(--blk-050);
}

/* ユーザー サイト設定 */
.p-entry-table__inner td input.c-form-input__field,
.p-entry-table__inner td select.c-form-input__field {
  width: 100%;
  border: none;
}

button.js-clear-row,
button.js-remove-row,
button.js-toggle-display {
  width: 74rem;
}

.p-entry-form td .c-form-input {
  min-width: 105rem;
}

.p-entry-form td .c-form-input.c-form-input__narrow {
  min-width: 60rem;
}

@media screen and (max-width: 767.98px) {

  .p-data-table__wrapper,
  .p-entry-table__wrapper {
    padding-bottom: var(--s2);
  }

  .p-list-table__inner,
  .p-data-table__inner {
    min-width: 920rem;
  }

  .p-entry-table__inner th {
    padding: var(--s3);
  }

  .p-entry-table__inner td {
    padding: var(--s2);
  }

}

/* ScrollHint スクロール許可コンテナ */

.p-list-table.is-scroll,
.p-data-table.is-scroll,
.p-entry-table.is-scroll {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

/* --- PC（マウス操作デバイス）のみスクロールバーを明示的に表示 --- */

@media (hover: hover) and (pointer: fine) {

  .p-list-table.is-scroll,
  .p-data-table.is-scroll {
    overflow-x: scroll;
  }

  .p-list-table.is-scroll::-webkit-scrollbar,
  .p-data-table.is-scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 12rem;
  }

  .p-list-table.is-scroll::-webkit-scrollbar-thumb,
  .p-data-table.is-scroll::-webkit-scrollbar-thumb {
    background-color: var(--blk-200);
    border-radius: var(--RAD-FULL);
    border: 3rem solid var(--blk-050);
  }

  .p-list-table.is-scroll::-webkit-scrollbar-track,
  .p-data-table.is-scroll::-webkit-scrollbar-track {
    background-color: var(--blk-050);
  }

}

/* ScrollHint 表示調整 */

.scroll-hint-icon { z-index: 10; }

.scroll-hint-shadow-wrap::before {
  z-index: 10;
  width: 20rem;
  background: linear-gradient(90deg, var(--blk-a10) 0, rgba(0, 0, 0, 0) 16rem, rgba(0, 0, 0, 0));
}

.scroll-hint-shadow-wrap::after {
  z-index: 10;
  width: 20rem;
  background: linear-gradient(270deg, var(--blk-a10) 0, rgba(0, 0, 0, 0) 16rem, rgba(0, 0, 0, 0));
}

/* table-dropdown */

.p-table-dropdown__item {
  border-bottom: var(--THIN) solid var(--gry);
}

.p-table-dropdown__item:last-child {
  border-bottom: none;
}

.p-table-dropdown__btn {
  min-height: 36rem;
  padding: var(--s1) var(--s3);
  font-size: 14rem;
  background-color: var(--wht);
  color: var(--bkl);
}

@media (any-hover: hover) {
  .p-table-dropdown__btn:hover,
  .p-table-dropdown__btn:active {
    background-color: var(--blk-050);
  }
}

/* 警告アクション（ユーザー削除など） */

.p-table-dropdown__btn--danger {
  color: var(--red);
}

.p-table-dropdown__icon {
  margin-right: var(--s2);
  font-size: var(--s3);
  color: var(--blk-400);
}

.p-table-dropdown__btn--danger .p-table-dropdown__icon {
  color: var(--red);
}

@media (any-hover: hover) {
  .p-table-dropdown__btn.p-table-dropdown__btn--danger:hover,
  .p-table-dropdown__btn.p-table-dropdown__btn--danger:active {
    background-color: var(--red-100);
  }
}

/* #endregion */

/* #region modal download */

.p-download-form__group { margin-top: var(--s4); }

.p-download-form__group:first-of-type { margin-top: 0; }

.c-flash-container.p-download-form__flash { padding-top: 16rem; }

@media screen and (max-width: 767.98px) {

  .p-download-form__group { margin-top: var(--s3); }

  .p-download-form__group:first-of-type { margin-top: 0; }

  .c-flash-container.p-download-form__flash { padding-top: 16rem; }

  /* モバイル表示でフラッシュメッセージの長いテキストを折り返す */
  .c-flash-container.p-download-form__flash .c-alert {
    flex-wrap: wrap;
  }
  .c-flash-container.p-download-form__flash .c-alert__text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
    min-width: 0;
  }

}

/* #endregion */

/* #region modal bulk-update */

.p-bulk-update-form__title {
  display: flex;
  align-items: center;
  height: 36rem;
  margin-top: var(--s5);
  padding: 0 var(--s3);
  border-radius: var(--RAD-S);
  background-color: var(--blu-100);
  color: var(--blu);
}
.p-bulk-update-form__title:first-of-type { margin-top: 0; }

.p-bulk-update-form__wrap {
  margin-top: var(--s2);
  padding: 0 var(--s3);
}

.p-bulk-update-form__group { margin-top: var(--s2); }
.p-bulk-update-form__group:first-of-type { margin-top: 0; }

.c-flash-container.p-bulk-update-form__flash { padding-top: 16rem; }

@media screen and (max-width: 767.98px) {

  .p-bulk-update-form__title {
    display: flex;
    align-items: center;
    height: 36rem;
    margin-top: var(--s5);
    padding: 0 var(--s3);
    border-radius: var(--RAD-S);
    background-color: var(--blu-100);
    color: var(--blu);
  }
  .p-bulk-update-form__title:first-of-type { margin-top: 10rem; }

  .p-bulk-update-form__wrap {
    margin-top: var(--s2);
    padding: 0 var(--s5) 0 var(--s3);
  }

  .p-bulk-update-form__item + .p-bulk-update-form__item { margin-top: 10rem; }

  .p-bulk-update-form__group { margin-top: var(--s5); }
  .p-bulk-update-form__group:first-of-type { margin-top: 0; }

  .c-flash-container.p-bulk-update-form__flash { padding-top: 16rem; }

  /* モバイル表示でフラッシュメッセージの長いテキストを折り返す */
  .c-flash-container.p-bulk-update-form__flash .c-alert {
    flex-wrap: wrap;
  }
  .c-flash-container.p-bulk-update-form__flash .c-alert__text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
    min-width: 0;
  }

  .p-bulk-update-form__item .c-form-input,
  .p-bulk-update-form__item .c-radio {
    padding-left: var(--s2);
  }

}

/* #endregion */

/* #region modal password */

.p-password-form__group { margin-top: var(--s4); }

.p-password-form__group:first-of-type { margin-top: 0; }

.c-flash-container.p-password-form__flash { padding-top: 16rem; }

@media screen and (max-width: 767.98px) {

  .p-password-form__group { margin-top: var(--s3); }

  .p-password-form__group:first-of-type { margin-top: 0; }

  .c-flash-container.p-password-form__flash { padding-top: 16rem; }

  /* モバイル表示でフラッシュメッセージの長いテキストを折り返す */
  .c-flash-container.p-password-form__flash .c-alert {
    flex-wrap: wrap;
  }
  .c-flash-container.p-password-form__flash .c-alert__text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* #endregion */

/* #region users login */

.l-main.p-login-main {
  margin-top: 0;
}

.p-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.p-login__inner {
  display: flex;
  width: 1140rem;
  height: 700rem;
  border-radius: 15rem;
  overflow: hidden;
  background-color: var(--wht);
  box-shadow: var(--SDW-BS);
}

.p-login__visual {
  order: 2;
  position: relative;
  width: 62%;
  height: 700rem;
}

.p-login__visual-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.p-login__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5.2%;
  width: 38%;
}

.p-login__logo {
  font-size: 36rem;
  font-weight: var(--FNT-WGT-B);
}

.p-login__title {
  margin-top: 100rem;
  font-size: 24rem;
  font-weight: var(--FNT-WGT-B);
  color: var(--blu);
}

.p-login__form { margin-top: 55rem;}

.p-slogin-form__group { margin-top: 12rem; }

.p-slogin-form__item input.c-form-input__field {
  height: 52rem;
  border-radius: var(--RAD-XS);
}

.c-flash-container.p-login__flash { padding-top: 24rem; }

.p-login__submit { margin-top: 96rem; }

.c-flash-container.p-login__flash:has(*) + .p-login__submit { margin-top: 24rem; }

.p-cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--blk-a80);
  color: var(--wht);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  transform: translateY(0);
  opacity: 1;
}

.p-cookie-consent.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.p-cookie-consent__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rem;
  height: 68rem;
}

.p-cookie-consent__text {
  font-size: 14rem;
  line-height: 1.6;
}

a.p-cookie-link {
  text-decoration: underline;
  text-underline-offset: 6rem;
  text-decoration-thickness: var(--THIN);
  transition: -webkit-text-decoration-color 0.2s ease;
  transition: text-decoration-color 0.2s ease;
  transition: text-decoration-color 0.2s ease, -webkit-text-decoration-color 0.2s ease;
}

a.p-cookie-link:link,
a.p-cookie-link:visited {
  -webkit-text-decoration-color: var(--wht);
          text-decoration-color: var(--wht);
}

@media (any-hover: hover) {
  a.p-cookie-link:hover,
  a.p-cookie-link:active {
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent;
  }
}

@media screen and (max-width: 767.98px) {

  .l-main.p-login-main {
    margin: 0;
    padding: 0;
  }

  .p-login {
    display: block;
    min-height: 0;
  }

  .p-login__inner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .p-login__visual {
    width: 100%;
    height: auto;
  }

  .p-login__visual-img {
    position: relative;
  }

  .p-login__content {
    display: block;
    width: 100%;
    padding-top: 50rem;
    padding-right: 44rem;
    padding-bottom: 100rem;
    padding-left: 44rem;
  }

  .p-login__logo {
    text-align: center;
    font-size: 32rem;
    font-weight: var(--FNT-WGT-B);
  }

  .p-login__logo span {
    position: relative;
    top: -0.09em;
    letter-spacing: -0.015em;
  }

  .p-login__title {
    margin-top: 16rem;
    text-align: center;
    font-size: 22rem;
    font-weight: var(--FNT-WGT-B);
    color: var(--blu);
  }

  .p-login__form {
    margin-top: 64rem;
  }

  .p-slogin-form__group { margin-top: 16rem; }

  .p-cookie-consent__inner {
    gap: 14rem;
    padding: 16rem;
    height: auto;
  }

  .p-cookie-consent__text {
    font-size: 14rem;
    line-height: 1.6;
  }

  a.p-cookie-link {
    text-underline-offset: 4rem;
  }

}

/* #endregion */

/* #region timeseries */

.p-timeseries-form .p-timeseries-form__group {
  margin-top: 12rem;
}

.p-timeseries-form .p-timeseries-form__group:first-of-type {
  margin-top: 0;
}

.p-timeseries-form__item .c-form-list--horizontal {
  padding: 0;
}

.p-timeseries-form__item .c-radio {
  flex-shrink: 0;
  padding: 8rem 0;
  height: 36rem;
}

.p-timeseries-form__item .c-form-unit__item {
  width: 200rem;
}

.p-timeseries__header {
  padding: var(--s6);
  padding-bottom: var(--s4);
}

.p-timeseries__ttl {
  font-size: var(--s5);
  font-weight: var(--FNT-WGT-M);
}

.p-timeseries__sup {
  font-size: var(--s4);
  color: var(--blk-700);
  margin-top: var(--s3);
}

.p-timeseries__content {
  padding: 0 var(--s6);
  padding-bottom: var(--s6);
}

.c-flash-container.p-timeseries-form__flash {
  padding-top: 24rem; 
}

@media screen and (max-width: 767.98px) {

  .p-timeseries-form__item .c-form-list {
    padding: 0 var(--s2);
  }

 .p-timeseries-form__item .c-radio {
    flex-shrink: 1;
    padding: 0;
    height: auto;
  }

  .p-section--action .p-section__content .c-form-unit {
    width: 100%;
  }

  .p-section--action .p-section__content .c-form-unit .c-radio{
    width: 120rem;
  }

  .p-section--action .p-section__content .c-form-unit .c-form-input {
    padding: 0;
  }

  .p-timeseries-form__item .c-form-unit__item {
    width: 100%;
  }

  .p-timeseries__header {
    padding: var(--s4);
    padding-bottom: var(--s2);
  }

  .p-timeseries__sup {
    margin-top: var(--s2);
  }

  .p-timeseries__content {
    padding: 0 var(--s4);
    padding-bottom: var(--s4);
  }

}

/* #endregion */

/* #region map */

.p-map-form__item {
  width: 200rem;
}

.p-map {
  overflow: hidden;
  border-radius: var(--RAD-S);
  box-shadow: var(--SDW-BS);
  background-color: var(--wht);
}
.p-section + .p-map { margin-top: var(--s5); }

.p-map_canvas {
  width: 100%;
  height: 800rem;
}

.custom-marker {
  background: transparent;
  border: none;
}

.marker-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.4;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.marker-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}

.c-flash-container.p-map-form__flash {
  padding-top: 16rem;
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media screen and (max-width: 767.98px) {

  .p-map-form__item {
    width: 100%;
  }

  .p-map_canvas {
    height: calc( 100vh - var(--s10) );
  }

  .p-start-map .p-map_canvas {
    height: 300rem;
  }

}

/* Leaflet Map内のオブジェクト */

.leaflet-container {
  font-family: var(--FNT-FML);
}

.leaflet-marker-icon .c-icon {
  font-size: 20rem;
}

.leaflet-tooltip-bottom {
  margin-top: var(--s1);
  box-shadow: none;
  white-space: normal;
  word-wrap: break-word;
  width: max-content;
  border: none;
}

.leaflet-tooltip-bottom::before {
  display: none !important;
}

.leaflet-tooltip-bottom.marker-tooltip {
  font-size: 14rem;
  font-weight: var(--FNT-WGT-R);
  color: var(--blk);
  padding: var(--s1) var(--s2);
  overflow: visible;
  border-color: transparent;
  border-radius: var(--RAD-S);
  background-color: var(--COL-MAP-TT-BG);
}

.marker-tooltip__inner {
  display: inline-flex;
  align-items: center;
  color: var(--blk);
}

.marker-tooltip__inner .c-icon {
  font-size: var(--s4);
  margin-right: var(--s2);
}

.popup__ttl {
  font-size: 14px;
  font-weight: var(--FNT-WGT-M);
}

.popup__sup {
  font-size: 12px;
  font-weight: var(--FNT-WGT-R);
  text-indent: -0.5em;
  margin-top: 4px;
}

.popup__data { margin-top: 4px; }

.popup__data table {
  width: 100%;
  border-collapse: collapse;
  font-weight: var(--FNT-WGT-M);
  font-size: 14px;
  line-height: 1.4;
}

.popup__data table th,
.popup__data table td {
  font-weight: var(--FNT-WGT-R);
}

.popup__data table td strong {
  font-weight: var(--FNT-WGT-M);
  margin-right: 0.25em;
}

.popup__status {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 14px;
}

.popup__status .dot {
  display: block;
  width: 10rem;
  height: 10rem;
  border-radius: var(--RAD-FULL);
  margin-right: 6rem;
}

/* #endregion */

/* #region mypage */

.p-user-profile {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s2);
  padding-bottom: var(--s1);
}

.p-user-profile__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60rem;
  height: 60rem;
  border-radius: var(--RAD-FULL);
  background-color: var(--blk-300);
  color: var(--wht);
}
.p-user-profile__avatar .c-icon { font-size: 32rem; }

.p-user-profile__name {
  display: flex;
  align-items: center;
  height: 60rem;
  font-size: 18rem;
  font-weight: var(--FNT-WGT-M);
  line-height: 1.2;
}

.p-user-meta {
  border-top: var(--THIN) dashed var(--gry);
}

.p-user-meta__item {
  display: flex;
  align-items: center;
  gap: 6rem;
  padding: var(--s3) 0;
  border-bottom: var(--THIN) dashed var(--gry);
  font-size: 14rem;
  font-weight: var(--FNT-WGT-DL);
  line-height: 1.2;
}

.p-user-meta__key {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6rem;
  width: 138rem;
  padding-left: var(--s1);
}

.p-user-meta__key .c-icon {
  font-size: var(--s4);
  color: var(--blk-600);
  padding-top: 1rem;
}

.p-user-meta__value {
  display: inline-flex;
  align-items: center;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

.p-user-meta__value::before {
  content: ':';
  margin-right: 6rem;
}

.p-user-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--s2);
}

.c-flash-container.p-mypage-form__flash {
  padding-top: 16rem; 
  padding-bottom: 24rem; 
  padding-left: var(--s6);
  padding-right: var(--s6);
}

@media screen and (max-width: 767.98px) {

  .p-user-meta__item { display: block; }

  .p-user-meta__value {
    margin-top: var(--s2);
    margin-left: var(--s2);
  }

  .p-user-actions {
    padding: var(--s1) var(--s1) var(--s2) var(--s1);
  }

}

/* mypage: 初期値設定ボタンの余白調整 */
.p-mypage-init-setting__btn {
  margin-bottom: var(--s3);
  display: inline-block;
}

@media screen and (max-width: 767.98px) {
  .p-mypage-init-setting__btn { margin-bottom: var(--s2); }
}

/* #endregion */

/* #region mypage - init-setting */

.p-init-setting-form__group { margin-top: var(--s4); }

.p-init-setting-form__group:first-of-type { margin-top: 0; }

.p-init-setting-form__group .p-data-table__inner th:nth-child(1),
.p-init-setting-form__group .p-data-table__inner td:nth-child(1) {
  width: 48rem;
  min-width: 48rem;
  text-align: center;
}

.p-init-setting-form__group .p-data-table__inner th:nth-child(2),
.p-init-setting-form__group .p-data-table__inner td:nth-child(2) {
  width: 140rem;
  min-width: 140rem;
}

.p-init-setting-form__group .p-data-table__inner th:nth-child(3),
.p-init-setting-form__group .p-data-table__inner td:nth-child(3) {
  width: 96rem;
  min-width: 96rem;
}

.p-init-setting-form__group .p-data-table {
  scrollbar-gutter: stable;
  max-width: 320rem;
  overflow-x: auto;
}
.p-init-setting-form__group .p-data-table__inner {
  width: 100%;
  table-layout: fixed;
  border-left: none;
  border-bottom: none;
}
.p-init-setting-form__group .p-data-table__inner thead {
  display: block;
}
.p-init-setting-form__group .p-data-table__inner tbody {
  display: block;
  height: 123rem;
  overflow-y: scroll;
  overflow-x: hidden;
}
.p-init-setting-form__group .p-data-table__inner thead tr,
.p-init-setting-form__group .p-data-table__inner tbody tr,
.p-init-setting-form__group .p-data-table__inner thead,
.p-init-setting-form__group .p-data-table__inner tbody {
  box-sizing: border-box;
}
.p-init-setting-form__group .p-data-table__inner thead tr,
.p-init-setting-form__group .p-data-table__inner tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.p-init-setting-form__group .p-data-table__inner tbody tr td {
  border-top: none;
  border-right: none;
  border-left: var(--THIN) solid var(--gry);
  border-bottom: var(--THIN) solid var(--gry);
}
.p-init-setting-form__group .p-data-table__inner tbody tr td:last-child {
  border-right: var(--THIN) solid var(--gry);
}

.p-init-setting-form__group .p-data-table__inner thead tr th {
  border-right: none;
  border-left: var(--THIN) solid var(--gry);
  border-bottom: var(--THIN) solid var(--gry);
}
.p-init-setting-form__group .p-data-table__inner thead tr th:last-child {
  border-right: var(--THIN) solid var(--gry);
}

.p-init-setting-form__group {
  max-width: 360rem;
}
.p-init-setting-form__group .c-form-input {
  max-width: 320rem;
}
.p-init-setting-form__group .c-form-input .c-form-input__field {
  width: 100%;
  max-width: 320rem;
  box-sizing: border-box;
}

.c-flash-container.p-init-setting-form__flash { padding-top: 16rem; }

/* モバイル用 */
@media screen and (max-width: 767.98px) {
  .p-init-setting-form__group .p-data-table__inner tbody {
    display: table-row-group;
  }

  .p-init-setting-form__group .p-data-table__inner th:nth-child(1),
  .p-init-setting-form__group .p-data-table__inner td:nth-child(1) {
    width: 20rem;
    min-width: 20rem;
  }
  .p-init-setting-form__group .p-data-table__inner th:nth-child(2),
  .p-init-setting-form__group .p-data-table__inner td:nth-child(2) {
    width: 30rem;
    min-width: 30rem;
  }
  .p-init-setting-form__group .p-data-table__inner th:nth-child(3),
  .p-init-setting-form__group .p-data-table__inner td:nth-child(3) {
    width: 30rem;
    min-width: 30rem;
  }
  /* 初期値設定モーダル（モバイル）ではグローバルの min-width を解除してテーブルが画面内に収まるようにする */
  .p-init-setting-form__group .p-list-table__inner,
  .p-init-setting-form__group .p-data-table__inner {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    overflow: visible;
  }

  /* 列幅を有効にするため、モバイルでは折り返しを許可する */
  .p-init-setting-form__group .p-data-table__inner th,
  .p-init-setting-form__group .p-data-table__inner td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .p-init-setting-form__group .p-data-table {
    max-width: 100%;
  }

  .c-flash-container.p-init-setting-form__flash { padding-top: 16rem; }

  /* モバイル表示でフラッシュメッセージの長いテキストを折り返す */
  .c-flash-container.p-init-setting-form__flash .c-alert {
    flex-wrap: wrap;
  }
  .c-flash-container.p-init-setting-form__flash .c-alert__text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* #endregion */

/* #region start-page */

.p-monitor-summary {
  display: flex;
  align-items: end;
  padding-top: 30rem;
  padding-bottom: 20rem;
}

.p-monitor-summary__label {
  font-size: 22rem;
  font-weight: var(--FNT-WGT-B);
  margin-right: var(--s3);
}

.p-monitor-summary__count {
  font-size: 18rem;
  color: var(--blk-600);
}

.p-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.p-status-icon--lg {
  width: var(--s9);
  height: var(--s9);
  font-size: var(--s6);
  border-radius: var(--RAD-S);
}

.p-status-icon--md {
  width: var(--s8);
  height: var(--s8);
  font-size: var(--s5);
  border-radius: var(--RAD-S);
}

.p-status-icon--sm {
  width: var(--s6);
  height: var(--s6);
  font-size: var(--s4);
  border-radius: var(--RAD-XS);
}

.p-status-icon--normal {
  background-color: var(--grn-100);
  color: var(--grn);
}

.p-status-icon--warning {
  background-color: var(--orn-100);
  color: var(--orn);
}

.p-status-icon--danger {
  background-color: var(--red-100);
  color: var(--red);
}

.p-status-icon--offline {
  background-color: var(--blk-100);
  color: var(--blk-500);
}

.p-status-label {
  display: flex;
  align-items: center;
}

.p-status-label__txt {
  margin-left: var(--s2);
  font-size: 20rem;
  font-weight: var(--FNT-WGT-M);
}

.p-status-label--normal {
  color: var(--grn);
}

.p-status-label--warning {
  color: var(--orn);
}

.p-status-label--danger {
  color: var(--red);
}

.p-status-label--offline {
  color: var(--blk-500);
}

.p-status-count {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  margin-top: -2rem;
  padding-bottom: var(--s4);
  font-size: 28rem;
}

.p-status-count::before {
  content: '';
  display: block;
  width: var(--s2);
  height: var(--s2);
  border-radius: var(--RAD-FULL);
  margin-right: 10rem;
  margin-bottom: 2rem;
}

.p-status-count--normal::before {
  background-color: var(--grn);
}

.p-status-count--warning::before {
  background-color: var(--orn);
}

.p-status-count--danger::before {
  background-color: var(--red);
}

.p-status-count--offline::before {
  background-color: var(--blk-500);
}

.p-site-info {
  min-width: 365rem;
  border-radius: var(--RAD-S);
  box-shadow: var(--SDW-BS);
  background-color: var(--wht);
}
.p-site-info + .p-site-info  { margin-top: var(--s5); }

.p-site-info-summary {
  padding: var(--s6) var(--s4);
}

.p-site-info-content__wrapper {
  padding: var(--s6) var(--s4);
  padding-top: 0;
}

.p-site-label {
  display: flex;
  align-items: center;
  height: 20rem;
}

.p-site-icon {
  flex-shrink: 0;
  display: block;
  width: var(--s3);
  height: var(--s3);
  border-radius: var(--RAD-FULL);
  margin-right: var(--s2);
}

.p-site-icon--normal {
  background-color: var(--grn);
}

.p-site-icon--warning {
  background-color: var(--orn);
}

.p-site-icon--danger {
  background-color: var(--red);
}

.p-site-icon--offline {
  background-color: var(--blk-500);
}

.p-site-label__name {
  flex: 1;
  font-size: var(--s5);
  font-weight: var(--FNT-WGT-M);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}

.c-icon.details-marker {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--s5);
  height: var(--s5);
  margin-right: 0;
  margin-left: auto;
  font-size: 14rem;
  transition: transform 0.3s ease;
}

.p-site-info[open] .c-icon.details-marker {
  transform: rotate(180deg);
}

.p-site-status-label {
  padding-top: var(--s3);
  display: flex;
  align-items: center;
}

.p-site-status-label__count {
  display: flex;
  align-items: center;
  margin-left: var(--s4);
}

.p-site-status-label__count dt {
  color: var(--blk-700);
}

.p-site-status-label__count dd {
  margin-left: var(--1);
}

.p-site-status-label__count dd + dt {
  margin-left: var(--s5);
}

.p-status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--s3);
  border: var(--THIN) solid transparent;
  border-radius: var(--RAD-S);
  background-color: var(--wht);
}

.p-status-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--s7);
  padding: var(--s1) var(--s3);
  margin-bottom: var(--s3);
  border-radius: var(--RAD-FULL);
  font-size: 14rem;
  font-weight: var(--FNT-WGT-M);
  line-height: 1;
}

.p-status-card__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  font-size: 20rem;
  font-weight: var(--FNT-WGT-M);
  line-height: 1;
  white-space: nowrap;
}

.p-status-card__value .c-icon {
  font-size: var(--s6);
}

.p-status-card--normal {
  border-color: var(--grn);
}

.p-status-card--normal .p-status-card__label {
  background-color: var(--grn-100);
  color: var(--grn);
}

.p-status-card--normal .p-status-card__value {
  color: var(--grn);
}

.p-status-card--offline {
  border-color: var(--blk-500);
}

.p-status-card--offline .p-status-card__label {
  background-color: var(--blk-100);
  color: var(--blk-500);
}

.p-status-card--offline .p-status-card__value {
  color: var(--blk-500);
}

.p-device-info {
  margin-top: var(--s3);
  border: var(--THIN) solid var(--gry);
  border-radius: var(--RAD-S);
  background-color: var(--wht);
  overflow: hidden;
}

.p-device-info__header {
  display: flex;
  align-items: center;
  padding: var(--s3) var(--s4);
  border-bottom: var(--THIN) solid var(--gry);
  background-color: var(--blk-050);
}

.p-device-info__icon {
  color: var(--blu);
  font-size: var(--s4);
  margin-right: var(--s3);
}

.p-device-info__list {
  padding: 0 var(--s5);
}

.p-device-info__item {
  padding: var(--s5) 0;
  border-top: var(--THIN) dashed var(--gry);
}

.p-device-info__item:first-child { border-top: none; }

.p-station__header {
  display: flex;
  align-items: center;
}

.p-station__ttl {
  flex: 1;
  font-size: 18rem;
  font-weight: var(--FNT-WGT-M);
}

.p-station-status-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.p-station-status-label__txt {
  margin-left: var(--s2);
  font-size: 14rem;
  font-weight: var(--FNT-WGT-M);
}

.p-station__data {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--s3) var(--s2);
  padding: var(--s5) 0;
}

.p-station__data-item {
  width: calc((100% - (var(--s2) * 2)) / 3);
  min-width: 0;
  padding: var(--s3);
  background-color: var(--blk-050);
  border-radius: var(--RAD-S);
  font-size: 14rem;
}

.p-station__data-key {
  color: var(--blk-700);
}

.p-station__data-val {
  margin-top: 10rem;
}

.p-station__timestamp {
  display: flex;
  align-items: center;
  justify-self: end;
  font-size: 14rem;
}

.p-station__timestamp-label {
  color: var(--blk-700);
  margin-right: var(--s2);
}

.p-site-info-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--s6);
}


@media screen and (max-width: 767.98px) {

  .p-monitor-summary {
    flex-direction: column;
    align-items: start;
    justify-content: center;
  }

  .p-monitor-summary__label {
    margin-bottom: var(--s4);
    margin-right: 0;
  }

  .p-status-label__txt {
    white-space: nowrap;
  }

  .p-site-info {
    min-width: auto;
  }

  .p-site-info + .p-site-info  {
    margin-top: var(--s3);
  }

  .p-site-info-summary {
    padding: var(--s4);
  }

  .p-site-info-content__wrapper {
    padding: var(--s4);
    padding-top: 0;
  }

  .p-site-status-label__count dd + dt {
    margin-left: var(--s3);
  }

  .p-status-card {
    padding: var(--s4);
  }

  .p-device-info__header {
    padding: var(--s4);
  }

  .p-device-info__list {
    padding: 0 var(--s3);
  }

  .p-device-info__item {
    padding: var(--s3) 0;
  }

  .p-station-status-label__txt {
    font-size: 16rem;
  }

  .p-station__data {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--s2);
    padding: var(--s3) 0;
  }

  .p-station__data-item {
    width: 100%;
    padding: var(--s3);
    background-color: var(--blk-050);
    border-radius: var(--RAD-S);
    font-size: 14rem;
  }

  .p-station__data-val {
    margin-top: var(--s3);
  }

  .p-site-info-actions {
    padding-top: var(--s3);
  }

}

/* #endregion */

/* #region user-list */

.c-flash-container.p-userlist-form__flash {
  padding-top: 16rem; 
  padding-left: var(--s6);
  padding-right: var(--s6);
}

/* #endregion */

/* #region user-register */

.c-flash-container.p-user-register-form__flash {
  padding-bottom: 16rem; 
  padding-left: var(--s6);
  padding-right: var(--s6);
}

/* #endregion */

/* #region device-list */

.c-flash-container.p-devicelist-form__flash {
  padding-top: 16rem; 
}

/* #endregion */

/* #region device-register */

.c-flash-container.p-device-register-form__flash {
  padding-bottom: 16rem; 
  padding-left: var(--s6);
  padding-right: var(--s6);
}

/* #endregion */