/* ==========================================================================
   Business(私たちの取り組み)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */
.c-page-head--business {
  background-image: url("../img/business/sp/bg.jpg");
}

@media (min-width: 768px) {
  .c-page-head--business {
    background-image: url("../img/business/ttl_area.jpg");
  }
}

/* --------------------------------------------------------------------------
   Contents(SP〜)
   -------------------------------------------------------------------------- */
.p-business {
  position: relative;
  padding: 100px 20px 128px;
}

.p-business__leaf {
  position: absolute;
  top: -47.2px;
  left: 0;
  width: 156px;
  pointer-events: none;
}

.p-business__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 60px;
}

/* アンカーリンクの移動先が固定ヘッダーに隠れないようにする */
.p-business__item {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.p-business__img img {
  width: 100%;
  aspect-ratio: 353 / 245;
  object-fit: cover;
  border-radius: var(--radius-20);
}

.p-business__body {
  margin-top: 25px;
  text-align: center;
}

.p-business__sub {
  font-family: var(--font-ttl);
  font-size: 2rem;
  font-weight: var(--fw-ttl);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-brown);
}

.p-business__ttl {
  margin-top: 5px;
  font-family: var(--font-ttl);
  font-size: var(--fs-ttl);
  font-weight: var(--fw-ttl);
  line-height: var(--lh-ttl);
  letter-spacing: var(--ls-ttl);
  color: var(--color-brown);
}

.p-business__text {
  margin-top: 20px;
  text-align: left;
}

.p-business__btn {
  margin: 25px auto 0;
}

.p-business__btn--salon {
  width: 244px;
}

.p-business__btn--event {
  width: 240px;
}

/* --------------------------------------------------------------------------
   PC(768px〜): 1023pxまでは縦並び
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .p-business {
    padding: 120px 20px 179px;
  }

  .p-business__leaf {
    top: -62.7px;
    width: 291px;
  }

  .p-business__list {
    gap: 50px;
    max-width: 600px;
    margin-inline: auto;
  }

  .p-business__img img {
    aspect-ratio: 465 / 325;
  }

  .p-business__sub {
    font-size: 2.4rem;
  }

  .p-business__ttl {
    margin-top: 0;
  }

  .p-business__text {
    margin-top: 15px;
  }
}

/* PC(1024px〜): 写真と文章の横並び */
@media (min-width: 1024px) {
  .p-business__list {
    max-width: 980px;
  }

  .p-business__item {
    display: flex;
    align-items: flex-start;
    gap: 35px;
  }

  .p-business__img {
    flex: 0 1 465px;
  }

  .p-business__body {
    flex: 0 1 480px;
    margin-top: 0;
    padding-top: 10px;
    text-align: left;
  }

  .p-business__btn {
    margin: 25px 0 0;
  }
}