/* =========================================================
カラー変数3色カラー変更場所
========================================================= */

:root{

    /* メインカラー */
    --main-color:#0f172a;
    --sub-color:#4b5563;
    --accent-color:#ffffff;

    /* テキスト */
    --text-color:#111827;
    --text-light:#6b7280;
    --text-muted:#9ca3af;

    /* ボーダー */
    --border-color:#d1d5db;
    --border-light:#e5e7eb;

    /* 背景 */
    --bg-color:#f5f5f5;
    --card-bg:#ffffff;
    --soft-bg:#fafafa;

}


/* =========================================================
予約ページ（整理版）
========================================================= */


/* =========================
全体
========================= */

.reserve-page-container,
.reserve-page-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:60px 20px 100px;
}


/* =========================
ヘッダー
========================= */

.reserve-page-header{
    margin-bottom:40px;
}

.reserve-page-header h1,
.reserve-page-title{
    font-size:56px;
    font-weight:800;
    line-height:1.3;
    margin-bottom:16px;
    color:var(--main-color);
}

.reserve-page-header p,
.reserve-page-subtitle{
    font-size:16px;
    line-height:1.8;
    color:var(--text-light);
}


/* =========================
STEP
========================= */

.reserve-step-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:40px 0 60px;
}

.reserve-step{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:160px;
    padding:14px 22px;
    border-radius:999px;
    background:#f3f4f6;
    color:var(--text-light);
    font-size:14px;
    font-weight:700;
}

.reserve-step span{
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--border-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:var(--text-color);
}

.reserve-step.active{
    background:var(--main-color);
    color:#fff;
}

.reserve-step.active span{
    background:#fff;
    color:var(--text-color);
}


/* =========================
STEP切替
========================= */

.reserve-section{
    display:none;
    margin-bottom:60px;
}

.reserve-section.active-step{
    display:block;
}


/* =========================
見出し
========================= */

.reserve-section h2,
.reserve-section-title{
    font-size:48px;
    font-weight:800;
    line-height:1.4;
    margin-bottom:36px;
    color:var(--main-color);
}


/* =========================
タブ
========================= */

.reserve-tab-wrap{
    display:flex;
    overflow:hidden;
    width:100%;
    max-width:760px;
    margin-bottom:28px;
    border:1px solid var(--border-color);
    border-radius:18px;
}

.reserve-tab,
.reserve-tab-button{
    flex:1;
    height:64px;
    border:none;
    border-right:1px solid var(--border-color);
    background:var(--card-bg);
    color:var(--text-color) !important;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.reserve-tab:last-child,
.reserve-tab-button:last-child{
    border-right:none;
}

.reserve-tab.active,
.reserve-tab-button.active{
    background:var(--sub-color);
    color:#fff !important;
}


/* =========================
タブ切替
========================= */

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

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


/* =========================
カード
========================= */

.reserve-line-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    margin-bottom:16px;
    border:1px solid var(--border-color);
    border-radius:24px;
    background:var(--card-bg);
    transition:.3s;
    cursor:pointer;
}

.reserve-line-card:hover{
    border-color:var(--main-color);
}

.reserve-line-card input[type="radio"]{
    width:18px;
    height:18px;
    flex-shrink:0;
    margin:0;
}

.reserve-line-main{
    width:100%;
    min-width:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.reserve-line-left{
    flex:1;
    min-width:0;
}

.reserve-line-title{
    font-size:26px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:6px;
    color:var(--main-color);
    word-break:keep-all;
    overflow-wrap:anywhere;
}

.reserve-line-desc{
    font-size:14px;
    line-height:1.7;
    color:var(--text-light);
    overflow-wrap:anywhere;
}

/* ← 修正済み */
.reserve-line-right{
    min-width:120px;
    width:auto;
    flex-shrink:0;
    text-align:right;
}

.reserve-line-duration{
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:6px;
}

/* ← 修正済み */
.reserve-line-price{
    font-size:34px;
    font-weight:700;
    line-height:1;
    color:var(--main-color);
    white-space:nowrap;
}


/* =========================
時間枠のみ確保
========================= */

.reserve-only-card .reserve-line-left{
    display:flex;
    align-items:center;
    gap:14px;
}


/* =========================
注意事項
========================= */

.reserve-note-box,
.reserve-note-wrap{
    margin-top:36px;
    padding:28px 32px;
    border:1px solid var(--border-light);
    border-radius:24px;
    background:var(--soft-bg);
}

.reserve-note-title,
.reserve-note-wrap h4{
    font-size:22px;
    font-weight:700;
    margin-bottom:18px;
    color:var(--text-color);
}

.reserve-note-box ul,
.reserve-note-wrap ul{
    margin:0;
    padding-left:20px;
}

.reserve-note-box li,
.reserve-note-wrap li{
    margin-bottom:10px;
    font-size:14px;
    line-height:1.8;
    color:var(--sub-color);
}
.reserve-note-box,
.reserve-note-wrap{
    margin-bottom:48px;
}

/* =========================
ボタン
========================= */

.reserve-next-wrap{
    display:flex;
    gap:16px;
    margin-top:40px;
}

.reserve-next-button,
.reserve-back-button,
.reserve-submit-button{
    min-width:180px;
    height:60px;
    padding:0 34px;
    border:none;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.reserve-next-button,
.reserve-submit-button{
    background:var(--main-color);
    color:#fff;
}

.reserve-back-button{
    background:var(--border-light);
    color:var(--text-color);
}

.reserve-next-button:hover,
.reserve-submit-button:hover{
    opacity:.9;
}


/* =========================================================
スマホ
========================================================= */

@media(max-width:768px){

    .reserve-page-container,
    .reserve-page-wrap{
        padding:40px 20px 80px;
    }

    .reserve-page-header h1,
    .reserve-page-title{
        font-size:42px;
    }

    .reserve-section h2,
    .reserve-section-title{
        font-size:32px;
        margin-bottom:28px;
    }

    .reserve-step-wrap{
        gap:10px;
        margin:30px 0 40px;
    }

    .reserve-step{
        min-width:auto;
        width:calc(50% - 5px);
        justify-content:flex-start;
        font-size:12px;
        padding:12px 14px;
    }

    .reserve-step span{
        width:24px;
        height:24px;
        font-size:10px;
    }

    .reserve-tab-wrap{
        display:flex;
        flex-direction:row;
        border-radius:18px;
    }

    .reserve-tab,
    .reserve-tab-button{
        flex:1;
        width:auto;
        height:54px;
        padding:0 8px;
        border-right:1px solid var(--border-color);
        border-bottom:none;
        font-size:12px;
        white-space:nowrap;
    }

    .reserve-tab:last-child,
    .reserve-tab-button:last-child{
        border-right:none;
    }

    .reserve-line-card{
        align-items:flex-start;
        padding:18px;
        border-radius:22px;
    }

    .reserve-line-main{
        flex-direction:row;
        align-items:flex-start;
        gap:14px;
    }

    .reserve-line-left{
        flex:1;
    }

    .reserve-line-title{
        font-size:15px;
        line-height:1.5;
        margin-bottom:6px;
    }

    .reserve-line-desc{
        font-size:11px;
        line-height:1.7;
    }

    /* ← 修正済み */
    .reserve-line-right{
        width:80px;
        min-width:80px;
        text-align:right;
    }

    .reserve-line-duration{
        font-size:10px;
    }

    .reserve-line-price{
        font-size:18px;
    }

    .reserve-note-box,
    .reserve-note-wrap{
        padding:22px;
        border-radius:20px;
    }

    .reserve-note-title,
    .reserve-note-wrap h4{
        font-size:18px;
    }

    .reserve-note-box li,
    .reserve-note-wrap li{
        font-size:13px;
        line-height:1.7;
    }

    .reserve-next-wrap{
        flex-direction:column;
    }

    .reserve-next-button,
    .reserve-back-button,
    .reserve-submit-button{
        width:100%;
        min-width:auto;
        height:54px;
        font-size:14px;
    }
    <div id="step2" class="reserve-step-content">

    <h2 class="reserve-step-title">
        スタッフを選択してください
    </h2>

    <div class="staff-none-card">

        <label>
            <input type="radio" name="staff" value="none">

            <span class="staff-none-text">
                スタッフの希望はしない
            </span>
        </label>

    </div>

    <div class="staff-grid">

        <?php
        $staff_query = new WP_Query([
            'post_type' => 'staff',
            'posts_per_page' => -1
        ]);

        if($staff_query->have_posts()) :
        while($staff_query->have_posts()) :
        $staff_query->the_post();
        ?>

        <div class="staff-card">

            <div class="staff-image">

                <?php if(has_post_thumbnail()) : ?>

                    <?php the_post_thumbnail('medium'); ?>

                <?php else : ?>

                    <img src="https://placehold.jp/400x400.png">

                <?php endif; ?>

            </div>

            <div class="staff-content">

                <h3><?php the_title(); ?></h3>

                <p class="staff-career">
                    歴：
                    <?php the_field('career'); ?>
                </p>

                <p class="staff-specialty">
                    得意分野：
                    <?php the_field('specialty'); ?>
                </p>

                <p class="staff-message">
                    <?php the_field('message'); ?>
                </p>

            </div>

            <label class="staff-select-button">

                <input
                    type="radio"
                    name="staff"
                    value="<?php the_ID(); ?>"
                >

                <span>
                    指名する
                </span>

            </label>

        </div>

        <?php endwhile; wp_reset_postdata(); endif; ?>

    </div>

    <div class="reserve-navigation">

        <button
            type="button"
            class="reserve-prev"
            data-prev="step1">

            前へ戻る

        </button>

        <button
            type="button"
            class="reserve-next"
            data-next="step3">

            次へ進む

        </button>

    </div>

</div>