@charset "utf-8";

/* =========================================================
   treatments.css — /treatments 専用スタイル
   header-home.php から is_page('treatments') のときのみ読み込み。
   ヘッダー/フッター/SPドロワーの見た目は home.css（TOPと共通）側。

   デザイン:
   - PC: 260612_monnali_site_v3  Page2 (node 32:70, 1920基準・コンテンツ幅1136)
   - SP: 260721_monnali_sp_site_v2 Page2 (node 32:70, 750基準)
   カード7枚（SLAT/CRYSTAL/RESTORATION(ワイド)/B-HACHI/BLACK/GOLD/PEARL）
   ========================================================= */

.treat {
  background: #fff;
  padding: calc(var(--gh-h) + 142px) 0 246px;  /* 固定ヘッダー高＋デザインの上342px / 下446px */
}

.treat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px 9.24%;  /* デザイン: 行80px / 列105px(105/1136) */
  max-width: 1136px;
  margin: 0 auto;
  padding: 0 20px;
}

.treat__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* RESTORATION PACK: 1行使いの中央ワイドカード */
.treat__card--wide {
  grid-column: 1 / -1;
  justify-self: center;
  width: 62.59%;  /* デザイン: 711/1136 */
}

.treat__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s ease;
}

.treat__card--wide .treat__card-img {
  aspect-ratio: 711 / 515;
}

.treat__card:hover .treat__card-img {
  opacity: .85;
}

.treat__card-name {
  display: block;
  margin: 44px 0 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: #111;
}

.treat__card-desc {
  display: block;
  margin: 10px 0 0;
  font-family: var(--font-gothic);
  font-size: 16px;
  letter-spacing: .1em;
  color: #000;
}

/* =========================================================
   SP（≤834px）— 750基準
   ========================================================= */
@media screen and (max-width: 834px) {
  .treat {
    padding: calc(var(--gh-h) + 4.27vw) 0 14.8vw;  /* デザイン: 上32px / 下111px */
  }

  .treat__grid {
    gap: 5.87vw 5.38%;  /* デザイン: 行≈44px / 列36.4px */
    padding: 0 4.8vw;  /* デザイン: 左右36px */
  }

  .treat__card--wide {
    width: 65.3%;  /* デザイン: 442.2/677(コンテンツ幅) */
  }

  .treat__card-name {
    margin-top: 3.65vw;  /* デザイン: 画像下27px */
    font-size: 3.32vw;  /* デザイン: 24.9px */
  }

  .treat__card-desc {
    margin-top: 0.8vw;
    font-size: 2.4vw;  /* デザイン: 18px */
  }
}