@charset "utf-8";

body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}

#contents {
	background: #FFF;
	width: 100%;
	padding-bottom: 0;
}

.org-main * {
    font-family: "Noto Sans JP";
    box-sizing: border-box;
}
.org-main * a:hover {
    text-decoration: none;
    opacity: .7;
    transition: .4s;
}

.section__inner {
    width: 1080px;
    margin: 0 auto;
}
.pageHead {
    display: none;
}


/*---------------- メイン画像 ----------------*/

.mainview__section {
    height: 437px;
}
    .mainview__image {
        height: 100%;
    }
        .mainview__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/*---------------- ボタン郡 ----------------*/

.button__section {
    padding-block: 80px;
    background: #E5F2FF;
}
    .button__list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 21px;
    }
        [class*="button__item--"] a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 346px;
            height: 110px;
            border-radius: 3px;
            font-size: 22px;
            font-weight: 700;
            line-height: 1.4;
            color: #FFF;
            text-align: center;
            position: relative;
        }
        .button__item--plan a {
            background: url(/images/assessment/bg_button-plan.webp) no-repeat center / cover;
        }
        .button__item--satei a {
            background: url(/images/assessment/bg_button-satei.webp) no-repeat center / cover;
        }
        .button__item--guide a {
            background: url(/images/assessment/bg_button-guide.webp) no-repeat center / cover;
            padding-right: 25px;
        }
            [class*="button__item--"] a::after {
                content: '';
                background: url(/images/assessment/icon_button-arrow.svg) no-repeat center / cover;
                display: block;
                width: 16px;
                height: 15px;
                position: absolute;
                top: 50%;
                right: 28px;
                transform: translateY(-50%);
            }
            .button__item--guide a::after {
                right: 94px;
                transform: translateY(-50%) rotate(-90deg);
            }

html {
    scroll-behavior: smooth;
}

/* ヘッダー通常時（ページ上部） */
html:not(:has(.l-header.is-fixed)) #flowchart-link,
html:not(:has(.l-header.is-fixed)) #assessment-form {
    padding-top: 250px;
    margin-top: -250px;
}

/* ヘッダー固定時（スクロール後） */
html:has(.l-header.is-fixed) #flowchart-link,
html:has(.l-header.is-fixed) #assessment-form {
    padding-top: 137px;
    margin-top: -137px;
}

/*---------------- 売却診断フローチャート ----------------*/
.flowchart__section {
    padding-block: 96px 80px;
}
    .flowchart__headline {
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        margin-bottom: 41px;
    }
        .flowchart__headline span {
            font-size: 42px;
            font-weight: 700;
            line-height: 1;
            color: #004680;
            position: relative;
        }
            .flowchart__headline span::before {
                content: '';
                background: url(/images/assessment/img_flowchart-deco.svg) no-repeat center / cover;
                display: block;
                width: 25px;
                height: 22px;
                position: absolute;
                top: -6px;
                left: -20px;
            }
    .flowchart__contents {
        width: 100%;
        height: 500px;
        background: url(/images/assessment/bg_flowchart.webp) no-repeat center / cover;
        margin-bottom: 13px;
    }
        .flowchart__list {
            position: relative;
        }
            [class*="flowchart__item--"] {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 72px;
                background: #E5F2FF;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.5;
                color: #333;
                text-align: center;
                position: absolute;
                left: 330px;
            }
            .flowchart__item--01 {
                width: 420px;
                top: 0;
            }
            .flowchart__item--02 {
                top: 120px;
            }
            .flowchart__item--03 {
                top: 241px;
            }
            .flowchart__item--04 {
                top: 362px;
            }
            .flowchart__item--05 {
                top: 362px;
                left: 0;
            }
    .flowchart__result-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
        [class*="flowchart__result-item--"] {
            width: 255px;
            border-radius: 3px;
            overflow: hidden;
        }
            [class*="flowchart__result-item--"] a {
                display: block;
            }
            .flowchart__result-item--purchase a {
                background: #004680;

                .flowchart__result-text .flowchart__result-arrow svg {
                    stroke: #004680;
                }
            }
            .flowchart__result-item--intermediary a {
                background: #0361AE;

                .flowchart__result-text .flowchart__result-arrow svg {
                    stroke: #0361AE;
                }
            }
            .flowchart__result-item--specialist a {
                background: #F8AE47;

                .flowchart__result-text .flowchart__result-arrow svg {
                    stroke: #F8AE47;
                    transform: rotate(-90deg);
                }
            }
            .flowchart__result-item--free a {
                background: #00809D;

                .flowchart__result-text .flowchart__result-arrow svg {
                    stroke: #00809D;
                }
            }
                .flowchart__result-image {
                    width: 100%;
                    height: 140px;
                }
                .flowchart__result-text {
                    height: 78px;
                    padding: 12px 20px;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 1.35;
                    color: #FFF;
                    position: relative;
                }
                    .flowchart__result-text  span {
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 1.45;
                        color: #FFF;
                    }
                    .flowchart__result-arrow {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 28px;
                        height: 28px;
                        background: #FFF;
                        border-radius: 50%;
                        position: absolute;
                        top: 50%;
                        right: 15px;
                        transform: translateY(-50%);
                    }
                        .flowchart__result-arrow svg {
                            width: 10px;
                            height: 6px;
                            fill: none;
                        }

/*--------------------- 無料査定を申し込む ---------------------*/

.form__section {
    padding-block: 80px;
    background: #E5F2FF;
}
    .form__headline {
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
        color: #333;
        text-align: center;
        margin-bottom: 40px;
    }
    .form__tab-list {
        display: flex;
        gap: 9.5px;
    }
        .form__tab-list > li {
            flex: 1;
            display: flex;
        }
        .form__tab-list li {
            flex: 1;
            width: 100%;
        }
        .form__tab-list [class*="form__tab-item--"] {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 68px;
            border-radius: 3px 3px 0 0;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.5;
            color: #FFF;
            cursor: pointer;
            text-decoration: none;
        }
        .form__tab-item--purchase {
            background: #D2DBE2;
        }
        .form__tab-item--intermediary {
            background: #CBD8E3;
        }
        .form__tab-item--free {
            background: #D1DFE2;
        }
        .form__tab-item--purchase.active {
            background: #004680;
        }
        .form__tab-item--intermediary.active {
            background: #0361AE;
        }
        .form__tab-item--free.active {
            background: #00809D;
        }
    .form__contents {
        display: none;
        padding: 40px 60px 50px;
        background: #FFF;
    }
    .form__contents.is-active {
        display: block;
    }
    .form__box {
        display: none;
    }
    .form__box.is-active {
        display: block;
    }
    .js-type-field.is-hidden {
        display: none;
    }
        [class*="form__step-list"] {
            display: flex;
            justify-content: center;
            gap: 20px;
            width: fit-content;
            margin: 0 auto 40px;
            position: relative;
            z-index: 1;
        }
            [class*="form__step-list"]::before {
                content: '';
                background: #BFBFBF;
                display: block;
                width: 550px;
                height: 1px;
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }
            .form__step-list--free::before {
                width: 260px;
            }
            .form__step-item {
                width: 98px;
            }
            .form__step-item.active {
                .form__step-num {
                    background: #004680;
                    border: none;
                    color: #FFF;
                }
                .form__step-text {
                    color: #004680;
                }
            }
                .form__step-num {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    border: 1px solid #BFBFBF;
                    background: #FFF;
                    border-radius: 50%;
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 1;
                    color: #BFBFBF;
                    padding: 0 0 3px;
                    margin: 0 auto 10px;
                }
                .form__step-text {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1;
                    color: #848484;
                    text-align: center;
                }
        .form__selection {
            position: relative;
        }
        .form__selection.address-selection {
            .form__selection-title {
                padding-bottom: 20px;
                border-bottom: 1px solid #F0F0F0;
                margin-bottom: 20px;
            }
            .form__group-title {
                margin-top: 9px;
            }
            .form__group {
                align-items: flex-start;
            }
        }
        .form__selection-title {
            font-size: 24px;
            font-weight: 700;
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form__bkn-type {
            display: flex;
            justify-content: center;
            gap: 24px;
        }
            .form__type-item {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 140px;
                height: 134px;
                padding: 10px 0 20px;
                border: 1px solid #BFBFBF;
                cursor: pointer;
                background: rgba(250, 250, 250, 0.98);
                border-radius: 2px;
                
                &:hover {
                    border: 3px solid #FFC000;
                }

                &:has(input:checked) {
                    border: 3px solid #FFC000;
                }
            }
                .form__type-item input[type="radio"] {
                    display: none;
                    position: absolute;
                    top: 12px;
                    left: 12px;
                    margin: 0;
                    cursor: pointer;
                }
                .form__type-icon {
                    width: 80px;
                    height: 80px;
                }
                .form__type-text {
                    font-size: 16px;
                    font-weight: 700;
                    color: #333;
                    text-align: center;
                }
        .form__group-contents {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 400;
            color: #333;
        }
        .form__selection-wrap {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
            .form__group {
                display: flex;
                align-items: center;
                gap: 54px;
                width: 100%;
                padding-bottom: 30px;
                border-bottom: 1px solid #E9E9E9;
            }
            .form__group.time {
                border-bottom: none;
            }
            .form__group-title {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 157px;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.8;
                color: #333;
            }
                [class*="group-label--"] {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 35px;
                    height: 22px;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1.8;
                    color: #FFF;
                    padding-bottom: 2px;
                }
                .group-label--required {
                    background: #F02727;
                }
                .group-label--any {
                    background: #79B2D9;
                }
                    .form__address-item {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                    }
                    .form__address-item:not(:last-of-type) {
                        margin-bottom: 10px;
                    }
                        .form__address-title {
                            width: 126px;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 1.8;
                            color: #333;
                        }
                        .form__address-input input[type="text"] {
                            width: 285px;
                            height: 45px;
                            border-radius: 2px;
                            border: 1px solid #BFBFBF;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 1.8;
                            padding: 0 10px;
                            background: #FFF;
                        }
                        .form__address-item:first-of-type .form__address-input input[type="text"] {
                            width: 200px;
                        }
                        .form__address-input input[type="text"]:placeholder-shown {
                            background: #FFE9E4;
                        }
                        .form__address-input input[type="text"]::placeholder {
                            color: #AAA;
                        }
                        .form__address-input select {
                            appearance: auto;
                            width: 200px;
                            height: 45px;
                            border-radius: 2px;
                            border: 1px solid #BFBFBF;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 1.8;
                            color: #333;
                            padding: 0 20px 0 10px;
                            background: #FFF;
                        }
                        .form__address-input select:has(option[value=""]:checked) {
                            background: #FFE9E4;
                        }
                .form__select {
                    appearance: auto;
                    width: 200px;
                    height: 45px;
                    border-radius: 2px;
                    border: 1px solid #BFBFBF;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 1.8;
                    color: #333;
                    padding: 0 20px 0 10px;
                }
                .radio__list {
                    display: flex;
                    align-items: center;
                    gap: 3px;
                }
                    .radio__list label {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 0 15px;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 1.8;
                        color: #333;
                    }
                        input[type="radio"] {
                            appearance: auto;
                            width: 20px;
                            height: 20px;
                            border: 1px solid #BFBFBF;
                            border-radius: 50%;
                            background: #FFF;
                            margin: 0;
                        }
                .form__group-contents input[type="text"],
                .form__group-contents input[type="tel"],
                .form__group-contents input[type="email"] {
                    width: 370px;
                    height: 45px;
                    border-radius: 2px;
                    border: 1px solid #BFBFBF;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 1.8;
                    padding: 0 30px 0 10px;
                }
                .apartment-box .form__group-contents input[type="text"] {
                    width: 200px;
                }
                .form__group-contents input[type="text"]:placeholder-shown,
                .form__group-contents input[type="email"]:placeholder-shown {
                    background: #FFE9E4;
                }
                .apartment-box .form__group-contents input[type="text"]:placeholder-shown {
                    background: #FFF;
                }
                .form__group-contents input[type="text"]::placeholder,
                .form__group-contents input[type="tel"]::placeholder,
                .form__group-contents input[type="email"]::placeholder {
                    color: #AAA;
                }
            .form__notes {
                font-size: 13px;
                font-weight: 400;
                line-height: 1.8;
                letter-spacing: 0.26px;
                color: #333;
                text-align: center;
            }
                .form__notes a {
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 1.8;
                    letter-spacing: 0.26px;
                    color: #1E64A0;
                }
        .prev__button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 132px;
            height: 36px;
            border-radius: 9999px;
            border: 1px solid #BFBFBF;
            background: #FFF;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.5;
            color: #333;
            cursor: pointer;
            text-decoration: none;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .next__button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 60px;
            margin: 40px auto 0;
            border-radius: 3px;
            background: #DDD;
            font-size: 20px;
            font-weight: 500;
            line-height: 1;
            color: #FFF;
            position: relative;
        }
        .next__button.is-next {
            background: #333;
            cursor: pointer;
        }
            .next__button svg {
                display: none;
                width: 8px;
                height: 14px;
                fill: none;
                stroke: #FFF;
                position: absolute;
                top: 50%;
                right: 26px;
                transform: translateY(-50%);
            }
            .next__button.is-next svg {
                display: block;
            }
        .submit__button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 60px;
            margin: 40px auto 0;
            border-radius: 3px;
            background: #DDD;
            font-size: 20px;
            font-weight: 500;
            line-height: 1;
            color: #FFF;
            position: relative;
            border: none;
            cursor: default;
        }
        .submit__button.is-next {
            background: #FFC000;
            cursor: pointer;
        }
            .submit__button svg {
                display: none;
                width: 8px;
                height: 14px;
                fill: none;
                stroke: #FFF;
                position: absolute;
                top: 50%;
                right: 26px;
                transform: translateY(-50%);
            }
            .submit__button.is-next svg {
                display: block;
            }

.confirm-str4 {
    display: contents;
}

/*-------- 完了画面 --------*/

.thankyou__title {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}
.thankyou__text {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
}
.top__more a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 60px;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: #FFF;
    background: #333;
}