@charset "UTF-8";
/* =============================================================
   アンバサダー（田村淳）関連パーツ
   SCSSビルドと分離・手動メンテ。style.css の後に読み込む。
   サイト内の各所に順次追加していくため、1ファイルに集約する。
   ============================================================= */

/* -------------------------------------------------------------
   TOP / ファーストビュー（Figma: node 1-4300）
   ------------------------------------------------------------- */
/* 本文ブロックとアンバサダー画像を横並びにする */
.hero__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
}

/* justify-content を効かせるため本文ブロックは伸長させない */
.hero__main > .hero__body {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  min-width: 0;
}

.hero__ambassador {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: clamp(220px, 31vw, 595px);
}

.hero__ambassador-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 帯は画像下端に 41/595 ぶん重ねる（Figma 準拠） */
.hero__ambassador-caption {
  margin: -6.89% 4.2% 0 3.53%;
  padding: 1.2em 0.3em 1.05em;
  background-color: #1b1b1b;
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 0.94vw, 20px);
  line-height: 1.55;
  text-align: center;
}

/* FV に要素が増えても上方向にはみ出さないよう、高さは下限のみ指定に変更 */
.hero {
  height: auto;
  min-height: 800px;
  min-height: max(800px, 99vh);
}

/* 画像が本文より低くなる幅からは下揃えにする */
@media screen and (max-width: 1000px) {
  .hero__main {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}

@media screen and (max-width: 767px) {
  .hero {
    min-height: 600px;
    min-height: max(600px, 99vh);
    padding-top: 5rem;
  }

  .hero__main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 0;
  }

  .hero__ambassador {
    width: 100%;
    max-width: 17rem;
    margin: 1.5rem auto 0;
  }

  .hero__ambassador-caption {
    font-size: 0.6875rem;
  }
}

/* -------------------------------------------------------------
   TOP / ビーヘルシーの特徴（Figma: node 1-4527）
   セクション右端に全身写真、その右に縦書きのキャプション。
   ------------------------------------------------------------- */
/* コンテンツは画像より前面に出す */
.top-features__inner {
  position: relative;
  z-index: 1;
}

/* Figma 同様にグリッドを左へ寄せ、右側に人物のスペースをつくる（幅は 1120px のまま） */
.top-features__grid {
  margin-left: -56px;
  margin-right: 56px;
}

.top-features__ambassador {
  position: absolute;
  right: max(66px, calc(50% - 803px));
  bottom: 0;
  width: clamp(200px, calc(80.5vw - 930px), 370px);
  aspect-ratio: 792 / 1838;
  z-index: 0;
  pointer-events: none;
}

.top-features__ambassador-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* 縦書きキャプション（画像右端の透過部分に重ねる） */
.top-features__ambassador-caption {
  position: absolute;
  top: 0;
  right: 0;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #000;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 0.833vw, 16px);
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}

/* 1400px 以下は右の余白が足りず特徴項目と重なるため、ボタン下へ回す */
@media screen and (max-width: 1400px) {
  .top-features__grid {
    margin-left: 0;
    margin-right: 0;
  }

  .top-features__ambassador {
    right: 1rem;
    aspect-ratio: auto;
    bottom: auto;
    top: 0.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0;
    margin-top: 40px;
  }

  .top-features__ambassador-img {
    width: 180px;
    height: auto;
  }

  .top-features__ambassador-caption {
    position: static;
    font-size: 12px;
  }
}

/* 1000px 以下はセクション下端に合わせる */
@media screen and (max-width: 1000px) {
  .top-features__ambassador {
    top: auto;
    bottom: 0;
    margin-top: 0;
    /* 画像を指定幅のまま置くため、親は内容幅にする */
    width: auto;
  }

  .top-features__ambassador-img {
    width: 240px;
  }
}

@media screen and (max-width: 767px) {
  .top-features__ambassador {
    right: 0;
  }

  .top-features__ambassador-img {
    width: 100px;
  }

  .top-features__ambassador-caption {
    font-size: 9px;
  }
}

/* --- FV「お役立ち資料一覧をみる」ボタン（Figma の配色） --- */
.hero__body-bottom-right-button-dl--fv {
  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(1%, #121212),
    color-stop(97%, #565656)
  );
  background: linear-gradient(47deg, #121212 1%, #565656 97%);
}

/* -------------------------------------------------------------
   共通CTA / フッター前（Figma: node 1-4928）
   グラデ枠 + 白ボックス、左にアンバサダー写真、右にコピーと2ボタン。
   マークアップ: template-parts/cta-bottom.php
   ------------------------------------------------------------- */
/* 写真が白ボックス上辺より上へはみ出すぶんの余白（.cta-bottom は overflow:hidden） */
.cta-bottom {
  padding-top: min(3.8%, 60px);
}

.cta-bottom__inner {
  /* カンプの配色（225deg / #F0D800 → #FF9A00） */
  background: -webkit-gradient(
    linear,
    right top,
    left bottom,
    from(#f0d800),
    color-stop(66%, #ff9a00)
  );
  background: linear-gradient(225deg, #f0d800 0%, #ff9a00 66%);
  /* 左は写真のはみ出し分を確保（167/1440）、上下 60/1440 */
  padding-top: min(4.2%, 60px);
  padding-right: min(8.8%, 127px);
  padding-bottom: min(4.2%, 60px);
  padding-left: min(11.6%, 167px);
}

/* 白ボックス（1146 x 410）。右側にテキスト、左は写真用に空ける */
.cta-bottom__group-flex.cta-bottom__group-flex--ambassador {
  position: relative;
  display: block;
  max-width: 1146px;
  margin-left: auto;
  margin-right: auto;
  /* 52 / 63 / 45 / 353 (÷1146) */
  padding: 4.54% 5.5% 3.93% 30.8%;
  background: #fff;
  border-radius: 10px;
}

/* --- アンバサダー写真（白ボックスの左外へ出して上下にはみ出す） --- */
.cta-bottom__ambassador {
  position: absolute;
  bottom: 0;
  left: -7.07%; /* -81/1146 */
  width: 37.6%; /* 431/1146 */
  margin-top: -9.86%; /* -113/1146 */
}

.cta-bottom__ambassador-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 帯は写真下端に 49/512 ぶん重ねる（Figma 準拠） */
.cta-bottom__ambassador-caption {
  margin: -11.37% 13% 0 3.48%;
  padding: 3% 3.55%;
  background-color: #1b1b1b;
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 0.98vw, 14px);
  line-height: 1.5;
  text-align: center;
}

/* --- コピー --- */
.cta-bottom__body {
  text-align: center;
}

.cta-bottom__lead-sub {
  color: #ff6200;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 2.22vw, 32px);
  line-height: 1.5;
}

.cta-bottom__lead-main {
  display: inline-block;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 72px);
  line-height: 1.5;
  background: -webkit-gradient(
    linear,
    right top,
    left bottom,
    from(#f0d800),
    color-stop(66%, #ff9a00)
  );
  background: linear-gradient(225deg, #f0d800 0%, #ff9a00 66%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cta-bottom__lead-text {
  color: #000;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.25vw, 18px);
  line-height: 1.5;
}

.cta-bottom__br-sp {
  display: none;
}

/* --- ボタン（ラベル付き2つ並び） --- */
.cta-bottom__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12.3%; /* 90/730 */
  margin-top: 4%; /* 36/1146 */
}

.cta-bottom__action {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 320px;
  flex: 0 1 320px;
  min-width: 0;
}

.cta-bottom__action-label {
  color: #1b1b1b;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.25vw, 18px);
  line-height: 1.6;
  text-align: center;
  margin-bottom: clamp(4px, 0.63vw, 9px);
}

/* テキストをボタンの左右中央に置くモディファイア（アイコンは右端のまま）。
   付与したボタンだけに効くので、他の top-common__button には影響しない。 */
.top-common__button--center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 無料相談（アイコン付きボタン・カンプのグラデ配色） */
.cta-bottom__action .cta-bottom__button.top-common__button {
  width: 100%;
  max-width: 320px;
  margin-top: 0;
  /* カンプのボタン高 70/1440 */
  min-height: clamp(48px, 4.86vw, 70px);
  font-size: clamp(13px, 1.32vw, 19px);
  /* 中央寄せの基準を揃えるため左右のパディングは同値 */
  padding: 0 clamp(14px, 1.67vw, 24px);
  background: -webkit-gradient(
    linear,
    right top,
    left bottom,
    from(#f0d800),
    color-stop(66%, #ff9a00)
  );
  background: linear-gradient(225deg, #f0d800 0%, #ff9a00 66%);
}

/* アイコンはボタン幅に比例させ、中央寄せしたテキストと重ならないようにする */
.cta-bottom__action .top-common__button--center span:before {
  width: clamp(22px, 2.22vw, 32px);
  height: clamp(22px, 2.22vw, 32px);
  right: clamp(10px, 1.04vw, 15px);
}

.cta-bottom__action .top-common__button--center span:after {
  width: clamp(24px, 2.5vw, 36px);
  height: clamp(5px, 0.56vw, 8px);
  right: clamp(17px, 1.74vw, 25px);
}

/* お役立ち資料（アイコン付きボタン・カンプの #10BAF3） */
.cta-bottom__action .cta-bottom__container-button.--file {
  width: 100%;
  max-width: 320px;
  border: none;
  background: #10baf3;
  min-height: clamp(48px, 4.86vw, 70px);
  font-size: clamp(13px, 1.3vw, 20px);
  padding: 0 clamp(10px, 1.2vw, 30px);
}

.cta-bottom__action .cta-bottom__container-button.--file:before {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* --- 1000px 以下は縦積み（写真はコピーの下） --- */
@media screen and (max-width: 1000px) {
  .cta-bottom {
    padding-top: 0;
  }

  .cta-bottom__inner {
    padding: 28px 20px 32px;
  }

  .cta-bottom__group-flex.cta-bottom__group-flex--ambassador {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 24px 20px 20px;
  }

  .cta-bottom__body {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 100%;
  }

  .cta-bottom__ambassador {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    position: static;
    width: 100%;
    max-width: 300px;
    margin: 12px auto 0;
  }

  .cta-bottom__ambassador-img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-bottom__ambassador-caption {
    /* margin-top（写真下端への重なり）だけ残し、左右・下は詰めない */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-size: clamp(8px, 1.2vw, 10px);
  }

  .cta-bottom__br-sp {
    display: block;
  }

  .cta-bottom__actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
  }

  .cta-bottom__action {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 100%;
    max-width: 320px;
  }

  .cta-bottom__action-label {
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .cta-bottom__lead-sub {
    font-size: 16px;
  }

  .cta-bottom__lead-main {
    font-size: 30px;
  }

  .cta-bottom__lead-text {
    font-size: 13px;
  }

  .cta-bottom__ambassador-caption {
    font-size: 9px;
  }

  .cta-bottom__action .cta-bottom__button.top-common__button,
  .cta-bottom__action .cta-bottom__container-button.--file {
    font-size: 14px;
  }
}