@charset "UTF-8";

/* =====================
  common
===================== */
.main article {
  & section + section {
    margin-block-start: 70px;

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

  .u-head {
    margin-block-end: 60px;

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

/* =====================
  emc
===================== */
.emc {
  padding-block: 86px 63px;

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

  .u-subhead {
    margin-block-start: 0;

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

  .u-list {
    margin-block-start: 40px;

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

/* =====================
  emi
===================== */
.emi {
  padding-block: 15px 63px;

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

  .u-subhead {
    margin-block-start: 58px;

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

  .u-list {
    margin-block-start: 40px;

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

/* =====================
  materials
===================== */
.materials {
  padding-block: 86px 63px;

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

  .u-subhead {
    margin-block-start: 58px;

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

  .contents {
    display: block grid;
    grid-template-columns: 422px auto;
    gap: 64px;
    margin-block: 40px 81px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 8vw;
      margin-block: 9vw 12vw;
      margin-block-start: calc((100 / 390) * 35.6 * 1vw);
    }

    & img {
      block-size: 310px;
      object-fit: cover;
      object-position: center;
      border-radius: 10px;

      @media (width > 768px) {
        position: sticky;
        inset-block-start: 120px;
      }

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

  /* ==== u-scroll-table ==== */
  .u-scroll-table {
    & table {
      & th {
        inline-size: 195px;
        letter-spacing: 0.48px;

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

      & td {
        &:nth-child(2) {
          inline-size: 272px;

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

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

/* =====================
  catalog
===================== */
.catalog {
  padding-block: 98px 66px;
  background: var(--bg-grid);
  background-repeat: repeat;
  background-position: center center;
  background-size: 29px 29px;

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

  .u-inner {
    display: block grid;
    grid-template-columns: 207px auto;
    gap: 0 80px;
    align-items: center;
    justify-content: center;

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

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

      @media (width <= 768px) {
        order: 2;
        inline-size: calc((100 / 390) * 147 * 1vw);
        margin-block-start: calc((100 / 390) * 30 * 1vw);
      }
    }

    /* ==== h2 ==== */
    h2 {
      grid-area: 1 / 2 / 2 / 3;
      align-self: center;
      padding-block-start: 34px;
      font-weight: 500;
      color: var(--green);
      text-align: center;
      text-decoration: underline dashed currentcolor 1px;
      text-underline-offset: 9px;

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

    /* ==== u-anchor ==== */
    .u-anchor {
      grid-area: 2 / 2 / 3 / 3;
      gap: 35px;
      align-self: baseline;
      padding-block: 15px;
      padding-inline: 40px;

      @media (width <= 768px) {
        gap: 8vw;
        order: 3;
        padding-block: 3.4vw;
        padding-inline: 8vw;
        margin-block-start: calc((100 / 390) * 25 * 1vw);
        margin-inline: auto;
      }
    }
  }
}