/* MARK: common */
.snow-monkey-form {
    --_form-control-border-color-focus: #f68b1e !important;

    padding: 8vw 5vw;
    background: #fff;
    border-radius: 20px;

    & :where(input[type="text"], input[type="email"], input[type="tel"]) {
        width: 100%;
    }
}

.smf-form {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

/* 既存CSSの設定を復元 */
.btn > a,
.tel > a,
.smf-form .btn02 > a {
    box-sizing: content-box;
}

/* smf-form--simple-table */
.smf-form--simple-table {
    .smf-item {
        gap: 0 20px;
        align-items: center;
        padding-block: 30px;
        border-block-end: 1px solid #ccc;
    }
}

/* MARK: プログレストラッカー */
.smf-progress-tracker {
    --_add-progress-width: min(9vw, 60px);

    max-width: 462px;
    margin: 60px auto;
    font-size: min(4.4vw, 24px);
}

.smf-progress-tracker__item {
    --_color-text: #bcbbbb;

    &::before,
    &::after {
        top: calc(var(--_add-progress-width) / 2 - 3px);
        background: transparent;
    }

    &::after {
        right: 0;
        left: calc(50% + var(--_add-progress-width) / 2 + 10px);
        width: calc(100% - var(--_add-progress-width) - 20px);
        border-top: 6px dotted var(--_color-text);
    }

    &[aria-current="true"] {
        --_color-text: #246ba2;
        --_add-progress-number-color: #fff;
        --_add-progress-border-color: var(--_color-text);
    }
}

.smf-progress-tracker__item__number {
    --_light-color-gray: #fff;

    width: var(--_add-progress-width);
    height: var(--_add-progress-width);
    color: var(--_add-progress-number-color, var(--_color-text));
    border: 2px solid var(--_add-progress-border-color, currentColor);
}

.smf-progress-tracker__item__text {
    --_light-color-gray: #999;

    font-size: calc(16 / 24 * 1em);
    white-space: nowrap; /* 改行防止 */
}

/* MARK: 必須 */
.smf-item__label {
    position: relative;
}

.smf-item:has([data-validations*="required"]) {
    .smf-item__label {
        display: flex;
        gap: 1em;
        align-items: center;
        justify-content: space-between;

        &::after {
            flex-shrink: 0;
            width: fit-content;
            padding: 0 10px;
            font-size: 12px;
            line-height: 1.6;
            color: #fff;
            content: "必須";
            background: #f68b1e;
            border-radius: 2px;
        }
    }
}

/* MARK: チェックボックス */
.smf-checkbox-control {
    align-items: center !important;

    &::before {
        width: calc(22 / 16 * 1em);
        aspect-ratio: 1;
        content: "";
        background-color: #bcbbbb;
        border-radius: 2px;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path d="m13.595 28.704 4.7-4.692 9.028 9.035.004.004.013.013 15.295-15.286 4.655 4.656.037.037-19.986 19.978-13.699-13.698-.046-.046ZM52 8v44H8V8zm8-8H0v60h60z"/></svg>');
        mask-repeat: no-repeat;
        mask-position: 0 0;
        transition: background 0.1s;
    }

    /* check状態に応じて色を変更 */
    &:has(.smf-checkbox-control__control:checked) {
        &::before {
            background-color: #246ba1;
        }
    }

    /* input[checkbox]は消す */
    & .smf-checkbox-control__control {
        visibility: hidden;
        width: 0;
        height: 0;
        border: 0;
        opacity: 0;
    }
}

/* MARK: 個人情報
管理画面からclass追加 */
.sm-privacy-area {
    margin-block: 40px;
    text-align: center;

    & label {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0 1em;
        align-items: center;
        justify-content: center;
        margin-block-start: 30px;
        cursor: pointer;

        &::after {
            font-size: 11px;
            content: "I agree to the privacy policy";
        }
    }

    & a {
        color: #246ba1;
        text-decoration: underline;
    }
}

/* 確認画面のみ */
.snow-monkey-form[data-screen="confirm"] {
    .sm-privacy-area {
        & div[data-validations="required"] {
            width: fit-content;
            padding-block: 0.333em;
            padding-inline: 1em;
            margin-block-start: 1em;
            margin-inline: auto;
            border: 1px solid #ccc;
            border-radius: 2px;
        }
    }
}

/* MARK: ボタン */
.smf-action {
    --_margin-1: 0;

    display: flex;
    flex-flow: column-reverse wrap;
    gap: 20px;
    justify-content: center;
    width: fit-content;
    margin-inline: auto !important;
}

.smf-action .smf-button-control__control {
    --_lighter-color-gray: #f6f6f6;
    --_global--border-radius: 0;
    --_color-text: #333;
    --_padding-2: 10px;
    --_padding-1: 20px;
    --_border-radius: 0;

    position: relative;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
    width: min(356px, 270 / 375 * 100vw);
    height: 72px;
    padding: 10px 20px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 19px;
    font-weight: bold;
    color: #333;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: #f6f6f6;
    background-image: none;
    border: 0;

    /* --_transition-duration: var(--_global--transition-duration);
    --_transition-function-timing: var(--_global--transition-function-timing);
    --_transition-delay: var(--_global--transition-delay); */

    &:hover {
        color: #fff;
        background: #246ba1;
    }

    &:hover .icon {
        background: #fff;

        &::before {
            left: calc(150% - 8px);
        }

        &::after {
            left: calc(50% - 8px);
        }
    }

    .icon {
        position: relative;
        display: inline-block;
        width: min(6.4vw, 36px);
        height: min(6.4vw, 36px);
        overflow: hidden;
        background: #246ba1;
        border: 1px solid #246ba1;
        border-radius: 50%;
        transition: 0.5s;

        &::before {
            position: absolute;
            top: calc(50% - 8px);
            left: calc(50% - 8px);
            display: block;
            width: 16px;
            height: 16px;
            content: "";
            background-image: url("../../assets/img/common/ico_arrow_w.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            transition: 0.5s;
        }

        &::after {
            position: absolute;
            top: calc(50% - 8px);
            left: calc(-50% - 8px);
            display: block;
            width: 16px;
            height: 16px;
            content: "";
            background-image: url("../../assets/img/common/ico_arrow.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            transition: 0.5s;
        }
    }

    /* 戻る */
    &[data-action="back"] {
        flex-direction: row-reverse;

        & .icon {
            background: #ccc;
            border-color: #ccc;
            scale: -1 1;
        }
    }
}

/* MARK: 完了画面 */
.snow-monkey-form[data-screen="complete"] {
    .smf-complete-content {
        .btn02 {
            margin-inline: auto;
        }
    }
}

/* MARK: レスポンシブ */
@media (width >= 769px) {
    .snow-monkey-form {
        padding: 40px;
    }

    .smf-form--simple-table {
        .smf-item {
            padding-inline-start: 30px;
        }
    }

    .smf-item__col.smf-item__col--label {
        flex: 0 0 16em;
        max-width: 16em;
    }

    .smf-form--simple-table .smf-item__col--controls {
        flex: 1;
    }
}