/*-------------------- pc --------------------*/
/*---------- base > width:1440px ----------*/
:root{
    --voice_font_base:"IBM Plex Sans JP", sans-serif;
    --voice_font_en:"Jost", sans-serif;
    --voice_color_text:#32373E;
    --voice_color_text_light:#6B6F75;
    --voice_color_red:#C50018;
    --voice_color_white:#ffffff;
    --voice_color_black:#000000;
    --voice_color_line:#CCCFD1;
    --voice_color_dark:#32373E;
}

.first_area{
    /* padding:0 20px; */
}
.first_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}

.l_voice_list_area{
    margin-top: 64px;
    /* padding: 0 20px; */

    .l_voice_list_wrap{
        max-width:1120px;
        margin:0 auto;
        padding:0 20px;
        box-sizing:content-box;
    }

    .p_voice_tab{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:16px;

        .p_voice_tab_button{
            position: relative;
            padding: 0 10px 9px;
            font-family: var(--voice_font_base);
            font-weight: 600;
            font-size: 20px;
            line-height: 27px;
            color: var(--voice_color_text);
            text-align: center;
            background: none;
            border: 0;
            border-bottom: 4px solid var(--voice_color_text);
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s;

            &.is_active{
                color:var(--voice_color_red);
                border-bottom-color:var(--voice_color_red);

                &:after{
                    content:'';
                    display:inline-block;
                    width:14px;
                    height:13px;
                    margin:0 0 4px 8px;
                    background:url('../images/voice/list/red_down_arrow.png') center / contain no-repeat;
                    vertical-align:middle;
                }
            }
        }
    }

    .p_voice_panel{
        margin-top: 64px;

        &[hidden]{
            display:none;
        }
    }

    .p_voice_intro{
        margin-top:44px;
        text-align:center;

        .p_voice_intro_lead{
            margin: 0;
            font-family: var(--voice_font_base);
            font-weight: 600;
            font-size: 22px;
            line-height: 33px;
            color: var(--voice_color_text);
        }

        .p_voice_intro_title{
            margin: 7px 0 0;
            font-family: var(--voice_font_base);
            font-weight: 600;
            font-size: 22px;
            line-height: 48px;
            color: var(--voice_color_red);
        }

        .p_voice_satisfaction{
            width: 320px;
            margin: 38px auto 0;

            img{
                display:block;
                width:100%;
                height:auto;
            }
        }

        .p_voice_intro_text{
            max-width: 800px;
            margin: 48px auto 0;
            text-align: left;

            p{
                margin:0;
                font-family:var(--voice_font_base);
                font-weight:500;
                font-size:16px;
                line-height:28px;
                color:var(--voice_color_text);

                &:not(:first-child){
                    margin-top: 24px;
                    font-size: 14px;
                    line-height: 20px;
                    color: var(--voice_color_text_light);
                }
            }
        }
    }

    .common_voice_wrap{
        margin-top: 57px;
        padding:0;
        /* padding-top: 48px; */
        border-top: 1px solid var(--voice_color_line);
    }

    .p_voice_pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin-top: 48px;
        padding-top: 48px;
        border-top: 1px solid var(--voice_color_line);

        .p_voice_pagination_arrow{
            width:60px;
            height:48px;
            background:url('../images/voice/list/voice_pagination_prev.png') center / contain no-repeat;
            margin: 0 8px 0 0;
        }

        .p_voice_pagination_arrow_next{
            background-image:url('../images/voice/list/voice_pagination_next.png');
            margin: 0 0 0 8px;
        }

        .p_voice_pagination_number,
        .p_voice_pagination_dots{
            font-weight: 600;
            font-size: 16px;
            line-height: 16px;
            color: var(--voice_color_text);
            text-decoration: none;
        }

        .p_voice_pagination_number.is_current{
            color:var(--voice_color_red);
            text-decoration:underline;
        }
    }

    .p_voice_cta_list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 124px;

        .p_voice_cta_box{
            position:relative;

            .img{
                img{
                    width:100%;
                }
            }
            .text{
                position:absolute;
                top:50%;
                width:100%;
                transform:translateY(-50%);
                text-align:center;
        
                p{
                    position:relative;
                    display:inline-block;
                    margin-bottom:6px;
                    padding-bottom:7px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:16px;
                    line-height:26px;
        
                    &:before{
                        content:'';
                        position:absolute;
                        bottom:0;
                        left:50%;
                        transform:translateX(-50%);
                        width:100%;
                        height:8px;
                        background:url(../images/voice/banner_border_red.png) center / cover no-repeat;
                    }
                }
                h3{
                    margin-bottom:12px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:24px;
                    line-height:32px;
                    color:#c50018;
                }
                .link{
                    display:block;
                    width:100%;
                    max-width:320px;
                    margin:0 auto;
                    padding:13px 42px 11px 22px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:16px;
                    line-height:24px;
                    text-align:center;
                    color:#ffffff;
                    background:url(../images/common/white_circle_red_arrow.png) center right 12px / 24px no-repeat;
                    background-color:#c50018;
                    border-radius:32px;
                    transition:0.3s;
        
                    &:hover{
                        opacity:0.7;
                    }
                }
            }
        }

        .p_voice_cta_card_simulation{
            background-image: url("../images/voice/list/voice_cta_simulation_bg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            border: unset;
        }
    }

    .p_voice_property_search{
        margin-top: 124px;

        .p_voice_property_search_card{
            position: relative;
            display: flex;
            align-items: flex-end;
            min-height: 240px;
            margin-top: 48px;
            padding: 0 20px 15px;
            overflow: hidden;
            color:var(--voice_color_white);
            text-decoration:none;
            background:url('../images/voice/list/voice_property_search_bg.png') center / cover no-repeat;
            border-radius:4px;
            transition:opacity 0.2s;

            &:before{
                content:'';
                position:absolute;
                inset:0;
                background:linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.42) 100%);
            }

            &:hover{
                opacity:0.75;
            }

            .p_voice_property_search_title{
                position:relative;
                z-index:1;
                font-family:var(--voice_font_base);
                font-weight:600;
                font-size:20px;
                line-height:30px;
            }

            .p_voice_property_search_icon{
                position:absolute;
                right: 24px;
                bottom: 24px;
                z-index:1;
                width:24px;
                height:24px;
                background:url('../images/simulation/simulation_button_arrow_icon.png') center / contain no-repeat;
            }
        }
    }
}





/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
    .first_area{
        /* padding:0 1.389vw; */
    }
    .first_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    
    .l_voice_list_area{
        margin-top: 4.444vw;
        /* padding: 0 1.389vw; */
    
        .l_voice_list_wrap{
            /* max-width:77.778vw; */
            margin:0 auto;
            padding:0 1.389vw;
            box-sizing:content-box;
        }
    
        .p_voice_tab{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:1.111vw;
    
            .p_voice_tab_button{
                position: relative;
                padding: 0 0.694vw 0.625vw;
                font-family: var(--voice_font_base);
                font-weight: 600;
                font-size: 1.389vw;
                line-height: 1.875vw;
                color: var(--voice_color_text);
                text-align: center;
                background: none;
                border: 0;
                border-bottom: 0.278vw solid var(--voice_color_text);
                cursor: pointer;
                transition: color 0.2s, border-color 0.2s;
    
                &.is_active{
                    color:var(--voice_color_red);
                    border-bottom-color:var(--voice_color_red);
    
                    &:after{
                        content:'';
                        display:inline-block;
                        width:0.972vw;
                        height:0.903vw;
                        margin:0 0 0.278vw 0.556vw;
                        background:url('../images/voice/list/red_down_arrow.png') center / contain no-repeat;
                        vertical-align:middle;
                    }
                }
            }
        }
    
        .p_voice_panel{
            margin-top: 4.444vw;
    
            &[hidden]{
                display:none;
            }
        }
    
        .p_voice_intro{
            margin-top:3.056vw;
            text-align:center;
    
            .p_voice_intro_lead{
                margin: 0;
                font-family: var(--voice_font_base);
                font-weight: 600;
                font-size: 1.528vw;
                line-height: 2.292vw;
                color: var(--voice_color_text);
            }
    
            .p_voice_intro_title{
                margin: 0.486vw 0 0;
                font-family: var(--voice_font_base);
                font-weight: 600;
                font-size: 2.222vw;
                line-height: 3.333vw;
                color: var(--voice_color_red);
            }
    
            .p_voice_satisfaction{
                width: 22.222vw;
                margin: 2.639vw auto 0;
    
                img{
                    display:block;
                    width:100%;
                    height:auto;
                }
            }
    
            .p_voice_intro_text{
                /* max-width: 55.556vw; */
                margin: 3.333vw auto 0;
                text-align: left;
    
                p{
                    margin:0;
                    font-family:var(--voice_font_base);
                    font-weight:500;
                    font-size:1.111vw;
                    line-height:1.944vw;
                    color:var(--voice_color_text);
    
                    &:not(:first-child){
                        margin-top: 1.667vw;
                        font-size: 0.972vw;
                        line-height: 1.389vw;
                        color: var(--voice_color_text_light);
                    }
                }
            }
        }
    
        .common_voice_wrap{
            margin-top: 3.958vw;
            padding:0;
            /* padding-top: 3.333vw; */
            border-top: 0.069vw solid var(--voice_color_line);
        }
    
        .p_voice_pagination{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.667vw;
            margin-top: 3.333vw;
            padding-top: 3.333vw;
            border-top: 0.069vw solid var(--voice_color_line);
    
            .p_voice_pagination_arrow{
                width:4.167vw;
                height:3.333vw;
                background:url('../images/voice/list/voice_pagination_prev.png') center / contain no-repeat;
                margin: 0 0.556vw 0 0;
            }
    
            .p_voice_pagination_arrow_next{
                background-image:url('../images/voice/list/voice_pagination_next.png');
                margin: 0 0 0 0.556vw;
            }
    
            .p_voice_pagination_number,
            .p_voice_pagination_dots{
                font-weight: 600;
                font-size: 1.111vw;
                line-height: 1.111vw;
                color: var(--voice_color_text);
                text-decoration: none;
            }
    
            .p_voice_pagination_number.is_current{
                color:var(--voice_color_red);
                text-decoration:underline;
            }
        }
    
        .p_voice_cta_list{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.389vw;
            margin-top: 8.611vw;
    
            .p_voice_cta_box{
                position:relative;
    
                .img{
                    img{
                        width:100%;
                    }
                }
                .text{
                    position:absolute;
                    top:50%;
                    width:100%;
                    transform:translateY(-50%);
                    text-align:center;
            
                    p{
                        position:relative;
                        display:inline-block;
                        margin-bottom:0.417vw;
                        padding-bottom:0.486vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.111vw;
                        line-height:1.806vw;
            
                        &:before{
                            content:'';
                            position:absolute;
                            bottom:0;
                            left:50%;
                            transform:translateX(-50%);
                            width:100%;
                            height:0.556vw;
                            background:url(../images/voice/banner_border_red.png) center / cover no-repeat;
                        }
                    }
                    h3{
                        margin-bottom:0.833vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.667vw;
                        line-height:2.222vw;
                        color:#c50018;
                    }
                    .link{
                        display:block;
                        width:100%;
                        /* max-width:22.222vw; */
                        margin:0 auto;
                        padding:0.903vw 3.681vw 0.764vw 1.875vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.111vw;
                        line-height:1.667vw;
                        text-align:center;
                        color:#ffffff;
                        background:url(../images/common/white_circle_red_arrow.png) center right 0.833vw / 1.667vw no-repeat;
                        background-color:#c50018;
                        border-radius:2.222vw;
                        transition:0.3s;
            
                        &:hover{
                            opacity:0.7;
                        }
                    }
                }
            }
    
            .p_voice_cta_card_simulation{
                background-image: url("../images/voice/list/voice_cta_simulation_bg.png");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                border: unset;
            }
        }
    
        .p_voice_property_search{
            margin-top: 8.611vw;
    
            .p_voice_property_search_card{
                position: relative;
                display: flex;
                align-items: flex-end;
                min-height: 16.667vw;
                margin-top: 3.333vw;
                padding: 0 1.389vw 1.042vw;
                overflow: hidden;
                color:var(--voice_color_white);
                text-decoration:none;
                background:url('../images/voice/list/voice_property_search_bg.png') center / cover no-repeat;
                border-radius:0.278vw;
                transition:opacity 0.2s;
    
                &:before{
                    content:'';
                    position:absolute;
                    inset:0;
                    background:linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.42) 100%);
                }
    
                &:hover{
                    opacity:0.75;
                }
    
                .p_voice_property_search_title{
                    position:relative;
                    z-index:1;
                    font-family:var(--voice_font_base);
                    font-weight:600;
                    font-size:1.389vw;
                    line-height:2.083vw;
                }
    
                .p_voice_property_search_icon{
                    position:absolute;
                    right: 1.667vw;
                    bottom: 1.667vw;
                    z-index:1;
                    width:1.667vw;
                    height:1.667vw;
                    background:url('../images/simulation/simulation_button_arrow_icon.png') center / contain no-repeat;
                }
            }
        }
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
    .first_wrap{
        padding:0 4.267vw;
    }
    .l_voice_list_area{
        margin-top: 12vw;
    
        .l_voice_list_wrap{
            padding: 0 4.267vw;
        }
        .p_voice_tab{
            gap: 0.8vw;
    
            .p_voice_tab_button{
                padding: 0 0 3.2vw;
                font-size: 3.733vw;
                line-height: 5.6vw;
                border-bottom-width: 0.8vw;
    
                &.is_active{
                    &:after{
                        width:2.667vw;
                        height:5.067vw;
                        margin:0 0 0.533vw 2.133vw;
                    }
                }
            }
        }
    
        .p_voice_panel{
            margin-top:12.8vw;
        }
    
        .p_voice_intro{
            margin-top:7.733vw;
    
            .p_voice_intro_lead{
                font-size: 3.733vw;
                line-height: 5.6vw;
            }
    
            .p_voice_intro_title{
                font-size: 5.333vw;
                line-height: 8.533vw;
                margin-top: 1.333vw;
            }
    
            .p_voice_satisfaction{
                width: 53.333vw;
                margin-top: 6.667vw;
            }
    
            .p_voice_intro_text{
                margin-top:8.533vw;
    
                p{
                    font-size: 3.733vw;
                    line-height: 6.4vw;
    
                    &:not(:first-child) {
                        margin-top: 4vw;
                        font-size: 3.2vw;
                        line-height: 4.8vw;
                    }
                }
            }
        }
    
        .common_voice_wrap{
            margin-top: 9.6vw;
            padding: 0;
        }
    
        .p_voice_pagination{
            gap: 5.333vw;
            margin-top: 8.533vw;
            padding-top: 8.533vw;
    
            .p_voice_pagination_arrow{
                width: 13.333vw;
                height: 10.667vw;
                margin: 0 0.8vw 0 0;
            }
            .p_voice_pagination_arrow_next {
                margin: 0 0 0 0.8vw;
            }
        }
    
        .p_voice_cta_list{
            grid-template-columns:1fr;
            margin-top:17.067vw;
    
            .p_voice_cta_box{
                .text{
                    p{
                        margin-bottom:1.6vw;
                        padding-bottom:1.867vw;
                        font-size:3.2vw;
                        line-height:4.8vw;
            
                        &:before{
                            width:100%;
                            height:1.867vw;
                        }
                    }
                    h3{
                        margin-bottom:3.467vw;
                        font-size:5.867vw;
                        line-height:8vw;
                    }
                    .link{
                        max-width:74.667vw;
                        padding:3.733vw 11.2vw 3.467vw 3.467vw;
                        font-size:3.733vw;
                        line-height:5.6vw;
                        background:url(../images/common/white_circle_red_arrow.png) center right 3.2vw / 6.4vw no-repeat;
                        background-color:#c50018;
                    }
                }
                &:last-child{
                    .text{
                        .link{
                            max-width:80vw;
                            padding:3.733vw 11.2vw 3.467vw 3.467vw;
                            font-size:3.733vw;
                            line-height:5.6vw;
                            background:url(../images/common/white_circle_red_arrow.png) center right 3.2vw / 6.4vw no-repeat;
                            background-color:#c50018;
                        }
                    }
                }
            }
        }
    
        .p_voice_property_search{
            margin-top:17.067vw;
    
            .p_voice_property_search_card{
                min-height: 32vw;
                margin-top: 8.533vw;
                padding: 0 4vw 1.6vw;
    
                .p_voice_property_search_title {
                    font-size: 4.267vw;
                    line-height: 6.4vw;
                }
                .p_voice_property_search_icon {
                    right: 4.267vw;
                    bottom: 3.2vw;
                    width: 5.333vw;
                    height: 5.333vw;
                }
            }
        }
    }
    
    /* .first_wrap{
        padding:0 16px;
    }
    .l_voice_list_area{
        margin-top: 45px;

        .l_voice_list_wrap{
            padding: 0 16px;
        }
        .p_voice_tab{
            gap: 3px;

            .p_voice_tab_button{
                padding: 0 0 12px;
                font-size: 14px;
                line-height: 21px;
                border-bottom-width: 3px;

                &.is_active{
                    &:after{
                        width:10px;
                        height:19px;
                        margin:0 0 2px 8px;
                    }
                }
            }
        }

        .p_voice_panel{
            margin-top:48px;
        }

        .p_voice_intro{
            margin-top:29px;

            .p_voice_intro_lead{
                font-size: 14px;
                line-height: 21px;
            }

            .p_voice_intro_title{
                font-size: 20px;
                line-height: 32px;
                margin-top: 5px;
            }

            .p_voice_satisfaction{
                width: 200px;
                margin-top: 25px;
            }

            .p_voice_intro_text{
                margin-top:32px;

                p{
                    font-size: 14px;
                    line-height: 24px;

                    &:not(:first-child) {
                        margin-top: 15px;
                        font-size: 12px;
                        line-height: 18px;
                    }
                }
            }
        }

        .common_voice_wrap{
            margin-top: 36px;
            padding: 0;
        }

        .p_voice_pagination{
            gap: 20px;
            margin-top: 32px;
            padding-top: 32px;

            .p_voice_pagination_arrow{
                width: 50px;
                height: 40px;
                margin: 0px 3px 0 0;
            }
            .p_voice_pagination_arrow_next {
                margin: 0px 0 0 3px;
            }
        }

        .p_voice_cta_list{
            grid-template-columns:1fr;
            margin-top:64px;

            .p_voice_cta_box{
                .text{
                    p{
                        margin-bottom:6px;
                        padding-bottom:7px;
                        font-size:12px;
                        line-height:18px;
            
                        &:before{
                            width:100%;
                            height:7px;
                        }
                    }
                    h3{
                        margin-bottom:13px;
                        font-size:22px;
                        line-height:30px;
                    }
                    .link{
                        max-width:280px;
                        padding:14px 46px 13px 24px;
                        font-size:14px;
                        line-height:21px;
                        background:url(../images/common/white_circle_red_arrow.png) center right 12px / 24px no-repeat;
                        background-color:#c50018;
                    }
                }
                &:last-child{
                    .text{
                        .link{
                            max-width:240px;
                            padding:14px 0 13px;
                            font-size:14px;
                            line-height:21px;
                            background:url(../images/common/white_circle_red_arrow.png) center right 12px / 24px no-repeat;
                            background-color:#c50018;
                        }
                    }
                }
            }
        }

        .p_voice_property_search{
            margin-top:64px;

            .p_voice_property_search_card{
                min-height: 120px;
                margin-top: 32px;
                padding: 0 15px 6px;

                .p_voice_property_search_title {
                    font-size: 16px;
                    line-height: 24px;
                }
                .p_voice_property_search_icon {
                    right: 16px;
                    bottom: 12px;
                    width: 20px;
                    height: 20px;
                }
            }
        }
    } */
}