@charset "UTF-8";

/* =====================
  main
===================== */
.main::before {
  position: absolute;
  inset-block-start: var(--header-height);
  inset-inline: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 3847px;
  pointer-events: none;
  content: '';
  background-image: url('../img/business/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media (width <=768px) {
    inset-block-start: 0;
    block-size: calc((100 / 390) * 4270 * 1vw);
  }
}

/* =====================
  common
===================== */
.c-article {
  .u-inner {
    position: relative;
    display: block grid;
    gap: 0 70px;
    align-content: flex-start;
    align-items: flex-start;

    @media (width <=768px) {
      gap: 0;
    }
  }

  .u-head {
    margin-block-start: 89px;

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

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

    @media (width <=768px) {
      margin-block-start: var(--nudge-2);
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  .thumb {
    margin-block-start: 61px;

    @media (width <=768px) {
      position: absolute;
      inset-block-start: 38vw;
      inset-inline-end: 3vw;
      margin-block-start: var(--nudge-3);
      margin-inline: auto;

      img {
        max-inline-size: calc((100 / 390) * 120 * 1vw);
      }
    }
  }

  .c-img {
    position: relative;
    grid-row: 1 / 5;

    @media (width <=768px) {
      inline-size: 100vw;
      block-size: calc((100 / 390) * 250 * 1vw);
      margin-inline: calc(50% - 50cqi);

      img {
        object-fit: cover;
      }
    }

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      pointer-events: none;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  @media (width > 768px) {
    &:nth-child(odd) {
      .u-inner {
        grid-template-columns: 620px 1fr;
        padding-inline-end: 80px;
      }

      .c-img {
        grid-column: 1 / 2;
      }

      :where(.u-head, .body, .thumb) {
        grid-column: 2 / 3;
      }
    }

    &:nth-child(even) {
      .u-inner {
        grid-template-columns: 1fr 620px;
        padding-inline: 80px 0;
      }

      .c-img {
        grid-column: 2 / 3;
      }

      :where(.u-head, .body, .thumb) {
        grid-column: 1 / 2;
      }

      .thumb {
        display: block flex;
        justify-content: end;
      }
    }
  }
}

/* =====================
  introduction
===================== */
.introduction {
  position: relative;
  z-index: 2;
  padding-block: 90px 13px;
  text-align: center;

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

  .u-inner {
    display: block grid;
    gap: 22px;

    @media (width <=768px) {
      gap: var(--nudge-3);
    }
  }

  .catch {
    font-size: 36px;

    @media (width <=768px) {
      font-size: var(--nudge-4);
    }
  }

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

/* =====================
  reform
===================== */
.reform {
  position: relative;
  z-index: 1;
  padding-block: 147px 153px;

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

  .c-img::before {
    inset-block-start: -210px;
    inset-inline-start: 14px;
    inline-size: 599px;
    aspect-ratio: 599 / 244;
    background-image: url('../img/business/reform/text.svg');

    @media (width <=768px) {
      inset-block-start: -12vw;
      inset-inline-start: 4vw;
      inline-size: 70vw;
    }
  }
}

/* =====================
  flooring
===================== */
.flooring {
  padding-block: 147px 153px;

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

  .c-img::before {
    inset-block-start: -220px;
    inset-inline-start: -133px;
    inline-size: 619px;
    aspect-ratio: 619 / 255;
    background-image: url('../img/business/flooring/text.svg');

    @media (width <=768px) {
      inset-block-start: -12vw;
      inset-inline-start: 4vw;
      inline-size: 70vw;
    }
  }
}

/* =====================
  water-area
===================== */
.water-area {
  padding-block: 147px 159px;

  @media (width <=768px) {
    padding-block: var(--nudge-7) var(--nudge-10);
  }

  .c-img::before {
    inset-block-start: -213px;
    inset-inline-start: 2px;
    inline-size: 886px;
    aspect-ratio: 886 / 280;
    background-image: url('../img/business/water-area/text.svg');

    @media (width <=768px) {
      inset-block-start: -12vw;
      inset-inline-start: 4vw;
      inline-size: 89vw;
    }
  }
}