@charset "UTF-8";

main .contents {
  display: block grid;
  padding-block: 46px 24px;

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

  /* ==== section ==== */
  & section {
    display: block grid;
    padding-block: 64px 77px;

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

    .u-inner {
      display: block grid;
      grid-template-columns: auto 470px;
      gap: 61px 80px;
      align-items: center;
      justify-content: center;
      padding-inline: 40px;

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

      .u-head {
        grid-area: 1 / 1 / 2 / 2;
        align-self: flex-end;
        margin-block: calc((1em - 1lh) / 2);

        @media (width <= 768px) {
          align-self: flex-start;
        }
      }

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

      .img {
        grid-area: 1 / 2 / 3 / 3;
        margin-block: calc((1em - 1lh) / 2);

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

    &[data-layout='reverse'] {
      .u-inner {
        grid-template-columns: 470px auto;
      }

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

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

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

  & section[data-url='health'] {
    background: linear-gradient(180deg, var(--bg) 0%, white 100%);
  }

  & section[data-url='equipment'] {
    background: white;
  }

  & section[data-url='maintenance'] {
    background: linear-gradient(0deg, var(--bg) 36.07%, white 100%);
  }

  & section[data-url='bath'] {
    background: linear-gradient(180deg, var(--bg) 0%, white 53.89%);
  }

  & section[data-url='gas'] {
    background: linear-gradient(0deg, var(--bg) 0%, white 100%);
  }

  /* ==== sub-img ==== */
  .sub-img {
    padding-block: 20px;
    margin-block: 50px calc((1em - 1lh) / 2);
    text-align: center;
    background: white;

    @media (width > 768px) {
      & img {
        inline-size: 825px;
      }
    }

    @media (width <= 768px) {
      display: block flex;
      gap: calc((100 / 750) * 48 * 1vw);
      block-size: calc((100 / 750) * 108 * 1vw);
      padding-block: 0;
      overflow: clip;

      & picture {
        display: none;
      }

      &::before,
      &::after {
        display: block flow;
        flex-shrink: 0;
        inline-size: calc((100 / 750) * 1056 * 1vw);
        block-size: calc((100 / 750) * 108 * 1vw);
        content: '';
        background-image: url('../img/top/works/list_sp.webp');
        background-repeat: repeat-x;
        background-position: left center;
        background-size: calc((100 / 750) * 1056 * 1vw) calc((100 / 750) * 108 * 1vw);
        animation: marquee 40s linear 0s infinite normal none running;
      }
    }
  }
}