@charset "UTF-8";

/* =====================
  roofing
===================== */
.u-mv {
  @media print, screen and (width >=768px) {
    padding-block: 64px 89px;
  }
}

main section {
  @media print, screen and (width >=768px) {
    padding-block: 0 93px;
  }

  @media not all and (width >=768px) {
    padding-block-end: 10vw;
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }

  & article {
    display: grid;
    grid-template: auto auto / auto auto;
    gap: 30px 47px;
    align-items: center;
    padding-block-end: 101px;

    @media not all and (width >=768px) {
      grid-template: auto / auto;
      gap: 0;
      padding-block-end: 13.1vw;
    }

    & h2 {
      grid-area: h2;
      padding-block: 12px;
      padding-inline: 30px;
      font-size: 24px;
      font-weight: bold;
      background: #e6e6e6;

      @media not all and (width >=768px) {
        padding-block: 3.7vw;
        padding-inline: 0;
        padding-inline: calc((100 / 750) * 31 * 1vw);
        font-size: calc((100 / 750) * 30 * 1vw);
        line-height: 1.6;
      }
    }

    & p {
      grid-area: p;

      @media not all and (width >=768px) {
        padding-block-start: 13px;
        padding-inline: 0;
        font-size: calc((100 / 750) * 24 * 1vw);
      }
    }

    & img {
      display: block;
      grid-area: img;
      inline-size: 530px;
      height: auto;
      filter: drop-shadow(10px 10px 0 var(--blue));

      @media not all and (width >=768px) {
        inline-size: calc((100 / 750) * 617 * 1vw);
        filter: drop-shadow(calc((100 / 750) * 12 * 1vw) calc((100 / 750) * 12 * 1vw) 0 var(--blue));
      }
    }
  }

  & article {
    grid-template-areas:
      'h2 h2'
      'p img';

    @media not all and (width >=768px) {
      grid-template-areas:
        'h2 h2'
        'p p'
        'img img';
    }

    & p {
      padding-block-start: 13px;
      padding-inline: 0;

      @media not all and (width >=768px) {
        padding-block-start: 6.4vw;
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.78;
      }
    }

    & img {
      padding-inline: 0 30px;

      @media not all and (width >=768px) {
        display: block;
        padding-inline: 0;
        margin-block: 5.8vw;
        margin-inline: auto;
        translate: -0.7vw 0;
      }
    }
  }

  & article:nth-child(even) {
    grid-template-areas:
      'h2 h2'
      'img p';

    @media not all and (width >=768px) {
      grid-template-areas:
        'h2 h2'
        'p p'
        'img img';
    }

    & p {
      padding-block-start: 11px;
      padding-inline: 2px 28px;

      @media not all and (width >=768px) {
        padding-block-start: 6.4vw;
        padding-inline: 0;
      }
    }

    & img {
      padding-inline: 30px 0;

      @media not all and (width >=768px) {
        padding-inline: 0;
      }
    }
  }
}