/* ============================================================
   Diary 求人サイト v2 — 3カードセクション群
   - Section 1: 3つの価値（横並び3カード・上画像/下テキスト）
   - Section 2: 求める人材（縦並び3カード・左右交互レイアウト）
   - Section 3: 在籍キャストの声（横並び3カード）
   - リズム: 横 → 縦 → 横 で視覚的な単調さを避ける
   - フォント/色変数は hero.css の :root を流用、フェードインは concept.css の .rc-fade-up
   ============================================================ */

/* ============================================================
   セクション見出し（3セクション共通の再利用パーツ）
   ============================================================ */
.rc-h2-section-header {
    text-align: center;
    margin-bottom: 64px;
}
.rc-h2-section-eyebrow {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.4em;
    margin: 0 0 18px;
}
.rc-h2-section-title {
    font-family: var(--rch2-font-serif);
    font-size: 26px;
    color: var(--rch2-text-main);
    letter-spacing: 0.25em;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 28px;
}
.rc-h2-section-divider {
    width: 40px;
    height: 1px;
    background: var(--rch2-accent-light);
    margin: 0 auto;
}

/* ============================================================
   Section 1: 3つの価値（横並び3カード）
   ============================================================ */
.rc-h2-promises {
    background: var(--rch2-bg-section);  /* #F5EFE6 — 交互パターン一貫性 (2026-05-20 hero→bg-base, この sec→bg-section) */
    padding: 120px 4rem;
}
.rc-h2-promises-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.rc-h2-promises-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.rc-h2-promise-card {
    background: #fff;
    border: 1px solid var(--rch2-line);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 画像（上） */
.rc-h2-promise-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--rch2-bg-section);
    overflow: hidden;
}
.rc-h2-promise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
}
.rc-h2-promise-image-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rch2-text-light);
    font-size: 32px;
    background: var(--rch2-bg-section);
}
.rc-h2-promise-image-placeholder::after {
    content: attr(data-label);
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 11px;
    color: var(--rch2-text-light);
    letter-spacing: 0.2em;
}

/* テキスト（下） */
.rc-h2-promise-body {
    padding: 36px 32px 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.rc-h2-promise-number {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;
    color: var(--rch2-accent-light);
    letter-spacing: 0.3em;
    margin: 0 0 6px;
}
.rc-h2-promise-en {
    font-family: var(--rch2-font-en);
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.3em;
    margin: 0 0 12px;
}
.rc-h2-promise-title {
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    color: var(--rch2-text-main);
    letter-spacing: 0.15em;
    line-height: 1.5;
    font-weight: 500;
    margin: 0 0 20px;
}
.rc-h2-promise-line {
    width: 24px;
    height: 1px;
    background: var(--rch2-accent-light);
    margin: 0 0 20px;
}
.rc-h2-promise-desc {
    font-family: var(--rch2-font-serif);
    font-size: 15px;                            /* 13 → 15 でカード説明の可読性UP */
    color: var(--rch2-text-sub);
    letter-spacing: 0.07em;
    line-height: 1.85;
    margin: 0;
}

/* ============================================================
   Section 2: 求める人材（縦並び3カード・左右交互）
   ============================================================ */
.rc-h2-ideal {
    background: var(--rch2-bg-base);  /* #FAF7F2 — 交互パターン一貫性 */
    padding: 120px 4rem;
}
.rc-h2-ideal-inner {
    max-width: 900px;
    margin: 0 auto;
}
.rc-h2-ideal-list {
    display: flex;
    flex-direction: column;
    gap: 44px;
}
.rc-h2-ideal-card {
    display: flex;
    background: #fff;
    border: 1px solid var(--rch2-line);
    border-radius: 3px;
    overflow: hidden;
    align-items: stretch;
}
/* 全カード「画像左、テキスト右」で統一（左右交互配置は廃止） */

/* 画像（常に左、横長 4:3） */
.rc-h2-ideal-image {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    position: relative;
    background: var(--rch2-bg-section);
    overflow: hidden;
}
.rc-h2-ideal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92);
}
.rc-h2-ideal-image-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rch2-text-light);
    font-size: 32px;
    background: var(--rch2-bg-section);
}
.rc-h2-ideal-image-placeholder::after {
    content: attr(data-label);
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 11px;
    color: var(--rch2-text-light);
    letter-spacing: 0.2em;
}

/* テキスト（タイトル + 本文の2層構造、余白控えめ） */
.rc-h2-ideal-body {
    flex: 1;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rc-h2-ideal-title {
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    color: var(--rch2-text-main);
    letter-spacing: 0.08em;
    line-height: 1.6;
    font-weight: 500;
    margin: 0 0 14px 0;
}
.rc-h2-ideal-desc {
    font-family: var(--rch2-font-serif);
    font-size: 15px;                            /* 13 → 15 */
    color: var(--rch2-text-sub);
    letter-spacing: 0.06em;
    line-height: 1.85;
    margin: 0;
}

/* ============================================================
   Section 3: 在籍キャストの声（横並び3カード + すべて見るリンク）
   ============================================================ */
.rc-h2-voice {
    background: var(--rch2-bg-section);  /* #F5EFE6 — 交互パターン一貫性 */
    padding: 120px 4rem;
}
.rc-h2-voice-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.rc-h2-voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.rc-h2-voice-card {
    background: #fff;
    border: 1px solid var(--rch2-line);
    border-radius: 3px;
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
}
.rc-h2-voice-quote {
    font-family: var(--rch2-font-serif);
    font-size: 48px;
    line-height: 1;
    color: var(--rch2-accent-light);
    margin: 0 0 8px;
    user-select: none;
}
.rc-h2-voice-body {
    font-family: var(--rch2-font-serif);
    font-size: 15px;                            /* 13.5 → 15 */
    color: var(--rch2-text-sub);
    letter-spacing: 0.06em;
    line-height: 1.95;
    margin: 0;
    flex: 1;
    white-space: pre-wrap;                      /* 改行保持（口コミページと同じ挙動） 2026-05-20 */
}
.rc-h2-voice-line {
    width: 32px;
    height: 1px;
    background: var(--rch2-line);
    margin: 24px 0;
}
.rc-h2-voice-author {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12.5px;
    color: var(--rch2-text-light);
    letter-spacing: 0.15em;
    margin: 0;
}

/* 「すべての声を見る」リンク（コンセプトの link スタイルを中央寄せで流用） */
.rc-h2-voice-more-wrap {
    margin-top: 56px;
    text-align: center;
}
.rc-h2-voice-more-wrap .rc-h2-concept-link {
    margin-top: 0;  /* concept-link 既定の margin-top をリセット */
}

/* 「待遇・環境について」リンク（3つの安心セクション直下、上と同じ作り） */
.rc-h2-promises-more-wrap {
    margin-top: 56px;
    text-align: center;
}
.rc-h2-promises-more-wrap .rc-h2-concept-link {
    margin-top: 0;
}

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

/* タブレット中間: 横並び3カードを2列に */
@media (max-width: 1024px) {
    .rc-h2-promises { padding: 100px 2.5rem; }
    .rc-h2-ideal { padding: 100px 2.5rem; }
    .rc-h2-voice { padding: 100px 2.5rem; }
    .rc-h2-promises-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rc-h2-voice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rc-h2-ideal-body { padding: 24px 28px; }
    /* PC既定の font-size: 17px をそのまま使うので title の上書きは不要 */
}

/* モバイル: 全て1列縦並び */
@media (max-width: 768px) {
    .rc-h2-promises { padding: 88px 1.5rem; }
    .rc-h2-ideal { padding: 88px 1.5rem; }
    .rc-h2-voice { padding: 88px 1.5rem; }

    .rc-h2-section-header { margin-bottom: 48px; }
    .rc-h2-section-eyebrow { font-size: 12px; letter-spacing: 0.35em; margin-bottom: 16px; }
    .rc-h2-section-title { font-size: 20px; letter-spacing: 0.2em; margin-bottom: 22px; }

    .rc-h2-promises-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .rc-h2-promise-body { padding: 28px 24px 32px; }

    .rc-h2-ideal-list { gap: 24px; }
    /* モバイルは画像→テキストの縦並び（PCの「画像左/テキスト右」を縦に展開） */
    .rc-h2-ideal-card {
        flex-direction: column;
    }
    .rc-h2-ideal-image {
        width: 100%;
        aspect-ratio: 4 / 3;  /* 横長キープ */
    }
    .rc-h2-ideal-body { padding: 24px 20px; }
    .rc-h2-ideal-title { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
    .rc-h2-ideal-desc { font-size: 13px; line-height: 1.9; }

    .rc-h2-voice-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rc-h2-voice-card { padding: 28px 24px 32px; }
    .rc-h2-voice-quote { font-size: 40px; }
    .rc-h2-voice-body { font-size: 13px; line-height: 1.9; }
    .rc-h2-voice-more-wrap { margin-top: 40px; }
}

/* 小型モバイル */
@media (max-width: 380px) {
    .rc-h2-promises,
    .rc-h2-ideal,
    .rc-h2-voice { padding: 72px 1.2rem; }
    .rc-h2-section-title { font-size: 18px; }
}

/* ============================================================
   在籍キャストの声 — Swiper 横スライド対応
   - 旧 .rc-h2-voice-grid は廃止、Swiper でカルーセル化
   - PC: 3枚表示 / タブレット: 2.2 / モバイル: 1.1（次がチラ見え）
   - ナビボタン・ページネーションはブランドトーンに合わせて調整
   ============================================================ */
.rc-h2-voice-swiper {
    position: relative;
    padding: 4px 0 56px;  /* 下に pagination 用の余白 */
    overflow: hidden;
}
.rc-h2-voice-swiper .swiper-wrapper {
    align-items: stretch;
}
.rc-h2-voice-swiper .swiper-slide {
    height: auto;  /* スライド高さを揃える（中の card が flex で伸びる） */
    display: flex;
}
.rc-h2-voice-swiper .rc-h2-voice-card {
    width: 100%;  /* slide 内で全幅 */
}

/* ナビゲーションボタン（テラコッタの薄背景に丸ボタン） */
.rc-h2-voice-nav {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--rch2-line);
    border-radius: 50%;
    color: var(--rch2-accent);
    transition: background-color 0.2s, color 0.2s;
    margin-top: -28px;  /* pagination 分のオフセット */
}
.rc-h2-voice-nav::after {
    font-size: 14px;
    font-weight: 700;
}
.rc-h2-voice-nav:hover {
    background: var(--rch2-accent);
    color: #fff;
}

/* ページネーションドット */
.rc-h2-voice-pagination {
    bottom: 0 !important;
}
.rc-h2-voice-pagination .swiper-pagination-bullet {
    background: var(--rch2-text-mute);
    opacity: 0.4;
    width: 8px;
    height: 8px;
    transition: opacity 0.2s, background-color 0.2s;
}
.rc-h2-voice-pagination .swiper-pagination-bullet-active {
    background: var(--rch2-accent);
    opacity: 1;
}

/* author 行の投稿日表記 (Marcellus 系の数字で品良く、サイズも視認できる大きさに) */
.rc-h2-voice-author-date {
    font-family: var(--rch2-font-display);   /* Marcellus — 数字が雑誌的に映える */
    font-style: normal;
    color: var(--rch2-text-sub);             /* mute → sub で少し濃く */
    font-size: 14px;                          /* 11px相当 → 14px 視認可能に */
    margin-left: 6px;
    letter-spacing: 0.06em;
}

/* 空状態 */
.rc-h2-voice-empty {
    text-align: center;
    color: var(--rch2-text-mute);
    padding: 40px 0;
    font-family: var(--rch2-font-serif);
}

/* モバイル: ナビボタン小さめに */
@media (max-width: 768px) {
    .rc-h2-voice-nav { width: 34px; height: 34px; }
    .rc-h2-voice-nav::after { font-size: 12px; }
    .rc-h2-voice-swiper { padding: 4px 0 48px; }
}