/* =========================================================
   M'S STABLE — CONTACT PAGE
   ※ 共通パーツ（Header / Footer / 見出し[.content-section /
     .content-en / .content-ja] 等）は style.css を参照。
     このファイルにはContactページ専用のパーツのみを記述しています。
========================================================= */


/* =========================================================
   CONTACT TITLE
========================================================= */

.contact-title-section {
    width: 100%;

    text-align: center;
}

.contact-title-section .content-section {
    padding: 60px 0 20px;

    text-align: center;
}

.contact-title-section .content-en,
.contact-title-section .content-ja {
    margin-left: 0;

    text-align: center;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-section {
    width: 100%;

    padding: 20px 0 100px;
}

.contact-form {
    width: min(100% - 80px, 600px);

    margin: 0 auto;
}

.contact-form__group {
    margin: 0 0 26px;
}

.contact-form__label {
    display: block;

    margin: 0 0 8px;

    color: #303531;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .03em;
}

.contact-form__required {
    margin-left: 6px;

    color: #b3452f;

    font-size: 12px;
    font-weight: 700;
}

.contact-form__input,
.contact-form__textarea {
    display: block;

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #ddd;
    border-radius: 3px;

    background: #fff;

    color: #303530;

    font-size: 15px;
    font-family: inherit;

    box-sizing: border-box;

    transition: border-color .3s ease;
}

.contact-form__textarea {
    min-height: 160px;

    resize: vertical;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;

    border-color: #66784A;
}

.contact-form__submit {
    display: block;

    width: 100%;

    margin: 34px 0 0;
    padding: 16px;

    border: none;
    border-radius: 3px;

    background: #4E5D35;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: .1em;

    cursor: pointer;

    transition: background .3s ease;
}

.contact-form__submit:hover {
    background: #3d4a2a;
}


/* =========================================================
   CONTACT FORM 7 - 標準メッセージの見た目調整
   （入力欄まわりは contact-form__* のクラスをそのまま使っている
     ため、ここではCF7が自動で出す注意書き・完了メッセージだけを
     サイトのデザインに合わせている）
========================================================= */

.wpcf7-not-valid-tip {
    display: block;

    margin-top: 6px;

    color: #b3452f;

    font-size: 12px;
}

.wpcf7-response-output {
    margin: 20px 0 0;
    padding: 14px 16px;

    border-radius: 3px;

    font-size: 14px;
    line-height: 1.7;
}

.wpcf7-form.sent .wpcf7-response-output {
    border: 1px solid #66784A;

    background: #f3f7ee;

    color: #303530;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    border: 1px solid #b3452f;

    background: #fbeceb;

    color: #b3452f;
}


/* =========================================================
   CONTACT FORM 7 - プライバシーポリシー同意チェック / Turnstile
   （フォームタブに追加された .formRow / .privacy / .privacyNote /
     .turnstile-wrap は、CF7管理画面側の「フォーム」タブに直接
     書かれているクラス名。ここではそのクラスの見た目だけを
     このテーマのデザインに合わせて調整している）
========================================================= */

.formRow {
    margin: 24px 0 0;
}

/* CF7管理画面の「フォーム」タブでHTMLを改行して見やすく書くと、
   WordPress側の自動整形により、その改行の数だけ意図しない<br>が
   間に挿入されてしまう（今回、同意チェックの前後や「プライバシー
   ポリシーを読む」リンクの前後に複数の空行ができ、余白が大きく
   空いて見える原因になっていた）。.formRow内には本来<br>で改行
   したい箇所がないため、まとめて非表示にして詰めている。 */

.formRow br {
    display: none;
}

/* チェックボックスと「プライバシーポリシーに同意のうえ…」の
   テキストの間隔が空きすぎないよう、チェックボックス側に
   小さめのmarginだけを付けて詰めている */

.privacy .wpcf7-list-item {
    margin: 0;
}

.privacy .wpcf7-list-item label {
    display: flex;

    align-items: center;

    cursor: pointer;
}

.privacy input[type="checkbox"] {
    flex-shrink: 0;

    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}

.privacy .wpcf7-list-item-label {
    color: #303530;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: .02em;
}

.privacyNote {
    margin: 6px 0 0;

    font-size: 12px;

    line-height: 1.4;
}

.privacyNote a {
    color: #923F13;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.privacyNote a:hover {
    color: #7c3610;
}

.turnstile-wrap {
    display: flex;

    width: 100%;

    margin-top: 20px;

    justify-content: center;
    align-items: center;
}

.wpcf7-spinner {
    display: none !important;
}


/* =========================================================
   RESERVATION NOTICE
========================================================= */

.contact-notice-section {
    width: 100%;

    padding: 0 0 80px;
}

.contact-notice {
    width: min(100% - 80px, 600px);

    margin: 0 auto;

    padding: 34px 30px;

    background: #f3f1ea;

    text-align: center;
}

.contact-notice__text {
    margin: 0;

    color: #303530;

    font-size: 14px;
    line-height: 1.9;
}

.contact-notice__link {
    display: inline-block;

    color: #923F13;

    /* 常に .contact-notice__text と同じ大きさになるよう、
       固定値ではなく継承にしておく */
    font-size: inherit;
    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-notice__link:hover {
    color: #7c3610;
}


/* =========================================================
   FAQ NOTICE
========================================================= */

.contact-faq-section {
    width: 100%;

    padding: 0 0 100px;
}

.contact-faq__text {
    width: min(100% - 80px, 600px);

    margin: 0 auto;

    padding: 22px 30px;

    border: 1px solid #d7b77f;

    background: #fff9e5;

    color: #303530;

    font-size: 13px;
    line-height: 1.9;

    text-align: center;
}

.contact-faq__link {
    color: #923F13;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-faq__link:hover {
    color: #7c3610;
}


/* =========================================================
   SP (max-width: 767px)
========================================================= */

@media screen and (max-width: 767px) {

    .contact-title-section .content-section {
        padding: 40px 0 10px;
    }

    .contact-section {
        padding: 10px 0 60px;
    }

    .contact-form {
        width: calc(100% - 40px);
    }

    .contact-form__group {
        margin: 0 0 22px;
    }

    .contact-form__input,
    .contact-form__textarea {
        padding: 12px 14px;

        font-size: 14px;
    }

    .contact-form__submit {
        margin-top: 26px;
        padding: 14px;

        font-size: 14px;
    }

    .contact-notice-section {
        padding: 0 0 50px;
    }

    .contact-notice {
        width: calc(100% - 40px);

        padding: 26px 20px;
    }

    .contact-notice__text {
        text-align: left;
    }

    /* SPでは「ご予約について」の一文だけを表示し、
       その他のご質問について〜の一文は非表示にする */

    .contact-notice__text-sub {
        display: none;
    }

    .contact-faq-section {
        padding: 0 0 60px;
    }

    .contact-faq__text {
        width: calc(100% - 40px);

        padding: 18px 20px;

        font-size: 12px;

        text-align: left;
    }

}