@use "../global" as *;


.p-table {
      @include mq-down(sm) {
            overflow-x: scroll;
      }

      &:not(:last-of-type) {
            margin-bottom: fz(39);
      }

      &__main {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;

            @include mq-down(sm) {
                  width: 768px;
            }

            thead {

                  th {
                        background-color: $key_blue;
                        color: #fff;
                        text-align: center;
                        padding: fz(20) 0;
                        font-size: fz(20);
                        border-radius: fz(10) fz(10) 0 0;
                        border: none;
                        line-height: 1.13;

                        @include mq-down(sm) {
                              font-size: fz(16);
                        }

                        .sub {
                              font-size: .68em;
                        }
                  }


                  &.radius-area {
                        th {
                              border-radius: 0;
                              border: 1px solid #fff;
                              font-size: rem(15);
                              font-weight: 500;
                        }

                        tr {
                              &:first-of-type {
                                    th {
                                          &:first-of-type {
                                                border-radius: rem(8) 0 0 0;
                                          }

                                          &:last-of-type {
                                                border-radius: 0 rem(8) 0 0;
                                          }
                                    }
                              }
                        }
                  }
            }

            th,
            td {
                  text-align: center;
                  border: 1px solid #d6d6d6;
                  padding: fz(13) fz(5);

                  @include mq-down(sm) {
                        font-size: fz(12);
                  }

                  &.left {
                        width: fz(200);
                  }

                  em {
                        color: #E80707;
                        font-size: fz(12);
                        font-style: normal;
                        font-weight: 800;
                        vertical-align: top;
                        display: inline-block;
                        margin-left: fz(3);
                  }
            }

            th {
                  background-color: #E2EFFF;
            }
      }

      // SP で横スクロールさせず画面幅に収める
      // 既存の overflow-x: scroll / width: 768px を打ち消す
      &--fit {
            @include mq-down(sm) {
                  overflow-x: visible;
            }

            .p-table__main {
                  @include mq-down(sm) {
                        width: 100%;
                  }

                  th,
                  td {
                        @include mq-down(sm) {
                              padding: fz(13) fz(2);
                        }

                        &.left {
                              @include mq-down(sm) {
                                    width: auto;
                              }
                        }
                  }
            }
      }

      // 同じデータから出力した PC 用 / SP 用テーブルの出し分け
      &__main {
            &--pc {
                  @include mq-down(sm) {
                        display: none;
                  }
            }

            &--sp {
                  display: none;

                  @include mq-down(sm) {
                        display: table;
                  }
            }
      }

      // SP 用テーブルで期間の区切りになる見出し行
      &__main &__group {
            th {
                  background-color: #cfe2f9;
            }
      }
}


.p-table-note-list {
      margin-top: fz(40);

      @include mq-down(sm) {
            margin-top: fz(23);
      }

      &__item {
            font-size: fz(15);
            text-indent: fz(-10);
            padding-left: fz(10);

            &::before {
                  content: "";
                  width: fz(7);
                  height: fz(7);
                  border-radius: 50%;
                  background-color: #1D2A3A;
                  display: inline-block;
                  margin-right: fz(3);
            }

            &:not(:last-of-type) {
                  margin-bottom: fz(8);
            }

            em {
                  color: #E80707;
                  font-style: normal;
                  font-weight: 800;
                  vertical-align: bottom;
                  display: inline-block;
                  font-size: .7em;
                  margin-left: fz(5);
            }
      }
}