@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/facility/mv_sp.png');
    }
  }

  /* =====================
    facility
  ===================== */
  .facility {
    padding-block: 104px 14px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 120 * 1vw) calc((100 / 750) * 145 * 1vw);
    }
    .u-inner {
      position: relative;
      .facility-list {
        display: block grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40.5px 64px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 750) * 40 * 1vw);

          & li {
            & picture {
              & img {
                inline-size: calc((100 / 750) * 670 * 1vw);
              }
            }
          }
        }
      }

      .description {
        line-height: 1.9;
        margin-block-start: 64px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 38 * 1vw);
        }
      }
      .left-in-catch {
        position: absolute;
        bottom: 36px;
        right: 0;
        z-index: 5;

        @media (width <= 768px) {
          bottom: calc((100 / 750) * -81 * 1vw);
          right: calc((100 / 750) * 41 * 1vw);
        }
      }
    }
  }
}