:root{
    --faq_font_base:"IBM Plex Sans JP", sans-serif;
    --faq_font_en:"Jost", sans-serif;
    --faq_font_mincho:"Shippori Mincho B1", serif;
    --faq_color_text:#32373E;
    --faq_color_text_light:#6B6F75;
    --faq_color_text_dark:#20242a;
    --faq_color_red:#C50018;
    --faq_color_white:#ffffff;
    --faq_color_black:#000000;
    --faq_color_bg:#F0F1F4;
    --faq_color_line:#CCCFD1;
}

.first_area{
    padding: 0 16px;

    .first_wrap{
        max-width: 1120px;
        margin: 0 auto;
    }
}

.faq_anchor_area{
    padding: 0 16px;
    margin-top: 64px;

    .faq_anchor_wrap{
        max-width: 1120px;
        margin: 0 auto;
    }
    .faq_anchor_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .faq_anchor_box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 116px;
        padding: 29px 24px 20px;
        font-family: var(--faq_font_base);
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        color: var(--faq_color_text);
        background-color: var(--faq_color_white);
        border: 1px solid var(--faq_color_line);
        border-radius: 4px;
        transition: 0.3s;

        &:after{
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            margin-top: 13px;
            background: url("../images/faq/faq-anchor-arrow.png") center / contain no-repeat;
        }
        &:hover{
            color:#C50018;
            border-color: var(--faq_color_red);
        }
    }
}

.faq_list_area{
    padding: 0 16px;
    margin-top: 96px;

    .faq_list_wrap{
        max-width: 1120px;
        margin: 0 auto;
    }
    .faq_list_container{
        display: grid;
        gap: 24px;
        margin-top: 48px;
    }
    .faq_item{
        border: 1px solid var(--faq_color_line);
        border-radius: 4px;
        overflow: hidden;

        &.active{
            .faq_question{
                &:after{
                    background-image: url("../images/faq/faq-toggle-minus.png");
                }
            }
            .faq_answer{
                display: block;
            }
        }
    }
    .faq_question{
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: start;
        gap: 10px;
        width: 100%;
        padding: 15px 24px 11px;
        font-family: var(--faq_font_base);
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        text-align: left;
        color: var(--faq_color_white);
        background-color: var(--faq_color_text);
        position: relative;

        &:after{
            content: '';
            width: 28px;
            height: 28px;
            background: url("../images/faq/faq-toggle-plus.png") center / contain no-repeat;
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .faq_question_label{
        font-family: var(--faq_font_base);
        font-size: 20px;
        line-height: 25px;
    }
    .faq_answer{
        display: none;
        padding: 32px 24px;
        background-color: var(--faq_color_white);

        p{
            display: block;
            margin: 0;
            padding-left: 26px;
            text-indent: -26px;
            font-family: var(--faq_font_base);
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: var(--faq_color_text);

            span{
                display: inline-block;
                width: 21px;
                font-family: var(--faq_font_base);
                font-weight: 600;
                font-size: 20px;
                line-height: 30px;
                color: var(--faq_color_red);
            }
        }
    }
}
.faq_list_area#faq_sale{
    margin-top: 64px;
}

.faq_related_area{
    padding: 0 16px;
    margin-top: 96px;

    .faq_related_wrap{
        max-width: 1120px;
        margin: 0 auto;
    }
    .faq_related_container{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 48px;
    }
    .faq_related_card{
        position: relative;
        display: block;
        aspect-ratio: 550 / 240;
        overflow: hidden;
        border-radius: 4px;
        color: var(--faq_color_white);
        text-decoration: none;

        &:hover{
            opacity: 0.7;

            .faq_related_image{
                transform: scale(1.04);
            }
        }

        /* &:after{
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.36);
        } */

        picture{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .faq_related_image{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    .faq_related_title{
        position: absolute;
        left: 16px;
        bottom: 8px;
        z-index: 1;
        max-width: calc(100% - 96px);
        font-family: var(--faq_font_base);
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: var(--faq_color_white);
    }
    .faq_related_arrow{
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 1;
        width: 24px;
        height: 24px;
    }
}





/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
    .first_area{
        padding: 0 1.111vw;
    
        .first_wrap{
            /* max-width: 77.778vw; */
            margin: 0 auto;
        }
    }
    
    .faq_anchor_area{
        padding: 0 1.111vw;
        margin-top: 4.444vw;
    
        .faq_anchor_wrap{
            /* max-width: 77.778vw; */
            margin: 0 auto;
        }
        .faq_anchor_container{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.389vw;
        }
        .faq_anchor_box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 8.056vw;
            padding: 2.014vw 1.667vw 1.389vw;
            font-family: var(--faq_font_base);
            font-weight: 600;
            font-size: 1.389vw;
            line-height: 2.083vw;
            text-align: center;
            color: var(--faq_color_text);
            background-color: var(--faq_color_white);
            border: 0.069vw solid var(--faq_color_line);
            border-radius: 0.278vw;
            transition: 0.3s;
    
            &:after{
                content: '';
                display: block;
                width: 1.667vw;
                height: 1.667vw;
                margin-top: 0.903vw;
                background: url("../images/faq/faq-anchor-arrow.png") center / contain no-repeat;
            }
            &:hover{
                color:#C50018;
                border-color: var(--faq_color_red);
            }
        }
    }
    
    .faq_list_area{
        padding: 0 1.111vw;
        margin-top: 6.667vw;
    
        .faq_list_wrap{
            /* max-width: 77.778vw; */
            margin: 0 auto;
        }
        .faq_list_container{
            display: grid;
            gap: 1.667vw;
            margin-top: 3.333vw;
        }
        .faq_item{
            border: 0.069vw solid var(--faq_color_line);
            border-radius: 0.278vw;
            overflow: hidden;
    
            &.active{
                .faq_question{
                    &:after{
                        background-image: url("../images/faq/faq-toggle-minus.png");
                    }
                }
                .faq_answer{
                    display: block;
                }
            }
        }
        .faq_question{
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: start;
            gap: 0.694vw;
            width: 100%;
            padding: 1.042vw 1.667vw 0.764vw;
            font-family: var(--faq_font_base);
            font-weight: 600;
            font-size: 1.111vw;
            line-height: 1.667vw;
            text-align: left;
            color: var(--faq_color_white);
            background-color: var(--faq_color_text);
            position: relative;
    
            &:after{
                content: '';
                width: 1.944vw;
                height: 1.944vw;
                background: url("../images/faq/faq-toggle-plus.png") center / contain no-repeat;
                position: absolute;
                right: 1.667vw;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .faq_question_label{
            font-family: var(--faq_font_base);
            font-size: 1.389vw;
            line-height: 1.736vw;
        }
        .faq_answer{
            display: none;
            padding: 2.222vw 1.667vw;
            background-color: var(--faq_color_white);
    
            p{
                display: block;
                margin: 0;
                padding-left: 1.806vw;
                text-indent: -1.806vw;
                font-family: var(--faq_font_base);
                font-weight: 500;
                font-size: 1.111vw;
                line-height: 1.667vw;
                color: var(--faq_color_text);

                span{
                    display: inline-block;
                    width: 1.458vw;
                    font-family: var(--faq_font_base);
                    font-weight: 600;
                    font-size: 1.389vw;
                    line-height: 2.083vw;
                    color: var(--faq_color_red);
                }
            }
        }
    }
    .faq_list_area#faq_sale{
        margin-top: 4.444vw;
    }
    
    .faq_related_area{
        padding: 0 1.111vw;
        margin-top: 6.667vw;
    
        .faq_related_wrap{
            /* max-width: 77.778vw; */
            margin: 0 auto;
        }
        .faq_related_container{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.389vw;
            margin-top: 3.333vw;
        }
        .faq_related_card{
            position: relative;
            display: block;
            aspect-ratio: 550 / 240;
            overflow: hidden;
            border-radius: 0.278vw;
            color: var(--faq_color_white);
            text-decoration: none;
    
            &:hover{
                opacity: 0.7;
    
                .faq_related_image{
                    transform: scale(1.04);
                }
            }
    
            /* &:after{
                content: '';
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.36);
            } */
    
            picture{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .faq_related_image{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .faq_related_title{
            position: absolute;
            left: 1.111vw;
            bottom: 0.556vw;
            z-index: 1;
            /* max-width: calc(100% - 6.667vw); */
            font-family: var(--faq_font_base);
            font-weight: 600;
            font-size: 1.389vw;
            line-height: 2.083vw;
            color: var(--faq_color_white);
        }
        .faq_related_arrow{
            position: absolute;
            right: 1.111vw;
            bottom: 1.111vw;
            z-index: 1;
            width: 1.667vw;
            height: 1.667vw;
        }
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
    .faq_anchor_area{
        margin-top: 12.8vw;
    
        .faq_anchor_container{
            gap: 2.133vw;
        }
        .faq_anchor_box{
            min-height: 29.867vw;
            padding: 6.133vw 2.133vw 3.2vw;
            font-size: 3.733vw;
            line-height: 5.6vw;
    
            &:after{
                width: 5.333vw;
                height: 5.333vw;
                margin-top: 4vw;
            }

            &:hover{
                color: var(--faq_color_text);
                border-color: var(--faq_color_line);
            }
        }
    }
    
    .faq_list_area{
        margin-top: 12.8vw;
    
        .faq_list_container{
            gap: 4.267vw;
            margin-top: 8.533vw;
        }
        .faq_question{
            gap: 1.6vw;
            padding: 3.467vw 4.267vw 2.4vw;
            font-size: 3.733vw;
            line-height: 5.333vw;
    
            &:after{
                width: 5.333vw;
                height: 5.333vw;
            }
        }
        .faq_question_label{
            font-size: 5.333vw;
            line-height: 8vw;
            align-self: start;
        }
        .faq_question_text{
            margin-top: 1.333vw;
            max-width: 66.4vw;
        }
        .faq_answer{
            padding: 5.6vw 4.267vw 4.533vw;

            p{
                padding-left: 6.933vw;
                text-indent: -6.933vw;
                font-size: 3.733vw;
                line-height: 6.4vw;

                span{
                    width: 5.6vw;
                    font-size: 5.333vw;
                    line-height: 8vw;
                }
            }
        }
    }
    
    .faq_related_area{
        margin-top: 17.067vw;
    
        .faq_related_container{
            grid-template-columns: 1fr;
            gap: 6.4vw;
            margin-top: 8.533vw;
        }
        .faq_related_card{
            aspect-ratio: 343 / 120;
        }
        .faq_related_title{
            left: 4.267vw;
            bottom: 1.6vw;
            max-width: calc(100% - 17.067vw);
            font-size: 4.267vw;
            line-height: 6.4vw;
        }
        .faq_related_arrow{
            right: 4.267vw;
            bottom: 3.2vw;
            width: 5.333vw;
            height: 5.333vw;
        }
    }
}

/* task91 -- the confirmed header (task53) is fixed, so a #faq_buy landing puts
   the section heading underneath it. The client's own link carries that hash.
   Uses the header-height variable when a page publishes one, and the measured
   PC height otherwise; see design-deviations C13 on not trusting a hardcoded
   header height forever. */
#faq_buy,
#faq_sale,
#faq_sumstock {
    scroll-margin-top: calc(var(--sumstock-header-h, 100px) + 24px);
}