/* ============================================================
   Diary 求人サイト — Staff (スタッフ紹介) 一覧ページ
   - prefix .rc-sf-* (recruit-staff)
   - ヒーロー/wrap は .rc-bh-* (blog-list.css) を流用
   - グリッド: PC 3列 / タブレット 2列 / モバイル 1列
   - 各カード: 縦長ポートレート + 役職/名前/クオート/「読む」リンク
   ============================================================ */

.rc-sf-main {
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   グリッド
   ============================================================ */
.rc-sf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 36px;
}

/* ============================================================
   スタッフカード
   ============================================================ */
.rc-sf-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}
.rc-sf-card:hover {
    transform: translateY(-3px);
}

/* ポートレート (3:4 縦長) */
.rc-sf-card-image {
    aspect-ratio: 3 / 4;
    background: var(--rch2-line);
    overflow: hidden;
    margin-bottom: 22px;
}
.rc-sf-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.rc-sf-card:hover .rc-sf-card-image img {
    transform: scale(1.04);
}
.rc-sf-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--rch2-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rch2-text-light);
    font-size: 48px;
}

/* テキストエリア */
.rc-sf-card-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 役職 (italic eyebrow) */
.rc-sf-card-role {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.24em;
    margin: 0 0 8px;
}
/* 日本語の役職にもなじむよう、明朝フォールバックを準備
   （内容が英語の場合は italic、日本語の場合も自然に表示される） */

/* 名前 (Noto Serif JP・主役) */
.rc-sf-card-name {
    font-family: var(--rch2-font-serif);
    font-size: 24px;
    color: var(--rch2-text-main);
    letter-spacing: 0.16em;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 16px;
    transition: color 0.3s ease;
}
.rc-sf-card:hover .rc-sf-card-name {
    color: var(--rch2-accent-strong);
}

/* 装飾罫線 */
.rc-sf-card-divider {
    width: 30px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 0 18px;
    transition: width 0.3s ease;
}
.rc-sf-card:hover .rc-sf-card-divider {
    width: 50px;
}

/* クオート */
.rc-sf-card-quote {
    font-family: var(--rch2-font-serif);
    font-size: 14px;
    color: var(--rch2-text-sub);
    line-height: 1.85;
    letter-spacing: 0.05em;
    margin: 0 0 22px;
    /* 4行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}

/* 「Read Interview →」リンク */
.rc-sf-card-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;
    color: var(--rch2-accent-strong);
    letter-spacing: 0.22em;
    margin-top: auto;
    transition: color 0.3s ease;
}
.rc-sf-card-more-text { }
.rc-sf-card-more-line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}
.rc-sf-card-more-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.rc-sf-card:hover .rc-sf-card-more {
    color: var(--rch2-text-main);
}
.rc-sf-card:hover .rc-sf-card-more-line {
    width: 48px;
}
.rc-sf-card:hover .rc-sf-card-more-arrow {
    transform: translateX(4px);
}

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

/* タブレット: 2列 */
@media (max-width: 1024px) {
    .rc-sf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 28px;
    }
    .rc-sf-card-name { font-size: 22px; }
}

/* モバイル: 1列 */
@media (max-width: 768px) {
    .rc-sf-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 420px;                          /* 1列では中央寄せで適度な幅 */
        margin: 0 auto;
    }
    .rc-sf-card-image { margin-bottom: 18px; }
    .rc-sf-card-role { font-size: 12px; letter-spacing: 0.2em; }
    .rc-sf-card-name { font-size: 20px; letter-spacing: 0.12em; margin-bottom: 14px; }
    .rc-sf-card-divider { margin-bottom: 14px; }
    .rc-sf-card-quote { font-size: 13.5px; line-height: 1.8; margin-bottom: 18px; }
}

@media (max-width: 380px) {
    .rc-sf-grid { gap: 40px; }
    .rc-sf-card-name { font-size: 18px; }
}



/* ============================================================
   Staff Detail (個別ページ) — prefix .rc-sd-*
   - ヒーロー無し・パンくず → ヘッダー (ポートレート + 情報) → Interview → Profile → 戻る
   - パンくず・戻るリンクは .rc-bd-* (blog detail のもの) を流用
   ============================================================ */

/* ============================================================
   上部ヘッダー: 縦積み (一覧ページのカードと同じレイアウト)
   - ポートレート (3:4) を上に大きく、情報を下に左寄せ
   ============================================================ */
.rc-sd-header {
    display: flex;
    flex-direction: column;
    max-width: 540px;                              /* 単一カード相当の幅 */
    margin: 0 auto 80px;
    padding-top: 16px;
}

/* ポートレート (3:4) - ヘッダーの上に大きく表示 */
.rc-sd-portrait {
    aspect-ratio: 3 / 4;
    background: var(--rch2-line);
    overflow: hidden;
    margin-bottom: 28px;
}
.rc-sd-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rc-sd-portrait-placeholder {
    width: 100%;
    height: 100%;
    background: var(--rch2-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rch2-text-light);
    font-size: 56px;
}

/* 右: 情報 */
.rc-sd-info {
    display: flex;
    flex-direction: column;
}
.rc-sd-role {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 14px;
    color: var(--rch2-text-light);
    letter-spacing: 0.3em;
    margin: 0 0 16px;
}
.rc-sd-name {
    font-family: var(--rch2-font-serif);
    font-size: 40px;
    color: var(--rch2-text-main);
    letter-spacing: 0.16em;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 22px;
}
.rc-sd-divider {
    width: 40px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 0 24px;
}
.rc-sd-catchphrase {
    font-family: var(--rch2-font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--rch2-text-sub);
    line-height: 1.7;
    letter-spacing: 0.08em;
    margin: 0 0 22px;
}
.rc-sd-quote {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 14px 0 14px 22px;
    border-left: 2px solid var(--rch2-accent-light);
    font-style: italic;
}

/* ============================================================
   セクション共通 (Interview / Profile)
   ============================================================ */
.rc-sd-section {
    max-width: 820px;
    margin: 0 auto 80px;
}
.rc-sd-section:last-of-type {
    margin-bottom: 56px;
}

.rc-sd-section-header {
    text-align: center;
    margin-bottom: 40px;
}
.rc-sd-section-eyebrow {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.36em;
    margin: 0 0 12px;
}
.rc-sd-section-title {
    font-family: var(--rch2-font-serif);
    font-size: 24px;
    color: var(--rch2-text-main);
    letter-spacing: 0.22em;
    font-weight: 500;
    margin: 0 0 14px;
}
.rc-sd-section-divider {
    width: 36px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 auto;
}

/* ============================================================
   Interview: Q&A (editorial style, アコーディオン無し)
   ============================================================ */
.rc-sd-interview {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.rc-sd-q {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0 14px;
    border-bottom: 0.5px solid var(--rch2-line);
}
.rc-sd-a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0 4px;
}
.rc-sd-mark {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}
.rc-sd-mark-q {
    color: var(--rch2-accent);
}
.rc-sd-mark-a {
    color: var(--rch2-accent-strong);
}
.rc-sd-q-text {
    flex: 1;
    font-family: var(--rch2-font-serif);
    font-size: 17px;
    color: var(--rch2-text-main);
    letter-spacing: 0.06em;
    line-height: 1.65;
    font-weight: 500;
    margin: 0;
}
.rc-sd-a-text {
    flex: 1;
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);
    letter-spacing: 0.04em;
    line-height: 1.95;
    margin: 0;
    white-space: pre-wrap;
}

/* インタビュー中の画像 */
.rc-sd-interview-image {
    margin: 16px 0;
}
.rc-sd-interview-image img {
    width: 100%;
    height: auto;
    display: block;
}
.rc-sd-interview-image figcaption {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: 10px;
}

/* ============================================================
   Profile: 画像 + テーブル
   ============================================================ */
.rc-sd-profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}
.rc-sd-profile-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rch2-line);
}
.rc-sd-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rc-sd-profile-list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
}
.rc-sd-profile-list dt {
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.2em;
    font-weight: 500;
    padding: 14px 24px 14px 0;
    border-bottom: 0.5px solid var(--rch2-line);
    white-space: nowrap;
}
.rc-sd-profile-list dd {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-main);
    letter-spacing: 0.06em;
    line-height: 1.6;
    padding: 14px 0;
    margin: 0;
    border-bottom: 0.5px solid var(--rch2-line);
}
.rc-sd-profile-list dt:last-of-type,
.rc-sd-profile-list dd:last-of-type {
    border-bottom: none;
}

/* ============================================================
   フッター: 一覧へ戻る (.rc-bd-list-link は blog-list.css 内で定義済み)
   ============================================================ */
.rc-sd-footer {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 0.5px solid var(--rch2-line);
    text-align: center;
}

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

@media (max-width: 1024px) {
    .rc-sd-header {
        margin-bottom: 64px;
    }
    .rc-sd-name { font-size: 34px; }
    .rc-sd-profile-grid {
        grid-template-columns: 240px 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px) {
    /* ヘッダー (もともと縦積みなのでサイズ調整のみ) */
    .rc-sd-header {
        margin-bottom: 48px;
        padding-top: 8px;
    }
    .rc-sd-portrait {
        margin-bottom: 24px;
    }
    .rc-sd-role { font-size: 12px; letter-spacing: 0.24em; margin-bottom: 12px; }
    .rc-sd-name { font-size: 26px; letter-spacing: 0.12em; margin-bottom: 18px; }
    .rc-sd-divider { margin-bottom: 18px; }
    .rc-sd-catchphrase { font-size: 14.5px; margin-bottom: 18px; }
    .rc-sd-quote { font-size: 14px; padding-left: 18px; line-height: 1.85; }

    /* セクション */
    .rc-sd-section { margin-bottom: 56px; }
    .rc-sd-section-header { margin-bottom: 28px; }
    .rc-sd-section-eyebrow { font-size: 11.5px; letter-spacing: 0.3em; }
    .rc-sd-section-title { font-size: 20px; letter-spacing: 0.16em; }

    /* Interview */
    .rc-sd-interview { gap: 28px; }
    .rc-sd-q, .rc-sd-a { gap: 12px; }
    .rc-sd-mark { font-size: 22px; }
    .rc-sd-q-text { font-size: 15.5px; line-height: 1.6; }
    .rc-sd-a-text { font-size: 14px; line-height: 1.85; }

    /* Profile: 画像→テーブルの縦積み */
    .rc-sd-profile-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .rc-sd-profile-image {
        max-width: 260px;
        margin: 0 auto;
    }
    .rc-sd-profile-list dt { font-size: 12px; padding: 12px 16px 12px 0; }
    .rc-sd-profile-list dd { font-size: 14px; padding: 12px 0; }

    .rc-sd-footer { margin-top: 48px; padding-top: 32px; }
}

@media (max-width: 380px) {
    .rc-sd-name { font-size: 22px; }
    .rc-sd-section-title { font-size: 18px; }
    .rc-sd-q-text { font-size: 14.5px; }
    .rc-sd-a-text { font-size: 13.5px; }
}



/* ============================================================
   Staff Detail (個別ページ) ブランドトーン上書き
   - レイアウト/位置はそのまま (style.css の .rc-staff-* と同じ寸法を維持)
   - 色 (ピンク #E91E90 → ブランドブラウン) と font だけ調整
   - フォールバック背景 (ピンク #fce4ec, 緑グラデ) は brand bg に
   ============================================================ */

/* === ヒーロー: bg image なしの場合のフォールバック背景 (brand トーン) === */
.rc-staff-hero-bg {
    background: var(--rch2-bg-section);          /* #F5EFE6 薄ベージュ */
}

/* === ヒーローカード: ラベル/クオート/メタを brand font に === */
.rc-staff-hero-label {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--rch2-text-light);              /* #A98A6F */
    font-weight: 400;
}
.rc-staff-hero-quote {
    font-family: var(--rch2-font-serif);         /* Noto Serif JP */
    font-size: 22px;
    font-weight: 500;
    color: var(--rch2-text-main);                /* #4A3520 */
    line-height: 1.85;
    letter-spacing: 0.06em;
}
.rc-staff-hero-meta {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-sub);                 /* #6B5544 */
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* === Q/A マーカー: brand color (ピンク→アクセント茶系) === */
.rc-staff-q-mark {
    background: var(--rch2-accent);              /* #B87A56 */
    color: #fff;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-weight: 500;
}
.rc-staff-a-mark {
    background: var(--rch2-bg-section);          /* #F5EFE6 */
    color: var(--rch2-accent-strong);            /* #6B4226 */
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-weight: 500;
}

/* === Q/A テキスト: brand font に === */
.rc-staff-question p {
    font-family: var(--rch2-font-serif);
    color: var(--rch2-text-main);
    font-weight: 500;
    letter-spacing: 0.06em;
}
.rc-staff-answer p {
    font-family: var(--rch2-font-serif);
    color: var(--rch2-text-sub);
    letter-spacing: 0.04em;
    line-height: 1.95;
}

/* === Profile セクション全体: ピンク背景 → ブランド bg === */
.rc-staff-profile-section {
    background: var(--rch2-bg-section);          /* #F5EFE6 薄ベージュ */
    padding: 60px 0;
}

/* === Profile セクションヘッダー: brand 統一 === */
.rc-staff-profile-section .rc-section-label {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.36em;
    text-transform: uppercase;
}
.rc-staff-profile-section .rc-section-title {
    font-family: var(--rch2-font-serif);
    font-size: 24px;
    color: var(--rch2-text-main);
    letter-spacing: 0.22em;
    font-weight: 500;
}

/* === Profile テーブル: ピンク罫線/見出し → ブランド === */
.rc-staff-profile-table th {
    color: var(--rch2-text-light);
    font-family: var(--rch2-font-serif);
    font-weight: 500;
    letter-spacing: 0.12em;
    border-bottom: 0.5px solid var(--rch2-line);
}
.rc-staff-profile-table td {
    color: var(--rch2-text-sub);
    font-family: var(--rch2-font-serif);
    letter-spacing: 0.04em;
    border-bottom: 0.5px solid var(--rch2-line);
}

/* === Profile 画像: 角丸を控えめに (現状 12px → 0 or 4px お好み) === */
.rc-staff-profile-image {
    border-radius: 0;                            /* 角丸撤去でブランド統一 */
}

/* === インタビュー画像: 角丸 → 直線 === */
.rc-staff-interview-image {
    border-radius: 0;
}

/* === Hero カード: 角丸控えめ + brand な微調整 === */
.rc-staff-hero-card {
    border-radius: 0;                            /* 12px → 0 角丸撤去 */
    box-shadow: 0 4px 20px rgba(74, 53, 32, 0.08);  /* brand カラーに合わせた淡い影 */
}

/* ============================================================
   一覧に戻るボタン (brand pill style)
   ============================================================ */
.rc-staff-back-section {
    background: #fff;
    padding: 40px 0 60px;
}
.rc-staff-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rch2-font-serif);
    font-size: 14px;
    color: var(--rch2-text-main);
    letter-spacing: 0.2em;
    text-decoration: none;
    padding: 14px 36px;
    border: 1px solid var(--rch2-text-main);
    border-radius: 999px;                        /* pill */
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}
.rc-staff-back-btn:hover {
    background: var(--rch2-text-main);
    color: #fff;
    transform: translateY(-1px);
}
.rc-staff-back-btn i {
    font-size: 12px;
    transition: transform 0.25s ease;
}
.rc-staff-back-btn:hover i {
    transform: translateX(-3px);
}

/* ============================================================
   モバイル (style.css の既存モバイル設定の brand 追加)
   ============================================================ */
@media (max-width: 768px) {
    .rc-staff-hero-quote { font-size: 18px; line-height: 1.85; }
    .rc-staff-hero-meta { font-size: 13.5px; }
    .rc-staff-hero-label { font-size: 11.5px; letter-spacing: 0.28em; }

    .rc-staff-profile-section { padding: 48px 0; }
    .rc-staff-profile-section .rc-section-title { font-size: 20px; letter-spacing: 0.16em; }

    .rc-staff-back-section { padding: 32px 0 56px; }
    .rc-staff-back-btn { font-size: 13px; padding: 12px 28px; letter-spacing: 0.18em; }
}