/* ===== recruitページ固有のスタイル ===== */

/* ページタイトルセクション - 背景画像のみ定義 */
.page-title__bg {
    background-image: url('../images/recruit-bg.jpg');
}

/* メリットセクション */
.merit-section {
    padding: var(--spacing-2xl) 0;
}

.merit1 {
    background-color: #f8f9fa;
}

.merit2 {
    background-color: var(--color-white);
}

.merit__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
}

.merit__content--reverse {
    flex-direction: row-reverse;
}

.merit__image {
    flex: 0 0 45%;
}

.merit__image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.merit__text {
    flex: 1;
}

.merit__title {
    font-size: var(--font-2xl);
    color: var(--color-main);
    margin-bottom: var(--spacing-lg);
    font-weight: bold;
}

.merit__description {
    font-size: var(--font-sm);
    line-height: 1.8;
    color: var(--color-dark-gray);
}

/* 募集要項セクション */
.jobs-section {
    padding: var(--spacing-2xl) 0;
    background-color: #f8f9fa;
}

.jobs-section2 {
    background-color: var(--color-white);
}


/* 募集要項テーブル */
.jobs-table {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(220, 0, 12, 0.1);
    position: relative;
}

.jobs-table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-main), var(--color-dark), #ff6b6b);
}

.job-row {
    display: flex;
    position: relative;
    transition: all 0.3s ease;
}


.job-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.job-row:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 200px;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 0, 12, 0.1) 20%, rgba(220, 0, 12, 0.1) 80%, transparent 100%);
}

.job-label {
    flex: 0 0 200px;
    width: 24%;
    background: #e9e9e9;
    color: var(--color-black);
    padding: var(--spacing-lg);
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    font-size: var(--font-md);
    letter-spacing: 0.5px;
}

.job-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-main), var(--color-dark));
}

.job-label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #555;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.job-value {
    flex: 1;
    padding: var(--spacing-lg);
    color: var(--color-dark-gray);
    line-height: 1.8;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    font-size: var(--font-sm);
    position: relative;
}

/* 特定の項目に対するアイコン追加 */
.job-row:nth-child(1) .job-label::before {
    background: linear-gradient(180deg, #4CAF50, #2E7D32);
}

.job-row:nth-child(2) .job-label::before {
    background: linear-gradient(180deg, #2196F3, #1565C0);
}

.job-row:nth-child(3) .job-label::before {
    background: linear-gradient(180deg, #FF9800, #F57C00);
}

.job-row:nth-child(4) .job-label::before {
    background: linear-gradient(180deg, #9C27B0, #6A1B9A);
}

.job-row:nth-child(5) .job-label::before {
    background: linear-gradient(180deg, #FF5722, #D84315);
}

.job-row:nth-child(6) .job-label::before {
    background: linear-gradient(180deg, #795548, #5D4037);
}

.job-row:nth-child(7) .job-label::before {
    background: linear-gradient(180deg, #607D8B, #455A64);
}

.job-row:nth-child(8) .job-label::before {
    background: linear-gradient(180deg, #8BC34A, #689F38);
}

.job-row:nth-child(9) .job-label::before {
    background: linear-gradient(180deg, #FFC107, #F9A825);
}

.job-row:nth-child(10) .job-label::before {
    background: linear-gradient(180deg, #E91E63, #C2185B);
}

.job-row:nth-child(11) .job-label::before {
    background: linear-gradient(180deg, #00BCD4, #0097A7);
}

/* パートナーセクション */
.partner-section {
    padding: var(--spacing-2xl) 0;
    background-color: #f8f9fa;
}

.partner__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
}

.partner__image {
    flex: 0 0 45%;
}

.partner__image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.partner__text {
    flex: 1;
}

.partner__title {
    font-size: var(--font-2xl);
    color: var(--color-main);
    margin-bottom: var(--spacing-lg);
    font-weight: bold;
}

.partner__description {
    font-size: var(--font-sm);
    line-height: 1.8;
    color: var(--color-dark-gray);
}

/* スタッフの声セクション */
.voice-section {
    padding: var(--spacing-2xl) 0;
    background-color: var(--color-white);
}

.voice__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    flex-direction: row-reverse;
}

.voice__image {
    flex: 0 0 45%;
}

.voice__image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.voice__text {
    flex: 1;
}

.voice__title {
    font-size: var(--font-2xl);
    color: var(--color-main);
    margin-bottom: var(--spacing-lg);
    font-weight: bold;
}

.voice__description {
    font-size: var(--font-sm);
    line-height: 1.8;
    color: var(--color-dark-gray);
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
    .intro__title {
        font-size: var(--font-2xl);
    }

    .intro__text {
        font-size: var(--font-sm);
    }

    .merit__content,
    .merit__content--reverse,
    .partner__content,
    .voice__content {
        flex-direction: column;
    }

    .merit__image,
    .partner__image,
    .voice__image {
        flex: 0 0 100%;
    }

    .merit__image img,
    .partner__image img,
    .voice__image img {
        height: 200px;
    }

    .merit__title,
    .partner__title,
    .voice__title {
        font-size: var(--font-lg);
    }

    .merit__description,
    .partner__description,
    .voice__description {
        font-size: var(--font-xs);
    }

    .job-label {
        font-size: var(--font-sm);
        padding: var(--spacing-sm);
    }

    .job-value {
        font-size: var(--font-xs);
        padding: var(--spacing-sm);
    }

    .job-row {
        flex-direction: column;
    }

    .job-label {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

@media (max-width: 768px) {
    .merit__title,
    .partner__title,
    .voice__title {
        font-size: var(--font-xl);
    }

    .job-label,
    .job-value {
        padding: var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .intro__content {
        padding: 30px 15px;
    }

    .intro__title {
        font-size: var(--font-xl);
        margin-bottom: 20px;
    }

    .intro__text {
        font-size: var(--font-sm);
    }

    .merit-section,
    .jobs-section,
    .partner-section,
    .voice-section {
        padding: var(--spacing-lg) 0;
    }

    .merit__image img,
    .partner__image img,
    .voice__image img {
        height: 150px;
    }
}