@charset "UTF-8";

/* =====================
  u-mv
===================== */
.u-mv {
  @media only screen and (width <= 768px) {
    & hgroup span[lang='en'] {
      text-transform: uppercase;
    }
  }
}

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 102px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 102 * 1vw);
  }

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

    @media only screen and (width <= 768px) {
      gap: 11.6vw;
    }
  }

  /* ==== body ==== */
  .body {
    padding-inline: 9px;
    font-weight: 350;
    word-break: normal;

    @media only screen and (width <= 768px) {
      padding-inline: 0;
    }
  }

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

    @media only screen and (width <= 768px) {
      margin-block-start: 1.5vw;
    }
  }
}

/* =====================
  action
===================== */
.action {
  padding-block: 97px 104px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 92 * 1vw) calc((100 / 390) * 104 * 1vw);
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    @media only screen and (width <= 768px) {
      gap: 2.4vw;

      & [lang='en'] {
        line-height: 1.2;
        text-indent: -2.8vw;
      }
    }
  }

  /* ==== list ==== */
  .list {
    display: block grid;
    gap: 64px;
    max-inline-size: 1120px;
    margin-block-start: 85px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 64 * 1vw);
      margin-block-start: calc((100 / 390) * 85 * 1vw);
    }

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
    }

    & > li {
      display: block grid;
      padding-block: 64px 61px;
      padding-inline: 48px;
      background: white;

      @media only screen and (width <= 768px) {
        padding-block: calc((100 / 390) * 41 * 1vw) 10.1vw;
        padding-inline: calc((100 / 390) * 12 * 1vw);
      }

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
      }

      /* ==== head ==== */
      .head {
        display: block grid;
        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
        gap: 10px;

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

        & [lang='en'] {
          display: block flow;
          inline-size: fit-content;
          padding-inline: 8px;
          font-size: 15px;
          font-weight: 600;
          line-height: 1.7;
          color: var(--primary);
          letter-spacing: 0.9px;
          border-block-end: 1px solid currentcolor;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 15 * 1vw);
            letter-spacing: calc((100 / 390) * 0.9 * 1vw);
            border-block-end: calc((100 / 390) * 2 * 1vw) solid currentcolor;
          }
        }

        & h2 {
          font-size: 24px;
          font-weight: 500;
          letter-spacing: 1.44px;
          word-break: normal;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 24 * 1vw);
            letter-spacing: calc((100 / 390) * 1.44 * 1vw);
          }
        }

        & h2 span {
          display: block flow;

          @media only screen and (width <= 768px) {
            display: inline;
          }
        }
      }

      /* ==== picture ==== */
      .picture {
        @media only screen and (width <= 768px) {
          display: block flow;
          margin-block-start: calc((100 / 390) * 57 * 1vw);
        }
      }

      /* ==== body ==== */
      .body {
        margin-block-start: 20px;
        font-weight: 350;
        word-break: normal;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 19 * 1vw);
        }
      }

      /* ==== icons ==== */
      .icons {
        display: flex;
        gap: 9px;
        margin-block-start: 16px;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 8 * 1vw);
          margin-block-start: calc((100 / 390) * 16 * 1vw);

          & li img {
            inline-size: calc((100 / 390) * 75 * 1vw);
          }
        }
      }
    }

    & li:nth-child(odd) {
      grid-template-columns: auto 419px;
      gap: 0 64px;

      .head {
        grid-area: 1 / 1 / 2 / 2;
      }

      .body {
        grid-area: 2 / 1 / 5 / 2;
      }

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

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

    & li:nth-child(even) {
      grid-template-columns: 419px auto;
      gap: 0 64px;

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

      .body {
        grid-area: 2 / 2 / 5 / 3;
      }

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

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

/* =====================
  introduction
===================== */
html[lang='en'] .introduction {
  .u-inner {
    gap: 0;

    .body {
      margin-block-start: 50px;

      @media only screen and (width <= 768px) {
        margin-block-start: calc((100 / 390) * 34 * 1vw);
      }
    }

    .picture {
      margin-block-start: 34px;

      @media only screen and (width <= 768px) {
        margin-block-start: calc((100 / 390) * 29 * 1vw);
      }
    }
  }
}

/* =====================
  action
===================== */
html[lang='en'] .action {
  .list {
    margin-block-start: 74px;

    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 70 * 1vw);
    }

    & > li {
      padding-block: 64px 58px;

      @media only screen and (width <= 768px) {
        padding-block: 10.2vw 10.6vw;
      }
    }
  }
}