/* ===================================
   Snow Monkey Forms スタイル
   =================================== */

/* フォーム外枠 */
#snow-monkey-form-412,
#snow-monkey-form-12439,
#snow-monkey-form-11534 {
    margin: 0 auto;
    padding: 1.5rem 5%;
    background: #f9f9f9;
    border-radius: 4px;
}

/* フォームアイテム */
.wp-block-snow-monkey-forms-item.smf-item {
    display: flex;
    gap: 5%;
}

.smf-item__col.smf-item__col--label {
    width: 40%;
}

.smf-item__col.smf-item__col--controls {
    width: 100%;
}

input.smf-text-control__control {
    width: 100%;
}

.smf-item__description {
    margin-top: 0;
}

/* ラベル */
.smf-item__label__text {
    position: relative;
    display: flex;
    align-items: center;
}

/* 必須バッジ */
.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
    content: "必須";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 23px;
    margin-left: 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background: #4db062;
}

/* 送信ボタン */
button.smf-button-control__control {
    background: var(--ark-color--main) !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-size: inherit !important;
    line-height: 1.5 !important;
    padding: .75em 1.5em !important;
    transition: opacity .25s !important;
}

button.smf-button-control__control:hover {
    opacity: .75;
}

.smf-action {
    display: flex;
    justify-content: center;
}

/* ラジオボタン */
.smf-form .smf-radio-button-control__control {
    flex: none;
    margin-top: 0;
}

.smf-form .smf-radio-button-control {
    align-items: center;
    display: inline-flex;
    gap: var(--_s-2);
}

input.smf-radio-button-control__control {
    padding: 0;
}

/* Turnstile（中央寄せ） */
.snow-monkey-forms-turnstile > div {
    justify-content: center;
}

/* ===================================
   SP対応
   =================================== */
@media (max-width: 768px) {
    .wp-block-snow-monkey-forms-item.smf-item {
        flex-direction: column;
    }

    .smf-item__col.smf-item__col--label {
        width: 100%;
    }

    .smf-checkboxes-control__control {
        display: flex;
        flex-direction: column;
    }
}