/* ===================================================================
 * recruit.css (競合対策・修正版)
 * 採用ページ（recruit_test_20251031.html）専用スタイル
 * =================================================================== */

/* --------------------------------------
 * 共通・ユーティリティ（HTML内のクラス定義）
 * -------------------------------------- */
.section-padding {
    padding: 80px 0;
}
.bg-light-gray {
    background-color: #f8f9fa; /* 薄いグレー */
}
.text-center {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.size-18 { font-size: 18px; }
.size-14 { font-size: 14px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mt20 { margin-top: 20px; }
.mt50 { margin-top: 50px; }
.mt80 { margin-top: 80px; }

/* --------------------------------------
 * [修正] レイアウト (競合対策)
 * HTML側で .recruit-layout を追加したセクション内でのみ有効
 * -------------------------------------- */
.recruit-layout .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.recruit-layout .col-1_3 {
    width: 33.333%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* 隙間を考慮 */
}
.recruit-layout .col-1_2 {
    width: 50%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* 隙間を考慮 */
}

/* --------------------------------------
 * 1. ヒーローセクション
 * -------------------------------------- */
.recruit-hero {
    position: relative;
    padding: 120px 40px;
    color: #ffffff; /* 白文字 */
    background-image: url('../image/recruit/hero-background.jpg'); /* 背景画像 */
    background-size: cover;
    background-position: center center;
    background-color: #333;
    text-align: center;
}
.recruit-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 透過オーバーレイ */
    z-index: 1;
}
.recruit-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.recruit-hero-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}
.recruit-hero-subtitle {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 30px;
}
.recruit-hero-btn {
    padding: 15px 40px;
    font-size: 18px;
}

/* --------------------------------------
 * 2. JSIRで働く魅力
 * -------------------------------------- */
.why-work-jsir {
    background-color: #fff;
}
.feature-item {
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
}
.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.feature-icon {
    margin-bottom: 20px;
}
.feature-icon img {
    width: 80px; /* アイコンサイズ */
    height: 80px;
    object-fit: contain;
}
.feature-item h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
}
.feature-item p {
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
}

/* --------------------------------------
 * 3. 社員の声
 * -------------------------------------- */
.employee-card {
    display: flex;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}
.employee-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}
.employee-thumb {
    width: 200px; /* PCでの画像幅 */
    flex-shrink: 0;
}
.employee-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-info {
    padding: 30px;
}
.employee-info h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
.employee-quote {
    font-size: 20px;
    font-weight: bold;
    color: #005a9c;
    margin-bottom: 15px;
    line-height: 1.4;
}
.employee-info p {
    font-size: 15px;
    line-height: 1.7;
}

/* --------------------------------------
 * 4. 募集要項
 * -------------------------------------- */
.recruit-category h3.head-style-2 {
    border-left: 5px solid #005a9c;
    padding-left: 10px;
    font-size: 24px;
}
.recruit-table th {
    width: 25%;
    background-color: #f4f7fa;
    text-align: left;
    padding: 20px;
}
.recruit-table td {
    padding: 20px;
    line-height: 1.7;
}

/* --------------------------------------
 * 5. ボタン（HTML内のクラス定義）
 * -------------------------------------- */
.button {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button-primary {
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
}
.button-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.button-secondary {
    background-color: #6c757d;
    color: #ffffff;
    border-color: #6c757d;
}
.button-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}
.button-large {
    padding: 15px 30px;
    font-size: 18px;
}

/* --------------------------------------
 * 6. 見出し（HTML内のクラス定義）
 * -------------------------------------- */
.head-style-1 {
    font-size: 32px;
    font-weight: bold;
    color: #333;
}
.head-style-2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* --------------------------------------
 * 7. レスポンシブ対応 (スマホ表示 最終修正版)
 * -------------------------------------- */
@media (max-width: 768px) {
    
    /* [修正] レイアウトのスマホ対応 */
    .recruit-layout .col-1_3 {
        width: 100%; /* 魅力セクションは1カラム */
        margin-bottom: 30px;
    }
    .recruit-layout .col-1_2 {
        /* 社員カードのセクション */
        width: 100%;
        margin-bottom: 20px;
    }

    /* [修正] セクション全体の余白を調整 */
    .section-padding {
        padding: 40px 15px; /* 左右にも余白を追加 */
    }
    .mb50 { margin-bottom: 30px; }
    .mt50 { margin-top: 30px; }
    .mt80 { margin-top: 40px; }
    
    /* [修正] ヒーローセクションの文字サイズ */
    .recruit-hero {
        padding: 60px 20px;
    }
    .recruit-hero-title {
        font-size: 26px;
        line-height: 1.4;
    }
    .recruit-hero-subtitle {
        font-size: 16px;
        line-height: 1.7;
    }

    /* [修正] 見出しの文字サイズ */
    .head-style-1 {
        font-size: 24px;
    }
    .head-style-2 {
        font-size: 20px;
    }

    /* * [重要] 社員カードのレイアウトを修正
     * (顔写真 左 / コメント 右 のレイアウト)
     */
    .employee-card {
        flex-direction: row; /* 縦積み(column)をやめて横並び(row)に戻す */
        align-items: stretch; /* カードの高さを揃える */
    }
    .employee-thumb {
        width: 35%; /* [修正] 写真の幅を35%に */
        height: auto; /* [修正] 高さを自動に */
        flex-shrink: 0; /* 縮まないように */
    }
    .employee-thumb img {
        width: 100%;
        height: 100%; /* [修正] コンテナの高さに合わせる */
        object-fit: cover; /* [修正] 枠に合わせてトリミング */
    }
    .employee-info {
        width: 65%; /* [修正] テキストの幅を65%に */
        padding: 15px; /* [修正] 余白を少し小さく */
        box-sizing: border-box; /* paddingを幅に含める */
        display: flex; /* テキストを中央揃え（オプション） */
        flex-direction: column;
        justify-content: center;
    }
    .employee-info h3 {
        font-size: 14px; /* [修正] テキストサイズ調整 */
        margin-bottom: 8px;
    }
    .employee-quote {
        font-size: 15px; /* [修正] テキストサイズ調整 */
        margin-bottom: 8px;
        line-height: 1.5;
    }
    .employee-info p {
        font-size: 13px; /* [修正] テキストサイズ調整 */
        line-height: 1.6;
    }


    /* * [重要] 募集要項テーブルを修正
     * (「でかく表示される」＝はみ出す問題の対策)
     */
    .recruit-table th,
    .recruit-table td {
        display: block; /* テーブルを行ごとにブロック表示 */
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
        text-align: left !important;
    }
    .recruit-table th {
        background-color: #f4f7fa;
        font-weight: bold;
        border-bottom: none;
    }
    .recruit-table td {
        border-bottom: 1px solid #eee;
    }
    .recruit-table tr {
        margin-bottom: 10px;
        display: block;
        border: 1px solid #eee;
    }
    .recruit-table tr:last-child td:last-child {
        border-bottom: none;
    }

    /* [修正] 中途採用の応募資格などの文字サイズ */
    .recruit-category .size-18 {
        font-size: 17px;
    }
    .recruit-category p {
        font-size: 15px;
    }
}
/* --------------------------------------
 * 8. 募集要項の可読性 修正 (上書き)
 * -------------------------------------- */

/* 中途採用の「仕事内容」「応募資格」テキスト */
.recruit-category p,
.recruit-category li {
    color: #333; /* 文字色を黒（濃いグレー）に */
}
.recruit-category .size-18 {
    color: #333; /* 見出しの文字色も黒に */
}

/* 新卒・中途のテーブル */
.recruit-table {
    background-color: #ffffff; /* テーブル全体の背景を白に */
}
.recruit-table th {
    background-color: #f4f7fa; /* 見出しセルは薄いグレー */
    color: #333; /* 文字色を黒（濃いグレー）に */
}
.recruit-table td {
    background-color: #ffffff; /* データセルを白に */
    color: #333; /* 文字色を黒（濃いグレー）に */
}

/* スマホ表示のテーブル文字色 */
@media (max-width: 768px) {
    .recruit-table th,
    .recruit-table td {
        color: #333; /* 文字色を黒（濃いグレー）に */
    }
}
/* --------------------------------------
 * 9. 募集要項ヘッダーの文字色 修正
 * -------------------------------------- */
.recruit-category h3.head-style-2 {
    color: #ffffff !important; /* 文字色を白に (強制上書き) */
}
/* --------------------------------------
 * 10. 募集要項 横並びレイアウト
 * -------------------------------------- */

/* PC表示 (デフォルト) */
.recruit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* 左右のブロック間の隙間 */
}
.recruit-grid-item {
    flex: 1; /* 均等に幅を分ける */
    min-width: 300px; /* 最小幅 */
}

/* 768px以下のスマホ表示 */
@media (max-width: 768px) {
    .recruit-grid {
        flex-direction: column; /* 横並びをやめて縦積みに */
        gap: 0;
    }
    .recruit-grid-item {
        width: 100%; /* スマホでは全幅に */
    }
    
    /* 縦積みにした際、下のブロックのテーブルが上のヘッダーにくっつきすぎないように調整 */
    .recruit-grid-item:last-child .recruit-table {
        margin-top: 20px;
    }
}
/* --------------------------------------
 * 11. 追加調整（PC・スマホ）
 * -------------------------------------- */

/* 1. PC版：社員の写真を小さくする (バランス調整) */
.employee-thumb {
    width: 180px; /* 200pxから180pxに少し小さく */
}

/* --------------------------------------
 * 12. 追加調整（スマホ版）
 * -------------------------------------- */
@media (max-width: 768px) {

    /* 2. スマホ版：文字を全体的に大きくする */
    
    /* ヒーロー */
    .recruit-hero-subtitle {
        font-size: 17px; /* 16px -> 17px */
    }
    /* 社員の声 */
    .employee-info h3 {
        font-size: 15px; /* 14px -> 15px */
    }
    .employee-quote {
        font-size: 16px; /* 15px -> 16px */
    }
    .employee-info p {
        font-size: 15px; /* 13px -> 15px */
    }
    /* 募集要項 */
    .recruit-category p,
    .recruit-category .size-18 {
        font-size: 16px; /* 15px, 17px -> 16px (統一) */
    }
    .recruit-table th,
    .recruit-table td {
        font-size: 15px; /* テーブル内も少し大きく */
    }

    /* 3. スマホ版：「JSIRで働く魅力」を横並びにする */
    
    /* [重要] 縦積みの指定を解除 */
    .why-work-jsir .recruit-layout .col-1_3 {
        width: 33.333%; /* 100%を上書きして横並びを維持 */
        padding-left: 5px;  /* 窮屈なので隙間を調整 */
        padding-right: 5px;
        margin-bottom: 0; /* 縦積みの余白を削除 */
    }
    
    /* 横並びで収めるため、中の要素を小さく調整 */
    .why-work-jsir .feature-icon img {
        width: 60px; /* 80px -> 60px */
        height: 60px;
    }
    .why-work-jsir .feature-item h3 {
        font-size: 14px; /* 他は大きく、ここは小さく */
    }
    .why-work-jsir .feature-item p {
        font-size: 13px; /* 他は大きく、ここは小さく */
        line-height: 1.5;
        text-align: center; /* 小さくなるので中央揃えに変更 */
    }
}