/* ---- ベース ---- */
body, h1, h2, h3, p, ul, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
body { 
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; 
    color: #333; 
    line-height: 1.6; 
    background-color: var(--color-blue-light);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

.top-bar { background-color: #1a2956; color: #fff; font-size: 12px; }
.top-bar-inner { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; flex-wrap: wrap; }
.top-bar ul { display: flex; gap: 15px; flex-wrap: wrap; }
.top-bar ul a:hover { text-decoration: underline; }

.header-inner { max-width: 1000px; margin: 0 auto; padding: 20px 10px; text-align: center; }

/* ---- ページタイトル ---- */
.page-title { text-align: center; background-color: #1a2956; color: #fff; padding: 30px 10px; margin-bottom: 30px; margin-top: var(--header-h-sp); }
@media (min-width: 768px) { .page-title { margin-top: var(--header-h-pc); } }

.page-title h1 { font-size: 24px; font-weight: normal; }


/* ---- Section ---- */
.s-inquiry { padding: 0 15px 64px; }
.section-inner { max-width: 720px; margin: 0 auto; }

.inq-intro { text-align: center; font-size: 14px; margin-bottom: 24px; }

/* ---- ステップ ---- */
.inq-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 40px; }
.inq-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.inq-step__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #e0e0e0; color: #999;
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.inq-step__label { font-size: 12px; color: #999; letter-spacing: .06em; }
.inq-step.is-active .inq-step__num { background: #1a2956; color: #fff; }
.inq-step.is-active .inq-step__label { color: #1a2956; font-weight: 600; }
.inq-step.is-done .inq-step__num { background: #b7282e; color: #fff; }
.inq-step.is-done .inq-step__label { color: #b7282e; }
.inq-step-arrow { width: 48px; height: 1px; background: #ddd; margin: 0 4px 20px; }

/* ---- Honeypot ---- */
.inq-honeypot { position: absolute; left: -9999px; visibility: hidden; }

/* ---- エラー ---- */
.inq-error { background: #fff0f4; border: 1px solid #f9b3c8; color: #c00040; font-size: 14px; padding: 14px 20px; border-radius: 4px; margin-bottom: 32px; }

/* ---- フォーム ---- */
.inq-form { display: flex; flex-direction: column; gap: 28px; background: #fff; padding: 30px; border: 1px solid #e0e0e0; border-radius: 4px; }

.inq-field { display: flex; flex-direction: column; gap: 8px; }

.inq-label { font-size: 14px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; }
.inq-required { font-size: 11px; font-weight: 600; color: #fff; background: #b7282e; padding: 2px 6px; border-radius: 2px; letter-spacing: .04em; }

.inq-input,
.inq-textarea {
    font-size: 15px;
    color: #333;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    transition: border-color .2s;
    font-family: inherit;
}
.inq-input:focus,
.inq-textarea:focus { outline: none; border-color: #1a2956; }
.inq-field-note { font-size: 12px; color: #aaa; margin-top: 4px; text-align: right; }
.inq-count-over { color: #b7282e; font-weight: 700; }
.inq-input::placeholder,
.inq-textarea::placeholder { color: #bbb; }
.inq-textarea { resize: vertical; line-height: 1.7; }

/* ---- ラジオボタン ---- */
.inq-radio-group { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.inq-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.inq-radio-label input[type="radio"] { width: 16px; height: 16px; accent-color: #1a2956; cursor: pointer; }

/* ---- reCAPTCHA ---- */
.inq-field-recaptcha .g-recaptcha { margin: 0 auto; }

/* ---- 送信ボタン ---- */
.inq-submit { margin-top: 8px; display: flex; justify-content: center; }

/* ---- ボタン ---- */
.inq-btn {
    display: inline-block;
    padding: 14px 48px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    transition: opacity .2s;
    text-decoration: none;
    text-align: center;
}
.inq-btn:hover { opacity: .8; }
.inq-btn-primary { background: #b7282e; color: #fff; }
.inq-btn-outline { background: #fff; color: #333; border: 1px solid #ccc; }

/* ---- 確認画面 ---- */
.inq-confirm-note { font-size: 14px; color: #555; margin-bottom: 32px; text-align: center; }

.inq-confirm-list { margin: 0 0 40px; border-top: 1px solid #e8e8e8; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 20px; }
.inq-confirm-row { display: grid; grid-template-columns: 160px 1fr; gap: 0 24px; padding: 16px 0; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
.inq-confirm-row:last-child { border-bottom: none; }
.inq-confirm-row dt { font-weight: 600; color: #555; }
.inq-confirm-row dd { color: #333; margin: 0; }
.inq-confirm-message { line-height: 1.8; }

.inq-confirm-actions { display: flex; gap: 16px; justify-content: center; }

/* ---- 完了画面 ---- */
.inq-thanks { text-align: center; padding: 40px 0; }
.inq-thanks-icon { font-size: 48px; font-weight: 700; color: #b7282e; margin-bottom: 16px; line-height: 1; }
.inq-thanks h2 { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.inq-thanks p { font-size: 15px; color: #555; line-height: 1.9; margin-bottom: 40px; }

.footer-copy { text-align: center; font-size: 12px; padding: 20px 10px; color: #666; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .s-inquiry { padding: 0 15px 48px; }
    .inq-step-arrow { width: 28px; }
    .inq-form { padding: 20px; }
    .inq-confirm-row { grid-template-columns: 1fr; gap: 4px; }
    .inq-confirm-row dt { color: #888; font-size: 12px; }
    .inq-confirm-actions { flex-direction: column-reverse; align-items: stretch; }
    .inq-btn { text-align: center; }
}