@charset "utf-8";

/* ==================================================
   記事詳細ページ (single)
================================================== */
.page-single .inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 20px 100px;
}

/* 記事ヘッダー */
.single-head {
    margin-bottom: 40px;
    border-bottom: 2px solid #E2E8F0;
    padding-bottom: 30px;
}

.single-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.single-meta .date {
    font-size: 1.6rem;
    color: #666;
    font-weight: 500;
}

/* ★TOPページと全く同じバッジデザインに修正 */
.single-meta .cat-badge {
    display: inline-block;
    color: #ffffff !important;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 5px 26px 7px !important;
    /* TOPと同じ余白 */
    border-radius: 21px !important;
    /* TOPと同じ丸み */
    letter-spacing: 0.05em;
    background-color: #1A365D;
    /* 基本の色（指定がない場合はネイビー） */
}

.single-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #030303;
    line-height: 1.5;
}

/* 記事本文 */
.single-content {
    font-size: 1.6rem;
    line-height: 2;
    color: #030303 !important;
}

.single-content p {
    margin-bottom: 24px;
    color: inherit !important;
}

.single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 戻るボタン */
.btn-back {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin: 80px auto 0;
    background: #1A365D !important;
    color: #ffffff !important;
    padding: 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: #2a528a !important;
    color: #ffffff !important;
}

/* ==================================================
   特定のカテゴリバッジの色指定（スラッグ連動）
================================================== */
/* 採用情報 (スラッグ: recruit) */
.single-meta .cat-badge.badge-recruit {
    background-color: #1A365D !important;
}

/* お知らせ (スラッグ: news) */
.single-meta .cat-badge.badge-news {
    background-color: #F4B942 !important;
}

/* ブログ (スラッグ: blog) ※必要に応じて色を変更してください */
.single-meta .cat-badge.badge-blog {
    background-color: #FA8028 !important;
}