@charset "UTF-8";

/*
 * 初回ケアのカードが1枚になった場合のレイアウト
 * PC : 正方形画像3枚を横並び＋テキスト右、カードは横幅一杯
 * SP : 正方形画像3枚を縦並び＋テキスト下
 *
 * 元の3カラムに戻す場合は page-menu.php のクラス名を
 * treatment-menu__grid / treatment-card 系に戻し、
 * functions.php の treatment-solo.css の読み込みを削除する。
 */

.treatment-solo {
  margin-top: 40px;
  padding: 0 16px;
}

.treatment-solo__card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: none;
  overflow: hidden;
  border: 1px solid rgba(184, 160, 126, 0.4);
  background: rgba(255, 255, 255, 0.8);
}

.treatment-solo__images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
}

.treatment-solo__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(184, 160, 126, 0.2);
}

.treatment-solo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.treatment-solo__body {
  padding: 32px 36px;
  text-align: left;
}

.treatment-solo__title {
  margin: 0;
  color: var(--color-brown-dark);
  font-size: var(--font-size-clamp-2);
  line-height: var(--line-height-default);
  font-family: var(--font-family-cormorant);
  font-weight: var(--font-weight-medium);
}

.treatment-solo__price {
  margin: 14px 0 0;
  color: rgba(184, 160, 126, 0.95);
  font-family: "BIZ UDPMincho", serif;
  font-size: 28px;
}

.treatment-solo__text {
  margin: 14px 0 0;
  color: var(--color-brown-dark);
  font-size: 16px;
  text-align: left;
}

@media (max-width: 1024px) {
  .treatment-solo__body {
    padding: 24px 24px;
  }
}

@media (max-width: 767px) {
  .treatment-solo {
    margin-top: 28px;
    padding:0;
  }

  .treatment-solo__card {
    display: flex;
    flex-direction: column;
  }

  .treatment-solo__images {
    grid-template-columns: 1fr;
  }

  .treatment-solo__body {
    padding: 24px 18px 20px;
  }

  .treatment-solo__title,
  .treatment-solo__price {
    text-align: center;
  }

  .treatment-solo__price {
    margin-top: 10px;
    font-size: 22px;
  }

  .treatment-solo__text {
    margin-top: 10px;
    font-size: 14px;
  }
}