@charset "UTF-8";
/* ==================================================================
 * reblue.css — /reblue（Re:Blue ブランドトップ）専用スタイル
 *
 * 一次資料（優先度順）:
 *   1. 設計ツリー原本 pageviews/7ba6ca33-5df9-420c-bfdb-e999e5c1d390.json
 *   2. specs/A_core.md 「2. /reblue」（S1〜S17）／ specs/00_共有シンボル.md
 *   3. tests/baseline_reblue.json（1440px・全高 9,898px）
 *   4. theme/assets/css/tokens.css（STUDIOカラートークン46件・実測値）
 *   5. 本番 https://lgbtqordinary.com/reblue の DOM実測（2026-09-01・1440px / 390px）
 *
 * ---- 守ること --------------------------------------------------------
 * ・色は tokens.css の --s-color-* を使う。**新しい色を発明しない。**
 *   トークンに無い直値だけ、下の :root で --rb-c-* として一度だけ定義している。
 *   それ以外の直値をこのファイルに書かない。
 * ・フォントは --s-font-* を使う。/reblue の実測は
 *     --s-font-f88553ee（Inter + Zen Kaku Gothic New）×102  ＝ 基本
 *     --s-font-dbab4593（Noto Serif JP）×6                  ＝ 例外6要素のみ
 *   ★ --s-font-aca0103b（Zen Maru Gothic）は ** /reblue では未使用 **。使わない。（"**" と "/" の間の空白は必須。詰めると CSS コメントが閉じてしまう）
 * ・★ウェイトの底上げ（CEO指示 2026-09-01・全ページ共通）
 *     400 → 500 ／ 500 → 700
 *   Zen Kaku Gothic New に 600 が無いため **600は使わない**（和文が合成太字になる）。
 *   700 / 900 は「細い」に当たらないため据え置き。欧文のみの要素も据え置き。
 *   これは意図的に本番と変える調整。完全再現からの逸脱として記録する。
 * ・ブレークポイントは max-width の4段のみ。min-width との範囲指定は使わない。
 *     @media screen and (max-width: 1140px)   ... @small
 *     @media screen and (max-width:  840px)   ... @tablet
 *     @media screen and (max-width:  540px)   ... @mobile
 *     @media screen and (max-width:  320px)   ... @mini
 *   狭い側ほど後ろに書く（後勝ち）。**display は全段で明示し、継承に頼らない。**
 *
 * ---- 命名 ------------------------------------------------------------
 *   .rb-*  … /reblue 専用。campain の .cp-* / 共通パーツの .o-* と名前空間を分ける。
 *
 * ---- このファイルの並び ----------------------------------------------
 *   0. ローカル変数
 *   1. 骨格（.rb-main / .rb-section / .rb-section__inner / 固定幅ガード）
 *   2. セクション共通のタイポグラフィ・素材
 *   3. #footerbar（固定_LINE登録）
 *   4. セクション別の区画 ← 担当エージェントは **自分の区画にだけ** 追記する
 *        4-1  S1  ヒーロー
 *        4-2  S2  直近イベント枠（reblue-events iframe）
 *        4-3  S3  #points
 *        4-4  S4  #voice-1
 *        4-5  S5  #point1-2（★復活）
 *        4-6  S6  #concept
 *        4-7  S7  心情セクション（ID無し・794px）
 *        4-8  S8  #messegemovie
 *        4-9  S9  #casestory
 *        4-10 S10 #privacy
 *        4-11 S11 #message
 *        4-12 S12 #questions
 *        4-13 S13 LINE登録セクション（ID無し）
 *        4-14 S15 注記（ID無し）
 *
 * ★ 1〜3 を書き換えると全セクションに波及する。触る前に他担当へ声を掛けること。
 * ================================================================== */


/* ==================================================================
 * 0. ローカル変数
 * ------------------------------------------------------------------
 * tokens.css に載っていない直値だけをここで一度だけ名前付けする。
 * すべて設計ツリー／本番DOMの実測値であって、新規に決めた色ではない。
 * このファイルは page-reblue.php のときだけ読まれる（inc/enqueue.php）。
 * ================================================================== */
:root {
  /* 本文の既定色。設計ツリー実測 #333333（24箇所）＝ tokens.css の --o-c-gray-333 と同値。 */
  --rb-c-body: var(--o-c-gray-333);
  /* 白文字。設計ツリーには #ffffff / #ffffffff / #FFFFFF の3表記があるが同値。
     tokens.css の --o-c-white に寄せる（tokens.css 冒頭「移植時は必ず以下へ寄せる」の指示）。 */
  --rb-c-white: var(--o-c-white);

  /* --- セクションの地色（すべて実測直値） --- */
  --rb-c-events-bg: #eeeeee;                                   /* S2 直近イベント枠 */
  --rb-c-feeling-bg: linear-gradient(90deg, #0f5290ff, #071d44ff); /* S7 心情セクション */
  --rb-c-privacy-bg: var(--o-c-navy-deep);                     /* S10 プライバシー（tokens.css #14314a） */
  --rb-c-message-bg: #f9fafb;                                  /* S11 代表挨拶 */
  --rb-c-line-bg: var(--o-c-white);                            /* S13 LINE登録セクション */

  /* --- 固定_LINE登録バー（S17） --- */
  --rb-c-footerbar-bg: #eeeeee;                                /* base/@small の地色（実際は非表示） */
  --rb-c-footerbar-tablet-bg: linear-gradient(90deg, #41ee16ff, #5bbf71); /* @tablet 宣言（非表示） */
  /* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。
     実測値は #03bd0fff だが、載る文字が白／#f9fafb で比 2.42〜2.53（要 4.5 / 大字 3）。
     色相はそのままに 29% 暗くした派生 var(--o-c-line-green-d) #02860b へ差し替え
     （白文字 4.75 / #f9fafb 4.55）。元の実測値は下のコメントに残す。 */
  --rb-c-line-green: var(--o-c-line-green-d);                  /* @mobile のボタン地色・実測原値 #03bd0fff */

  /* ネイビーの70%（#082b34b3）。設計ツリー実測。tokens.css に半透明版が無いためここで命名。
     使用箇所: 4-4 #voice-1 の投稿者名（.rb-voice__name）。 */
  --rb-c-navy-70: #082b34b3;

  /* --- セクション inner の固定幅（設計ツリーの width。実測で一致を確認） --- */
  --rb-w-1280: 1280px;  /* #points */
  --rb-w-1110: 1110px;  /* #messegemovie / #casestory / #privacy / #point1-2 */
  --rb-w-1080: 1080px;  /* S2 / #voice-1 / #message / S7心情 / S13 LINE */
  --rb-w-960:   960px;  /* #messegemovie @small */
  --rb-w-720:   720px;  /* S15 注記 */
}


/* ==================================================================
 * 1. 骨格
 * ------------------------------------------------------------------
 * ★ STUDIO実行時のDOM構造（本番実測・これが全セクションの前提）
 *
 *   <section class="rb-section" id="…">   全幅・padding:0・**背景だけ**を持つ
 *     <div class="rb-section__inner">     設計ツリーの width / padding / gap / flex を持つ
 *
 * 設計ツリーの width:1080px 等は **inner の幅**であって背景の帯幅ではない。
 * 帯は必ず viewport 全幅。取り違えると全セクションが島になって別物になる。
 *
 * ★ 例外: 設計ツリーの width が 100% のノードには inner が挿入されず、
 *   padding が要素自身に付く。/reblue では ヒーロー・#concept・#questions の3つ。
 *   その3つは .rb-section--flush を付けて inner を持たせない。
 *
 * 実測の対応表（1440px / viewport実効1425px）:
 *   S2 events      outer 1425 pad0 / inner 1080 pad 50px 0px
 *   #points        outer 1425 pad0 / inner 1280 pad 100px 80px 50px  gap 30px
 *   #voice-1       outer 1425 pad0 / inner 1080 pad 50px 0px         gap 20px
 *   #point1-2      outer 1425 pad0 / inner 1110 pad 30px 0px         gap 30px（現行は非表示）
 *   S7 心情        outer 1425 pad0 / inner 1080 pad 50px 0px         gap 50px  h=794
 *   #messegemovie  outer 1425 pad0 / inner 1110 pad 50px 0px         row
 *   #casestory     outer 1425 pad0 / inner 1110 pad 0px              row  h=720
 *   #privacy       outer 1425 pad0 / inner 1110 pad 80px 0px         gap 40px
 *   #message       outer 1425 pad0 / inner 1080 pad 69px 0px
 *   S13 LINE       outer 1425 pad0 / inner 1080 pad 30px 0px         gap 20px  h=500
 *   S15 注記       outer 1425 pad0 / inner  720 pad 50px 0px         h=160
 *   #questions     outer 1425 pad 80px 100px（inner 無し）
 * ================================================================== */

.rb-main {
  display: block;
  width: 100%;
  /* ヘッダーは position:fixed（h=80px / @tablet以下 60px）。
     原本はヒーローがヘッダーの下に潜り込む設計なので padding-top は入れない。 */

  /* ★★ 2026-09-14 追加: overflow-x: clip
     なぜ: 541〜767px と 841px 前後の帯で**ページ全体が横スクロールできて**いた。
     計測（修正前・local）: scrollWidth/innerWidth = 761/541・761/560・761/640・
     761/700・901/841。window.scrollTo(600,0) で scrollX が 201(560) / 60(841) 動く
     ＝ 右側に何も無い余白へスワイプできる状態だった。
     発生源は 2つとも「現行サイトにも同じだけ溢れている」もの:
       ・.rb-concept__label「CONCEPT」144px（テキスト幅 711px。CSS 4-6 の TODO(S6) が
         既に「70% 幅を超えることがある」と明記している）
       ・.rb-feeling__figures の 320px 図版 ×2（@tablet 帯で 690px）
     現行サイト計測（hs.py 2026-09-14・560/841px）では内側の section が
     scrollWidth 690/1102 と同じだけ溢れているのに documentElement.scrollWidth は
     innerWidth と一致し、scrollX も 0 のまま＝ **STUDIO 側でクリップされている**。
     つまり「見た目は溢れたまま・ページは横に動かない」が現行の挙動。
     clip なら（hidden と違い）スクロールコンテナを作らないので position:sticky や
     アンカーリンクの挙動に影響しない。固定ヘッダー・固定LINEバーは .rb-main の外。 */
  overflow-x: clip;
}

/* ---- セクションの外側（背景の帯）。全幅・padding は持たない ---- */
.rb-section {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ---- セクションの内側。設計ツリーの width / padding / gap を持つ ---- */
.rb-section__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* inner の固定幅モディファイア（設計ツリーの width をそのまま名前にしている）。
   max-width:100% は下の固定幅ガードで一括して当たる。 */
.rb-section__inner--1280 { width: var(--rb-w-1280); }
.rb-section__inner--1110 { width: var(--rb-w-1110); }
.rb-section__inner--1080 { width: var(--rb-w-1080); }
.rb-section__inner--720  { width: var(--rb-w-720); }

@media screen and (max-width: 1140px) {
  /* #messegemovie だけ @small で inner が 960px に縮む（設計ツリー実測）。 */
  .rb-section__inner--1110-small960 { width: var(--rb-w-960); }
}

/* ---- inner を持たないセクション（設計ツリー width:100%）----
 * ヒーロー / #concept / #questions の3つ。
 * .rb-section__inner を **入れない**（マークアップ側で省く）。
 * padding は .rb-section--flush 自身に、各区画（4-1 / 4-6 / 4-12）で指定する。
 * ここでは共通の指定は無い。目印としてクラス名だけ決めておく。 */


/* ------------------------------------------------------------------
 * rb-fixed-width-guard
 * ------------------------------------------------------------------
 * 設計ツリーの width は STUDIO キャンバス基準の実測値（例 1280px / 1110px、
 * テキストノードの width:1487px など）。STUDIO実行時は親側の制約で縮むため
 * 本番では溢れない（実測: #questions の h2 は cssW 1487px → 実幅 1225px）。
 * 素のCSSに移すと固定幅がそのまま効いて親からはみ出し、文字が切れる。
 * → rb- 名前空間の要素すべてに max-width:100% を当てて本番の挙動に合わせる。
 * （campain.css の cp-fixed-width-guard と同じ対策。2026-09-01 CEO指摘「文字のずれ」）
 * ------------------------------------------------------------------ */
.rb-main [class*="rb-"],
.rb-footerbar [class*="rb-"] {
  max-width: 100%;
}

/* 画像・iframe も同様に親を超えさせない（base.css の指定を /reblue でも確実にする）。 */
.rb-main img,
.rb-main iframe {
  max-width: 100%;
}


/* ==================================================================
 * 2. セクション共通のタイポグラフィ・素材
 * ------------------------------------------------------------------
 * /reblue には campain の #cta のような「使い回しの共通ブロック」は無い。
 * 見出しの組み方はセクションごとに違う（英字ラベル＋罫線＋和文／英字大見出し＋和文 等）。
 * ここでは **全セクションで共通していた指定だけ** を置く。
 * セクション固有の見出しは 4-x の各区画で組むこと。
 *
 * ★ ウェイト底上げ（CEO指示）は各セクションの実装時に適用する。
 *   設計ツリー実測 400 → 500 と書く／実測 500 → 700 と書く。
 * ================================================================== */

.rb-main {
  font-family: var(--s-font-f88553ee);   /* Inter + Zen Kaku Gothic New（102箇所・基本） */
  color: var(--rb-c-body);
}

/* Noto Serif JP は /reblue 全体で6要素だけ。使う側でこのクラスを付ける。 */
.rb-serif { font-family: var(--s-font-dbab4593); }

/* 見出しの共通土台。サイズ・色・字間はセクション側で指定する。 */
.rb-main h1,
.rb-main h2,
.rb-main h3 {
  margin: 0;
  line-height: 1.4;
}

.rb-main p { margin: 0; }

/* 英字ラベル＋罫線（#questions の「Q&A」＋130×1px、#voice-1 の「VOICE」等で使う下地）。 */
.rb-rule {
  display: block;
  width: 130px;
  height: 1px;
  background: var(--rb-c-white);
  border: 0;
  margin: 5px 0 20px 0;
}

/* STUDIO の出現アニメ（&appear）は再現しない。
   TODO: 完全再現が必要なら IntersectionObserver + transition で足す。
   現状はアニメ無しで最終状態を最初から表示する（可読性・CLS優先）。 */


/* ==================================================================
 * 3. #footerbar（固定_LINE登録・S17）
 * ------------------------------------------------------------------
 * 設計ツリー index 17。実装は template-parts/reblue/footerbar.php。
 * display は全BPで明示する（継承に頼らない）。
 * base/@small/@tablet は非表示だが、原本の宣言をそのまま残しておく
 * （将来 @tablet を出す判断になったとき地色が分かるように）。
 * ================================================================== */

.rb-footerbar {
  display: none;                       /* base（>1140px） */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 200px;
  height: 160px;
  background: var(--rb-c-footerbar-bg);
  text-decoration: none;
}

.rb-footerbar__box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 200px;
  height: 160px;
  background: var(--rb-c-footerbar-bg);
}

.rb-footerbar__labels {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
}

.rb-footerbar__lead,
.rb-footerbar__main {
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.4;
  text-align: left;
  color: var(--rb-c-body);
}

@media screen and (max-width: 1140px) {
  .rb-footerbar { display: none; }     /* @small */
}

@media screen and (max-width: 840px) {
  /* @tablet — 原本も display:none。地色・padding の宣言だけ持っている。 */
  .rb-footerbar {
    display: none;
    width: 100%;
    height: auto;
    padding: 30px 0;
    background: var(--rb-c-footerbar-tablet-bg);
  }
}

@media screen and (max-width: 540px) {
  /* @mobile — ここで初めて表示される。実測 h=100px / 内側 Box は 90%幅。 */
  .rb-footerbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 10px 0;
    background: transparent;
  }
  .rb-footerbar__box {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    width: 90%;
    height: 100%;
    border-radius: 48px;
    background: var(--rb-c-line-green);
  }
  .rb-footerbar__labels {
    flex-direction: column;
    padding: 0 0 0 3px;
  }
  .rb-footerbar__lead {
    font-size: 12px;
    font-weight: 700;                  /* 実測500 → CEO指示で1段上げ */
    color: var(--rb-c-white);
  }
  .rb-footerbar__main {
    font-weight: 700;                  /* 実測700・据え置き */
    color: var(--rb-c-white);
  }
}

@media screen and (max-width: 320px) {
  /* @mini */
  .rb-footerbar { display: flex; }
  .rb-footerbar__lead { font-size: 11px; }
  .rb-footerbar__main { font-size: 16px; }
}


/* ==================================================================
 * 4. セクション別の区画
 * ------------------------------------------------------------------
 * ★ 担当エージェントは **自分の見出しの直下だけ** に追記する。
 *   他の区画を消したり並べ替えたりしない（並行作業の衝突を避けるため）。
 * ★ 各区画では display をブレークポイント4段すべてで明示する。
 * ================================================================== */


/* ==================================================================
 * 4-1. S1 ヒーロー（設計ツリー index 0 / 高さ 100vh / ID無し）
 * ------------------------------------------------------------------
 * 設計ツリー width:100% ＝ inner 無し（.rb-section--flush）。
 * padding は要素自身に base 168px 40px / @tablet 104px 32px / @mobile 96px 16px。
 * flex column / align-items:center /
 *   justify-content: base center → @tablet・@mobile flex-end。
 * 背景画像 s-2688x1520_v-frms_webp_8bb18993-….webp は ::before で描く。
 *   ::before filter: contrast(90%) brightness(109%) saturate(102%)
 *   @tablet / @mobile: background-position: right center
 * 内側のグループ（実測 w=1280 / gap 40px）は
 *   base flex-direction:row → @mobile column-reverse（本番DOM実測）。
 * ★ CTA「LINEを登録してイベント通知！」は原本のリンク先が空文字＝リンク切れ。
 * ================================================================== */
/* ---- 外枠（背景の帯＝画面全体。inner は持たない） ---- */
.rb-hero {
  /* ローカル変数。tokens.css に無い実測直値だけをここで名前付けする（reblue.css の方針）。
     どちらも設計ツリーの実測値で、新規に決めた色ではない。 */
  --rb-hero-cta-hover-bg: var(--o-c-white);               /* CTA :hover の地色（#ffffffff と同値） */
  --rb-hero-cta-hover-fg: #ff5035ff;                      /* CTA :hover のラベル色（in:hover） */
  --rb-hero-lead-shadow: 0px 0px 8px rgba(255, 255, 255, 0.7); /* サブコピーの縁取り */

  display: flex;                       /* base（>1140px） */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 168px 40px;
  overflow: hidden;
}

/* 背景画像。STUDIO は content:image を ::before の background-image で敷く。
   実体: assets/img/static/s-2688x1520_v-frms_webp_8bb18993-….webp（原本pngのWebP最適化）。
   TODO: background-position は抽出データに無い。STUDIO既定の center を仮置きしている
   （@tablet / @mobile だけ原本に right center の指定があるので下で上書きする）。 */
.rb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/static/s-2688x1520_v-frms_webp_8bb18993-9c3b-4355-8817-c83abe399dfa.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: contrast(90%) brightness(109%) saturate(102%);
}

/* ::before より前面に出す。 */
.rb-hero > * {
  position: relative;
  z-index: 1;
}

/* ---- 1280px の行（設計ツリー 0.0）。子は左カラム1本だけ ---- */
.rb-hero__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 40px;
  width: 1280px;                       /* max-width:100% は rb-fixed-width-guard が当てる */
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* ---- 左カラム（設計ツリー 0.0.0 / width:50%） ----
   原本の &appear（opacity:0 → translate(0,20px)）は再現しない（reblue.css 2章の方針）。 */
.rb-hero__col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 32px;
  width: 50%;
  height: auto;
  padding: 0;
  background: transparent;
}

.rb-hero__title-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 0;
}

/* 見出し。原本の tagName も p（このページの h1 は #points の2本）。 */
.rb-hero__title {
  font-family: var(--s-font-f88553ee);
  font-size: 4rem;                     /* 原本の単位どおり rem。@tablet 以下は px 指定 */
  font-weight: 700;                    /* 実測700・据え置き（太字は底上げ対象外） */
  font-style: normal;
  font-feature-settings: "palt" 1;
  color: var(--s-color-53bb1a5b);
  letter-spacing: 0em;
  line-height: 1.4;
  text-align: left;
  width: 100%;
  height: auto;
  margin: 0;
}

.rb-hero__lead {
  font-family: var(--s-font-f88553ee);
  font-size: 24px;
  /* 実測600。Zen Kaku Gothic New に600が無く合成太字になるため使わない（CEO指示）。
     CSSのフォントマッチング上も600は700へ寄るので、実描画と同じ700を明示する。 */
  font-weight: 700;
  font-style: normal;
  font-feature-settings: normal;
  color: var(--s-color-53bb1a5b);
  letter-spacing: normal;
  line-height: 1.75;
  text-align: left;
  text-shadow: var(--rb-hero-lead-shadow);
  width: 100%;
  height: auto;
  margin: 0;
}

.rb-hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 8px 16px;
  width: 100%;
  padding: 0;
}

.rb-hero__cta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 8px;
  width: auto;
  padding: 12px 24px;
  border: 0 solid transparent;
  border-radius: 64px;
  /* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。
     地色 #369bdc に白15px/700 を載せて比 3.05（要 4.5・実測）。色相はそのままに
     24% 暗くした派生 #2976a7 へ（白文字 4.95）。tokens.css の元トークンは不変。 */
  background: var(--o-c-brand-blue-d);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.rb-hero__cta:hover {
  background: var(--rb-hero-cta-hover-bg);
}

.rb-hero__cta-label {
  flex: 1;
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 700;                    /* 実測700・据え置き */
  font-feature-settings: "palt" 1;
  color: var(--rb-c-white);
  line-height: 1.75;
  text-align: left;
  width: auto;
  height: auto;
}

/* 原本の in:hover（親ホバー時に子の色が変わる）。 */
.rb-hero__cta:hover .rb-hero__cta-label {
  color: var(--rb-hero-cta-hover-fg);
}

@media screen and (max-width: 1140px) {
  /* @small — 原本の指定は行の gap だけ。display は明示する。 */
  .rb-hero { display: flex; }
  .rb-hero__row { display: flex; gap: 32px; }
  .rb-hero__col { display: flex; }
  .rb-hero__actions { display: flex; }
  .rb-hero__cta { display: flex; }
}

@media screen and (max-width: 840px) {
  /* @tablet */
  .rb-hero {
    display: flex;
    justify-content: flex-end;
    padding: 104px 32px;
  }
  .rb-hero::before { background-position: right center; }
  .rb-hero__row {
    display: flex;
    flex-direction: column-reverse;    /* 子は1本なので見た目は変わらないが原本どおり */
    flex-wrap: nowrap;
    gap: 50px;
  }
  .rb-hero__col {
    display: flex;
    flex: none;
    width: 100%;
  }
  .rb-hero__title { font-size: 48px; }
  .rb-hero__actions { display: flex; }
  .rb-hero__cta {
    display: flex;
    flex: 1;
    width: auto;
  }
}

@media screen and (max-width: 540px) {
  /* @mobile */
  .rb-hero {
    display: flex;
    justify-content: flex-end;
    padding: 96px 16px;
  }
  .rb-hero::before { background-position: right center; }
  .rb-hero__row { display: flex; gap: 40px; }
  .rb-hero__col { display: flex; gap: 24px; }
  .rb-hero__title { font-size: 32px; }
  .rb-hero__lead { font-size: 14px; }
  .rb-hero__actions { display: flex; gap: 8px; }
  .rb-hero__cta {
    display: flex;
    flex: none;
    width: 100%;
  }
  .rb-hero__cta-label { font-size: 14px; }
}

@media screen and (max-width: 320px) {
  /* @mini — 原本に固有の指定は無い。display だけ明示して継承に頼らない。 */
  .rb-hero { display: flex; }
  .rb-hero__row { display: flex; }
  .rb-hero__col { display: flex; }
  .rb-hero__actions { display: flex; }
  .rb-hero__cta { display: flex; }
}


/* ==================================================================
 * 4-2. S2 直近イベント枠（設計ツリー index 1 / ID無し / h=252px）
 * ------------------------------------------------------------------
 * 帯 var(--rb-c-events-bg) 全幅 / inner 1080px / padding 50px 0px。
 * 中身は https://reblue-events.pages.dev/ の iframe（埋め込み reblue__01.html）。
 * 埋め込み側CSSが 100vw に突き抜けさせる（specs 2-2 S2・付録B に全文）:
 *   .reblue-events-iframe-wrap {
 *     position:relative; left:50%; right:50%;
 *     margin-left:-50vw; margin-right:-50vw;
 *     width:100vw; max-width:100vw; padding:0 24px;
 *     box-sizing:border-box; overflow:hidden; }
 *   iframe { display:block; width:100%; max-width:1200px; margin:0 auto;
 *            height:700px; border:0; }
 *   @media (max-width:900px){ iframe { height:750px; } }
 *   @media (max-width:720px){ wrap{ padding:0 16px } iframe{ height:800px } }
 * ★ 上の引用は「埋め込み原文」。ただし原文の全幅化（100vw）は STUDIO では
 *   サンドボックス iframe の中でしか効かず、現行サイトでもページ全幅には
 *   突き抜けていない。移行版で実際に採用している値は下の実装ブロック参照
 *   （2026-09-14 に width:100% へ変更。理由はそこのコメント）。
 * ================================================================== */
/* ------------------------------------------------------------------
 * 帯（全幅・#eeeeee）。設計ツリー index 1 の background。
 * ------------------------------------------------------------------ */
.rb-section--events {
  display: flex;
  background: var(--rb-c-events-bg);
}

/* inner ＝ 設計ツリーの Section ノード本体（width 1080px / padding 50px 0px）。 */
.rb-events__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  height: auto;
  padding: 50px 0;
}

/* ------------------------------------------------------------------
 * 埋め込み reblue__01.html の <style> を **逐語で移設**。
 * ★ クラス名は埋め込み原文どおり rb- 接頭辞なしのまま（2026-09-14 に全幅化を
 *   外したので rb-fixed-width-guard との衝突は無くなったが、埋め込み側リポジトリと
 *   名前を揃えておく意味があるので改名しない）。
 * ★ ここのメディアクエリ（900px / 720px）は原文どおり。/reblue の
 *   1140/840/540/320 とは別系統で、埋め込み側が持っている値なので合わせない。
 *
 * ★★ 2026-09-14 修正: 全幅化（left:50% / margin:-50vw / width:100vw）を外した。
 *   なぜ: この breakout は STUDIO では **サンドボックス iframe の中** で効いていた。
 *   現行サイト計測（diag_live.py 2026-09-14）では埋め込みは
 *   studioiframesandbox.com の iframe で、その外箱が x=180 w=1080（1440px時）
 *   / x=0 w=768（768px時）/ x=0 w=375（375px時）＝ **inner 幅に収まっている**。
 *   つまり 100vw は iframe 内の viewport（＝inner 幅）を指しており、
 *   ページ全幅に突き抜けたことは一度も無い（現行 scrollWidth == innerWidth）。
 *   移行でマークアップを直接ページへ展開したため 100vw がページ viewport を指し、
 *   さらに left:50% が「フレックス親の中央」に加算されて二重にズレた:
 *     修正前 wrap.x = 188(375) / 215(430) / 384(768) / 540(1440)
 *     ＝ いずれも inner 幅の 50%。documentElement.scrollWidth = 563/645/1152/1980
 *     （＝ 375/430 ではモバイル縮小表示、768/1440 では横スクロール）。
 *   width:100% にすると現行と同じ「inner 幅いっぱい」の箱に戻り、
 *   padding 24px（@720px 以下 16px）も原文どおり効く。
 *   副次効果として 100vw のスクロールバー問題（旧 TODO(S2)）も消滅する。
 * ------------------------------------------------------------------ */
.reblue-events-iframe-wrap {
  /* 現行（STUDIO サンドボックス iframe）と同じく inner 幅いっぱいに置く */
  position: relative;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  overflow: hidden;
}

/*
 * ★ 高さは埋め込み先の実コンテンツを採寸して決めている（2026-09-13）
 *   現行サイトはこの iframe に高さを与えておらず、iframe 既定の 150px に潰れていて
 *   イベント掲示板がほぼ見えない。CEO判断「デザイン的に優れている方に」により
 *   中身が切れない高さを入れる。
 *   scrolling="no" なので、足りないと**スクロールもできずに切れる**。少し余らせる。
 *
 *   https://reblue-events.pages.dev/ の実コンテンツ高（幅ごとに実測）:
 *     幅1200px → 877px ／ 幅900px → 787px ／ 幅700px → 664px
 *   それぞれに 1イベント分弱の余裕を足した値を入れている。
 *
 * TODO(恒久対応): 掲載イベント数は Notion 連動で増減するので、固定値はいずれ合わなくなる。
 *   本来は埋め込み側が postMessage で自分の高さを親に通知し、親がそれに合わせて
 *   iframe を伸縮させるのが正しい。埋め込み側（別リポジトリ）の変更が要るため未着手。
 */
.reblue-events-iframe-wrap iframe {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 900px;
  border: 0;
}

@media (max-width: 900px) {
  .reblue-events-iframe-wrap iframe { height: 810px; }
}

@media (max-width: 720px) {
  .reblue-events-iframe-wrap { padding: 0 16px; }
  .reblue-events-iframe-wrap iframe { height: 690px; }
}

/* ------------------------------------------------------------------
 * 設計ツリーに BP 別の上書きは無い（base の宣言だけ）。
 * それでも display は4段すべてで明示する（継承に頼らない方針）。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1140px) {   /* @small */
  .rb-section--events { display: flex; }
  .rb-events__inner { display: flex; }
}

@media screen and (max-width: 840px) {    /* @tablet */
  .rb-section--events { display: flex; }
  .rb-events__inner { display: flex; }
}

@media screen and (max-width: 540px) {    /* @mobile */
  .rb-section--events { display: flex; }
  .rb-events__inner { display: flex; }
}

@media screen and (max-width: 320px) {    /* @mini */
  .rb-section--events { display: flex; }
  .rb-events__inner { display: flex; }
}


/* ==================================================================
 * 4-3. S3 #points（設計ツリー index 2 / h=1291px）
 * ------------------------------------------------------------------
 * 帯 var(--s-color-2fbd0fb0) 全幅 / inner 1280px /
 * padding base 100px 80px 50px / @mobile 129px 0px 50px / gap 30px /
 * overflow: hidden（カルーセルのはみ出しを切る）。
 * 中身（表示されているのは4要素だけ）:
 *   h1「出会いの形も、人生の在り方も」／h1「君が望むなら、どんな未来も叶えられる。」
 *      ※独立した2つの Text ノード。1つの <br> 見出しではない
 *   リッチテキスト（埋め込み reblue__02.html）
 *   併置画像
 *   写真カルーセル11枚（12秒自動送り・#scroll01-2 / #scroll01-3 の2つの <ul>）
 * ★ 破棄（実装しない）: 「そんなの、つまらないじゃないか。」／装飾画像 …eb1f7b82／
 *   「▼気になるテーマをクリック▼」／テーマ選択導線（…78882efc ＋ 詳しく見る×3）
 * ★ セクション全体を包む空の <a>（link.path:""）は再現しない。
 * ================================================================== */
/* ---- 外枠（背景の帯・全幅） ----
   2026-09-15 コントラスト調整（CEO決定「直してOK」）。この帯には白文字しか載らず
   （h1 48px / 小見出し 36px / リッチテキスト 20px / 本文 13px）、実測値 #4db7e3 では
   比 2.28 で 4.5 も 3 も満たさない。白文字側は上げようがないため、CEO指示の
   「どうしても届かない場合だけ地色を一段暗くする」に従い、色相そのままに 31% 暗くした
   派生 var(--o-c-sky-d) #357e9d へ（白文字 4.54）。tokens.css の元トークンは不変。 */
.rb-points {
  display: flex;                       /* base（>1140px） */
  background: var(--o-c-sky-d);
}

/* ---- 内側（設計ツリーの width:1280px / padding / gap を持つ） ---- */
.rb-points__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 30px;
  height: auto;
  padding: 100px 80px 50px;
  overflow: hidden;                    /* 原本 overflowX/Y:hidden。カルーセルのはみ出しを切る */
}

/* ---- 見出し2本（設計ツリー 2.1）----
   ★ 原本は <h1> が2つ。1ページ2 h1 の是非は specs 5-4 B-18 で**判断保留**。
     points.php 側の TODO(B-18) と対。ここでは原本の見た目をそのまま再現する。 */
.rb-points__headings {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
}

/* フォントは Noto Serif JP（マークアップ側で .rb-serif を併記）。
   ★ 実測400 → CEO指示で500へ底上げ。これを実際に効かせるため
     inc/enqueue.php の Noto+Serif+JP を 400;700 → 400;500;700 にした
     （2026-09-01 検証で修正済み。500 が無いと font-matching で400へ落ちて
     底上げが無効になる）。enqueue 側から 500 を外さないこと。 */
.rb-points__h1 {
  font-size: 48px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  color: var(--rb-c-white);
  letter-spacing: 0.21em;
  line-height: 1.4;
  scale: 0.95 1;
  text-align: center;
  width: auto;
  height: auto;
}

.rb-points__h1--2 {
  letter-spacing: 0.2em;
  text-align: left;
}

/* ---- 本文＋併置画像（設計ツリー 2.3） ---- */
.rb-points__body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 30px;
  width: 100%;
  padding: 0;
}

.rb-points__text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 60%;
  padding: 0;
}

.rb-points__subheads {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 100%;
  padding: 0;
}

.rb-points__subhead {
  font-family: var(--s-font-f88553ee);
  font-size: 36px;
  font-weight: 700;                    /* 実測700・据え置き */
  color: var(--rb-c-white);
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-align: center;
  text-decoration: underline;
  text-shadow: none;
  width: auto;
  height: auto;
}

.rb-points__subhead2 {
  font-family: var(--s-font-f88553ee);
  font-size: 36px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  color: var(--rb-c-white);
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-align: left;
  width: auto;
  height: auto;
}

/* リッチテキスト（埋め込み reblue__02.html）。原本の p は margin:0。 */
.rb-points__rich {
  flex: none;
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  color: var(--rb-c-white);
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-align: left;
  width: 100%;
  height: auto;
  padding: 0;
}

.rb-points__rich p { margin: 0; }
.rb-points__rich strong { font-weight: 700; }

/* 併置画像。原本は height 固定のため object-fit:cover で受ける。 */
.rb-points__visual {
  display: block;
  flex: none;
  width: 40%;
  height: 577px;
  border-radius: 16px;
  object-fit: cover;
  filter: saturate(100%);
}

/* ---- 写真カルーセル（設計ツリー 2.4 / data-type:carousel） ----
 * 原本は STUDIO の carousel コンポーネント:
 *   duration 12000ms（1枚ぶん translateX(-100%) に掛ける時間）
 *   autoDuration 100ms（次へ送るポーリング間隔）／ playing true
 *   ＝ 実際の見えかたは「12秒で1枚ぶん左へ流れ続ける等速の無限マーキー」。
 * JSを持ち込まず、同じ速度の CSS アニメーションで再現する。
 *   画像11枚 × 12秒 = 132秒で1周。points.php が配列を2周ぶん出力しているので
 *   -50% まで動かせば継ぎ目なくループする。
 * ★ 外枠の width:200% は原本どおり。rb-fixed-width-guard の max-width:100% を
 *   打ち消す必要があるため max-width:none を明示する（親 .rb-points__inner が
 *   overflow:hidden なので横スクロールは発生しない）。
 */
.rb-points__carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 200%;
  height: auto;
  padding: 20px 0;
  overflow: hidden;
}

.rb-points__carousel-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex: none;
  width: max-content;
  animation: rb-points-marquee 132s linear infinite;
  will-change: transform;
}

/* rb-fixed-width-guard（`.rb-main [class*="rb-"]` ＝ 詳細度0,2,0）は
   後続の単一クラス指定では上書きできない。カルーセルの3要素だけは
   同じ詳細度（0,2,0）で max-width を解除する。ここ以外では解除しないこと。 */
.rb-main .rb-points__carousel,
.rb-main .rb-points__carousel-track,
.rb-main .rb-points__carousel-img {
  max-width: none;
}

.rb-points__carousel-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: none;
  width: 300px;
  height: 320px;
  margin: 0;
  padding: 10px;
}

.rb-points__carousel-img {
  display: block;
  width: 101%;                         /* 原本どおり。親の padding 内で少しだけはみ出す */
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

@keyframes rb-points-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 自動再生を止める設定の環境では動かさない（base.css の方針に合わせ最終状態で静止）。 */
@media (prefers-reduced-motion: reduce) {
  .rb-points__carousel-track { animation: none; }
}

@media screen and (max-width: 1140px) {
  /* @small — 原本に固有の指定は無い。display だけ明示する。 */
  .rb-points { display: flex; }
  .rb-points__inner { display: flex; }
  .rb-points__headings { display: flex; }
  .rb-points__body { display: flex; }
  .rb-points__text { display: flex; }
  .rb-points__subheads { display: flex; }
  .rb-points__visual { display: block; }
  .rb-points__carousel { display: flex; }
  .rb-points__carousel-track { display: flex; }
  .rb-points__carousel-item { display: flex; }
}

@media screen and (max-width: 840px) {
  /* @tablet */
  .rb-points { display: flex; }
  .rb-points__inner { display: flex; }
  .rb-points__headings { display: flex; }
  .rb-points__h1 { font-size: 48px; }
  .rb-points__body {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    padding: 20px 100px;
  }
  .rb-points__text {
    display: flex;
    flex: none;
    width: 100%;
  }
  .rb-points__subheads { display: flex; }
  .rb-points__visual {
    display: block;
    flex: none;
    width: 100%;
    height: 400px;
  }
  .rb-points__carousel { display: flex; }
  .rb-points__carousel-track { display: flex; }
  .rb-points__carousel-item { display: flex; }
}

@media screen and (max-width: 540px) {
  /* @mobile — 上の column-reverse は @tablet から引き継ぐ（原本も再宣言していない）。 */
  .rb-points { display: flex; }
  .rb-points__inner {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 129px 0 50px;
  }
  .rb-points__headings { display: flex; }
  .rb-points__h1 {
    font-size: 32px;
    margin: 0 20px;
  }
  .rb-points__h1--2 {
    width: auto;
    padding: 0;
  }
  .rb-points__body {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 20px;
  }
  .rb-points__text {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
  }
  .rb-points__subheads {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }
  .rb-points__subhead { font-size: 24px; }
  .rb-points__subhead2 {
    font-size: 20px;
    font-weight: 700;                  /* 実測500 → CEO指示で1段上げ */
  }
  .rb-points__rich { font-size: 13px; }
  .rb-points__visual {
    display: block;
    flex: none;
    height: 250px;
  }
  .rb-points__carousel { display: flex; }
  .rb-points__carousel-track { display: flex; }
  .rb-points__carousel-item {
    display: flex;
    width: 170px;
    height: 200px;
    padding: 5px;
  }
}

@media screen and (max-width: 320px) {
  /* @mini */
  .rb-points { display: flex; }
  .rb-points__inner { display: flex; }
  .rb-points__headings { display: flex; }
  .rb-points__body { display: flex; }
  .rb-points__text { display: flex; }
  .rb-points__subheads { display: flex; }
  .rb-points__rich {
    margin: 0 40px;
    padding: 0;
  }
  .rb-points__visual { display: block; }
  .rb-points__carousel { display: flex; }
  .rb-points__carousel-track { display: flex; }
  .rb-points__carousel-item { display: flex; }
}


/* ==================================================================
 * 4-4. S4 #voice-1（設計ツリー index 3 / h=307px）
 * ------------------------------------------------------------------
 * 帯 var(--s-color-2fbd0fb0) 全幅 / inner 1080px /
 * padding base 50px 0px / @small 0px 20px / @mobile 30px 20px / gap 20px /
 * align-items: flex-start。
 * 見出し: h2「利用者の声」36px/700・#ffffffff・letter-spacing .08em
 *         ＋ 背面に「VOICE」100px/700・#14314a
 * 本文: 「Re:Blueに参加してくれた仲間たちから感想をいただきました！<br>
 *        ※プライバシーに配慮して掲載しております」
 * リスト2本（#scroll01-2 相当ではなく voice 用の List×2・2本目に loadMore）。
 * ★ CMS連携。実データは抽出に含まれない＝未取得（specs 1-2 S5 の注記）。
 *   TODO: CPT `voice` を用意して Re:Blue で絞り込む。PC=10件モーダル /
 *   モバイル=2件＋「もっと見る」の2系統UI。
 * ================================================================== */
/* ------------------------------------------------------------------
 * 帯（全幅・背景だけ）。設計ツリーの Section ノードの background がここに来る。
 * 局所変数はこの区画の中だけで使う（0章の :root を触らないため）。
 * ------------------------------------------------------------------ */
/* 地色は #points と同じ扱い（2026-09-15 コントラスト調整・上の .rb-points 参照）。 */
.rb-section--voice {
  display: flex;
  background: var(--o-c-sky-d);

  /* 背面の装飾文字「VOICE」。設計ツリー実測 #14314a（tokens.css の濃紺と同値）。 */
  --rb-c-voice-label: var(--o-c-navy-deep);
  /* カードの地色。設計ツリー実測 #fbf6f6ff。tokens.css に該当トークンが無いため局所定義。 */
  --rb-c-voice-card-bg: #fbf6f6;
  /* 「もっと見る」ボタンの地色。設計ツリー実測 #EEEEEE。 */
  --rb-c-voice-more-bg: #eeeeee;
}

/* inner ＝ 設計ツリーの Section ノード本体（width 1080px / padding / gap）。 */
.rb-voice__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 20px;
  height: auto;
  padding: 50px 0 50px 0;
}

/* ---- 見出しグループ（width:100% / margin-top 50px / 背面に VOICE を敷く） ---- */
/* ★★ 2026-09-14 修正: isolation:isolate を追加。
 *   なぜ: position:relative だけでは stacking context を作らないので、
 *   .rb-voice__label（z-index:-1）がルートの負レイヤーへ落ち、
 *   帯 .rb-section--voice の水色背景の下に沈んで**完全に見えなくなっていた**。
 *   根拠: 現行サイト（1440px・live/live_voice_label.png 2026-09-14 撮影）では
 *   「利用者の声」の背後に薄い紺の「VOICE」が出ている。現行の該当要素は
 *   p.text（100px / color rgb(20,49,74) / position:relative / z-index:0）で、
 *   STUDIO 側は親 Box 側に opacity を持たせ負レイヤーを使っていない。
 *   移行版は「出現アニメは再現しない」方針（2章）で .appear の opacity/transform を
 *   落としたため、STUDIO 側で偶然できていた stacking context も一緒に消えた。
 *   isolate を足すと帯の背景の上・タイトルの下という設計どおりの重なりに戻る。
 *   （同種の事故: 4-13 .rb-section--line の背景写真。同日同じ手当てを実施） */
.rb-voice__head {
  position: relative;                  /* 背面の VOICE が position:absolute のため */
  isolation: isolate;                  /* ↑ 2026-09-14: 負レイヤーをこの箱に閉じ込める */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  margin: 50px 0 0 0;
  padding: 0;
}

/* ★★ 2026-09-15 修正: セレクタを .rb-voice__title → .rb-main .rb-voice__title。
 *   なぜ: 共通土台の `.rb-main h1, .rb-main h2, .rb-main h3 { line-height: 1.4 }`（246行）が
 *     詳細度 (0,1,1) でこのルール (0,1,0) に勝ち、line-height が 1.4（=50.4px）になっていた。
 *     現行は line-height:normal（36px の Zen Kaku Gothic New で 52px）で、見出しの箱が
 *     1.61px 低く、#voice-1 全体が 4幅とも現行より 1.6px 低かった。
 *   根拠: 現行 1440px 実測 … .rb-voice__title 相当 h=52 / font-family "Inter, Zen Kaku Gothic New" /
 *     line-height normal。ローカルは同じフォント・同じ文字幅(194.41px)で h=50.39。
 *     修正後 #voice-1 の高さは 4幅とも現行と一致（下の検証参照）。
 *   詳細度の上げ方は同ファイルの既存作法に合わせた（.rb-main .rb-mm__title 2388行 等）。
 *   型セレクタは足していない。 */
.rb-main .rb-voice__title {
  font-family: var(--s-font-f88553ee);
  font-size: 36px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: normal;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--rb-c-white);
  width: auto;
  height: auto;
}

/* 背面の装飾文字。opacity .1 / z-index -1 / top -29px（原本 Box + Text を1要素に畳んだ）。 */
.rb-voice__label {
  position: absolute;
  top: -29px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 0.1;
  font-family: var(--s-font-f88553ee);
  font-size: 100px;
  font-weight: 700;                    /* 欧文のみ・据え置き */
  line-height: 1.4;
  text-align: center;
  color: var(--rb-c-voice-label);
}

/* ---- リード文 ---- */
.rb-voice__lead-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.rb-voice__lead {
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: normal;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--rb-c-white);
  width: auto;
  height: auto;
}

/* ---- リスト共通（#scroll01-2 = PC用 / #scroll01-3 = SP用） ---- */
.rb-voice__list {
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 30px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 10px;
  list-style: none;
}

/* #scroll01-2 — base/@small/@tablet で表示。flex-wrap:wrap・はみ出しは切る。 */
.rb-voice__list--pc {
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* #scroll01-3 — @mobile/@mini で表示。base では非表示だが原本の宣言を残す。 */
.rb-voice__list--sp {
  display: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/* 「もっと見る」を押すまで3件目以降を隠す（原本 limit:2 ＋ list.loadMore の代替）。 */
.rb-voice__list--sp[data-rb-voice-expanded="false"] .rb-voice__card--extra {
  display: none;
}

/* ---- カード ---- */
.rb-voice__card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  flex: none;
  height: auto;
  padding: 20px 15px 30px;
  border-radius: 16px;
  background: var(--rb-c-voice-card-bg);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

/* ★★ 2026-09-15 修正: 33% / 30% → calc()。
 *   なぜ: データ0件のあいだは折り返しが起きず気づけなかったが、6件入れたところ
 *     1440px で **2列** になり、現行の **3列** と合わなかった（ul の高さ 527.73 / 現行 355.95）。
 *     33% は gap:30px を引いていないため 349.8px になり、3枚（1049.4px）が
 *     コンテンツ幅 1060px に入らず 2 列へ落ちていた。
 *   根拠: 現行サイトの computed width を実測（2026-09-15・Chrome）。
 *     #scroll01-2 のカード = calc(33% - 20.1px) 相当（used 329.688px / 1440px）
 *     #scroll01-3 のカード = calc(30% - 21px)（現行の computed value そのもの）
 *     20.1 = 30 × (1 - 0.33) ／ 21 = 30 × (1 - 0.30)。STUDIO が gap 分を引く式。
 *   結果: 1440px で 190 / 550 / 909 の3列・カード幅 329.69px と一致（下の @tablet も同様）。 */
.rb-voice__list--pc .rb-voice__card { width: calc(33% - 20.1px); }
.rb-voice__list--sp .rb-voice__card { width: calc(30% - 21px); }

/* :hover の拡大は原本では PC側リストのカードにだけ付いている。 */
.rb-voice__list--pc .rb-voice__card {
  transition: scale 800ms ease-in-out;
}
.rb-voice__list--pc .rb-voice__card:hover {
  scale: 1.05 1.05;
}

/* 原本ではカード全体が押下領域（<li> 自体が button）。<li> を button にはできないので内側に置く。
 *
 * ★★ 2026-09-15: 要素を <a href="/voice/"> → <button> に替えた（CEO指示でモーダルを開くため。
 *   原本の #scroll01-2 も <button class="link sd"> なので、タグとしても原本寄りになる）。
 *   セレクタ・宣言は据え置きで、button でも <a> と同じ見た目になるよう3行だけ足してある:
 *     appearance:none … Safari 等の既定ボタン装飾を消す（背景・枠は base.css の button リセット済み）。
 *     text-align:left … <a> は li から left を継承していたが、button の UA 既定は center。
 *                       子は全員 text-align を自分で持つので実害は無いが、継承元を <a> と揃える。
 *     font: inherit は base.css の button リセットで既に効いている（letter-spacing は子が各自指定）。
 *   根拠: 置換前後で 375/430/768/1440 の #voice-1 高さ・カード w/h が一致することを実測で確認。
 */
.rb-voice__card-link {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 8px;
  width: 100%;
  appearance: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.rb-voice__card-meta {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}

.rb-voice__card-person {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
}

.rb-voice__avatar {
  flex: none;
  width: 43px;
  height: 43px;
  border-radius: 64px;                 /* 原本のまま（実質は円） */
  object-fit: cover;
}

.rb-voice__name {
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--s-color-e89cf142);
  width: auto;
  height: auto;
  margin: 0;
}

/* 原本は <h2>（{{Bk5JoIzz.title}}）。見た目は 11px の補足ラベルなので span で出している。 */
.rb-voice__role {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 11px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: left;
  /* 設計ツリー実測 #082b34b3（ネイビー --o-c-navy の70%）。
     tokens.css に半透明版が無いため、0. で名前を付けた --rb-c-navy-70 を使う。 */
  color: var(--rb-c-navy-70);
}

.rb-voice__body {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: left;
  /* TODO(voice-1): 原本は CMS バインドの色 `{{color.value}}`（記事ごとに違う）。
     置換先フィールドが決まるまでは本文既定色で出す。 */
  color: var(--rb-c-body);
}

/* ---- 「もっと見る」（原本 loadMore・SP用リストの後ろ） ---- */
.rb-voice__more-wrap {
  display: none;                       /* base — SP用リストと同じ表示条件 */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
}

.rb-voice__more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 282px;
  height: 40px;
  margin: 4px;
  padding: 0 0 2px 0;
  border: 0;
  border-radius: 20px;
  background: var(--rb-c-voice-more-bg);
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.4;
  letter-spacing: 0em;
  text-align: center;
  color: var(--rb-c-body);
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
@media screen and (max-width: 1140px) {   /* @small */
  .rb-section--voice { display: flex; }
  .rb-voice__inner { display: flex; padding: 0 20px; }
  .rb-voice__head { display: flex; }
  .rb-voice__lead-wrap { display: flex; }
  .rb-voice__list--pc { display: flex; }
  .rb-voice__list--sp { display: none; }
  .rb-voice__more-wrap { display: none; }
}

@media screen and (max-width: 840px) {    /* @tablet */
  .rb-section--voice { display: flex; }
  .rb-voice__inner { display: flex; }
  .rb-voice__head { display: flex; }
  .rb-voice__lead-wrap { display: flex; }
  .rb-voice__list { gap: 15px; }
  .rb-voice__list--pc { display: flex; }
  .rb-voice__list--sp { display: none; }
  .rb-voice__card {
    align-items: center;
    align-content: center;
    justify-content: space-between;
    flex: none;
  }
  /* ★★ 2026-09-15 修正: 36% → calc(36% - 9.6px)。base と同じ理由（gap 分を引く）。
   *   9.6 = 15 × (1 - 0.36)。現行 #scroll01-3 の computed value は
   *   `calc(36% - 9.6px)` そのもの（2026-09-15 実測）。768px で used 245.27px になり現行と一致。 */
  .rb-voice__list--pc .rb-voice__card { width: calc(36% - 9.6px); }
  .rb-voice__list--sp .rb-voice__card { width: calc(36% - 9.6px); }
  .rb-voice__more-wrap { display: none; }
}

@media screen and (max-width: 540px) {    /* @mobile */
  /* 帯を1つ上のセクションへ 10px 食い込ませる（原本 margin:-10px 0 0 0）。
     原本は inner 相当ノードに付いているが、帯ごと動かさないと隙間が出るため
     outer（.rb-section--voice）に付け替えている。意図的な差分。 */
  .rb-section--voice {
    display: flex;
    margin: -10px 0 0 0;
  }
  .rb-voice__inner {
    display: flex;
    flex: none;
    height: auto;
    padding: 30px 20px;
  }
  .rb-voice__head { display: flex; }
  .rb-voice__lead-wrap { display: flex; }

  .rb-voice__list--pc { display: none; }
  .rb-voice__list--sp {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
  }

  .rb-voice__card {
    flex: none;
    height: auto;
  }
  .rb-voice__list--sp .rb-voice__card {
    width: 100%;
    gap: 20px;
    padding: 30px 20px 30px;
  }
  .rb-voice__card-meta {
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
  }
  .rb-voice__body {
    width: 100%;
    font-size: 28px;                   /* 原本どおり（SPだけ大きい） */
    letter-spacing: normal;
  }

  .rb-voice__more-wrap { display: flex; }
  .rb-voice__more { color: var(--rb-c-voice-label); }
}

@media screen and (max-width: 320px) {    /* @mini */
  .rb-section--voice { display: flex; }
  .rb-voice__inner { display: flex; }
  .rb-voice__head { display: flex; }
  .rb-voice__lead-wrap { display: flex; }
  .rb-voice__list--pc { display: none; }
  .rb-voice__list--sp { display: flex; }
  .rb-voice__card-meta {
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
  }
  .rb-voice__body {
    padding: 1px;
    font-size: 18px;
  }
  .rb-voice__more-wrap { display: flex; }
}


/* ==================================================================
 * 4-5. S5 #point1-2 第1回開催報告（設計ツリー index 4）★決定1で復活
 * ------------------------------------------------------------------
 * 現行は全BP display:none。CEO決定1（B案）により復活・要実装（222字）。
 * 帯 var(--s-color-d88ce62e)（オレンジのグラデ）/ inner 1110px /
 * padding base 30px 0px / @mobile 50px 20px 30px / gap 30px /
 * justify-content: space-between。
 * 冒頭: 「第1回Re:Blueのご参加<br>」「ありがとうございました！<br>」
 *       ※末尾の <br> は原文どおり保持する
 * 画像: s-896x1280_v-fms_webp_2085d7b9-….webp
 * ★ 復活させる以上、display は全BPで flex を明示すること（none を引きずらない）。
 * TODO(E-4): 掲載している実績値の再確認が必要（正本の指摘事項）。
 * ================================================================== */
/* ★ 原本は全BP display:none。CEO決定1（B案）で復活させるため、
 *   display は4段すべてで flex を明示する（none を引きずらない）。
 * ★ 原本 @mobile の `margin: -100px 0 0 0` は**適用しない**。
 *   非表示前提のまま残っていた値で、そのまま当てるとオレンジの帯が
 *   上の #voice-1 に100px被さる。point1-2.php の TODO と対。
 */

/* ---- 外枠（背景の帯・全幅） ---- */
.rb-point12 {
  display: flex;                       /* base（>1140px）★復活 */
  background: var(--s-color-d88ce62e); /* オレンジのグラデ */
}

/* ---- 内側（設計ツリーの width:1110px / padding / gap を持つ） ---- */
.rb-point12__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  gap: 30px;
  height: auto;
  padding: 30px 0;
}

/* ---- 見出し2本（設計ツリー 4.0） ---- */
.rb-point12__head {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 40px;
  /* 原本の実測値をそのまま。透明→透明なので描画には出ない（STUDIO側の設定の名残）。 */
  background: linear-gradient(90deg, transparent, transparent);
}

.rb-point12__head-1,
.rb-point12__head-2 {
  font-family: var(--s-font-f88553ee);
  /* 実測600。Zen Kaku Gothic New に600が無く合成太字になるため使わない（CEO指示）。
     CSSのフォントマッチング上も600は700へ寄るので、実描画と同じ700を明示する。 */
  font-weight: 700;
  color: var(--rb-c-white);
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  width: auto;
  height: auto;
  margin: 0;
}

.rb-point12__head-1 { font-size: 28px; }
.rb-point12__head-2 { font-size: 48px; }

/* ---- 本文ブロック（設計ツリー 4.1） ---- */
.rb-point12__body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  flex: none;
  gap: 30px;
  width: 70%;
  padding: 0;
  border-radius: 12px;
}

.rb-point12__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 100%;
  height: auto;
  padding: 0;
  border-radius: 12px;
}

/* 第1回の様子。原本は height 固定のため object-fit:cover で受ける。 */
.rb-point12__photo {
  display: block;
  flex: none;
  width: 40%;
  height: 350px;
  border-radius: 12px;
  object-fit: cover;
}

.rb-point12__text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-around;
  flex: none;
  gap: 20px;
  height: 350px;
  padding: 0;
}

.rb-point12__lead-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 10px;
  width: auto;
  padding: 0;
}

.rb-point12__lead {
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  color: var(--rb-c-white);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: left;
  width: auto;
  height: auto;
}

/* ---- CTA（設計ツリー 4.1.0.1.1）----
 * 表示条件は原本どおり base:flex / @small:flex / @tablet:none / @mobile:none / @mini:none。
 * 840px 以下では footerbar.php（S17）の固定バーが同じLINEへ誘導する。
 */
.rb-point12__cta {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin: 0;
  padding: 10px 20px;
  border-radius: 32px;
  background: var(--rb-c-white);
  text-decoration: none;
}

/* 原本は color にグラデーショントークン（--s-color-d88ce62e）を指定している。
   CSS的には color にグラデーションは載らないため、tokens.css の指示どおり
   background-clip:text ＋ text-fill-color:transparent で文字に載せる。
   color には同じグラデの終端色トークン（--s-color-d5a859b8 = #e4362c）を
   フォールバックとして置く（新しい色は作っていない）。 */
.rb-point12__cta-label {
  font-family: var(--s-font-f88553ee);
  font-size: 28px;
  font-weight: 700;                    /* 実測700・据え置き */
  color: var(--s-color-d5a859b8);
  background-image: var(--s-color-d88ce62e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  text-shadow: none;
  width: auto;
  height: auto;
  margin: 0;
}

@media screen and (max-width: 1140px) {
  /* @small */
  .rb-point12 { display: flex; }
  .rb-point12__inner { display: flex; }
  .rb-point12__head { display: flex; }
  .rb-point12__body { display: flex; }
  .rb-point12__row { display: flex; }
  .rb-point12__photo { display: block; }
  .rb-point12__text { display: flex; }
  .rb-point12__lead-wrap { display: flex; }
  .rb-point12__cta { display: flex; }
  .rb-point12__cta-label { font-size: 20px; }
}

@media screen and (max-width: 840px) {
  /* @tablet */
  .rb-point12 { display: flex; }
  .rb-point12__inner { display: flex; }
  .rb-point12__head {
    display: flex;
    padding: 20px 40px;
  }
  .rb-point12__body {
    display: flex;
    flex: none;
    width: 90%;
  }
  .rb-point12__row { display: flex; }
  .rb-point12__photo {
    display: block;
    flex: none;
    height: 200px;
  }
  .rb-point12__text {
    display: flex;
    flex: none;
    height: 200px;
  }
  .rb-point12__lead-wrap { display: flex; }
  .rb-point12__lead { font-size: 13px; }
  .rb-point12__cta { display: none; }   /* 原本どおり非表示 */
  .rb-point12__cta-label { font-size: 20px; }
}

@media screen and (max-width: 540px) {
  /* @mobile */
  .rb-point12 { display: flex; }
  .rb-point12__inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 50px 20px 30px;
    /* 原本の margin:-100px 0 0 0 は上記の理由で適用しない。 */
  }
  .rb-point12__head {
    display: flex;
    padding: 10px 0;
  }
  .rb-point12__head-1,
  .rb-point12__head-2 { font-size: 20px; }
  .rb-point12__body {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
  }
  .rb-point12__row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: none;
    gap: 10px;
    width: 100%;
    padding: 0 10px;
  }
  .rb-point12__photo {
    display: block;
    flex: none;
    width: 100%;
    height: 300px;
  }
  .rb-point12__text {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 10px;
    width: 100%;
    height: auto;
  }
  .rb-point12__lead-wrap {
    display: flex;
    flex: none;
    gap: 8px;
    width: 100%;
  }
  .rb-point12__lead { font-size: 15px; }
  .rb-point12__cta {
    display: none;                      /* 原本どおり非表示 */
    flex: none;
    width: 100%;
    margin: 20px 0 0 0;
    border-radius: 32px;
    background: var(--rb-c-white);
    overflow: hidden;
  }
  .rb-point12__cta-label {
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 48px;
    text-shadow: none;
  }
}

@media screen and (max-width: 320px) {
  /* @mini */
  .rb-point12 { display: flex; }
  .rb-point12__inner { display: flex; }
  .rb-point12__head {
    display: flex;
    margin: 0;
    padding: 10px;
  }
  .rb-point12__head-1,
  .rb-point12__head-2 { font-size: 20px; }
  .rb-point12__body { display: flex; }
  .rb-point12__row { display: flex; }
  .rb-point12__photo {
    display: block;
    flex: none;
    height: 250px;
  }
  .rb-point12__text { display: flex; }
  .rb-point12__lead-wrap { display: flex; }
  .rb-point12__cta { display: none; }   /* 原本どおり非表示 */
  .rb-point12__cta-label { font-size: 18px; }
}


/* ==================================================================
 * 4-6. S6 #concept（設計ツリー index 5 の第1子 / h=925px）
 * ------------------------------------------------------------------
 * ★ width:100% ＝ inner 無し（.rb-section--flush）。padding は要素自身に
 *   base 50px 92px / @small 97px 92px 90px / @tablet 71px 50px / @mobile 44px 30px。
 * 帯 var(--s-color-2fbd0fb0)。&appear で rgba(248,247,246,0) からフェードするが
 * 出現アニメは再現しない（2章の方針）。
 * 中身は幅70%のグループ（実測 w=869 / gap 30px）:
 *   h2「CONCEPT」… base では display 指定なし・@mobile/@mini で flex
 *   h2「大切な相手と出会う。<br>1泊2日の青春の旅。」
 *   本文（長文・逐語）
 * 親ラッパは page-reblue.php が出す <section class="rb-concept-wrap">。
 * ================================================================== */

/* 親ラッパ（背景も padding も持たない素の入れ子。実測 h=1718 = 925 + 794）。 */
.rb-concept-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
@media screen and (max-width: 1140px) { .rb-concept-wrap { display: flex; } }
@media screen and (max-width:  840px) { .rb-concept-wrap { display: flex; } }
@media screen and (max-width:  540px) { .rb-concept-wrap { display: flex; } }
@media screen and (max-width:  320px) { .rb-concept-wrap { display: flex; } }

/* ------------------------------------------------------------------
 * width:100% ＝ inner 無し（.rb-section--flush）。padding は要素自身に付く。
 * 帯は viewport 全幅。&appear のフェードは再現しない（2章の方針）。
 * 地色は #points と同じ扱い（2026-09-15 コントラスト調整・.rb-points 参照）。
 * ------------------------------------------------------------------ */
.rb-concept {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 50px 92px 50px 92px;
  background: var(--o-c-sky-d);
}

/* 中身のグループ（実測 w=869 ＝ 1256 の 70%）。 */
.rb-concept__group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 30px;
  width: 70%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* 英字ラベル。原本のタグは <h2>（見出し階層としては冗長だが構造を踏襲）。
   TODO(S6): base〜@small で 144px は 70% 幅を超えることがある。原本も同条件だが、
   実機で「CONCEPT」が切れていないか目視確認すること。 */
.rb-concept__label {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 144px;
  font-weight: 700;                    /* 欧文のみ・据え置き */
  line-height: 1.4;
  text-align: center;
  color: var(--rb-c-white);
}

.rb-concept__title {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 40px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-align: center;
  text-shadow: none;
  color: var(--rb-c-white);
}

.rb-concept__body {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.41;
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--rb-c-white);
}

/* ------------------------------------------------------------------ */
@media screen and (max-width: 1140px) {   /* @small */
  .rb-concept {
    display: flex;
    flex: none;
    height: auto;
    padding: 97px 92px 90px 92px;
  }
  .rb-concept__group { display: flex; }
  .rb-concept__label { display: block; }
  .rb-concept__title { display: block; }
  .rb-concept__body  { display: block; }
}

@media screen and (max-width: 840px) {    /* @tablet */
  .rb-concept {
    display: flex;
    flex: none;
    height: auto;
    padding: 71px 50px;
  }
  .rb-concept__group {
    display: flex;
    flex: none;
    width: auto;
    margin: 0;
  }
  .rb-concept__label { display: block; font-size: 144px; }
  .rb-concept__title { display: block; flex: none; font-size: 32px; }
  .rb-concept__body  { display: block; }
}

@media screen and (max-width: 540px) {    /* @mobile */
  .rb-concept {
    display: flex;
    padding: 44px 30px;
  }
  .rb-concept__group {
    display: flex;
    flex: none;
    gap: 10px;
    width: 100%;
  }
  .rb-concept__label {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: 64px;
    text-align: center;
  }
  .rb-concept__title {
    display: block;
    flex: none;
    width: 100%;
    font-size: 20px;
    letter-spacing: 0.15em;
  }
  .rb-concept__body {
    display: block;
    padding: 0;
    font-size: 13px;
  }
}

@media screen and (max-width: 320px) {    /* @mini */
  .rb-concept {
    display: flex;
    flex: none;
    height: auto;
  }
  .rb-concept__group { display: flex; }
  .rb-concept__label {
    display: flex;
    font-size: 50px;
  }
  .rb-concept__title {
    display: block;
    width: 100%;
    font-size: 20px;
  }
  .rb-concept__body { display: block; }
}


/* ==================================================================
 * 4-7. S7 心情セクション（設計ツリー index 5 の第2子 / ID無し / h=794px）
 * ------------------------------------------------------------------
 * ★ ベースラインの「#concept と #messegemovie の間の約793pxのID無しセクション」＝これ。
 *   specs/A_core.md 2-2 S7「心情セクション」。実測 794px。
 * 帯 var(--rb-c-feeling-bg) = linear-gradient(90deg, #0f5290ff, #071d44ff) 全幅 /
 * inner 1080px / padding 50px 0px / gap 50px / align-items:center /
 * justify-content: flex-start。
 * 中身（上から）:
 *   1. h3「僕らに青春なんてない。<br>ずっとそう思ってた。」
 *      32px / 実測500 → **700** / #ffffff
 *   2. 画像2枚（横並び・gap 50px・各 320×420）
 *        s-1200x1600_v-fms_webp_ddc0bd75-….webp → studio-modal://reblue/01
 *        s-1200x1600_v-fms_webp_7b50e1d9-….webp → studio-modal://reblue/02
 *      各画像の上に 60×60 の円形 Box（position:absolute / border-radius:50%）＋
 *      Material アイコン `keyboard_arrow_down` 24px #ffffff が重なる。
 *      1枚目は left:15px、2枚目は left:auto。
 *   3. p「僕らの恋愛はいつだって、<br>苦しさや寂しさと隣り合わせ。<br>
 *        そんなふうに思っていませんか？」20px / 実測400 → **500** / #ffffff
 * TODO: studio-modal:// はそのまま移植できない。中身は抽出データに無く未確認。
 *   Lightbox 化するか、リンクを外すかは要CEO判断（specs 2-2 S7）。
 * ================================================================== */
/* ------------------------------------------------------------------
 * 帯（全幅・グラデ背景）。設計ツリーの Section ノードの background。
 * ------------------------------------------------------------------ */
.rb-section--feeling {
  display: flex;
  background: var(--rb-c-feeling-bg);
}

/* inner ＝ 設計ツリーの Section ノード本体（width 1080px / padding 50px 0 / gap 50px）。 */
.rb-feeling__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 50px;
  height: auto;
  padding: 50px 0;
}

/* ---- 見出し ---- */
.rb-feeling__head {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 1;
  gap: 20px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.rb-feeling__title {
  width: auto;
  height: auto;
  margin: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 32px;
  font-weight: 700;                    /* 実測500 → CEO指示で1段上げ */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--rb-c-white);
}

/* ---- 画像2枚（横並び・gap 50px・各 320×420） ---- */
.rb-feeling__figures {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 50px;
  padding: 0;
}

.rb-feeling__figure {
  position: relative;                  /* 円形バッジが position:absolute のため */
  flex: none;
  width: 320px;
  height: 420px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.rb-feeling__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 60×60 の円形ボーダー＋下向きシェブロン。原本は Material `keyboard_arrow_down`。
   :hover で下へ 30px 動く演出（in:hover / 600ms）が付いているが、
   移行版では画像がリンクではない（studio-modal:// が未解決）ため再現しない。 */
.rb-feeling__badge {
  position: absolute;
  top: auto;
  bottom: 15px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  margin: 0;
  border: 1px solid var(--rb-c-white);
  border-radius: 50%;
  background: transparent;
  backdrop-filter: blur(2px);
  color: var(--rb-c-white);
}

.rb-feeling__figure--badge-left  .rb-feeling__badge { left: 15px; right: auto; }
.rb-feeling__figure--badge-right .rb-feeling__badge { left: auto; right: 15px; }

/* 原本の Icon は fontSize 24px。SVG に置き換えたので実寸で指定する。 */
.rb-feeling__badge-icon {
  width: 24px;
  height: 24px;
}

/* ---- 締めコピー ---- */
.rb-feeling__text {
  width: auto;
  height: auto;
  margin: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--rb-c-white);
}

/* ------------------------------------------------------------------ */
@media screen and (max-width: 1140px) {   /* @small */
  .rb-section--feeling { display: flex; }
  .rb-feeling__inner { display: flex; }
  .rb-feeling__head { display: flex; }
  .rb-feeling__figures { display: flex; }
  .rb-feeling__badge { display: flex; }
}

@media screen and (max-width: 840px) {    /* @tablet */
  .rb-section--feeling { display: flex; }
  .rb-feeling__inner { display: flex; }
  .rb-feeling__head { display: flex; }
  .rb-feeling__figures { display: flex; }
  /* ★ 意図的な差分 — 原本は flex:none / 320px 固定のままなので、
     viewport 541〜690px で 320+50+320=690px が親を超えて横スクロールが出る。
     素のCSSではそれが実害になるため、2枚が必ず収まる上限を入れる。
     840px では calc(50% - 25px) = 約395px > 320px なので見た目は変わらない。 */
  .rb-feeling__figure { max-width: calc(50% - 25px); }
  .rb-feeling__badge { display: flex; }
}

@media screen and (max-width: 540px) {    /* @mobile */
  .rb-section--feeling { display: flex; }
  .rb-feeling__inner { display: flex; }
  .rb-feeling__head { display: flex; }
  .rb-feeling__title { font-size: 20px; }
  .rb-feeling__figures {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .rb-feeling__figure { max-width: 100%; }
  .rb-feeling__badge { display: flex; }
}

@media screen and (max-width: 320px) {    /* @mini */
  .rb-section--feeling { display: flex; }
  .rb-feeling__inner { display: flex; }
  .rb-feeling__head { display: flex; }
  .rb-feeling__title { font-size: 20px; }
  .rb-feeling__figures { display: flex; flex-direction: column; }
  .rb-feeling__figure { max-width: 100%; }
  .rb-feeling__badge { display: flex; }
}


/* ==================================================================
 * 4-8. S8 #messegemovie（設計ツリー index 6 / h=633px）
 * ------------------------------------------------------------------
 * ★ id の綴りは原文のスペルミス。アンカー互換のため直さない。
 * 帯 var(--s-color-7389c451) 全幅 / inner 1110px（@small 960px）/
 * padding base 50px 0px / @tablet 30px 30px / @mobile・@mini 30px 20px /
 * flex row → @mobile column（gap 10px）/ justify-content: space-between。
 * 中身: h2「主催者からの<br>メッセージ」／
 *       本文「今回のイベントにかける僕らの想いを<br>動画にしました！<br>
 *             ぜひ、ご覧ください！<br>（右下のボタンより全画面再生できます）」／
 *       画像 s-898x1596_v-fms_webp_7cfeb779-….webp ／
 *       Vimeo iframe（reblue__04.html・1075085718?h=8a86c84452・padding 177.78% = 9:16）
 * ★ Canva 埋め込み reblue__03.html は全BP非表示。実装しない（TODO E-10・要CEO確認）。
 * ================================================================== */
/* ---- 帯（viewport全幅・背景だけ） ---------------------------------- */
.rb-mm { background: var(--s-color-7389c451); }

/* ---- inner（設計ツリーの width / padding / flex を持つ）------------
 * width 1110px（@small 960px）は .rb-section__inner--1110 /
 * --1110-small960 の2クラスで当たる（骨格側）。ここでは並びだけ。 */
.rb-mm__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  height: auto;
  padding: 50px 0;
}

/* ---- 左：見出し＋本文（設計ツリー width 40%）---------------------- */
.rb-mm__text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  width: 40%;
  gap: 20px;
  padding: 0;
}

/* 設計ツリーの Box。style に height:160px があるが **効いていない**。
 * flex:1（= flex-basis:0%）の項目で、親 .rb-mm__text の高さが auto のため
 * main-size は基準0＋コンテンツ寄与で決まり、height 指定は使われない。
 * 本番実測もそのとおり: 1440px で 179.2px（64px×1.4×2行）／390px で 61.6px。
 * height:160px を素のCSSに書くと本番と違う高さになるので **書かない**。 */
.rb-mm__headwrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 1 1 0%;
  min-height: 0;
  width: auto;
  margin: 0;
  background: transparent;
}

.rb-main .rb-mm__title {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 64px;
  font-weight: 700;           /* 実測700。底上げ対象外（細くない） */
  line-height: 1.4;
  color: var(--rb-c-white);
  text-align: left;
  width: auto;
  height: auto;
}

.rb-main .rb-mm__lead {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 500;           /* ★実測400 → 500（CEO指示の底上げ） */
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--rb-c-white);
  text-align: left;
  width: auto;
  height: auto;
}

/* ---- 右：動画まわり（設計ツリー width 60%）------------------------ */
.rb-mm__media {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 60%;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* 画像＋Vimeo の重ね箱。img が高さを決め、iframe を absolute で上に載せる。
 * 実測 1440px / 390px とも 300 × 533.2px（898:1596）。 */
.rb-mm__movie {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 300px;
  gap: 20px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}

.rb-mm__poster {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
}

.rb-mm__frame {
  display: block;
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

.rb-mm__frame iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- @small（1140以下）: 設計ツリーは inner の width 960px だけ。
 *      並びは base のまま。display は継承に頼らず全段で明示する。 ---- */
@media screen and (max-width: 1140px) {
  .rb-mm__inner,
  .rb-mm__text,
  .rb-mm__headwrap,
  .rb-mm__media,
  .rb-mm__movie { display: flex; }
  .rb-main .rb-mm__title,
  .rb-main .rb-mm__lead,
  .rb-mm__poster,
  .rb-mm__frame,
  .rb-mm__frame iframe { display: block; }
  .rb-mm__inner { flex-direction: row; flex: none; }
}

/* ---- @tablet（840以下）---- */
@media screen and (max-width: 840px) {
  .rb-mm__inner,
  .rb-mm__text,
  .rb-mm__headwrap,
  .rb-mm__media,
  .rb-mm__movie { display: flex; }
  .rb-main .rb-mm__title,
  .rb-main .rb-mm__lead,
  .rb-mm__poster,
  .rb-mm__frame,
  .rb-mm__frame iframe { display: block; }

  .rb-mm__inner { flex-direction: row; padding: 30px 30px; }
  .rb-mm__text  { flex: none; width: 55%; }
  .rb-mm__media { flex: none; width: 45%; }
  .rb-main .rb-mm__title { font-size: 48px; }
}

/* ---- @mobile（540以下）---- */
@media screen and (max-width: 540px) {
  .rb-mm__inner,
  .rb-mm__text,
  .rb-mm__headwrap,
  .rb-mm__media,
  .rb-mm__movie { display: flex; }
  .rb-main .rb-mm__title,
  .rb-main .rb-mm__lead,
  .rb-mm__poster,
  .rb-mm__frame,
  .rb-mm__frame iframe { display: block; }

  .rb-mm__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    flex: none;
    gap: 10px;
    height: auto;
    padding: 30px 20px;
  }
  .rb-mm__text {
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    flex: none;
    width: 300px;
    gap: 5px;
    padding: 0;
  }
  .rb-mm__media {
    /* 設計ツリー @mobile は flex:"1"（= 1 1 0%）。min-height:auto が効くので
       basis 0% でも中身（movie 533px）の高さは潰れない。実測で確認済み。 */
    flex: 1 1 0%;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
  }
  .rb-mm__movie { flex: none; flex-direction: column; width: 300px; }
  .rb-main .rb-mm__title { font-size: 28px; line-height: 1.1; }
  .rb-main .rb-mm__lead  { font-size: 13px; }
}

/* ---- @mini（320以下）: 設計ツリーの差分は無い。display だけ明示。---- */
@media screen and (max-width: 320px) {
  .rb-mm__inner,
  .rb-mm__text,
  .rb-mm__headwrap,
  .rb-mm__media,
  .rb-mm__movie { display: flex; }
  .rb-main .rb-mm__title,
  .rb-main .rb-mm__lead,
  .rb-mm__poster,
  .rb-mm__frame,
  .rb-mm__frame iframe { display: block; }
  .rb-mm__inner { flex-direction: column; padding: 30px 20px; }
}



/* ==================================================================
 * 4-9. S9 #casestory（設計ツリー index 7 / h=720px 固定）
 * ------------------------------------------------------------------
 * 帯 var(--s-color-7389c451) 全幅 / inner 1110px /
 * padding base 0px / @tablet 0px 30px / @mobile 30px 0px /
 * flex row → @mobile column / justify-content: flex-end（@small center）/
 * height: base 720px → @mobile auto。
 * 左（35%・gap 20px）: h2「CASE<br>STORY」64px/700 ／
 *   h3「これは、<br>僕らの物語。」32px/実測500 → **700** ／
 *   p「写真やストーリーはイメージです。<br>でも、こんな物語だって、<br>
 *      あなたにきっとある。」16px/実測400 → **500**
 * 右: ★ ベースラインの「#clbox が7個・各373px・top が 4974〜5297 に重なる」は
 *   **絶対配置ではない**。帯（.rb-cs__carousel）を rotate:-10deg で傾け、カードを
 *   横並び（ピッチ 280+margin20+gap10 = 310px）にした副作用で、1枚進むごとに
 *   310 × sin10° ≒ 54px 上がる（-54 × 6 = -323 ＝ 4974〜5297 の幅と一致）。
 *   本番DOMの実測で確定済み。top を7回ハードコードしない。
 *   ローカル検証（1440px）: カバー7枚が 280×373px・top 829→506（差 -54 ×6 = -323）で一致。
 *   ※ 原本は id="clbox" が7要素に重複＝HTML的に不正。実装は先頭1枚だけに付け、
 *     残り6枚は class="rb-cs__cover" で当てる（casestory.php の
 *     $rb_cs_duplicate_clbox_id で完全再現に切替可）。#clbox を指す CSS/JS/
 *     アンカーは現行サイトに無い（specs の実在id一覧に載るだけ）ため実害は無い。
 * 画像12枚: s-1200x1600_… 3b75a187 / 1459d3b7 / 042457d9 / 476e95b5 / bb5b9cc2 /
 *   04de9ea7 / 94556804 / f564b8e0 / e0e39851 / 7eb86dac / c6d6cb6a / 8e84df0e
 * ★ 空 iframe reblue__05.html（<iframe src="">）は削除。実装しない。
 * ================================================================== */
/* ---- 帯（viewport全幅・背景だけ） ---------------------------------- */
.rb-cs { background: var(--s-color-7389c451); }

/* ---- inner（設計ツリーの width 1110px / height 720px / row）-------- */
.rb-cs__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  height: 720px;
  padding: 0;
}

/* ---- 左：CASE STORY のテキスト（設計ツリー width 35%）------------- */
.rb-cs__text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  width: 35%;
  gap: 20px;
  padding: 0;
}

/* 設計ツリーの Box ×2。style の height:160px は **効いていない**
 * （flex:1 = flex-basis:0% ＋ 親の高さ auto。理由は 4-8 の同型コメント参照）。
 * 本番実測 390px: ラベル 105.6px / 見出し 78.4px。height:160px は書かない。 */
.rb-cs__labelwrap,
.rb-cs__headwrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 1 1 0%;
  min-height: 0;
  width: auto;
  margin: 0;
  background: transparent;
}

.rb-main .rb-cs__label {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 64px;
  font-weight: 700;           /* 実測700。底上げ対象外 */
  line-height: 1.4;
  color: var(--rb-c-white);
  text-align: left;
  width: auto;
  height: auto;
}

.rb-main .rb-cs__head {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 32px;
  font-weight: 700;           /* ★実測500 → 700（CEO指示の底上げ） */
  line-height: 1.4;
  color: var(--rb-c-white);
  text-align: left;
  width: auto;
  height: auto;
}

.rb-main .rb-cs__note {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 500;           /* ★実測400 → 500（CEO指示の底上げ） */
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--rb-c-white);
  text-align: left;
  width: auto;
  height: auto;
}

/* ---- 右：カルーセルの舞台（設計ツリー width 65%・overflow hidden）--
 * ここで切り落とすから、傾いた帯が inner の外へ出ない。 */
.rb-cs__stage {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  flex: none;
  width: 65%;
  padding: 0;
  overflow: hidden;
}

/* ★ 固定幅ガードの打ち消し（詳細度を合わせる）------------------------
 * 骨格の rb-fixed-width-guard は `.rb-main [class*="rb-"] { max-width:100% }`＝
 * 詳細度 (0,2,0)。単独クラス (0,1,0) の `max-width:none` では**負ける**。
 * 傾いた帯とカードは「親より広いのが正しい」数少ない例外なので、
 * ここだけ同じ詳細度まで上げて打ち消す（同点なら後勝ち＝この行が効く）。
 * これを消すと帯が stage 幅（721.5px）に潰れ、カードが 70px まで縮む。
 * ------------------------------------------------------------------ */
.rb-main .rb-cs__carousel,
.rb-main .rb-cs__track,
.rb-main .rb-cs__card,
.rb-main .rb-cs__nav {
  max-width: none;
}

/* ---- 傾いた帯（本番実測 921.5 × 640px / rotate:-10deg）------------
 * width は calc(100% + 200px)。設計ツリーは width:100% ＋ margin:0 -100px だが、
 * 本番の実測値は 721.5(=stageの内幅) + 200 = 921.5px で、左右の負マージンぶん
 * 実際に広がっている。素のCSSでは calc で書かないと 721.5px のままになる。
 * ★ max-width:none は骨格の rb-fixed-width-guard（max-width:100%）の打ち消し。
 *   これを外すと帯が 721.5px に潰れてカードが2枚しか出なくなる。
 * ★ position:relative は前後ボタン（.rb-cs__nav の absolute）の基準。 */
.rb-cs__carousel {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: calc(100% + 200px);
  max-width: none;
  height: 640px;
  margin: 0 -100px;
  padding: 183px;
  overflow: hidden;
  rotate: -10deg;
}

/* カードの並び。設計ツリーでは gap:10px が帯（.rb-cs__carousel）に付いていたが、
 * JSで横スライドさせるため1枚かませた track 側に移している。
 * 位置は本番と一致する（カード左端 = padding-left 183 + margin-left 10 = 193px、
 * カード上端 = (640 - (360+20))/2 + 10 = 140px）。 */
.rb-cs__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: max-content;
  max-width: none;            /* ★ 固定幅ガードの打ち消し（帯より広いのが正しい） */
  gap: 10px;
  will-change: transform;
}

/* カード1枚。rotate:+10deg で帯の -10deg を打ち消して立てる。
 * rotate（独立プロパティ）は transform とは別枠なので、
 * JS が track に掛ける translateX と衝突しない。 */
.rb-cs__card {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex: none;
  width: 280px;
  max-width: none;
  height: 360px;
  margin: 10px;
  padding: 0;
  background: var(--rb-c-white);
  border-radius: 0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);   /* 設計ツリー実測値 */
  overflow: hidden;
  outline-offset: -4px;
  rotate: 10deg;
  will-change: transform;                        /* カードに重ね順（stacking context）を作る */
}

/* 表紙画像。設計ツリー実測 z-index:-1。カードが rotate / will-change で
 * stacking context を作るので、カードの背景より前・キャプションより後ろに入る。 */
.rb-cs__cover {
  display: block;
  position: relative;
  z-index: -1;
  flex: none;
  width: 100%;
  height: auto;
  padding: 0;
  border-radius: 0;
  filter: brightness(111%) saturate(100%);       /* 設計ツリー実測値 */
}

/* キャプション。カードは flex row で、直前の img が幅280px（=100%）を使い切るため
 * このブロックは img の右隣へ押し出され、カードの overflow:hidden で切れて見えない。
 * 本番も同じ（実測でカード左端 +280px の位置にあった）。原本どおり DOM には残す。 */
.rb-cs__caption {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-end;
  flex: none;
  width: 100%;
}

.rb-main .rb-cs__date {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 500;           /* ★実測（指定なし＝400） → 500 */
  color: var(--rb-c-white);
  margin: 0 0 10px 0;
  text-align: center;
}

.rb-main .rb-cs__cardtitle {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 40px;
  font-style: normal;
  font-weight: 900;           /* 実測900。底上げ対象外 */
  line-height: 1.2;
  color: var(--rb-c-white);
  margin: 0 0 11px 0;
  text-align: left;
}

.rb-main .rb-cs__desc {
  display: block;
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 500;           /* ★実測（指定なし＝400） → 500 */
  line-height: 1.5;
  color: var(--rb-c-white);
  flex: none;
  height: auto;
  text-align: left;
}

/* ---- 前後ボタン ---------------------------------------------------
 * 設計ツリー上 slot="before" のノードは2組あるが、本番で描画されるのは
 * グラデ版のみ（実測でボタンは2個だけ）。白版は実装しない。
 * 帯の中に absolute で置き、帯の -10deg を rotate:10deg で打ち消して水平に見せる。
 * 通常時の水色グラデは tokens.css に一致するトークンが無い実測直値
 * （--s-color-4b9f91ca は終端が #15eefbff、--s-color-fb80e04b は #16d7e6ff で別値）。
 * 他セクションへ漏らさないよう .rb-cs__nav スコープでだけ名前を付ける。
 * :hover のオレンジは tokens.css --s-color-d88ce62e と完全一致するのでトークンを使う。 */
.rb-cs__nav {
  --rb-cs-nav-bg:       linear-gradient(90deg, #369bdcff, #15fbc9ff);
  --rb-cs-nav-bg-hover: var(--s-color-d88ce62e);

  position: absolute;
  left: 130px;
  right: auto;
  bottom: 117px;
  top: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  width: 347px;
  max-width: none;
  height: 88px;
  padding: 21px;
  rotate: 10deg;
  z-index: 3;
}

.rb-cs__navbtn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rb-cs-nav-bg);
  color: var(--rb-c-white);
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rb-cs__navbtn--prev {
  margin: 0 24px 0 0;
  -webkit-backdrop-filter: brightness(120%) blur(50px);
  backdrop-filter: brightness(120%) blur(50px);
}

.rb-cs__navbtn--next { margin: 0 0 0 24px; }

.rb-cs__navbtn:hover { background: var(--rb-cs-nav-bg-hover); }

/* 原本にフォーカス表示は無いが、キーボード操作できるボタンなので足している
 * （設計ツリーの item には :focus-visible の outline 指定がある＝方針は同じ）。 */
.rb-cs__navbtn:focus-visible {
  outline: 2px solid var(--rb-c-white);
  outline-offset: 2px;
}

/* 原本は Material Symbols を font-size:24px で出していた。
 * ここは SVGスプライト（#fa-chevron-left / #fa-chevron-right）なので
 * .o-fa の width/height:1em に合わせて font-size で大きさを決める。 */
.rb-cs__navicon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* ---- @small（1140以下）---- */
@media screen and (max-width: 1140px) {
  .rb-cs__inner,
  .rb-cs__text,
  .rb-cs__labelwrap,
  .rb-cs__headwrap,
  .rb-cs__stage,
  .rb-cs__carousel,
  .rb-cs__track,
  .rb-cs__card,
  .rb-cs__caption,
  .rb-cs__nav,
  .rb-cs__navbtn { display: flex; }
  .rb-main .rb-cs__label,
  .rb-main .rb-cs__head,
  .rb-main .rb-cs__note,
  .rb-cs__cover,
  .rb-main .rb-cs__date,
  .rb-main .rb-cs__cardtitle,
  .rb-main .rb-cs__desc { display: block; }

  .rb-cs__inner {
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .rb-cs__stage { flex: none; width: 55%; }
}

/* ---- @tablet（840以下）---- */
@media screen and (max-width: 840px) {
  .rb-cs__inner,
  .rb-cs__text,
  .rb-cs__labelwrap,
  .rb-cs__headwrap,
  .rb-cs__stage,
  .rb-cs__carousel,
  .rb-cs__track,
  .rb-cs__card,
  .rb-cs__caption,
  .rb-cs__nav,
  .rb-cs__navbtn { display: flex; }
  .rb-main .rb-cs__label,
  .rb-main .rb-cs__head,
  .rb-main .rb-cs__note,
  .rb-cs__cover,
  .rb-main .rb-cs__date,
  .rb-main .rb-cs__cardtitle,
  .rb-main .rb-cs__desc { display: block; }

  .rb-cs__inner    { flex-direction: row; padding: 0 30px; }
  .rb-cs__text     { flex: none; width: 45%; }
  .rb-cs__carousel { padding: 140px; }
  .rb-cs__nav      { left: 84px; right: auto; bottom: 120px; top: auto; }
  .rb-main .rb-cs__label    { font-size: 48px; }
  .rb-main .rb-cs__head     { font-size: 28px; }
}

/* ---- @mobile（540以下）----
 * ★ 設計ツリーの item には @mobile で width:100% / height:100% があるが、
 *   本番の実測は 280 × 373.3px（＝base の幅のまま・高さは画像なり）だった。
 *   STUDIO 側で当たっていない指定なので、本番に合わせて height だけ auto にする。 */
@media screen and (max-width: 540px) {
  .rb-cs__inner,
  .rb-cs__text,
  .rb-cs__labelwrap,
  .rb-cs__headwrap,
  .rb-cs__stage,
  .rb-cs__carousel,
  .rb-cs__track,
  .rb-cs__card,
  .rb-cs__caption,
  .rb-cs__nav,
  .rb-cs__navbtn { display: flex; }
  .rb-main .rb-cs__label,
  .rb-main .rb-cs__head,
  .rb-main .rb-cs__note,
  .rb-cs__cover,
  .rb-main .rb-cs__date,
  .rb-main .rb-cs__cardtitle,
  .rb-main .rb-cs__desc { display: block; }

  .rb-cs__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    flex: none;
    height: auto;
    padding: 30px 0;
  }
  .rb-cs__text {
    flex: none;
    width: 90%;
    gap: 5px;
    padding: 0 10px;
  }
  .rb-cs__stage {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100%;
  }
  .rb-cs__carousel { height: auto; padding: 145px; }
  .rb-cs__card     { height: auto; }
  .rb-cs__nav {
    left: -29px;
    right: 0;
    bottom: 53px;
    top: auto;
    width: 100%;
    padding: 110px;
  }
  .rb-main .rb-cs__label     { font-size: 48px; line-height: 1.1; }
  .rb-main .rb-cs__head      { font-size: 28px; }
  .rb-main .rb-cs__note      { font-size: 14px; }
  .rb-main .rb-cs__cardtitle { font-size: 28px; }
}

/* ---- @mini（320以下）: 設計ツリーの差分は無い。display だけ明示。---- */
@media screen and (max-width: 320px) {
  .rb-cs__inner,
  .rb-cs__text,
  .rb-cs__labelwrap,
  .rb-cs__headwrap,
  .rb-cs__stage,
  .rb-cs__carousel,
  .rb-cs__track,
  .rb-cs__card,
  .rb-cs__caption,
  .rb-cs__nav,
  .rb-cs__navbtn { display: flex; }
  .rb-main .rb-cs__label,
  .rb-main .rb-cs__head,
  .rb-main .rb-cs__note,
  .rb-cs__cover,
  .rb-main .rb-cs__date,
  .rb-main .rb-cs__cardtitle,
  .rb-main .rb-cs__desc { display: block; }
  .rb-cs__inner { flex-direction: column; padding: 30px 0; }
}



/* ==================================================================
 * 4-10. S10 #privacy（設計ツリー index 8 / h=566px）
 * ------------------------------------------------------------------
 * 帯 var(--rb-c-privacy-bg) = #14314a 全幅 / inner 1110px /
 * padding base 80px 0px / @small 80px 30px / @mobile 30px 30px /
 * gap base 40px / @small 20px / flex column。
 * 見出し「弊社はプライバシーを大切にします。」
 * アイコン画像 s-256x256_webp_1ea33f7f-….webp
 * ================================================================== */
/* ------------------------------------------------------------------
 * 4-10 / 4-11 / 4-12 の3区画で共有するローカル値。
 * :root（0節）は全担当の共有物なので触らず、担当セクションにスコープを切って置く。
 * すべて設計ツリー／本番DOMの実測値であって、新規に決めた色ではない。
 *   #f9fafb … ボタンのラベル色（設計ツリー color:"#f9fafb"）
 *   #0e2237 … FAQ の質問／回答の文字色（設計ツリー color:"#0e2237"）
 *   rgba(36,37,40,0.1) … #questions の枠線色
 *   box-shadow 2種 … 原本のボタン共通の影と :hover の影
 * ネイビー #082b34 は tokens.css の --o-c-navy と同値なのでトークンを使う。
 * ------------------------------------------------------------------ */
#privacy,
#message,
#questions {
  --rb-c-offwhite: #f9fafb;
  --rb-c-faq-ink: #0e2237;
  --rb-c-questions-border: rgba(36, 37, 40, 0.1);
  --rb-sh-btn: 5px 5px 5px rgba(0, 0, 0, 0.2);
  --rb-sh-btn-hover: 1px 3px 20px rgba(0, 0, 0, 0.1);
}

/* ---- 帯（全幅）---- */
.rb-privacy {
  display: flex;
  background: var(--rb-c-privacy-bg);
}

/* ---- inner（1110px）。base の .rb-section__inner は justify-content:center なので
       原本の flex-start に上書きする。 ---- */
.rb-privacy__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  gap: 40px;
  height: auto;
  padding: 80px 0;
}

/* ---- 鍵アイコン（s-256x256_…1ea33f7f）---- */
.rb-privacy__icon {
  display: block;
  flex: none;
  width: 120px;
  height: auto;
}

/* ---- 外枠の行。子は .rb-privacy__col ひとつだけだが原本の宣言をそのまま持つ。 ---- */
.rb-privacy__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  gap: 10px;
  width: 80%;
  padding: 0;
}

.rb-privacy__col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 100%;
  padding: 0;
}

/* 原本の height:160px の見出し枠。見出しの縦位置を決めているので残す。 */
.rb-privacy__headbox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 1;
  width: auto;
  height: 160px;
  margin: 0;
  background: transparent;
}

.rb-privacy__title {
  font-family: var(--s-font-f88553ee);
  font-size: 36px;
  font-weight: 700;                    /* 実測500 → CEO指示で1段上げ */
  line-height: 1.4;
  text-align: left;
  color: var(--rb-c-white);
}

.rb-privacy__lead {
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: justify;
  color: var(--rb-c-white);
}

.rb-privacy__actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 0;
}

/* 原本はこのボタンが二重リンク（外 /privacy policy・内 sarusho.com）。
   sarusho.com は無関係リンクのため削除し、リンクは1本に統合している（privacy.php の注記参照）。 */
.rb-privacy__btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 15px 30px;
  border: 1px solid var(--rb-c-white);
  border-radius: 36px;
  background: transparent;
  box-shadow: var(--rb-sh-btn);
  text-decoration: none;
  transition-property: box-shadow, transform;
  transition-duration: 300ms;
}

.rb-privacy__btn:hover,
.rb-privacy__btn:focus-visible {
  box-shadow: var(--rb-sh-btn-hover);
  transform: scale(1.05);
}

.rb-privacy__btn-label {
  font-family: var(--s-font-f88553ee);
  font-size: 24px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  text-align: center;
  color: var(--rb-c-offwhite);
}

@media screen and (max-width: 1140px) {
  /* @small */
  .rb-privacy { display: flex; }
  .rb-privacy__inner {
    display: flex;
    gap: 20px;
    padding: 80px 30px;
  }
  .rb-privacy__icon { display: block; width: 100px; }
  .rb-privacy__row {
    display: flex;
    flex: none;
    gap: 20px;
    width: 80%;
  }
  .rb-privacy__col { display: flex; }
  .rb-privacy__actions { display: flex; }
  .rb-privacy__btn { display: flex; }
  .rb-privacy__title { font-size: 36px; }
  .rb-privacy__lead { font-size: 16px; }
}

@media screen and (max-width: 840px) {
  /* @tablet — 原本は section／行／列に @tablet 指定を持たない。文字サイズのみ変わる。 */
  .rb-privacy { display: flex; }
  .rb-privacy__inner { display: flex; }
  .rb-privacy__icon { display: block; }
  .rb-privacy__row { display: flex; }
  .rb-privacy__col { display: flex; }
  .rb-privacy__actions { display: flex; }
  .rb-privacy__btn { display: flex; }
  .rb-privacy__title { font-size: 32px; }
  .rb-privacy__btn-label { font-size: 24px; }
}

@media screen and (max-width: 540px) {
  /* @mobile */
  .rb-privacy { display: flex; }
  .rb-privacy__inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: none;
    height: auto;
    padding: 30px 30px;
  }
  .rb-privacy__icon { display: block; width: 80px; }
  .rb-privacy__row {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
  }
  .rb-privacy__col {
    display: flex;
    flex: none;
    gap: 20px;
    width: 100%;
    padding: 0 10px;
  }
  .rb-privacy__actions {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex: none;
    gap: 15px;
    width: 100%;
  }
  .rb-privacy__btn {
    display: flex;
    padding: 15px 20px;
  }
  .rb-privacy__title {
    font-size: 24px;
    line-height: 1.1;
  }
  .rb-privacy__lead { font-size: 14px; }
  .rb-privacy__btn-label { font-size: 16px; }
}

@media screen and (max-width: 320px) {
  /* @mini — 原本の指定はアイコン幅のみ。display は継承に頼らず再宣言する。 */
  .rb-privacy { display: flex; }
  .rb-privacy__inner { display: flex; }
  .rb-privacy__icon { display: block; width: 70px; }
  .rb-privacy__row { display: flex; }
  .rb-privacy__col { display: flex; }
  .rb-privacy__actions { display: flex; }
  .rb-privacy__btn { display: flex; }
}


/* ==================================================================
 * 4-11. S11 #message（設計ツリー index 9 / h=973px）
 * ------------------------------------------------------------------
 * 帯 var(--rb-c-message-bg) = #f9fafb 全幅 / inner 1080px /
 * padding base 69px 0px / @small 69px 20px / @tablet 46px 20px / @mobile 31px 20px。
 * 代表写真 s-1014x1350_v-fms_webp_46fb923b-….webp（/ トップページと共用）。
 * ================================================================== */
/* ---- 帯（全幅）---- */
.rb-message {
  display: flex;
  z-index: 0;
  background: var(--rb-c-message-bg);
}

.rb-message__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: none;
  height: auto;
  padding: 69px 0;
}

/* ★ 設計ツリー上このグループは width:auto だが、中の見出し帯が width:100% を持つため
   auto のままだと帯幅が中身依存になる。本番実測では帯が inner いっぱい（1080px）に伸びるので
   width:100% を明示する。原本からの逸脱ではなく、実行時の見え方に合わせた指定。 */
.rb-message__group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  padding: 0;
}

/* 見出し帯。背景は tokens.css の --s-color-d88ce62e
   ＝ linear-gradient(90deg, #ffb11dff, #e4362cff)（設計ツリー実測と同値）。 */
.rb-message__band {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 30px 40px;
  background: var(--s-color-d88ce62e);
}

.rb-message__title {
  font-family: var(--s-font-f88553ee);
  /* ★ 実測は 600。Zen Kaku Gothic New に 600 が無く合成太字になるため使わない
     （CEO指示・reblue.css 冒頭）。1段上の 700 で受ける。 */
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--rb-c-white);
  margin: 0;
}

.rb-message__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 100%;
  height: auto;
  background: transparent;
}

.rb-message__photo {
  display: block;
  flex: none;
  width: 50%;
  height: auto;
  border-radius: 12px;
}

.rb-message__body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 10px;
  width: 50%;
  height: auto;
  padding: 0;
  background: transparent;
}

.rb-message__text {
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;                    /* 実測500 → CEO指示で1段上げ */
  line-height: 1.4;
  text-align: left;
  color: var(--o-c-navy);              /* 設計ツリー #082b34 と同値のトークン */
}

.rb-message__role {
  font-family: var(--s-font-f88553ee);
  font-size: 24px;
  font-weight: 700;                    /* 実測500 → CEO指示で1段上げ */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--o-c-navy);
  margin: 0;
}

.rb-message__name {
  font-family: var(--s-font-f88553ee);
  font-size: 28px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--o-c-navy);
  margin: 0;
}

@media screen and (max-width: 1140px) {
  /* @small — 原本は section の padding と写真の padding のみ。 */
  .rb-message { display: flex; }
  .rb-message__inner {
    display: flex;
    padding: 69px 20px;
  }
  .rb-message__group { display: flex; }
  .rb-message__band { display: flex; }
  .rb-message__row {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
  }
  .rb-message__photo {
    display: block;
    padding: 0;
  }
  .rb-message__body { display: flex; }
}

@media screen and (max-width: 840px) {
  /* @tablet — 写真とテキストが縦積みになる。 */
  .rb-message { display: flex; }
  .rb-message__inner {
    display: flex;
    padding: 46px 20px;
  }
  .rb-message__group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .rb-message__band { display: flex; }
  .rb-message__row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .rb-message__photo {
    display: block;
    flex: none;
    width: 50%;
    margin: 0;
  }
  .rb-message__body {
    display: flex;
    flex: none;
    width: 100%;
    padding: 30px 40px;
  }
}

@media screen and (max-width: 540px) {
  /* @mobile */
  .rb-message { display: flex; }
  .rb-message__inner {
    display: flex;
    padding: 31px 20px;
  }
  .rb-message__group {
    display: flex;
    gap: 10px;
  }
  .rb-message__band {
    display: flex;
    padding: 20px 20px;
  }
  .rb-message__title { font-size: 20px; }
  .rb-message__row { display: flex; }
  .rb-message__photo {
    display: block;
    flex: none;
    width: 70%;
    margin: 0;
  }
  .rb-message__body {
    display: flex;
    padding: 20px 0;
  }
  .rb-message__text {
    font-size: 15px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-align: justify;
    padding: 0;
  }
  .rb-message__role { font-size: 12px; }
  .rb-message__name { font-size: 20px; }
}

@media screen and (max-width: 320px) {
  /* @mini */
  .rb-message { display: flex; }
  .rb-message__inner { display: flex; }
  .rb-message__group {
    display: flex;
    gap: 10px;
  }
  .rb-message__band {
    display: flex;
    margin: 0;
    padding: 10px 10px;
  }
  .rb-message__title { font-size: 20px; }
  .rb-message__row { display: flex; }
  .rb-message__photo {
    display: block;
    flex: none;
    width: 90%;
  }
  .rb-message__body {
    display: flex;
    padding: 55px 0 22px 0;
  }
  .rb-message__text { font-size: 12px; }
  .rb-message__name { font-size: 28px; }
}


/* ==================================================================
 * 4-12. S12 #questions（設計ツリー index 10 / h=1479px）
 * ------------------------------------------------------------------
 * ★ width:100% ＝ inner 無し（.rb-section--flush）。padding は要素自身に
 *   base 80px 100px / @small 100px 60px / @tablet 100px 40px / @mobile 30px 20px。
 * 帯 var(--s-color-fb80e04b)。flex column / align-items:center。
 * 見出し: p「Q&amp;A」15px/実測400 → **500**・letter-spacing .3em・#ffffff
 *         ＋ 罫線 130×1px #ffffff（margin 5px 0 20px）… .rb-rule が使える
 *         ＋ h2「よくあるご質問」32px/700・letter-spacing .2em
 * 本体: studio-toggle-button が9個（各65px）のアコーディオン。
 *   共有シンボル b7de538f（chevronチップ）。<details>/<summary> か JS で実装。
 * 末尾: 「その他のお問い合わせは、以下公式LINEよりお気軽にお問い合わせください。」
 * ★ specs 2-5 は「FAQ 14件」と書いているが、ベースライン実測は **9問**。
 *   TODO: 件数の食い違いを確認すること（実測9問を正とする方が安全）。
 * ================================================================== */
/* ---- セクション本体（inner 無し・padding は自分で持つ）---- */
.rb-questions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  padding: 80px 100px;
  background: var(--s-color-fb80e04b);
  border-top: 0 solid var(--rb-c-questions-border);
  border-right: 0 solid var(--rb-c-questions-border);
  border-bottom: 1px solid var(--rb-c-questions-border);
  border-left: 0 solid var(--rb-c-questions-border);
}

.rb-questions__label {
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--rb-c-white);
}

/* 罫線は 2節の共通クラス .rb-rule（130×1px / margin 5px 0 20px）をそのまま使う。 */

.rb-questions__title {
  font-family: var(--s-font-f88553ee);
  font-size: 32px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 2;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--rb-c-white);
  flex: none;
  /* 設計ツリーの width は STUDIO キャンバス基準の 1487px。
     rb-fixed-width-guard で 100% に丸まるが、意図を明示するためここでも書く。 */
  width: 1487px;
  max-width: 100%;
  margin: 0;
}

.rb-questions__group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 80px;
  width: var(--rb-w-1280);
  padding: 30px 120px;
}

.rb-questions__col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 2;
  gap: 40px;
  width: auto;
  padding: 0;
}

.rb-questions__list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: none;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-questions__item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 100%;
  padding: 0;
}

/* ---- アコーディオン本体（<details>）----
   原本は STUDIO の toggle（state.isClose = true ＝ 既定で閉じている）。
   <details> も既定で閉じているので初期状態が一致する。 */
.rb-faq {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: 1;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: var(--rb-c-white);
}

.rb-faq__q {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  gap: 0;
  width: 100%;
  height: auto;
  padding: 15px;
  border: 1px solid transparent;       /* 原本 1px solid rgba(0,0,0,0) */
  border-radius: 12px;
  background: transparent;             /* 原本 rgba(0,0,0,0.0) */
  cursor: pointer;
  list-style: none;
}

/* ブラウザ既定の三角マーカーを消す（原本には無い）。 */
.rb-faq__q::-webkit-details-marker { display: none; }
.rb-faq__q::marker { content: ""; }

.rb-faq__lead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: 1;
  gap: 20px;
  width: auto;
  padding: 0;
}

/* 原本は color に var(--s-color-9bb0a5c3)（グラデーション）が入っている
   ＝ STUDIO の background-clip:text 相当。素のCSSで同じ見え方に寄せる。
   background-clip:text が効かない環境では文字が消えてしまうので、
   既定は FAQ の文字色で塗り、@supports の中でだけグラデーションに差し替える。 */
.rb-faq__qmark {
  flex: none;
  font-family: var(--s-font-f88553ee);
  font-size: 28px;
  font-weight: 700;                    /* 実測500 → CEO指示で1段上げ */
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--rb-c-faq-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rb-faq__qmark {
    background-image: var(--s-color-9bb0a5c3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.rb-faq__title {
  flex: 1;
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 700;                    /* 実測500 → CEO指示で1段上げ */
  line-height: 1.85;
  text-align: left;
  color: var(--rb-c-faq-ink);
}

.rb-faq__q:hover .rb-faq__title,
.rb-faq__q:focus-visible .rb-faq__title {
  text-decoration: underline;
}

/* ---- 開閉chevronチップ（共有シンボル S-05 `b7de538f`）----
   20×20 の円（1px solid #082b34 ＝ --o-c-navy / border-radius 128px）に
   14px の chevron。原本の Material `keyboard_arrow_right` を
   SVGスプライトの #fa-chevron-right で置き換えている。
   回転は原本どおり 閉=90deg（下向き）／開=-90deg（上向き）。 */
.rb-faq__chev {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--o-c-navy);
  border-radius: 128px;
  color: var(--o-c-navy);
  transform: rotate(90deg);
  transition-property: transform;
  transition-duration: 300ms;
}

.rb-faq[open] > .rb-faq__q .rb-faq__chev {
  transform: rotate(-90deg);
}

.rb-faq__chev-icon {
  width: 14px;
  height: 14px;
}

/* ---- 回答 ---- */
.rb-faq__a {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 100%;
  height: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent;
}

.rb-faq__a-inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: none;
  width: 100%;
  height: auto;
  padding: 15px 60px;
  background: transparent;
}

.rb-faq__text {
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.75;
  text-align: left;
  color: var(--rb-c-faq-ink);
  margin: 0;
  padding: 0;
}

/* ---- 末尾の問い合わせ導線 ---- */
.rb-questions__foot {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 20px;
  padding: 0;
}

.rb-questions__note {
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.4;
  text-align: left;
  color: var(--rb-c-white);
}

.rb-questions__btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: auto;
  height: auto;
  margin: 0 0 0 20px;
  padding: 15px 30px;
  border: 1px solid var(--rb-c-white);
  border-radius: 27px;
  background: var(--rb-c-line-green);
  box-shadow: var(--rb-sh-btn);
  text-decoration: none;
  transition-property: box-shadow, transform;
  transition-duration: 300ms;
}

.rb-questions__btn:hover,
.rb-questions__btn:focus-visible {
  box-shadow: var(--rb-sh-btn-hover);
  transform: scale(1.05);
}

.rb-questions__btn-label {
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  text-align: center;
  color: var(--rb-c-offwhite);
}

@media screen and (max-width: 1140px) {
  /* @small */
  .rb-questions {
    display: flex;
    padding: 100px 60px;
  }
  .rb-questions__group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 40px;
  }
  .rb-questions__col {
    display: flex;
    margin: 0 -10px;
  }
  /* ★★ 2026-09-14 修正: @small 以下で FAQ 枠の右側だけが短くなる問題。
     なぜ: group が column 方向になっても base の align-items:flex-start が残るため、
     col の交差軸サイズが shrink-to-fit になり、負マージン（0 -10px / @tablet 0 -20px）で
     group の padding ぶん外へ広げる設計が効かない。さらに rb-fixed-width-guard の
     max-width:100% が親の content box 幅で頭打ちにする。
     計測（修正前 / 現行サイト）: .rb-faq w=315(x20) / 335(x20) @375、
     636(x40) / 688(x40) @768。左右余白が 20:40（375）・40:92（768）と非対称になり、
     直下の注記文だけが枠より右へ伸びて見えていた。
     stretch + max-width:none で group の border box と同じ幅に戻す（＝現行と一致）。
     セレクタを .rb-main 付きにしているのは guard（.rb-main [class*="rb-"]）と
     同詳細度で後勝ちさせるため。@tablet / @mobile はこの指定を継承する。 */
  .rb-main .rb-questions__col {
    align-self: stretch;
    max-width: none;
  }
  .rb-questions__list { display: flex; }
  .rb-questions__item { display: flex; }
  .rb-faq { display: flex; }
  .rb-faq__q {
    display: flex;
    gap: 20px;
  }
  .rb-faq__lead {
    display: flex;
    flex: 1;
    width: auto;
  }
  .rb-faq__chev {
    display: flex;
    gap: 20px;
  }
  .rb-faq__a { display: flex; }
  .rb-faq__a-inner { display: flex; }
  .rb-questions__foot { display: flex; }
  .rb-questions__btn { display: flex; }
  .rb-questions__title {
    font-size: 32px;
    width: 852px;
    margin: 0;
  }
}

@media screen and (max-width: 840px) {
  /* @tablet */
  .rb-questions {
    display: flex;
    padding: 100px 40px;
  }
  .rb-questions__group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 20px;
  }
  .rb-questions__col {
    display: flex;
    margin: 0 -20px;
  }
  .rb-questions__list { display: flex; }
  .rb-questions__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .rb-faq { display: flex; }
  .rb-faq__q { display: flex; }
  .rb-faq__lead { display: flex; }
  .rb-faq__chev { display: flex; }
  .rb-faq__a { display: flex; }
  .rb-faq__a-inner { display: flex; }
  .rb-questions__foot { display: flex; }
  .rb-questions__btn { display: flex; }
  .rb-questions__title {
    font-size: 36px;
    margin: 0;
  }
  .rb-faq__qmark { padding: 0; }
  .rb-faq__text { padding: 0; }
}

@media screen and (max-width: 540px) {
  /* @mobile — 原本はここで枠線を 0 に落とす。 */
  .rb-questions {
    display: flex;
    padding: 30px 20px;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
  }
  .rb-questions__group {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    padding: 0 10px;
  }
  .rb-questions__col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0 -10px;
  }
  .rb-questions__list {
    display: flex;
    height: auto;
  }
  .rb-questions__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .rb-faq { display: flex; }
  .rb-faq__q {
    display: flex;
    padding: 8px 15px;
  }
  .rb-faq__lead { display: flex; }
  .rb-faq__chev { display: flex; }
  .rb-faq__a { display: flex; }
  .rb-faq__a-inner { display: flex; }
  .rb-questions__foot { display: flex; }
  .rb-questions__btn { display: flex; }
  .rb-questions__title {
    font-size: 20px;
    margin: 0;
    padding: 0;
  }
  .rb-faq__title {
    font-size: 15px;
    line-height: 1.4;
  }
  .rb-faq__text { font-size: 14px; }
}

@media screen and (max-width: 320px) {
  /* @mini — 原本の指定は見出しのサイズのみ。display は継承に頼らず再宣言する。 */
  .rb-questions { display: flex; }
  .rb-questions__group { display: flex; }
  .rb-questions__col { display: flex; }
  .rb-questions__list { display: flex; }
  .rb-questions__item { display: flex; }
  .rb-faq { display: flex; }
  .rb-faq__q { display: flex; }
  .rb-faq__lead { display: flex; }
  .rb-faq__chev { display: flex; }
  .rb-faq__a { display: flex; }
  .rb-faq__a-inner { display: flex; }
  .rb-questions__foot { display: flex; }
  .rb-questions__btn { display: flex; }
  .rb-questions__title { font-size: 12px; }
}


/* ==================================================================
 * 4-13. S13 LINE登録セクション（設計ツリー index 11 / ID無し / h=500px）
 * ------------------------------------------------------------------
 * 帯 var(--rb-c-line-bg) = #ffffff 全幅 / inner 1080px /
 * padding 30px 0px / gap 20px / height base 500px → @mobile 200px。
 * display は base〜@mini すべて flex を明示（原本も全BPで再宣言している）。
 * コピー（独立した2つの Text ノード。1つ目の末尾 <br> は原文どおり保持）:
 *   「公式LINEで次回以降のイベントを通知！<br>」
 *   「今すぐLINE登録！！」
 * アイコン: Material `keyboard_arrow_down`・60×60 の円形ボーダー
 * ★ 背景画像 s-1408x768_v-fms_webp_3f810c02-….webp は **全ブレークポイントで表示**。
 *   position:absolute / top:0 / left:0 / width:100% / height:100% / z-index:-1。
 *   @mobile・@mini で filter: brightness(95%) を追加。
 *   （第2版までの「@mobile/@mini のみ表示」は誤り。検証指摘1で訂正済み）
 * リンクはこの1本のみ:
 *   https://s.lmes.jp/landing-qr/2007470936-jEOVPOZE?uLand=ZKVbYb
 * ================================================================== */
/* ------------------------------------------------------------------
 * 帯（全幅・#ffffff）＋ 全面に敷く背景写真。
 * 帯に position:relative が要る（.rb-section が既に持っている）。
 * 写真がはみ出さないよう overflow:hidden を足す（原本には無いが、
 * object-fit:cover で切るための実装都合。見た目は変わらない）。
 *
 * ★★ 2026-09-14 修正: isolation:isolate を追加。
 *   なぜ: この帯が stacking context を作っていなかったため、z-index:-1 の
 *   .rb-line__bg がルートの負レイヤーへ落ち、**帯自身の白背景 #fff の下**に
 *   沈んで見えなくなっていた（塗り順: ルート背景 → 負レイヤー → 各ブロックの背景）。
 *   根拠: 修正前の要素スクショ before_shots/pre_0_1440.png が真っ白で、
 *   白文字リード・白ボーダーのピル・白矢印バッジが全て消え、
 *   オレンジの「今すぐLINE登録！！」だけが残っていた。
 *   isolation:isolate で帯が stacking context になり、写真は
 *   「帯の背景の上・inner の下」という設計ツリーどおりの位置に戻る。
 * ------------------------------------------------------------------ */
.rb-section--line {
  display: flex;
  isolation: isolate;
  overflow: hidden;
  background: var(--rb-c-line-bg);
}

/* 背景写真 s-1408x768_…3f810c02。**全ブレークポイントで表示**（specs 検証指摘1）。
   設計ツリー: position:absolute / top:0 left:0 / width:100% height:100% / z-index:-1。 */
.rb-line__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* inner ＝ 設計ツリーの Section ノード本体（width 1080px / padding 30px 0px / gap 20px / h 500px）。 */
.rb-line__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 20px;
  height: 500px;
  padding: 30px 0;
}

/* ---- 白ボーダーのピル（原本は Box にリンクが付いている） ---- */
.rb-line__cta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  flex: none;
  width: 80%;
  height: 200px;
  overflow: visible;
  border: 3px solid var(--rb-c-white);
  border-radius: 128px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  background: transparent;
  text-decoration: none;
  transition: scale 800ms ease-in-out;
}

.rb-line__cta:hover { scale: 1.05 1.05; }

.rb-line__labels {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
}

.rb-line__lead {
  display: block;
  width: auto;
  height: auto;
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  text-align: left;
  color: var(--rb-c-white);
}

/* 原本は color に var(--s-color-d88ce62e)（オレンジのグラデ）が入っている
   ＝ STUDIO の background-clip:text 相当。4-12 の .rb-faq__qmark と同じ手当てをする。
   グラデが効かない環境で文字が消えないよう、既定はグラデ終端色（#e4362c）で塗る。 */
.rb-line__main {
  display: block;
  width: auto;
  height: auto;
  font-family: var(--s-font-f88553ee);
  font-size: 36px;
  font-weight: 700;                    /* 実測700・据え置き */
  line-height: 1.4;
  text-align: left;
  color: var(--s-color-d5a859b8);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rb-line__main {
    background-image: var(--s-color-d88ce62e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 60×60 の円形ボーダー＋右向き矢印。
   原本の Icon は Material `keyboard_arrow_down` に rotate:-90deg（＝右向き）。
   SVGスプライトの chevron-down を同じ角度で回して合わせる。
   :hover で右へ 30px 動く演出（in:hover / 600ms）も原本どおり付ける。 */
.rb-line__badge {
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  margin: 0;
  border: 1px solid var(--rb-c-white);
  border-radius: 50%;
  background: transparent;
  backdrop-filter: blur(2px);
  color: var(--rb-c-white);
  transition: translate 600ms ease-in-out;
}

.rb-line__cta:hover .rb-line__badge { translate: 30px 0; }

.rb-line__badge-icon {
  width: 24px;
  height: 24px;
  rotate: -90deg;                      /* 原本 rotate:-90deg（下向き→右向き） */
}

/* ------------------------------------------------------------------ */
@media screen and (max-width: 1140px) {   /* @small */
  .rb-section--line { display: flex; }
  .rb-line__bg { display: block; }
  .rb-line__inner { display: flex; gap: 20px; }
  .rb-line__cta { display: flex; }
  .rb-line__labels { display: flex; }
  .rb-line__badge { display: flex; }
}

@media screen and (max-width: 840px) {    /* @tablet */
  .rb-section--line { display: flex; }
  .rb-line__bg { display: block; }
  .rb-line__inner { display: flex; }
  .rb-line__cta {
    display: flex;
    flex: none;
    width: 80%;
  }
  .rb-line__labels { display: flex; }
  .rb-line__badge { display: flex; }
}

@media screen and (max-width: 540px) {    /* @mobile */
  .rb-section--line { display: flex; }
  /* 原本は @mobile / @mini で filter: brightness(95%) を足すだけ（表示は base から継続）。 */
  .rb-line__bg {
    display: block;
    filter: brightness(95%);
  }
  .rb-line__inner {
    display: flex;
    flex: none;
    height: 200px;
  }
  /* ピルからボーダー1pxの角丸なし枠へ（原本どおり）。 */
  .rb-line__cta {
    display: flex;
    flex: none;
    width: 90%;
    height: 100px;
    padding: 6px;
    border: 1px solid var(--rb-c-white);
    border-radius: 0;
    box-shadow: none;
  }
  .rb-line__labels {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
  }
  .rb-line__lead { font-size: 11px; }
  .rb-line__main { font-size: 18px; }
  .rb-line__badge { display: flex; }
}

@media screen and (max-width: 320px) {    /* @mini */
  .rb-section--line { display: flex; }
  .rb-line__bg {
    display: block;
    filter: brightness(95%);
  }
  .rb-line__inner { display: flex; }
  .rb-line__cta { display: flex; }
  .rb-line__labels { display: flex; }
  .rb-line__lead { font-size: 11px; }
  .rb-line__main { font-size: 18px; }
  .rb-line__badge { display: flex; }
}


/* ==================================================================
 * 4-14. S15 注記（設計ツリー index 13 / ID無し / h=160px）
 * ------------------------------------------------------------------
 * 帯 var(--s-color-7389c451) 全幅 / inner 720px（設計ツリーは width:auto・
 * 本番実測で 720px）/ padding 50px 0px / flex column / align-items:center。
 * 「※画像は全てイメージです。<br>でも、こんな想い出を作りたいなって思ってます。」
 * ================================================================== */
/* ------------------------------------------------------------------
 * 帯（全幅・水色のグラデ var(--s-color-7389c451)）。
 * ------------------------------------------------------------------ */
.rb-section--note {
  display: flex;
  background: var(--s-color-7389c451);
}

/* inner ＝ 設計ツリーの Section ノード本体（padding 50px 0px / flex column）。
   設計ツリーの width は auto だが、本文ノードが 720px 固定なので inner を 720px にする
   （本番実測とも一致）。 */
.rb-note__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  height: auto;
  padding: 50px 0;
}

.rb-note__text {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;                    /* 実測400 → CEO指示で1段上げ */
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--rb-c-white);
}

/* ------------------------------------------------------------------
 * 設計ツリーの BP 上書きは @mobile の font-size / margin だけ。
 * display は4段すべてで明示する（継承に頼らない方針）。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1140px) {   /* @small */
  .rb-section--note { display: flex; }
  .rb-note__inner { display: flex; }
  .rb-note__text { display: block; }
}

@media screen and (max-width: 840px) {    /* @tablet */
  .rb-section--note { display: flex; }
  .rb-note__inner { display: flex; }
  .rb-note__text { display: block; }
}

@media screen and (max-width: 540px) {    /* @mobile */
  .rb-section--note { display: flex; }
  .rb-note__inner { display: flex; }
  .rb-note__text {
    display: block;
    /* 原本 margin:0px 40px（width:720px と併用されるため実効は左右の余白）。 */
    width: auto;
    margin: 0 40px;
    font-size: 10px;
  }
}

@media screen and (max-width: 320px) {    /* @mini */
  .rb-section--note { display: flex; }
  .rb-note__inner { display: flex; }
  .rb-note__text {
    display: block;
    width: auto;
    margin: 0 40px;
    font-size: 10px;
  }
}