@charset "UTF-8";
/* =============================================================
   TOP / ビーヘルシーの特徴 デザイン更新（Figma: node 1-4527）
   SCSSビルドと分離・手動メンテ。style.css の後に読み込む。
   ※ 見出し・本文・ボタンの文字組みは既存が Figma と一致のため変更なし。
     変わったのは背景まわり（カード地・透かし文字・見出しアイコン）。
   ============================================================= */

/* -------------------------------------------------------------
   背景カード（Figma: 1414×876 / #F7F7F7 + ドロップシャドウ）
   セクション下端から 43px 浮かせ、人物の足元がカード外に出る。
   ------------------------------------------------------------- */
.top-features:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1414px;
  max-width: calc(100% - 40px);
  height: calc(100% - 43px);
  background-color: #f7f7f7;
  -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  z-index: -2;
}

/* -------------------------------------------------------------
   透かしの「Features」
   Figma: カード上に白抜き / Rozha One 316px（1920px時）
   ------------------------------------------------------------- */
.top-features:before {
  color: #fff;
  font-size: clamp(140px, 16.46vw, 316px);
  opacity: 1;
}

/* -------------------------------------------------------------
   見出し左の丸アイコンは Figma で廃止
   ------------------------------------------------------------- */
.top-features__head:before {
  content: none;
}

@media screen and (max-width: 767px) {
  .top-features:after {
    height: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }

  /* SPでは画面からはみ出すため、カード幅に収まるサイズにする
     （"Features" の描画幅 ≒ font-size × 4.04） */
  .top-features:before {
    font-size: 22.5vw;
  }
}