/* ============================================================
   Diary 求人サイト v2 — ブログ最新記事セクション
   - 雑誌の表紙的な「1+3」レイアウト
   - 左大: 最新1件（16:9画像+日付+タイトル+抜粋）
   - 右小×3: サブ記事（画像左+テキスト右）、モバイルでは画像上+テキスト下
   - 共通: .rc-h2-section-header / .rc-h2-concept-link を流用
   ============================================================ */

.rc-h2-blog {
    background: var(--rch2-bg-section);  /* #F5EFE6 — 交互パターン一貫性 */
    padding: 120px 4rem;
}
.rc-h2-blog-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.rc-h2-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* PC は左右 50% / 50% */
    gap: 48px;
    align-items: start;
}

/* 2026-05-24: 「Last updated」表記は撤去。SEO 鮮度シグナルは sitemap.xml の lastmod と
   JobPosting 構造化データで担保しているので、視覚的な重複表示は不要と判断。
   関連 CSS (.rc-h2-blog-updated / .rc-h2-blog-updated-date) も削除済み。 */

/* 共通: リンク領域 */
.rc-h2-blog-main-link,
.rc-h2-blog-sub-link {
    color: var(--rch2-text-main);
    text-decoration: none;
    display: block;
}

/* 共通: 画像コンテナ（hoverでわずかにズーム） */
.rc-h2-blog-main-image,
.rc-h2-blog-sub-image {
    overflow: hidden;
    position: relative;
    background: var(--rch2-bg-section);
    border-radius: 3px;
}
.rc-h2-blog-main-image img,
.rc-h2-blog-sub-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.rc-h2-blog-main-link:hover .rc-h2-blog-main-image img,
.rc-h2-blog-sub-link:hover .rc-h2-blog-sub-image img {
    transform: scale(1.04);
}

/* プレースホルダ（画像未設定時） */
.rc-h2-blog-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rch2-text-light);
    font-size: 36px;
    background: var(--rch2-bg-section);
}

/* 共通: 日付（serif italic）
   2026-05-24: 色を text-light → text-mute に格上げ (薄すぎ問題の解消、鮮度を主張) */
.rc-h2-blog-main-date,
.rc-h2-blog-sub-date {
    display: block;
    font-family: var(--rch2-font-en);
    font-style: italic;
    color: var(--rch2-text-mute);
    letter-spacing: 0.18em;
}

/* 共通: タイトル（hoverで色変化） */
.rc-h2-blog-main-title,
.rc-h2-blog-sub-title {
    font-family: var(--rch2-font-serif);
    color: var(--rch2-text-main);
    font-weight: 500;
    transition: color 0.25s ease;
}
.rc-h2-blog-main-link:hover .rc-h2-blog-main-title,
.rc-h2-blog-sub-link:hover .rc-h2-blog-sub-title {
    color: var(--rch2-accent);
}

/* ============================================================
   左カラム: 最新記事（大）
   - 画像は正方形 (1:1) 。素材が縦長写真主体なので横長より相性が良い。
   - 2026-05-24: 並び順を 日付 → タイトル → 画像 → 抜粋 に変更 (一覧性UP)
   ============================================================ */
.rc-h2-blog-main-image {
    aspect-ratio: 1 / 1;
    margin: 0 0 20px;                /* 上のタイトルとの間に間隔、下に抜粋までの余白 */
}
.rc-h2-blog-main-date {
    font-size: 16px;                 /* 2026-05-24: 全箇所統一 (PC 16 / SP 14) */
    margin-bottom: 8px;
}
.rc-h2-blog-main-title {
    font-size: 21px;
    /* 2026-05-24: line-height/letter-spacing をサブ記事と統一 (タイポ一貫性)。
       サイズだけ大きくして階層を表現する。 */
    line-height: 1.55;
    letter-spacing: 0.05em;
    margin: 0 0 20px;                /* 12 → 20 (画像との間に呼吸感) */
}
.rc-h2-blog-main-excerpt {
    font-family: var(--rch2-font-serif);
    font-size: 13.5px;
    color: var(--rch2-text-sub);
    line-height: 1.9;
    margin: 0;
    letter-spacing: 0.05em;
}

/* ============================================================
   右カラム: サブ記事 ×3
   ============================================================ */
.rc-h2-blog-sub {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.rc-h2-blog-sub-link {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.rc-h2-blog-sub-image {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
}
.rc-h2-blog-sub-content {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}
.rc-h2-blog-sub-date {
    font-size: 16px;                 /* 2026-05-24: 全箇所統一 (PC 16 / SP 14) */
    margin-bottom: 8px;
}
.rc-h2-blog-sub-title {
    font-size: 16px;                 /* 2026-05-24: 14 → 16 (タイトルを主役に) */
    line-height: 1.55;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}
/* 2026-05-24: サブ記事の抜粋 (タイトル下に本文プレビューを 2 行表示) */
.rc-h2-blog-sub-excerpt {
    font-family: var(--rch2-font-serif);
    font-size: 12.5px;
    color: var(--rch2-text-sub);
    line-height: 1.8;
    letter-spacing: 0.04em;
    margin: 0;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   フッター: すべての記事を見るリンク
   ============================================================ */
.rc-h2-blog-more-wrap {
    margin-top: 64px;
    text-align: center;
}
.rc-h2-blog-more-wrap .rc-h2-concept-link {
    margin-top: 0;
}

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

/* タブレット */
@media (max-width: 1024px) {
    .rc-h2-blog { padding: 100px 2.5rem; }
    .rc-h2-blog-grid { gap: 32px; }
    .rc-h2-blog-main-title { font-size: 19px; }
    .rc-h2-blog-sub-image { width: 130px; height: 130px; }
}

/* モバイル: ブログ一覧ページ (recruit/blog) と同じコンパクトな横並びに統一。
   2026-05-24: メインもサブも「画像左 + テキスト右」+ 抜粋なしで一覧性最優先。
   1セクション内に 4件全部見える状態を作る。 */
@media (max-width: 768px) {
    .rc-h2-blog { padding: 72px 1.5rem; }

    /* グリッド: メインとサブを縦に並べる (どちらも同じコンパクト見た目に揃える) */
    .rc-h2-blog-grid {
        grid-template-columns: 1fr;
        gap: 0;                              /* カード自体に上下 padding & 罫線で区切る */
    }

    /* メイン記事もサブと同じ「画像左 + テキスト右」のカード形式に
       grid を使う理由: 直下に date/title/image/excerpt が並んでいて wrapper が無いため、
       grid-row/grid-column で確実に配置するのが一番素直。 */
    .rc-h2-blog-main {
        padding: 14px 0;
        border-bottom: 0.5px solid var(--rch2-line);
    }
    .rc-h2-blog-main-link {
        display: grid;
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto auto;  /* 2026-05-24: 3 行に拡張 (日付/タイトル/抜粋) */
        column-gap: 14px;
        align-items: start;
    }
    .rc-h2-blog-main-image {
        grid-column: 1;
        grid-row: 1 / span 3;                /* 画像は左カラム、上下3行ぶんを占有 */
        width: 100px;
        height: 100px;
        aspect-ratio: 1 / 1;
        margin: 0;
        align-self: start;
    }
    /* 2026-05-24: 順序をサブ記事に合わせて 日付 → タイトル → 抜粋。 */
    .rc-h2-blog-main-date {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        font-size: 14px;                     /* 統一値 */
        margin: 6px 0 0;
    }
    .rc-h2-blog-main-title {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.05em;
        margin: 0;
        /* 2行で省略 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* 2026-05-24: モバイルでも抜粋を表示 (タイトルだけでは内容が分かりにくい問題への対応) */
    .rc-h2-blog-main-excerpt {
        display: -webkit-box;
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        font-family: var(--rch2-font-serif);
        font-size: 12px;
        line-height: 1.6;
        color: var(--rch2-text-sub);
        letter-spacing: 0.04em;
        margin: 4px 0 0;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* サブ記事: 同じく compact 横並びを維持 + メインとデザイン揃える */
    .rc-h2-blog-sub {
        gap: 0;
        margin: 0;
    }
    .rc-h2-blog-sub-item {
        padding: 14px 0;
        border-bottom: 0.5px solid var(--rch2-line);
    }
    .rc-h2-blog-sub-item:last-child {
        border-bottom: 0;
    }
    .rc-h2-blog-sub-link {
        flex-direction: row;
        gap: 14px;
        align-items: flex-start;
    }
    .rc-h2-blog-sub-image {
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
        aspect-ratio: 1 / 1;
    }
    /* 2026-05-24: sub-content を flex column にして order を効かせる
       (デフォルト DOM 順は date→title→excerpt だが、視覚順は date→title→excerpt のまま揃える) */
    .rc-h2-blog-sub-content {
        padding-top: 0;
        display: flex;
        flex-direction: column;
    }
    .rc-h2-blog-sub-date {
        font-size: 14px;
        margin: 6px 0 0;
        order: 1;                            /* 1番目: 日付 */
    }
    .rc-h2-blog-sub-title {
        font-size: 15px;
        margin: 0;
        order: 2;                            /* 2番目: タイトル */
    }
    /* 2026-05-24: 抜粋もモバイルで表示 (一覧性 + 内容把握のバランス) */
    .rc-h2-blog-sub-excerpt {
        display: -webkit-box;
        order: 3;                            /* 3番目: 抜粋 */
        font-size: 12px;
        line-height: 1.6;
        color: var(--rch2-text-sub);
        margin: 4px 0 0;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rc-h2-blog-more-wrap { margin-top: 32px; }
}

/* 小型モバイル */
@media (max-width: 380px) {
    .rc-h2-blog { padding: 72px 1.2rem; }
}