/* ============================================================
   contact.css — contact.html 専用スタイル
   ============================================================ */

/* ===== コンテナ幅を1200pxに上書き ===== */
:root { --container-w: 1200px; }
.container { padding: 0 5%; }
.header-inner { max-width: 1200px; }

/* ===== フォームセクション ===== */
.contact-section { padding: 5rem 0 8rem; }
.contact-inner { max-width: 800px; margin: 0 auto; }

/* ===== 前置きボックス ===== */
.intro-box {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 2rem 2.5rem; margin-bottom: 2.5rem;
    font-size: 0.95rem; color: var(--text-gray); line-height: 1.9;
    box-shadow: var(--shadow-subtle);
}
.intro-box a { font-weight: 700; color: var(--primary); }
.intro-box .note { font-size: 0.85rem; color: var(--text-gray); margin-top: 0.6rem; display: block; }

/* ===== ステータスボックス ===== */
.status-box {
    padding: 1rem 1.5rem; border-radius: var(--radius-md); font-size: 0.9rem;
    margin-bottom: 1.5rem; display: none;
}
.status-box.error   { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.status-box.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.status-box.visible { display: block; }

/* ===== フォームラッパー ===== */
.form-wrapper {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 3rem; box-shadow: var(--shadow-subtle);
}
@media (max-width: 640px) { .form-wrapper { padding: 1.8rem 1.5rem; } }

.form-row { margin-bottom: 2rem; }
.form-row:last-of-type { margin-bottom: 0; }

.form-label {
    font-size: 0.92rem; font-weight: 700; margin-bottom: 0.6rem;
    display: flex; align-items: center; gap: 0.5rem; color: var(--text-dark);
}
.badge-required {
    font-size: 0.65rem; font-weight: 900; background: var(--primary); color: white;
    padding: 0.15rem 0.55rem; border-radius: 4px; letter-spacing: 0.04em;
}
.badge-optional {
    font-size: 0.65rem; font-weight: 900; background: var(--text-gray); color: white;
    padding: 0.15rem 0.55rem; border-radius: 4px; letter-spacing: 0.04em;
}
.form-note { font-size: 0.82rem; color: var(--text-gray); margin-bottom: 0.5rem; }

/* ===== 入力フィールド ===== */
.form-input {
    width: 100%; padding: 0.85rem 1.1rem; border: 1.5px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.95rem; font-family: 'Noto Sans JP', sans-serif;
    background: var(--bg-card); color: var(--text-dark);
    transition: var(--transition-fast); outline: none;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.form-input::placeholder { color: #C0CAD4; }

.form-textarea {
    width: 100%; padding: 0.85rem 1.1rem; border: 1.5px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.95rem; font-family: 'Noto Sans JP', sans-serif;
    background: var(--bg-card); color: var(--text-dark);
    transition: var(--transition-fast); outline: none;
    min-height: 160px; resize: vertical; line-height: 1.7;
}
.form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.form-textarea::placeholder { color: #C0CAD4; }

/* ===== ラジオボタン ===== */
.radio-group { display: flex; flex-direction: column; gap: 0.75rem; }
.radio-label {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.95rem; cursor: pointer; color: var(--text-dark);
}
.radio-label input[type="radio"] { display: none; }
.radio-custom {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
    background: var(--bg-card); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition-fast);
}
.radio-custom::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); opacity: 0; transition: var(--transition-fast);
}
.radio-label input:checked ~ .radio-custom { border-color: var(--primary); }
.radio-label input:checked ~ .radio-custom::after { opacity: 1; }

/* ===== ファイルアップロード ===== */
.file-area {
    border: 2px dashed var(--border); border-radius: var(--radius-md);
    padding: 2rem; text-align: center; cursor: pointer;
    transition: var(--transition-fast); background: var(--bg-alt); position: relative;
}
.file-area:hover { border-color: var(--primary); background: var(--primary-light); }
.file-area input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-area-icon { color: var(--text-gray); margin-bottom: 0.5rem; }
.file-area-text { font-size: 0.88rem; color: var(--text-gray); line-height: 1.6; }
.file-area-text strong { color: var(--primary); font-weight: 700; }
#fileNameDisplay { font-size: 0.82rem; color: var(--primary); margin-top: 0.5rem; font-weight: 600; }

/* ===== チェックボックス ===== */
.check-group { display: flex; align-items: flex-start; gap: 0.75rem; }
.check-label {
    display: flex; align-items: flex-start; gap: 0.75rem;
    font-size: 0.92rem; cursor: pointer; color: var(--text-dark); line-height: 1.6;
}
.check-label input[type="checkbox"] { display: none; }
.check-custom {
    width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border);
    background: var(--bg-card); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition-fast); margin-top: 2px;
}
.check-custom::after {
    content: ''; width: 10px; height: 6px;
    border-left: 2.5px solid white; border-bottom: 2.5px solid white;
    transform: rotate(-45deg) translateY(-1px); opacity: 0; transition: var(--transition-fast);
}
.check-label input:checked ~ .check-custom { border-color: var(--primary); background: var(--primary); }
.check-label input:checked ~ .check-custom::after { opacity: 1; }

.divider { height: 1px; background: var(--border); margin: 2rem 0; }

/* ===== 送信ボタン ===== */
.submit-area { text-align: center; margin-top: 2.5rem; }
.btn-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 1.2rem 5rem; background: var(--primary); color: white;
    font-weight: 900; font-size: 1.05rem; letter-spacing: 0.08em;
    border-radius: var(--radius-pill); border: none; cursor: pointer;
    box-shadow: 0 8px 25px var(--primary-glow);
    transition: var(--transition-gentle); font-family: 'Noto Sans JP', sans-serif;
    width: 100%; max-width: 320px;
}
.btn-submit:hover { transform: translateY(-4px); box-shadow: 0 12px 35px var(--primary-glow); background: #2278A8; }
.submit-note { font-size: 0.82rem; color: var(--text-gray); margin-top: 0.8rem; }