@charset "UTF-8";
/* ==========================================================
   事業内容一覧ページ（/service/）リニューアル 2026-10-28
========================================================== */

/* -------------------------------------------------------------
   FV（中央揃え版）：Figma 412:751。パンくずはFVの上（/example/ と同じ並び）
   ------------------------------------------------------------- */
.sv-fv2 {
  overflow: hidden;
  background: #fff;
}

.sv-fv2__inner {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 120px 20px 0;
  text-align: center;
}

/* 背景の英字：/example/ の .archive-common__head::before と同じサイズ・色。
   位置は /example/ と見出しとの位置関係を合わせる（リード文が2行で長いため、まとまりの中央基準だと下にずれる）。
   /example/ 実測：英字の中心＝見出しの上端から PC 約25px。SP は top 10px・80px（ユーザー調整） */
.sv-fv2__head {
  position: relative;
}

.sv-fv2__head::before {
  content: attr(data-en);
  display: block;
  position: absolute;
  top: 25px;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  color: #f3f3f3;
  font-family: "Rozha One", serif;
  font-size: 170px;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.sv-fv2__title {
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  background: linear-gradient(to left, #ddd702, #eba138);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sv-fv2__text {
  padding-top: 32px;
  color: #000;
  font-family: "Noto Sans jp", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

@media screen and (max-width: 767px) {
  .sv-fv2__inner {
    padding: 64px 16px 0;
  }

  /* SP の位置・サイズ（ユーザー調整値） */
  .sv-fv2__head::before {
    top: 10px;
    font-size: 80px;
  }

  .sv-fv2__title {
    font-size: 26px;
  }

  .sv-fv2__text {
    padding-top: 20px;
    font-size: 14px;
    text-align: left;
  }
}

/* -------------------------------------------------------------
   本文
   ------------------------------------------------------------- */
/* SPだけ改行する br */
.sv-renewal .sv-br-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .sv-renewal .sv-br-sp {
    display: inline;
  }
}

/* PCだけ改行する br（本文と FV） */
.sv-renewal .sv-br-pc,
.sv-fv2 .sv-br-pc {
  display: none;
}

@media screen and (min-width: 768px) {
  .sv-renewal .sv-br-pc,
  .sv-fv2 .sv-br-pc {
    display: inline;
  }
}

.sv-renewal {
  font-family: "Noto Sans jp", "Noto Sans JP", sans-serif;
  color: #1a1a1a;
}

/* 既存 .page-service__content の上余白(130px)だとパンくずとの間が空きすぎるため詰める。
   ワイヤーどおりパンくずの帯だけ白、その下はグレー */
.page-service__content.sv-renewal {
  padding-top: 0;
  padding-bottom: 0;
}

.sv-renewal .sv-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
}

/* 背景は白（ユーザー指示。クラス名は --gray のまま） */
.sv-renewal .sv-section--gray {
  background: #fff;
}

.sv-renewal .sv-section--other {
  padding: 80px 0;
  background: #fff;
}

/* 背景が全セクション白なので、続くセクションの上余白は0に（間が 96px＋96px にならないように。SPも同じ） */
.sv-renewal .sv-section + .sv-section {
  padding-top: 0;
}

.sv-renewal .sv-section__inner {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}

/* 見出し：TOPの .rn-heading と同じ（英字＋グラデーションの明朝） */
.sv-renewal .sv-heading__en {
  color: #1a1a1a;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.sv-renewal .sv-heading__title {
  display: inline-block;
  margin-top: 16px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  background: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sv-renewal .sv-lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.8;
}

/* 小見出し：TOPの .rn-subtitle と同じ（■＋明朝） */
.sv-renewal .sv-subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.7;
}

.sv-renewal .sv-subtitle:before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(to right, #eba139, #dcd900);
}

/* カード一覧（PC3列・タブレット2列・SP1列）。参考デザイン Figma 412:762 */
.sv-renewal .sv-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* カード共通：角丸16px・枠線なし・中身は中央揃えで縦積み */
.sv-renewal .sv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 40px;
  border-radius: 16px;
}

/* SNS運用カード：グレー背景、画像もカードの内側 */
.sv-renewal .sv-card--card {
  background: #f7f7f7;
}

.sv-renewal .sv-card__img {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.sv-renewal .sv-card__img img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.sv-renewal .sv-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* カードタイトル：グラデーションの明朝 PC・SPとも20px（ユーザー指示） */
.sv-renewal .sv-card__title {
  align-self: flex-start;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  background-image: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sv-renewal .sv-card__text {
  align-self: stretch;
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.sv-renewal .sv-card__list {
  align-self: stretch;
  color: #1a1a1a; /* 説明文と同じ色に統一 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

/* 行頭記号：TOPの「向いている企業様」（.rn-fit__list li:before）と同じ黄グラデの四角。
   文字が14px（TOPは18px）なので四角は8px、行の高さ（14px×1.8）の中央に置く */
.sv-renewal .sv-card__list li {
  position: relative;
  padding-left: 16px;
}

.sv-renewal .sv-card__list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 8px;
  height: 8px;
  background: linear-gradient(to right, #eba139, #dcd900);
}

/* 業種カード：クリーム背景（TOPの提供サービス背景色） */
.sv-renewal .sv-card--industry {
  background: #fcfaeb;
}

/* アイコン：120px の白い円 */
.sv-renewal .sv-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
}

.sv-renewal .sv-card__icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 72px;
  max-height: 72px;
}

.sv-renewal .sv-card__label-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  width: 100%;
  background-image: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sv-renewal .sv-card__label-sub {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 1.2;
}

.sv-renewal .sv-card__catch {
  align-self: stretch;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* カードのボタン：グラデーション背景の白文字ピル（中央）。全カードで同じ幅 */
.sv-renewal .sv-pill {
  display: inline-block;
  box-sizing: border-box;
  width: 280px;
  max-width: 100%;
  margin-top: auto;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(to right, #eba139, #dcd900);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: opacity 0.3s;
}

.sv-renewal .sv-pill:hover {
  opacity: 0.7;
}

/* そのほかの業種：ボタンで業種タグ一覧を開閉（details/summary） */
.sv-renewal .sv-more {
  margin-top: 40px;
}

.sv-renewal .sv-more__button {
  position: relative;
  display: flex;
  align-items: center;
  width: 303px;
  max-width: 100%;
  height: 63px;
  margin: 0 auto;
  padding: 0 79px 0 23px;
  border-radius: 999px;
  background: linear-gradient(to right, #eba139, #dcd900);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: opacity 0.3s;
}

.sv-renewal .sv-more__button::-webkit-details-marker {
  display: none;
}

.sv-renewal .sv-more__button:hover {
  opacity: 0.8;
}

/* 開閉アイコン：白い丸にプラス、開いたらマイナス（縦棒を消す）。線はボタンと同じグラデーション */
.sv-renewal .sv-more__icon {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
}

.sv-renewal .sv-more__icon::before,
.sv-renewal .sv-more__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(to right, #eba139, #dcd900);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s, opacity 0.3s;
}

/* 横棒 */
.sv-renewal .sv-more__icon::before {
  width: 16px;
  height: 2px;
}

/* 縦棒（開いたら消えてマイナスになる） */
.sv-renewal .sv-more__icon::after {
  width: 2px;
  height: 16px;
  background: linear-gradient(to bottom, #eba139, #dcd900);
}

.sv-renewal .sv-more[open] .sv-more__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 業種タグ一覧 */
.sv-renewal .sv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  padding: 30px;
  background: #f7f7f7;
}

/* タグ：下の対応エリア一覧のリンク（.area-service__groupTag）と同じ文字サイズ・枠・ホバー */
.sv-renewal .sv-tags a {
  display: block;
  padding: 8px 10px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: 0.5s;
}

.sv-renewal .sv-tags a:hover {
  background: linear-gradient(to left, #ddd702, #eba138);
  border-color: transparent;
  color: #fff;
}

/* 対応エリア（全国対応）：Figma 413:1672 */
.sv-renewal .sv-area__title {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  text-align: center;
  background: linear-gradient(to left, #ddd702, #eba138);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sv-renewal .sv-area__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}

/* 地方ごとの帯：業種タグ一覧と同じタグの見た目、地方名だけグレー地に白文字 */
.sv-renewal .sv-area__region {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 30px;
  background: #f7f7f7;
}

.sv-renewal .sv-area__region a {
  display: block;
  padding: 5px 20px;
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  transition: opacity 0.3s;
}

.sv-renewal .sv-area__region .sv-area__region-name a {
  background: #999;
  color: #fff;
}

.sv-renewal .sv-area__region a:hover {
  opacity: 0.7;
}

/* 対応エリア一覧（ブログ記事下と同じ .area-service）の見出し：このページでは他の見出しと同じ明朝 36px（SP 22px） */
.sv-renewal .area-service__head-title {
  font-family: "Noto Serif JP", serif;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .sv-renewal .area-service__head-title {
    font-size: 22px;
  }
}

/* その他の事業（SES） */
.sv-renewal .sv-other__box {
  margin-top: 24px;
  padding: 24px;
  background: #f7f7f7;
  border-radius: 16px;
}

.sv-renewal .sv-other__box-text {
  margin-top: 12px;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.8;
}

/* 提携先一覧：右側が空くので PC は2カラム（上から下へ並べる）、SP は1カラム。
   右の列を左に寄せるため幅を絞り、列の間に薄い縦線 */
.sv-renewal .sv-other__list {
  max-width: 800px;
  column-count: 2;
  column-gap: 48px;
  column-rule: 1px solid #dcdcdc;
  margin-top: 4px;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.8;
}

.sv-renewal .sv-other__list li {
  break-inside: avoid;
}

@media screen and (max-width: 1100px) {
  .sv-renewal .sv-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .page-service__content.sv-renewal {
    padding-top: 0;
    padding-bottom: 0;
  }

  .sv-renewal .sv-section {
    padding: 64px 0;
  }

  .sv-renewal .sv-section--other {
    padding: 64px 0;
  }

  .sv-renewal .sv-section__inner {
    padding: 0 16px;
  }

  .sv-renewal .sv-heading__en {
    font-size: 18px;
  }

  .sv-renewal .sv-heading__title {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.4;
  }

  .sv-renewal .sv-lead {
    margin-top: 16px;
    font-size: 14px;
  }

  .sv-renewal .sv-lead br {
    display: none;
  }

  .sv-renewal .sv-subtitle {
    gap: 10px;
    font-size: 20px;
    line-height: 1.5;
  }

  .sv-renewal .sv-subtitle:before {
    width: 12px;
    height: 12px;
  }

  .sv-renewal .sv-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .sv-renewal .sv-card {
    padding: 20px 16px;
  }

  .sv-renewal .sv-card__title {
    font-size: 20px;
  }

  /* 「YouTube運用代行・コンサルティング」を1行に収める。最大20px（PCと同じ）、画面幅に合わせて縮める
     （実測：-0.01emで 文字幅＝約17.05×font-size、使える幅＝画面幅−79px。424px幅以上で20px、390pxで約18px、375pxで約17.3px） */
  .sv-renewal .sv-card__label-title {
    font-size: min(20px, calc((100vw - 80px) / 17.2));
  }

  .sv-renewal .sv-card__label-sub {
    font-size: 20px; 
  }

  .sv-renewal .sv-card__text,
  .sv-renewal .sv-card__list,
  .sv-renewal .sv-other__box-text,
  .sv-renewal .sv-other__list {
    font-size: 13px;
  }

  .sv-renewal .sv-other__list {
    column-count: 1;
    column-rule: none;
  }

  .sv-renewal .sv-card__list li::before {
    top: 8px;
  }

  .sv-renewal .sv-more {
    margin-top: 32px;
  }

  /* 「コンサルティング全国対応中！」が1行に収まるサイズ（24pxだと3行になる） */
  .sv-renewal .sv-area__title {
    font-size: 22px;
    line-height: 1.4;
  }

  .sv-renewal .sv-area__list {
    gap: 16px;
    margin-top: 24px;
  }

  .sv-renewal .sv-area__region {
    gap: 8px;
    padding: 16px;
  }

  .sv-renewal .sv-area__region a {
    padding: 4px 12px;
    font-size: 13px;
  }

  .sv-renewal .sv-tags {
    gap: 8px;
    margin-top: 24px;
    padding: 16px;
  }

  .sv-renewal .sv-tags a {
    padding: 8px 6px;
    font-size: 12px;
  }

  .sv-renewal .sv-other__box {
    margin-top: 16px;
    padding: 20px;
  }
}

/* 料金ページ（/price/）でも同じ見出しエリアを使う。見出しが長く折り返すことがあるので行間を持たせる */
.sv-fv2__title--long {
  line-height: 1.35;
}

/* 説明文のないページ（ビーヘルシーとは・代表挨拶）は見出しエリアが低く、背景の英字の下が切れるので下に余白を足す */
.sv-fv2--about .sv-fv2__head,
.sv-fv2--shibata-akiya .sv-fv2__head {
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .sv-fv2--about .sv-fv2__head,
  .sv-fv2--shibata-akiya .sv-fv2__head {
    padding-bottom: 28px;
  }
}

/* 2026-11-12 よくある質問：見出しエリアを低くしたあと、見出しと最初の質問のあいだが約330px空いていたので詰める
   （本文側の上余白 130px＋120px＋80px が重なっていた） */
.sv-fv2--faq + .page-sns__content {
  padding-top: 56px;
}

.sv-fv2--faq + .page-sns__content .page-sns-faq__inner {
  padding-top: 0;
}

.sv-fv2--faq + .page-sns__content .page-sns-faq__list {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .sv-fv2--faq + .page-sns__content {
    padding-top: 32px;
  }
}

/* =============================================================
   見出しエリアの下の余白をそろえる（2026-11-12）
   見出しエリアを低くしたあと、本文側の大きな上余白が残っていたため。PC のみ
   ============================================================= */
@media screen and (min-width: 768px) {
  body.page-about .sv-fv2 ~ .page-about__content,
  body.page-about .page-about__content {
    padding-top: 72px;
  }

  body.page-company .page-company__content {
    margin-top: 0;
  }

  body.page-company .page-company-top {
    padding-top: 72px;
  }

  body.page-customer .page-member__content {
    padding-top: 16px;
  }

  body.page-member .page-member__content {
    padding-top: 72px;
  }

  body.page-movie .page-member__content {
    padding-top: 0;
  }

  body.page-recruit .page-about-slogan {
    margin-top: 8px;
  }

  body.page-shibata-akiya .page-member-greeting {
    padding-top: 36px;
  }

  body.page-sns .page-sns__content {
    padding-top: 72px;
  }
}

/* =============================================================
   会社概要：冒頭の会社の要約（2026-11-12）
   ============================================================= */
.company-lead {
  padding: 56px 0 8px;
  background: #fff;
}

.company-lead__inner {
  width: 1000px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

.company-lead__text {
  font-size: 17px;
  line-height: 2;
  color: #1a1a1a;
}

.company-lead__text strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, #ffe45c 62%);
}

.company-lead a,
.page-company-information__table-body p > a[target="_blank"] {
  color: #1a6fd4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.company-lead a:hover,
.page-company-information__table-body p > a[target="_blank"]:hover {
  text-decoration: none;
}

.company-lead__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin-top: 32px;
  padding: 12px 32px;
  border-radius: 16px;
  background: #f5f5f3;
}

.company-lead__fact {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e2de;
  font-size: 15px;
  line-height: 1.7;
  color: #1a1a1a;
}

.company-lead__fact:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.company-lead__fact dt {
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .company-lead {
    padding: 36px 0 0;
  }

  .company-lead__inner {
    max-width: calc(100% - 40px);
  }

  .company-lead__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .company-lead__facts {
    grid-template-columns: 1fr;
    margin-top: 24px;
    padding: 6px 20px;
  }

  .company-lead__fact {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
  }

  .company-lead__fact:nth-last-child(2) {
    border-bottom: 1px solid #e2e2de;
  }
}

.company-lead__fact dd {
  text-align: left;
}

/* =============================================================
   お客様の声：下部の「支援実績・料金」へのリンクとCTA（2026-11-12）
   ============================================================= */
.customer-next {
  padding: 80px 0 96px;
  background: #f5f5f3;
}

.customer-next__inner {
  width: 1000px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

.customer-next__title {
  font-family: "Noto Sans JP", "Noto Sans jp", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #1a1a1a;
}

.customer-next__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.customer-next__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 28px 32px 30px;
  border-radius: 16px;
  color: #1a1a1a;
  background: #fff;
  box-shadow: 0 12px 28px -20px rgba(26, 26, 26, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.customer-next__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -18px rgba(26, 26, 26, 0.45);
}

.customer-next__label {
  font-family: "Noto Sans JP", "Noto Sans jp", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.customer-next__text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

.customer-next__btn {
  margin-top: 20px;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: #1a1a1a;
}

.customer-next__cta {
  margin-top: 56px;
  text-align: center;
}

.customer-next__cta-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: #1a1a1a;
}

.customer-next__cta-btn {
  display: inline-block;
  min-width: 360px;
  margin-top: 20px;
  padding: 20px 40px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  background: #ffe45c;
  box-shadow: 0 10px 22px -12px rgba(26, 26, 26, 0.45);
  transition: transform 0.2s ease;
}

.customer-next__cta-btn:hover {
  transform: translateY(-2px);
}

.customer-next__cta-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

@media screen and (max-width: 767px) {
  .customer-next {
    padding: 56px 0 64px;
  }

  .customer-next__inner {
    max-width: calc(100% - 40px);
  }

  .customer-next__title {
    font-size: 21px;
  }

  .customer-next__list {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .customer-next__link {
    padding: 22px 22px 24px;
  }

  .customer-next__label {
    font-size: 19px;
  }

  .customer-next__cta {
    margin-top: 40px;
  }

  .customer-next__cta-text {
    font-size: 16px;
  }

  .customer-next__cta-btn {
    display: block;
    min-width: 0;
    padding: 18px 20px;
    font-size: 18px;
  }
}