/* ============================================================
   Diary 求人サイト v2 — ヘッダー & ヒーロー
   - パレット: ベージュ × テラコッタ × 焦げ茶
   - フォント: 明朝体（見出し）+ ゴシック細め（本文）
   - 質感ルール: グラデ禁止 / 影控えめ / 罫線細く / 余白贅沢に
   - 既存 style.css には触らず、新プレフィックス rc-h2 で衝突回避
   ============================================================ */

:root {
    --rch2-bg-base: #FAF7F2;
    --rch2-bg-section: #F5EFE6;
    --rch2-bg-card: #FFFFFF;
    --rch2-text-main: #4A3520;
    --rch2-text-sub: #6B5544;
    --rch2-text-mute: #8B7565;
    --rch2-text-light: #A98A6F;
    --rch2-accent: #B87A56;
    --rch2-accent-light: #C8987A;
    --rch2-accent-strong: #6B4226;
    --rch2-line: #E8DDD0;
    --rch2-font-serif: "Noto Serif JP", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    --rch2-font-sans: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
    --rch2-font-en: "Cormorant Garamond", "Times New Roman", serif;
    /* 丸ゴ系（モダン・PIAS風）。現状未使用だが将来余地として残置。 */
    --rch2-font-rounded: "Quicksand", "Noto Sans JP", "Yu Gothic", sans-serif;
    /* ディスプレイ用おしゃれ明朝（雑誌・モード系トーン）。
       blog 一覧ヒーロー等の大きい英字タイトルで使用。
       Marcellus: Roman inscription 由来の優雅な serif (PIAS Recruit でも採用)。
       fallback: DM Serif Display → Playfair Display → 和文 Noto Serif JP。 */
    --rch2-font-display: "Marcellus", "DM Serif Display", "Playfair Display", "Noto Serif JP", serif;

    /* マガジン版ヒーロー (.rc-bh-hero--magazine) の大英字 (例: ABOUT US) の色。
       基本情報の brand_hero_en_color で店舗別に上書き可能。
       デフォルトは text-light (薄ベージュ)。 */
    --rch2-hero-en-color: var(--rch2-text-light);
}

/* ============================================================
   ユーティリティ：スクリーンリーダー専用（視覚的には隠すがGoogle/読み上げには読まれる）
   - SEO用のキーワード豊富なh1をデザインに干渉させずに保持する用途
   - clip + position:absolute の標準的 sr-only パターン
   ============================================================ */
.rc-h2-sr-only,
.rc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.rc-h2-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--rch2-bg-card);
    border-bottom: 0.5px solid var(--rch2-line);
    /* 透過 ↔ 白 切替を滑らかに */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ヘッダー透過: ヒーロー上にいる間（PC・タブレット・モバイル共通）。
   ヒーローを過ぎたら白に戻る。.is-over-hero は hero.js が IntersectionObserver で付け外し。 */
.rc-h2-header.is-over-hero {
    background-color: transparent;
    border-bottom-color: transparent;
}
/* 透過時はヒーロー画像背景の上に乗るので、ロゴ・ナビに薄い白ハローで視認性確保 */
.rc-h2-header.is-over-hero .rc-h2-logo-main,
.rc-h2-header.is-over-hero .rc-h2-logo-sub,
.rc-h2-header.is-over-hero .rc-h2-nav-link,
.rc-h2-header.is-over-hero .rc-h2-nav-trigger,
.rc-h2-header.is-over-hero .rc-h2-sublinks a {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}

/* ============================================================
   2026-05-21: サブページ専用「すりガラス白」モード (is-over-hero-sub)
   - トップは透明のまま、サブページはヒーロー画像の上に薄白 (rgba 0.55)
   - backdrop-filter で frosted glass 効果（おしゃれ + 読みやすさ）
   - スクロールで JS が is-over-hero を外したら通常白ヘッダーに戻る
   ============================================================ */
.rc-h2-header.is-over-hero.is-over-hero-sub {
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
/* tint で読みやすいので text-shadow は不要 */
.rc-h2-header.is-over-hero.is-over-hero-sub .rc-h2-logo-main,
.rc-h2-header.is-over-hero.is-over-hero-sub .rc-h2-logo-sub,
.rc-h2-header.is-over-hero.is-over-hero-sub .rc-h2-nav-link,
.rc-h2-header.is-over-hero.is-over-hero-sub .rc-h2-nav-trigger,
.rc-h2-header.is-over-hero.is-over-hero-sub .rc-h2-sublinks a {
    text-shadow: none;
}
.rc-h2-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 2rem;
    min-height: 80px;
}

/* ロゴ */
.rc-h2-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1.2;
}
.rc-h2-logo img {
    height: 50px;
    width: auto;
    display: block;
}
.rc-h2-logo-main {
    font-family: var(--rch2-font-serif);
    font-size: 22px;
    color: var(--rch2-text-main);
    letter-spacing: 0.18em;
    font-weight: 500;
}
.rc-h2-logo-sub {
    font-size: 10px;
    color: var(--rch2-text-light);
    letter-spacing: 0.2em;
    margin-top: 4px;
}

/* ナビ（PC）— ロゴの右に左寄せ。お問い合わせボタンは flex: 1 の余白押し分で右端に残る */
.rc-h2-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    justify-content: flex-start;
    margin-left: 24px;              /* ロゴとの間に呼吸感 */
}
.rc-h2-nav-link {
    font-family: var(--rch2-font-serif);
    font-size: 15px;                          /* 13 → 15 (2026-05-21 読みやすさ改善) */
    color: var(--rch2-text-main);
    letter-spacing: 0.15em;
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    transition: color 0.2s;
}
.rc-h2-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--rch2-accent);
    transition: width 0.25s ease;
}
.rc-h2-nav-link:hover {
    color: var(--rch2-accent);
}
.rc-h2-nav-link:hover::after {
    width: 100%;
}

/* ============================================================
   ナビ ドロップダウングループ（PC）
   - ホバー / フォーカス / クリック (.is-open) で開く
   - 影/グラデ/角丸なしのブランドトーン
   ============================================================ */
.rc-h2-nav-group {
    position: relative;
}
.rc-h2-nav-trigger {
    /* .rc-h2-nav-link と同じ見た目 + chevron + 透明ボタン */
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--rch2-font-serif);
    font-size: 15px;                          /* 13 → 15 (2026-05-21 読みやすさ改善・nav-link と統一) */
    color: var(--rch2-text-main);
    letter-spacing: 0.15em;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
    transition: color 0.2s;
}
.rc-h2-nav-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--rch2-accent);
    transition: width 0.25s ease;
}
.rc-h2-nav-group:hover .rc-h2-nav-trigger,
.rc-h2-nav-group.is-open .rc-h2-nav-trigger,
.rc-h2-nav-trigger:focus-visible {
    color: var(--rch2-accent);
    outline: none;
}
.rc-h2-nav-group:hover .rc-h2-nav-trigger::after,
.rc-h2-nav-group.is-open .rc-h2-nav-trigger::after {
    width: 100%;
}

/* Chevron（小さい下向き矢印） */
.rc-h2-nav-chevron {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.rc-h2-nav-group:hover .rc-h2-nav-chevron,
.rc-h2-nav-group.is-open .rc-h2-nav-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

/* ドロップダウンパネル */
.rc-h2-nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 180px;
    background: var(--rch2-bg-card);
    border: 0.5px solid var(--rch2-line);
    padding: 10px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    /* 角丸/影なし（ブランド制約） */
    border-radius: 0;
    box-shadow: none;
}
/* 2026-05-23: トリガーとドロップダウンの 10px ギャップを透明な橋で繋ぐ。
   これが無いとトリガーからドロップダウンへカーソル移動時にホバーが切れて閉じてしまう。 */
.rc-h2-nav-dropdown::before {
    content: '';
    position: absolute;
    top: -12px;          /* ギャップ 10px をカバー + 余裕 2px */
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}
/* hover/focus-within/.is-open のいずれでも開く */
.rc-h2-nav-group:hover .rc-h2-nav-dropdown,
.rc-h2-nav-group:focus-within .rc-h2-nav-dropdown,
.rc-h2-nav-group.is-open .rc-h2-nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.rc-h2-nav-dropdown a {
    display: block;
    font-family: var(--rch2-font-serif);
    font-size: 14px;                          /* 12.5 → 14 (2026-05-21 メインメニューに合わせて拡大) */
    color: var(--rch2-text-sub);
    letter-spacing: 0.12em;
    padding: 10px 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.rc-h2-nav-dropdown a:hover,
.rc-h2-nav-dropdown a:focus-visible {
    color: var(--rch2-accent-strong);
    background: rgba(184, 122, 86, 0.06);
    outline: none;
}

/* ヒーロー上の透過モードでもドロップダウン本体は白背景 → 視認性確保（text-shadow リセット） */
.rc-h2-header.is-over-hero .rc-h2-nav-dropdown a {
    text-shadow: none;
}

/* 右側: サブリンク + 応募ボタン */
.rc-h2-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.rc-h2-sublinks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}
.rc-h2-sublinks a {
    font-size: 10px;
    color: var(--rch2-text-mute);
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.2s;
}
.rc-h2-sublinks a:hover {
    color: var(--rch2-accent);
}
/* ============================================================
   ヘッダー CTA ボタン — 長丸ピル型・濃色塗り
   - 雑誌的トーンの中で「ここが応募導線」と一目でわかる存在感
   - 角丸は唯一の例外として pill 形状 OK（CLAUDE.md「円以外は角丸なし」の
     ブランド制約の解釈：装飾的な角丸はNG／pill は機能形状としてOK）
   - 影/グラデなしの方針は維持
   ============================================================ */
.rc-h2-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    color: #fff;
    background: var(--rch2-text-main);          /* #4A3520 濃いブラウン */
    letter-spacing: 0.22em;
    text-decoration: none;
    padding: 13px 30px;
    border: 1px solid var(--rch2-text-main);
    border-radius: 999px;                       /* pill */
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.25s ease;
}
.rc-h2-entry-btn::after {
    content: '→';
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.25s ease;
}
.rc-h2-entry-btn:hover {
    background: var(--rch2-accent-strong);      /* #6B4226 一段深いブラウン */
    border-color: var(--rch2-accent-strong);
    transform: translateY(-1px);                /* ふわっと持ち上がる */
}
.rc-h2-entry-btn:hover::after {
    transform: translateX(3px);                 /* 矢印が右にすっと動く */
}

/* ヒーロー上の透過モードでも CTA は濃色 pill のままで視認性 OK
   → text-shadow を打ち消す（白テキストに白ハローはノイズ） */
.rc-h2-header.is-over-hero .rc-h2-entry-btn {
    text-shadow: none;
}

/* ハンバーガー（モバイル/タブレット）— 円形ボタンで視認性UP */
.rc-h2-hamburger {
    display: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(74, 53, 32, 0.18);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rc-h2-hamburger span {
    display: block;
    height: 1.5px;
    width: 20px;
    background: var(--rch2-text-main);
    transition: background-color 0.2s ease;
}
.rc-h2-hamburger:hover,
.rc-h2-hamburger:active {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(74, 53, 32, 0.32);
}

/* ドロワー（モバイル） */
.rc-h2-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.rc-h2-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.rc-h2-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: var(--rch2-bg-card);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    padding: 60px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}
.rc-h2-drawer.is-open {
    transform: translateX(0);
}
.rc-h2-drawer-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: var(--rch2-text-main);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
/* ============================================================
   ドロワー: 3グループ アコーディオン
   - ボタンタップで開閉、chevron が回転
   - 旧 .rc-h2-drawer a (フラット) は使わなくなったので最小化
   ============================================================ */
.rc-h2-drawer-group {
    border-bottom: 0.5px solid var(--rch2-line);
}
.rc-h2-drawer-group-btn {
    appearance: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-main);
    letter-spacing: 0.15em;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
}
.rc-h2-drawer-group.is-open .rc-h2-drawer-group-btn {
    color: var(--rch2-accent);
}
.rc-h2-drawer-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.rc-h2-drawer-group.is-open .rc-h2-drawer-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}
.rc-h2-drawer-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.rc-h2-drawer-group.is-open .rc-h2-drawer-group-body {
    /* 2026-05-22: 320px だとフォント/padding 大きい時に切れる可能性。十分な余裕を確保 */
    max-height: 500px;
}
.rc-h2-drawer-group-body a {
    display: block;
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    color: var(--rch2-text-sub);
    letter-spacing: 0.1em;
    padding: 12px 18px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.rc-h2-drawer-group-body a:last-child {
    padding-bottom: 18px;
}
.rc-h2-drawer-group-body a:hover {
    color: var(--rch2-accent);
}

/* モバイルドロワー応募ボタン — ヘッダー .rc-h2-entry-btn と同じ長丸ピル・濃色塗りトーン */
.rc-h2-drawer-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;                         /* 親 .rc-h2-drawer が flex column なので中央寄せ */
    margin-top: 32px;
    padding: 13px 36px;                         /* PC ヘッダーより少し横長で押しやすく */
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    letter-spacing: 0.22em;
    color: #fff;
    background: var(--rch2-text-main);          /* #4A3520 */
    border: 1px solid var(--rch2-text-main);
    border-radius: 999px;                       /* pill */
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.25s ease;
}
.rc-h2-drawer-entry::after {
    content: '→';
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.25s ease;
}
.rc-h2-drawer-entry:hover {
    background: var(--rch2-accent-strong);
    border-color: var(--rch2-accent-strong);
    transform: translateY(-1px);
}
.rc-h2-drawer-entry:hover::after {
    transform: translateX(3px);
}

/* ============================================================
   ヒーローセクション（背景画像 + 上にテキストを重ねるレイヤー構造）
   - 画像は cover で横幅いっぱい
   - 単色のベージュオーバーレイでテキスト可読性を確保（グラデは禁止のため単色）
   - テキストは左寄せ・最大幅560pxで上品に
   - モバイルは背景重ねをやめ「テキスト → 画像」の縦並びに切替
   ============================================================ */
.rc-h2-hero {
    background: var(--rch2-bg-section);
    position: relative;
    /* overflow: hidden を外して、中の画像レイヤーだけヘッダー裏まではみ出させる */
    /* 2026-05-21 リニューアル: 旧 580px 固定 → ビューポート基準で大型化（サブページと同等のインパクト）。
       ヘッダー透過(is-over-hero)で画像はヘッダー裏まで見えるため、視覚的には約 90vh の迫力。
       上限 780px で 4K/縦長モニターでも巨大化しない。 */
    min-height: min(calc(90vh - 80px), 780px);
    display: flex;
    align-items: stretch;
    /* ヒーロー本体は元の位置のまま（テキストも元の位置を保つ）。
       「画像が上に伸びる」のは .rc-h2-hero-bg / .rc-h2-hero-overlay の top:- で実現する。 */
}
@media (max-width: 1024px) {
    .rc-h2-hero { min-height: min(calc(85vh - 72px), 640px); }
}
@media (max-width: 768px) {
    .rc-h2-hero { min-height: min(calc(80vh - 64px), 540px); }
}

/* 背景画像レイヤー（PC: absolute cover）。
   top を負値にして、ヒーロー本体より上にはみ出し、透過ヘッダーの裏まで画像を広げる。
   数値はヘッダー高さ + 安全マージン:
     - PC      : header min-height 80 + ロゴ50/padding36 実態86 → -100 (14px余裕)
     - Tablet  : header 78 → -90 (12px余裕)
     - Mobile  : header 74 → -84 (10px余裕)
   余裕分は画面外にはみ出るだけで可視領域には影響なし。
   ロゴサイズや padding が増えても隙間が出ないようにしている。 */
.rc-h2-hero-bg {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
}
@media (max-width: 1024px) {
    .rc-h2-hero-bg { top: -90px; }
}
@media (max-width: 768px) {
    .rc-h2-hero-bg { top: -84px; }
}
.rc-h2-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 表示位置（横方向）: 100% = 右端、50% = 中央、0% = 左端。
       スマホでは画像の右側にある被写体を見せたいが、ぴったり右端だと窮屈に見えるので
       80% で「右寄りだけど少し内側」に。微調整するならここの数値を 70〜90% で変える。
       PC は画像が横幅にぴったり収まるため、この値はほぼ無影響。

       表示位置（縦方向）: 0% = 上端、50% = 中央、100% = 下端。
       1920×900 の画像を PC 約 680px 高さのエリアに cover 表示すると上下から各110pxカットされる。
       人物の顔は画像中央よりやや上にあるため center(50%) だと頭頂部・カーテン上部が画面外にはみ出す。
       30% にすることで画像の上部を優先表示し、頭上の余白・カーテン感を残す。
       下に寄せたい場合は 40〜50%、もっと上に寄せたい場合は 15〜25% に。 */
    object-position: 80% 30%;
    display: block;
    /* filter: saturate(0.92) は外した（画像が「モヤっと」見える原因の一つだった）。
       くすませたい場合は 0.85〜0.95 を指定。 */
}

/* オーバーレイ（薄いベージュ単色、テキスト読みやすさのため）。
   背景画像と同じく top:- でヘッダー裏まで広げ、ヘッダー領域でも画像が dim される。
   濃度: 0.4 だと画像がモヤっとするので 0.2 に下げた。
   さらにクリアにしたければ 0.1〜0.15 に、もう一段抑えたければ 0.3 程度に調整可。 */
.rc-h2-hero-overlay {
    position: absolute;
    top: -100px;                                /* hero-bg と同値で揃える */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(250, 247, 242, 0.2);
    pointer-events: none;
}
@media (max-width: 1024px) {
    .rc-h2-hero-overlay { top: -90px; }
}
@media (max-width: 768px) {
    .rc-h2-hero-overlay { top: -84px; }
}

/* テキストコンテナ */
.rc-h2-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 4rem;
    display: flex;
    align-items: center;
}

/* テキストエリア（左寄せ・最大幅で読みやすく） */
.rc-h2-hero-text {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 背景画像の上に重なる時のための、ふわっとした白ハロー（スペック「ふわっと程度はOK」） */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.55);
}
.rc-h2-hero-sub-en {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 14px;
    color: var(--rch2-text-light);
    letter-spacing: 0.4em;
    opacity: 0;
    animation: rch2FadeUp 0.7s ease-out 0.1s forwards;
}
.rc-h2-hero-divider {
    width: 40px;
    height: 1px;
    background: var(--rch2-accent-light);
    margin: 28px 0;
    opacity: 0;
    animation: rch2FadeUp 0.7s ease-out 0.25s forwards;
}
.rc-h2-hero-copy {
    font-family: var(--rch2-font-serif);
    font-size: 52px;                              /* 2026-05-23: 42 → 52 (PCのみ拡大、スマホは @media で28pxのまま) */
    color: var(--rch2-text-main);
    letter-spacing: 0.22em;
    line-height: 1.65;
    font-weight: 500;
    margin: 0;
    opacity: 0;
    animation: rch2FadeUp 0.7s ease-out 0.35s forwards;
}
.rc-h2-hero-accent {
    color: var(--rch2-accent-strong);
}
.rc-h2-hero-desc {
    font-family: var(--rch2-font-sans);
    font-size: 13px;
    color: var(--rch2-text-mute);
    letter-spacing: 0.18em;
    line-height: 1.95;
    margin: 0;
    font-weight: 400;
    opacity: 0;
    animation: rch2FadeUp 0.7s ease-out 0.5s forwards;
}
/* ヒーロー応募ボタン — ヘッダー .rc-h2-entry-btn と同じ長丸ピル・濃色塗りトーンに統一 */
.rc-h2-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    color: #fff;
    background: var(--rch2-text-main);          /* #4A3520 */
    letter-spacing: 0.22em;
    text-decoration: none;
    padding: 13px 30px;
    border: 1px solid var(--rch2-text-main);
    border-radius: 999px;                       /* pill */
    margin-top: 36px;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, transform 0.25s ease;
    opacity: 0;
    animation: rch2FadeUp 0.7s ease-out 0.65s forwards;
}
/* HTML の <span aria-hidden> 矢印を ::after 風に動かす */
.rc-h2-hero-btn > span {
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.25s ease;
}
.rc-h2-hero-btn:hover {
    background: var(--rch2-accent-strong);
    border-color: var(--rch2-accent-strong);
    transform: translateY(-1px);
}
.rc-h2-hero-btn:hover > span {
    transform: translateX(3px);
}

/* 右: 画像エリア */
.rc-h2-hero-image {
    position: relative;
    background: var(--rch2-bg-base);
    overflow: hidden;
    opacity: 0;
    animation: rch2FadeIn 1s ease-out 0.2s forwards;
}
.rc-h2-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
}
.rc-h2-hero-image-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--rch2-text-light);
    background: var(--rch2-bg-base);
}
.rc-h2-hero-image-placeholder::after {
    content: "Image";
    position: absolute;
    bottom: 20px;
    right: 24px;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 14px;
    color: var(--rch2-text-light);
    letter-spacing: 0.2em;
}

/* スクロール誘導 */
.rc-h2-hero-scroll {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--rch2-font-en);
    font-size: 11px;
    color: var(--rch2-text-light);
    letter-spacing: 0.3em;
    animation: rch2ScrollBounce 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* 旧 .rc-h2-hero-separator は撤去（2026-05-18）。
   24px の帯 + 細罫線がヒーロー画像の下にあると「画像足りない」印象になるため。
   concept セクションの top-padding 140px が十分な視覚ブレイクを担う。 */

/* ============================================================
   アニメーション
   ============================================================ */
@keyframes rch2FadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rch2FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes rch2ScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
}

/* アニメーション無効環境 (Windows「アニメーションを表示する」OFF、
   ブラウザのアクセシビリティ設定、企業ポリシー等) では animation が止まり、
   opacity:0 のまま固まってヒーロー要素が見えなくなる。完成形で即表示する。 */
@media (prefers-reduced-motion: reduce) {
    .rc-h2-hero-tagline,
    .rc-h2-hero-divider,
    .rc-h2-hero-copy,
    .rc-h2-hero-sub,
    .rc-h2-hero-btn,
    .rc-h2-hero-image {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .rc-h2-hero-scroll {
        animation: none;
    }
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* タブレット以下: ナビをハンバーガーに */
@media (max-width: 1024px) {
    .rc-h2-nav { display: none; }
    .rc-h2-sublinks { display: none; }
    .rc-h2-hamburger { display: flex; }
    .rc-h2-actions { gap: 12px; }
    .rc-h2-header-inner { padding: 14px 1.5rem; min-height: 72px; }
}

/* モバイル: スマホも「画像全面背景+テキスト重ね」をPCと同じ構造で維持（マダム麗奈式）。
   .rc-h2-hero-bg / .rc-h2-hero-overlay / .rc-h2-hero-inner はPCのabsoluteレイヤーをそのまま継承。
   スマホ向けに padding・フォントサイズだけ調整する。 */
@media (max-width: 768px) {
    .rc-h2-header-inner { padding: 12px 1rem; min-height: 64px; }
    .rc-h2-logo img { height: 40px; }
    .rc-h2-logo-main { font-size: 18px; }
    .rc-h2-logo-sub { font-size: 9px; }
    .rc-h2-entry-btn { display: none; }  /* スマホは応募リンクをドロワー内に集約 */

    .rc-h2-hero-inner {
        padding: 56px 1.5rem;
    }
    .rc-h2-hero-text {
        max-width: none;
        /* text-shadow はPCから継承（背景画像の上に重なるため可読性確保） */
    }
    /* 2026-05-23: スマホでは写真の上に直接テキストが乗るので、8方向の白ストロークで
       縁取りを作って可読性を確保する。写真は一切ぼかさず・隠さず、文字だけ「縁取り」で立たせる方式。 */
    .rc-h2-hero-sub-en,
    .rc-h2-hero-copy,
    .rc-h2-hero-desc {
        /* 8方向の縁取りそれぞれに 2px ブラーを入れ、エッジを柔らかくにじませる。
           最後の 0 0 10px は外側のふわっとしたハロー。 */
        text-shadow:
            -1px -1px 2px #fff,  0 -1px 2px #fff,  1px -1px 2px #fff,
            -1px  0   2px #fff,                     1px  0   2px #fff,
            -1px  1px 2px #fff,  0  1px 2px #fff,  1px  1px 2px #fff,
            0 0 10px rgba(255, 255, 255, 0.85);
    }
    /* サブ英字と説明文は薄いグレー → 濃茶に変更してさらにくっきり */
    .rc-h2-hero-sub-en,
    .rc-h2-hero-desc {
        color: var(--rch2-text-main);
    }
    .rc-h2-hero-copy {
        font-size: 28px;
        letter-spacing: 0.18em;
        line-height: 1.65;
    }
    .rc-h2-hero-divider { margin: 22px 0; }
    .rc-h2-hero-btn {
        /* pill 形状を維持。stretch すると横長になりすぎるので auto 幅で中央寄せ */
        align-self: flex-start;
        justify-content: center;
        margin-top: 28px;
        padding: 13px 36px;                     /* スマホはちょい横長で押しやすく */
    }
    /* スクロール誘導はスマホでも表示（PCの定義をそのまま継承） */
}

/* 小型モバイル */
@media (max-width: 380px) {
    .rc-h2-hero-copy { font-size: 23px; }
    .rc-h2-hero-text { padding: 40px 1.2rem 48px; }
}