@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/mice/mv.png');
  }

  /* =====================
    about_mice
  ===================== */
  .about_mice {
    position: relative;
    padding-block-start: 67px;
    padding-block-end: 121px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 46 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }
    .u-inner {
      padding-inline: 160px;

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

      .about {
        padding-inline: 102px;

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

        .description {
          margin-block-start: 46px;

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

      .wrap {
        display: block grid;
        justify-content: space-between;
        margin-block-start: 81px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 32 * 1vw);
          column-gap: calc((100 / 390) * 16 * 1vw);
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: auto auto auto auto auto;
        }

        .unit {
          @media (width <= 768px) {
            display: grid;
            align-items: start;
            grid-template-rows: subgrid;
          }

          &[data-id='1'] {
            grid-area: 1/1/2/2;

            @media (width <= 768px) {
              grid-area: 1/1/6/2;
            }
          }
          &[data-id='2'] {
            grid-area: 1/3/2/4;

            @media (width <= 768px) {
              grid-area: 1/2/6/3;
            }
          }
          &[data-id='3'] {
            grid-area: 2/1/3/2;
            margin-block-start: 105px;

            @media (width <= 768px) {
              grid-area: 7/1/12/2;
              margin-block-start: 0;
            }
          }
          &[data-id='4'] {
            grid-area: 2/3/3/4;
            margin-block-start: 105px;

            @media (width <= 768px) {
              grid-area: 7/2/12/3;
              margin-block-start: 0;
            }
          }

          .title {
            font-size: 20px;
            font-weight: 500;
            line-height: 1.3;
            color: var(--primary);

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

          .list {
            @media (width <= 768px) {
              display: grid;
              grid-template-rows: repeat(3, max-content);
            }
            .item {
              inline-size: 240px;
              padding-block: 4px;
              padding-inline: 8px;
              background-color: #e1f2fa;
              margin-block-start: 10px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                inline-size: 100%;
                padding-block: calc((100 / 390) * 4 * 1vw);
                padding-inline: calc((100 / 390) * 8 * 1vw);
                margin-block-start: calc((100 / 390) * 10 * 1vw);
              }
            }
          }
        }
        .picture {
          display: block flow;
          grid-area: 1/2/3/3;
          margin-block-start: 6px;

          @media (width <= 768px) {
            grid-area: 6/1/7/3;
            margin-block-start: 0;
            margin-block: calc((100 / 390) * 16 * 1vw);

            & img {
              inline-size: 100%;
            }
          }
        }
      }
    }
  }

  /* =====================
    advantage
  ===================== */
  .advantage {
    position: relative;
    padding-block-start: 106px;
    padding-block-end: 120px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 46 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
    }
    .u-inner {
      padding-inline: 80px;

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

      .wrap {
        display: block grid;
        grid-template-columns: auto 530px;
        justify-content: space-between;
        column-gap: 43px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          column-gap: 0;
        }

        .description {
          margin-block-start: 46px;

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

        .img {
          margin-block-start: 35px;
          border-radius: 10px;

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