/* リセットCSS (基本的なスタイルを初期化) */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.red { 
    color: #D90000;
}

/* フォーム全体 */
.booking-form {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1140px; /* PCサイズで広げる */
    box-sizing: border-box;
}

/* 各セクションの共通スタイル */
.booking-section {
    margin-bottom: 40px;
}

/* フォームラベル（日付、時間、集合場所のタイトル） */
.booking-label-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* タイトルと所要時間/凡例を下に揃える */
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.booking-label-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-heading {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

.booking-required {
    background-color: #D90000; 
    color: #fff; 
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 0px; /* 角丸 */
    white-space: nowrap;
}

/* 所要時間 */
.booking-duration {
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
}

/* ================================================================
   日付選択セクション
   ================================================================ */
.calendar-display {
    overflow-x: auto; /* 常に横スクロール可能 */
    -webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
    margin-bottom: 20px; /* Notesとの間にスペース */
    padding-left: 0; /* 左右の余白をなくす */
    padding-right: 0; /* 左右の余白をなくす */
}

.calendar-list {
    display: flex;
    flex-wrap: nowrap; /* アイテムが折り返さないようにする */
    width: auto; /* flexアイテムに幅を任せる */
    padding-bottom: 10px; /* スクロールバーのためのスペース */
}

/* 個々の日付アイテム */
.calendar-item {
    flex-shrink: 0; /* アイテムが縮小しないようにする */
    box-sizing: border-box;
    text-align: center;
    margin-right: 1px; /* アイテム間の隙間を狭く */
    width: calc((100% - (2px * 13)) / 14); /* 14等分し、マージンを考慮した幅 */
    min-width: 70px; /* 各日付アイテムの最小幅を設定 (フォントサイズに合わせて調整) */
}

.calendar-list .calendar-item:last-child {
    margin-right: 0;
}

.calendar-item-button { /* リンクの代わりにボタンを使用 */
    display: block;
    height: 100%;
    width: 100%; /* 親要素の幅いっぱいに広げる */
}

.calendar-item-content {
    border: 1px solid #ccc;
    padding: 5px 3px; /* 上下左右のパディングをさらに調整 */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 子要素の幅を親に合わせる */
    justify-content: space-between; /* 縦方向の要素を均等に配置 */
    height: 85px; /* アイテムの高さ固定 (フォントサイズに合わせて調整) */
    background-color: #fff;
    position: relative;
    transition: all 0.2s ease-in-out; /* ホバー/選択時のアニメーション */
}

.calendar-item-content.is-selected {
    border-color: #00306d; /* 選択時のボーダー色をオレンジに */
    background-color: #edfbff; /* 選択時の背景色を薄いオレンジに */
}

.calendar-item-button:hover .calendar-item-content {
    background-color: #edfbff; /* ホバー時の背景色を薄いオレンジに */
    border-color: #00306d; /* ホバー時のボーダー色をオレンジに */
    cursor: pointer;
}

.calendar-item-content[data-status="tel"] { /* TELの日付のスタイル */
    cursor: default; /* クリック不可のためカーソルをデフォルトに */
}
.calendar-item-content[data-status="tel"]:hover { /* TELの日付のホバー効果をなし */
    background-color: #fff;
    border-color: #ccc;
}


.calendar-dayofweek {
    font-size: 11px; /* フォントを小さく */
    color: #666;
    margin-bottom: 2px;
    text-align: left; /* 左揃え */
    padding-left: 2px; /* 微調整 */
    line-height: 1.5;
}

.calendar-date-display {
    font-size: 1.0em; /* フォントを小さく */
    font-weight: bold;
    color: #333;
    line-height: 1.1em; /* 行高さを調整 */
    text-align: center; /* 中央揃え */
}

/* 土曜日のスタイル */
.calendar-item-content[data-dayofweek="土"] .calendar-dayofweek,
.calendar-item-content[data-dayofweek="土"] .calendar-date-display {
    color: #007bff; /* 青色 (土日は維持) */
}

/* 日曜日のスタイル */
.calendar-item-content[data-dayofweek="日"] .calendar-dayofweek,
.calendar-item-content[data-dayofweek="日"] .calendar-date-display {
    color: #dc3545; /* 赤色 (土日は維持) */
}

/* ステータス（TEL, ◯ など） */
.calendar-status-info {
    font-size: 1.0em; /* フォントを小さく */
    font-weight: bold;
    height: 18px; /* TELや〇のSVGアイコンの高さに合わせる */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 1px 0; /* 文字やSVGが中央に来るように調整 */
    line-height: 1em; /* テキストの行高さを調整 */
    text-align: center; /* 中央揃え */
}

.status-tel {
    color: #666;
}

.status-available {
    color: #00306d; /* ◯ の色をオレンジに */
}

/* SVGアイコンの共通スタイル */
.icon-tel-svg, .icon-circle-svg {
    display: block;
    width: 25px; /* SVGアイコンのサイズを小さく */
    height: 18px; /* SVGアイコンのサイズを小さく */
}
.icon-circle-svg circle {
    stroke: currentColor;
}

/* カレンダー下部の注釈 */
.calendar-notes {
    font-size: 0.75em; /* フォントを小さく */
    color: #666;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px; /* 隙間を小さく */
}

/* 完了セクションの内側ラッパーを中央寄せにして幅を揃える */
.section-recruit-form .inner {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 16px !important; /* 上下の余白を確保 */
    box-sizing: border-box !important;
    text-align: center !important;
}

/* タイトルと本文の見た目を sample の完了ページに合わせる */
/* 送信完了（大きめ） */
.section-recruit-form .title2,
.section-recruit-form h2.title2 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #00306d !important;
    margin-bottom: 12px !important;
}

/* 本文（送信完了より小さめだが読みやすく） */
.section-recruit-form p.a-center,
.section-recruit-form .inner p {
    font-size: 18px !important;
    color: #333 !important;
    margin: 0 auto !important;
    max-width: 760px !important;
    line-height: 1.7 !important;
}

/* 汎用センター指定（既存クラスとの組み合わせで使われるため明示） */
.a-center { text-align: center !important; }
.ls-1 { letter-spacing: .04em; }
.lh-20 { line-height: 1.6; }

@media (max-width: 768px) {
    .section-recruit-form .inner { padding: 28px 12px !important; }
    .section-recruit-form .title2 { font-size: 22px !important; }
    .section-recruit-form p.a-center, .section-recruit-form .inner p { font-size: 16px !important; }
}

/* -------------------------------------------------------------------------- */
.note-icon {
    display: inline-block;
    font-weight: bold;
}
.note-icon--circle {
    color: #00306d; /* ◯ の凡例アイコンをオレンジに */
}
.note-icon--square {
    color: #00306d; /* 仮予約も画像では青色に見えるため、オレンジに */
}
.note-icon--tel {
    color: #666;
}
.note-phone-number {
    white-space: nowrap;
}


/* ================================================================
   時間選択セクション
   ================================================================ */
.time-selection-grid {
    /* デフォルト（モバイル含む）で横スクロールを許可 */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
    padding-bottom: 10px; /* スクロールバーのためのスペース */
}

.time-tags-list {
    display: flex;
    /* ここを変更：デフォルト（モバイル含む）では改行しない */
    flex-wrap: nowrap; 
    gap: 8px; /* ボタン間の隙間を小さく */
    /* 全てのボタンが横に並ぶために必要な幅 (モバイルで横スクロールを発生させるため) */
    width: calc((60px + 8px) * 20); /* min-width:60px, gap:8px, 20個のボタンで計算 */
}

.time-tag-button {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    padding: 5px 12px; /* パディングを小さく */
    border-radius: 30px; 
    font-size: 0.9em; /* フォントを小さく */
    color: #333;
    transition: background-color 0.3s, border-color 0.3s;
    flex-shrink: 0;
    min-width: 85px; /* 最小幅 */
    box-sizing: border-box;
    text-align: center;
    /* width はメディアクエリで調整 */
}

.time-tag-button:hover:not(.is-disabled) {
    background-color: #e0e0e0;
    border-color: #999;
}

.time-tag-button.is-selected {
    background-color: #00306d; /* 選択時の背景色をオレンジに */
    color: #fff;
    border-color: #00306d; /* 選択時のボーダー色をオレンジに */
}

.time-tag-button.is-disabled {
    background-color: #f0f0f0;
    color: #ccc;
    border-color: #e0e0e0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ================================================================
   レスポンシブ対応
   ================================================================ */
@media (max-width: 768px) {
    /* ... 既存のモバイル用スタイルは省略 ... */
    
    .time-tag-button {
        /* モバイルでは横スクロールで表示されるため、幅は小さく固定 */
        min-width: 60px;
        padding: 8px 10px;
        font-size: 0.85em;
        width: auto; /* min-widthに任せる */
    }
}

/* PC表示の場合のスタイル */
@media (min-width: 769px) {
    /* 時間選択セクションのPC表示用スタイル */
    .time-selection-grid {
        overflow-x: hidden; /* PCでは横スクロールを非表示に */
        padding-bottom: 0; /* スクロールバーのためのパディングも削除 */
    }
    .time-tags-list {
        flex-wrap: wrap; /* PCでは改行して表示 */
        width: auto; /* 親要素の幅に合わせて改行 */
    }
    .time-tag-button {
        width: calc(100% / 6 - 8px); /* 例: 1行に8個表示 (max-width: 1140pxに合わせ調整) */
        /* min-width はデフォルトの 60px を継承 */
    }
}

/* ================================================================
   集合場所選択セクション
   ================================================================ */
.meeting-spot-options {
    display: flex;
    flex-direction: column;
    gap: 12px; /* ラジオボタン間の隙間を小さく */
}

.radio-card {
    display: block;
    cursor: pointer;
}

.radio-card-input {
    display: none;
}

.radio-card-body {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px; /* パディングを小さくして、見切れないように調整 */
    border-radius: 4px; /* 角丸を小さく */
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #fff;
}

.radio-card-input:checked + .radio-card-body {
    border-color: #00306d; /* チェック時のボーダー色をオレンジに */
    background-color: #edfbff; /* チェック時の背景色を薄いオレンジに */
}

.radio-card-input:hover + .radio-card-body {
    border-color: #999;
}

.radio-card-icon {
    flex-shrink: 0;
    width: 24px; /* アイコンサイズを調整 */
    height: 24px; /* アイコンサイズを調整 */
    margin-right: 10px; /* マージンを調整 */
    position: relative;
}

.radio-card-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.radio-card-icon .icon-checked {
    display: none;
}
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-checked {
    display: block;
}
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-default {
    display: none;
}

/* ラジオボタンのデフォルトアイコンの青色部分をオレンジに */
.radio-card-icon .icon-default path[fill="#5CA4D1"] {
    fill: #999; /* 非選択時はグレー */
}
.radio-card-icon .icon-default path[fill="#E9F3F7"] {
    fill: #eee; /* 非選択時は薄いグレー */
}
/* チェック済みアイコンの緑色部分をオレンジに */
.radio-card-icon .icon-checked path[fill="#6FBA2C"] {
    fill: #00306d; /* オレンジに変更 */
}


.radio-card-content {
    flex-grow: 1;
}

/* ===== テスト環境向けの上書き調整 =====
   reserve.php が横いっぱいに広がってしまう問題への対処。
   sample 側の表示に近づけるため、フォーム領域を中央寄せかつ最大幅を設定します。
*/
.section-register {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

.booking-form {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 横に広がりすぎる要素を抑える */
.time-tags-list {
    width: auto !important;
    max-width: 100%;
}
.calendar-list {
    width: auto !important;
    max-width: 100%;
}

/* PC幅でも横スクロールが出ないように親要素のオーバーフローを制御 */
.time-selection-grid {
    overflow-x: auto;
}

/* テーブル等のフォーム要素が横に広がるのを抑える */
.table1, .input-wrap {
    width: 100%;
    box-sizing: border-box;
}

.spot-name {
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 2px; /* マージンを小さく */
    font-size: 0.95em; /* フォントを小さく */
}
.spot-name span {
    font-weight: normal;
}

.spot-detail {
    font-size: 0.8em; /* フォントを小さく */
    color: #666;
}

/* ================================================================
   次へボタン
   ================================================================ */
.submit-button-group {
    text-align: center;
    margin-top: 30px; /* マージンを小さく */
}

.submit-button {
    background-color: #00306d; /* ボタンの背景色をオレンジに */
    color: #fff;
    padding: 12px 25px; /* パディングを小さく */
    border-radius: 4px; /* 角丸を小さく */
    font-size: 1em; /* フォントを小さく */
    font-weight: bold;
    width: 100%;
    max-width: 250px; /* 最大幅を小さく */
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #e06b00; /* ホバー時の背景色を少し濃いオレンジに */
}


/* ================================================================
   レスポンシブ対応
   ================================================================ */
@media (max-width: 768px) {
    form {
  width: 95%;
  margin: auto;
}
    .booking-form {
        padding: 15px; /* モバイルでのパディングをさらに小さく */
    }
    
    .booking-label-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .booking-heading {
        font-size: 1.1em;
    }

    .booking-required, .booking-duration {
        font-size: 0.75em;
    }
    
    .calendar-item {
        /* モバイルでは1画面に4日表示されるように調整 */
        /* width: calc(100% / 4 - 2px); 4等分し、マージン考慮 */
        min-width: 70px; /* 各アイテムの最小幅を確保 */
    }

    .calendar-list {
        /* モバイルでは14日分が横に並ぶ固定幅 */
        width: calc((70px + 2px) * 14); /* min-widthとmargin-rightに基づき再計算 */
        padding-bottom: 10px; /* スクロールバーのためのスペース */
    }

    .calendar-item-content {
        height: 85px; /* 高さを揃える */
    }

    .calendar-notes {
        font-size: 0.7em; /* フォントをさらに小さく */
        gap: 5px 10px;
    }

    .time-tag-button {
        /* モバイルでは横スクロールで表示されるため、幅は小さく固定 */
        min-width: 60px;
        padding: 8px 10px;
        font-size: 0.85em;
        width: auto; /* min-widthに任せる */
    }
    .submit-button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
}

/* PC表示の場合のスタイル */
@media (min-width: 769px) {
    /* PC表示でのカレンダーアイテム幅 */
    .calendar-item {
        width: calc(100% / 14 - 2px); /* 14日分を均等に表示、マージン考慮 */
        min-width: 70px; /* 最小幅を維持 */
    }
    .calendar-list {
        width: auto; /* 親要素の幅に合わせてアイテムが均等に広がるように */
    }
    .calendar-display {
        overflow-x: hidden; /* PCでは横スクロールバーを非表示 */
    }
}

/* -------------------------------
　　　　 フローコンテナ 
---------------------------------- */
.flow-container {
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素を均等に配置 */
    width: 100%; /* 幅を100%に設定 */
    background-color: #fff; /* フローコンテナの背景色 */
    border-radius: 0px;
    overflow: hidden; /* 角丸を適用するために必要 */
    margin-bottom: 30px;
}

/* 各フローのステップ */
.flow-step {
    flex: 1; /* 各ステップが均等な幅を占めるようにする */
    padding: 10px 10px; /* PCでのパディング */
    text-align: center;
    color: #333; /* デフォルトの文字色 */
    background-color: #fff; /* 非アクティブ時の背景色を白に */
    border: 1px solid #00306d; /* 1pxの#00306dの線を追加 */
    border-right: none; /* 矢印との境界線があるので右の線は削除 */
    position: relative; /* 擬似要素の位置指定の基準 */
    display: flex;
    flex-direction: row; /* PCでは数字とテキストを横並びにする */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    font-weight: bold;
    cursor: default; /* カーソルをデフォルトに戻す */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-radius: 0 !important; /* 個別の角丸も完全に除去 */
}

/* 最後のステップの右側の線は必要 */
.flow-step:last-child {
    border-right: 1px solid #00306d;
}

/* 矢印の生成 (最後のステップ以外) */
.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -14px; /* 三角形が少し重なるように調整 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: calc(10px + 15px) solid transparent; /* paddingの半分+元のborder幅 */
    border-bottom: calc(10px + 15px) solid transparent; /* paddingの半分+元のborder幅 */
    border-left: 15px solid #fff; /* 三角形の色 (非アクティブステップの背景色と合わせる) */
    z-index: 1; /* ステップより手前に表示 */
    transition: border-left-color 0.3s ease;
}

/* 各ステップの左側に経線を追加 */
.flow-step:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -1px; /* 前のステップの枠線と重なるように調整 */
    top: 0;
    bottom: 0;
    width: 1px; /* 線の幅 */
    background-color: #00306d; /* 非アクティブ時の線の色 */
    z-index: 2; /* 矢印よりも手前に表示 */
}

/* アクティブなステップ */
.flow-step.active {
    background-color: #00306d; /* アクティブなステップの背景色 */
    color: #fff; /* アクティブなステップの文字色 */
    border-color: #00306d; /* アクティブなステップの枠線色 */
}

/* アクティブなステップの矢印の色 */
.flow-step.active::after {
    border-left-color: #00306d; /* アクティブなステップの背景色と合わせる */
}

/* アクティブステップの後のステップの左側の線と丸角を調整 */
.flow-step.active + .flow-step {
    border-left: none; /* 前のステップの矢印と::beforeで隠れるため、自身の左枠線は不要 */
}

/* アクティブなステップより前のステップのスタイルを調整 */
.flow-container .flow-step:not(.active) {
    background-color: #fff;
    color: #333;
    border-color: #00306d;
}

.flow-container .flow-step:not(.active) .step-number {
    background-color: #00306d;
    color: #fff;
}

.flow-container .flow-step:not(.active)::after {
    border-left-color: #fff;
}

/* ここが新しい変更点：アクティブなステップの直前のステップの矢印を非表示にする */
.flow-step.active ~ .flow-step:first-of-type::after, /* 最初のステップがアクティブになった場合 */
.flow-step.active ~ .flow-step:not(:last-child)::after, /* アクティブなステップより前の非アクティブなステップの矢印 */
.flow-step:has(+ .active)::after { /* アクティブなステップの直前のステップの矢印 */
    /* transparent のままにして隠す */
    border-left-color: transparent;
}


/* アクティブなステップの次のステップ（右隣）の線をアクティブ色にする */
.flow-step.active + .flow-step::before {
    background-color: #00306d;
}

/* アクティブなステップより前のステップの::before の色も #00306d に維持 */
.flow-step:not(.active)::before {
    background-color: #00306d;
}


/* ステップ番号 */
.step-number {
    width: 30px;
    height: 30px;
    background-color: #00306d; /* 非アクティブ時の番号の背景色 */
    color: #fff;
    border-radius: 0; /* 角丸をなくす */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    margin-right: 10px; /* PCでは右マージンを設ける */
    margin-bottom: 0; /* PCでは下マージンは不要 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* アクティブなステップの番号 */
.flow-step.active .step-number {
    background-color: #fff; /* アクティブな番号の背景色 */
    color: #00306d; /* アクティブな番号の文字色 */
}

/* アクティブなステップより前のステップの数字色を調整 */
.flow-step.active ~ .flow-step .step-number {
    background-color: #00306d; /* 非アクティブ時の数字色 */
    color: #fff;
}


/* ステップテキスト */
.step-text {
    font-size: 0.9em;
    white-space: nowrap; /* PCではテキストの折り返しを防ぐ */
    line-height: 1.3; /* 行の高さ調整は維持 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .flow-container {
        overflow-x: hidden; /* 横スクロールを禁止 */
        white-space: normal; /* 折り返しを許可 */
        max-width: 100%; /* スマホでの最大幅 */
    }

    .flow-step {
        padding: 10px 5px; /* スマホでは左右のパディングを狭く */
        flex-shrink: 1; /* 縮小を許可 */
        width: auto; /* 幅を自動調整 */
        min-width: unset; /* 最小幅をリセット */
        flex-direction: column; /* スマホでは数字とテキストを縦並びにする */
        border-radius: 0 !important; /* 角丸はPCと同じく0 */
    }

    /* スマホ時のステップ番号 */
    .step-number {
        margin-right: 0; /* スマホでは右マージンは不要 */
        margin-bottom: 5px; /* スマホでは下マージンを設ける */
    }

    /* スマホ時のステップテキスト */
    .step-text {
        white-space: normal; /* スマホではテキストの折り返しを許可 */
    }

    /* スマートフォン表示でも矢印を表示 (PCと同じ定義を維持) */
    .flow-step::after,
    .flow-step::before {
        display: block;
    }

    /* スマホの場合、アクティブなステップの前の矢印を非表示に */
    .flow-step:has(+ .active)::after {
        border-left-color: transparent;
    }
}

.btn.orange { background-color: rgb(247, 124, 0); color: #fff; }
.btn.red { background-color: rgb(244, 67, 75); color: #fff; }
.btn.orange:hover { background-color: rgb(220, 100, 0); }
.btn.red:hover { background-color: rgb(200, 50, 60); }
a.btn.btn-red, a.btn.btn-orange, a.btn.red, a.btn.orange { color: #fff; }

@media screen and (max-width: 768px) {
    .booking-section--date .booking-label-group {
        display: flex;
        flex-direction: column; /* 縦に積み重ねる */
    }
    .booking-section--date .booking-label-title {
        display: flex;
        flex-wrap: wrap; /* 必要に応じて折り返しを許可 */
        align-items: center;
        margin-bottom: 10px; /* 必要に応じて調整 */
    }
    .booking-section--date .booking-label-title .req {  margin-left: 10px; }
    .booking-section--date .booking-label-title .booking-heading.red {
        flex-basis: 100%; /* 幅を100%にして改行させる */
        margin-top: 5px; /* 上部に少しスペースを追加 */
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

.calendar-notes { font-size: 14px; }
@media (max-width: 768px) {
  .calendar-notes { font-size: 1.1em;}
}

/* ===== siryo.php 互換のヘッダー / フォームスタイル ===== */
.page_head {
        padding: 20px 0;
}

/* ヘッダ固定（あるいは重なり）でページ上部が隠れる対策：全体に余白を追加 */
main.container {
    padding-top: 88px;
}
@media (max-width: 768px) {
    main.container { padding-top: 72px; }
}
.breadcrumb { list-style: none; padding: 0; margin: 0 0 8px 0; display: flex; gap: 8px; font-size: 0.9em; color: #666; }
.breadcrumb li a { color: #666; }
.page_title { font-size: 1.6em; font-weight: 700; color: #00306d; margin: 0 0 8px 0; }
.page_title span { display: inline-block; font-size: 0.8em; margin-left: 8px; color: #666; }
.wrap_wide_nomal { max-width: 1140px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.flowchart {
    /* 丸（上）とテキスト（下）を縦に並べ、中央寄せにする */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.circle_list {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.circle_list li div {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ccc;
}
.circle_list li .current { background: #00306d; }
.text_list {
    /* テキストは丸の下で横並び、中央寄せ */
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    font-weight: 600;
    color: #333;
    justify-content: center;
}

/* 丸とテキストを左右対応させるため、両リストを同じ幅で等間隔に配置 */
.circle_list, .text_list {
    width: 450px; /* 丸とテキスト間の適度な間隔を確保 */
    justify-content: space-between;
}

@media (max-width: 768px) {
    /* スマホでは中央寄せかつ折り返しにする */
    .circle_list, .text_list {
        width: 100%;
        justify-content: center;
        gap: 24px;
    }
    .flowchart { gap: 6px; }
}

.bkn_request_list_wrap { max-width: 1140px; margin: 16px auto; padding: 0 16px; box-sizing: border-box; }
.bkn_request_list h2 { font-size: 1.1em; margin-bottom: 8px; }
.bkn_request_list ul { list-style: none; padding: 0; margin: 0; }
.bkn_request_list li { padding: 8px 0; border-bottom: 1px solid #eee; }
.bkn_request_list .kind { display: inline-block; width: 90px; color: #666; font-weight: 600; }

.form_wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.form_table { width: 100%; border-collapse: collapse; }
.form_table th { width: 220px; text-align: left; vertical-align: top; padding: 12px 8px; font-weight: 600; }
.form_table td { padding: 12px 8px; }
.name_wrap span, .zip_wrap span, .address2_wrap span { display: inline-block; width: 110px; color: #666; }
.name_wrap input, .email_wrap input, .tel_wrap input, .zip_wrap input, .address1_wrap input, .address2_wrap input, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; box-sizing: border-box; }
.required { color: #D90000; margin-left: 6px; }
.form_btn_area { text-align: center; margin-top: 24px; }
.btn.send { background: #00306d; color: #fff; padding: 12px 20px; border-radius: 4px; display: inline-block; }

@media (max-width: 768px) {
        .form_table th { display: block; width: 100%; padding: 8px 0; }
        .form_table td { display: block; width: 100%; padding: 8px 0 16px 0; }
}

        /* main の中央寄せと最大幅（sample と同等） */
        main.container {
            max-width: 1140px;
            margin: 0 auto;
            padding-top: 88px; /* 既存値を維持 */
            box-sizing: border-box;
        }

        /* 完了セクションの内側ラッパーを中央寄せにして幅を揃える */
        .section-recruit-form .inner {
            max-width: 920px;
            margin: 0 auto;
            padding: 40px 16px; /* 上下の余白を確保 */
            box-sizing: border-box;
        }

        /* タイトルと本文の見た目を sample の完了ページに合わせる */
        .section-recruit-form .title2 {
            font-size: 28px;
            line-height: 1.4;
            font-weight: 700;
            color: #00306d;
            margin-bottom: 18px;
        }
        .section-recruit-form p {
            font-size: 16px;
            color: #333;
            margin: 0 auto;
            max-width: 720px;
        }

        /* 汎用センター指定（既存クラスとの組み合わせで使われるため明示） */
        .a-center { text-align: center; }
        .ls-1 { letter-spacing: .1em; }
        .lh-20 { line-height: 1.6; }

        @media (max-width: 768px) {
            .section-recruit-form .inner {
                padding: 28px 12px;
            }
            .section-recruit-form .title2 { font-size: 20px; }
            .section-recruit-form p { font-size: 15px; }
        }