/* =========================================================
   Form Common
   form01 / form02 / form03
   ========================================================= */

.sg-form {
    padding: 0 0 70px;
}

/* -------------------------
   web box
------------------------- */
.sg-form .sgfm-webbox {
    max-width: 100%;
    text-align: center;
    margin: 0 0 30px;
    padding: 25px 0;
}

.sg-form .sgfm-webbox-title {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.4;
    margin: 0 0 10px;
}

.sg-form .sgfm-webbox-text {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 500;
    letter-spacing: .12em;
    margin: 0;
}

/* -------------------------
   tabs
------------------------- */
.sg-form .sgfm-select-lead {
    text-align: center;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(16px, 1.8vw, 20px);
    ;
    letter-spacing: .12em;
    margin: 0 auto 25px;
}

.sg-form .sgfm-tabs {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 auto 40px;
}

.sg-form .sgfm-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    text-align: center;
    text-decoration: none;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
    color: #fff;
    background: #1d5b25;
    padding: 10px 15px;
}

.sg-form .sgfm-tab.is-current {
    background: #92b5a9;
}

.sg-form .sgfm-tab:hover,
.sg-form .sgfm-tab:focus {
    background: #92b5a9;
}

/* -------------------------
   required note
------------------------- */
.sg-form .sgfm-required-note {
    max-width: 100%;
    text-align: center;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.8;
    letter-spacing: .04em;
    margin: 0 0 50px;
}

.sg-form .sgfm-required-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #bf3f3f;
    line-height: 1;
    margin-right: 10px;
    padding: 5px 10px;
}

/* =========================================================
   Snow Monkey Forms
   ========================================================= */

/* フォーム幅 */
.sg-form .smf-form {
    max-width: 900px;
    margin: 0 auto;
}

/* 1項目：左ラベル / 右入力欄 */
.sg-form .smf-item {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 5px;
    background: #fff;
    margin: 5px;
}

/* 左側ラベル */
.sg-form .smf-item__col--label {
    padding: 15px 20px;
    background: #eaedf0;
}

/* 右側入力欄 */
.sg-form .smf-item__col--controls {
    background: #f7f7f7;
    padding: 15px 20px;
}

/* ラベル文字 */
.sg-form .smf-item__label,
.sg-form .smf-label {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .04em;
}

/* -------------------------
   必須マークを自動表示
   Snow Monkey Forms の required 属性を見て表示
------------------------- */
.sg-form .smf-item:has(input[required], textarea[required], select[required],
    input[aria-required="true"], textarea[aria-required="true"], select[aria-required="true"],
    [data-validations*="required"]) .smf-item__label::after,
.sg-form .smf-item:has(input[required], textarea[required], select[required],
    input[aria-required="true"], textarea[aria-required="true"], select[aria-required="true"],
    [data-validations*="required"]) .smf-item__col--label>label::after {
    content: "必須";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
    color: #fff;
    background: #bf3f3f;
    margin-left: 10px;
    padding: 5px 10px;
}

/* 必須ラベル */
.sg-form .smf-label__required,
.sg-form .smf-item__label__required,
.sg-form .smf-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    vertical-align: middle;
    color: #fff;
    background: #bf3f3f;
    margin-left: 10px;
    padding: 5px 10px;
}

/* 入力欄共通 */
.sg-form input[type="text"],
.sg-form input[type="email"],
.sg-form input[type="tel"],
.sg-form input[type="url"],
.sg-form input[type="number"],
.sg-form select,
.sg-form textarea {
    width: 100%;
    max-width: 580px;
    min-height: 35px;
    border: 1px solid #aeb4bd;
    border-radius: 0;
    color: #000;
    background: #fff;
    line-height: 1.6;
    box-sizing: border-box;
    padding: 5px 10px;
}

.sg-form textarea {
    max-width: 580px;
    min-height: 140px;
    resize: vertical;
}

/* 郵便番号・電話番号など短い入力欄を少し短めに */
.sg-form input[name="zip"],
.sg-form input[name="tel"] {
    max-width: 280px;
}

/* 住所・メールは長め */
.sg-form input[name="address"],
.sg-form input[name="email"],
.sg-form input[name="address_detail"],
.sg-form input[name="building"] {
    max-width: 580px;
}

/* 補足テキスト */
.sg-form .smf-item__description,
.sg-form .smf-help-text,
.sg-form .smf-control-description {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    line-height: 1.7;
    margin: 0 0 10px;
}

/* チェックボックス */
.sg-form .smf-checkboxes-control,
.sg-form .smf-checkboxes-control__control {
    display: grid;
    gap: 15px;
}

.sg-form .smf-checkbox-control,
.sg-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    line-height: 1.7;
}

.sg-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1d5b25;
    margin: 0;
}

/* エラー */
.sg-form .smf-error-messages,
.sg-form .smf-error-message {
    color: #b50000;
    font-size: 14px;
    line-height: 1.6;
}

/* -------------------------
   ご希望日時
------------------------- */
.sg-form .sgfm-date-note {
    margin: 0 0 20px;
}

.sg-form .sgfm-date-note p {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .04em;
    margin: 0;
}

.sg-form .sgfm-date-row {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
}

.sg-form .sgfm-date-label {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 16px;
    line-height: 1.6;
    white-space: nowrap;
}

.sg-form .sgfm-date-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ご希望日時内の日付入力 */
.sg-form .sgfm-date-fields input[type="text"],
.sg-form .sgfm-date-fields input[type="date"] {
    width: 180px;
    max-width: 180px;
}

/* ご希望日時内の時間プルダウン */
.sg-form .sgfm-date-fields select {
    width: 100px;
    max-width: 100px;
    min-height: 35px;
}

/* Snow Monkey Forms側の余白を詰める */
.sg-form .sgfm-date-fields>* {
    margin-top: 0;
    margin-bottom: 0;
}

/* -------------------------
   工事場所：現住所と異なる時だけ表示
------------------------- */
.sg-form03 .sgfm-workplace-extra.is-hidden {
    display: none !important;
}

/* -------------------------
   progress tracker
------------------------- */
.sg-form .smf-progress-tracker {
    max-width: 900px;
    margin: 0 auto 40px;
}

/* -------------------------
   buttons
------------------------- */
.sg-form .smf-action,
.sg-form .smf-button-control,
.sg-form .smf-button-control__control {
    text-align: center;
}

.sg-form .smf-action {
    max-width: 900px;
    margin: 50px auto 0;
}

.sg-form button,
.sg-form input[type="submit"],
.sg-form .smf-button-control__control {
    min-width: 170px;
    border: none;
    border-radius: 0;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    color: #fff;
    background: #1d5b25;
    cursor: pointer;
    padding: 15px 30px;
}

.sg-form button:hover,
.sg-form button:focus,
.sg-form input[type="submit"]:hover,
.sg-form input[type="submit"]:focus,
.sg-form .smf-button-control__control:hover,
.sg-form .smf-button-control__control:focus {
    opacity: .5;
    color: #fff;
}

/* 戻るボタン */
.sg-form .smf-button-control__control[data-action="back"],
.sg-form button[name="smf-action"][value="back"] {
    background: #707070;
}

/* 完了画面 */
.sg-form .smf-complete-content,
.sg-form .smf-system-error-content {
    max-width: 900px;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    line-height: 2;
    background: #f7f7f7;
    margin: 0 auto;
    padding: 35px 30px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
    .sg-form .sgfm-webbox {
        padding: 10px 0;
    }

    .sg-form .sgfm-tabs {
        margin: 0 0 20px;
    }

    .sg-form .smf-item {
        grid-template-columns: 190px minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .sg-form {
        padding-bottom: 50px;
    }

    .sg-form .sgfm-tabs {
        grid-template-columns: 1fr;
        border-bottom: none;
        gap: 5px;
    }

    .sg-form .sgfm-tab {
        min-height: 50px;
        border-right: none;
    }

    .sg-form .sgfm-required-note {
        margin: 0 0 30px;
    }


    .sg-form .smf-item {
        display: block;
        border-bottom: 5px solid #fff;
    }

    .sg-form .smf-item__col--label {
        padding: 12px 14px;
    }

    .sg-form .smf-item__col--controls {
        padding: 14px;
    }

    .sg-form input[type="text"],
    .sg-form input[type="email"],
    .sg-form input[type="tel"],
    .sg-form input[type="url"],
    .sg-form input[type="number"],
    .sg-form select,
    .sg-form textarea {
        max-width: 100%;
        font-size: 16px;
    }

    .sg-form input[name="zip"],
    .sg-form input[name="tel"] {
        max-width: 100%;
    }

    .sg-form button,
    .sg-form input[type="submit"],
    .sg-form .smf-button-control__control {
        width: 100%;
        max-width: 260px;
    }

    .sg-form .sgfm-date-row {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 18px;
    }

    .sg-form .sgfm-date-fields {
        gap: 8px;
    }

    .sg-form .sgfm-date-fields input[type="text"],
    .sg-form .sgfm-date-fields input[type="date"] {
        width: 160px;
        max-width: 100%;
    }

    .sg-form .sgfm-date-fields select {
        width: 90px;
        max-width: 100%;
    }
}