@charset "UTF-8";

.main {
  /* =====================
    introduction
  ===================== */
  .introduction {
    padding-block: 153px 119px;

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

    /* ==== u-head ==== */
    .u-head {
      margin-block-end: 56px;

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

    /* ==== description ==== */
    .description {
      margin-block-end: 78px;
      line-height: 2.12;

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

    /* ==== picture ==== */
    .picture {
      display: block flow;
      margin-block-end: 40px;
      margin-inline: auto;

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

  /* =====================
    action
  ===================== */
  .action {
    padding-block: 160px 159px;
    background: var(--bg);

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

    /* ==== u-inner ==== */
    .u-inner {
      max-inline-size: 1200px;
    }

    /* ==== unit1 ==== */
    .unit[data-id='1'] {
      display: block grid;
      grid-template-columns: 560px auto;
      gap: 30px 0;
      align-items: center;
      justify-content: space-between;
      padding-block: 40px;
      padding-inline: 40px;
      margin-block-end: 110px;
      background: white;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        padding-block: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-end: 16vw;
      }

      /* ==== picture ==== */
      .picture {
        grid-area: 1 / 2 / 3 / 3;

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

      /* ==== title ==== */
      .title {
        grid-area: 1 / 1 / 2 / 2;
        align-self: flex-end;
        font-family: var(--yumin);
        font-size: 30px;
        font-weight: 600;

        @media (width <= 768px) {
          margin-block-end: calc((100 / 390) * 8 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);
        }
      }

      /* ==== description ==== */
      .description {
        grid-area: 2 / 1 / 3 / 2;
        align-self: flex-start;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 8 * 1vw);
          margin-block-end: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }

    /* =====================
      action-list
    ===================== */
    .wrapper {
      overflow: clip;
    }

    .action-list {
      display: grid;
      gap: 120px;

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

      & > li {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 0 60px;
        padding-inline: 40px;

        @media (width <= 768px) {
          display: block flex;
          flex-direction: column;
          gap: calc((100 / 390) * 0 * 1vw);
          padding-block: calc((100 / 390) * 0 * 1vw);
          padding-inline: calc((100 / 390) * 0 * 1vw);
        }
      }

      /* ==== picture ==== */
      .picture {
        position: relative;
        z-index: 2;
        grid-area: 1 / 1 / 4 / 2;

        @media (width <= 768px) {
          order: 2;
          block-size: calc((100 / 390) * 160 * 1vw);
          margin-block-end: calc((100 / 390) * 16 * 1vw);
          object-fit: cover;
          object-position: center top;
        }
      }

      /* ==== title ==== */
      .title {
        position: relative;
        grid-area: 1 / 2 / 2 / 3;
        block-size: fit-content;
        margin-block: calc((1em - 1lh) / 2);
        margin-block-end: 16px;
        font-family: var(--yumin);
        font-size: 26px;
        font-weight: 600;
        color: var(--primary);

        @media (width <= 768px) {
          order: 1;
          margin-block-end: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);
          text-align: center;
          border-block-end: 1px solid currentcolor;
        }

        &::after {
          position: absolute;
          inset-block-end: 0;
          inset-inline-start: 0;
          inline-size: 200vmax;
          block-size: 1px;
          content: '';
          background: currentcolor;
        }

        @media (width <= 768px) {
          &::after {
            position: absolute;
            inset-block-end: 0;
            inset-inline: auto 0;
            display: block flow;
            inline-size: calc((100 / 390) * 9 * 1vw);
            block-size: calc((100 / 390) * 9 * 1vw);
            aspect-ratio: 1 / 1;
            content: '';
            background: var(--primary);
            border-radius: calc(infinity * 1px);
            translate: 0 50%;
          }
        }

        &::before {
          position: absolute;
          inset-block-end: 0;
          inset-inline-start: 0;
          inline-size: 9px;
          aspect-ratio: 1 / 1;
          content: '';
          background: var(--primary);
          border-radius: calc(infinity * 1px);
          translate: 0 50%;
        }

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

      /* ==== description ==== */
      .description {
        grid-area: 2 / 2 / 3 / 3;
        align-self: flex-start;
        margin-block: calc((1em - 1lh) / 2);

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

      /* ==== icon-list ==== */
      .icon-list {
        display: block flex;
        flex-wrap: wrap;
        grid-area: 3 / 2 / 4 / 3;
        gap: 4px;
        align-self: center;

        @media (width <= 768px) {
          order: 4;
        }

        & > li {
          @media (width > 768px) {
            max-inline-size: 120px;
          }

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

      & > li:nth-child(even) {
        @media (width > 768px) {
          grid-template-columns: 1fr 380px;

          .picture {
            grid-area: 1 / 2 / 4 / 3;
          }

          .title {
            grid-area: 1 / 1 / 2 / 2;

            &::after {
              inline-size: calc(100% + 60px);
            }
          }

          .description {
            grid-area: 2 / 1 / 3 / 2;
          }

          .icon-list {
            grid-area: 3 / 1 / 4 / 2;
          }
        }
      }
    }
  }
}