/* ================================================================
   contact.css  –  お問い合わせフォーム専用スタイル
   配置先: ./assets/css/contact.css
   アクセント: #1a73e8（ブルー）
   ================================================================ */

:root {
    --c-accent:       #1a73e8;
    --c-accent-dark:  #1558b0;
    --c-accent-light: #fff4eb;
    --c-accent-mid:   #fde3c8;
    --c-text:         #1a1a1a;
    --c-text-sub:     #555;
    --c-text-muted:   #999;
    --c-border:       #ddd;
    --c-border-focus: #e8780a;
    --c-error:        #d93025;
    --c-error-bg:     #fff4f3;
    --c-card:         #fff;
    --c-radius:       8px;
    --c-shadow:       0 2px 12px rgba(0,0,0,.07);
}

/* ── ラッパー ───────────────────────────────── */
.contact-wrapper {
    max-width: 680px;
    padding: 36px 16px 60px;
}

/* ── ページタイトルアンダーライン ────────────── */
.page-header h1::after {
    background-color: var(--c-accent);
}

/* ── リード文 ───────────────────────────────── */
.contact-lead {
    margin-bottom: 28px;
    font-size: 0.95rem;
    color: var(--c-text-sub);
    line-height: 1.8;
}

/* ── エラーボックス ─────────────────────────── */
.contact-error-box {
    background: var(--c-error-bg);
    border: 1px solid #f5c2be;
    border-left: 4px solid var(--c-error);
    border-radius: var(--c-radius);
    padding: 14px 18px;
    margin-bottom: 24px;
}

.contact-error-box p {
    font-size: 0.88rem;
    color: var(--c-error);
    margin: 0;
    line-height: 1.6;
}

/* ── フォーム全体 ───────────────────────────── */
.contact-form {
    background: var(--c-card);
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: var(--c-shadow);
    border-top: 4px solid var(--c-accent);
}

/* ── ハニーポット（非表示） ─────────────────── */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* ── フィールド共通 ─────────────────────────── */
.contact-field {
    margin-bottom: 24px;
}

.contact-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 8px;
}

.contact-required {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--c-error);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.04em;
}

.contact-optional {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-text-muted);
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ── 入力欄 ─────────────────────────────────── */
.contact-input,
.contact-select,
.contact-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 0.95rem;
    color: var(--c-text);
    background: #fafafa;
    border: 2px solid var(--c-border);
    border-radius: var(--c-radius);
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-family: inherit;
    appearance: none;
}

.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
    border-color: var(--c-border-focus);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(232,120,10,.12);
}

.contact-input--half {
    max-width: 240px;
}

/* セレクト矢印 */
.contact-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.contact-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.7;
}

/* ── エラー状態 ─────────────────────────────── */
.contact-field.has-error .contact-input,
.contact-field.has-error .contact-select,
.contact-field.has-error .contact-textarea {
    border-color: var(--c-error);
    background: var(--c-error-bg);
}

.contact-field-error {
    font-size: 0.82rem;
    color: var(--c-error);
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-field-error::before {
    content: '⚠';
    font-size: 0.8rem;
}

/* ── 送信ボタン ─────────────────────────────── */
.contact-submit-area {
    margin-top: 32px;
    text-align: center;
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 48px;
    background: var(--c-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--c-radius);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(232,120,10,.35);
    letter-spacing: 0.04em;
}

.contact-submit-btn::after {
    content: '→';
    font-size: 1.1rem;
}

.contact-submit-btn:hover {
    background: var(--c-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(232,120,10,.4);
}

.contact-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(232,120,10,.3);
}

/* ── サンキュー画面 ─────────────────────────── */
.contact-thanks {
    text-align: center;
    padding: 60px 20px;
    background: var(--c-card);
    border-radius: 12px;
    box-shadow: var(--c-shadow);
    border-top: 4px solid var(--c-accent);
    animation: thanks-in 0.4s ease;
}

@keyframes thanks-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.contact-thanks__icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 20px;
}

.contact-thanks__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-text);
    margin: 0 0 16px;
}

.contact-thanks__msg {
    font-size: 0.95rem;
    color: var(--c-text-sub);
    line-height: 1.8;
    margin: 0 0 32px;
}

.contact-thanks__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 32px;
    background: var(--c-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--c-radius);
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
    box-shadow: 0 4px 12px rgba(232,120,10,.3);
}

.contact-thanks__btn:hover {
    background: var(--c-accent-dark);
    transform: translateY(-2px);
}

/* ── レスポンシブ ───────────────────────────── */
@media (max-width: 768px) {
    .contact-wrapper {
        padding: 24px 12px 48px;
    }

    .contact-form {
        padding: 24px 18px;
    }

    .contact-input--half {
        max-width: 100%;
    }

    .contact-submit-btn {
        width: 100%;
        padding: 14px 20px;
    }
}