@charset "UTF-8";
/* =============================================================
   TOP / ファーストビュー デザイン更新（Figma: node 1-4300）
   SCSSビルドと分離・手動メンテ。style.css の後に読み込む。
   ※ ボタン（お役立ち資料一覧をみる／無料相談を申し込む）の
     デザインとアイコンは従来のまま。
   ============================================================= */

/* -------------------------------------------------------------
   FV の内側余白
   PC（1001px〜）は余白なし。1000px 以下は style.css の指定を踏襲。
   ------------------------------------------------------------- */
@media screen and (min-width: 1001px) {
  .hero__inner {
    padding: 0;
  }
}

/* -------------------------------------------------------------
   費用対「成果」
   Figma: 費用対 128px / 成果 174px（Noto Serif JP SemiBold）
   成果 はグラデーション文字ではなく、グラデーションの地に白抜き。
   ------------------------------------------------------------- */
.hero__body-top-head {
  font-size: clamp(70px, 6.667vw, 128px);
  font-weight: 600;
  line-height: 1.2;
}

.hero__body-top-head span {
  display: inline-block;
  margin-left: 0.05em;
  padding-block: 8px;
  font-size: clamp(95px, 9.0625vw, 174px);
  line-height: 1;
  color: #fff;
  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: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
}

/* Figma では装飾の引用符が無くなったため非表示 */
.hero__body-top-head span:before,
.hero__body-top-head span:after {
  content: none;
}

/* -------------------------------------------------------------
   SNS運用のプロフェッショナル集団
   Figma: 黒帯 + 白抜き / Noto Sans JP Bold 45px
   ------------------------------------------------------------- */
.hero__body-top-title {
  display: inline-block;
  margin-top: 24px;
  padding: 0 0.22em 0 0.16em;
  background-color: #000;
  color: #fff;
  font-family: "Noto Sans CJKjp", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.344vw, 45px);
  line-height: 1.51;
}

/* -------------------------------------------------------------
   本文・ボタンの並び
   Figma: 本文は 737px 幅（≒26.5文字）で折り返し、ボタンはその下段
   ------------------------------------------------------------- */
.hero__body-bottom {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-top: 27px;
  gap: 38px;
}

.hero__body-bottom-left-text {
  max-width: 26.5em;
}

/* -------------------------------------------------------------
   News（最新のお知らせ）
   Figma: 背景 #F7F7F7 + ドロップシャドウ（枠線なし）
   ------------------------------------------------------------- */
.hero-news {
  max-width: 849px;
  margin-top: clamp(40px, 4.1vw, 79px);
}

.hero-news__inner {
  border: none;
  background-color: #f7f7f7;
  -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.13);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.13);
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .hero__body-top {
    text-align: center;
  }

  .hero__body-top-head {
    font-size: 2.3125rem;
  }

  .hero__body-top-head span {
    font-size: 3.125rem;
    margin-left: 0.05em;
  }

  .hero__body-top-title {
    margin-top: 0.75rem;
    font-size: 1.125rem;
  }

  .hero__body-bottom {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 1.875rem;
    gap: 1.5rem;
  }

  .hero__body-bottom-left-text {
    max-width: none;
  }
}