/* ============================================================
   Diary 求人サイト — Blog List ページ
   - prefix .rc-bh-* (recruit blog h2 系)。既存 .rc-blog-* と分離
   - 雑誌的・上品トーン。角丸はタグピルのみ。影/グラデ禁止
   - フォント/色は hero.css の :root を流用
   ============================================================ */

/* 全体 wrap: 背景は全幅で敷く（body bg #f5f0eb との色違いを隠す）。
   中の要素 (.rc-bh-hero / .rc-bh-cats / .rc-bh-grid) で個別に max-width を取って中央寄せ。
   トップページの各セクションと同じ「全幅背景 + 内側 inner 幅制限」設計。 */
.rc-bh-wrap {
    padding: 80px 6rem 32px;
    /* body のグラデーションを見せるため透明 (旧: --rch2-bg-base ベタ塗り) */
    background: transparent;
}
/* 各内側要素の max-width を 1100px に統一して中央寄せ。
   hero 内の text-align: left は維持 → ヒーロー文字は左揃え + グリッドのカードも左揃え
   → 左端ピシッと一直線になる。 */
.rc-bh-hero,
.rc-bh-cats {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   ヒーロー（明朝のおしゃれ系 + 左寄せ）
   - "Blog" は Cormorant Garamond italic（雑誌の表紙タイトル風）
   - 日本語タイトルとリードは Noto Serif JP（トップ本文と同じ明朝）
   - 全部 :root の共通フォント変数経由でセントラル管理
   ============================================================ */
.rc-bh-hero {
    text-align: left;
    padding: 48px 0 56px;
    /* max-width は 1100px 統一指定（上の共通ルール）で適用 */
}
.rc-bh-hero-en {
    font-family: var(--rch2-font-display);       /* Marcellus (Roman inscription系の優雅な serif) */
    font-style: normal;
    font-size: 88px;
    color: var(--rch2-text-main);                /* #4A3520 */
    letter-spacing: 0.04em;
    font-weight: 400;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;                   /* 必ず大文字（Blog → BLOG）*/
}
.rc-bh-hero-title {
    font-family: var(--rch2-font-serif);         /* Noto Serif JP (トップ本文と統一) */
    font-size: 20px;
    color: var(--rch2-text-sub);                 /* やや薄め #6B5544 */
    letter-spacing: 0.22em;
    font-weight: 500;
    margin: 18px 0 20px;
}
.rc-bh-hero-divider {
    width: 36px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 0 24px;
}
.rc-bh-hero-lead {
    font-family: var(--rch2-font-serif);         /* Noto Serif JP (他箇所と同じ明朝) */
    font-size: 16px;                             /* 14 → 16 (PC本文標準サイズ) */
    color: var(--rch2-text-sub);
    line-height: 1.9;
    letter-spacing: 0.08em;
    margin: 0;
    font-weight: 400;
}

/* ============================================================
   ヒーロー: マガジン版 (about ページなど画像付き)
   - 2026-05-21 大インパクト型リニューアル (pias-recruit.jp 風)
     - 画像は画面高さの 85% (max 800px) でフルブリード
     - 画像の左端を clip-path で斜めにカット (雑誌的)
     - 英字は超巨大 (clamp 80〜200px)、画像エリアにオーバーラップ
     - 親 .rc-bh-wrap の padding-top を負marginで完全に潰す
   - 旧設計 (4:3 / max-height 580px) は中央寄せ・小さい印象だったため変更
   ============================================================ */
.rc-bh-hero--magazine {
    max-width: none !important;     /* 1100px 制約を外す */
    /* 2026-05-21 ヘッダー透過対応:
       wrap padding-top(80) + ヘッダー(86) + border(1) + サブピクセル余裕(9) = 176px overshoot。
       overflow: hidden で上にはみ出した分は自動クリップ。 */
    margin: -176px -6rem 96px -6rem;  /* 2026-05-21 下余白 56 → 96px (ヒーロー直下のブロックとの間を広げる) */
    padding: 0;
    text-align: left;
    overflow: hidden;
    /* 2026-05-21 最終調整: ユーザー希望「下に約 50px の余白」
       96vh で固定 (margin overshoot -10 を差し引いて見た目 95vh ≈ viewport - 50px)。
       height で固定 (min/max両指定相当) して子要素が伸ばさないよう保険。 */
    height: 96vh;
}
.rc-bh-hero-mag-inner {
    /* 2026-05-21 修正: 旧 max-width: 1800px + margin: 0 auto は 1920px画面で左右60px空きを発生させていた。
       max-width を撤去してビューポート全幅 (full-bleed) に。 */
    width: 100%;
    display: grid;
    /* 左: text 固定 200〜380px / 右: 画像 1fr (残り全部)
       → 1920px画面: text 380px + 画像 1464px (ビューポート右端まで)
       → 1440px画面: text 320px + 画像 1080px (同上) */
    grid-template-columns: minmax(200px, 380px) minmax(0, 1fr);
    /* 2026-05-21 重要: grid track 高さを 1fr で明示しないと、min-content で計算されて
       画像セルが本来より低くなり「画像上部に空き」が発生する。1fr で親の min-height を満たす。 */
    grid-template-rows: 1fr;
    align-items: stretch;            /* 画像セルとテキストを縦いっぱい */
    gap: 0;
    /* 親と同じ高さに固定 (height だと親の box を満たす) */
    height: 100%;
    /* 左端: viewport から 約 4vw (76px on 1920) で控えめに左寄せ。最小 40px */
    padding-left: max(40px, 4vw);
    padding-right: 0;                /* 画像がビューポート右端ピッタリまで */
}
.rc-bh-hero-mag-text {
    position: relative;
    z-index: 2;                      /* 英字が画像の上に来る */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 2026-05-21 ヘッダー透過対応:
       padding-top に header 80px ぶん加算 (160 = 80 base + 80 header)。
       これでテキストが視覚的にヘッダー直下から中央寄せされる。 */
    padding: 160px 30px 80px 0;
}
/* 英字: 背景と同系色の薄色、画像エリアにはみ出す */
.rc-bh-hero-mag-text .rc-bh-hero-en {
    font-size: clamp(68px, 7vw, 130px);     /* 中インパクト型 (元 56〜100px から +20%程度) */
    color: var(--rch2-hero-en-color);        /* 基本情報の brand_hero_en_color で上書き可能 */
    opacity: 0.35;                          /* 薄めて背景に溶け込ませる (旧 0.45) */
    letter-spacing: 0.04em;
    line-height: 0.9;
    margin: 0 0 8px;
    white-space: nowrap;
    width: max-content;
    pointer-events: none;
}
.rc-bh-hero-mag-text .rc-bh-hero-title {
    font-size: 17px;
    margin: 24px 0 18px;
    line-height: 1.65;
    color: var(--rch2-text-main);
}
.rc-bh-hero-mag-text .rc-bh-hero-divider {
    margin: 0 0 22px;
}
.rc-bh-hero-mag-text .rc-bh-hero-lead {
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.1em;
    color: var(--rch2-text-sub);
}
/* 画像エリア: グリッドセル幅・高さをフルに使う (旧 aspect-ratio 4:3 制約は撤去)
   - 横幅は grid セル幅、高さは親 min-height(85vh/800px) を継承
   - 左端を clip-path で斜めにカット (top-left 10% / bottom-left 0%) */
.rc-bh-hero-mag-image {
    position: relative;
    z-index: 1;
    /* 2026-05-21: align-self: stretch を明示 + height: 100% + min-height: 100% で
       grid セルを完全に埋める (一部ブラウザで stretch が暗黙的に効かない場合への保険) */
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--rch2-line);
    /* 左端を斜めにカット: 雑誌的なエッジ (top側を右に10%凹ませる) */
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    /* ページロード時、左→右へマスクが開いて画像が現れる演出 */
    animation: rc-mag-mask-reveal 1.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.rc-bh-hero-mag-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;                /* 画像比率を保ちつつ領域いっぱい */
    object-position: center;
    display: block;
}

/* Mask Reveal: 右端から斜めの最終形へ clip-path で画像が現れる
   開始: 画像が右端に完全に潰れた状態 (4点とも右端)
   終了: 最終形 polygon (top-left 10% / bottom-left 0%) で斜めエッジ表示 */
@keyframes rc-mag-mask-reveal {
    0%   { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
    100% { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
}

/* アクセシビリティ: OS の「動きを減らす」設定では発動しない (最終形は維持) */
@media (prefers-reduced-motion: reduce) {
    .rc-bh-hero-mag-image {
        animation: none;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* タブレット (1024px 以下): 画像高さ・英字サイズを抑える */
@media (max-width: 1024px) {
    .rc-bh-hero--magazine {
        /* タブレット: 70(wrap) + 78(header) + 1(border) + 9(buffer) = 158px の overshoot */
        margin: -158px -3rem 72px -3rem;  /* タブレット: 下余白 48 → 72px */
        /* PC と同じ 96vh で固定 (下に約 50px 余白) */
        height: 96vh;
    }
    .rc-bh-hero-mag-inner {
        grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
        padding-left: max(24px, 3vw);
        padding-right: 0;
        height: 100%;
    }
    .rc-bh-hero-mag-text {
        /* padding-top: 142 (header overlap分) + 余白 */
        padding: 142px 24px 50px 0;
    }
    .rc-bh-hero-mag-text .rc-bh-hero-en {
        font-size: clamp(56px, 6.5vw, 96px);
    }
}

/* スマホ (768px 以下): 縦積みに、wrap padding を活かす */
@media (max-width: 768px) {
    .rc-bh-hero--magazine {
        margin: 0 0 40px 0;            /* ブロックとの間 40px */
        overflow: visible;
        /* 2026-05-21 重要: スマホでは PC 用の height: 96vh をリセット。
           モバイルは縦積みレイアウトなのでコンテンツ依存の高さに戻す。
           96vh のままだと URL バー出現時/非表示時で高さが変動して
           「スクロールしたら大きさが変わる」現象が発生する。 */
        height: auto;
    }
    .rc-bh-hero-mag-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: 0;
        max-height: none;
        padding: 0;
        /* PC base の height: 100% もリセット (縦積みなので不要) */
        height: auto;
    }
    .rc-bh-hero-mag-text {
        padding: 0;
        order: 1;
    }
    .rc-bh-hero-mag-image {
        order: 2;
        aspect-ratio: 4 / 3;             /* スマホは縦積みなので 4:3 で OK */
        max-width: 100%;
        height: auto;
        max-height: 280px;
        clip-path: none;                  /* スマホでは斜めカット解除 (横並びじゃないので不自然) */
    }
    .rc-bh-hero-mag-text .rc-bh-hero-en {
        font-size: clamp(56px, 15vw, 88px);
        white-space: normal;
        width: auto;
    }
    .rc-bh-hero-mag-text .rc-bh-hero-title { font-size: 17px; margin: 18px 0 18px; letter-spacing: 0.18em; }
    .rc-bh-hero-mag-text .rc-bh-hero-divider { margin-bottom: 20px; }
    .rc-bh-hero-mag-text .rc-bh-hero-lead { font-size: 14.5px; line-height: 1.85; letter-spacing: 0.06em; }
}

/* ============================================================
   カテゴリ絞り込み（タグピル）
   - トップページのセクション間と同じく、区切り線は入れない（自然な余白で繋ぐ）
   ============================================================ */
.rc-bh-cats {
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 48px;
}
.rc-bh-cats-eyebrow {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 14px;                             /* 11 → 14 */
    color: var(--rch2-text-light);
    letter-spacing: 0.3em;
    margin: 0 0 22px;
}
/* ピル群: 3列グリッド構成
   - 1行目「すべて」を中央に独立配置 (grid-column: 1 / -1 で全列スパン)
   - 2行目以降は3列ずつカテゴリが並ぶ (PC)
   - モバイルは2列に縮小 */
.rc-bh-cats-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;                              /* row 28px, column 24px */
    max-width: 680px;
    margin: 0 auto;
    justify-items: center;
}
/* 1個目 (「すべて」) は3列分のスペースで中央配置 */
.rc-bh-cats-pills > .rc-bh-pill:first-child {
    grid-column: 1 / -1;
}
/* 各ピル: 薄ベージュ背景 + 細罫線で「ちょっとしたカード感」を出す
   - 殺風景感を解消、おしゃれは維持
   - 「すべて」(:first-child) は濃色強調で別格扱い */
.rc-bh-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    width: 100%;
    box-sizing: border-box;
    background: var(--rch2-bg-section);          /* #F5EFE6 薄ベージュ */
    border: 0.5px solid var(--rch2-line);
    border-radius: 0;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    line-height: 1.2;
}

/* 「すべて」だけ濃色: 主役感を出す */
.rc-bh-cats-pills > .rc-bh-pill:first-child {
    background: var(--rch2-text-main);           /* #4A3520 濃ブラウン */
    border-color: var(--rch2-text-main);
}

/* 名前: 明朝・主役 */
.rc-bh-pill-name {
    font-family: var(--rch2-font-serif);
    font-size: 15px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    line-height: 1.2;
    transition: color 0.3s ease;
}
/* 「すべて」名は白系で反転 */
.rc-bh-cats-pills > .rc-bh-pill:first-child .rc-bh-pill-name {
    color: var(--rch2-bg-base);                  /* #FAF7F2 オフホワイト */
}

/* 件数: italic Cormorant Garamond で大きく主役感 */
.rc-bh-pill-count {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 24px;
    color: var(--rch2-text-light);
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color 0.3s ease;
    font-weight: 500;
}
/* 「すべて」件数は薄ベージュで反転 */
.rc-bh-cats-pills > .rc-bh-pill:first-child .rc-bh-pill-count {
    color: var(--rch2-accent-light);             /* #C8987A 薄テラコッタ */
}

/* ホバー: 通常カテゴリ → 一段濃く + ふんわり浮上 */
.rc-bh-pill:hover {
    background: var(--rch2-bg-card);             /* #FFFFFF 白でフォーカス */
    border-color: var(--rch2-accent-light);
    transform: translateY(-2px);
}
.rc-bh-pill:hover .rc-bh-pill-name {
    color: var(--rch2-accent-strong);
}
.rc-bh-pill:hover .rc-bh-pill-count {
    color: var(--rch2-accent);
}
/* 「すべて」ホバー: もう一段深く */
.rc-bh-cats-pills > .rc-bh-pill:first-child:hover {
    background: var(--rch2-accent-strong);       /* #6B4226 */
    border-color: var(--rch2-accent-strong);
}
.rc-bh-cats-pills > .rc-bh-pill:first-child:hover .rc-bh-pill-name {
    color: var(--rch2-bg-base);                  /* 白系維持 */
}
.rc-bh-cats-pills > .rc-bh-pill:first-child:hover .rc-bh-pill-count {
    color: var(--rch2-bg-base);
}

/* アクティブ（選択中）: 濃色塗りで「選ばれてる」を一目で */
.rc-bh-pill.is-active {
    background: var(--rch2-accent-strong);       /* #6B4226 一段深いブラウン */
    border-color: var(--rch2-accent-strong);
}
.rc-bh-pill.is-active .rc-bh-pill-name,
.rc-bh-pill.is-active .rc-bh-pill-count {
    color: var(--rch2-bg-base);
}

/* ============================================================
   2カラム グリッド
   ============================================================ */
.rc-bh-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   メイン: 記事カード
   ============================================================ */
.rc-bh-list {
    display: flex;
    flex-direction: column;
}
.rc-bh-card {
    padding: 0;
    margin-bottom: 56px;                         /* 罫線撤去・余白だけで区切り（トップと統一） */
}
.rc-bh-card:last-child {
    margin-bottom: 0;
}
.rc-bh-card-link {
    display: flex;
    gap: 24px;
    text-decoration: none;
    color: inherit;
}
.rc-bh-card-image {
    flex: 0 0 200px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rch2-line);
}
.rc-bh-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.rc-bh-card-link:hover .rc-bh-card-image img {
    transform: scale(1.03);
}
.rc-bh-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--rch2-line);
}
.rc-bh-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rc-bh-card-meta {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 16px;                             /* 2026-05-24: 全箇所統一 (PC 16 / SP 14) */
    color: var(--rch2-text-mute);                /* 2026-05-24: light → mute (視認性UP) */
    letter-spacing: 0.18em;
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.rc-bh-card-cat {
    font-family: var(--rch2-font-serif);
    font-style: normal;
    color: var(--rch2-text-sub);                 /* light → sub で一段濃く、認識しやすく */
    letter-spacing: 0.08em;
    font-weight: 500;                            /* 中太でカテゴリ感を出す */
}
.rc-bh-card-sep {
    color: var(--rch2-line);
}
.rc-bh-card-title {
    font-family: var(--rch2-font-serif);
    font-size: 19px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 12px;
    transition: color 0.3s ease;
}
.rc-bh-card-link:hover .rc-bh-card-title {
    color: var(--rch2-accent-strong);
}
.rc-bh-card-excerpt {
    font-family: var(--rch2-font-serif);
    font-size: 13px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
    margin: 0 0 18px;
    /* 3行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 続きを読むリンク（コンセプトリンクと同系統） */
.rc-bh-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-bh-card-more-text { }
.rc-bh-card-more-line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}
.rc-bh-card-more-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.rc-bh-card-link:hover .rc-bh-card-more {
    color: var(--rch2-text-main);
}
.rc-bh-card-link:hover .rc-bh-card-more-line {
    width: 48px;
}
.rc-bh-card-link:hover .rc-bh-card-more-arrow {
    transform: translateX(4px);
}

/* 空状態 */
.rc-bh-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--rch2-text-light);
    font-family: var(--rch2-font-serif);
    font-size: 14px;
}

/* ============================================================
   ページネーション
   ============================================================ */
.rc-bh-pagination {
    text-align: center;
    padding: 64px 0 32px;
}
.rc-bh-pagination-status {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 16px;                             /* 12 → 16 (2026-05-21 視認性UP) */
    color: var(--rch2-text-light);
    letter-spacing: 0.36em;
    margin: 0 0 20px;
}
.rc-bh-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}
.rc-bh-page-prev,
.rc-bh-page-next {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 17px;                             /* 14 → 17 */
    letter-spacing: 0.18em;
    text-decoration: none;
    color: var(--rch2-accent-strong);
    transition: color 0.3s ease;
}
.rc-bh-page-prev:hover,
.rc-bh-page-next:hover {
    color: var(--rch2-text-main);
}
.rc-bh-page-prev.is-disabled,
.rc-bh-page-next.is-disabled {
    color: var(--rch2-line);
    cursor: default;
    pointer-events: none;
}
.rc-bh-page-nums {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rc-bh-page-num {
    font-family: var(--rch2-font-en);
    font-size: 17px;                             /* 14 → 17 */
    color: var(--rch2-text-sub);
    padding: 0 6px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.rc-bh-page-num:hover {
    color: var(--rch2-text-main);
}
.rc-bh-page-num.is-current {
    color: var(--rch2-text-main);
    border-bottom: 1px solid var(--rch2-accent-light);
    padding-bottom: 2px;
}
.rc-bh-page-ellipsis {
    font-family: var(--rch2-font-en);
    font-size: 14px;
    color: var(--rch2-text-mute);
    padding: 0 4px;
}

/* ============================================================
   サイドバー
   ============================================================ */
.rc-bh-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.rc-bh-side-block {
    margin-bottom: 48px;
}
.rc-bh-side-block:last-child {
    margin-bottom: 0;
}
.rc-bh-side-header {
    text-align: left;
    margin-bottom: 18px;
}
.rc-bh-side-eyebrow {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;                             /* 10 → 13 (見出しが沈まない) */
    color: var(--rch2-text-light);
    letter-spacing: 0.32em;
    margin: 0 0 10px;
}
.rc-bh-side-title {
    font-family: var(--rch2-font-serif);
    font-size: 15px;                             /* 13 → 15 */
    color: var(--rch2-text-main);
    letter-spacing: 0.22em;
    font-weight: 500;                            /* 400 → 500 で太く */
    margin: 0 0 14px;
}
.rc-bh-side-divider {
    width: 24px;
    height: 1px;
    background: var(--rch2-accent-light);
}

/* 新着記事 */
.rc-bh-side-posts {
    display: flex;
    flex-direction: column;
}
.rc-bh-side-post {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    text-decoration: none;
    color: inherit;
}
.rc-bh-side-post:last-child {
    margin-bottom: 0;
}
.rc-bh-side-post-thumb {
    flex: 0 0 64px;                              /* 56 → 64 タイトル拡大に合わせて */
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: var(--rch2-line);
}
.rc-bh-side-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rc-bh-side-post-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--rch2-line);
}
.rc-bh-side-post-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rc-bh-side-post-date {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 12px;                             /* 10 → 12 */
    color: var(--rch2-text-light);
    letter-spacing: 0.18em;
    margin-bottom: 5px;
}
.rc-bh-side-post-title {
    font-family: var(--rch2-font-serif);
    font-size: 13.5px;                           /* 12 → 13.5 */
    color: var(--rch2-text-main);
    line-height: 1.55;
    letter-spacing: 0.05em;
    margin: 0;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}
.rc-bh-side-post:hover .rc-bh-side-post-title {
    color: var(--rch2-accent-strong);
}

/* カテゴリ別 / 月別 共通リスト */
.rc-bh-side-cats,
.rc-bh-side-archive {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* サイドバーの罫線も撤去（コンテンツの区切りはトップと同じく余白だけにする）*/
.rc-bh-side-cats li,
.rc-bh-side-archive li {
    border-bottom: none;
}
.rc-bh-side-cat-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;                              /* 罫線撤去に合わせて少しタイトに */
    text-decoration: none;
    transition: color 0.3s ease;
}
.rc-bh-side-cat-name {
    font-family: var(--rch2-font-serif);
    font-size: 13.5px;                           /* 12 → 13.5 */
    color: var(--rch2-text-sub);
    letter-spacing: 0.07em;
    transition: color 0.3s ease;
}
.rc-bh-side-cat-count {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 16px;                             /* 13 → 16 (2026-05-21 視認性UP) */
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
}
.rc-bh-side-cat-link:hover .rc-bh-side-cat-name {
    color: var(--rch2-text-main);
}
.rc-bh-side-cat-link.is-active .rc-bh-side-cat-name {
    color: var(--rch2-text-main);
    font-weight: 500;
}

/* 月別アーカイブ */
.rc-bh-side-archive li {
    /* 2026-05-24: li の flex は子の <a> に移譲 (リンク化対応) */
    padding: 0;
}
/* 2026-05-24: 月別をリンク化 (クリックでフィルタ) */
.rc-bh-side-arc-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}
.rc-bh-side-arc-link:hover .rc-bh-side-arc-month,
.rc-bh-side-arc-link.is-active .rc-bh-side-arc-month {
    color: var(--rch2-accent-strong);
}
.rc-bh-side-arc-link.is-active .rc-bh-side-arc-month {
    font-weight: 500;
}
.rc-bh-side-arc-month {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 15px;                             /* 13 → 15 (Marcellus 系で大きく映える) */
    color: var(--rch2-text-sub);
    letter-spacing: 0.14em;
    transition: color 0.2s ease;
}
.rc-bh-side-arc-count {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 16px;                             /* 13 → 16 */
    color: var(--rch2-text-light);
    letter-spacing: 0.1em;
}

/* 2026-05-24: 絞り込み中バナー (カテゴリ/月別フィルタ時に記事リスト上部に表示) */
.rc-bh-filter-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
    margin-bottom: 32px;
    background: var(--rch2-bg-card, #fdfaf6);
    border-left: 3px solid var(--rch2-accent, #b87a56);
    border-radius: 2px;
    font-family: var(--rch2-font-serif);
    font-size: 14px;
    color: var(--rch2-text-sub);
}
.rc-bh-filter-banner-label {
    color: var(--rch2-text-light);
    font-size: 12px;
    letter-spacing: 0.1em;
}
.rc-bh-filter-banner-value {
    color: var(--rch2-text-main);
    font-weight: 500;
    letter-spacing: 0.06em;
}
.rc-bh-filter-banner-count {
    color: var(--rch2-text-mute);
    font-size: 12px;
}
.rc-bh-filter-banner-clear {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--rch2-line);
    border-radius: 14px;
    color: var(--rch2-text-mute);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s ease;
}
.rc-bh-filter-banner-clear:hover {
    background: var(--rch2-accent, #b87a56);
    color: #fff;
    border-color: var(--rch2-accent, #b87a56);
}
@media (max-width: 768px) {
    .rc-bh-filter-banner {
        padding: 10px 14px;
        margin-bottom: 18px;
        font-size: 13px;
    }
    .rc-bh-filter-banner-clear {
        font-size: 11px;
        padding: 3px 10px;
    }
}

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

/* タブレット: gap 縮小、サイドバー幅 200px */
@media (max-width: 1024px) {
    .rc-bh-wrap { padding: 70px 3rem 32px; }
    .rc-bh-grid { grid-template-columns: 1fr 200px; gap: 32px; }
    .rc-bh-card-image { flex: 0 0 180px; }
}

/* モバイル: 1カラム縦積み + 記事カードも縦積み */
@media (max-width: 768px) {
    .rc-bh-wrap {
        padding: 60px 1.5rem 80px;              /* 下80pxで固定バーとの衝突回避 */
    }

    /* ヒーロー（モバイル: サイズダウン、左寄せは維持） */
    .rc-bh-hero { padding: 40px 0 48px; }
    .rc-bh-hero-en { font-size: 60px; letter-spacing: 0; }
    .rc-bh-hero-title { font-size: 15.5px; letter-spacing: 0.16em; margin: 14px 0 16px; }
    .rc-bh-hero-divider { margin-bottom: 18px; }
    .rc-bh-hero-lead { font-size: 15px; line-height: 1.75; letter-spacing: 0.08em; }  /* 13→15 可読性UP */

    /* カテゴリピル */
    .rc-bh-cats { padding-bottom: 0; margin-bottom: 36px; }
    .rc-bh-cats-pills { gap: 6px; }
    /* モバイル: 2列グリッド、各ピルは横並び (name + count 1行) で縦余白カット */
    .rc-bh-cats-pills {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 10px;
        max-width: 100%;
    }
    .rc-bh-pill {
        flex-direction: row;                     /* 縦組み → 横並びに */
        align-items: baseline;                   /* name と count のベース揃え */
        gap: 6px;
        padding: 10px 12px;
    }
    .rc-bh-pill-name { font-size: 13.5px; letter-spacing: 0.06em; }
    .rc-bh-pill-count { font-size: 22px; }      /* 横並びでも数字は主役級にくっきり */

    /* グリッド 1カラム */
    .rc-bh-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    /* 2026-05-24: モバイルは「画像左 + テキスト右」のコンパクト一覧に変更。
       一覧性を上げて画面内に複数記事を見せる (サンプル girlsheaven-job 風)。 */
    .rc-bh-card {
        padding: 14px 0;
        margin-bottom: 0;
        border-bottom: 0.5px solid var(--rch2-line);
    }
    .rc-bh-card:last-child {
        border-bottom: 0;
    }
    .rc-bh-card-link {
        flex-direction: row;
        gap: 14px;
        align-items: flex-start;
    }
    /* 画像は 100x100 の正方形 (左固定) */
    .rc-bh-card-image {
        flex: 0 0 100px;
        width: 100px;
        aspect-ratio: 1 / 1;
    }
    /* テキスト側: タイトル → 日付 → カテゴリピル の順 (flex order で並び替え) */
    .rc-bh-card-body {
        gap: 6px;
    }
    .rc-bh-card-title {
        order: 1;
        font-size: 15px;
        letter-spacing: 0.05em;
        line-height: 1.5;
        margin: 0;
        /* 2行で省略 (一覧性確保) */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .rc-bh-card-meta {
        order: 2;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin: 8px 0 0;
        font-style: normal;
    }
    .rc-bh-card-sep { display: none; }       /* ・ 区切り点は不要 */
    .rc-bh-card-date {
        font-family: var(--rch2-font-en);
        font-size: 14px;                         /* 2026-05-24: 全箇所統一 (PC 16 / SP 14) */
        color: var(--rch2-text-mute);
        letter-spacing: 0.06em;
    }
    .rc-bh-card-cat {
        order: 1;                            /* date より下に出すために逆順 */
        background: var(--rch2-accent);
        color: #fff;
        padding: 3px 12px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.05em;
        font-family: var(--rch2-font-serif);
        line-height: 1.6;
    }
    /* 一覧性最優先のため excerpt と「続きを読む」は非表示 (詳細ページで読める) */
    .rc-bh-card-excerpt,
    .rc-bh-card-more { display: none; }

    /* ページネーション */
    .rc-bh-pagination { padding: 48px 0 24px; }
    .rc-bh-pagination-controls { gap: 14px; }
    .rc-bh-pagination-status { font-size: 14px; }     /* スマホは少し控えめ */
    .rc-bh-page-prev, .rc-bh-page-next { font-size: 15px; }  /* 13 → 15 */
    .rc-bh-page-num { font-size: 16px; padding: 0 5px; }     /* 13 → 16 */

    /* サイドバー: sticky 解除、下に縦積み */
    .rc-bh-sidebar { position: static; }
    .rc-bh-side-block { margin-bottom: 40px; }
}

/* 小型モバイル */
@media (max-width: 380px) {
    .rc-bh-wrap { padding: 50px 1.2rem 80px; }
    .rc-bh-hero-en { font-size: 50px; letter-spacing: 0; }
    .rc-bh-hero-title { font-size: 14.5px; letter-spacing: 0.14em; }
    .rc-bh-hero-lead { font-size: 14px; }
}



/* ============================================================
   Blog Detail Page — 記事詳細用スタイル (prefix .rc-bd-*)
   - サイドバーは .rc-bh-side-* (上で定義) を流用
   - 記事本文 HTML 内のタグも明朝ベースで雑誌風に整える
   ============================================================ */

/* パンくず: ブログ一覧へ戻るリンク（ヘッダー直下に控えめに） */
.rc-bd-breadcrumb {
    max-width: 1100px;
    margin: 0 auto 32px;
    padding-top: 8px;
}
.rc-bd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.24em;
    text-decoration: none;
    transition: color 0.3s ease, gap 0.3s ease;
}
.rc-bd-back-link:hover {
    color: var(--rch2-accent-strong);
    gap: 12px;
}
.rc-bd-back-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.rc-bd-back-link:hover .rc-bd-back-arrow {
    transform: translateX(-3px);
}

/* ============================================================
   記事ヘッダー
   ============================================================ */
.rc-bd-header {
    margin-bottom: 40px;
}
.rc-bd-meta {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 16px;                         /* 2026-05-24: 全箇所統一 (PC 16 / SP 14) */
    color: var(--rch2-text-mute);            /* 2026-05-24: light → mute */
    letter-spacing: 0.18em;
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.rc-bd-cat {
    font-family: var(--rch2-font-serif);
    font-style: normal;
    color: var(--rch2-text-sub);
    letter-spacing: 0.08em;
    font-weight: 500;
}
.rc-bd-meta-sep {
    color: var(--rch2-line);
}
.rc-bd-title {
    font-family: var(--rch2-font-serif);
    font-size: 32px;
    color: var(--rch2-text-main);
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 24px;
}
.rc-bd-title-divider {
    width: 40px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0;
}

/* アイキャッチ画像 */
/* 2026-05-24: アイキャッチを左寄せ + 本文を右に回り込ませる雑誌風レイアウト
   (以前は width:100% で記事幅いっぱい → でかすぎ問題を修正)。
   モバイルでは @media (max-width: 768px) で float 解除して全幅表示。 */
.rc-bd-hero-image {
    float: left;
    width: 45%;
    max-width: 360px;
    margin: 0 28px 16px 0;
}
.rc-bd-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* 本文の後ろに来る要素 (footer 等) が float の横に潜らないよう clear */
.rc-bd-footer {
    clear: both;
}

/* ============================================================
   記事本文 (HTML が入る .rc-bd-content スコープ)
   admin が入れた <p> <h2> <h3> <ul> <img> <blockquote> 等を統一スタイル化
   ============================================================ */
.rc-bd-content {
    font-family: var(--rch2-font-serif);
    font-size: 16px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
}
.rc-bd-content > *:first-child { margin-top: 0; }
.rc-bd-content > *:last-child { margin-bottom: 0; }
/* 2026-05-26: <p>のマージンを0に。Quillが各Enterで <p> を生成するため、
   24px マージンだと連続行が常に空行で分離されて見える問題があった。
   段落分けしたい場合は Quill 上で2回 Enter (空行) を入れる → <p><br></p> が出るので空行として残る。 */
.rc-bd-content p { margin: 0; }
/* 空の <p> (Quill の空行) は <br> が入って高さを持つので、そのまま空行として機能する */

.rc-bd-content h2 {
    font-family: var(--rch2-font-serif);
    font-size: 22px;
    color: var(--rch2-text-main);
    letter-spacing: 0.1em;
    font-weight: 500;
    line-height: 1.5;
    margin: 56px 0 20px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--rch2-line);
}
.rc-bd-content h3 {
    font-family: var(--rch2-font-serif);
    font-size: 18px;
    color: var(--rch2-text-main);
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 1.5;
    margin: 40px 0 16px;
    position: relative;
    padding-left: 14px;
}
.rc-bd-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 4px;
    height: 0.9em;
    background: var(--rch2-accent);
}
.rc-bd-content h4 {
    font-family: var(--rch2-font-serif);
    font-size: 16px;
    color: var(--rch2-text-main);
    letter-spacing: 0.06em;
    font-weight: 500;
    line-height: 1.5;
    margin: 32px 0 12px;
}

.rc-bd-content a {
    color: var(--rch2-accent-strong);
    text-decoration: underline;
    text-decoration-color: var(--rch2-accent-light);
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.rc-bd-content a:hover {
    color: var(--rch2-text-main);
    text-decoration-color: var(--rch2-text-main);
}

.rc-bd-content strong, .rc-bd-content b {
    color: var(--rch2-text-main);
    font-weight: 600;
}
.rc-bd-content em, .rc-bd-content i {
    font-style: italic;
}

.rc-bd-content ul, .rc-bd-content ol {
    margin: 0 0 24px;
    padding-left: 1.6em;
}
.rc-bd-content ul li, .rc-bd-content ol li {
    margin-bottom: 8px;
    line-height: 1.85;
}
.rc-bd-content ul li::marker {
    color: var(--rch2-accent-light);
}

.rc-bd-content blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--rch2-accent-light);
    font-style: italic;
    color: var(--rch2-text-mute);
}
.rc-bd-content blockquote p:last-child { margin-bottom: 0; }

.rc-bd-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 32px 0;
}
.rc-bd-content figure { margin: 32px 0; }
.rc-bd-content 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;
}

.rc-bd-content hr {
    border: none;
    border-top: 0.5px solid var(--rch2-line);
    margin: 48px 0;
}

.rc-bd-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 14px;
}
.rc-bd-content table th, .rc-bd-content table td {
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--rch2-line);
    text-align: left;
}
.rc-bd-content table th {
    background: rgba(184, 122, 86, 0.05);
    color: var(--rch2-text-main);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.rc-bd-content iframe {
    max-width: 100%;
    margin: 24px 0;
    display: block;
}

/* ============================================================
   記事フッター: 「記事一覧へ戻る」リンク
   ============================================================ */
.rc-bd-footer {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 0.5px solid var(--rch2-line);
    text-align: center;
}
.rc-bd-list-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--rch2-accent-strong);
    text-decoration: none;
    padding: 12px 4px;
    transition: color 0.3s ease, gap 0.3s ease;
}
.rc-bd-list-link:hover {
    color: var(--rch2-text-main);
    gap: 14px;
}
.rc-bd-list-link-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-family: var(--rch2-font-en);
}
.rc-bd-list-link:hover .rc-bd-list-link-arrow {
    transform: translateX(-3px);
}
.rc-bd-list-link-text {
    font-family: var(--rch2-font-serif);
    letter-spacing: 0.18em;
}

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

@media (max-width: 1024px) {
    .rc-bd-title { font-size: 28px; }
}

@media (max-width: 768px) {
    .rc-bd-breadcrumb { margin-bottom: 20px; }
    .rc-bd-back-link { font-size: 12px; letter-spacing: 0.2em; }

    .rc-bd-header { margin-bottom: 32px; }
    .rc-bd-meta { font-size: 14px; margin-bottom: 14px; letter-spacing: 0.15em; }     /* 2026-05-24: 12.5 → 14 (統一値) */
    .rc-bd-title { font-size: 22px; letter-spacing: 0.06em; margin-bottom: 18px; line-height: 1.5; }

    /* 2026-05-24: モバイルは float 解除して全幅表示 (回り込みは画面が狭くて窮屈になるため) */
    .rc-bd-hero-image {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 32px;
    }

    .rc-bd-content { font-size: 15px; line-height: 1.9; }
    .rc-bd-content p { margin-bottom: 0; }   /* 2026-05-26: PC側と同じく <p> マージン除去 */
    .rc-bd-content h2 { font-size: 18px; margin: 40px 0 16px; padding-bottom: 10px; }
    .rc-bd-content h3 { font-size: 16px; margin: 28px 0 12px; padding-left: 12px; }
    .rc-bd-content blockquote { margin: 24px 0; padding-left: 18px; }
    .rc-bd-content img { margin: 24px 0; }

    .rc-bd-footer { margin-top: 48px; padding-top: 32px; }
    .rc-bd-list-link { font-size: 13px; }
}

@media (max-width: 380px) {
    .rc-bd-title { font-size: 19px; }
    .rc-bd-content { font-size: 14.5px; }
}