/* =========================================================
   SMP埋め込みフォーム調整
   ①「入力内容を送信する」ボタンの色変更
   ② フォーム設問と外枠の余白調整
========================================================= */

/* フォーム外枠と設問の余白調整 */
.section-contact-form .contact-form-right .smpForm {
    box-sizing: border-box;
    padding: clamp(14px, 2vw, 24px) !important;
}

/* フォーム内要素のはみ出し防止 */
.section-contact-form .contact-form-right .smpForm table,
.section-contact-form .contact-form-right .smpForm input,
.section-contact-form .contact-form-right .smpForm select,
.section-contact-form .contact-form-right .smpForm textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* 「入力内容を送信する」ボタンの色変更：既存サイトCTAに合わせる */
.section-contact-form .contact-form-right .smpForm input[type="button"][name="smpSubmit"],
.section-contact-form .contact-form-right .smpForm input[type="submit"][name="smpSubmit"],
.section-contact-form .contact-form-right .smpForm button[name="smpSubmit"] {
    background-color: #ff8000 !important;
    border-color: #ff8000 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 42px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    appearance: none;
    -webkit-appearance: none;
}

/* hover時：既存サイトCTAに合わせる */
.section-contact-form .contact-form-right .smpForm input[type="button"][name="smpSubmit"]:hover,
.section-contact-form .contact-form-right .smpForm input[type="submit"][name="smpSubmit"]:hover,
.section-contact-form .contact-form-right .smpForm button[name="smpSubmit"]:hover {
    background-color: #ffca71 !important;
    border-color: #ffca71 !important;
    color: #ffffff !important;
}

/* focus時 */
.section-contact-form .contact-form-right .smpForm input[type="button"][name="smpSubmit"]:focus,
.section-contact-form .contact-form-right .smpForm input[type="submit"][name="smpSubmit"]:focus,
.section-contact-form .contact-form-right .smpForm button[name="smpSubmit"]:focus {
    outline: 2px solid #ffca71;
    outline-offset: 2px;
}

/* スマホ表示時 */
@media screen and (max-width: 767.98px) {
    .section-contact-form .contact-form-right .smpForm {
        padding: 12px 10px !important;
    }

    .section-contact-form .contact-form-right .smpForm input[type="button"][name="smpSubmit"],
    .section-contact-form .contact-form-right .smpForm input[type="submit"][name="smpSubmit"],
    .section-contact-form .contact-form-right .smpForm button[name="smpSubmit"] {
        width: 100% !important;
        padding: 12px 16px !important;
    }
}

/* =========================================================
   フォーム設問ブロック内の上下左右余白調整
   前半：ss_field
   後半：ss_enquete_field
========================================================= */

/* 前半・後半の全設問ブロックに余白を付ける */
.section-contact-form .contact-form-right .smpForm .ss_field,
.section-contact-form .contact-form-right .smpForm .ss_enquete_field {
    padding: 12px 14px !important;
    box-sizing: border-box;
}

/* 設問タイトルと入力欄の間隔 */
.section-contact-form .contact-form-right .smpForm .ss_form_title {
    margin-bottom: 6px !important;
}

/* 入力欄エリア */
.section-contact-form .contact-form-right .smpForm .ss_grid {
    box-sizing: border-box;
}

/* ボタンと上のフォーム枠の間隔 */
.section-contact-form .contact-form-right .smpForm .ss_btnArea {
    margin-top: 24px !important;
    text-align: center;
}

/* 念のため、SMPが生成する空の中央寄せdivにも対応 */
.section-contact-form .contact-form-right .smpForm div[align="center"] + .ss_btnArea {
    margin-top: 24px !important;
}

/* スマホ表示時 */
@media screen and (max-width: 767.98px) {
    .section-contact-form .contact-form-right .smpForm .ss_field,
    .section-contact-form .contact-form-right .smpForm .ss_enquete_field {
        padding: 10px 10px !important;
    }

    .section-contact-form .contact-form-right .smpForm .ss_btnArea,
    .section-contact-form .contact-form-right .smpForm div[align="center"] + .ss_btnArea {
        margin-top: 20px !important;
    }
}