@charset "UTF-8";

/* =====================
  01
===================== */
.tab-operation {
  .article[data-id='1'] {
    padding-block-end: 215px;

    @media (width <=768px) {
      padding-block-end: 37vw;
    }

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

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

      @media (width <=768px) {
        gap: var(--nudge-3);
      }
    }

    /* ==== body ==== */
    .body {
      line-height: 1.9;

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

    /* ==== list ==== */
    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-block-start: 60px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        margin-block-start: var(--nudge-2);
      }

      /* ==== h4 ==== */
      h4 {
        font-size: 24px;
        font-weight: 600;
        color: var(--gold);
        text-align: center;

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

      /* ==== li ==== */
      >li {
        display: block grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 10px;
        align-items: flex-start;
        line-height: 1.9;

        @media (width <=768px) {
          gap: var(--nudge-1);
          padding-block-end: var(--nudge-5);
          margin-block-end: var(--nudge-5);
          border-block-end: 1px solid var(--gray_border);

          img {
            block-size: calc((100 / 390) * 160 * 1vw);
            object-fit: cover;
          }
        }

        >ul {
          display: block grid;
          gap: 14px;
          align-items: flex-start;

          @media (width <=768px) {
            gap: var(--nudge-2);
            padding-inline: 2vw;
            margin-block: 0;
          }

          li {
            position: relative;
            padding-inline-start: 24px;
            margin-block: calc((1em - 1lh) / 2);

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

            &::before {
              position: absolute;
              inset-block-start: 14px;
              inset-inline-start: 9.9px;
              inline-size: 4px;
              aspect-ratio: 1 / 1;
              content: '';
              background: currentcolor;
              border-radius: calc(infinity * 1px);

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

    /* ==== figure ==== */
    .figure {
      position: relative;
      display: block grid;
      place-content: center;
      margin-block-start: 65px;
      margin-inline: auto;

      img {
        pointer-events: none;
      }

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

      h5 {
        position: absolute;
        inset: 0;
        display: block grid;
        place-content: center;
        inline-size: fit-content;
        margin-inline: auto;
        font-size: 30px;
        font-weight: 600;
        line-height: 1;
        color: var(--gold);
        translate: 0 27px;

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

      h6 {
        position: absolute;
        display: block grid;
        inline-size: fit-content;
        margin-block: calc((1em - 1lh) / 2);
        font-size: 24px;
        font-weight: 600;

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

        &[data-id='1'] {
          inset-block: 69px;
          inset-inline: -6px 0;
          margin-inline: auto;
          color: #3794b9;

          @media (width <=768px) {
            inset-block: 11.3vw;
            inset-inline: calc((100 / 390) * -6 * 1vw) 0;
          }
        }

        &[data-id='2'] {
          inset-block-end: 113px;
          inset-inline: 0 29px;
          display: block grid;
          margin-inline: auto 0;
          color: #03386e;

          @media (width <=768px) {
            inset-block-end: 17.7vw;
            inset-inline: 0 4.7vw;
          }
        }

        &[data-id='3'] {
          inset-block-end: 113px;
          inset-inline: 35px 0;
          display: block grid;
          margin-inline: 0 auto;
          color: #7fab4a;

          @media (width <=768px) {
            inset-block-end: 17.7vw;
            inset-inline: 5.2vw 0;
          }
        }
      }

      p {
        position: absolute;
        display: block grid;
        inline-size: fit-content;
        margin-block: calc((1em - 1lh) / 2);
        font-size: 18px;
        font-weight: 600;

        @media (width <=768px) {
          padding-block: 1.5vw;
          padding-inline: 4vw;
          font-size: calc((100 / 390) * 14 * 1vw);
          line-height: 1.4;
          text-shadow: 0 0 3px #fff;
        }

        &[data-id='1'] {
          inset-block: 171px;
          inset-inline: 0 -47px;
          margin-inline: auto 0;

          @media (width <=768px) {
            inset-block: 30.8vw;
            inset-inline: 0;
            text-align: right;
          }
        }

        &[data-id='2'] {
          inset-block-end: -48px;
          inset-inline: 0 -27px;
          display: block grid;
          margin-inline: auto;

          @media (width <=768px) {
            inset-block-end: -9.7vw;
            inset-inline: 0;
            text-align: left;
          }
        }

        &[data-id='3'] {
          inset-block-start: 227px;
          inset-inline: -148px 0;
          display: block grid;
          margin-inline: 0 auto;

          @media (width <=768px) {
            inset-block-start: 30.7vw;
            inset-inline: -4vw 0;
            text-align: right;
          }
        }
      }
    }
  }
}