/* お問い合わせ（contact.php）専用 ── 入力欄まわりの装飾。
   色は site.css の luxury 系と同じ値を直接書いている。Tailwind の
   ユーティリティで足りるものはHTML側に置き、フォーム部品だけここでまとめる。 */

/* ── 案内文 ───────────────────────────────── */
.contact-note {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
    border: 1px solid #463829;
    border-radius: 16px;
    background: #1f1811;
    font-size: 0.875rem;
    line-height: 1.9;
    color: #d9cdb8;
}

.contact-lead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 1rem;
    border: 1px solid #463829;
    border-radius: 16px;
    background: #1f1811;
}

.contact-lead:last-of-type { margin-bottom: 2.5rem; }

.contact-lead--gold { border-color: rgba(199, 154, 62, 0.4); }

/* 見学・体験のご希望日時。ほかの項目と地続きにすると「全員が書く欄」に
   見えてしまうので、ひとまわり囲って別の用件だと分かるようにする。
   種別で出し分けはしない（JSが動かないと辿り着けなくなるため）。 */
.contact-visit {
    padding: 20px;
    border: 1px solid rgba(199, 154, 62, 0.3);
    border-radius: 16px;
    background: rgba(199, 154, 62, 0.05);
}

.contact-visit__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #d9cdb8;
}

.contact-visit__help { margin-bottom: 16px; }

.contact-visit__row + .contact-visit__row { margin-top: 14px; }

@media (min-width: 640px) {
    .contact-lead { flex-direction: row; align-items: center; gap: 24px; }
}

/* LINEの緑はブランド指定色なのでトークン化せず直接指定する */
.contact-line-btn { background: #06C755; }

/* ── 入力欄 ───────────────────────────────── */
.contact-group {
    border: 1px solid #2f2619;
    border-radius: 18px;
    padding: 1.5rem;
}

.contact-group > legend {
    padding: 0 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #e6cd92;
}

.contact-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: #f4efe6;
}

.contact-field {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #463829;
    border-radius: 12px;
    background: #14100c;
    color: #f4efe6;
    /* iOS Safari は 16px 未満の入力欄にフォーカスすると、読めるようにページごと拡大する。
       拡大は自動では戻らないので、以降ずっと横スクロールしたままになる。
       ここだけは見た目より実害を優先して 16px を切らない。 */
    font-size: 16px;
    line-height: 1.7;
}

.contact-field::placeholder { color: #7c6c54; }

.contact-field:focus {
    outline: 2px solid #c79a3e;
    outline-offset: 1px;
    border-color: #c79a3e;
}

/* 三角の下向き矢印を背景で描く。画像を足さずに済ませるため。 */
.contact-field--select {
    appearance: none;
    padding-right: 2.5rem;
    background-image:
        linear-gradient(45deg, transparent 50%, #c79a3e 50%),
        linear-gradient(135deg, #c79a3e 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.contact-help {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #7c6c54;
    line-height: 1.8;
}

/* ── 必須・任意のラベル ─────────────────────── */
/* inline のままだとバッジの途中で改行され、丸い枠が割れて表示される。
   inline-block + nowrap で、収まらないときは丸ごと次の行へ送る。 */
.contact-req,
.contact-opt {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.contact-req {
    background: rgba(199, 154, 62, 0.16);
    border: 1px solid rgba(199, 154, 62, 0.4);
    color: #e6cd92;
}

.contact-opt {
    background: rgba(167, 150, 124, 0.12);
    border: 1px solid #463829;
    color: #a7967c;
}

/* ── 同意チェックと送信ボタン ───────────────── */
.contact-agree {
    padding: 1.25rem;
    border: 1px solid #463829;
    border-radius: 16px;
    background: #1f1811;
}

.contact-agree label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.contact-agree input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    accent-color: #c79a3e;
}

.contact-agree a {
    color: #e6cd92;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-submit {
    width: 100%;
    padding: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #e6cd92, #c79a3e);
    color: #14100c;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.2s var(--ease-out);
}

.contact-submit:hover { transform: scale(1.02); }

/* ── エラー表示・完了画面 ───────────────────── */
.contact-errors {
    padding: 1.25rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.contact-errors p { color: #fecaca; }

.contact-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(199, 154, 62, 0.4);
    border-radius: 999px;
    background: rgba(199, 154, 62, 0.15);
    color: #e6cd92;
}

/* 自動投稿対策の隠し項目。人には見せず、読み上げにも出さない。 */
.contact-hp {
    position: absolute;
    left: -9999px;
}