@charset "UTF-8";

/* =====================
  contents
===================== */
main .contents {
  padding-block: 6px 22px;

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

  /* =====================
    introduction
  ===================== */
  section[data-url='introduction'] {
    padding-block: 93px 99px;
    background: linear-gradient(180deg, var(--bg) 0%, white 100%);

    @media (width <= 768px) {
      padding-block: 9.6vw 4vw;

      .u-title [lang='en'] {
        font-size: calc((100 / 750) * 80 * 1vw);
      }
    }

    /* ==== u-inner ==== */
    .u-inner {
      @media (width <= 768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

      /* ==== description ==== */
      .description {
        margin-block: 47px 87px;

        @media (width <= 768px) {
          margin-block: calc((100 / 750) * 55 * 1vw) calc((100 / 750) * 87 * 1vw);
        }
      }

      /* ==== picture ==== */
      .picture {
        display: block flow;
        inline-size: fit-content;
        margin-block: calc((1em - 1lh) / 2);
        margin-inline: auto;
      }
    }
  }

  /* =====================
    action
  ===================== */
  section[data-url='action'] {
    padding-block: 94px 84px;
    background: linear-gradient(180deg, white 68.56%, var(--bg) 100%);

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

    /* ==== u-inner ==== */
    .u-inner {
      @media (width <= 768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

      /* ==== action-list ==== */
      .action-list {
        display: block flex;
        flex-direction: column;
        gap: 77px;
        margin-block-start: 36px;
        counter-reset: number;

        @media (width <= 768px) {
          gap: calc((100 / 750) * 78 * 1vw);
          margin-block-start: calc((100 / 750) * 40 * 1vw);
        }

        & > li {
          position: relative;
          content: counter(number);
          counter-increment: number;

          &::before {
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 37px;
            z-index: 2;
            display: block flow;
            place-items: center;
            padding-block: 25px;
            padding-inline: 40px;
            margin-block: calc((1em - 1lh) / 2);
            font-family: var(--lalezar);
            font-size: 24px;
            line-height: 1;
            color: white;
            pointer-events: none;
            content: 'Action 0' counter(number);
            background: var(--secondary);
            border-radius: calc(infinity * 1px);
            translate: 0 -50%;
          }

          @media (width <= 768px) {
            &::before {
              inset-inline-start: calc((100 / 750) * 22 * 1vw);
              padding-block: calc((100 / 750) * 23 * 1vw);
              padding-inline: calc((100 / 750) * 40 * 1vw);
              font-size: calc((100 / 750) * 32 * 1vw);
            }
          }

          /* ==== .inner ==== */
          .inner {
            display: block grid;
            grid-template-columns: 490px 439px;
            gap: 36px;
            justify-content: space-between;
            padding-block: 79px 71px;
            padding-inline: 65px 56px;
            background: #e6fcff;
            border-radius: 40px;

            @media (width <= 768px) {
              display: block flex;
              flex-direction: column;
              gap: 7.7vw;
              padding-block: calc((100 / 750) * 74 * 1vw) calc((100 / 750) * 24 * 1vw);
              padding-inline: calc((100 / 750) * 42 * 1vw);
              border-radius: calc((100 / 750) * 40 * 1vw);
            }

            /* .title */
            .title {
              grid-area: 1 / 1 / 2 / 2;
              margin-block: calc((1em - 1lh) / 2);
              font-size: 32px;
              font-weight: 500;

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

            /* .body */
            .body {
              grid-area: 2 / 1 / 3 / 2;
              margin-block: calc((1em - 1lh) / 2);
            }

            /* icon-list */
            .icon-list {
              display: flex;
              flex-wrap: wrap;
              grid-area: 3 / 1 / 4 / 2;
              gap: 20px;
              margin-block: calc((1em - 1lh) / 2);

              @media (width <= 768px) {
                gap: calc((100 / 750) * 20 * 1vw);
              }

              & li {
                margin-block: calc((1em - 1lh) / 2);

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

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

            /* ==== picture ==== */
            .picture {
              display: block flow;
              grid-area: 1 / 2 / 4 / 3;
              inline-size: fit-content;
              margin-block: calc((1em - 1lh) / 2);
              margin-inline: auto;

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