/* ============================================================
   premium.css — 「上質×温かい」ブランド調整（試作）
   使い方：ページの </head> 直前で style5e1f.css の後に読み込む。
   外すときは <link> の1行を消すだけで元のデザインに戻ります。
   ============================================================ */

/* 明朝体の読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

:root {
  /* 上品な差し色：彩度を抑えたローズとチャコール */
  --brand-rose: #C4707E;
  --brand-ink: #23303E;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* ---------- 1. 見出しを明朝体に、太さを抑えて品を出す ---------- */
.hero-title,
.section-title,
.page-hero-title,
.satogaeri-heading-title,
.feature-title {
  font-family: var(--serif);
  letter-spacing: 0.06em;
}

.hero-title {
  font-weight: 600;
  /* スマホ〜PCまで画面幅に応じて 1.7rem〜3.2rem の間で自動調整 */
  font-size: clamp(1.7rem, 5.5vw, 3.2rem);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  line-height: 1.5;
}

.hero-subtitle {
  letter-spacing: 0.08em;
  font-weight: 300;
}

.section-title {
  font-weight: 600;
  letter-spacing: 0.08em;
  /* スマホでも大きすぎないよう自動調整 */
  font-size: clamp(1.55rem, 4.5vw, 2.5rem);
}

.feature-title {
  font-weight: 600;
}

/* ---------- 2. 色を絞る：金グラデ文字 → 落ち着いたローズ ---------- */
.title-highlight {
  background: none;
  -webkit-text-fill-color: var(--brand-rose);
  color: var(--brand-rose);
}

/* ---------- 3. 余白を広く、静かな背景に ---------- */
.features-section,
.news-section,
.instagram-section {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

.section-header {
  margin-bottom: 3.5rem;
}

.section-subtitle {
  letter-spacing: 0.12em;
}

/* ---------- 4. 装飾を控えめに：影と角丸を上品に ---------- */
.feature-card,
.news-item {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(35, 48, 62, 0.06);
  border: 1px solid rgba(35, 48, 62, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-card:hover,
.news-item:hover {
  box-shadow: 0 10px 28px rgba(35, 48, 62, 0.10);
  transform: translateY(-3px);
}

/* アイコンの主張を弱める（単色化） */
.feature-icon {
  background: #F7EDEF !important;
  color: var(--brand-rose) !important;
}
.feature-icon i {
  color: var(--brand-rose) !important;
}

/* ---------- 5. ヒーロー下の実績バッジ：品のある白基調に ---------- */
.hero-feature-item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.45);
  backdrop-filter: blur(4px);
}
.hero-feature-icon {
  background: var(--brand-ink);
  color: #fff;
}
.hero-feature-text strong {
  font-family: var(--serif);
  color: var(--brand-ink);
}
.hero-feature-text span {
  color: var(--text-gray);
}

/* ---------- 6. ボタン：塗りを絞り、輪郭で品を出す ---------- */
.news-button,
.instagram-button {
  background: transparent;
  color: var(--brand-ink);
  border: 1.5px solid var(--brand-ink);
  border-radius: 4px;
  letter-spacing: 0.1em;
  transition: background 0.3s, color 0.3s;
}
.news-button:hover,
.instagram-button:hover {
  background: var(--brand-ink);
  color: #fff;
}

/* ---------- 7. フッター：静かに引き締める ---------- */
.footer h4 {
  font-family: var(--serif);
  letter-spacing: 0.12em;
  font-weight: 600;
}