@charset "UTF-8";

/* =====================
  01
===================== */
.tab-history {
  .article[data-id='1'] {
    padding-block-end: 162px;
    overflow: clip;

    @media (width <=768px) {
      padding-block-end: var(--nudge-9);
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;

      @media (width > 768px) {
        padding-inline: 80px;
      }

      @media (width <=768px) {
        gap: 0;
      }
    }

    /* ==== controller ==== */
    .controller {
      display: block grid;
      grid-template-columns: 1fr auto auto;
      gap: 20px;
      align-items: center;
      justify-content: center;
      inline-size: 1120px;
      margin-block-start: 66px;
      margin-inline: auto;

      @media (width <=768px) {
        gap: calc((100 / 390) * 10 * 1vw);
        inline-size: 100%;
        margin-block-start: calc((100 / 390) * 20 * 1vw);
      }

      .pagination {
        inset: unset;
        display: grid;
        grid-auto-flow: column;

        @media (width > 768px) {
          margin-inline-end: 33px;
        }

        span {
          display: block;
          inline-size: initial;
          block-size: 3px;
          margin: unset;
          background: #dcdcdc;
          border-radius: unset;
          opacity: 1;

          @media (width <=768px) {
            block-size: calc((100 / 390) * 3 * 1vw);
          }
        }

        span.swiper-pagination-bullet-active {
          background: #888;
        }
      }

      button:is(.prev, .next) {
        inline-size: 50px;
        aspect-ratio: 1 / 1;
        background-image: url('../img/_common/arrow-circle.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        @media (width > 768px) {
          translate: 0 2px;
        }

        &.swiper-button-disabled {
          opacity: 0.1;
        }

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.5;
          }
        }

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 45 * 1vw);
        }
      }

      button.next {
        transform: rotate(180deg);
      }
    }

    /* ====  slider ==== */
    .slider {
      position: relative;
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      margin-block-start: 29px;

      @media (width <=768px) {
        margin-block-start: var(--nudge-1);
      }

      @media (width > 768px) {
        clip-path: inset(0 -50vw 0 -50vw);
      }

      &::before {
        position: absolute;
        inset-block: 113px;
        inset-inline: 0;
        inline-size: 100vw;
        block-size: 1px;
        margin-inline: calc(50% - 50vw);
        content: '';
        background: var(--gold);

        @media (width <=768px) {
          inset-block: 16.7vw;
        }
      }
    }

    .swiper {
      @media (width > 768px) {
        overflow: unset;
      }
    }

    .swiper-slide {
      section {
        position: relative;
        display: block grid;
        min-block-size: 50px;

        @media (width <=768px) {
          min-block-size: calc((100 / 390) * 40 * 1vw);
        }

        .body {
          padding-block-start: 13px;
          padding-inline-start: 66px;

          @media (width <=768px) {
            padding-block-start: 2.2vw;
            padding-inline-start: 13.3vw;
          }

          p {
            font-size: 15px;
            line-height: 1.8;

            @media (width <=768px) {
              font-size: calc((100 / 390) * 14 * 1vw);
            }
          }
        }
      }

      .list {
        position: relative;
        display: block grid;
        gap: 20px;
        padding-block: 30px 50px;
        padding-inline: 30px;
        margin-block-start: 58px;
        background: white;
        border-radius: 10px;

        @media (width <=768px) {
          gap: 4.1vw;
          padding-block: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 32 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          margin-block-start: 10vw;
          border-radius: calc((100 / 390) * 5 * 1vw);
        }

        &::before {
          position: absolute;
          inset-block-end: 100%;
          inset-inline-start: 4.7%;
          inline-size: 1px;
          block-size: 44px;
          content: '';
          background: var(--gold);

          @media (width <=768px) {
            inset-inline-start: 4.8%;
            block-size: calc((100 / 390) * 22 * 1vw);
          }
        }

        &::after {
          position: absolute;
          inset-block-start: -54px;
          inset-inline-start: 2.4%;
          inline-size: 19px;
          aspect-ratio: 1 / 1;
          content: '';
          background: var(--gold);
          border-radius: calc(infinity * 1px);

          @media (width <=768px) {
            inset-block-start: -7.4vw;
            inset-inline-start: 2.4%;
            inline-size: calc((100 / 390) * 16 * 1vw);
          }
        }
      }
    }

    .year {
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--title);
      font-size: 100px;
      font-weight: 400;
      color: #b9bdea;

      @media (width <=768px) {
        font-size: calc((100 / 390) * 48 * 1vw);
      }
    }

    .month {
      position: absolute;
      display: block flex;
      align-items: baseline;
      justify-content: center;
      inline-size: 50px;
      aspect-ratio: 1 / 1;
      padding-block-start: 3px;
      font-size: 22px;
      color: white;
      background: var(--gold);
      border-radius: calc(infinity * 1px);

      @media (width <=768px) {
        inline-size: calc((100 / 390) * 40 * 1vw);
        padding-block-start: 1vw;
        font-size: calc((100 / 390) * 17 * 1vw);
      }

      &::after {
        font-size: 17px;
        content: '月';

        @media (width <=768px) {
          font-size: calc((100 / 390) * 12 * 1vw);
        }
      }
    }
  }
}