/* SNOTRA BEAUTY — ページ固有スタイル
   共通スタイル（トークン・header・footer・category-card・split-grid・editorial-visual等）は
   site/assets/css/base.css を参照。 */

.beauty-hero {
  padding-block: 30px 34px;
  border-top: none;
}
.beauty-hero h1 {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.55;
  margin: 0 0 12px;
}
.beauty-hero .lede {
  color: var(--snotra-text-soft);
  font-size: 0.92rem;
  margin: 0;
}
/* 2026-09-17 Final Visual Integration：CEO本番画像（snotra_beauty_hero.png、
   原寸1672×941）を実装。コンテナ比率は書き出し後のWebP（1200×675＝16:9）と
   完全一致させており、object-fit:coverによる追加のトリミング・拡大は発生しない。
   （前回の暫定素材で発生した「縦長コンテナに引き伸ばされる」問題の再発防止） */
.editorial-visual--hero {
  aspect-ratio: 1200 / 675;
  width: 100%;
}

/* ---- HAIR CARE：主役は商品。美容ビジュアルは使用しない ---- */
#haircare-section {
  padding-block: 34px;
}
#haircare-section h2 {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.haircare-copy {
  font-size: 0.92rem;
  color: var(--snotra-text-soft);
  margin: 0 0 18px;
}
/* .haircare-product* の見た目は site/assets/css/base.css へ共通化済み
   （SNOTRA SELECT｜HAIR DRYERページの「今回比較する2商品」でも再利用するため）。 */

/* ---- SNOTRA BEAUTYのカテゴリー（HAIR IRON等） ---- */
#other-beauty {
  margin-top: 18px;
}
#other-beauty .eyebrow { margin-bottom: 10px; }
#other-beauty .category-cards {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 640px) {
  #haircare-section .split-grid { align-items: start; }
}