/* ==========================================================
   css/oc-form.css
   オープンキャンパス申込フォーム専用スタイル
   ========================================================== */

/* ----------------------------------------
   共通レイアウト
   ---------------------------------------- */
.p-oc-form-section {
    padding: 48px 0 80px;
}
.p-oc-form-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ----------------------------------------
   ステップインジケーター（入力→確認→完了）
   ---------------------------------------- */
.p-oc-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 40px;
    position: relative;
}
.p-oc-steps::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}
.p-oc-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 120px;
    z-index: 1;
}
.p-oc-steps__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #9ca3af;
    border: 3px solid #fff;
}
.p-oc-steps__item.is-active .p-oc-steps__circle { background: #1a2a4a; color: #fff; }
.p-oc-steps__item.is-done  .p-oc-steps__circle { background: #16a34a; color: #fff; }
.p-oc-steps__label {
    font-size: .72rem;
    color: #9ca3af;
    font-weight: 600;
    text-align: center;
}
.p-oc-steps__item.is-active .p-oc-steps__label { color: #1a2a4a; }
.p-oc-steps__item.is-done  .p-oc-steps__label { color: #16a34a; }

/* ----------------------------------------
   セクション見出し（左ボーダーアクセント）
   ---------------------------------------- */
.p-oc-form-step {
    font-size: .82rem;
    font-weight: 700;
    color: #1a2a4a;
    padding-left: 14px;
    border-left: 3px solid #c8a84b;
    margin-bottom: 20px;
    letter-spacing: .05em;
}

/* ----------------------------------------
   エラーアラート
   ---------------------------------------- */
.p-oc-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 18px;
    color: #d0342c;
    font-size: .88rem;
    margin-bottom: 24px;
}

/* ----------------------------------------
   フォームカード
   ---------------------------------------- */
.p-oc-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 24px rgba(26, 42, 74, .10);
    margin-bottom: 28px;
}
@media (max-width: 600px) {
    .p-oc-form-card { padding: 24px 18px; }
}

/* グリッドレイアウト */
.p-oc-form-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}
.p-oc-form-row.is-two {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
    .p-oc-form-row.is-two { grid-template-columns: 1fr; }
}
.p-oc-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ラベル */
.p-oc-form-label {
    font-size: .82rem;
    font-weight: 700;
    color: #1a2a4a;
    letter-spacing: .06em;
}
.p-oc-form-label .is-req {
    display: inline-block;
    margin-left: 6px;
    background: #d0342c;
    color: #fff;
    font-size: .65rem;
    padding: 1px 6px;
    border-radius: 3px;
}
.p-oc-form-label .is-opt {
    display: inline-block;
    margin-left: 6px;
    background: #6b7280;
    color: #fff;
    font-size: .65rem;
    padding: 1px 6px;
    border-radius: 3px;
}

/* input / select 共通 */
.p-oc-input,
.p-oc-select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-family: inherit;
    font-size: .95rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}
.p-oc-input:focus,
.p-oc-select:focus {
    outline: none;
    border-color: #1a2a4a;
    box-shadow: 0 0 0 3px rgba(26, 42, 74, .08);
}
.p-oc-field-error { color: #d0342c; font-size: .8rem; margin-top: 3px; }
.p-oc-input.is-error,
.p-oc-select.is-error { border-color: #d0342c; }

/* ----------------------------------------
   生年月日 年・月・日プルダウン
   ---------------------------------------- */
.p-oc-birth-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.p-oc-birth-row .p-oc-select {
    flex: 1;
    min-width: 64px;
    padding: 11px 8px;
}
.p-oc-birth-row span {
    font-size: .88rem;
    color: #374151;
    flex-shrink: 0;
}

/* ----------------------------------------
   バス送迎 ラジオボタン
   ---------------------------------------- */
.p-oc-bus-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.p-oc-bus-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    cursor: pointer;
    padding: 10px 20px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, background .2s;
    user-select: none;
}
.p-oc-bus-label:hover { border-color: #c8a84b; }
.p-oc-bus-label input[type="radio"] {
    accent-color: #1a2a4a;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.p-oc-bus-label.is-checked {
    border-color: #1a2a4a;
    background: #f0f4ff;
    font-weight: 600;
}

/* ----------------------------------------
   注意書き
   ---------------------------------------- */
.p-oc-notice {
    background: #fffbeb;
    border: 1px solid #e8d090;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: .83rem;
    line-height: 1.8;
    color: #6b5a1e;
    margin-bottom: 28px;
}
.p-oc-notice strong { color: #8b6914; }

/* ----------------------------------------
   ボタン
   ---------------------------------------- */
.p-oc-submit {
    width: 100%;
    padding: 16px;
    background: #1a2a4a;
    color: #fff;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .25s, transform .15s;
    box-shadow: 0 4px 16px rgba(26, 42, 74, .25);
    display: block;
}
.p-oc-submit:hover {
    background: #243660;
    transform: translateY(-1px);
}
.p-oc-btn-back {
    width: 100%;
    padding: 14px;
    background: #fff;
    color: #1a2a4a;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    border: 2px solid #1a2a4a;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s;
    margin-bottom: 12px;
    display: block;
    text-align: center;
}
.p-oc-btn-back:hover { background: #f0f4ff; }

/* ----------------------------------------
   確認ページ
   ---------------------------------------- */
.p-oc-confirm-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 24px rgba(26, 42, 74, .10);
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .p-oc-confirm-card { padding: 24px 18px; }
}
.p-oc-confirm-lead {
    font-size: .9rem;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.7;
}
.p-oc-confirm-heading {
    font-size: .88rem;
    font-weight: 700;
    color: #1a2a4a;
    padding-left: 10px;
    border-left: 3px solid #c8a84b;
    margin: 20px 0 10px;
}
.p-oc-confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
}
.p-oc-confirm-table th,
.p-oc-confirm-table td {
    padding: 10px 14px;
    font-size: .9rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.p-oc-confirm-table th {
    width: 140px;
    color: #6b7280;
    font-weight: 500;
    background: #fafafa;
    white-space: nowrap;
}
.p-oc-confirm-table td { font-weight: 600; }
@media (max-width: 520px) {
    .p-oc-confirm-table th { width: 100px; font-size: .8rem; }
    .p-oc-confirm-table td { font-size: .85rem; }
}
.p-oc-confirm-note {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 24px;
    padding: 0 4px;
}

/* ----------------------------------------
   完了ページ
   ---------------------------------------- */
.p-oc-done {
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(26, 42, 74, .10);
}
@media (max-width: 600px) {
    .p-oc-done { padding: 28px 18px; }
}
.p-oc-done__icon {
    width: 72px;
    height: 72px;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
}
.p-oc-done__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.p-oc-done__table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    text-align: left;
}
.p-oc-done__table th,
.p-oc-done__table td {
    padding: 10px 14px;
    font-size: .9rem;
    border-bottom: 1px solid #e5e7eb;
}
.p-oc-done__table th {
    width: 120px;
    color: #6b7280;
    font-weight: 500;
}
.p-oc-done__table td { font-weight: 600; }
.p-oc-done__back {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 32px;
    border: 2px solid #1a2a4a;
    border-radius: 8px;
    color: #1a2a4a;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
}
.p-oc-done__back:hover {
    background: #1a2a4a;
    color: #fff;
}