/* ====================================================================
   TripClear — 成果報酬型採用マーケティング支援（/sns/recruit/）LPレイヤ
   2026-10-04 に、MV＋相談フォーム → 市場 → メリット → 特徴 → 一気通貫
   → 比較表 → 実績 → 流れ → FAQ → CTA の縦長LP構成へ作り替えた。
   sns.css / service-page.css のトークンを前提に、.rcl- prefix で足す。

   守っていること（.claude/skills/design-fb/SKILL.md）:
     - グラデーションは --tc-grad のみ。新しい紫を増やさない
     - グラデーションはボタン（.rcl-btn）だけに使う。見出しの飾り・番号・キャッチには単色（2026-10-14）
     - 角丸は --radius-sm / md / lg（ピルの 999px だけ例外）
     - 面の色は紺 / #f5f5f6 / 白 / ラベンダー / サンセットを交互に
     - 比較は自社列を枠線で強調
     - 左の太いアクセントバーは使わない
   ==================================================================== */

:root {
  --rcl-card: #181c44;         /* = --home-bg-card（styles.css 側のトークン） */
  --rcl-lav: #b8a6ff;          /* = --tc-lavender-2 */
  --rcl-violet: #7b6bff;       /* --tc-grad の中間色 */
  --rcl-cyan: #38d0e6;         /* --tc-grad の終端色 */
  --rcl-pad: clamp(64px, 8vw, 104px);
}

/* ヒーローの見出しは <wbr> の位置でだけ折り返す */
.rc-hero-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.rcl-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------
   共通：見出し・ボタン・注記
   -------------------------------------------------------------------- */
.rcl-title {
  font-family: var(--font-display), var(--font-body-jp);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-feature-settings: 'palt' 1;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  margin: 0 auto 48px;
}
.rcl-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: var(--rcl-violet);
}
.rcl-title--dark { color: var(--tc-light-ink); }

/* 見出しの上に置く小さなリード（記号の飾りは付けない） */
.rcl-slash {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--rcl-violet);
  letter-spacing: 0.08em;
  text-align: center;
}
.rcl-slash--light { color: var(--tc-lavender); }

.rcl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 48px;
  border: 0;
  border-radius: 999px;
  background: var(--tc-grad);
  color: #fff;
  font-family: var(--font-body-jp);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(123, 107, 255, 0.38);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}
.rcl-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}
.rcl-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(123, 107, 255, 0.5); }
.rcl-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.rcl-btn--xl {
  width: min(100%, 480px);
  padding: 22px 40px;
  font-size: clamp(17px, 1.8vw, 21px);
}

.rcl-note {
  max-width: 760px;
  margin: 24px auto 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--tc-light-ink-3);
  text-align: center;
}

/* --------------------------------------------------------------------
   MV
   -------------------------------------------------------------------- */
.rcl-mv {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* 参考LPのように、白一色ではなく淡いラベンダーのグラデーションを敷く */
  background: linear-gradient(165deg, #ffffff 0%, #f4f1ff 42%, #e4dcff 100%);
  color: var(--tc-light-ink);
  padding: 146px 0 56px;
}
/* MV は 2026-10-14 から紺。透明ヘッダーは既定の白文字のまま使う（以前の濃い文字への上書きは削除） */
.rcl-mv .svcp-crumb a { color: var(--tc-light-ink-3); }
.rcl-mv .svcp-crumb a:hover { color: var(--tc-light-ink); }
.rcl-mv .svcp-crumb span { color: var(--tc-light-ink-3); }
.rcl-mv .svcp-crumb span[aria-current] { color: var(--tc-light-ink-2); }
.rcl-mv-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 420px at 6% 12%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(560px 420px at 55% 100%, rgba(56, 208, 230, 0.12), transparent 70%);
}
.rcl-mv-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.rcl-mv-copy { padding-top: 8px; }
.rcl-mv-copy .svcp-crumb { margin-bottom: 0; }
/* 右カラム：人物写真（縁を紺に溶かす）→ 3つのバッジ → 無料相談CTA */
.rcl-mv-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 人物写真（明るい店内）。枠は作らず、四辺をグラデーションで透過させて MV の背景色に溶かす */
.rcl-mv-photo {
  position: relative;
  width: calc(100% + 80px);
  margin: 0 -40px;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, rgba(0, 0, 0, 0.55) 66%, transparent 90%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, rgba(0, 0, 0, 0.55) 66%, transparent 90%);
}
/* 写真の白っぽい背景をサイトのラベンダーに寄せる薄いベール */
.rcl-mv-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 38%, rgba(228, 220, 255, 0.55) 90%);
  mix-blend-mode: multiply;
}
.rcl-mv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transform: none;
}
/* recruit 親以外の写真（サービス・業種ごとの人物写真。1600×1066 で枠と同じ 3:2 なので object-position は効かない）は、
   人物の頭が上端近くにあり、中心のマスクだと髪・帽子・ヘルメットの上がフェードで消える。
   不透明な範囲の中心を上へ寄せ、縦に少し広げる（下端はバッジが重なるのでフェードが強くてよい）。ベールも同じ形に合わせる */
.rcl-mv-photo:not(.rcl-mv-photo--recruit) {
  -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 43%, #000 46%, rgba(0, 0, 0, 0.55) 70%, transparent 92%);
  mask-image: radial-gradient(ellipse 52% 56% at 50% 43%, #000 46%, rgba(0, 0, 0, 0.55) 70%, transparent 92%);
}
.rcl-mv-photo:not(.rcl-mv-photo--recruit)::after {
  background: radial-gradient(ellipse 52% 56% at 50% 43%, transparent 42%, rgba(228, 220, 255, 0.55) 92%);
}
/* recruit 親の人物写真だけ：頭が上端のフェードにかからないよう少し下げる（はみ出した下端はマスクで切れる） */
.rcl-mv-photo--recruit img {
  object-position: 55% 30%;
  transform: translateY(9%);
}
.rcl-mv-visual .rcl-badges { position: relative; justify-content: center; margin-top: -28px; }
.rcl-mv-cta { margin-top: 28px; width: 100%; text-align: center; }
.rcl-mv-cta .rcl-btn--xl { width: min(100%, 460px); padding: 24px 40px; font-size: clamp(18px, 1.7vw, 23px); }
.rcl-mv-cta-sub {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--rcl-violet);
}
.rcl-mv-title {
  font-family: var(--font-display), var(--font-body-jp);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-feature-settings: 'palt' 1;
  margin: 0 0 22px;
}
/* パンくず → h1 の間隔（以前はパンくずと h1 の間の一言が margin 28px で取っていた） */
.rcl-mv-copy .svcp-crumb + .rcl-mv-title { margin-top: 28px; }
/* キャッチは地の文字色で置く。グラデの斜め帯は「AIが作ったLP」に見えるので使わない（2026-10-14）。
   色を変えるのは結論の 3 行目だけ */
.rcl-mv-catch {
  margin: 0 0 22px;
  font-size: clamp(21px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-feature-settings: 'palt' 1;
  color: var(--tc-light-ink);
}
.rcl-mv-catch span { display: block; }
html[lang="en"] .rcl-mv-catch { font-size: clamp(20px, 2.2vw, 30px); }
.rcl-mv-catch span:nth-child(3) { color: var(--tc-purple-deep); }
.rcl-mv-lead {
  max-width: 32em;
  margin: 0 0 32px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
  color: var(--tc-light-ink-2);
}

.rcl-badges {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rcl-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 164px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--tc-purple-deep);
  box-shadow: 0 0 22px 8px rgba(255, 255, 255, 0.9), 0 14px 32px rgba(61, 41, 137, 0.14);
  text-align: center;
}
.rcl-badge svg { width: 44px; height: 44px; color: var(--rcl-violet); margin-bottom: 6px; }
.rcl-badge-label { font-size: 14px; font-weight: 700; line-height: 1.3; }
.rcl-badge-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
}
.rcl-badge-num em { font-style: normal; font-family: var(--font-body-jp); font-size: 17px; margin-left: 1px; }
.rcl-badge-num--word { font-family: var(--font-body-jp); font-size: 22px; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------
   対応媒体の帯
   -------------------------------------------------------------------- */
.rcl-media {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 36px;
  padding: 30px 24px 96px;
  margin-bottom: -48px;
  background: #fff;
  color: var(--tc-light-ink);
}
.rcl-media-label {
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--home-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.rcl-media-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rcl-media-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.rcl-media-list img { width: 28px; height: 28px; object-fit: contain; }

/* 支援実績のロゴ帯（Results のあるページで対応媒体の帯の代わりに置く）。
   白地と下余白は .rcl-media と同じ（直下の紺の面の上端カーブが重なる）。ラベルのピルを上中央に置き、その下にロゴを流す。
   流れ方とロゴの大きさは service-page.css の .svcp-logobar-marquee / -track / -logo をそのまま使う */
.rcl-logos {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px 0 96px;
  margin-bottom: -48px;
  background: #fff;
  color: var(--tc-light-ink);
  overflow: hidden;
}
.rcl-logos .svcp-logobar-marquee { width: 100%; }

/* --------------------------------------------------------------------
   市場（ドーナツ3つ）
   -------------------------------------------------------------------- */
.rcl-market {
  position: relative;
  z-index: 1;
  overflow-x: clip;               /* 縦は clip しない（見出しのピルが上の白帯にはみ出すため） */
  background: var(--home-bg);
  color: #fff;
  border-radius: 50% 50% 0 0 / 48px 48px 0 0;
  padding: 0 0 var(--rcl-pad);
}
.rcl-pill-title {
  display: table;
  margin: 0 auto 8px;
  padding: 14px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--tc-light-ink);
  font-size: clamp(18px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-feature-settings: 'palt' 1;
  text-align: center;
  transform: translateY(-50%);
  box-shadow: 0 10px 30px rgba(10, 13, 38, 0.18);
}
.rcl-pill-title + .rcl-donuts { margin-top: 20px; }
.rcl-market-sub {
  margin: 8px 0 36px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tc-lavender);
  text-align: center;
  letter-spacing: 0.06em;
}
.rcl-donuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.rcl-donut { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rcl-donut-q {
  min-height: 3.2em;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.rcl-donut-ring { position: relative; width: min(100%, 210px); aspect-ratio: 1; }
.rcl-donut-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.rcl-donut-track,
.rcl-donut-arc { fill: none; stroke-width: 28; }
.rcl-donut-track { stroke: rgba(255, 255, 255, 0.12); }
.rcl-donut-arc {
  stroke-dasharray: var(--p) 100;
  transition: stroke-dasharray 1.3s var(--ease-out-expo) 0.2s;
}
.js .rcl-donut[data-reveal]:not(.is-revealed) .rcl-donut-arc { stroke-dasharray: 0 100; }
.rcl-donut--a .rcl-donut-arc { stroke: var(--tc-lavender); }
.rcl-donut--b .rcl-donut-arc { stroke: var(--rcl-violet); }
.rcl-donut--c .rcl-donut-arc { stroke: var(--rcl-cyan); }
.rcl-donut-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
}
.rcl-donut-num span {
  margin-bottom: 6px;
  font-family: var(--font-body-jp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--home-ink-2);
}
.rcl-donut-num b { font-weight: inherit; white-space: nowrap; }
.rcl-donut-num em { font-style: normal; font-size: 0.5em; margin-left: 2px; }
.rcl-donut-cap {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--home-ink-2);
}
.rcl-market-band {
  margin: 52px 0 0;
  font-size: clamp(19px, 2.3vw, 26px);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  font-feature-settings: 'palt' 1;
}
.rcl-market-band span {
  background: linear-gradient(transparent 62%, rgba(123, 107, 255, 0.55) 62%);
}
.rcl-src {
  margin: 20px 0 0;
  font-size: 11.5px;
  color: var(--home-ink-3);
  text-align: center;
}

/* --------------------------------------------------------------------
   メリット／つまずきやすいところ
   -------------------------------------------------------------------- */
.rcl-merit {
  position: relative;
  z-index: 2;
  background: var(--tc-light-bg);
  padding: var(--rcl-pad) 0 calc(var(--rcl-pad) + 8px);
}
.rcl-merit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* PC は3枚を縦長カードで横並び（画像→ラベル→見出し→本文）。601〜760px は画像左の横組み、
   600px 以下は本文の列が細くなりすぎるので PC と同じ縦積みに戻す */
.rcl-merit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 28px 34px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--tc-light-line);
}
.rcl-merit-item img {
  width: min(100%, 200px);
  height: auto;
  margin-bottom: 18px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.rcl-merit-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--tc-lavender-soft);
  color: var(--tc-purple-deep);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.rcl-merit-badge span { font-weight: 800; }
.rcl-merit-title {
  margin: 0 0 10px;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--tc-purple-deep);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-merit-desc {
  margin: 0;
  text-align: left;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--tc-light-ink-2);
}
.rcl-merit-arrow {
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 96px;
  height: 46px;
  transform: translateX(-50%);
  background: var(--tc-light-bg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* --------------------------------------------------------------------
   TripClearの特徴（ラベンダー面）
   -------------------------------------------------------------------- */
.rcl-feature {
  position: relative;
  overflow: hidden;
  background: var(--rcl-lav);
  color: var(--tc-purple-ink);
  padding: calc(var(--rcl-pad) + 16px) 0 var(--rcl-pad);
}
.rcl-title--feature { color: var(--tc-purple-ink); }
.rcl-title--feature::after { background: var(--tc-purple-ink); }
.rcl-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rcl-feature-item { display: flex; flex-direction: column; align-items: center; }
.rcl-feature-img {
  display: block;
  width: min(100%, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 5px solid #fff;
  box-shadow: 0 14px 30px rgba(61, 41, 137, 0.25);
}
.rcl-feature-img img { width: 100%; height: 100%; object-fit: cover; }
.rcl-feature-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 12px;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-feature-desc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--tc-purple-ink);
}

.rcl-cta-row {
  background: #fff;
  padding: 64px 24px 0;
  text-align: center;
}

/* --------------------------------------------------------------------
   一気通貫（左右交互の行）
   -------------------------------------------------------------------- */
.rcl-onestop {
  background: #fff;
  padding: 72px 0 var(--rcl-pad);
}
.rcl-rows {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 900px;
  margin: 0 auto;
}
.rcl-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.rcl-row--rev { grid-template-columns: minmax(0, 1fr) 240px; }
.rcl-row--rev .rcl-row-img { order: 2; }
.rcl-row-img {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tc-light-line);
  box-shadow: 10px 10px 0 var(--tc-lavender-soft);
}
.rcl-row-img img { width: 100%; height: 100%; object-fit: cover; }
.rcl-row-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 22px 10px 12px;
  border-radius: 999px;
  background: var(--tc-purple-deep);
  color: #fff;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 800;
  line-height: 1.4;
}
.rcl-row:nth-child(even) .rcl-row-title { background: var(--rcl-violet); }
.rcl-row-title span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--tc-purple-deep);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.rcl-row-desc { margin: 0; font-size: 15px; line-height: 1.9; color: var(--tc-light-ink-2); }
.rcl-row-note { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--tc-light-ink-3); }
/* 04 LINE運用設計の下：エントリー〜質疑応答の6ステップと、自動化できること3枠 */
.rcl-line {
  margin-top: -12px;
  padding: 32px 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--tc-light-bg);
}
.rcl-line-title {
  margin: 0 0 26px;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  color: var(--tc-purple-deep);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-line-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.rcl-line-flow::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 4%;
  top: 31px;
  height: 4px;
  border-radius: 999px;
  background: var(--tc-lavender-soft);
}
.rcl-line-flow::after {
  content: "";
  position: absolute;
  right: 1%;
  top: 25px;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--tc-lavender-soft);
}
.rcl-line-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rcl-line-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tc-lavender-soft);
  color: var(--rcl-violet);
  box-shadow: 0 6px 16px rgba(61, 41, 137, 0.08);
}
.rcl-line-ico svg { width: 30px; height: 30px; }
.rcl-line-name {
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tc-purple-deep);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.rcl-line-step small {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--tc-light-ink-3);
}
.rcl-line-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.rcl-line-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--tc-light-line);
  list-style: none;
}
.rcl-line-box li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tc-light-ink);
}
.rcl-line-box svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--tc-lavender-soft);
  color: var(--rcl-violet);
}

.rcl-allin {
  margin: 72px 0 0;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  color: var(--tc-light-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-feature-settings: 'palt' 1;
}
html[lang="ja"] .rcl-allin mark { white-space: nowrap; }
.rcl-allin mark {
  background: linear-gradient(transparent 60%, var(--tc-lavender-soft) 60%);
  color: var(--tc-purple-deep);
}
.rcl-allin-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--tc-light-ink-3);
  text-align: center;
}

/* --------------------------------------------------------------------
   比較表
   -------------------------------------------------------------------- */
.rcl-compare {
  background: var(--tc-lavender-soft);
  padding: var(--rcl-pad) 0;
}
.rcl-table-wrap { max-width: 900px; margin: 0 auto; }
.rcl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
  color: var(--tc-light-ink);
}
.rcl-table thead th,
.rcl-table thead td { vertical-align: bottom; }
.rcl-table-corner { width: 21%; }
.rcl-table thead th {
  padding: 12px 8px;
  background: var(--tc-light-ink-3);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.rcl-table thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; border-right: 0; }
.rcl-table thead th small,
.rcl-table thead th.rcl-table-own small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
.rcl-table thead th.rcl-table-own {
  padding: 22px 8px 16px;
  background: var(--home-bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-right: 0;
}
.rcl-table thead th.rcl-table-own small { font-family: var(--font-body-jp); color: var(--tc-lavender); opacity: 1; }
.rcl-table tbody th {
  padding: 14px 10px;
  background: var(--tc-purple-deep);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.rcl-table tbody tr:first-child th { border-radius: var(--radius-sm) 0 0 0; }
.rcl-table tbody tr:last-child th { border-radius: 0 0 0 var(--radius-sm); border-bottom: 0; }
.rcl-table tbody th,
.rcl-table tbody td { word-break: keep-all; overflow-wrap: anywhere; }
.rcl-table tbody td {
  padding: 14px 10px;
  background: #fff;
  text-align: center;
  line-height: 1.5;
  border-bottom: 1px solid var(--tc-light-line);
  border-right: 1px solid var(--tc-light-line);
}
.rcl-table tbody tr:last-child td { border-bottom: 0; }
.rcl-table tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius-sm) 0; }
.rcl-table tbody td:last-child { border-right: 0; }
.rcl-table tbody td.rcl-table-own {
  font-weight: 800;
  color: var(--home-bg);
  border-left: 4px solid var(--home-bg);
  border-right: 4px solid var(--home-bg);
}
.rcl-table tbody tr:last-child td.rcl-table-own {
  border-bottom: 4px solid var(--home-bg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.rcl-yen {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--home-bg);
}
.rcl-yen em { font-style: normal; font-family: var(--font-body-jp); font-size: 14px; margin-left: 2px; }
.rcl-mark { display: block; font-size: 22px; line-height: 1.1; color: var(--rcl-violet); }

/* --------------------------------------------------------------------
   CTA（紺／ラベンダー）
   -------------------------------------------------------------------- */
.rcl-cv { padding: 72px 24px; }
.rcl-cv--dark { background: var(--home-bg); }
.rcl-cv-box {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 28px 36px;
  border-radius: var(--radius-lg);
  background: var(--rcl-card);
  text-align: center;
}
.rcl-cv-title {
  margin: 0 0 22px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.6;
  color: var(--tc-lavender);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-cv-sub { margin: 18px 0 0; font-size: 15px; font-weight: 700; color: #fff; }

/* --------------------------------------------------------------------
   RESULTS（サンセット面）
   -------------------------------------------------------------------- */
.rcl-results {
  background: var(--tc-sunset);
  color: #fff;
  padding: var(--rcl-pad) 0;
}
.rcl-results-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 52px;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.rcl-results-title b {
  font-family: var(--font-display);
  font-size: 2.1em;
  font-weight: 800;
  letter-spacing: -0.01em;
  vertical-align: -0.06em;
}
.rcl-results-title em { font-style: normal; font-size: 0.9em; margin-left: 2px; }
.rcl-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}
.rcl-case {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: var(--radius-md);
  background: rgba(12, 17, 48, 0.58);
}
.rcl-phone {
  padding: 7px;
  border-radius: 30px;
  background: #0d0f1f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 18px 40px rgba(0, 0, 0, 0.4);
}
.rcl-phone img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top;
  border-radius: 23px;
}
.rcl-case-cat {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tc-lavender);
}
.rcl-case-name { margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.4; }
.rcl-case-desc { margin: 0 0 16px; font-size: 13.5px; line-height: 1.8; color: var(--home-ink-2); }
.rcl-case-result {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.rcl-case-result strong { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; }
.rcl-case-result em { font-style: normal; margin-left: 1px; }

/* --------------------------------------------------------------------
   ご利用の流れ（白カードに縦のタイムライン）
   -------------------------------------------------------------------- */
.rcl-flow {
  background: var(--tc-light-bg);
  padding: var(--rcl-pad) 0;
}
.rcl-flow-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 56px 52px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 48px rgba(20, 23, 46, 0.08);
}
.rcl-flow-card .rcl-title { margin-bottom: 20px; }
.rcl-flow-lead {
  margin: 0 auto 40px;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 1.85;
  text-align: center;
  color: var(--tc-light-ink-2);
}
.rcl-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rcl-steps::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: var(--tc-lavender-soft);
}
.rcl-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.rcl-step + .rcl-step { margin-top: 28px; }
.rcl-step-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--tc-lavender-soft);
}
.rcl-step-ico img { width: 100%; height: 100%; object-fit: cover; }
.rcl-step-ico--svg { background: var(--tc-purple-deep); border-color: var(--tc-purple-deep); color: #fff; }
.rcl-step-ico--svg svg { width: 36px; height: 36px; }
.rcl-step-body { padding-top: 10px; }
.rcl-step-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px 20px 6px 6px;
  border-radius: 999px;
  background: var(--home-bg);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}
.rcl-step-title span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rcl-violet);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.rcl-step-desc { margin: 10px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--tc-light-ink-2); }
.rcl-step-desc a { color: var(--rcl-violet); text-decoration: underline; }

/* --------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .rcl-badge { width: 140px; }
  .rcl-badge svg { width: 38px; height: 38px; }
  .rcl-badge-num { font-size: 32px; }
  .rcl-badge-num--word { font-size: 19px; }
}

@media (max-width: 900px) {
  .rcl-mv { padding: 120px 0 64px; }
  .rcl-mv-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rcl-mv-visual { width: 100%; max-width: 520px; margin: 0 auto; }
  .rcl-cases { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}

@media (max-width: 760px) {
  .rcl-title { margin-bottom: 36px; }
  .rcl-merit-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .rcl-merit-item { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: center; text-align: left; padding: 24px; }
  .rcl-merit-item img { width: 100%; margin-bottom: 0; }
  .rcl-feature-list { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 44px; }
  .rcl-feature-desc { text-align: center; }
  .rcl-row,
  .rcl-row--rev { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rcl-row--rev .rcl-row-img { order: 0; }
  .rcl-row-img { width: min(70%, 240px); margin: 0 auto; }
  .rcl-row-body { text-align: center; }
  .rcl-row-desc,
  .rcl-row-note { text-align: left; }
  .rcl-flow-card { padding: 40px 20px 36px; }
}

@media (max-width: 600px) {
  :root { --rcl-pad: 64px; }
  .rcl-inner { padding: 0 16px; }
  .rcl-mv-inner { padding: 0 16px; }
  .rcl-mv-lead { font-size: 15.5px; }
  .rcl-badges { gap: 10px; justify-content: space-between; }
  .rcl-badge { width: calc((100% - 20px) / 3); box-shadow: 0 0 14px 5px rgba(255, 255, 255, 0.9), 0 10px 22px rgba(61, 41, 137, 0.12); }
  .rcl-badge svg { width: 32px; height: 32px; margin-bottom: 3px; }
  .rcl-badge-label { font-size: 12px; }
  .rcl-badge-num { font-size: 28px; }
  .rcl-badge-num em { font-size: 13px; }
  .rcl-badge-num--word { font-size: 16px; }
  .rcl-mv-cta { margin-top: 24px; }
  .rcl-mv-visual .rcl-badges { width: 100%; margin-top: -20px; }
  .rcl-mv-photo { width: calc(100% + 32px); margin: 0 -16px; }

  .rcl-media { gap: 12px; padding: 24px 16px 112px; }
  .rcl-media-list { gap: 10px 18px; }
  .rcl-media-list li { font-size: 13px; gap: 6px; }
  .rcl-media-list img { width: 22px; height: 22px; }
  .rcl-logos { gap: 14px; padding: 24px 0 112px; }

  .rcl-pill-title { display: block; margin: 0 auto; padding: 12px 18px; border-radius: var(--radius-md); }
  .rcl-market-sub { margin: 0 0 28px; }
  .rcl-donuts { gap: 10px; }
  .rcl-donut-q { font-size: 11.5px; min-height: 4.8em; margin-bottom: 10px; }
  /* 改行を外すのは和文だけ。英文は <br> の前後に空白が無く「boardsand」のように語がくっつく */
  html[lang="ja"] .rcl-donut-q br { display: none; }
  .rcl-donut-track,
  .rcl-donut-arc { stroke-width: 30; }
  .rcl-donut-num { font-size: 24px; }
  .rcl-donut-num span { font-size: 9.5px; margin-bottom: 3px; letter-spacing: 0; }
  .rcl-donut-cap { font-size: 11px; margin-top: 10px; word-break: keep-all; }
  .rcl-market-band { margin-top: 40px; }

  .rcl-merit-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 24px 20px 26px; }
  .rcl-merit-item img { width: 140px; margin-bottom: 14px; }
  .rcl-feature-list { grid-template-columns: minmax(0, 1fr); }
  .rcl-merit-title { font-size: 20px; }
  .rcl-merit-desc { font-size: 14.5px; }
  .rcl-feature-list { gap: 36px 16px; }
  .rcl-feature-img { width: min(100%, 140px); }
  .rcl-feature-title { font-size: 18px; gap: 6px; }
  .rcl-feature-desc { font-size: 14px; }

  /* mark〜「で引き受けます」が keep-all で1語扱いになり、最後の「す」だけが折り返していたので、
     末尾を塊にして mark の後ろで改行できるようにする */
  html[lang="ja"] .rcl-allin-tail { display: inline-block; }

  .rcl-cta-row { padding-top: 48px; }
  .rcl-btn--xl { padding: 20px 24px; }
  .rcl-onestop { padding-top: 56px; }
  .rcl-rows { gap: 48px; }
  .rcl-row-title { font-size: 16px; padding: 8px 18px 8px 8px; }
  .rcl-row-desc { font-size: 14px; }
  .rcl-line { margin-top: -20px; padding: 26px 14px 16px; }
  .rcl-line-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 6px; }
  .rcl-line-flow::before,
  .rcl-line-flow::after { display: none; }
  .rcl-line-ico { width: 54px; height: 54px; }
  .rcl-line-ico svg { width: 26px; height: 26px; }
  .rcl-line-name { font-size: 11.5px; padding: 3px 10px; }
  .rcl-line-boxes { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rcl-line-box { padding: 14px 16px; }
  .rcl-line-box li { font-size: 14px; }

  .rcl-table { font-size: 11.5px; }
  .rcl-table-corner { width: 22%; }
  .rcl-table thead th { font-size: 11.5px; padding: 10px 4px; }
  .rcl-table thead th small { font-size: 9.5px; }
  /* 「成果報酬型」の「型」だけが折り返さないよう1行に固定し、狭い画面では列幅に合わせて字を縮める */
  html[lang="ja"] .rcl-table thead th.rcl-table-own small { white-space: nowrap; letter-spacing: -0.02em; font-size: min(11px, 2.9vw); }
  .rcl-table thead th.rcl-table-own { font-size: 14px; padding: 16px 4px 12px; }
  .rcl-table tbody th { font-size: 11px; padding: 12px 4px; }
  .rcl-table tbody td { padding: 12px 4px; }
  .rcl-yen { font-size: 22px; }
  .rcl-yen em { font-size: 11px; }
  .rcl-mark { font-size: 17px; }
  .rcl-table tbody td.rcl-table-own { border-left-width: 3px; border-right-width: 3px; }
  .rcl-table tbody tr:last-child td.rcl-table-own { border-bottom-width: 3px; }
  .rcl-note { text-align: left; }

  .rcl-cv { padding: 56px 16px; }
  .rcl-cv-box { padding: 32px 18px 28px; }

  .rcl-case { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .rcl-phone { padding: 5px; border-radius: 22px; }
  .rcl-phone img { border-radius: 17px; }
  .rcl-case-cat { letter-spacing: 0.08em; word-break: keep-all; }
  .rcl-case-name { font-size: 16px; }
  .rcl-case-desc { font-size: 12.5px; margin-bottom: 12px; }
  .rcl-case-result strong { font-size: 28px; }
  /* 「アルバイト応／募」のように語の途中で折れないよう、和文は語の切れ目で折り返す */
  html[lang="ja"] .rcl-case-result { word-break: keep-all; overflow-wrap: anywhere; }

  .rcl-steps::before { left: 27px; top: 28px; bottom: 28px; }
  .rcl-step { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .rcl-step-ico { width: 56px; height: 56px; }
  .rcl-step-ico--svg svg { width: 26px; height: 26px; }
  .rcl-step-body { padding-top: 6px; }
  .rcl-flow-card { padding: 36px 16px 32px; }
  .rcl-step-title { font-size: 14px; gap: 8px; padding-right: 14px; }
  html[lang="ja"] .rcl-step-title { word-break: keep-all; overflow-wrap: anywhere; }
  .rcl-step-title span { width: 26px; height: 26px; font-size: 12px; }
  .rcl-step-desc { font-size: 13.5px; }

}

/* 〜374px（iPhone SE 初代など）は比較表の列が細く「場／合」「かか／る」と1字だけ折れるので、字と左右の余白を詰める */
@media (max-width: 374px) {
  .rcl-table { font-size: 10.5px; }
  .rcl-table tbody th { font-size: 10.5px; }
  .rcl-table thead th,
  .rcl-table thead th.rcl-table-own,
  .rcl-table tbody th,
  .rcl-table tbody td { padding-left: 2px; padding-right: 2px; }
  /* 英語版の「check companies on social media」は1行に固定すると画面からはみ出すので、語の切れ目で折る */
  html[lang="en"] .rcl-pill-title .sns-nowrap { white-space: normal; }
  /* 「広告運用手数料」の7字が丸いバッジの縁に触れないよう、狭い画面ではラベルを一回り小さくする */
  .rcl-badge-label { font-size: 10.5px; }
}

/* ====================================================================
   汎用 LP 用の追加（2026-10-09）
   採用マーケ（/sns/recruit/）の LP 形式を、ほかのサービス親ページと業種別ページへ広げるための部品。
   既存の .rcl- 部品の上に、4枚組のメリット／理由・紺面の統計カード・
   POV 面・一気通貫の下に残す既存面の調整を足す。
   ==================================================================== */

/* MV の見出しは <wbr> の位置でだけ折り返す（業種別の h1 は「業種名の／サービス名」で折る） */
.rcl-mv-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* recruit 親以外の MV はサービス別の定型キャッチが recruit より長いので、一回り小さくし、読点と HTML 側の <wbr> の位置でだけ折る */
/* 業種別の h1 は「業種名の／サービス名」で長くなるので、recruit 親以外の MV では一回り小さく組む */
.rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-mv-title { font-size: clamp(26px, 2.9vw, 42px); }
/* バッジのラベルが「Insta360公認パート／ナー」のように語の途中で折れないよう、HTML 側の <wbr> の位置でだけ折る */
.rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-badge-label {
  max-width: 82%;
  padding: 0 4px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-mv-catch span {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 市場面が無いページの対応媒体の帯（下の紺面へ食い込ませない） */
.rcl-media--flat { padding-bottom: 30px; margin-bottom: 0; }

/* 市場／数字（紺）。業種別は industry.css の .ind-why-numbers（紺面用の色）をそのまま使い、
   元の面に付いていた区切り線と上の余白だけ外す */
.rcl-market .rcl-pill-title { max-width: 880px; }
/* 汎用 LP の見出しは結論文で2行になることがある。translateY(-50%) だと2行分が上の対応媒体の帯に食い込むので、
   1行ぶん（約半分の高さ）だけ持ち上げ、2行目は下へ伸ばす。語の途中では折らない（recruit 親は従来のまま） */
.rcl-market:has(.rcl-market-stats) .rcl-pill-title {
  transform: translateY(-34px);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-market-stats { margin-top: 8px; }
/* 業種別の見出しは元の Numbers のリード（句ごとの .ind-nb）。industry.css の .ind-why-numbers-lead と同じく、
   句は1行に収まる限りまとめ、収まらないとき（英語版の長い句など）だけ句の中で折る */
.rcl-market .rcl-pill-title .ind-nb { display: inline-block; max-width: 100%; white-space: normal; }
html[lang="ja"] .rcl-market .rcl-pill-title .ind-nb { white-space: nowrap; }
@media (max-width: 600px) { html[lang="ja"] .rcl-market .rcl-pill-title .ind-nb { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } }
.rcl-market .ind-why-numbers.rcl-market-stats {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
/* 親ページの数値カード（.sns-results-highlight）は下に罫線と余白を持つので、面の最後では外す */
.rcl-market .sns-results-highlight { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.rcl-market .rcl-pill-title + .rcl-market-stats .sns-results-highlight { margin-top: 32px; }
/* 見出しの無い数字面（sns 親）は、上端のカーブに数字がかからないよう余白を取り、カードを中央に寄せる */
.rcl-market .rcl-inner > .rcl-market-stats:first-child { padding-top: 72px; }
.rcl-market .rcl-market-stats > .sns-results-highlight { max-width: 880px; margin-left: auto; margin-right: auto; }
/* 親ページの数値カード（2〜3枚）は左詰めの flex なので、カード幅を揃えて面の中央に寄せる */
.rcl-market .sns-results-highlight { justify-content: center; }
.rcl-market .sns-result-big-card { text-align: center; }
@media (min-width: 1025px) {
  .rcl-market .sns-result-big-card,
  .rcl-market .sns-result-big-card:not(:first-child) { flex: 0 1 300px; padding-left: 32px; padding-right: 32px; }
}
/* 業種別の統計が2枚だけのページは、2列を全幅に広げると右半分が空いて見えるので、幅を絞って中央に置く
   （3枚以上のページは industry.css の並びのまま） */
.rcl-market-stats > .svcp-stats-grid--2 { max-width: 760px; margin-left: auto; margin-right: auto; }

/* 親ページのメリット／理由の h2 は <wbr> が無く、keep-all だと全体が1語扱いになり「選／ばれる」のように
   はみ出した位置で折れる。文節で折る auto-phrase（Chrome 系）を使い、未対応のブラウザは通常の折り返し＋行長の均等化に任せる
   （業種別の h2 は <wbr> の位置で折れるので対象外） */
.rcl-merit:has(.rcl-merit-grid--4) .rcl-title:not(:has(wbr)),
.rcl-feature:has(.rcl-feature-list--4) .rcl-title:not(:has(wbr)) {
  word-break: normal;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* メリット4枚（1000px 超は横一列の4カラム、761〜1000px は 2×2、760px 以下は画像左の1カラム）。
   4カラムはカード幅が約 250px になるので、縦型のまま画像・見出し・本文・余白を詰める。
   見出しは .rcl-merit-title の keep-all のまま、HTML 側の <wbr> の位置でだけ折る */
.rcl-merit-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
}
@media (min-width: 1001px) {
  .rcl-merit-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1080px;
  }
  /* 左右の余白は 14px。18px だと見出しの最長の塊（11字。「買い物先として選ばれる」など）が 19px で収まらず語の途中で折れる */
  .rcl-merit-grid--4 .rcl-merit-item { padding: 24px 14px 26px; }
  .rcl-merit-grid--4 .rcl-merit-item img { width: min(100%, 140px); margin-bottom: 14px; }
  .rcl-merit-grid--4 .rcl-merit-title { font-size: clamp(16px, 1.35vw, 19px); }
  .rcl-merit-grid--4 .rcl-merit-desc { font-size: 14px; }
}
.rcl-merit .svcp-stats-note { margin-top: 28px; text-align: center; color: var(--tc-light-ink-3); }

/* 選ばれる理由4つ */
.rcl-feature-list--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1080px;
  gap: 28px;
  margin: 0 auto;
}
.rcl-feature-list--4 .rcl-feature-img { width: min(100%, 170px); }
/* 4列だと1列が240px前後しかないので、折り返せない語の塊（最長は「旅行系インフルエンサーに強い」の14字）が
   1行に収まる大きさに下げる */
.rcl-feature-list--4 { gap: 24px; }
.rcl-feature-list--4 .rcl-feature-title { font-size: clamp(14px, 1.5vw, 17px); }
.rcl-feature-num {
  display: inline-block;
  margin: 18px 0 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--tc-purple-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}
.rcl-feature-num em {
  font-style: normal;
  font-family: var(--font-body-jp);
  font-size: 12px;
  margin-left: 2px;
}
.rcl-feature-num + .rcl-feature-title { margin-top: 12px; }
.rcl-feature-more {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}
.rcl-feature-more a {
  color: var(--tc-purple-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* POV 面（業種別の sns・recruit）。industry.css の .pov-in はライト面前提の色なので、そのまま #f5f5f6 に置く */
.rcl-povin {
  background: var(--tc-light-bg);
  padding: var(--rcl-pad) 0;
}
.rcl-povin .pov-in { margin-top: 0; padding-top: 0; border-top: 0; justify-content: center; }

/* 一気通貫：見出し下のリードと、下に残す既存の面（ファネル・連携図・媒体構成など） */
.rcl-rows-lead {
  max-width: 40em;
  margin: -28px auto 40px;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--tc-light-ink-2);
}
/* 一気通貫の下に残す既存の面（sns 親のファネル・工数比較・プラン、ec 親の連携図、業種別の媒体構成と注記）。
   これらは .sns-details--light 配下の色指定で組まれているので、HTML 側で同じクラスの箱に包み、
   箱の地色と罫線だけ消して白地に置く */
.body-home .rcl-onestop-rest.sns-details--light { background: transparent; border: 0; }
.rcl-onestop .sns-details-sub { margin-top: 64px; }
.rcl-onestop .ind-media { margin-top: 56px; }

/* Process（.rcl-rows--grid の 91 枚。先頭はご利用の流れを統合した「お問い合わせ・お見積り」）：
   左右交互の行だと 2,000px を超えるので、PC はカードを並べて 1 画面に収める。
   5 段は横一列、6 段は 3 列×2 段（〜1000px は 3 列、SP は下の 600px の横組み）。
   recruit 親は 4 行＋LINE 図のサービス範囲の面なので対象外 */
@media (min-width: 601px) {
  .rcl-rows--grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px 24px;
    max-width: 1120px;
  }
  .rcl-rows--grid:has(> .rcl-row:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; gap: 44px 48px; }
  .rcl-rows--grid .rcl-row,
  .rcl-rows--grid .rcl-row--rev { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .rcl-rows--grid .rcl-row--rev .rcl-row-img { order: 0; }
  .rcl-rows--grid .rcl-row-img { width: min(100%, 168px); margin: 0; box-shadow: 6px 6px 0 var(--tc-lavender-soft); }
  .rcl-rows--grid .rcl-row-body { text-align: center; }
  .rcl-rows--grid .rcl-row-title { margin-bottom: 10px; font-size: 15px; padding: 6px 14px 6px 6px; gap: 8px; text-align: left; }
  .rcl-rows--grid .rcl-row-title span { flex: none; width: 26px; height: 26px; font-size: 12px; }
  html[lang="ja"] .rcl-rows--grid .rcl-row-title { word-break: keep-all; overflow-wrap: anywhere; }
  .rcl-rows--grid .rcl-row-desc { font-size: 13.5px; line-height: 1.8; text-align: left; }
  /* 次のフェーズへの矢印（画像の高さの中央、カードの間） */
  .rcl-rows--grid .rcl-row:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 84px;
    right: -12px;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--rcl-violet);
    border-right: 2px solid var(--rcl-violet);
    transform: translate(50%, -50%) rotate(45deg);
  }
  .rcl-rows--grid:has(> .rcl-row:nth-child(6):last-child) .rcl-row::after { right: -24px; }
  .rcl-rows--grid:has(> .rcl-row:nth-child(6):last-child) .rcl-row:nth-child(3n)::after { display: none; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .rcl-rows--grid,
  .rcl-rows--grid:has(> .rcl-row:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; gap: 36px 24px; }
  .rcl-rows--grid .rcl-row:not(:last-child)::after,
  .rcl-rows--grid:has(> .rcl-row:nth-child(6):last-child) .rcl-row::after { display: none; }
}

/* Results（業種別。サンセット面に既存の実績カード） */
.rcl-results .rcl-title { color: #fff; }

@media (max-width: 1000px) {
  .rcl-feature-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; gap: 40px 28px; }
  .rcl-feature-list--4 .rcl-feature-title { font-size: 20px; }
}
@media (max-width: 760px) {
  .rcl-merit-grid--4 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 600px) {
  /* 丸いバッジ（1/3 幅）に「クリック後まで」などの7字の語が収まるよう、語の値を一回り小さくする */
  .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-badge-num--word { font-size: 14px; word-break: keep-all; overflow-wrap: anywhere; }
  .rcl-feature-list--4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 36px; }
  .rcl-feature-list--4 .rcl-feature-img { width: min(100%, 140px); }
  .rcl-feature-list--4 .rcl-feature-title { font-size: 18px; }
  .rcl-market .rcl-inner > .rcl-market-stats:first-child { padding-top: 56px; }
  .rcl-market:has(.rcl-market-stats) .rcl-pill-title { transform: translateY(-26px); }
  .rcl-merit:has(.rcl-merit-grid--4) .rcl-title:not(:has(wbr)),
  .rcl-feature:has(.rcl-feature-list--4) .rcl-title:not(:has(wbr)) { font-size: 22px; }
  /* 親ページの数値カード（紺）は1列の縦積みだと間延びするので2列に。3枚目は横いっぱい */
  .rcl-market .sns-results-highlight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; padding-bottom: 0; }
  .rcl-market .sns-result-big-card,
  .rcl-market .sns-result-big-card:not(:first-child) { padding: 0; border-top: 0; }
  .rcl-market .sns-result-big-card:nth-child(3):last-child { grid-column: 1 / -1; }
  .rcl-market .sns-result-big-number,
  .rcl-market .sns-result-big-card:first-child .sns-result-big-number { font-size: 40px; }
  .rcl-rows-lead { margin: -16px auto 32px; font-size: 14px; text-align: left; }
  /* フェーズが4〜5行あるので、SP は画像を小さく左に置く横組みにして縦の間延びを抑える
     （recruit 親の行は 4 行＋LINE 図なので従来の縦積みのまま。リード文のある一気通貫だけに効かせる） */
  .rcl-rows--grid { gap: 28px; }
  .rcl-rows--grid .rcl-row,
  .rcl-rows--grid .rcl-row--rev { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
  .rcl-rows--grid .rcl-row--rev .rcl-row-img { order: 0; }
  .rcl-rows--grid .rcl-row-img { width: 96px; margin: 0; box-shadow: 5px 5px 0 var(--tc-lavender-soft); }
  .rcl-rows--grid .rcl-row-body { text-align: left; }
  .rcl-rows--grid .rcl-row-title { margin-bottom: 8px; font-size: 15px; padding: 6px 14px 6px 6px; gap: 8px; }
  .rcl-rows--grid .rcl-row-title span { width: 26px; height: 26px; font-size: 12px; }
  html[lang="ja"] .rcl-rows--grid .rcl-row-title { word-break: keep-all; overflow-wrap: anywhere; }
  .rcl-rows--grid .rcl-row-desc { font-size: 13.5px; line-height: 1.8; }
  .rcl-onestop .sns-details-sub { margin-top: 48px; }
  .rcl-onestop .ind-media { margin-top: 40px; }
}

/* --------------------------------------------------------------------
   英語版だけの調整（汎用 LP。日本語版の見た目は変えない）
   -------------------------------------------------------------------- */
/* MV の見出し：業種別の h1 は「…Management for<br>Hotels & Ryokan」。SP で1行目が収まらず「for」だけが
   1行に落ちるので、最終行が1語だけにならないよう組む（balance だと「Performance-／based」と
   ハイフンの位置で割られるので pretty にする） */
html[lang="en"] .rcl-mv-title { text-wrap: pretty; }
/* MV のキャッチ：英語は日本語より長く、recruit 親以外の MV の左カラムでは「…then／chosen」「…for／you.」と
   最後の1語だけが折れる。一回り小さくし、折れるときは行長を均等にする */
html[lang="en"] .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-mv-catch span {
  font-size: clamp(20px, 2vw, 28px);
  text-wrap: balance;
}
/* 丸いバッジの語（No switching / Performance-based / Fully handled など）は日本語の 3〜5 字より長く、
   円の縁に触れたり語の途中で折れたりするので、一回り小さくして円の内側に収める */
html[lang="en"] .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-badge-num--word {
  max-width: 86%;
  font-size: 17px;
  line-height: 1.15;
  text-wrap: balance;
}
/* 市場面の見出しと統計カードの結論行は、句ごとの .ind-nb（inline-block）で組まれている。英語の訳は
   句の末尾に空白を持つので、inline-block だと行末の空白が消えて「travellersare」「destinationson」と
   語がくっつく。英語版は普通のインラインに戻し、空白で折る */
html[lang="en"] .rcl-market .rcl-pill-title .ind-nb,
html[lang="en"] .rcl-market .rcl-market-stats .ind-stat-claim .ind-nb { display: inline; white-space: normal; }
/* 業種別の見出し（一気通貫の h2 など）の .ind-nb は industry.css で nowrap（日本語の句をまとめる指定）。
   英語の句は長く、SP で「to secondary use and sales reporting」が1行のまま画面からはみ出すので、英語版は空白で折る */
html[lang="en"] .rcl-title .ind-nb { white-space: normal; }
@media (max-width: 600px) {
  html[lang="en"] .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-badge-num--word { font-size: 13px; }
  /* 英語のラベル（Official Insta360 partner / English, direct with HQ）は SP の 1/3 幅の円で3〜4行になり、
     下の語が円の下端に掛かる。アイコンを小さくし、ラベルの幅を広げて行数を減らす */
  html[lang="en"] .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-badge svg { width: 24px; height: 24px; margin-bottom: 2px; }
  html[lang="en"] .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-badge-label { max-width: 92%; padding: 0; font-size: 10.5px; line-height: 1.25; }
}

/* --------------------------------------------------------------------
   MV のバッジ（Why TripClear の見出し）。上の汎用 LP・英語版のバッジ指定より後に置いて優先させる
   -------------------------------------------------------------------- */
/* MV のバッジ：Why TripClear の見出しをそのまま載せる（recruit 親・recruit 業種別以外。2026-10-09）。
   ラベル・数字は置かず、アイコンの下に見出しを中央に組む。折り返しは HTML 側の <wbr>（文節ごとに入れてある）の位置だけ。
   最長の文節は9字（「プロフェッショナル」「インフルエンサーに」）なので、円の幅（PC 164px／1100px 以下 140px／SP 103〜126px）の
   内側（82〜90%）にその9字が収まる大きさにする（SP は 10.5px、360px 幅では 10px）。円の大きさは recruit と同じ */
.rcl-badges--titles .rcl-badge svg { width: 36px; height: 36px; margin-bottom: 6px; }
.rcl-mv .rcl-badges--titles .rcl-badge-num--word {
  max-width: 82%;
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
@media (max-width: 1100px) {
  .rcl-badges--titles .rcl-badge svg { width: 32px; height: 32px; margin-bottom: 4px; }
  .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 12.5px; }
}
@media (max-width: 600px) {
  .rcl-badges--titles .rcl-badge svg { width: 20px; height: 20px; margin-bottom: 2px; }
  .rcl-mv .rcl-badges--titles .rcl-badge-num--word { max-width: 86%; font-size: 10.5px; line-height: 1.25; }
}
@media (max-width: 374px) {
  .rcl-mv .rcl-badges--titles .rcl-badge-num--word { max-width: 90%; font-size: 10px; }
}
/* 英語の見出しは日本語より長いので一回り小さくし、4行まで許す。語の途中では折らない */
html[lang="en"] .rcl-mv .rcl-badges--titles .rcl-badge-num--word {
  font-size: 13px;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: normal;
}
@media (max-width: 1100px) {
  html[lang="en"] .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 11.5px; }
}
@media (max-width: 600px) {
  html[lang="en"] .rcl-mv .rcl-badges--titles .rcl-badge-num--word { max-width: 80%; font-size: 10px; }
}
@media (max-width: 374px) {
  html[lang="en"] .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 9.5px; }
}

/* MV のリードは1文だけ（体験・工程にフォーカス→何に繋げるか）。2文目（会社の紹介）はバッジと重複し、最初の画面が詰め込みすぎに
   なるので 2026-10-14 に全ページから外した。下は残置（<small> を戻すとき用） */
.rcl-mv-lead small {
  display: block;
  margin-top: 10px;
  font-size: 0.86em;
  line-height: 1.8;
  color: var(--tc-light-ink-3);
}

/* --------------------------------------------------------------------
   MV 右カラムの「動画の事例」（sns 親・ads 親。2026-10-09）。生成写真の代わりに実績の動画を置く。
   部品・クラス名・動き（reels-carousel.js）・再生（video-thumbs.js のモーダル）はトップの .home-reels と同じ。
   styles.css はこのページで読まないので、見た目をここに移し、ラベンダーの MV 面に合わせる。
   ads は広告の動画が 2 本だけなので、横スクロールにせず 2 枚を並べる（--duo）
   -------------------------------------------------------------------- */
.rcl-mv-reels { width: 100%; min-width: 0; }
.rcl-mv-reels .home-reels-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 6px;
}
.rcl-mv-reels .home-reels-label {
  margin: 0;
  font-family: var(--font-display), var(--font-body-jp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tc-light-ink-2);
}
.rcl-mv-reels .home-reels-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-light-ink-2);
  text-decoration: none;
  transition: color 0.2s;
}
.rcl-mv-reels .home-reels-more svg { width: 16px; height: 16px; }
.rcl-mv-reels .home-reels-more:hover { color: var(--tc-light-ink); }
.rcl-mv-reels .home-reels-viewport { position: relative; }
.rcl-mv-reels .home-reels-track {
  --reel-w: 214px;
  position: relative;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 14px calc(50% - var(--reel-w) / 2) 30px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rcl-mv-reels .home-reels-track::-webkit-scrollbar { display: none; }
.rcl-mv-reels .home-reel {
  flex: 0 0 var(--reel-w);
  margin: 0;
  scroll-snap-align: center;
  transform: scale(0.82);
  transition: transform 0.45s var(--ease-out-expo);
  cursor: pointer;
}
.rcl-mv-reels .home-reel.is-active { transform: none; cursor: default; }
.rcl-mv-reels .home-reel-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0a0d26;
  box-shadow: 0 10px 22px rgba(61, 41, 137, 0.18);
}
.rcl-mv-reels .home-reel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上下の文字が動画のコマに負けないよう、上端と下端だけ暗くする */
.rcl-mv-reels .home-reel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 42%);
  pointer-events: none;
}
.rcl-mv-reels .home-reel-place,
.rcl-mv-reels .home-reel-foot {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  margin: 0;
  color: #fff;
  pointer-events: none;
}
.rcl-mv-reels .home-reel-place {
  top: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.rcl-mv-reels .home-reel-place svg { flex: none; width: 14px; height: 14px; }
.rcl-mv-reels .home-reel-foot { bottom: 12px; }
.rcl-mv-reels .home-reel-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.rcl-mv-reels .home-reel-title {
  margin: 6px 0 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcl-mv-reels .home-reel-views {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.92;
}
.rcl-mv-reels .home-reel-views svg { flex: none; width: 12px; height: 12px; }
.rcl-mv-reels .home-reels-note {
  margin: -16px 6px 0;
  font-size: 11px;
  color: var(--tc-light-ink-3);
  text-align: right;
}
/* 中央のカードに再生ボタンを常に出す。両隣は矢印と重なるので出さず、押すと中央へ寄せる */
.rcl-mv-reels .home-reel.is-active .vt-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rcl-mv-reels[data-reels] .home-reel:not(.is-active) .vt-play { opacity: 0; pointer-events: none; }
.rcl-mv-reels .home-reels-arrow {
  position: absolute;
  top: calc(50% - 8px);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--tc-light-ink);
  box-shadow: 0 6px 18px rgba(61, 41, 137, 0.22);
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.rcl-mv-reels .home-reels-arrow svg { width: 20px; height: 20px; }
.rcl-mv-reels .home-reels-arrow:hover { transform: translateY(-50%) scale(1.06); }
.rcl-mv-reels .home-reels-arrow:disabled { opacity: 0; pointer-events: none; }
.rcl-mv-reels .home-reels-arrow--prev { left: 4px; }
.rcl-mv-reels .home-reels-arrow--next { right: 4px; }
/* 2 本だけ（ads）：スクロールさせず、同じ大きさで 2 枚並べる。再生ボタンは両方に出す */
.rcl-mv-reels--duo .home-reels-track {
  justify-content: center;
  gap: 18px;
  padding: 14px 0 30px;
  overflow: visible;
  scroll-snap-type: none;
}
.rcl-mv-reels--duo .home-reel { transform: none; cursor: default; }
.rcl-mv-reels--duo .home-reel .vt-play { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
/* カルーセルの下のバッジは写真に重ねず、少し間を空けて置く */
.rcl-mv-visual .rcl-mv-reels + .rcl-badges { margin-top: 6px; }
@media (max-width: 600px) {
  .rcl-mv-reels .home-reels-head { padding: 0 2px; }
  /* SP はカルーセルだけ画面の端から端まで広げ、両隣のカードが画面の縁で切れるようにする */
  .rcl-mv-reels:not(.rcl-mv-reels--duo) .home-reels-viewport { width: 100vw; margin-left: calc(50% - 50vw); }
  .rcl-mv-reels .home-reels-track { --reel-w: 196px; padding-top: 12px; padding-bottom: 26px; }
  .rcl-mv-reels .home-reels-arrow { width: 36px; height: 36px; }
  .rcl-mv-reels--duo .home-reels-track { gap: 12px; padding: 12px 0 26px; }
  .rcl-mv-reels--duo .home-reel { flex-basis: calc(50% - 6px); }
  .rcl-mv-visual .rcl-mv-reels + .rcl-badges { margin-top: 4px; }
}

/* --------------------------------------------------------------------
   MV のバッジの下の説明（2026-10-09）。円の外、すぐ下に置く。文言は Why TripClear の説明文の一文目そのまま。
   li.rcl-badge-item ＝ div.rcl-badge（円）＋ p.rcl-badge-desc。円の大きさ・写真との重なりは今までと同じ
   -------------------------------------------------------------------- */
.rcl-badges { align-items: flex-start; }
.rcl-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 164px;
  margin: 0;
  padding: 0;
}
.rcl-badge-item > .rcl-badge { width: 100%; }
.rcl-badge-desc {
  width: 100%;
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tc-light-ink-2);
  text-align: center;
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;   /* 「ー」「。」などで行を始めない */
  text-wrap: balance;
}
html[lang="en"] .rcl-badge-desc { font-size: 11.5px; word-break: normal; overflow-wrap: break-word; }
@media (max-width: 1100px) {
  .rcl-badge-item { width: 140px; }
}
@media (max-width: 600px) {
  .rcl-badge-item { width: calc((100% - 20px) / 3); }
  .rcl-badge-desc { margin-top: 8px; font-size: 11px; line-height: 1.55; }
  html[lang="en"] .rcl-badge-desc { font-size: 10.5px; }
}

/* 市場面のピル見出し（「〜も、<span class="sns-nowrap">SNSで…時代</span>」）。英語の後半は日本語より長く、
   1行に固定すると SP で枠からはみ出すので、英語版だけ全幅で語の切れ目で折る */
html[lang="en"] .rcl-market .rcl-pill-title .sns-nowrap { white-space: normal; }

/* POV 面（業種別の sns・recruit）の下段：POV の強み 3 枚（イラスト → 数字 → 見出し → 説明）。
   見た目は inbound 親の pov-part の .pov-can--4 と同じ部品（service-page.css の .pov-can）を 3 列で使う。
   文言は inbound 親の 1・2 枚目と sns 親の Reason 03 そのまま（povin_cards.py） */
.rcl-povin .rcl-povin-can { margin-top: 56px; gap: 32px; }
.rcl-povin .rcl-povin-can .pov-can-num { font-size: 34px; }
.rcl-povin .rcl-povin-can .pov-can-num em { font-size: 16px; }
.rcl-povin .rcl-povin-can .pov-can-title { font-size: 16px; word-break: keep-all; overflow-wrap: anywhere; }
.rcl-povin .rcl-povin-can .pov-can-desc { font-size: 14px; }
@media (max-width: 900px) {
  .rcl-povin .rcl-povin-can { gap: 20px; }
}
@media (max-width: 600px) {
  .rcl-povin .rcl-povin-can { margin-top: 40px; gap: 18px; }
  .rcl-povin .rcl-povin-can .pov-can-num { font-size: 24px; }
  .rcl-povin .rcl-povin-can .pov-can-num em { font-size: 13px; }
  .rcl-povin .rcl-povin-can .pov-can-title { font-size: 14.5px; }
  .rcl-povin .rcl-povin-can .pov-can-desc { font-size: 13px; }
}

/* FAQ の見出し（「〜について、よくいただくご質問」）は SP で「ご質／問」と最後の1字だけが次の行に落ちることがある。
   文言は変えず、行の長さをそろえて折る */
#faq h2 { text-wrap: balance; }

/* 相談ボタンの帯は、独立した白い帯ではなく一気通貫の面（白）の先頭に入れる（cta_into_onestop.py）。
   面の上の余白はボタンの上に、ボタンと見出し（さらに／Process）の間は今までの面の上余白と同じだけ空ける */
.rcl-onestop { padding-top: 64px; }
.rcl-onestop .rcl-cta-row { background: none; padding: 0; margin: 0 0 72px; }
@media (max-width: 600px) {
  .rcl-onestop { padding-top: 48px; }
  .rcl-onestop .rcl-cta-row { margin-bottom: 56px; }
}

/* 一気通貫（白）の直後に来る ads の料金・ec と japan-entry のメニュー（どれも #f5f5f6）は、白と区切るため薄いラベンダーにする。
   中のカードは白地・輪郭ありのまま */
.body-home #price.ads-price,
.body-home #menu.ec-menu-sec,
.body-home #menu.je-menu-sec { background: var(--tc-lavender-soft); border-top-color: transparent; border-bottom-color: transparent; }

/* SNS アカウント運用の Plans 面（2026-10-14）。一気通貫（白）の中にあった工数比較とプラン・料金を独立させ、
   中間 CTA の帯もこの面の最後に入れる。地色は ads の料金面と同じ薄ラベンダー、カードは白のまま */
.body-home .rcl-plans.sns-details--light { background: var(--tc-lavender-soft); border: 0; padding: var(--rcl-pad) 0; }
.rcl-plans .sns-details-sub { margin-top: 64px; }
.rcl-plans .rcl-title + .sns-details-sub { margin-top: 0; }
.rcl-plans .sns-cost2-card--after { background: #fff; }
.rcl-plans .rcl-cv-box { margin-top: 72px; }
@media (max-width: 600px) {
  .rcl-plans .sns-details-sub { margin-top: 48px; }
  .rcl-plans .rcl-cv-box { margin-top: 56px; }
}

/* --------------------------------------------------------------------
   MV の高さ（PC。2026-10-09 デザインセルフチェック）：1440×900 で無料相談ボタンと注記が最初の画面に収まるよう、
   写真枠・動画カルーセル・バッジ・ボタンまわりを少しずつ詰める。左右の列は上端でそろえ、
   コピーの列が長くても右の列（写真→バッジ→ボタン）が下へ押し下げられないようにする。文言は変えない
   -------------------------------------------------------------------- */
@media (min-width: 1101px) {
  .rcl-mv { padding-top: 140px; }
  .rcl-mv-inner { align-items: start; }
  .rcl-mv-photo { width: calc(100% + 24px); margin: 0 -12px; }
  .rcl-mv-visual .rcl-badges { margin-top: -24px; }
  .rcl-badge,
  .rcl-badge-item { width: 150px; }
  .rcl-badge svg { width: 40px; height: 40px; }
  .rcl-badge-num { font-size: 34px; }
  .rcl-badge-num--word { font-size: 20px; }
  .rcl-badges--titles .rcl-badge svg { width: 32px; height: 32px; margin-bottom: 4px; }
  .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 13.5px; }
  html[lang="en"] .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 12px; }
  .rcl-badge-desc { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  html[lang="en"] .rcl-badge-desc { font-size: 11px; }
  .rcl-mv-cta { margin-top: 18px; }
  .rcl-mv-cta .rcl-btn--xl { padding: 20px 40px; }
  .rcl-mv-cta-sub { margin-top: 8px; }
  .rcl-mv-reels .home-reels-track { --reel-w: 176px; padding-top: 10px; padding-bottom: 24px; }
  .rcl-mv-visual .rcl-mv-reels + .rcl-badges { margin-top: 2px; }
  .rcl-mv-reels .home-reels-note { margin-top: -18px; }
}
/* 画面の高さが低い PC（1280×800 など）は、写真枠を横長にし、カルーセルとバッジをもう一回り小さくする */
@media (min-width: 1101px) and (max-height: 860px) {
  .rcl-mv { padding-top: 136px; }
  .rcl-mv-photo { aspect-ratio: 16 / 9; }
  .rcl-mv-reels .home-reels-track { --reel-w: 156px; }
  .rcl-badge,
  .rcl-badge-item { width: 140px; }
  .rcl-badge svg { width: 34px; height: 34px; }
  .rcl-badge-num { font-size: 30px; }
  .rcl-badge-num--word { font-size: 18px; }
  .rcl-badges--titles .rcl-badge svg { width: 28px; height: 28px; margin-bottom: 3px; }
  .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 12.5px; }
  html[lang="en"] .rcl-mv .rcl-badges--titles .rcl-badge-num--word { font-size: 11.5px; }
  .rcl-badge-desc { font-size: 11.5px; line-height: 1.45; }
  html[lang="en"] .rcl-badge-desc { font-size: 10.5px; }
  .rcl-mv-cta { margin-top: 14px; }
  .rcl-mv-cta .rcl-btn--xl { padding: 18px 40px; }
}
/* 英語の recruit 親のバッジ（Performance-based など）は、円を小さくした分だけ語の大きさも下げる */
@media (min-width: 1101px) {
  html[lang="en"] .rcl-mv .rcl-badge-num--word { font-size: 16px; }
}
@media (min-width: 1101px) and (max-height: 860px) {
  html[lang="en"] .rcl-mv .rcl-badge-num--word { font-size: 15px; }
}

/* --------------------------------------------------------------------
   左の太いアクセントバーを使わない（サイトのルール。区切りは 1px の輪郭か上のヘアライン）
   -------------------------------------------------------------------- */
/* ads 親の料金面：「Price」見出しの左の縦線を外し、「迷ったら…」の一文は縦線ではなく白い輪郭カードにする */
.body-home .ads-price .sns-section-heading { padding-left: 0; }
.body-home .ads-price .sns-section-heading::after { display: none; }
.ads-price .ads-price-band {
  max-width: none;
  padding: 22px 28px;
  border: 1px solid var(--tc-light-line);
  border-radius: var(--radius-md);
  background: #fff;
}
.ads-price .ads-price-band::before { display: none; }
@media (max-width: 760px) {
  .body-home .ads-price .sns-section-heading { padding-left: 0; }
  .ads-price .ads-price-band { padding: 16px 18px; }
}
/* sns・influencer 親の Results（残置面）のラベンダーのカード：実績の行の左の濃紫の縦線を、上のヘアラインに替える */
.body-home .sns-featured-card--lavender .sns-featured-result-text {
  border-left: 0;
  padding-left: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(61, 41, 137, 0.25);
}

/* inbound・ec・marketing 親の対応媒体の帯（市場面が無いページ）は、MV の下端の中に入れて MV のグラデーションの上に載せる
   （media_into_mv.py）。白い帯が MV とメリット面（#f5f5f6）の間に挟まって、明るい面が 3 つ続いていたため */
.rcl-mv:has(> .rcl-mv-media) { flex-direction: column; justify-content: center; }
.rcl-mv > .rcl-mv-media {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 40px 24px 0;
  background: none;
}
@media (max-width: 600px) {
  .rcl-mv > .rcl-mv-media { padding: 32px 16px 0; }
}
}

/* --------------------------------------------------------------------
   CTA と字の大きさ（2026-10-14。参考: carryme の SNS LP）
   - MV はキャッチを一番大きく。h1（サービス名）はその上の導入の一行に
   - ボタンの上端に「ご相談・お見積りは無料です」のタグを載せ、右端は丸い矢印アイコン。
     ボタンの下に置いていた注記（.rcl-mv-cta-sub / .rcl-cv-sub）はタグへ移した
   - 見出しは大きく、カードの本文は 14px を下回らせない
   -------------------------------------------------------------------- */
.rcl-mv .rcl-mv-title,
.rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-mv-title { font-size: clamp(22px, 2.1vw, 30px); margin-bottom: 14px; color: var(--tc-light-ink-2); }
.rcl-mv-catch { font-size: clamp(30px, 3.3vw, 48px); font-weight: 900; line-height: 1.38; margin-bottom: 24px; }

.rcl-btn--xl { margin-top: 16px; min-height: 80px; }
.rcl-btn-tag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  padding: 4px 16px;
  border: 1.5px solid var(--rcl-violet);
  border-radius: 999px;
  background: #fff;
  color: var(--tc-purple-deep);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
html[lang="en"] .rcl-btn-tag { font-size: 12px; letter-spacing: 0.01em; }
/* 右端の丸い矢印（三角の ::after を置き換える） */
.rcl-btn::after {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b6bff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.rcl-btn--xl::after { width: 36px; height: 36px; background-size: 18px; }
.rcl-mv-cta .rcl-btn--xl { margin-top: 18px; }

.rcl-cv-title { font-size: clamp(20px, 2.4vw, 28px); color: #fff; margin-bottom: 26px; }

.rcl-title { font-size: clamp(28px, 3.6vw, 46px); }
.rcl-merit-grid--4 .rcl-merit-title { font-size: clamp(17px, 1.5vw, 21px); }
.rcl-merit-grid--4 .rcl-merit-desc { font-size: 15px; }
.rcl-feature-list--4 .rcl-feature-title { font-size: clamp(16px, 1.6vw, 20px); }

@media (max-width: 600px) {
  .rcl-mv .rcl-mv-title,
  .rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-mv-title { font-size: 20px; margin-bottom: 10px; }
  .rcl-mv-catch { font-size: clamp(26px, 7.4vw, 32px); }
  .rcl-btn--xl { min-height: 72px; }
  .rcl-btn-tag { font-size: 12px; padding: 3px 12px; }
  .rcl-btn--xl::after { width: 30px; height: 30px; background-size: 15px; }
  .rcl-title { font-size: clamp(24px, 6.6vw, 30px); }
  .rcl-merit-grid--4 .rcl-merit-desc { font-size: 14.5px; }
}

/* --------------------------------------------------------------------
   MV を「概要＋写真 1 枚」に（2026-10-14。参考: nandm.jp の Instagram 運用ページ）
   上から MV（左: h1・キャッチ・リード・CTA／右: 写真）→ 3つの特徴（.rcl-mv-after のバッジ）→ 動画の事例。
   バッジと動画カルーセルは MV の外（.rcl-mv-after）へ移した。MV 内のバッジ・写真マスク・CTA の旧ルールは残置
   -------------------------------------------------------------------- */
.rcl-mv { min-height: 0; background: var(--tc-light-bg); padding: 150px 0 84px; }
.rcl-mv-glow { display: none; }
.rcl-mv-inner { max-width: 1200px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); }
.rcl-mv-visual { display: block; }
.rcl-mv-pic {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #e8e6e3;
}
.rcl-mv-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcl-mv-lead { margin-bottom: 0; }
.rcl-mv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 40px;
}
.rcl-mv-actions .rcl-btn--xl {
  width: auto;
  min-width: 340px;
  margin-top: 0;
  padding: 20px 28px 20px 40px;
  font-size: clamp(17px, 1.4vw, 20px);
}
.rcl-mv-sublink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--tc-light-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rcl-mv-sublink:hover { color: var(--rcl-violet); }

/* MV 直下：3つの特徴（丸いバッジ＋説明）→ 動画の事例 */
.rcl-mv-after { background: #fff; padding: 72px 0 80px; }
.rcl-mv-after .rcl-badges { justify-content: center; gap: 48px; }
.rcl-mv-after .rcl-badge-item { width: 236px; }
.rcl-mv-after .rcl-badge {
  width: 188px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--tc-light-line), 0 14px 34px rgba(61, 41, 137, 0.12);
}
.rcl-mv-after .rcl-badge svg { width: 36px; height: 36px; margin-bottom: 8px; }
.rcl-mv-after .rcl-badge-num--word {
  max-width: 82%;
  font-size: 16px;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-mv-after .rcl-badge-desc {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--tc-light-ink-2);
}
.rcl-mv-after .rcl-mv-reels { max-width: 1080px; margin: 64px auto 0; }

@media (max-width: 900px) {
  .rcl-mv { padding: 120px 0 56px; }
  .rcl-mv-visual { max-width: 560px; }
  .rcl-mv-actions { margin-top: 28px; }
  .rcl-mv-after .rcl-badges { gap: 24px; }
}
@media (max-width: 600px) {
  .rcl-mv { padding: 104px 0 44px; }
  .rcl-mv-actions { gap: 16px; justify-content: center; }
  .rcl-mv-actions .rcl-btn--xl { width: 100%; min-width: 0; padding: 18px 20px 18px 28px; }
  .rcl-mv-after { padding: 48px 0 56px; }
  .rcl-mv-after .rcl-badges { gap: 10px; justify-content: space-between; }
  .rcl-mv-after .rcl-badge-item { width: calc((100% - 20px) / 3); }
  .rcl-mv-after .rcl-badge { width: 100%; }
  .rcl-mv-after .rcl-badge svg { width: 24px; height: 24px; margin-bottom: 3px; }
  .rcl-mv-after .rcl-badge-num--word { max-width: 88%; font-size: 11px; line-height: 1.3; }
  .rcl-mv-after .rcl-badge-desc { margin-top: 10px; font-size: 12px; line-height: 1.6; }
  .rcl-mv-after .rcl-mv-reels { margin-top: 40px; }
}

/* MV のバランス（2026-10-14）：コピーと写真を縦中央で揃え、写真を少し広く。キャッチは 1 行を長めに取り 3〜4 行に収める */
.rcl-mv .rcl-mv-inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; }
.rcl-mv-pic { aspect-ratio: 3 / 2; }
.rcl-mv-catch { font-size: clamp(28px, 2.8vw, 40px); }
.rcl-mv-lead { max-width: 30em; }
@media (min-width: 1101px) { .rcl-mv .rcl-mv-inner { align-items: center; } }
@media (max-width: 900px) { .rcl-mv .rcl-mv-inner { grid-template-columns: minmax(0, 1fr); } }

/* 3つの特徴：円をやや大きく、間を広く */
.rcl-mv-after .rcl-badges { gap: 64px; }
.rcl-mv-after .rcl-badge { width: 196px; }
.rcl-mv-after .rcl-badge-item { width: 248px; }

/* 動画の事例（支援実績のロゴ帯の下）。カルーセルは画面幅いっぱいに広げ、真ん中の動画から始める */
.rcl-reels-band { background: #fff; padding: 0 0 72px; }
.rcl-reels-band .rcl-mv-reels { max-width: 1080px; margin: 0 auto; }
.rcl-reels-band .rcl-mv-reels:not(.rcl-mv-reels--duo) .home-reels-viewport { width: 100vw; margin-left: calc(50% - 50vw); }
.rcl-reels-band .rcl-mv-reels--duo .home-reels-track { justify-content: center; }
@media (max-width: 900px) { .rcl-mv-after .rcl-badges { gap: 24px; } }
@media (max-width: 600px) {
  .rcl-mv-after .rcl-badges { gap: 10px; }
  .rcl-mv-after .rcl-badge-item { width: calc((100% - 20px) / 3); }
  .rcl-mv-after .rcl-badge { width: 100%; }
  .rcl-reels-band { padding-bottom: 48px; }
}
/* 写真はコピーの列の中心より少し下（キャッチ〜ボタンの高さ）に置く（2026-10-14 ユーザー指示「もうちょっと画像を下側に」） */
@media (min-width: 901px) { .rcl-mv-visual { margin-top: 96px; } }
/* 3つの特徴は写真の下（2026-10-14 ユーザー指示「3つの特徴を画像の下に。細かい説明は不要」）。説明文（.rcl-badge-desc）は外した。
   円は写真の下端に少しだけ重ね、写真と 1 つのまとまりに見せる */
@media (min-width: 901px) { .rcl-mv-visual { margin-top: 48px; } }
.rcl-mv .rcl-mv-visual .rcl-badges { position: relative; justify-content: center; gap: 22px; margin-top: -40px; }
.rcl-mv .rcl-mv-visual .rcl-badge-item { width: auto; }
.rcl-mv .rcl-mv-visual .rcl-badge {
  width: 148px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--tc-light-line), 0 12px 28px rgba(61, 41, 137, 0.14);
}
.rcl-mv .rcl-mv-visual .rcl-badge svg { width: 30px; height: 30px; margin-bottom: 6px; }
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word,
.rcl-mv .rcl-mv-visual .rcl-badge-num--word { max-width: 84%; font-size: 14px; line-height: 1.35; }
@media (max-width: 600px) {
  .rcl-mv .rcl-mv-visual .rcl-badges { gap: 10px; margin-top: -28px; padding: 0 6px; }
  .rcl-mv .rcl-mv-visual .rcl-badge-item { width: calc((100% - 20px) / 3); }
  .rcl-mv .rcl-mv-visual .rcl-badge { width: 100%; }
  .rcl-mv .rcl-mv-visual .rcl-badge svg { width: 22px; height: 22px; margin-bottom: 3px; }
  .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word,
  .rcl-mv .rcl-mv-visual .rcl-badge-num--word { max-width: 88%; font-size: 11px; }
}
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word,
.rcl-mv .rcl-mv-visual .rcl-badge-num--word { max-width: 92%; font-size: 13.5px; word-break: keep-all; overflow-wrap: normal; }
@media (max-width: 600px) {
  .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word,
  .rcl-mv .rcl-mv-visual .rcl-badge-num--word { font-size: 10.5px; overflow-wrap: anywhere; }
}
/* 円は写真に重ねず、写真の下に並べる（2026-10-14 ユーザー指示「画像に被せないで」） */
.rcl-mv .rcl-mv-visual .rcl-badges { margin-top: 24px; }
@media (max-width: 600px) { .rcl-mv .rcl-mv-visual .rcl-badges { margin-top: 16px; } }

/* 動画の事例はスマホの枠に入れて見せる（2026-10-14 ユーザー指示）。黒いベゼル＋上部のカメラ穴 */
.rcl-reels-band .home-reel-media {
  border: 7px solid #15161c;
  border-radius: 30px;
  background: #15161c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 16px 34px rgba(10, 13, 38, 0.22);
}
.rcl-reels-band .home-reel-media img { border-radius: 23px; }
.rcl-reels-band .home-reel-media::after { border-radius: 23px; }
.rcl-reels-band .home-reel-media::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  width: 34%;
  height: 16px;
  border-radius: 999px;
  background: #15161c;
  transform: translateX(-50%);
  pointer-events: none;
}
/* 場所のラベルはカメラ穴の下へ */
.rcl-reels-band .home-reel-place { top: 30px; }
@media (max-width: 600px) {
  .rcl-reels-band .home-reel-media { border-width: 5px; border-radius: 24px; }
  .rcl-reels-band .home-reel-media img,
  .rcl-reels-band .home-reel-media::after { border-radius: 19px; }
  .rcl-reels-band .home-reel-media::before { top: 6px; height: 12px; }
  .rcl-reels-band .home-reel-place { top: 24px; }
}
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word, .rcl-mv .rcl-mv-visual .rcl-badge-num--word { font-size: 13px; }
@media (max-width: 600px) { .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word, .rcl-mv .rcl-mv-visual .rcl-badge-num--word { font-size: 10px; } }
/* トップ画面の背景は TripClear のラベンダー（--tc-lavender-soft を白で薄めた単色。グラデにはしない）（2026-10-14 ユーザー指示） */
.rcl-mv { background: color-mix(in srgb, var(--tc-lavender-soft) 55%, #fff); }

/* トップ画面の背景は TripClear の濃い紺（--home-bg）（2026-10-14 ユーザー指示。直前のラベンダーを置き換え） */
.rcl-mv { background: var(--home-bg); color: #fff; }
.rcl-mv .svcp-crumb a,
.rcl-mv .svcp-crumb span { color: rgba(255, 255, 255, 0.6); }
.rcl-mv .svcp-crumb a:hover,
.rcl-mv .svcp-crumb span[aria-current] { color: rgba(255, 255, 255, 0.85); }
.rcl-mv .rcl-mv-title,
.rcl-mv:not(:has(.rcl-mv-photo--recruit)) .rcl-mv-title { color: rgba(255, 255, 255, 0.82); }
.rcl-mv-catch { color: #fff; }
.rcl-mv-catch span:nth-child(3) { color: var(--tc-lavender); }
.rcl-mv-lead { color: rgba(255, 255, 255, 0.78); }
.rcl-mv-sublink { color: #fff; }
.rcl-mv-sublink:hover { color: var(--tc-lavender); }
.rcl-mv .rcl-btn { box-shadow: 0 10px 28px rgba(123, 107, 255, 0.32); }
.rcl-mv .rcl-mv-visual .rcl-badge { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }

/* 動画の事例を Our Approach（紺）の下部へ（2026-10-14 ユーザー指示。sns・ads 親）。帯の白地は外し、見出しと注記を白文字に */
.sns-about .sns-about-reels { max-width: 1080px; margin: 72px auto 0; padding: 0; background: transparent; }
.sns-about .sns-about-reels .home-reels-label { color: #fff; }
.sns-about .sns-about-reels .home-reels-more { color: rgba(255, 255, 255, 0.7); }
.sns-about .sns-about-reels .home-reels-more:hover { color: #fff; }
.sns-about .sns-about-reels .home-reels-note { color: rgba(255, 255, 255, 0.55); }
.sns-about .sns-about-reels .home-reel-media { border-color: #2a2e52; background: #2a2e52; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); }
.sns-about .sns-about-reels .home-reel-media::before { background: #2a2e52; }
@media (max-width: 600px) { .sns-about .sns-about-reels { margin-top: 48px; } }
.sns-about .sns-about-reels .home-reel-media { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 16px 34px rgba(0, 0, 0, 0.35); }
/* Our Approach の説明の下に置く版（2026-10-14 ユーザー指示「3つのサムネイルを消して、説明の下に動画のリール」）。左の列の幅に収める */
.sns-about .sns-about-reels--col { max-width: none; margin: 36px 0 8px; }
.sns-about .sns-about-reels--col .home-reels-head { padding: 0; }
.sns-about .sns-about-reels--col .rcl-mv-reels:not(.rcl-mv-reels--duo) .home-reels-viewport { width: auto; margin-left: 0; overflow: hidden; border-radius: var(--radius-md); }
.sns-about .sns-about-reels--col .home-reels-track { --reel-w: 180px; }
@media (max-width: 600px) {
  .sns-about .sns-about-reels--col .rcl-mv-reels:not(.rcl-mv-reels--duo) .home-reels-viewport { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
  .sns-about .sns-about-reels--col .home-reels-track { --reel-w: 170px; }
}
.sns-about-left { min-width: 0; }
/* Our Approach は右の写真も外して 1 列に（2026-10-14 ユーザー指示「画像もいらない」）。文は読みやすい幅に止め、リールは列いっぱい */
.sns-about-inner--single { grid-template-columns: minmax(0, 1fr); }
.sns-about-inner--single .sns-about-text { max-width: 760px; }

/* POVという撮り方があります（業種別 sns・recruit の .rcl-povin）を組み直す（2026-10-14 ユーザー指示「レイアウトがなんか変」）。
   左の説明＋右に 1 枚ずつ切り替わるカット、の組み方をやめ、見出し・リードを中央に置き、4 カットを横一列に全部見せる。
   下の 3 枚は大きなイラストをやめ、丸い小さなイラスト＋文字の白いカードに。/pov/ 配下の .pov-in は触らない */
.rcl-povin .pov-in { display: block; max-width: 1080px; margin: 0 auto; text-align: center; }
.rcl-povin .pov-in-title {
  font-family: var(--font-display), var(--font-body-jp);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.45;
}
.rcl-povin .pov-in .pov-image-lead { max-width: 680px; margin: 16px auto 0; font-size: 15px; line-height: 1.9; }
.rcl-povin .pov-in .pov-cuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: auto;
  margin: 40px 0 0;
  text-align: left;
}
.rcl-povin .pov-in .pov-cut { grid-area: auto; opacity: 1; animation: none; }
.rcl-povin .pov-in .pov-cut-head::after { display: none; }
.rcl-povin .pov-in .pov-image-foot { margin-top: 28px; }
.rcl-povin .rcl-povin-can { gap: 24px; }
.rcl-povin .rcl-povin-can .pov-can-item {
  padding: 28px 24px 26px;
  border: 1px solid var(--tc-light-line);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: center;
}
.rcl-povin .rcl-povin-can .pov-can-item img {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tc-light-bg);
}
@media (max-width: 900px) {
  .rcl-povin .pov-in .pov-cuts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
  .rcl-povin .pov-in .pov-cuts { width: auto; margin-top: 28px; }
  .rcl-povin .pov-in .pov-image-lead { font-size: 14.5px; text-align: left; }
  .rcl-povin .rcl-povin-can .pov-can-item { padding: 22px 18px; }
  .rcl-povin .rcl-povin-can .pov-can-item img { width: 88px; height: 88px; }
}
.rcl-povin .pov-in .pov-cuts .pov-cut,
.rcl-povin .pov-in .pov-cuts.is-revealed .pov-cut { opacity: 1; animation: none; }
.rcl-povin .pov-in .pov-cuts.is-revealed .pov-cut-head::after { display: none; animation: none; }
@media (max-width: 600px) {
  .rcl-povin .pov-in .pov-cut-telop { font-size: 11px; padding: 4px 8px; left: 6px; right: 6px; max-width: none; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
  .rcl-povin .pov-in .pov-cut-title { font-size: 14px; }
  .rcl-povin .rcl-povin-can .pov-can-item { display: block; }
  .rcl-povin .rcl-povin-can .pov-can-item img { margin: 0 auto 12px; }
}
@media (max-width: 600px) {
  .rcl-povin .pov-in .pov-cut-telop { left: 50%; right: auto; max-width: 94%; font-size: 10.5px; letter-spacing: 0; }
}

/* MV の3つの特徴（Why TripClear の見出し）を、円から横長の長方形に（2026-10-14 ユーザー指示「長方形にして、文字もう少し大きく、目立つように」）。
   写真の幅いっぱいの横長の帯を3本縦に積み、アイコンを左・見出しを右に1行で組む（長い見出しだけ <wbr> の位置で2行）。
   枠は --tc-grad の 1.5px の輪郭（左の縦バーは使わない）。上の円の指定より後に置いて優先させる */
.rcl-mv .rcl-mv-visual .rcl-badges--titles { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; padding: 0; }
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-item { width: 100%; }
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge {
  width: 100%;
  aspect-ratio: auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: 16px;
  padding: 16px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(#fff, #fff) padding-box, var(--tc-grad) border-box;
  box-shadow: 0 12px 30px rgba(4, 6, 24, 0.45), 0 0 24px rgba(160, 107, 255, 0.3);
}
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge svg { flex: none; width: 30px; height: 30px; margin: 0; }
.rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word {
  flex: 1;
  max-width: none;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
html[lang="en"] .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word { font-size: 17px; letter-spacing: 0; word-break: normal; overflow-wrap: normal; }
@media (max-width: 600px) {
  .rcl-mv .rcl-mv-visual .rcl-badges--titles { gap: 8px; padding: 0; }
  .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-item { width: 100%; }
  .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge { gap: 12px; padding: 13px 16px; }
  .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge svg { width: 26px; height: 26px; margin: 0; }
  .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word { font-size: 16px; }
  html[lang="en"] .rcl-mv .rcl-mv-visual .rcl-badges--titles .rcl-badge-num--word { font-size: 14.5px; }
}

/* MV の下端に入れた対応媒体の帯（inbound・ec・marketing 親）。MV を紺にした（2026-10-14）ため、白地用の濃い字のままだと読めない。
   媒体名は白、ラベルのピルは紺の地に溶けるので白の細い輪郭で囲む */
.rcl-mv > .rcl-mv-media { color: #fff; }
.rcl-mv > .rcl-mv-media .rcl-media-label { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }

/* Our Approach の説明の下に置く数字 3 枚（2026-10-14 ユーザー指示「our approach にここら辺の数値を入れよう」）。
   数字と文言は /pov/ の MV の .pov-stat-card（保存率 3.8 倍・指名検索 +68%・広告 CPA -42%）そのまま。紺の面の上なので、
   POV の黄色ではなく、紺の面から浮くように白のカード＋深紫の数字で組む（同日「白カードにした方が目立ちそう」）。
   SP も 3 列のまま（1 列の縦積みは間延びするため） */
.sns-about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 32px 0 8px;
  padding: 0;
}
.sns-about-stat {
  padding: 22px 24px 20px;
  border-radius: var(--radius-md);
  background: #fff;
}
.sns-about-stat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--rcl-violet);
}
.sns-about-stat-label svg { flex: none; width: 18px; height: 18px; }
.sns-about-stat-num {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--tc-purple-deep);
}
.sns-about-stat-num em {
  margin-left: 3px;
  font-family: var(--font-body-jp);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  color: var(--rcl-violet);
}
.sns-about-stat-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tc-light-ink-2);
}
html[lang="en"] .sns-about-stat-label { font-size: 13px; }
html[lang="en"] .sns-about-stat-num em { font-family: var(--font-display); }
@media (max-width: 900px) {
  .sns-about-stats { gap: 10px; }
  .sns-about-stat { padding: 18px 16px 16px; }
  .sns-about-stat-num { font-size: 42px; }
  .sns-about-stat-num em { font-size: 18px; }
}
@media (max-width: 600px) {
  .sns-about-stats { gap: 8px; margin-top: 24px; }
  .sns-about-stat { padding: 14px 10px 12px; border-radius: var(--radius-sm); text-align: center; }
  .sns-about-stat-label { flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
  .sns-about-stat-label svg { width: 16px; height: 16px; }
  .sns-about-stat-num { margin-top: 8px; font-size: 30px; }
  .sns-about-stat-num em { margin-left: 1px; font-size: 14px; }
  .sns-about-stat-note { margin-top: 8px; font-size: 10.5px; line-height: 1.5; word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance; }
  html[lang="en"] .sns-about-stat-note { word-break: normal; overflow-wrap: break-word; }
  html[lang="en"] .sns-about-stat-label { font-size: 10.5px; }
}

/* MV のリード文で <wbr> を入れたものは、文節の切れ目でだけ折り返す（「ク／リック」「ディレクシ／ョン」のような語の途中の改行を防ぐ） */
.rcl-mv-lead:has(wbr) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* SNS アカウント運用の親だけ：キャッチを「没入感あるコンテンツで、価値を最大限発信」の 2 行にし（2 行目はラベンダー）、
   CTA の上に POV の数字 3 つ（平均保存率 3.8 倍・平均再生時間 5 倍・平均指名検索数 +68%）を月桂樹で挟んだ帯で置く
   （2026-10-20 ユーザー指示「強調してほしい」「CTA の上にこんな感じで」＝受賞バナー型の参考画像）。
   帯は単色のバイオレット（グラデはボタンだけの規則のまま）。項目のあいだは 1px の縦線 */
.rcl-mv-catch--2 span:nth-child(2) { color: var(--tc-lavender); }
/* h1 とキャッチは他の LP より大きく（2026-10-20 ユーザー指示「もっと大きく」）。キャッチは <wbr> の位置でだけ折る */
.rcl-mv:has(.rcl-mv-catch--2) .rcl-mv-title { font-size: clamp(34px, 3.6vw, 52px); margin-bottom: 20px; }
.rcl-mv .rcl-mv-catch--2 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .rcl-mv:has(.rcl-mv-catch--2) .rcl-mv-title { font-size: 30px; }
  .rcl-mv .rcl-mv-catch--2 { font-size: clamp(32px, 9.6vw, 40px); }
}
html[lang="en"] .rcl-mv .rcl-mv-catch--2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.2; }
html[lang="en"] .rcl-mv .rcl-mv-catch.rcl-mv-catch--2 span { font-size: inherit; }
@media (max-width: 600px) { html[lang="en"] .rcl-mv .rcl-mv-catch--2 { font-size: clamp(28px, 8.4vw, 34px); } }
.rcl-mv-award {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin-top: 32px;
  padding: 18px 18px;
  border-radius: var(--radius-md);
  background: var(--rcl-violet);
  color: #fff;
}
.rcl-mv-laurel { flex: none; width: 30px; height: 76px; opacity: 0.9; }
.rcl-mv-laurel--r { transform: scaleX(-1); }
.rcl-mv-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcl-mv-stat { display: flex; flex-direction: column; justify-content: space-between; padding: 0 8px; text-align: center; }
.rcl-mv-stat + .rcl-mv-stat { border-left: 1px solid rgba(255, 255, 255, 0.5); }
.rcl-mv-stat-label {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.rcl-mv-stat-num {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.6vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rcl-mv-stat-num em {
  margin-left: 2px;
  font-family: var(--font-body-jp);
  font-size: 0.46em;
  font-style: normal;
  font-weight: 800;
}
.rcl-mv-award + .rcl-mv-actions { margin-top: 32px; }
html[lang="en"] .rcl-mv-stat-label { font-size: 13px; }
html[lang="en"] .rcl-mv-stat-num em { font-family: var(--font-display); }
@media (max-width: 900px) { .rcl-mv-award { margin-left: auto; margin-right: auto; } }
@media (max-width: 600px) {
  .rcl-mv-award { gap: 4px; margin-top: 24px; padding: 14px 8px; }
  .rcl-mv-laurel { width: 20px; height: 52px; }
  .rcl-mv-stat { padding: 0 4px; }
  .rcl-mv-stat-label { font-size: 12px; }
  .rcl-mv-stat-num { font-size: clamp(28px, 8.6vw, 36px); }
}

/* --------------------------------------------------------------------
   メリット・選ばれる理由のアイコン（10/20 イラストから単色の線アイコンへ。
   「複雑すぎてわかりにくい」の指摘で、1カード1モチーフに絞った）
   -------------------------------------------------------------------- */
.rcl-merit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--tc-lavender-soft);
  color: var(--tc-purple-deep);
}
.rcl-merit-icon svg { width: 34px; height: 34px; }
.rcl-feature-icon {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  color: var(--tc-purple-deep);
  box-shadow: 0 10px 24px rgba(61, 41, 137, 0.18);
}
.rcl-feature-icon svg { width: 46px; height: 46px; }
@media (max-width: 760px) {
  .rcl-merit-item { grid-template-columns: 64px minmax(0, 1fr); }
  .rcl-merit-icon { width: 64px; height: 64px; margin-bottom: 0; }
  .rcl-merit-icon svg { width: 30px; height: 30px; }
  .rcl-feature-icon { width: 88px; height: 88px; }
  .rcl-feature-icon svg { width: 40px; height: 40px; }
}
@media (max-width: 600px) {
  .rcl-merit-icon { margin-bottom: 12px; }
}