@charset "utf-8";
/* recruit-clock.css：タイムライン・ギミック専用 */

/* 1. タイムライン (PC: 二列ギミック / SP・TB: 一列吸着) */
@media (min-width: 992px) {
    .sticky-wrapper { position: sticky; top: 100px; z-index: 1020; }
    .clock-display { font-size: 4rem; font-weight: bold; color: #333; transition: all 0.3s ease; }
    .sp-time-badge { display: none !important; }
}

@media (max-width: 991px) {
    #f-time-line .col-md-5 { display: none !important; }
    #f-time-line .col-md-7 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
    .sp-time-badge {
        display: block !important; position: sticky; top: 0; z-index: 1050;
        background-color: #f8f9fa; color: #3b5037; font-size: 1.8rem; font-weight: bold;
        padding: 10px 20px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
        border-bottom: 2px solid #d4b499; box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: center;
    }
    .work-step { position: relative; z-index: 1; margin-bottom: 4rem; }
}

/* 2. 背景・ヒーロー設定 */
#section-categories::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("../images/rec_guide_back.webp"); background-size: cover; opacity: 0.4; z-index: -1;
}
.recruit-hero {
    position: relative; height: 250px; background-size: cover; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
}
.recruit-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; }
.recruit-hero .hero-title { position: relative; z-index: 2; font-size: 2rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }