@charset "UTF-8";
/* ============================================================
   Mobile RAIJIN BLUE ― クラウドファンディング誘引LP
   構成: 6枚スライドのカルーセル（2〜5枚目クリックで本文モーダル）
   カラー: JPFA紺 × CAMPFIREレッド(#EF4846) × 白
   ============================================================ */

:root {
    --rb-navy-deep: #0D1638;   /* 背景の濃紺 */
    --rb-navy:      #18246B;   /* ロゴの紺 */
    --rb-red:        #EF4846;  /* CAMPFIREレッド（装飾・大きな図形用） */
    --rb-red-strong: #CE2B23;  /* 濃い赤（文字・ボタン用。白/淡色地でWCAG AA 4.5:1を満たす） */
    --rb-paper:     #F6F7FB;   /* 明部の地 */
    --rb-ink:       #1A2038;   /* 明部の文字 */
    --rb-ice:       #C9D6F2;   /* 暗部の弱い文字 */
    --font-en: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-ja: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

/* ---------- base ---------- */
.rb-page {
    margin: 0;
    background: var(--rb-navy-deep);
    color: #fff;
    font-family: var(--font-ja);
    font-size: 16px;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
}
.rb-page img { max-width: 100%; height: auto; }
.rb-page a { color: inherit; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.rb-skiplink {
    position: absolute; left: -9999px; top: 0;
    background: var(--rb-red-strong); color: #fff;
    padding: 8px 16px; font-weight: 700; z-index: 100;
}
.rb-skiplink:focus { left: 0; }

/* スクリーンリーダー専用テキスト */
.rb-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

.rb-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- topbar ---------- */
.rb-topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(13, 22, 56, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rb-topbar__nav {
    max-width: 1080px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 20px;
}
.rb-topbar__home {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none; color: var(--rb-ice);
}
.rb-topbar__home:hover { color: #fff; }
.rb-topbar__brand {
    font-family: var(--font-en); font-style: italic; font-weight: 700;
    font-size: 18px; letter-spacing: 0.06em; color: #fff;
}
.rb-topbar__cta,
.rb-page a.rb-topbar__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; text-decoration: none;
    color: #fff; background: var(--rb-red-strong);
    padding: 7px 14px; border-radius: 999px;
    white-space: nowrap;
}
.rb-topbar__cta:hover { filter: brightness(1.1); }

/* ---------- カルーセル ---------- */
.rb-carousel {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px 8px;
}
.rb-car__viewport {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
    outline: none;
}
.rb-car__viewport:focus-visible {
    box-shadow: 0 0 0 3px var(--rb-red), 0 14px 44px rgba(0, 0, 0, 0.45);
}
.rb-car__track {
    display: flex;
    transition: transform 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
    .rb-car__track { transition: none; }
}
.rb-car__slide {
    flex: 0 0 100%;
    min-width: 100%;
}
.rb-car__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* クリックでモーダルが開くスライド（バッジは置かず画像を覆わない） */
.rb-car__open {
    display: block; width: 100%;
    margin: 0; padding: 0; border: 0;
    background: none; cursor: pointer;
    font: inherit; color: inherit;
    text-align: inherit;
}
.rb-car__open:focus-visible { outline: 3px solid var(--rb-red); outline-offset: -3px; }

/* 画像＋オーバーレイテキストのラッパー
   画像は文字なし写真で支給されるため、テキストはHTMLで重ねる */
.rb-car__media { position: relative; display: block; }
.rb-car__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center;
    gap: clamp(6px, 1.4vw, 16px);
    padding: 6% 8%;
    /* 写真の内容に依らず文字が読めるようにスクリム（暗幕）をかける */
    background: linear-gradient(180deg, rgba(13, 22, 56, 0.30) 0%, rgba(13, 22, 56, 0.55) 100%);
}
.rb-car__ov-eyebrow {
    font-size: clamp(11px, 1.5vw, 16px);
    font-weight: 700; letter-spacing: 0.2em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.rb-car__ov-title {
    font-size: clamp(21px, 4.4vw, 48px);
    font-weight: 900; line-height: 1.5; letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.rb-car__ov-sub {
    font-family: var(--font-en); font-style: italic; font-weight: 700;
    font-size: clamp(13px, 2vw, 22px); letter-spacing: 0.08em;
    color: var(--rb-ice);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.rb-car__ov-note {
    font-size: clamp(11px, 1.6vw, 17px);
    font-weight: 700; letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
/* 白帯（eyebrow＋ブランド名）: 既定は帯なしでeyebrowのみ表示 */
.rb-car__ov-plate { display: contents; }
.rb-car__ov-brand { display: none; }

/* 写真クレジット（16:9トリミングで元画像のクレジットが切れるためHTMLで表示） */
.rb-credit {
    position: absolute; right: 12px; bottom: 9px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    z-index: 2;
}

/* ---------- bandスライド（写真そのまま上部＋下部ライト帯にテキスト） ----------
   会長のCFバナー画像と同じ構図。写真には何も重ねない。 */
.rb-car__slide--band .rb-car__media {
    aspect-ratio: 16 / 9;
    display: flex; flex-direction: column;
    background: #F4F6FA;
}
.rb-car__slide--band .rb-car__media > img {
    flex: 0 0 66%; height: 66%; min-height: 0;
    width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.rb-car__slide--band .rb-car__overlay {
    position: static;
    background: none;
    flex: 1 1 auto; min-height: 0;
    justify-content: center;
    padding: 1.5% 8%;
    gap: clamp(2px, 0.8vw, 8px);
}
.rb-car__slide--band .rb-car__ov-eyebrow {
    color: var(--rb-red-strong);
    text-shadow: none;
    font-family: var(--font-en); font-style: italic;
    letter-spacing: 0.12em;
}
.rb-car__slide--band .rb-car__ov-title {
    color: var(--rb-navy);
    text-shadow: none;
    font-size: clamp(14px, 2.5vw, 29px);
    line-height: 1.55;
}
.rb-car__slide--band .rb-car__ov-note {
    color: #33406E;
    text-shadow: none;
}
/* クレジットは写真の右下（帯の上）に置く */
.rb-car__slide--band .rb-credit { bottom: calc(34% + 8px); }

/* ---------- duoスライド（会長pptx 7ページ構成の再現） ----------
   白背景。上=写真2枚（左右並び）／中=スローガン（英文→和文の順）／下=ロゴ2つ（左右並び） */
.rb-car__slide--duo .rb-car__media {
    aspect-ratio: 16 / 9;
    background: #fff;
    display: flex; flex-direction: column;
}
.rb-car__duo {
    display: flex; gap: 2%;
    flex: 0 0 56%; height: 56%; min-height: 0;
    padding: 3% 3% 0;
    box-sizing: border-box;
}
.rb-car__duo img {
    flex: 1 1 0; min-width: 0; width: 50%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
/* スローガン（pptx準拠: 全文 太字イタリック・紺/緑の2色。英文/和文の間で改行） */
.rb-car__slogan {
    flex: 0 1 auto;
    margin: auto 0; /* 写真とロゴの間で上下中央 */
    display: block;
    padding: 0.5% 4%;
    text-align: center;
    font-weight: 900; font-style: italic;
    font-size: clamp(12px, 2.1vw, 24px);
    line-height: 1.6;
}
.rb-car__slogan span { display: inline-block; }
.rb-sl-navy { color: #002060; }
.rb-sl-green { color: #00B050; }
/* 下部のロゴ2つ（幅いっぱいに大きく） */
.rb-car__logos-row {
    display: flex; justify-content: center; align-items: center;
    gap: 4%;
    flex: 0 0 auto;
    padding: 0 3% 3%;
}
.rb-car__logos-row img {
    width: 45%; height: auto;
    aspect-ratio: auto; object-fit: contain; /* スライド画像用の16:9ベース指定を打ち消す */
}
/* クレジットは写真の右下（白地に落ちないよう写真内に置く） */
.rb-car__slide--duo .rb-credit { bottom: calc(41% + 6px); right: calc(3% + 10px); }

/* ---------- containスライド（テキスト入り完成画像を切らずに全体表示） ---------- */
.rb-car__slide--contain .rb-car__media {
    aspect-ratio: 16 / 9;
    background: #12224E; /* 画像の地色に合わせて余白を馴染ませる */
    display: flex; flex-direction: column; justify-content: center;
    gap: 1.5%;
    padding-bottom: 2.5%;
    box-sizing: border-box;
}
.rb-car__slide--contain .rb-car__media > img {
    aspect-ratio: auto;
    object-fit: contain;
    flex: 0 1 auto; min-height: 0;
}
/* フェーズ別キャプション（元画像の帯を置き換えるHTML版） */
.rb-car__caption {
    flex: 0 0 auto;
    align-self: center;
    background: #fff; color: var(--rb-navy);
    border: 2px solid var(--rb-red-strong);
    border-radius: 999px;
    padding: 0.5em 1.6em;
    font-size: clamp(11px, 1.6vw, 17px);
    font-weight: 700;
    text-align: center;
}

/* ---------- logoスライド（白背景・ロゴ中央） ---------- */
.rb-car__slide--logo .rb-car__media {
    aspect-ratio: 16 / 9;
    background: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2%;
    padding: 4% 0;
    box-sizing: border-box;
}
.rb-car__slide--logo .rb-car__media > img {
    aspect-ratio: auto;
    object-fit: contain;
    width: auto; max-width: 46%;
    min-height: 0; max-height: 44%;
    flex: 0 1 auto;
}
.rb-car__slide--logo .rb-car__overlay {
    position: static; order: -1;
    background: none;
    padding: 0 10%;
    gap: clamp(4px, 1vw, 10px);
    flex: 0 0 auto;
}
.rb-car__slide--logo .rb-car__ov-title {
    color: var(--rb-navy);
    text-shadow: none;
    font-size: clamp(17px, 3.2vw, 34px);
}
.rb-car__slide--logo .rb-car__ov-note {
    color: #33406E;
    text-shadow: none;
}

/* ---------- ヒーロー専用オーバーレイ（会長pptx 2ページ目のスタイル再現） ----------
   ・左寄せ・画面下側に配置
   ・白い斜め帯に 赤(#C00000)の項目名＋紺(#002060)イタリックの「Mobile RAIJIN BLUE」
     （RAIJIN BLUE は1.5倍サイズ。帯はキービジュアルの白帯の踏襲）
   ・見出し「未来をつくるひとりになろう」は太字イタリック（48pt相当）
   ・スローガンは太字イタリック（32pt/28pt相当） */
.rb-car__overlay--hero {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: 5% 7% 6%;
    gap: clamp(8px, 1.6vw, 18px);
    /* 写真を暗くしないよう、テキスト背後の下部のみ薄くグラデーション */
    background: linear-gradient(180deg, rgba(13, 22, 56, 0) 42%, rgba(13, 22, 56, 0.52) 100%);
}
.rb-car__overlay--hero .rb-car__ov-plate {
    display: inline-flex; flex-wrap: wrap;
    align-items: baseline; column-gap: 0.7em; row-gap: 0.2em;
    background: #fff;
    padding: 0.45em 1.1em;
    clip-path: polygon(0.6em 0, 100% 0, calc(100% - 0.6em) 100%, 0 100%);
}
.rb-car__overlay--hero .rb-car__ov-eyebrow {
    font-size: clamp(11px, 1.5vw, 17px);
    font-weight: 700; letter-spacing: 0.04em;
    color: #C00000;
    text-shadow: none;
}
.rb-car__overlay--hero .rb-car__ov-brand {
    display: inline;
    font-family: var(--font-en); font-style: italic; font-weight: 700;
    font-size: clamp(12px, 1.6vw, 18px); letter-spacing: 0.04em;
    color: #002060;
}
.rb-car__overlay--hero .rb-car__ov-brand strong {
    font-weight: 700;
    font-size: 1.5em; /* pptx: Mobile 16pt / RAIJIN BLUE 24pt */
}
.rb-car__overlay--hero .rb-car__ov-title {
    font-style: italic;
    font-size: clamp(23px, 4.6vw, 54px);
    letter-spacing: 0.02em;
    padding-right: 0.15em; /* イタリックの右端切れ防止 */
}
.rb-car__overlay--hero .rb-car__ov-sub {
    color: #fff;
    font-size: clamp(14px, 2.3vw, 28px);
    letter-spacing: 0.04em;
}

/* 矢印 */
.rb-car__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: rgba(13, 22, 56, 0.72); color: #fff;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.rb-car__arrow:hover { background: var(--rb-red-strong); }
.rb-car__arrow:disabled { opacity: 0.25; cursor: default; }
.rb-car__arrow:disabled:hover { background: rgba(13, 22, 56, 0.72); }
.rb-car__arrow--prev { left: 12px; }
.rb-car__arrow--next { right: 12px; }
.rb-car__arrow:focus-visible { outline: 3px solid var(--rb-red); outline-offset: 2px; }

/* ドット */
.rb-car__dots {
    display: flex; justify-content: center; gap: 10px;
    padding: 18px 0 0;
}
.rb-car__dots button {
    width: 11px; height: 11px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer; padding: 0;
}
.rb-car__dots button[aria-current="true"] { background: var(--rb-red); }
.rb-car__dots button:hover { background: rgba(255, 255, 255, 0.6); }
.rb-car__dots button[aria-current="true"]:hover { background: var(--rb-red); }
.rb-car__dots button:focus-visible { outline: 2px solid var(--rb-red); outline-offset: 2px; }

/* 「このスライドを詳しく読む」（画像の外に配置） */
.rb-car__more { margin: 16px 0 0; text-align: center; }
.rb-car__more button {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--rb-red-strong); color: #fff;
    border: 0; border-radius: 999px;
    font-family: inherit; font-size: 14px; font-weight: 700;
    padding: 11px 26px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(206, 43, 35, 0.35);
}
.rb-car__more button:hover { filter: brightness(1.08); }
.rb-car__more button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 本文内のロゴ（基本は横並び。狭い画面では折り返して縦） */
.rb-story__logos {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 14px 4%;
    margin: 0 0 22px;
}
.rb-story__logos img {
    display: block; height: auto;
    width: 47%; min-width: 250px; max-width: 460px;
    flex: 0 1 auto;
}

/* pptx準拠のテキストカラー（スライド8） */
.rb-c-navy { color: #002060; }
.rb-c-green { color: #008000; }
.rb-c-red { color: #C00000; }

/* ---------- 共通CTA ---------- */
.rb-cta {
    margin-top: 48px;
    background: var(--rb-paper);
    color: var(--rb-ink);
    padding: 56px 0 64px;
    text-align: center;
}
.rb-cta__label {
    margin: 0 0 8px;
    font-family: var(--font-en); font-style: italic; font-weight: 700;
    font-size: 16px; letter-spacing: 0.14em;
    color: var(--rb-red-strong);
}
.rb-cta__title {
    margin: 0 0 16px;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 900; line-height: 1.6;
    color: var(--rb-navy);
}
.rb-cta__date {
    display: inline-block;
    font-family: var(--font-en); font-style: italic;
    font-size: 1.25em; letter-spacing: 0.02em;
    margin-right: 4px;
    color: var(--rb-red-strong);
}
.rb-cta__phrase { display: inline-block; }
.rb-cta__lead { margin: 0 auto 30px; max-width: 620px; font-weight: 700; }

.rb-btn-wrap { margin: 0 0 8px; text-align: center; }
/* .rb-page a { color: inherit } の方が詳細度が高く白文字が効かないため、
   ボタンは a を含めた形で指定する（明地のCTAで文字が濃紺になり
   コントラスト3.05でWCAG AAを割っていた） */
.rb-btn,
.rb-page a.rb-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--rb-red-strong); color: #fff;
    font-weight: 900; font-size: 17px;
    padding: 16px 40px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 6px 20px rgba(206, 43, 35, 0.35);
}
.rb-btn:hover { filter: brightness(1.08); }
/* 章ごとの控えめなCTA。最後の大きなボタンと張り合わないよう白抜きにする */
.rb-btn--ghost,
.rb-page a.rb-btn--ghost {
    background: #fff; color: var(--rb-red-strong);
    border: 2px solid var(--rb-red-strong);
    font-size: 15px; padding: 11px 26px;
    box-shadow: none;
}
.rb-btn--ghost:hover,
.rb-page a.rb-btn--ghost:hover { background: var(--rb-red-strong); color: #fff; filter: none; }
.rb-btn--disabled {
    background: rgba(24, 36, 107, 0.12); color: var(--rb-navy);
    box-shadow: none; cursor: default;
}

.rb-cta__sns-note { margin: 28px 0 12px; font-size: 13px; font-weight: 700; }
.rb-cta__sns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rb-cta__sns a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: var(--rb-navy);
    border: 2px solid var(--rb-navy); border-radius: 999px;
    padding: 8px 20px;
}
.rb-cta__sns a:hover { background: var(--rb-navy); color: #fff; }
.rb-cta__sub { margin: 26px 0 0; font-size: 14px; }
.rb-cta__sub a { color: var(--rb-red-strong); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    .rb-topbar__brand { display: none; }
    .rb-carousel { padding: 20px 12px 4px; }
    .rb-car__arrow { width: 36px; height: 36px; font-size: 13px; }
    .rb-car__arrow--prev { left: 8px; }
    .rb-car__arrow--next { right: 8px; }
    /* 矢印ボタンと重ならない範囲で余白と文字詰めを調整 */
    .rb-car__overlay { padding: 6% 12%; gap: 6px; }
    .rb-car__ov-eyebrow { font-size: 10.5px; letter-spacing: 0.08em; }
    .rb-car__ov-title { font-size: 5vw; letter-spacing: 0.02em; }
    .rb-car__ov-sub { font-size: 11.5px; letter-spacing: 0.04em; }
    .rb-credit { font-size: 9px; right: 8px; bottom: 4px; }
    /* bandスライドは写真の右下（帯の上）を維持 */
    .rb-car__slide--band .rb-credit { bottom: calc(34% + 4px); }
    .rb-car__slide--band .rb-car__ov-eyebrow { font-size: 9px; }
    .rb-car__slide--band .rb-car__ov-title { font-size: 3.6vw; }
    .rb-car__slide--band .rb-car__ov-note { font-size: 10px; }
    /* duoスライドのSP調整 */
    .rb-car__slogan { font-size: 9.5px; }
    .rb-car__slide--duo .rb-credit { bottom: calc(41% + 3px); }
    /* ヒーローはSPでも左寄せ・白帯を維持しつつ縮小 */
    .rb-car__overlay--hero { padding: 5% 13% 6% 13%; gap: 6px; }
    .rb-car__overlay--hero .rb-car__ov-eyebrow { font-size: 9.5px; letter-spacing: 0.02em; }
    .rb-car__overlay--hero .rb-car__ov-brand { font-size: 10px; }
    .rb-car__overlay--hero .rb-car__ov-title { font-size: 4.7vw; }
    .rb-car__overlay--hero .rb-car__ov-sub { font-size: 11.5px; }
    .rb-cta { margin-top: 36px; padding: 44px 0 52px; }
}

/* ---------- 縦読みストーリー（詳細） ----------
   スライドの本文を、写真つきでそのまま下へ読み進められるようにした読みもの。
   章ごとに 写真 → 本文 → CTA を並べ、読み終えた位置で行動できるようにする。 */
.rb-story {
    background: #fff;
    color: var(--rb-ink);
    padding: 72px 0 80px;
}
.rb-story__heading {
    margin: 0 0 8px;
    font-size: clamp(20px, 3.4vw, 28px);
    font-weight: 900;
    color: var(--rb-navy);
    text-align: center;
}
/* 各章。区切り線ではなく写真で切れ目を見せる */
.rb-story__item {
    padding: 56px 0 0;
    scroll-margin-top: 64px;   /* 固定ヘッダー分。移動時に見出しが隠れない */
}
.rb-story__item:first-of-type { padding-top: 36px; }
.rb-story__label {
    margin: 0 0 6px;
    font-family: var(--font-en); font-style: italic; font-weight: 700;
    font-size: 14px; letter-spacing: 0.12em;
    color: var(--rb-red-strong);
}
.rb-story__title {
    margin: 0 0 16px;
    font-size: clamp(18px, 2.8vw, 23px);
    font-weight: 900; line-height: 1.6;
    color: var(--rb-navy);
}
.rb-story__item:focus { outline: none; } /* 「詳しく読む」で移動したとき枠線を出さない */
.rb-story__body p { margin: 0; font-size: 15px; line-height: 2; }
.rb-story__body strong { color: var(--rb-navy); font-weight: 900; }
/* pptx準拠の色指定は strong の既定色より優先させる（詳細度を合わせる） */
.rb-story__body strong.rb-c-navy  { color: #002060; }
.rb-story__body strong.rb-c-green { color: #008000; }
.rb-story__body strong.rb-c-red   { color: #C00000; }

/* 読了直後のCTA。ここが最後の接点になるので、区切って目立たせる */
.rb-story__cta {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid var(--rb-navy);
    text-align: center;
}
.rb-story__cta-lead {
    margin: 0 0 16px;
    font-size: 15px; font-weight: 700;
    color: var(--rb-navy);
}

/* スライドで見た絵を大きく再掲して、訴求力を落とさない */
.rb-story__lead {
    margin: 0 0 8px;
    text-align: center; font-size: 14px;
    color: rgba(26, 32, 56, 0.72);
}
.rb-story__figure {
    margin: 0 0 26px;
    position: relative;
    background: var(--rb-navy-deep);
    border-radius: 10px; overflow: hidden;
}
.rb-story__figure img { display: block; width: 100%; height: auto; }
/* 写真2枚並びのスライド（4枚目）は横並びのまま再現する */
.rb-story__duo { display: flex; gap: 2px; }
.rb-story__duo img { width: 50%; object-fit: cover; aspect-ratio: 4 / 3; }
/* ロゴのスライド（5枚目）は白地に置いて余白をとる */
.rb-story__figure--logo { background: #fff; }
.rb-story__figure--logo img {
    width: auto; max-width: min(460px, 80%); margin: 24px auto;
}
.rb-story__credit {
    position: absolute; right: 8px; bottom: 6px;
    font-size: 10px; letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.rb-story__figure--logo .rb-story__credit {
    color: rgba(26, 32, 56, 0.6); text-shadow: none;
}
.rb-story__item-cta { margin: 24px 0 0; text-align: center; }

/* スクロールに応じたフェードイン／スライドイン。
   JSが --armed を付けたときだけ隠れるので、JS無効時は最初から全文が読める。 */
.rb-reveal--armed {
    opacity: 0;
    transform: translateY(28px);
}
.rb-reveal--armed.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 写真が出たあとに本文が続く。読む順番どおりに見えるよう少し遅らせる */
.rb-story__text.rb-reveal--armed.is-in { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .rb-reveal--armed { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .rb-story { padding: 48px 0 56px; }
    .rb-story__item { padding: 40px 0 0; }
    .rb-story__item:first-of-type { padding-top: 24px; }
    .rb-story__figure { margin: 0 0 20px; border-radius: 8px; }
    .rb-story__figure--logo img { max-width: 88%; margin: 18px auto; }

    /* CTAは文言が長く2行になる。文字を詰めて行間を締め、
       アイコンが1行目の頭に添うようにして間延びを防ぐ */
    .rb-btn,
    .rb-page a.rb-btn {
        font-size: 15px;
        padding: 14px 22px;
        gap: 8px;
        line-height: 1.5;
        align-items: flex-start;
    }
    .rb-btn i { margin-top: 2px; }
}

/* ---------- 応援メッセージ（#message） ---------- */
/* 提供画像（紺の帯＋白地）が溶け込むよう濃紺の地に置く。本文は文字でも載せる */
.rb-message {
    background: var(--rb-navy-deep);
    color: #fff;
    padding: 64px 0 72px;
    text-align: center;
}
.rb-message__label {
    margin: 0 0 8px;
    font-family: var(--font-en); font-style: italic; font-weight: 700;
    font-size: 16px; letter-spacing: 0.14em;
    color: var(--rb-red);
}
.rb-message__heading {
    margin: 0 0 12px;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 900; line-height: 1.6;
}
.rb-message__lead {
    margin: 0 auto 28px; max-width: 640px;
    font-size: 15px; line-height: 2; color: var(--rb-ice);
}
.rb-message__figure {
    margin: 0 auto 28px; max-width: 900px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.rb-message__figure img { display: block; width: 100%; height: auto; }
.rb-message__quote {
    margin: 0 auto 32px; max-width: 720px;
    text-align: left;
}
.rb-message__quote p {
    margin: 0 0 20px;
    font-size: 16px; line-height: 2.1;
}
.rb-message__who {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.rb-message__title { font-size: 13px; color: var(--rb-ice); letter-spacing: 0.04em; }
.rb-message__name  { font-size: 20px; font-weight: 700; letter-spacing: 0.12em; }
@media (max-width: 640px) {
    .rb-message { padding: 48px 0 56px; }
    .rb-message__quote p { font-size: 15px; line-height: 2; }
}