/* Recruit Section */
body {
    background-color: #fff;
    color: #4A4E69;
    padding: 0;
    margin: 0;
}

.color-section {
    background-color: #e1e6f0;
    color: #4A4E69;
    margin: 0;
    padding: 20px;
    margin-top: -20px;
}

/* アクティブボタン（選択中のページ） */
.common-buttons a.active {
    background-color: #e1e6f0;
    border-bottom: none;
    /* 下辺をなくす */
    color: #4A4E69;
    margin-bottom: -3px;
    /* ボタンが浮かないように調整 */
}

.recruit-tab-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.recruit-tab-buttons .tab-button {
    /* flex: 1 1 150px; 横幅を固定的に均等配分 */
    width: 300px;
    padding: 10px 25px;
    font-size: 1.1em;
    font-weight: bold;
    border: 2px solid #4A4E69;
    background-color: #fff;
    color: #4A4E69;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.recruit-tab-buttons .tab-button.active {
    background-color: #4A4E69;
    color: #fff;
}

.recruit-tab-content {
    margin-top: 20px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.recruit-section {
    width: 90%;
    margin: 40px auto;
}

/* ボックスの配置 */
.recruit-row {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

/* ボックススタイル */
.recruit-box {
    width: 50%;
    max-width: 900px;
    margin: 30px auto;
    padding: 30px;
    border: 3px solid #4A4E69;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 30px;
}

/* h3 タイトルを中央に配置 */
.recruit-tab-content>h2 {
    text-align: center;
    font-size: 2.5em;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #4A4E69;
}

/* ボックス内のタイトル */
.recruit-box h3 {
    font-size: 2em;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 3px solid #4A4E69;
    padding-bottom: 10px;
}

/* 詳細リスト */
.recruit-details {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.8;
}

.recruit-details ul {
    margin-top: 10px;
    padding-left: 20px;
    list-style-type: disc;
}

.recruit-details li {
    margin-bottom: 15px;
}

/* 業務内容セクション */
.recruit-content {
    width: 90%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* border: 3px solid #4A4E69; */
    padding: 40px;
    background-color: #fff;
}

/* 業務内容セクション全体のタイトル */
.recruit-content-title {
    font-size: 2.0em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 3px solid #4A4E69;
    padding-bottom: 10px;
}

/* 業務内容の内部ボックス */
.recruit-inner-box {
    border: 3px solid #4A4E69;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}

/* 内部ボックスのタイトル（h4に変更して小さめに） */
.recruit-inner-box h4 {
    font-size: 1.6em;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 2px solid #4A4E69;
    padding-bottom: 5px;
}

/* コンテンツ内のp */
.recruit-inner-box p {
    font-size: 1.2em;
    margin: 0 0 20px;
    line-height: 1.6;
    word-break: break-word;
}


/* 詳細リスト */
.recruit-details {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    line-height: 1.8;
}

.recruit-details li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #CDCEDD;
    /* ★ 下線追加 */
}

.recruit-details li>strong {
    min-width: 140px;
    /* ラベルの幅を固定 */
    display: inline-block;
    font-weight: bold;
    flex-shrink: 0;
}

.recruit-details li ul {
    margin: 5px 0 0 0;
    /* 左右のマージンをなくす */
    padding-left: 0px;
    /* ラベル分と同じだけ左に揃える */
    list-style: disc;
    border: none;
    /* 念のためリスト全体の線を消す */
}


.recruit-details li ul li {
    margin-bottom: 6px;
    /* line-height: 1.6; */
    border: none;
    /* 内側項目に下線が入らないように */
}

.recruit-inner-wrapper {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
    /* モバイルで折返しに対応 */
}

.recruit-inner-box {
    flex: 1 1 calc(50% - 20px);
    /* 2カラム分け */
    border: 3px solid #4A4E69;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
    /* 上下余白を適切に調整 */
}

.recruit-text {
    width: fit-content;
    /* コンテンツの幅に合わせる */
    max-width: 400px;
    /* 広がりすぎ防止（必要に応じて調整） */
    margin-left: auto;
    /* 親要素内で中央寄せ */
    margin-right: auto;
    text-align: left;
    /* テキストは左揃え */
    padding: 10px 20px 10px 40px;
}

/* 選考の流れボックス */
.selection-flow-box {
    padding: 40px;
    border: 3px solid #4A4E69;
    background-color: #fff;
}

/* 選考の流れ */
.selection-flow {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    position: relative;
    padding: 20px 0 10px 100px;
}

.selection-flow li {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.step-badge {
    background-color: #4A4E69;
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 50px;
    min-width: 120px;
    text-align: center;
    font-size: 1.2em;
    z-index: 2;
}

.step-line {
    width: 20px;
    height: 3px;
    background-color: #4A4E69;
    margin: 0 40 0 0px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* 点線の追加 */
.step-line::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    width: 2px;
    height: 30px;
    background-color: #4A4E69;
    z-index: 0;
}

.step-line::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 2px;
    height: 30px;
    background-color: #4A4E69;
    z-index: 0;
}

.step-content {
    margin-left: 20px;
    /* 右に少し移動 */
}

.step-content h4 {
    margin: 0;
    font-size: 1.8em;
    color: #4A4E69;
    margin-bottom: 10px;
}

.step-content p {
    margin: 0;
    font-size: 1.2em;
    color: #333;
}

/* エントリーボタン */
.entry-button {
    display: block;
    width: 60%;
    margin: 20px auto 20px;
    padding: 15px 30px;
    background-color: #4A4E69;
    color: #fff;
    border: 3px solid #4A4E69;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1.3em;
    border-radius: 40px;
}

.entry-button:hover {
    background-color: #e1e6f0;
    color: #4A4E69;
    border-color: #4A4E69;
}

/* PC版のみ改行 */
.pc-br {
    display: none;
}

/* 募集要項の順番を正社員→アルバイトに強制する */
.recruit-tab-content {
    display: flex;
    flex-direction: column;
}

#seishain {
    order: 1;
}

#baito {
    order: 2;
}

.recruit-order-wrapper {
    display: flex;
    flex-direction: column;
}

#recruit-heading {
    order: 0;
}

#seishain {
    order: 1;
}

#baito {
    order: 2;
}

/* ボタン順序の変更 */
.recruit-tab-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.recruit-tab-buttons button {
    order: 2;
    /* 一旦全て2に */
}

.recruit-tab-buttons button[data-target="seishain"] {
    order: 1;
    /* 正社員を最初に */
}

.recruit-tab-buttons button[data-target="baito"] {
    order: 2;
    /* アルバイトを次に */
}

/* recruit-column（外枠）の調整 */
.recruit-column {
    display: flex;
    justify-content: center;
    /* 中央揃え */
    /* max-width: 600px;  */
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 0 20px;
    /* スマホ対応の余白 */
}

/* recruit-box（中身）はそのまま */
.recruit-box {
    width: 100%;
    max-width: 500px;
    /* 幅上限 */
    padding: 40px;
    background-color: #ffffff;
    border: 3px solid #4A4E69;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

/* 正社員・アルバイトのボックス（recruit-box）の幅を維持
.recruit-box {
    max-width: 600px;
    margin: 0 auto 40px auto;
} */

/* 選考の流れのボックス（selection-flow-box）の幅を個別指定 */
.selection-flow-box {
    max-width: 1000px;
    /* ← 任意で調整可能（例: 600px） */
    margin: 0 auto;
}

/* 少し太字（semi-bold）用クラス */
.semi-bold {
    font-weight: 600;
}

/* 業務内容のボックスだけ幅広く・中央配置にする */
.recruit-box-gyomu {
    max-width: 1000px;
    /* 必要に応じて800pxや1200pxでもOK */
    width: 95%;
    margin: 50px auto;
    padding: 40px 50px;
}

/* 業務内容：h5 と p をリスト風に */
.recruit-inner-box h5 {
    font-size: 1em;
    font-weight: bold;
    color: #4A4E69;
    border-bottom: 1px solid #4A4E69;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 20px;
}

/* ①②のタイトル */
.section-heading {
    font-size: 1.6em;
    font-weight: bold;
    border-bottom: 2px solid #7F839A;
    margin: 10px 0 25px 10px;
    padding: 35px;
    color: #4A4E69;
    text-align: center;
}

.recruit-p-block {
    padding: 30px;
    border-bottom: 1px solid #CDCEDD;
}

.row-entry {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid #CDCEDD;
    padding-bottom: 10px;
}

.row-entry h4 {
    width: 160px;
    font-size: 1.1em;
    font-weight: bold;
    color: #CDCEDD;
    margin: 0;
    padding-top: 3px;
    /* pと上下揃える */
}

/* 左側の見出し（h6） */
.row-entry h6 {
    flex-shrink: 0;
    width: 180px;
    font-weight: 600;
    font-size: 1em;
    margin-left: 60px;
    line-height: 1.7;
    padding-top: 4px;
    color: #4A4E69;
}

.row-entry p {
    margin: 0;
    line-height: 1.7;
    flex: 1;
    padding-left: 0 !important;
    text-indent: 0 !important;
    word-break: break-word;
}

/* 特定のrow-entryを縦並びにする（営業インターン用） */
.row-entry-single {
    display: flex;
    flex-direction: row;
    /* ← ここを row に修正 */
    align-items: flex-start;
    gap: 10px;
    /* オプション：h6とpの間に余白を入れる */
}

.row-entry-single h6 {
    width: 180px;
    flex-shrink: 0;
    margin-bottom: 0;
}

.row-entry-single p {
    margin: 0;
    line-height: 1.7;
    flex: 1;
    padding-bottom: 10px;
}

.recruit-p-block {
    text-align: center;
}

/* h6とpの縦並び調整（リスト風） */
.recruit-section-block h6 {
    font-size: 1.1em;
    font-weight: 600;
    color: #4A4E69;
    margin-top: 15px;
    margin-bottom: 6px;
}

.recruit-section-block p {
    font-size: 1em;
    line-height: 1.7;
    margin: 0 0 20px 1.5em;
    text-indent: -1.5em;
    padding-left: 1.5em;
    word-break: break-word;
}

/* .recruit-p-block{
    border-bottom: 1px solid #CDCEDD;
 
} */


.recruit-flex-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.recruit-flex-row h6 {
    font-size: 1em;
    font-weight: 600;
    width: 180px;
    /* タイトルの幅固定 */
    min-width: 180px;
    margin-right: 20px;
    color: #4A4E69;
}

.recruit-flex-row p {
    font-size: 1em;
    line-height: 1.7;
    margin: 0;
}


@media (min-width: 769px) {
    .pc-br {
        display: inline;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .recruit-row {
        flex-direction: column;
    }

    .recruit-box {
        min-height: auto;
        margin-bottom: 20px;
    }

    .recruit-box {
        width: 100%;
        padding: 20px;
        margin: 20px auto;
        box-sizing: border-box;
    }

    .recruit-box h3 {
        font-size: 1.5em;
        margin-bottom: 15px;
        text-align: center;
        border-bottom: 2px solid #4A4E69;
        padding-bottom: 10px;
    }

    .recruit-details li {
        font-size: 0.95em;
    }


    .recruit-content {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        margin: 20px 10px;
        width: calc(100% - 20px);
        /* 枠内に収まるように調整 */
        box-sizing: border-box;
    }

    .recruit-content h3 {
        width: 100%;
        font-size: 2em;
        margin: 0 0 20px 0;
        text-align: center;
    }

    .recruit-content .recruit-box-content {
        width: 100%;
        margin-left: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .recruit-content .recruit-box-content h3 {
        font-size: 1.5em;
        margin: 0 0 10px 0;
        white-space: normal;
    }

    .recruit-inner-wrapper {
        flex-direction: column;
    }

    .recruit-inner-box {
        width: 100%;
    }

    .recruit-content .recruit-box-content p {
        font-size: 1.1em;
        margin: 0 0 20px 0;
        line-height: 1.8;
        word-wrap: break-word;
        word-break: break-word;
    }

    .recruit-column {
        flex-direction: column;
        gap: 20px;
        padding: 0px;
    }

    .recruit-column .recruit-box {
        width: 100%;
        min-height: auto;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
    }

    .recruit-column .recruit-box h3 {
        font-size: 1.8em;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 3px solid #4A4E69;
    }

    .recruit-column .recruit-details {
        padding-left: 0;
        line-height: 1.6;
    }

    .recruit-column .recruit-details ul {
        margin-top: 10px;
        padding-left: 20px;
        list-style-type: disc;
    }

    .recruit-column .recruit-details li {
        margin-bottom: 15px;
    }

    .recruit-column {
        flex-direction: column;
        gap: 20px;
    }

    .recruit-details li>strong {
        margin-right: -50px;
        /* 間隔をさらに狭くする */
    }

    .recruit-details li {
        column-gap: 1px;
        /* flex 子要素の間の余白を縮小 */
    }

    .selection-flow {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .selection-flow li {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        margin: 15px;
        border: 2px solid #4A4E69;
        background-color: #fff;
        border-radius: 10px;
    }

    .step-badge {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 10px;
        background-color: #4A4E69;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        margin: 0 auto 10px auto;
        text-align: center;
    }

    .step-line {
        display: none;
    }

    .step-content h4 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0 20px 10px 0;
        text-align: center;
    }

    .step-content p {
        font-size: 1em;
        line-height: 1.6;
    }

    .entry-button {
        font-size: 1em;
        display: block;
        margin: 20px auto;
        padding: 15px 20px;
        background-color: #4A4E69;
        color: #fff;
        text-align: center;
        font-weight: bold;
        border-radius: 40px;
        text-decoration: none;
    }

    .entry-button:hover {
        background-color: #555;
    }

    .row-entry {
        flex-direction: column;
        align-items: flex-start;
    }

    .row-entry h6 {
        width: 100%;
        margin-bottom: 5px;
    }

    .row-entry p {
        padding-left: 0;
        text-indent: 0;
    }

    .pc-only {
        display: none;
    }

    .recruit-p-block {
        margin-left: 0 !important;
        text-indent: 0 !important;
    }

}