@charset "UTF-8";

/* ==================================================
   1. ページ全体・共通リセット(ID: 2168）
================================================== */
body{ 
    overflow-x: hidden;
} 

.page-id-2168 #wrap,
.page-id-2168 #main,
.page-id-2168 #container,
.page-id-2168 #content,
.page-id-2168 .entry-content {
    overflow: visible !important;
}

.page-id-2168 #main #container #content {
    width: 100% !important;
    float: none !important;
    max-width: 1000px;
    margin: 0 auto !important;
}

/* --- 共通ユーティリティクラス --- */
.sec-wrap {
    width: 100%;
    box-sizing: border-box !important;
    margin-top: 2em;
    margin-bottom: 2em;
}

.sec-full {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.sec-inner {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

/* 共通見出しスタイル */
.entry-content h2.sec-title,
#content .entry-content h2.sec-title,
#content h2.sec-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 26px !important;
    font-weight: bold !important;
    color: #111827 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

.sec-icon {
    width: 24px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}


/* ==================================================
   2. メッセージ セクション
================================================== */
#message {
    margin: 0 0 50px 0;
}

.message-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.message-inner>p,
.message-text>p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.message-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.message-text .message-badge {
    display: inline-block;
    background-color: #dbeafe;
    color: #1d4ed9;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.entry-content .message-text h2.message-title,
#content .entry-content .message-text h2.message-title {
    font-size: 26px !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    color: #111111 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    box-shadow: none !important;
}

.entry-content .message-text p.message-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin: 0 0 15px 0;
    padding: 0;
}

.message-image {
    flex: none;
    width: 384px;
    height: 300px;
}


/* ==================================================
   3. 仕事内容 セクション
================================================== */
#job {
    background-color: #F9FAFB !important;
    padding: 40px 0 !important;
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.job-inner {
    max-width: 1000px !important;
    padding: 0 20px !important;
}

.job-title-icon {
    width: 28px !important;
}

.job-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.job-item-card {
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 28px !important;
}

.job-card-img {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    margin-bottom: 2em;
}

.job-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    min-height: 13em;
}

.entry-content .job-card-body h3.job-card-title,
#content .entry-content .job-card-body h3.job-card-title {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #0B73B7 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.job-card-desc {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #4B5563 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==================================================
   4. 数字で見る鳥取旭工業 セクション
================================================== */
#number {
    margin-top: 60px !important;
    margin-bottom: 80px !important;
}

.number-inner {
    max-width: 1350px !important;
    background-color: #2563EB !important;
    border-radius: 24px !important;
    padding: 50px 100px !important;
    color: #ffffff !important;
}

/* 数字セクション固有の見出し上書き */
.entry-content #number h2.sec-title,
#content .entry-content #number h2.sec-title {
    color: #ffffff !important;
    display: table !important;
    border-bottom: 2px solid rgba(104, 191, 248, 1) !important;
    padding: 0 0 6px 0 !important;
    margin: 0 auto 40px auto !important;
}

.number-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px 0px !important;
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.number-item {
    text-align: center !important;
}

.number-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 0px auto;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-icon img {
    width: 50px !important;
    height: auto !important;
    display: block !important;
}

.number-val {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    color: #ffffff;
}

.number-val.text-size-sm {
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.number-unit {
    font-size: 16px;
    font-weight: normal;
    margin-left: 2px;
}

.number-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

/* ==================================================
   5. 募集要項 セクション
================================================== */
/*タブ切り替え用のCSS*/
.recruit-tab-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.recruit-tab-btn {
    padding: 12px 40px;
    background-color: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.recruit-tab-btn[data-target="tab-new"] {
    background-color: #FEEDDB;
    border: 2px solid #FEEDDB;
    color: #F07D09;
    opacity: .8;
}

.recruit-tab-btn[data-target="tab-mid"] {
    background-color: #DBEAFE;
    border: 2px solid #DBEAFE;
    color: #005bb5;
    opacity: .8;
}

.recruit-tab-btn:hover {
    opacity: .6;
}

.recruit-tab-btn.active {
    opacity: 1;
}

.recruit-tab-btn.active[data-target="tab-new"] {
    border-color: #F07D09;
}

.recruit-tab-btn.active[data-target="tab-mid"] {
    border-color: #005bb5;
}


.recruit-tab-content {
    display: none;
}

.recruit-tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.recruit-item {
    margin-bottom: 40px;
    padding: 0 4em 1em;
    border: 1px solid #ddd;
    border-radius: 25px;
}

.recruit-item-title {
    font-size: 1.2rem;
    font-weight: bold;
    border-left: 5px solid #005bb5;
    padding-left: 12px;
    margin-bottom: 15px;
}

.recruit-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

.recruit-table th,
.recruit-table td {
    padding: 12px 15px;
    line-height: 1.6;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    font-size: 1.2em;
}

.recruit-table th {
    background-color: #FFF !important;
    width: 25%;
    color: #0B73B7;
    text-align: left;
    font-weight: bold;
}

@media (max-width: 768px) {
    .recruit-item {
        padding: 0 2em 1em;
    }

    .recruit-table th,
    .recruit-table td {
        display: block;
        width: 100%;
        padding: 12px 2px !important;
    }

    .recruit-table th {
        border-bottom: none !important;
    }
}

.entry-btn {
    text-align: center;
    margin-bottom: 6em;
}

.entry-btn a {
    font-size: 16px;
    padding: 12px 15px;
    border-radius: 4px;
    background-color: #0B73B7;
    border: 1px solid #0B73B7;
    color: #FFF !important;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.entry-btn a:hover {
    background-color: #FFF;
    color: #0B73B7 !important;
}

#requirements h3.recruit-item-title {
    border-left: 8px solid #000;
    padding-top: 0;
}

/* ==================================================
   6. 採用の流れ セクション
================================================== */
#flow {
    max-width: 1000px !important;
    margin: 6em auto 80px auto !important;
    padding: 0 20px !important;
}

.flow-step-grid {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 15px !important;
    width: 100% !important;
}

.flow-step-item {
    flex: 1 !important;
    text-align: center !important;
}

.step-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px auto;
    border: 2px solid #555555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    color: #666666;
}

.entry-content .flow-step-item h3.step-title,
#content .entry-content .flow-step-item h3.step-title {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #666666 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.step-desc {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #666666 !important;
    margin: 0 !important;
    text-align: left !important;
}

.flow-step-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #D1D5DB;
    margin-top: 30px;
    flex-shrink: 0;
}


/* ==================================================
   7. お問い合わせ先 セクション
================================================== */
#contact {
    max-width: 900px !important;
    margin: 0 auto 80px auto !important;
    padding: 0 20px !important;
}

.contact-inner {
    text-align: center !important;
}

/* お問い合わせ先固有の見出し上書き */
.entry-content #contact h2.sec-title,
#content .entry-content #contact h2.sec-title,
#content #contact h2.sec-title {
    margin: 0 0 10px 0 !important;
}

.contact-subtext {
    font-size: 16px !important;
    color: #555555 !important;
    margin: 0 0 35px 0 !important;
    text-align: center !important;
}

.contact-box-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
}

.contact-img-box {
    flex: 1 !important;
    max-width: 420px !important;
}

.contact-img-box img.contact-banner-img {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.contact-img-box a {
    display: block !important;
    text-decoration: none !important;
}


/* ==================================================
   8. レスポンシブ
================================================== */
@media screen and (max-width: 768px) {

    /* メッセージ */
    .message-inner {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .message-image {
        max-width: 100% !important;
        min-width: 100% !important;
    }

    .entry-content .message-text h2.message-title {
        font-size: 20px !important;
    }

    /* 仕事内容 */
    .job-card-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .job-card-img {
        height: 160px !important;
    }

    /* 数字
    .number-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 15px !important;
    } */

    /* .number-inner {
        padding: 35px 20px !important;
    } */

    /* 流れ */
    .flow-step-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }

    .flow-step-item {
        width: 100% !important;
    }

    .flow-step-arrow {
        border-width: 14px 10px 0 10px;
        border-color: #D1D5DB transparent transparent transparent;
        margin-top: 0;
    }

    .step-desc {
        text-align: center !important;
    }

    /* お問い合わせ先 */
    .contact-box-grid {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .contact-img-box {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 480px) {

    /* 数字 (スマホ小) */
    .number-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* フォーム全体の大枠 */
.custom-recruit-form {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #000;
    line-height: 1.6;
}
#content .custom-recruit-form h3{
    padding-left: 0;
    margin-bottom: 3em;
    font-size: 16px;
}
.custom-recruit-form .form-group {
    margin-bottom: 35px;
}

/* 項目ラベルのスタイル */
.custom-recruit-form .form-label {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.custom-recruit-form .wpcf7-checkbox {
    display: flex;
    align-items: center;
    gap: 50px; /* 項目同士の間隔 */
}

.custom-recruit-form input[type="checkbox"] {
    margin: 0 5px 0 0 !important; 
}

/* 必須バッジ（青色） */
.custom-recruit-form .required-badge {
    background-color: #0072bc; /* 画像の青に近い色 */
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 12px;
    font-weight: normal;
}

/* 横並び項目（氏名・フリガナ） */
.custom-recruit-form .inline-fields {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.custom-recruit-form .field-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-recruit-form .field-item p{
    display: flex;
    align-items: center;
}

.custom-recruit-form .field-prefix {
    font-weight: bold;
    font-size: 15px;
    min-width: 3em;
}

/* 入力エリア（テキスト、セレクト、テキストエリア）共通デザイン */
.custom-recruit-form input[type="text"],
.custom-recruit-form input[type="email"],
.custom-recruit-form input[type="tel"],
.custom-recruit-form select,
.custom-recruit-form textarea {
    background-color: #f7f7f7; /* 薄いグレー背景 */
    border: none;
    border-radius: 4px;
    padding: 12px 15px;
    font-size: 15px;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}

/* プレースホルダーの文字色 */
.custom-recruit-form input::placeholder,
.custom-recruit-form textarea::placeholder {
    color: #b3b3b3;
}

/* 各入力欄の幅調整 */
.custom-recruit-form .inline-fields span.wpcf7-form-control-wrap {
    width: 200px;
}
.custom-recruit-form .full-width-sm span.wpcf7-form-control-wrap {
    width: 250px;
}
.custom-recruit-form .full-width-md span.wpcf7-form-control-wrap {
    width: 100%;
    max-width: 450px;
}

/* 年月日の横並びスタイル */
.custom-recruit-form .date-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.custom-recruit-form .date-fields .select-wrap span.wpcf7-form-control-wrap {
    width: 120px;
    display: block;
}
.custom-recruit-form .gender-select span.wpcf7-form-control-wrap {
    width: 150px;
}
.custom-recruit-form .date-suffix {
    font-weight: bold;
    font-size: 15px;
    margin-right: 10px;
}

/* 送信ボタン（確認画面へ）のスタイル */
.custom-recruit-form .submit-wrap {
    text-align: center;
    margin-top: 60px;
}
.custom-recruit-form .submit-wrap input[type="submit"] {
    background-color: #0072bc;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 16px 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
.custom-recruit-form .submit-wrap input[type="submit"]:hover {
    background-color: #005a96;
}

/* スマートフォン向けのレスポンシブ対応 */
@media (max-width: 600px) {
    .custom-recruit-form .inline-fields {
        flex-direction: column;
        gap: 15px;
    }
    .custom-recruit-form .inline-fields span.wpcf7-form-control-wrap,
    .custom-recruit-form .full-width-sm span.wpcf7-form-control-wrap,
    .custom-recruit-form .full-width-md span.wpcf7-form-control-wrap,
    .custom-recruit-form .date-fields .select-wrap span.wpcf7-form-control-wrap {
        width: 100%;
    }
}

/* Contact Form 7の自動改行タグを無効化して横並びを維持する */
.custom-recruit-form .inline-fields br,
.custom-recruit-form .field-item br,
.custom-recruit-form .date-fields br {
    display: none !important;
}
.custom-recruit-form .inline-fields p,
.custom-recruit-form .field-item p,
.custom-recruit-form .date-fields p {
    margin: 0 !important;
    padding: 0 !important;
}

/* style.css の強制指定（width: auto !important 等）を打ち消す */
#content form .custom-recruit-form .textarea-wrap textarea {
    width: 100% !important;
    height: auto !important; /* 30pxに潰されるのを防ぐ */
    min-height: 200px !important;
    box-sizing: border-box !important;
}

/* 氏名やメールアドレスの入力欄も「width: auto」の影響を受けている場合、こちらも追記 */
#content form .custom-recruit-form input[type="text"],
#content form .custom-recruit-form input[type="email"],
#content form .custom-recruit-form input[type="tel"] {
    width: 100% !important;
    height: auto !important;
}

/* style.css の入力欄の装飾（黒枠、狭い余白、内側の影）を強力に打ち消す */
.page-id-19 #content form .custom-recruit-form input[type="text"],
.page-id-19 #content form .custom-recruit-form input[type="email"],
.page-id-19 #content form .custom-recruit-form input[type="tel"],
.page-id-19 #content form .custom-recruit-form textarea,
#content form .custom-recruit-form input[type="text"],
#content form .custom-recruit-form input[type="email"],
#content form .custom-recruit-form input[type="tel"],
#content form .custom-recruit-form textarea {
    padding: 12px 15px !important;
    margin: 0 !important;
    border: none !important;
    background-color: #f7f7f7 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    /* ↓ 余計な影（box-shadow）を強制的に消去する指定を追加 ↓ */
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* =========================================
   ステップバー（進行状況）のデザイン
========================================= */
.step-bar {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    width: 100%;
    overflow: hidden;
}

.step-bar li {
    flex: 1;
    text-align: center;
    background: #dcdcdc; /* 非アクティブ時のグレー */
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    position: relative;
    box-sizing: border-box;
}

/* 矢印の形（右側の三角） */
.step-bar li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid #dcdcdc; /* 背景と同じ色 */
    z-index: 2;
    transition: all 0.3s;
}

/* 矢印の形（左側の白抜き隙間） */
.step-bar li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid #fff;
    z-index: 1;
}

/* アクティブ（現在地）のスタイル */
.step-bar li.active {
    background: #444444; /* アクティブ時の濃いグレー */
}
.step-bar li.active::after {
    border-left-color: #444444;
}


/* =========================================
   ボタンのデザイン
========================================= */
.btn-confirm-style, .btn-submit-style {
    background-color: #0072bc !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    padding: 16px 60px !important;
    font-size: 16px !important;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-confirm-style:hover, .btn-submit-style:hover {
    background-color: #005a96 !important;
}

.btn-back-style {
    background-color: #666 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    padding: 16px 60px !important;
    line-height: 110%;
    font-size: 16px !important;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-back-style:hover {
    background-color: #444 !important;
}


/* =========================================
   確認画面モード（is-confirm-mode）の装飾
========================================= */
/* 入力欄をただのテキストのように見せる */
.is-confirm-mode input[type="text"],
.is-confirm-mode input[type="email"],
.is-confirm-mode input[type="tel"],
.is-confirm-mode textarea,
.is-confirm-mode select {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    pointer-events: none; /* クリック不可にする */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #000 !important;
    resize: none !important;
}

/* 必須バッジやプレースホルダーを隠す */
.is-confirm-mode .required-badge {
    display: none;
}
.is-confirm-mode input::placeholder,
.is-confirm-mode textarea::placeholder {
    color: transparent !important;
}

/* 年月日の「年」「月」「日」の間隔を詰める */
.is-confirm-mode .date-fields {
    gap: 0;
}
.is-confirm-mode .date-fields .select-wrap span.wpcf7-form-control-wrap {
    width: auto !important;
    min-width: 30px;
}

/* =========================================
   BizVektorテーマのリスト装飾（黒丸や余白）を強制リセット
========================================= */
#content .entry-content ul.step-bar,
ul.step-bar {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 0 50px 0 !important;
    padding: 0 !important;
}

#content .entry-content ul.step-bar li,
ul.step-bar li {
    list-style: none !important;
    list-style-type: none !important;
    background-image: none !important;

    /* ▼ Flexboxを使って強制的に上下・左右中央揃えにする ▼ */
    display: flex !important;
    align-items: center !important; /* ここで上下中央を強制 */
    justify-content: center !important; /* ここで左右中央を強制 */
    padding: 0 !important;
    margin: 0 !important;
    height: 50px !important;
    line-height: 1 !important; /* 行の高さをリセットして干渉を防ぐ */
}

/* 1つ目のステップにテーマ独自のアイコン（・）が出ないようにする */
#content .entry-content ul.step-bar li:first-child::before,
ul.step-bar li:first-child::before {
    display: none !important;
    content: none !important;
}

#content ul.step-bar p{
    margin-bottom: 0;
}

/* =========================================
   ステップバーの区切り線（白線）を太くする
========================================= */
/* 1. 左のステップが上に重なるように順序（z-index）を設定 */
#content .entry-content ul.step-bar li:nth-child(1),
ul.step-bar li:nth-child(1) { z-index: 3 !important; }

#content .entry-content ul.step-bar li:nth-child(2),
ul.step-bar li:nth-child(2) { z-index: 2 !important; }

#content .entry-content ul.step-bar li:nth-child(3),
ul.step-bar li:nth-child(3) { z-index: 1 !important; }

/* 2. 2番目以降のステップに「左マージン（隙間の太さ）」を追加 */
#content .entry-content ul.step-bar li:not(:first-child),
ul.step-bar li:not(:first-child) {
    margin-left: 6px !important; /* ★ここの数値で線の太さを調整できます（例：10px など） */
    padding-left: 15px !important; /* 文字が左の白抜きに被らないよう少し右にズラす */
}

/* =========================================
   確認画面：背景の透明化と余白の縮小（さらに強力な上書き）
========================================= */
/* 1. 入力欄のグレー背景を消し、テキストエリアの無駄な高さをなくす */
.page-id-19 #content form .custom-recruit-form.is-confirm-mode input[type="text"],
.page-id-19 #content form .custom-recruit-form.is-confirm-mode input[type="email"],
.page-id-19 #content form .custom-recruit-form.is-confirm-mode input[type="tel"],
.page-id-19 #content form .custom-recruit-form.is-confirm-mode textarea,
#content form .custom-recruit-form.is-confirm-mode input[type="text"],
#content form .custom-recruit-form.is-confirm-mode input[type="email"],
#content form .custom-recruit-form.is-confirm-mode input[type="tel"],
#content form .custom-recruit-form.is-confirm-mode textarea,
#content form .custom-recruit-form.is-confirm-mode select {
    padding: 0 !important;
    min-height: 0 !important; /* テキストエリアの余分な高さをリセット */
    height: auto !important;
    line-height: 1.6 !important;
}

/* 2. form-label（項目名）と入力内容の間の空白を縮める */
.is-confirm-mode .form-label {
    margin-bottom: 2px !important;
    color: #666;
}

/* 3. 各項目のブロック全体の間隔もスッキリさせる */
.is-confirm-mode .form-group {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px dashed #ddd;
}
.is-confirm-mode .form-group:last-of-type {
    border-bottom: none !important;
}

/* 4. 氏名・年月日などの横並びアイテムの隙間調整 */
.is-confirm-mode .inline-fields,
.is-confirm-mode .date-fields {
    margin-top: 5px !important;
    gap: 5px 15px !important;
}

/* =========================================
   フォーム切り替えボタン（新卒 / 中途）
========================================= */
.entry-type-switch {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 0 40px 0;
    width: 100%;
}

.entry-type-switch .switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    max-width: 250px;
    height: 60px;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* 非アクティブ状態（白背景） */
.entry-type-switch .switch-btn {
    background-color: #fff;
    color: #333 !important;
    border: 1px solid #ccc;
}
.entry-type-switch .switch-btn:hover {
    background-color: #f7f7f7;
    opacity: 0.8;
}

/* アクティブ状態（開いているページ：青背景） */
.entry-type-switch .switch-btn.current {
    background-color: #0072bc; /* サイトカラーに合わせて青色を指定 */
    color: #fff !important;
    border: 1px solid #0072bc;
    pointer-events: none; /* 現在のページなのでクリックを無効化 */
}

/* スマホ用の微調整 */
@media screen and (max-width: 767px) {
    .entry-type-switch {
        gap: 10px;
    }
    .entry-type-switch .switch-btn {
        font-size: 15px;
        height: 50px;
    }
}

/* =========================================
   確認画面：ボタンを強制的に横並びにする
========================================= */
/* ★確認画面モードの時だけ表示＆横並びを強制する */
.is-confirm-mode #action-confirm {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
}

/* Contact Form 7 が自動追加する改行タグを無効化 */
#action-confirm br {
    display: none !important;
}

/* ボタンが勝手に横幅100%（縦積み）になるのを防ぐ */
#action-confirm .btn-back-style,
#action-confirm .btn-submit-style,
#action-confirm input[type="submit"] {
    width: auto !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* スマホ閲覧時（画面が狭い場合）の微調整 */
@media screen and (max-width: 767px) {
    .is-confirm-mode #action-confirm {
        gap: 10px !important;
    }
    #action-confirm .btn-back-style,
    #action-confirm .btn-submit-style,
    #action-confirm input[type="submit"] {
        padding: 16px 20px !important;
        font-size: 14px !important;
    }
}

/* =========================================
   確認画面：年月日の入力枠を縮めて隙間をなくす
========================================= */
/* Contact Form 7が自動で付けるタグやラップ要素の幅をリセット */
#content form .custom-recruit-form.is-confirm-mode .date-fields .select-wrap,
#content form .custom-recruit-form.is-confirm-mode .date-fields .wpcf7-form-control-wrap {
    width: auto !important;
    flex: none !important;
}

/* 入力された文字（数字）の幅に合わせて枠を縮小 */
#content form .custom-recruit-form.is-confirm-mode .date-fields input[type="text"],
#content form .custom-recruit-form.is-confirm-mode .date-fields select {
    width: 90px !important; /* ★ここで文字と単位の隙間を調整（狭すぎる場合は50pxなどに増やしてください） */
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important; /* 数字を中央揃えにすると「年」とのバランスが良くなります */
}

.is-confirm-mode input[type="text"],
.is-confirm-mode input[type="email"],
.is-confirm-mode input[type="tel"],
.is-confirm-mode select{
    text-align: center !important; /* 数字を中央揃えにすると「年」とのバランスが良くなります */
}
#content form .custom-recruit-form.is-confirm-mode .date-fields input,
#content form .custom-recruit-form.is-confirm-mode textarea,
.is-confirm-mode select{
    background: #e8f0fe !important;
}

/* =========================================
   スマホ表示時：入力画面の「年」の横幅を100pxにする
========================================= */
@media screen and (max-width: 767px) {
    /* 確認画面ではない（入力画面の）時だけ、テキスト入力枠を100pxに固定 */
    #content form .custom-recruit-form:not(.is-confirm-mode) .date-fields input[type="text"] {
        width: 100px !important;
    }

    /* Contact Form 7のラップ要素が100%に広がって「年」の文字が改行されるのを防ぐ */
    #content form .custom-recruit-form:not(.is-confirm-mode) .date-fields span.wpcf7-form-control-wrap {
        width: auto !important;
        display: inline-block !important;
    }
}

/* ==================================================
   数字で見るスマホ対応
================================================== */
@media screen and (max-width: 768px) {
    .number-card-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 25px 10px !important;
        max-width: 100% !important;
    }

    .number-inner,
    .recruit-number-inner {
        padding: 35px 15px !important;
    }
}