@charset "UTF-8";
/* =============================================================
   TOPリニューアル 
   ============================================================= */

/* =============================================================
   共通パーツ（FV直下の各セクションで共通）
   ・main のはみ出し
   ・共通見出し／小見出し
   ・ボタンのホバー
   ・SP だけ改行する br
   ============================================================= */

/* -------------------------------------------------------------
   main のはみ出し
   ------------------------------------------------------------- */
/* リニューアル TOP の main：既存 style.css の main { overflow: clip; } で
   ページ末尾付近の人物のはみ出しが切れるため、縦方向だけ見せる（横は従来どおり clip） */
main.top-renewal,
main:has(> main.top-renewal) {
  overflow-x: clip;
  overflow-y: visible;
}

/* TOP（body.home）では、既存 style.css の下層ページ用の指定（body:not(.home) の上余白 80px＝固定ヘッダー分、
   body.page のゴシック）が当たらないため、確認用ページ（/renewal/）で作ったときと同じ状態を main に指定する */
body.home main.top-renewal {
  margin-top: 80px;
  margin-top: 5rem;
  /* 末尾は sans-serif：端末に Noto Sans JP が無い場合（iPhone 等）に明朝へ落ちないようにする */
  font-family: "Noto Sans jp", "Noto Sans JP", sans-serif;
}

/* -------------------------------------------------------------
   共通見出し（英字＋タイトル）Figma: 208:3305 ほか
   <div class="rn-heading">
     <p class="rn-heading__en -en--font">English</p>
     <h2 class="rn-heading__title">タイトル</h2>
   </div>
   ------------------------------------------------------------- */
.rn-heading {
  position: relative;
  z-index: 1;
}

.rn-heading__en {
  color: #1a1a1a;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
}

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

@media screen and (max-width: 767px) {
  .rn-heading__en {
    font-size: 18px;
  }

  .rn-heading__title {
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.4;
  }
}

/* 共通見出し：バリエーション
   rn-heading--center … 中央揃え
   rn-heading--black  … タイトルをグラデーションではなく黒文字に */
.rn-heading--center {
  text-align: center;
}

.rn-heading--black .rn-heading__title {
  background: none;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}

/* -------------------------------------------------------------
   共通小見出し（■＋タイトル）
   <h3 class="rn-subtitle">…</h3>（提供サービスのカテゴリ見出しと同じ見た目）
   ------------------------------------------------------------- */
.rn-subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.7;
}

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

@media screen and (max-width: 767px) {
  .rn-subtitle {
    gap: 10px;
    font-size: 20px;
    line-height: 1.5;
  }

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

/* -------------------------------------------------------------
   ボタンのホバー（/renewal/ 内のボタン共通）
   ボタン全体にカーソルが乗ったら、矢印を右へ 4px 動かす（「詳細を見る」と同じ量）
   ------------------------------------------------------------- */
.top-renewal .hero__body-bottom-right-button span:after {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* 既存の矢印は translateY(-50%) で上下中央にしているため、それを保ったまま右へ */
.top-renewal .hero__body-bottom-right-button:hover span:after {
  -webkit-transform: translate(4px, -50%);
  transform: translate(4px, -50%);
}

/* -------------------------------------------------------------
   PC だけ改行する br（<br class="rn-br-pc">）
   ------------------------------------------------------------- */
.rn-br-pc {
  display: none;
}

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

/* -------------------------------------------------------------
   SP だけ改行する br（<br class="rn-br-sp">）
   ------------------------------------------------------------- */
.rn-br-sp {
  display: none;
}

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

/* =============================================================
   TOPリニューアル FV
   ボタン・背景文字・実績・ロゴは既存クラスを流用し、差分のみ上書き。
   ============================================================= */
.top-renewal .rn-fv {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* 背景の斜め「BEHEALTHY」：FV内に収める */
.top-renewal .rn-fv__bg {
  left: 0;
  height: 100%;
}

.top-renewal .rn-fv__inner {
  max-width: 1186px;
  margin: 0 auto;
  padding: 91px 20px 0;
}

.top-renewal .rn-fv__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: 40px;
}

.top-renewal .rn-fv__body {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 660px;
  flex: 0 1 660px;
  min-width: 0;
  color: #1a1a1a; /* 既存サイト共通の黒に統一 */
}

/* 集客・採用など事業成果にコミット */
.top-renewal .rn-fv__lead {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(18px, 1.944vw, 28px);
  line-height: 1.5;
}

/* 費用対“成果”を 追求する法人SNS運用の プロフェッショナル集団 */
.top-renewal .rn-fv__title {
  margin-top: 12px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(26px, 3.333vw, 48px);
  line-height: 1.4;
  white-space: nowrap;
}

/* 費用対“成果”：極太＋黄→オレンジのグラデーション（Figma 311:2750） */
.top-renewal .rn-fv__title-l {
  display: inline-block;
  font-weight: 900;
  font-size: clamp(34px, 4.444vw, 64px);
  background: linear-gradient(193.29deg, #f0d800 0%, #ff9a00 66%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-renewal .rn-fv__text {
  max-width: 40.5em; /* Figma 同様「データを」で改行させる */
  margin-top: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
}

/* ボタン（注釈＋ボタンを横並び） */
.top-renewal .rn-fv__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
}

.top-renewal .rn-fv__button-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  width: 282px;
}

.top-renewal .rn-fv__button-note {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.top-renewal .rn-fv__button {
  width: 100%;
  max-width: 288px;
  height: 63px;
  margin: 0;
  padding: 0 72px 0 21px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

.top-renewal .rn-fv__button span:before {
  width: 30px;
  height: 30px;
  right: 14px;
}

.top-renewal .rn-fv__button span:after {
  width: 34px;
  height: 8px;
  right: 23px;
}

/* アンバサダー（Figma: 幅446px・帯は画像下端に重ねる） */
.top-renewal .rn-fv__ambassador {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: clamp(260px, 31vw, 446px);
}

.top-renewal .rn-fv__ambassador .hero__ambassador-caption {
  padding: 14px 4px;
  background-color: #1a1a1a;
  font-size: 12px;
  line-height: 1.75;
}

/* 実績（Figma: 直径267px × 4・間隔23px） */
.top-renewal .rn-fv__stats {
  margin-top: 80px;
  padding: 0;
}

.top-renewal .rn-fv__stats .stats__list {
  grid-template-columns: repeat(4, 1fr);
  gap: 23px;
  max-width: 1136px;
  margin: 0 auto;
}

.top-renewal .rn-fv__stats .stats__item-head {
  font-size: 15px;
  color: #1a1a1a;
}

.top-renewal .rn-fv__stats .stats__item-value {
  margin-top: 13px;
  font-size: 51px;
}

.top-renewal .rn-fv__stats .stats__unit {
  font-size: 30px;
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}

/* 支援企業ロゴ */
.top-renewal .rn-fv__slider {
  margin-top: 40px;
  padding-block: 15px;
}

.top-renewal .rn-fv__slider .slider__window {
  margin-top: 0;
}

/* ループの継ぎ目対策：移動量の計算に使う値を、実際のロゴ間隔（gap: 1rem）に合わせる */
.top-renewal .rn-fv__slider .slider__track {
  --slider-gap: 1rem;
  /* スマホでのカクつき対策：流れる帯を独立したレイヤーにして描画を安定させる */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.top-renewal .rn-fv__slider .slider__item {
  max-width: 236px;
  height: 121px;
  padding: 24px 30px;
}

/* -------------------------------------------------------------
   タブレット
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .top-renewal .rn-fv__main {
    gap: 24px;
  }

  .top-renewal .rn-fv__text {
    font-size: 15px;
  }

  .top-renewal .rn-fv__button-item {
    width: 260px;
  }

  .top-renewal .rn-fv__button {
    font-size: 15px;
  }

  .top-renewal .rn-fv__stats {
    margin-top: 56px;
  }

  .top-renewal .rn-fv__stats .stats__list {
    gap: 14px;
  }

  .top-renewal .rn-fv__stats .stats__item-head {
    font-size: 13px;
  }

  .top-renewal .rn-fv__stats .stats__item-value {
    font-size: 38px;
  }

  .top-renewal .rn-fv__stats .stats__unit {
    font-size: 22px;
  }
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .top-renewal .rn-fv__inner {
    padding: 10px 16px 0;
  }

  .top-renewal .rn-fv__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;
  }

  .top-renewal .rn-fv__body {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .top-renewal .rn-fv__lead {
    font-size: 16px;
  }

  .top-renewal .rn-fv__title {
    margin-top: 4px;
    font-size: 24px;
  }

  .top-renewal .rn-fv__title-l {
    font-size: 32px;
  }

  .top-renewal .rn-fv__text {
    margin-top: 8px;
    font-size: 13px;
  }

  .top-renewal .rn-fv__buttons {
    -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: 8px;
    margin-top: 12px;
  }

  .top-renewal .rn-fv__button-item {
    width: 100%;
    max-width: 288px;
  }

  .top-renewal .rn-fv__button-note {
    font-size: 12px;
  }

  .top-renewal .rn-fv__button {
    height: 56px;
    font-size: 15px;
  }

  .top-renewal .rn-fv__ambassador {
    width: 100%;
    max-width: 17rem;
    margin: 16px auto 0
  }

  .top-renewal .rn-fv__ambassador .hero__ambassador-caption {
    padding: 10px 4px;
    font-size: 11px;
  }

  .top-renewal .rn-fv__stats {
    margin-top: 40px;
  }

  .top-renewal .rn-fv__stats .stats__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 400px; /* 丸は正円で横幅いっぱいに広がるため、500〜767px で大きくなりすぎないよう上限（丸は最大約194px） */
  }

  .top-renewal .rn-fv__stats .stats__item {
    padding: 5px;
  }

  .top-renewal .rn-fv__stats .stats__item-head {
    font-size: 12px;
  }

  .top-renewal .rn-fv__stats .stats__item-value {
    margin-top: 8px;
    font-size: 34px;
  }

  .top-renewal .rn-fv__stats .stats__unit {
    font-size: 20px;
  }

  .top-renewal .rn-fv__slider {
    margin-top: 24px;
    padding-block: 8px;
  }

  /* ロゴが既存より小さい分、既存サイトと同じ流れる速さ（約46px/秒）になるよう短くする
     1周 1760px（160px × 10 ＋ 間隔16px × 10）÷ 38s ≒ 46px/秒 */
  .top-renewal .rn-fv__slider .slider__track {
    -webkit-animation-duration: 38s;
    animation-duration: 38s;
  }

  /* 幅を固定：画像の読込前後で帯の全長（＝流れる速さ）が変わらないようにする */
  .top-renewal .rn-fv__slider .slider__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10rem;
    flex: 0 0 10rem;
    width: 10rem;
    height: 5rem;
    padding: 0.8rem 1.2rem;
  }
}

/* =============================================================
   About
   既存TOPの .top-concept（style.css）をそのまま流用し、差分のみ上書き。
   .rn-about 配下に限定。
   ============================================================= */

/* 文字色：既存サイト共通の黒（#1a1a1a）に統一 */
.rn-about .top-concept__right-en,
.rn-about .top-concept__right-text {
  color: #1a1a1a;
}

.rn-about .top-concept__right-text{
  line-height: 2;
}

/* 本文を2段落に分けたため、2段落目の上余白は詰める */
.rn-about .top-concept__right-text + .top-concept__right-text {
  margin-top: 0;
}

/* 背景の大きな英字：Concept → About */
.rn-about .top-concept__right:before {
  content: "About";
}

/* 背景の英字の位置（PCのみ。1000px以下は既存どおり中央寄せ） */
@media screen and (min-width: 1001px) {
  .rn-about .top-concept__right:before {
    right: 150px;
  }
}

/* 見出し：Figma 準拠で明朝（Noto Serif JP Bold 30px / 行間 1.4） */
.rn-about .top-concept__right-title span {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.4;
}

/* ビーヘルシーについて詳しく見る（Figma: 幅303px・本文から48px下） */
.rn-about__button-wrap {
  margin-top: 48px;
}

.rn-about .rn-about__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-about .rn-about__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-about .rn-about__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   SP（既存同様に中央揃え）
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  /* ボタンも中央揃え（見出し・本文が中央揃えになる幅に合わせる） */
  .rn-about__button-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 48px auto 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .rn-about .top-concept__right-title span {
    font-size: 20px;
  }

  .rn-about .top-concept__right-text {
    font-size: 14px;
    text-align: left;
  }

  .rn-about__button-wrap {
    margin-top: 32px;
    align-items: center;
  }

  .rn-about .rn-about__button {
    max-width: 288px;
    height: 56px;
    margin: 0 auto;
    font-size: 13px;
  }
}

/* =============================================================
   数字で見る成果（Figma: 196:2627）新規セクション
   .rn-number 配下に限定。黒は既存サイト共通の #1a1a1a に統一。
   ============================================================= */
.rn-number {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #f7f7f7;
}

/* 背景の大きな英字 */
.rn-number__bg-en {
  position: absolute;
  top: -38px; /* セクション上端で文字が切れすぎない位置 */
  left: 0;
  z-index: 0;
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 16.25vw, 234px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-number__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* カード（Figma: 3枚・間隔24px） */
.rn-number__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  margin-top: 56px;
}

.rn-number__card {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  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: 16px 20px 24px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  color: #1a1a1a;
  text-align: center;
}

/* 業種ラベル */
.rn-number__label {
  width: 100%;
  padding: 4px 16px;
  border-radius: 999px;
  background: linear-gradient(186deg, #f0d800 0%, #ff9a00 66%);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.45;
}

.rn-number__before {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
}

/* 矢印（素材は上向きのため反転） */
.rn-number__arrow {
  display: block;
  width: 20px;
  height: 12px;
  margin-top: 8px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rn-number__result {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
}

.rn-number__head {
  font-size: 18px;
  line-height: 1;
}

.rn-number__value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.rn-number__num {
  font-size: 72px;
  line-height: 1;
  background: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rn-number__unit {
  font-size: 20px;
  line-height: 1.45;
}

.rn-number__note {
  margin-top: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
}

/* -------------------------------------------------------------
   タブレット
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-number__list {
    gap: 16px;
  }

  .rn-number__card {
    padding: 14px 12px 20px;
  }

  .rn-number__label {
    padding: 4px 6px;
    border-radius: 16px; /* 狭い幅で2行になっても崩れないように */
    font-size: clamp(12px, 1.5vw, 14px);
  }

  .rn-number__num {
    font-size: 56px;
  }

  .rn-number__unit {
    font-size: 17px;
  }
}

/* -------------------------------------------------------------
   SP（カードを縦並び）
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-number {
    padding: 64px 0;
  }

  .rn-number__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-number__inner {
    padding: 0 16px;
  }

  .rn-number__list {
    -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: 16px;
    margin-top: 32px;
  }

  .rn-number__card {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    max-width: 400px;
  }

  .rn-number__label {
    font-size: 16px;
  }

  .rn-number__num {
    font-size: 56px;
  }

  .rn-number__unit {
    font-size: 18px;
  }
}

/* =============================================================
   提供サービス
   .rn-service 配下に限定。黒は #1a1a1a に統一。
   ============================================================= */
.rn-service {
  position: relative;
  /* 上余白：波（高さ16vh・底は上端から約16vh-60px）の底から見出し文字まで約96px */
  padding: calc(16vh + 26px) 0 120px;
  background-color: #fcfaeb;
}

/* 上端の波（既存 .top-problem__wave-top と同じ指定。色だけ前セクションのグレーに） */
.rn-service__wave {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 16vh;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  pointer-events: none;
}

/* wavify は fill 属性で白を指定するため、CSS で上書き */
.rn-service__wave path {
  fill: #f7f7f7;
}

.rn-service__bg-en {
  position: absolute;
  top: 21px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 16.25vw, 234px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-service__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left; /* 既存の両端揃えを打ち消す */
}

.rn-service__group {
  margin-top: 80px;
}

.rn-service__group + .rn-service__group {
  margin-top: 56px;
}

/* カテゴリ見出し（■＋タイトル） */
.rn-service__group-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.7;
}

.rn-service__group-title:before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(to right, #eba139, #dcd900);
}

/* グラデーション文字（タイトル・リンク共通） */
.rn-service__main-title,
.rn-service__card-title,
.rn-service__industry-title,
.rn-service__main-button,
.rn-service__link {
  background-image: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 主力：SNS運用代行（横長カード） */
.rn-service__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 24px;
  background-color: #fff;
  border: 1px solid #ececec;
}

.rn-service__main-img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 320px;
}

.rn-service__main-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 213px;
  -o-object-fit: cover;
  object-fit: cover;
}

.rn-service__main-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  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-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 32px 40px;
}

.rn-service__main-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.45;
}

.rn-service__main-text {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* 枠線ボタン（文字はグラデーション、枠はオレンジ） */
.rn-service__main-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 240px;
  height: 46px;
  margin-top: 24px;
  padding: 0 20px;
  border: 1px solid #eba139;
  border-radius: 999px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* 詳細を見る（下線リンク） */
.rn-service__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0 4px 4px;
  border-bottom: 1px solid #eba139;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-service__main-button img,
.rn-service__link img {
  display: block;
  width: 19px;
  height: 5px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.rn-service__main-button:hover,
.rn-service__link:hover {
  opacity: 0.7;
}

/* ホバーで矢印を右へ 4px */
.rn-service__main-button:hover img,
.rn-service__link:hover img {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* YouTube / Instagram / TikTok（3カード） */
.rn-service__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.rn-service__card {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.rn-service__card-img img {
  display: block;
  width: 100%;
  height: 190px;
  -o-object-fit: cover;
  object-fit: cover;
}

.rn-service__card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-top: none;
}

.rn-service__card-title {
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
}

.rn-service__card-text {
  margin-top: 12px;
  margin-bottom: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.8;
}

.rn-service__card-body .rn-service__link {
  margin-top: auto;
}

/* サービス一覧を見る（About と同じボタン） */
.rn-service__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-service .rn-service__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-service .rn-service__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-service .rn-service__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* 業界・業種特化（3列 × 2段。1100px以下は2列、SPは1列） */
.rn-service__industry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.rn-service__industry-item {
  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-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
}

.rn-service__industry-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.rn-service__industry-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 60px;
  height: auto;
  max-height: 77px;
  -o-object-fit: contain;
  object-fit: contain;
}

.rn-service__industry-text {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  container-type: inline-size;
}

/* 2行目「YouTube運用代行・コンサルティング」は途中で改行させず、
   テキスト幅に合わせて文字サイズを縮める（最大 15px） */
.rn-service__industry-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: min(15px, 5.6cqi);
  line-height: 1.5;
}

/* br の代わりに2行目をブロック化して改行 */
.rn-service__industry-title-line {
  display: block;
  white-space: nowrap;
}

.rn-service__industry-sub {
  margin-top: 12px;
  color: #595959;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

/* -------------------------------------------------------------
   タブレット
   ------------------------------------------------------------- */
/* 3列だと文字が小さくなりすぎる幅は2列に */
@media screen and (max-width: 1100px) {
  .rn-service__industry {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1000px) {
  .rn-service {
    padding-bottom: 96px;
  }

  .rn-service__main-img {
    width: 36%;
  }

  .rn-service__main-body {
    padding: 24px 28px;
  }

  .rn-service__main-title {
    font-size: 22px;
  }

  .rn-service__main-text {
    font-size: 15px;
  }

  .rn-service__cards {
    gap: 16px;
  }

  .rn-service__card-title {
    font-size: 15px;
  }
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-service {
    padding: 104px 0 64px;
  }

  .rn-service__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 50px; /* serviceのみ上側曲線のため位置がイレギュラー */
  }

  .rn-service__inner {
    padding: 0 16px;
  }

  .rn-service__group {
    margin-top: 48px;
  }

  .rn-service__group + .rn-service__group {
    margin-top: 48px;
  }

  .rn-service__group-title {
    gap: 10px;
    font-size: 20px;
    line-height: 1.5;
    align-items: baseline;
  }

  .rn-service__group-title:before {
    width: 12px;
    height: 12px;
  }

  .rn-service__main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 16px;
  }

  .rn-service__main-img {
    width: 100%;
  }

  .rn-service__main-img img {
    height: 190px;
    min-height: 0;
  }

  .rn-service__main-body {
    padding: 20px;
  }

  .rn-service__main-title {
    font-size: 20px;
  }

  .rn-service__main-text {
    font-size: 14px;
  }

  .rn-service__main-button {
    margin-top: 16px;
  }

  .rn-service__cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }

  .rn-service__card {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .rn-service__card-title {
    font-size: clamp(13px, 3.7vw, 16px); /* 「…コンサルティング」を1行に収める */
  }

  .rn-service__button-wrap {
    margin-top: 32px;
  }

  .rn-service .rn-service__button {
    max-width: 288px;
    height: 56px;
    font-size: 13px;
  }

  .rn-service__industry {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .rn-service__industry-label {
    gap: 10px;
    padding: 8px 0;
  }

  .rn-service__industry-icon {
    width: 40px;
  }
}

/* =============================================================
   サービス内CTA
   .rn-cta 配下に限定。田村淳さんは帯の上下にはみ出す（Figma：上38px・下14px）。
   ============================================================= */
.rn-cta {
  position: relative;
  z-index: 1;
  padding: 64px 20px;
  background: linear-gradient(194deg, #ff9a00 34%, #f0d800 100%);
}

.rn-cta__inner {
  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: 24px;
  max-width: 1083px;
  margin: 0 auto;
}

/* 人物＋縦書きキャプション */
.rn-cta__visual {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  width: 345px;
  min-height: 201px;
}

.rn-cta__ambassador {
  position: absolute;
  /* 帯の高さに連動：上に38px・下に14px はみ出す（帯の上下余白64px＋はみ出し分）
     PC（帯355px）で Figma と同じ高さ 407px になる */
  top: -95px;
  left: 6px;
  width: auto;
  height: calc(100% + 180px);
  max-width: none;
}

.rn-cta__caption {
  position: absolute;
  top: 0;
  left: -38px;
  height: 272px;
  color: #1a1a1a;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: end;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* テキスト＋ボタン */
.rn-cta__body {
  min-width: 0;
  color: #fff;
  text-align: center;
}

.rn-cta__catch {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.36vw, 34px);
  line-height: 1.45;
  letter-spacing: 0.02em; /* Figma は 0.03em。実フォントでは 1px あふれるため少し詰めて1行に */
  white-space: nowrap;
}

.rn-cta__text {
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
}

.rn-cta__lead {
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
}

.rn-cta__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

/* ボタン共通（Figma: 282×63・角丸） */
.rn-cta .rn-cta__button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 282px;
  max-width: 288px;
  height: 63px;
  margin: 0;
  padding: 0 72px 0 22px;
  border-radius: 999px;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

/* 資料請求：FVの「お役立ち資料一覧をみる」と同じ黒ボタンのアイコン位置 */
.rn-cta .rn-cta__button span:before {
  width: 30px;
  height: 30px;
  right: 14px;
}

.rn-cta .rn-cta__button span:after {
  width: 34px;
  height: 8px;
  right: 23px;
}

/* 無料相談：白地＋黄色の枠、文字とアイコンはオレンジのグラデーション */
.rn-cta .rn-cta__button--white {
  background-color: #fff;
  border: 2px solid #f0d800;
}

.rn-cta__button-text {
  background-image: linear-gradient(188deg, #f0d800 0%, #ff9a00 66%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 白ボタンは疑似要素のアイコンを使わない */
.rn-cta .rn-cta__button--white span:before,
.rn-cta .rn-cta__button--white span:after {
  content: none;
}

.rn-cta__button-icon {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 44px;
  height: 30px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rn-cta__button-maru {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}

.rn-cta__button-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 33px;
  height: 5px;
  margin-top: -3px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* ホバーで矢印を右へ 4px（他のボタンは共通パーツ「ボタンのホバー」で指定） */
.rn-cta__button--white:hover .rn-cta__button-arrow {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* 既存ボタンの「アイコンに乗ったときだけ矢印が右へ大きく飛ぶ」指定（span:hover:after）を打ち消す。
   ホバー時の矢印の動きは共通パーツ「ボタンのホバー」でボタン全体に対して指定 */
.rn-cta .rn-cta__button span:hover:after {
  right: 23px;
}

/* -------------------------------------------------------------
   タブレット
   ------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .rn-cta__inner {
    gap: 24px;
  }

  .rn-cta__visual {
    width: 320px;
  }

  .rn-cta__ambassador {
    left: -10px;
  }

  .rn-cta__caption {
    left: -24px;
  }

  .rn-cta__text {
    font-size: 16px;
  }

  .rn-cta__lead {
    font-size: 20px;
  }

  .rn-cta__buttons {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* 900px 以下：文字 → 人物の順に縦並び。人物の下端は PC と同じく帯の下へ少しはみ出す */
@media screen and (max-width: 900px) {
  .rn-cta {
    padding-bottom: 0;
  }

  .rn-cta__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 16px;
  }

  .rn-cta__visual {
    -ms-flex-item-align: center;
    align-self: center;
    width: 260px;
    min-height: 0;
    height: 220px;
  }

  .rn-cta__ambassador {
    top: auto;
    bottom: -12px;
    left: 20%;
    width: auto;
    height: 234px;
    /* -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
  }

  .rn-cta__caption {
    top: 8px;
    left: 0;
    height: 220px;
    font-size: 10px;
  }
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-cta {
    padding: 48px 16px 0; /* 下は人物を帯の下端にそろえるため 0 */
  }

  .rn-cta__catch {
    font-size: 22px;
    white-space: normal;
  }

  .rn-cta__text {
    margin-top: 12px;
    font-size: 14px;
  }

  .rn-cta__lead {
    margin-top: 12px;
    font-size: 17px;
  }

  .rn-cta__buttons {
    -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;
  }

  .rn-cta .rn-cta__button {
    width: 100%;
    height: 56px;
    font-size: 15px;
  }

  .rn-cta__caption {
    top: initial;
    bottom: 10px;
  }
}

/* =============================================================
   実績一覧
   .rn-works 配下に限定。スライダーは js/script.js 末尾で初期化。
   ============================================================= */
.rn-works {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-works__bg-en {
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 0;
  color: #ececec;
  opacity: 0.39;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-works__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
}

/* 見出し＋矢印ボタン（矢印は右下） */
.rn-works__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
}

.rn-works__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  gap: 12px;
}

.rn-works__nav-button {
  display: block;
  width: 47px;
  height: 47px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-works__nav-button img {
  display: block;
  width: 47px;
  height: 47px;
}

/* 素材は左向き。次へは180度回転（Figma と同じ） */
.rn-works__next img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rn-works__nav-button:hover {
  opacity: 0.7;
}

.rn-works__nav-button.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* スライダー */
.rn-works__swiper {
  margin-top: 40px;
}

.rn-works__item {
  height: auto;
}

.rn-works__link {
  display: block;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-works__link:hover {
  opacity: 0.8;
}

.rn-works__img {
  display: block;
  aspect-ratio: 384 / 216;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 16px; /* カード画像の角丸は TOP 共通で 16px */
}

.rn-works__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 白背景のセクション（works / document / news）のカテゴリラベルは共通でこの配色 */
.rn-works__category {
  display: inline-block;
  margin-top: 16px; /* 画像との間隔は voice / document / column と同じ（PC 16px・SP 12px） */
  font-family: "Noto Sans JP", sans-serif;
  padding: 4px 16px;
  border-radius: 999px;
  background-color: #b2b2b2;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

.rn-works__title {
  margin-top: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
}

/* ページネーション（現在地はグラデーション） */
.rn-works__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.rn-works__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 50%;
  background: #d9d9d9;
  opacity: 1;
}

.rn-works__pagination .swiper-pagination-bullet-active {
  background: linear-gradient(to left, #dcd900, #eba139);
}

/* 支援実績をもっと見る（About と同じボタン） */
.rn-works__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-works .rn-works__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-works .rn-works__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-works .rn-works__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-works {
    padding: 64px 0;
  }

  .rn-works__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-works__inner {
    padding: 0 16px;
  }

  .rn-works__nav {
    gap: 8px;
  }

  .rn-works__nav-button,
  .rn-works__nav-button img {
    width: 40px;
    height: 40px;
  }

  .rn-works__swiper {
    margin-top: 24px;
  }

  .rn-works__category {
    margin-top: 12px;
  }

  .rn-works__title {
    font-size: 16px;
  }

  .rn-works__pagination,
  .rn-works__button-wrap {
    margin-top: 32px;
  }

  .rn-works .rn-works__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   選ばれる理由
   .rn-reasons 配下に限定。図解は img/top-renewal-reason01〜04.svg
   ============================================================= */
.rn-reasons {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #f7f7f7;
}

.rn-reasons__bg-en {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 0;
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-reasons__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

.rn-reasons__subtitle {
  margin-top: 40px;
}

.rn-reasons__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

/* 理由カード（左：テキスト / 右：図解） */
.rn-reasons__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 40px 40px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
}

.rn-reasons__body {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 560px;
  flex: 0 1 560px;
  min-width: 0;
  padding-top: 8px;
}

/* 番号は見出しの左に大きく（Figma：80px・やや斜体） */
.rn-reasons__head {
  position: relative;
  padding-left: 90px;
}

.rn-reasons__num {
  position: absolute;
  top: -38px;
  left: -4px;
  font-size: 80px;
  line-height: 1.1;
  background: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transform: skewX(-7deg);
  transform: skewX(-7deg);
}

.rn-reasons__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
}

.rn-reasons__text {
  margin-top: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

.rn-reasons__figure {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 480px;
  flex: 0 1 480px;
  min-width: 0;
  margin: 0;
}

/* 図解は picture で出し分け（SP は幅320の縦長図解） */
.rn-reasons__figure picture {
  display: block;
}

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

/* ビーヘルシーが選ばれる理由を詳しくみる（Figma：360×70） */
.rn-reasons__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-reasons .rn-reasons__button {
  width: 100%;
  max-width: 360px;
  height: 70px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-reasons .rn-reasons__button span:before {
  width: 30px;
  height: 30px;
  right: 20px;
}

.rn-reasons .rn-reasons__button span:after {
  width: 34px;
  height: 8px;
  right: 30px;
}

/* -------------------------------------------------------------
   タブレット
   ------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .rn-reasons__item {
    gap: 24px;
    padding: 40px 28px 32px;
  }

  .rn-reasons__title {
    font-size: 20px;
  }

  .rn-reasons__text {
    font-size: 15px;
  }
}

/* 900px 以下：図解をテキストの下に */
@media screen and (max-width: 900px) {
  .rn-reasons__item {
    -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;
  }

  .rn-reasons__body,
  .rn-reasons__figure {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .rn-reasons__figure {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-reasons {
    padding: 64px 0;
  }

  .rn-reasons__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-reasons__inner {
    padding: 0 16px;
  }

  .rn-reasons__subtitle {
    margin-top: 32px;
    align-items: baseline;
  }

  .rn-reasons__list {
    gap: 16px;
    margin-top: 16px;
  }

  .rn-reasons__item {
    gap: 20px;
    padding: 24px 20px;
  }

  .rn-reasons__figure {
    max-width: 320px;
  }

  .rn-reasons__head {
    padding-left: 64px;
  }

  .rn-reasons__num {
    top: -20px;
    font-size: 56px;
  }

  .rn-reasons__title {
    font-size: 18px;
  }

  .rn-reasons__text {
    margin-top: 16px;
    font-size: 14px;
  }

  .rn-reasons .rn-reasons__button {
    max-width: 320px;
    height: 60px;
    padding-right: 64px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal; /* 文言が長く矢印に重なるため、SP は2行（改行位置は front-page.php の br） */
  }

  .rn-reasons .rn-reasons__button span:before {
    right: 14px;
  }

  .rn-reasons .rn-reasons__button span:after {
    right: 23px;
  }
}

/* =============================================================
   お客様の声・カスタマーサクセス
   .rn-customer 配下に限定。
   比較表は page-reason.php の .reason-claim と同じマークアップ。
   reason.css は TOP では読み込まないため、現在の見た目に効いている指定だけを
   ここに .rn-customer 配下で再定義している。
   ============================================================= */
.rn-customer {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-customer__bg-en {
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 0;
  color: #ececec;
  opacity: 0.39;
  font-family: "Rozha One", serif;
  font-size: clamp(80px, 11.94vw, 172px);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.rn-customer__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

/* 上段：左テキスト／右写真（下揃え） */
.rn-customer__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
}

.rn-customer__body {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 656px;
  flex: 0 1 656px;
  min-width: 0;
}

/* 吹き出しラベル（Figma の Union と同じ：グラデの角丸＋下向きのしっぽ） */
.rn-customer__label {
  position: relative;
  display: inline-block;
  margin-top: 24px;
  margin-bottom: 18px;
  padding: 3px 24px;
  border-radius: 17px;
  background: linear-gradient(to right, #eba139, #dcd900);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.85;
}

.rn-customer__label:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 36px;
  border-style: solid;
  border-width: 7.5px 6px 0;
  border-color: #e9a535 transparent transparent;
}

.rn-customer__heading .rn-heading__title {
  margin-top: 0;
  line-height: 1.6;
}

.rn-customer__text {
  margin-top: 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

.rn-customer__img {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 464px;
  flex: 0 1 464px;
  min-width: 0;
}

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

/* 比較表（Before → After） */
.rn-customer .reason-claim {
  margin-top: 40px;
  padding: 32px;
  border-radius: 14px;
  background: #fff;
  -webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.05);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.05);
}

.rn-customer .reason-claim__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.rn-customer .reason-claim__eyebrow,
.rn-customer .reason-claim__tag {
  -ms-flex-item-align: start;
  align-self: flex-start;
  border-radius: 999px;
  color: #fff;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.rn-customer .reason-claim__eyebrow {
  padding: 4px 14px;
  background: linear-gradient(to right, #eba139, #e8b500);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.rn-customer .reason-claim__title {
  color: #1a1a1a;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
}

.rn-customer .reason-claim__rows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 14px;
}

.rn-customer .reason-claim__row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.rn-customer .reason-claim__cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 10px;
}

.rn-customer .reason-claim__cell--before {
  background: #f4f5f7;
  border: 1px solid #e2e4ea;
}

.rn-customer .reason-claim__cell--after {
  background: #fff8e6;
  border: 1px solid #f2e2b0;
}

.rn-customer .reason-claim__tag {
  padding: 3px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.rn-customer .reason-claim__tag--before {
  background: #8a8f9c;
}

.rn-customer .reason-claim__tag--after {
  background: linear-gradient(to right, #eba139, #e8b500);
}

.rn-customer .reason-claim__cell p {
  color: #1a1a1a;
  font-family: "Noto Sans JP", sans-serif; /* TOP はゴシック（ユーザー指示） */
  font-size: 14px;
  line-height: 1.65;
}

/* 行の矢印は Flow と同じ矢印画像（HTML の span は空） */
.rn-customer .reason-claim__row .reason-claim__arrow {
  -ms-flex-item-align: center;
  align-self: center;
  width: 20px;
  height: 46px;
  margin: 0 auto;
  background: url(../img/top-renewal-flow-arrow.svg) no-repeat center / contain;
  color: transparent;
  font-size: 0;
  font-weight: 700;
  line-height: 0;
  text-align: center;
}

/* -------------------------------------------------------------
   タブレット
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-customer__top {
    -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: 32px;
  }

  .rn-customer__body,
  .rn-customer__img {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .rn-customer__img {
    width: 100%;
    max-width: 464px;
    margin: 0 auto;
  }

  .rn-customer__text {
    margin-top: 24px;
  }
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-customer {
    padding: 64px 0;
  }

  .rn-customer__inner {
    padding: 0 16px;
  }

  .rn-customer__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 13px;
    line-height: .8;
  }

  .rn-customer__label {
    margin-top: 16px;
    margin-bottom: 14px;
    padding: 3px 16px;
    font-size: 13px;
  }

  .rn-customer__label:after {
    left: 28px;
  }

  /* 「カスタマーサクセスに相談できます」を1行に収める（共通は 22px） */
  .rn-customer__heading .rn-heading__title {
    font-size: 20px;
  }

  .rn-customer__text {
    margin-top: 16px;
    font-size: 14px;
  }

  .rn-customer .reason-claim {
    margin-top: 32px;
    padding: 20px;
  }

  .rn-customer .reason-claim__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rn-customer .reason-claim__row .reason-claim__arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

/* =============================================================
   一般的な運用代行会社との違い
   .rn-compare 配下に限定。比較表は table（ビーヘルシー列は .is-bhe）
   ============================================================= */
.rn-compare {
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  margin: 0 auto 96px auto;
  padding: 96px 0;
  background-color: #f7f7f7;
  border-radius: 16px;
}

.rn-compare__bg-en {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-compare__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
}

.rn-compare__note {
  display: none;
  margin-top: 24px;
  font-size: 12px;
  text-align: right;
}

.rn-compare__scroll {
  margin-top: 56px;
  padding-top: 12px; /* ビーヘルシー列の見出しが上に 12px 飛び出す分（横スクロール時に切れないよう内側に確保） */
}

.rn-compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
}

.rn-compare__table th,
.rn-compare__table td {
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  vertical-align: middle;
}

.rn-compare__table tr > :first-child {
  width: 200px;
  border-left: 1px solid #ececec;
}

/* 見出し行。既存の th 指定を打ち消して中央揃え */
.rn-compare__table thead th {
  height: 55px;
  padding: 12px 14px 12px;
  border-top: 1px solid #ececec;
  background-color: #e0e0e0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
}

.rn-compare__table thead .rn-compare__corner {
  padding-left: 20px;
  border-top-left-radius: 8px;
  font-size: 15px;
  text-align: left;
}

.rn-compare__table thead th:last-child {
  border-top-right-radius: 8px;
}

/* 行見出し（比較項目） */
.rn-compare__table tbody th {
  height: 87px;
  padding: 16px 20px;
  background-color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}

.rn-compare__table td {
  height: 87px;
  padding: 14px;
  background-color: #fff;
}

.rn-compare__mark {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 6px;
}

.rn-compare__text {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  line-height: 1.65;
}

.rn-compare__table tbody tr:last-child > :first-child {
  border-bottom-left-radius: 8px;
}

.rn-compare__table tbody tr:last-child > :last-child {
  border-bottom-right-radius: 8px;
}

/* ビーヘルシー列：オレンジの枠で囲み、上に 12px 飛び出す */
.rn-compare__table .is-bhe {
  border-right: 3px solid #eba139;
  border-left: 3px solid #eba139;
  background-color: #fff8e6;
}

/* 左右余白を詰めて1行に */
.rn-compare__table td.is-bhe {
  padding-right: 8px;
  padding-left: 8px;
}

.rn-compare__table thead th.is-bhe {
  position: relative;
  border-top: 0;
  background: linear-gradient(to right, #eba139, #dcd900);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}

/* 見出しの上に 12px 飛び出すタブ（オレンジの枠の上端と角丸） */
.rn-compare__table thead th.is-bhe::before {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 100%;
  left: -3px;
  height: 12px;
  border: 3px solid #eba139;
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(to right, #eba139, #dcd900);
}

.rn-compare__table tbody tr:last-child td.is-bhe {
  border-bottom: 3px solid #eba139;
  border-radius: 0 0 11px 11px;
}

.rn-compare__table .is-bhe .rn-compare__mark {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}

.rn-compare__table .is-bhe .rn-compare__text {
  color: #ff9a00;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

/* -------------------------------------------------------------
   タブレット・SP：表は横スクロール
   ------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .rn-compare__note {
    display: block;
  }

  .rn-compare__scroll {
    margin-top: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rn-compare__table {
    min-width: 1000px;
  }

  .rn-compare__table tr > :first-child {
    width: 150px;
  }
}

@media screen and (max-width: 767px) {
  .rn-compare {
    padding: 64px 0;
    margin: 0 auto 64px auto;
    border-radius: 0;
  }

  .rn-compare__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-compare__inner {
    padding: 0 16px;
  }

  .rn-compare__note {
    margin-top: 20px;
  }

  .rn-compare__table {
    min-width: 740px;
  }

  .rn-compare__table tr > :first-child {
    width: 130px;
  }

  .rn-compare__table tbody th {
    padding: 12px;
    font-size: 13px;
  }

  .rn-compare__table td {
    padding: 12px;
    background-color: #fff;
  }

  .rn-compare__table .is-bhe .rn-compare__text {
    font-size: 13px;
  }
}

/* =============================================================
   向いている企業様・向いていない企業様
   .rn-fit 配下に限定。
   ============================================================= */
.rn-fit {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: linear-gradient(-32.6deg, rgba(220, 217, 0, 0.2) 6.5%, rgba(235, 161, 57, 0.2) 95%), #fcfaeb;
}

.rn-fit__bg-en {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-fit__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

/* カード（ラベルがカード上辺に 25px 重なる） */
.rn-fit__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 40px;
  margin-top: 89px; /* Figma の間隔 64px＋ラベルのはみ出し 25px */
}

.rn-fit__card {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  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;
  gap: 32px;
  padding: 48px 24px 40px;
  border: 1px solid #ececec;
  border-radius: 16px;
  background-color: #fff;
}

.rn-fit__card--bad {
  background-color: #f7f7f7;
}

.rn-fit__label {
  position: absolute;
  top: -25px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 6px 80px;
  border-radius: 999px;
  background: linear-gradient(188deg, #f0d800 0%, #ff9a00 66%);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  white-space: nowrap;
}

.rn-fit__card--bad .rn-fit__label {
  background: linear-gradient(8deg, #474747 2.6%, #afaeae 95.5%);
}

.rn-fit__img {
  display: block;
  width: 270px;
  max-width: 100%;
  height: auto;
}

.rn-fit__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 528px;
}

.rn-fit__list li {
  position: relative;
  padding-left: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
}

/* 四角の行頭記号（向いている：黄グラデ／向いていない：黒グラデ） */
.rn-fit__list li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(to right, #eba139, #dcd900);
}

.rn-fit__card--bad .rn-fit__list li:before {
  background: linear-gradient(47deg, #121212 2.6%, #565656 95.5%);
}

/* -------------------------------------------------------------
   タブレット・SP：カードを縦並び
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-fit__cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 64px;
  }

  .rn-fit__list li {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .rn-fit {
    padding: 64px 0;
  }

  .rn-fit__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-fit__inner {
    padding: 0 16px;
  }

  .rn-fit__cards {
    gap: 48px;
    margin-top: 64px;
  }

  .rn-fit__card {
    gap: 24px;
    padding: 40px 18px 28px;
  }

  .rn-fit__label {
    top: -20px;
    padding: 4px 32px;
    font-size: 18px;
  }

  .rn-fit__img {
    width: 220px;
  }

  .rn-fit__list li {
    padding-left: 16px;
    font-size: 15px;
  }

  .rn-fit__list li:before {
    top: 8px;
    width: 8px;
    height: 8px;
  }
}

/* =============================================================
   メンバー（Figma: 219:668）＋プロフィールモーダル（Figma: 286:2554）
   .rn-member / .rn-member-modal 配下に限定。開閉は js/script.js 末尾。
   ============================================================= */
.rn-member {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-member__bg-en {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #ececec;
  opacity: 0.39;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-member__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

/* カード（4列） */
.rn-member__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.rn-member__img img,
.rn-member-modal__img img {
  display: block;
  width: 100%;
  aspect-ratio: 285 / 190;
  height: auto;
  background-color: #ededed;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
}

.rn-member__role {
  margin-top: 16px;
  color: #808080;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
}

.rn-member__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.rn-member__name {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.rn-member__en {
  margin-top: 8px;
  color: rgba(128, 128, 128, 0.5);
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  line-height: 1;
}

/* プラスマーク（モーダルを開く） */
.rn-member__open,
.rn-member-modal__close {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.rn-member__open img,
.rn-member-modal__close img {
  display: block;
  width: 30px;
  height: 30px;
}

.rn-member__open:hover {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rn-member-modal__close:hover {
  opacity: 0.6;
}

/* メンバー紹介をみる（About と同じボタン） */
.rn-member__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-member .rn-member__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-member .rn-member__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-member .rn-member__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* モーダル本体（Figma：770px幅・角丸8px） */
.rn-member-modal {
  width: calc(100% - 32px);
  max-width: 770px;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: none;
  border-radius: 8px;
  background-color: #fff;
  color: #1a1a1a;
}

.rn-member-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.rn-member-modal__body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 80px;
  text-align: left;
}

.rn-member-modal__img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 285px;
}

.rn-member-modal__content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

.rn-member-modal__head {
  padding-bottom: 24px;
  border-bottom: 1px solid #ececec;
}

.rn-member-modal__head .rn-member__role {
  margin-top: 0;
}

.rn-member-modal__head .rn-member__name {
  margin-top: 12px;
}

/* 小見出し（代表以外） */
.rn-member-modal__catch {
  margin-top: 24px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
}

.rn-member-modal__catch + .rn-member-modal__text {
  margin-top: 12px;
}

.rn-member-modal__text {
  margin-top: 24px;
  color: #4d4d4d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

.rn-member-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-member__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
}

@media screen and (max-width: 767px) {
  .rn-member {
    padding: 64px 0;
  }

  .rn-member__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-member__inner {
    padding: 0 16px;
  }

  .rn-member__list {
    gap: 24px 12px;
    margin-top: 32px;
  }

  .rn-member__role {
    margin-top: 10px;
    font-size: 10px;
  }

  .rn-member__foot {
    gap: 8px;
    margin-top: 8px;
  }

  .rn-member__name {
    font-size: 15px;
  }

  .rn-member__en {
    margin-top: 6px;
    font-size: 10px;
  }

  .rn-member__open,
  .rn-member__open img {
    width: 26px;
    height: 26px;
  }

  .rn-member .rn-member__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }

  /* モーダルは縦並び */
  .rn-member-modal__body {
    -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: 20px;
    padding: 56px 20px 28px;
  }

  .rn-member-modal__img {
    width: 100%;
  }

  .rn-member-modal__head {
    padding-bottom: 16px;
  }

  .rn-member-modal__catch {
    margin-top: 16px;
    font-size: 16px;
  }

  .rn-member-modal__catch + .rn-member-modal__text {
    margin-top: 8px;
  }

  .rn-member-modal__text {
    margin-top: 16px;
  }

  .rn-member-modal__close {
    top: 14px;
    right: 14px;
  }
}

/* =============================================================
   お客様の声
   .rn-voice 配下に限定。スライダーは js/script.js 末尾で初期化。
   ============================================================= */
.rn-voice {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #f7f7f7;
}

.rn-voice__bg-en {
  position: absolute;
  top: -8px;
  left: 0;
  z-index: 0;
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-voice__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

/* 矢印＋カード（中央に 750px） */
.rn-voice__slider {
  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: 24px;
  margin-top: 56px;
}

.rn-voice__swiper {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 750px;
  flex: 0 1 750px;
  min-width: 0;
  margin: 0;
}

.rn-voice__nav-button {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 47px;
  height: 47px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-voice__nav-button img {
  display: block;
  width: 47px;
  height: 47px;
}

.rn-voice__next img {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rn-voice__nav-button:hover {
  opacity: 0.7;
}

/* カードの高さを最も長いものにそろえ、矢印の位置を固定 */
.rn-voice__item {
  height: auto;
}

.rn-voice__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 30px;
  height: 100%;
  padding: 40px 60px;
  background-color: #fff;
}

.rn-voice__img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 200px;
}

.rn-voice__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.rn-voice__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}

.rn-voice__role {
  color: #808080;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.85;
}

.rn-voice__title {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  background: linear-gradient(to left, #ddd702, #eba138);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rn-voice__text {
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
}

/* お客様のインタビュー（コラム /column/voice/ のカード3列。コラム一覧と同じカード） */
.rn-voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.rn-voice__post-link {
  display: block;
  color: #262626;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-voice__post-link:hover {
  opacity: 0.7;
}

.rn-voice__post-img {
  display: block;
  aspect-ratio: 386 / 217;
  overflow: hidden;
  background-color: #ededed;
  border-radius: 16px; /* カード画像の角丸は TOP 共通で 16px */
}

.rn-voice__post-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.rn-voice__post-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px 10px;
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

/* グレー背景のセクション（voice / column）のカテゴリラベルは共通でこの配色 */
.rn-voice__post-category {
  padding: 4px 16px;
  border-radius: 999px;
  background-color: #e0e0e0;
  color: #4d4d4d;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

/* カードの日付は TOP 共通（voice / document / column / news で同じ値） */
.rn-voice__post-date {
  color: #808080;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
}

.rn-voice__post-title {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
}

/* お客様の声をもっと見る（About と同じボタン） */
.rn-voice__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-voice .rn-voice__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-voice .rn-voice__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-voice .rn-voice__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-voice__list {
    gap: 16px;
  }

  .rn-voice__post-title {
    font-size: 15px;
  }
}

@media screen and (max-width: 900px) {
  .rn-voice__card {
    padding: 32px;
  }

  .rn-voice__img {
    width: 160px;
  }
}

/* SP：矢印はカードの上に並べ、カードはイラストを上に */
@media screen and (max-width: 767px) {
  .rn-voice {
    padding: 64px 0;
  }

  .rn-voice__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-voice__inner {
    padding: 0 16px;
  }

  /* お客様のインタビュー：他の一覧カードと同じく横スクロール。画面端まで流す */
  .rn-voice__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin: 32px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .rn-voice__list::-webkit-scrollbar {
    display: none;
  }

  .rn-voice__post {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
  }

  .rn-voice__post-meta {
    margin-top: 12px;
  }

  .rn-voice__button-wrap {
    margin-top: 32px;
  }

  .rn-voice__slider {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 32px;
  }

  .rn-voice__swiper {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  }

  .rn-voice__nav-button,
  .rn-voice__nav-button img {
    width: 40px;
    height: 40px;
  }

  .rn-voice__card {
    -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: 20px;
    padding: 28px 20px;
  }

  .rn-voice__img {
    width: 140px;
  }

  .rn-voice__title {
    font-size: 17px;
  }

  .rn-voice .rn-voice__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   ご相談から運用開始までの流れ
   .rn-flow 配下に限定。ステップ間の矢印は li::after（装飾のため HTML に入れない）
   ============================================================= */
.rn-flow {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-flow__bg-en {
  position: absolute;
  top: -5px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #ececec;
  opacity: 0.39;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-flow__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
}

/* 5ステップ横並び（丸 180px・間隔 75px の中央に矢印） */
.rn-flow__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 75px;
  margin-top: 56px;
}

.rn-flow__item {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 180px;
  flex: 0 1 180px;
  min-width: 0;
  text-align: center;
}

/* 矢印：丸の縦中央・次の丸との間の中央 */
.rn-flow__item:not(:last-child) .rn-flow__circle:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -51.5px;
  width: 28px;
  aspect-ratio: 28 / 24;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(../img/top-renewal-flow-arrow.svg) no-repeat center / contain;
}

.rn-flow__circle {
  position: relative;
  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;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  padding: 18px 14px 22px;
  border-radius: 50%;
  background-color: #fcfaeb;
}

.rn-flow__step {
  font-size: 20px;
  line-height: 1.7;
  background: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rn-flow__icon {
  display: block;
  width: 80px;
  height: 80px;
}

.rn-flow__name {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
}

/* -------------------------------------------------------------
   タブレット：丸を縮小
   ------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .rn-flow__list {
    gap: 40px;
  }

  .rn-flow__item:not(:last-child) .rn-flow__circle:after {
    right: -34px;
    width: 28px;
  }

  .rn-flow__circle {
    padding: 12px;
  }

  .rn-flow__step {
    font-size: 16px;
  }

  .rn-flow__icon {
    width: 56px;
    height: 56px;
  }

  .rn-flow__name {
    font-size: 15px;
  }
}

/* -------------------------------------------------------------
   SP：3つ＋2つの2段（縦積みだと間延びするため）。矢印は横向きのまま段の中だけ
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-flow {
    padding: 64px 0;
  }

  .rn-flow__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-flow__inner {
    padding: 0 16px;
  }

  .rn-flow__list {
    /* 丸の直径：左右余白32px＋間隔24px×2 を引いた3等分（上限120px） */
    --rn-flow-size: min(calc((100vw - 80px) / 3), 120px);
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 28px 24px;
    /* 幅が広くても必ず3つで折り返す（丸3つ＋間隔2つ分の幅に制限） */
    max-width: calc(var(--rn-flow-size) * 3 + 48px);
    margin: 32px auto 0;
  }

  .rn-flow__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 var(--rn-flow-size);
    flex: 0 0 var(--rn-flow-size);
  }

  .rn-flow__item:not(:last-child) .rn-flow__circle:after {
    right: -22px;
    width: 20px;
  }

  /* 1段目の最後（3つ目）は折り返すので矢印なし */
  .rn-flow__item:nth-child(3) .rn-flow__circle:after {
    content: none;
  }

  .rn-flow__circle {
    gap: 2px;
    padding: 6px;
  }

  .rn-flow__step {
    font-size: 12px;
  }

  .rn-flow__icon {
    width: 40px;
    height: 40px;
  }

  /* 1行に収めるため、丸より左右10pxずつ広く使い、狭い画面では文字を縮める */
  .rn-flow__name {
    margin: 8px -10px 0;
    font-size: min(12px, 3.2vw);
    line-height: 1.5;
    text-wrap: balance;
  }
}

/* 375px以下：3つ並びは窮屈なので 2つ＋2つ＋1つ の3段 */
@media screen and (max-width: 375px) {
  .rn-flow__list {
    --rn-flow-size: min(calc((100vw - 72px) / 2), 120px);
    gap: 28px 40px;
    max-width: calc(var(--rn-flow-size) * 2 + 40px);
  }

  .rn-flow__item:not(:last-child) .rn-flow__circle:after {
    right: -34px;
    width: 28px;
  }

  /* 段の最後（2つ目・4つ目）は折り返すので矢印なし。3つ目は段の先頭になるので矢印を戻す */
  .rn-flow__item:nth-child(even) .rn-flow__circle:after {
    content: none;
  }

  .rn-flow__item:nth-child(3) .rn-flow__circle:after {
    content: "";
  }

  .rn-flow__circle {
    gap: 4px;
    padding: 10px;
  }

  .rn-flow__step {
    font-size: 14px;
  }

  .rn-flow__icon {
    width: 52px;
    height: 52px;
  }

  .rn-flow__name {
    font-size: 13px;
  }
}

/* =============================================================
   よくあるご質問
   .rn-faq 配下に限定。開閉は details / summary（JS なし）
   ============================================================= */
.rn-faq {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto 96px auto;
  padding: 96px 0;
  background-color: #f7f7f7;
  border-radius: 16px;
}

.rn-faq__bg-en {
  position: absolute;
  top: -5px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-faq__inner {
  position: relative;
  z-index: 1;
  max-width: 930px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

.rn-faq__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  margin-top: 56px;
}

.rn-faq__item {
  border: 1px solid #ececec;
  border-radius: 16px;
  background-color: #fff;
}

/* 質問（クリックで開閉） */
.rn-faq__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  list-style: none;
  cursor: pointer;
}

.rn-faq__question::-webkit-details-marker {
  display: none;
}

.rn-faq__mark {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: auto;
  margin-top: 1px;
}

.rn-faq__q-text {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

/* ＋（開くと －） */
.rn-faq__toggle {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 5px;
}

.rn-faq__toggle:before,
.rn-faq__toggle:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1px;
  margin-top: -0.5px;
  background-color: #1a1a1a;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.rn-faq__toggle:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rn-faq__item[open] .rn-faq__toggle:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* 回答 */
.rn-faq__answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 20px;
  margin: 0 24px;
  padding: 20px 0 24px;
  border-top: 1px solid #ececec;
}

.rn-faq__a-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.8;
}

/* 回答内のリンク（料金ページ） */
.rn-faq__a-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-faq__a-text a:hover {
  opacity: 0.7;
}

/* よくある質問を全て見る（About と同じボタン） */
.rn-faq__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-faq .rn-faq__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-faq .rn-faq__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-faq .rn-faq__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   SP
   ------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .rn-faq {
    padding: 64px 0;
    border-radius: 0;
  }

  .rn-faq__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-faq__inner {
    padding: 0 16px;
  }

  .rn-faq__list {
    gap: 12px;
    margin-top: 32px;
  }

  .rn-faq__question {
    gap: 12px;
    padding: 18px 16px;
  }

  .rn-faq__mark {
    width: 16px;
  }

  .rn-faq__q-text {
    font-size: 15px;
  }

  .rn-faq__answer {
    gap: 12px;
    margin: 0 16px;
    padding: 16px 0 18px;
  }

  .rn-faq__a-text {
    font-size: 14px;
  }

  .rn-faq .rn-faq__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   CTA帯
   .rn-cta2 配下に限定。既存の共通CTA（template-parts/cta-bottom.php）とは別デザインのため新規。
   田村淳さんは右側に配置し、下端は帯から 26px はみ出す。
   ============================================================= */
.rn-cta2 {
  position: relative;
  z-index: 1;
  padding: 56px 20px;
  background: linear-gradient(17deg, #121212 2.6%, #565656 95.5%);
  color: #fff;
}

.rn-cta2__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* テキスト＋ボタン（左寄せのブロック内で中央揃え） */
.rn-cta2__body {
  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;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 80px;
  text-align: center;
}

.rn-cta2__catch {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.5;
  white-space: nowrap;
}

.rn-cta2__catch-em {
  color: #ff9a00;
  font-size: 38px;
}

.rn-cta2__text {
  margin-top: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.rn-cta2__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.rn-cta2__action {
  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;
  gap: 3px;
  width: 300px;
}

.rn-cta2__note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

/* ボタン（白／オレンジ） */
.rn-cta2__button {
  position: relative;
  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;
  width: 100%;
  max-width: 288px;
  height: 63px;
  padding: 0 72px 0 22px;
  border-radius: 999px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-cta2__button:hover {
  opacity: 0.85;
}

.rn-cta2__button--white {
  background-color: #fff;
  color: #1a1a1a;
}

.rn-cta2__button--orange {
  border: 2px solid #f0d800;
  background: linear-gradient(193deg, #f0d800 0%, #ff9a00 66%);
  color: #fff;
}

.rn-cta2__icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 44px;
  height: 30px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rn-cta2__maru {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}

.rn-cta2__arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 33px;
  height: 5px;
  margin-top: -3px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* ホバーで矢印を右へ 4px（他のボタンと同じ） */
.rn-cta2__button:hover .rn-cta2__arrow {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* 田村淳さん（右側・下に 26px はみ出す） */
.rn-cta2__visual {
  position: absolute;
  right: 31px;
  bottom: -82px; /* 帯の下余白 56px＋はみ出し 26px */
  width: 424px;
  height: 461px;
}

.rn-cta2__ambassador {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}

/* 肩書（縦書き）は帯の下端から 20px の位置に下揃え
   （人物の枠は帯から 26px はみ出しているため、枠の下端からは 46px） */
.rn-cta2__caption {
  position: absolute;
  right: -31px;
  bottom: 46px;
  height: 272px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: end;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   タブレット：人物を少し縮小
   ------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .rn-cta2__body {
    padding-left: 0;
  }

  .rn-cta2__visual {
    right: 24px;
    width: 340px;
    height: 370px;
  }

  .rn-cta2__caption {
    right: -24px;
  }
}

/* 1000px 以下：テキスト → 人物の縦並び（人物の下端は帯から少しはみ出す） */
@media screen and (max-width: 1000px) {
  .rn-cta2 {
    padding-bottom: 0;
  }

  .rn-cta2__inner {
    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;
    gap: 24px;
  }

  .rn-cta2__body {
    width: 100%;
  }

  .rn-cta2__catch {
    font-size: 26px;
  }

  .rn-cta2__catch-em {
    font-size: 30px;
  }

  .rn-cta2__visual {
    position: relative;
    right: auto;
    bottom: -14px;
    width: 260px;
    height: 282px;
    margin-top: -14px;
  }

  /* 縦並び時は人物の枠のはみ出しが 14px */
  .rn-cta2__caption {
    right: auto;
    bottom: 34px;
    left: -40px;
    height: 220px;
    font-size: 10px;
  }
}

@media screen and (max-width: 767px) {
  .rn-cta2 {
    padding: 48px 16px 0;
  }

  .rn-cta2__catch {
    font-size: 20px;
    white-space: normal;
  }

  .rn-cta2__catch-em {
    font-size: 23px;
  }

  .rn-cta2__text {
    margin-top: 16px;
    font-size: 14px;
  }

  .rn-cta2__buttons {
    -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: 12px;
  }

  .rn-cta2__action {
    width: 100%;
    max-width: 288px;
  }

  .rn-cta2__note {
    font-size: 12px;
  }

  .rn-cta2__button {
    height: 56px;
    font-size: 15px;
  }

  .rn-cta2__text br {
    display: none;
  }
}

/* =============================================================
   代表挨拶（Figma: 221:360）
   .rn-message 配下に限定。背景の「Message」は左端に縦向き（下から上へ読む）。
   ============================================================= */
.rn-message {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-message__bg-en {
  position: absolute;
  bottom: 0;
  left: -45px;
  z-index: 0;
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: 184px;
  line-height: 1.24;
  white-space: nowrap;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  pointer-events: none;
}

.rn-message__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left;
}

/* 写真（360px）＋本文 */
.rn-message__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 40px;
  margin-top: 56px;
}

.rn-message__img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 360px;
}

.rn-message__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
}

.rn-message__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  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: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 40px;
}

.rn-message__text {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
}

.rn-message__text p + p {
  margin-top: 1.8em; /* Figma の空行 1行分 */
}

/* 署名（右寄せ） */
.rn-message__sign {
  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: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 12px;
  line-height: 1;
  white-space: nowrap;
}

.rn-message__role {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
}

.rn-message__name {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 28px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-message__content {
    gap: 28px;
  }

  .rn-message__img {
    width: 280px;
  }

  .rn-message__text {
    font-size: 15px;
  }
}

@media screen and (max-width: 767px) {
  .rn-message {
    padding: 64px 0;
  }

  .rn-message__bg-en {
    left: -36px;
    font-size: 120px;
  }

  .rn-message__inner {
    padding: 0 16px;
  }

  .rn-message__content {
    -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: 24px;
    margin-top: 32px;
  }

  .rn-message__img {
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
  }

  .rn-message__body {
    gap: 24px;
  }

  .rn-message__text {
    font-size: 14px;
  }

  .rn-message__name {
    font-size: 24px;
  }
}

/* =============================================================
   リンクカード：会社概要／採用情報（Figma: 230:653）
   .rn-links 配下に限定。カード全体が a タグ。
   ============================================================= */
.rn-links {
  padding: 0 20px 96px;
  background-color: #fff;
}

.rn-links__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.rn-links__item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
}

.rn-links__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  padding: 20px;
  border: 1px solid #ececec;
  border-radius: 16px;
  background-color: #fff;
  color: #1a1a1a;
  text-align: left; /* 既存の両端揃えを打ち消す */
  -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
}

.rn-links__img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 160px;
}

.rn-links__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 160 / 107;
  -o-object-fit: cover;
  object-fit: cover;
}

.rn-links__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  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: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0 28px;
}

.rn-links__en {
  font-size: 14px;
  line-height: 1.4;
}

.rn-links__title {
  margin-top: 12px;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  background: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rn-links__text {
  margin-top: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

/* 矢印（実績一覧と同じ素材を右向きに） */
.rn-links__arrow {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 47px;
  height: 47px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* ホバー：枠をオレンジに（矢印は動かさない＝ユーザー指示） */
.rn-links__card:hover {
  border-color: #eba139;
  -webkit-box-shadow: 0 4px 14px rgba(235, 161, 57, 0.18);
  box-shadow: 0 4px 14px rgba(235, 161, 57, 0.18);
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-links__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
  }
}

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

  .rn-links__inner {
    gap: 12px;
  }

  .rn-links__card {
    padding: 14px;
  }

  /* 写真・矢印を縮めて説明文を1行に */
  .rn-links__img {
    width: 84px;
  }

  .rn-links__body {
    padding: 0 10px 0 12px;
  }

  .rn-links__en {
    font-size: 12px;
  }

  .rn-links__title {
    margin-top: 4px;
    font-size: 19px;
  }

  .rn-links__text {
    margin-top: 4px;
    font-size: 12px;
  }

  .rn-links__arrow {
    width: 32px;
    height: 32px;
  }
}

/* =============================================================
   企業YouTubeのノウハウを発信中！（Figma: 221:408）
   .rn-movie 配下に限定。クリックで既存の動画モーダル（.movie-modal：style.css）を開く。
   ============================================================= */
.rn-movie {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #f7f7f7;
}

.rn-movie__bg-en {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-movie__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left; /* 既存の両端揃えを打ち消す */
}

/* 動画（3列） */
.rn-movie__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.rn-movie__link {
  display: block;
  color: #333;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-movie__link:hover {
  opacity: 0.7;
}

/* サムネイル：YouTube の hqdefault（4:3・上下に黒帯）を 16:9 で切り抜いて黒帯を隠す */
.rn-movie__thumb {
  display: block;
  aspect-ratio: 386 / 217;
  overflow: hidden;
  background-color: #ededed;
  border-radius: 16px; /* カード画像の角丸は TOP 共通で 16px */
}

.rn-movie__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.rn-movie__title {
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
}

/* 動画をもっと見る（About と同じボタン） */
.rn-movie__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 48px;
}

.rn-movie .rn-movie__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-movie .rn-movie__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-movie .rn-movie__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-movie__list {
    gap: 16px;
  }

  .rn-movie__title {
    margin-top: 12px;
    font-size: 15px;
  }
}

/* SP：横スクロール */
@media screen and (max-width: 767px) {
  .rn-movie {
    padding: 64px 0;
  }

  .rn-movie__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-movie__inner {
    padding: 0 16px;
  }

  /* 既存TOPと同じく横スクロール（縦積みだとスクロール量が増えるため）。画面端まで流す */
  .rn-movie__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin: 32px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .rn-movie__list::-webkit-scrollbar {
    display: none;
  }

  .rn-movie__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
  }

  .rn-movie__title {
    font-size: 15px;
  }

  .rn-movie__button-wrap {
    margin-top: 32px;
  }

  .rn-movie .rn-movie__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   お役立ち資料（Figma: 231:704）
   .rn-document 配下に限定。最新3件（page-renewal.php の WP_Query）。
   ============================================================= */
.rn-document {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-document__bg-en {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 14.45vw, 208px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-document__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left; /* 既存の両端揃えを打ち消す */
}

/* 資料（3列） */
.rn-document__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.rn-document__link {
  display: block;
  color: #1a1a1a;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-document__link:hover {
  opacity: 0.7;
}

.rn-document__img {
  display: block;
  aspect-ratio: 386 / 217;
  overflow: hidden;
  border: 1px solid #ececec;
  background-color: #fff;
  border-radius: 16px; /* カード画像の角丸は TOP 共通で 16px */
}

.rn-document__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* カテゴリ（グレーの角丸）＋日付 */
.rn-document__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

/* 白背景のセクション（works / document / news）のカテゴリラベルは共通でこの配色 */
.rn-document__category {
  padding: 4px 16px;
  border-radius: 999px;
  background-color: #b2b2b2;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

/* カードの日付は TOP 共通（voice / document / column / news で同じ値） */
.rn-document__date {
  color: #808080;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
}

.rn-document__title {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.42;
}

/* お役立ち資料一覧をみる（About と同じボタン） */
.rn-document__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 48px;
}

.rn-document .rn-document__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-document .rn-document__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-document .rn-document__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-document__list {
    gap: 16px;
  }

  .rn-document__title {
    font-size: 15px;
  }
}

/* SP：横スクロール */
@media screen and (max-width: 767px) {
  .rn-document {
    padding: 64px 0;
  }

  .rn-document__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-document__inner {
    padding: 0 16px;
  }

  /* 既存TOPと同じく横スクロール（縦積みだとスクロール量が増えるため）。画面端まで流す */
  .rn-document__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin: 32px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .rn-document__list::-webkit-scrollbar {
    display: none;
  }

  .rn-document__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
  }

  .rn-document__meta {
    margin-top: 12px;
  }

  .rn-document__button-wrap {
    margin-top: 32px;
  }

  .rn-document .rn-document__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   コラム一覧
   .rn-column 配下に限定。最新3件（page-renewal.php の WP_Query）。
   ============================================================= */
.rn-column {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  max-width: 1440px;
  margin: 0 auto;
  background-color: #f7f7f7;
  border-radius: 16px;
}

.rn-column__bg-en {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 13.75vw, 198px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-column__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left; /* 既存の両端揃えを打ち消す */
}

/* コラム（3列） */
.rn-column__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.rn-column__link {
  display: block;
  color: #262626;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-column__link:hover {
  opacity: 0.7;
}

.rn-column__img {
  display: block;
  aspect-ratio: 386 / 217;
  overflow: hidden;
  background-color: #ededed;
  border-radius: 16px; /* カード画像の角丸は TOP 共通で 16px */
}

.rn-column__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* カテゴリ（グレーの角丸）＋日付 */
.rn-column__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px 10px;
  margin-top: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

/* グレー背景のセクション（voice / column）のカテゴリラベルは共通でこの配色 */
.rn-column__category {
  padding: 4px 16px;
  border-radius: 999px;
  background-color: #e0e0e0;
  color: #4d4d4d;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

/* カードの日付は TOP 共通（voice / document / column / news で同じ値） */
.rn-column__date {
  color: #808080;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
}

.rn-column__title {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
}

/* コラム一覧をみる（About と同じボタン） */
.rn-column__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 40px;
}

.rn-column .rn-column__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-column .rn-column__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-column .rn-column__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-column__list {
    gap: 16px;
  }

  .rn-column__title {
    font-size: 15px;
  }
}

/* SP：横スクロール */
@media screen and (max-width: 767px) {
  .rn-column {
    padding: 64px 0;
    border-radius: 0;
  }

  .rn-column__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-column__inner {
    padding: 0 16px;
  }

  /* 既存TOPと同じく横スクロール（縦積みだとスクロール量が増えるため）。画面端まで流す */
  .rn-column__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin: 32px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .rn-column__list::-webkit-scrollbar {
    display: none;
  }

  .rn-column__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
  }

  .rn-column__meta {
    margin-top: 12px;
  }

  .rn-column__button-wrap {
    margin-top: 32px;
  }

  .rn-column .rn-column__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   お知らせ一覧（Figma: 221:493）
   .rn-news 配下に限定。最新3件（page-renewal.php の WP_Query）。
   ============================================================= */
.rn-news {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #fff;
}

.rn-news__bg-en {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #f2f2f2;
  font-family: "Rozha One", serif;
  font-size: clamp(100px, 14.45vw, 208px);
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}

.rn-news__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left; /* 既存の両端揃えを打ち消す */
}

/* お知らせ（3列） */
.rn-news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}

.rn-news__link {
  display: block;
  color: #262626;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-news__link:hover {
  opacity: 0.7;
}

.rn-news__img {
  display: block;
  aspect-ratio: 386 / 217;
  overflow: hidden;
  border: 1px solid #ececec;
  background-color: #fff;
}

.rn-news__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* カテゴリ（グレーの角丸）＋日付 */
.rn-news__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
}

/* 白背景のセクション（works / document / news）のカテゴリラベルは共通でこの配色 */
.rn-news__category {
  padding: 4px 16px;
  border-radius: 999px;
  background-color: #b2b2b2;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}

/* カードの日付は TOP 共通（voice / document / column / news で同じ値） */
.rn-news__date {
  color: #808080;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
}

.rn-news__title {
  margin-top: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
}

/* お知らせ一覧をみる（About と同じボタン） */
.rn-news__button-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 48px;
}

.rn-news .rn-news__button {
  width: 100%;
  max-width: 303px;
  height: 63px;
  margin: 0;
  padding: 0 79px 0 23px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-news .rn-news__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-news .rn-news__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* -------------------------------------------------------------
   タブレット・SP
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-news__list {
    gap: 16px;
  }

  .rn-news__title {
    font-size: 15px;
  }
}

/* SP：横スクロール */
@media screen and (max-width: 767px) {
  .rn-news {
    padding: 64px 0;
  }

  .rn-news__bg-en {
    font-size: clamp(80px, 16.25vw, 125px); /* About と同じサイズ（375px で 80px） */
    top: 12px; /* SP の背景英字は全セクション共通の位置 */
  }

  .rn-news__inner {
    padding: 0 16px;
  }

  /* 既存TOPと同じく横スクロール（縦積みだとスクロール量が増えるため）。画面端まで流す */
  .rn-news__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin: 32px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .rn-news__list::-webkit-scrollbar {
    display: none;
  }

  .rn-news__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 240px;
    flex: 0 0 240px;
  }

  .rn-news__button-wrap {
    margin-top: 32px;
  }

  .rn-news .rn-news__button {
    max-width: 288px;
    height: 56px;
    font-size: 14px;
  }
}

/* =============================================================
   プロジェクト公式バナー（Figma: 221:523）
   .rn-project 配下に限定。左：バナー画像／右：テキスト。
   ============================================================= */
.rn-project {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 0;
  background-color: #f7f7f7;
}

.rn-project__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  color: #1a1a1a;
  text-align: left; /* 既存の両端揃えを打ち消す */
}

.rn-project__banner {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 580px;
  flex: 0 1 580px;
  min-width: 0;
}

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

.rn-project__body {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.rn-project__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.6;
}

.rn-project__text {
  margin-top: 40px;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  line-height: 1.8;
}

/* -------------------------------------------------------------
   タブレット・SP：バナー → テキストの縦並び
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-project__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px;
    max-width: 640px;
  }

  .rn-project__banner {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }

  .rn-project__body {
    width: 100%;
  }

  .rn-project__title {
    font-size: 26px;
  }

  .rn-project__text {
    margin-top: 24px;
    font-size: 18px;
  }

  /* 縦並びでは横幅に余裕があるので、PC用の改行（br）を無効にして自然に折り返す */
  .rn-project__title br,
  .rn-project__text br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .rn-project {
    padding: 48px 0;
  }

  .rn-project__inner {
    gap: 24px;
    padding: 0 16px;
  }

  .rn-project__title {
    font-size: 20px;
  }

  .rn-project__text {
    margin-top: 16px;
    font-size: 14px;
  }
}

/* =============================================================
   無料相談＋お役立ち情報（Figma: 233:1024）
   .rn-contact 配下に限定。青・緑のボタンは既存の .cta-bottom__container-button（style.css）を
   流用し、サイズだけ .rn-contact__link で上書き。
   ============================================================= */
.rn-contact {
  padding: 96px 20px;
  background-color: #fff;
}

/* グラデーションの角丸ボックス */
.rn-contact__box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px;
  border-radius: 16px;
  background: linear-gradient(to right, #eba139, #dcd900);
  text-align: left; /* 既存の両端揃えを打ち消す */
}

/* 白いカード：左テキスト／右ボタン */
.rn-contact__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 32px;
  max-width: 872px;
  min-height: 193px;
  margin: 0 auto;
  padding: 44px 80px; /* Figma の高さ 193px に合わせる */
  border-radius: 8px;
  background-color: #fff;
}

.rn-contact__copy {
  background-image: linear-gradient(to right, #eba139, #dcd900);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.45;
}

.rn-contact__text {
  margin-top: 16px;
  color: #1a1a1a;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
}

.rn-contact .rn-contact__button {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 282px;
  height: 63px;
  margin: 0;
  padding: 0 72px 0 22px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-family: "Noto Sans JP", "Noto Sans CJKjp", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.rn-contact .rn-contact__button span:before {
  width: 30px;
  height: 30px;
  right: 13px;
}

.rn-contact .rn-contact__button span:after {
  width: 34px;
  height: 8px;
  right: 22px;
}

/* ＼ お役立ち情報発信中 ／ */
.rn-contact__info {
  margin-top: 32px;
  text-align: center;
}

.rn-contact__label {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.44;
}

.rn-contact__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
}

.rn-contact .rn-contact__link {
  width: 310px;
  max-width: 100%;
  height: 66px;
  padding: 0 17px;
  border-width: 1px;
  font-size: 18px;
  line-height: 1.15;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.rn-contact .rn-contact__link:hover {
  opacity: 0.8;
}

/* -------------------------------------------------------------
   タブレット：白いカードは縦並び（中央揃え）
   ------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  .rn-contact__card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
    padding: 40px 32px;
    text-align: center;
  }

  .rn-contact .rn-contact__link {
    font-size: 16px;
  }
}

/* SP：ボタンも縦並び */
@media screen and (max-width: 767px) {
  .rn-contact {
    padding: 64px 16px;
  }

  .rn-contact__box {
    padding: 32px 16px;
  }

  .rn-contact__card {
    min-height: 0;
    padding: 32px 16px;
  }

  .rn-contact__copy {
    font-size: 22px;
  }

  .rn-contact__text {
    margin-top: 12px;
    font-size: 13px;
  }

  .rn-contact .rn-contact__button {
    width: 100%;
    max-width: 288px;
    height: 56px;
    font-size: 15px;
  }

  .rn-contact__info {
    margin-top: 24px;
  }

  .rn-contact__label {
    font-size: 16px;
  }

  .rn-contact__links {
    -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: 12px;
    margin-top: 12px;
  }

  .rn-contact .rn-contact__link {
    height: 56px;
  }
}