@charset "utf-8";

/** mv **/
.sec_lower_mv.problems {
    background: url("/problems/img/img_problems_mv.webp")no-repeat center left clamp(-17rem, -47.222rem + 62.96vw, 0rem), linear-gradient(180deg, rgba(202, 224, 232, 1) 0%, rgba(209, 225, 233, 1) 100%);
    /** 768- -17r-0 **/
}

/** mvここまで **/

/** お悩み選択 **/
.sec_problems {
    padding: clamp(4rem, 2.222rem + 3.7vw, 5rem) 0 clamp(5rem, 3.222rem + 3.7vw, 6rem);
    /** -767 4r-5r**/
    /** -767 5r-6r**/
}

/** お悩み選択ここまで **/

/***** 下層　*****/

/** fv **/

.sec_lower_detail_inner .fv_right.shiwa {
    background: url(/problems/img/img_problems_shiwa.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.shimi {
    background: url(/problems/img/img_problems_shimi.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.tarumi {
    background: url(/problems/img/img_problems_tarumi.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.keana {
    background: url(/problems/img/img_problems_keana.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.nikibi {
    background: url(/problems/img/img_problems_nikibi.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.akami {
    background: url(/problems/img/img_problems_akami.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.hadashitsu {
    background: url(/problems/img/img_problems_hadashitsu.webp) no-repeat left;
    background-size: cover;
}

.sec_lower_detail_inner .fv_right.memoto {
    background: url(/problems/img/img_problems_memoto.webp) no-repeat left;
    background-size: cover;
}


.sec_lower_detail .cause {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.sec_lower_detail .cause .headline {
    background-color: #b2a267;
    color: #fff;
    padding: 0 1em;
    line-height: 2.5;
    width: fit-content;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(0.875rem, 0.739rem + 0.54vw, 1rem);
    /** -767 14-16 **/
    margin-bottom: 1em;
    border-radius: 3px;
}

.cause p {
    margin-bottom: 1rem;
}

.cause p span {
    font-weight: 600;
}

.cause p:last-child {
    margin-bottom: 0;
}

/** fvここまで **/


/** 説明 **/

.explan_area .link_space {
    display: flex;
    justify-content: flex-end;
    border-bottom: solid 1px #ccc;
    padding-bottom: 2rem;
}

.explan_area .link_space+h4.lower_title_h4 {
    margin-top: 2rem;
}

.explan_area .link_space span {
    position: relative;
    color: #999;
}

.explan_area .link_space span::before {
    position: absolute;
    font-family: "Material Icons";
    content: '\e1c4';
    display: inline-block;
    transition: all .3s ease-in-out;
    left: -1.25rem;
}

.explan_area .link_space span a {
    position: relative;
    background-image: linear-gradient(90deg, #000, #000);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0 1px;
    padding-bottom: 4px;
    transition: background-size .3s;
    line-height: 1;
}

.explan_area .link_space span a::before {
    position: absolute;
    font-family: "Material Icons";
    content: '\e1c4';
    display: inline-block;
    transition: all .3s ease-in-out;
    left: -1.25rem;
    color: #000;
}

.explan_area .link_space span a:hover {
    background-size: 100% 1px;
}

.explan_area .link_space a:hover::before {
    color: #b2a267;
}

.sec_lower_explan .lower_link_ver h4.lower_title_h4 {
    font-size: clamp(0.969rem, 0.867rem + 0.41vw, 1.063rem);
    /** -767 15.5-17**/
}

.sec_lower_explan .lower_link_ver h4.lower_title_h4:first-child {
    margin-top: 1.25rem;
}


/** リンクエリア **/
.sec_factor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 0;
}

.sec_factor .factor_lead {
    font-family: "Zen Old Mincho", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
    font-size: 21px;
    line-height: 1.75;
    margin-bottom: 2.5em;
}

.factor_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4em 2em;
}

.factor_box .factor_card {
    width: calc(100% / 3 - 1.5em);
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
}

.factor_box .factor_card h2 {
    color: #fff;
    background-color: #b2a267;
    text-align: center;
    line-height: 1.5;
    padding: .5em 0;
    border-radius: 3px;
    width: 100%;
    font-size: 17px;
    margin-bottom: 1em;
}

.factor_box .factor_card p {
    line-height: 1.5;
    margin-bottom: 1.5em;
}

.factor_box .factor_card p img {
    margin-bottom: 1em;
    display: block;
}

.factor_box .factor_card ul {
    overflow-wrap: anywhere;
}

.factor_box .factor_card ul li {}

.factor_box .factor_card ul li span {
    background-color: #548299;
    border-radius: 0 20px 20px 0;
    padding: 0 1.5em 0 1em;
    display: block;
    width: fit-content;
    color: #fff;
    margin-bottom: .5em;
}

.factor_box .factor_card ul li a {
    display: flex;
}

.factor_box .factor_card ul li a::before {
    font-family: "Material Icons";
    content: '\e1c4';
    color: #999;
    font-size: 1em;
    margin-right: .5em;
    transition: all .3s ease-in-out;
}

.factor_box .factor_card ul li a:hover,
.factor_box .factor_card ul li a:hover::before {
    color: #548299;
}

/** リンクエリアここまで **/

/***** 下層ここまで　*****/


@media screen and (min-width: 1201px) {}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 920px) {}

@media screen and (max-width: 860px) {

    /**860 MV **/
    /**860 MVここまで **/
}



@media screen and (max-width: 767px) {

    /** 767 MV **/

    .sec_lower_mv.problems {
        background: url(/problems/img/img_problems_mv.webp) no-repeat center left clamp(-15rem, -19.36rem + 17.44vw, -11rem), linear-gradient(180deg, rgba(202, 224, 232, 1) 0%, rgba(209, 225, 233, 1) 100%);
        /** -767 -15r-11r**/
        background-size: cover;
        position: relative;
    }

    /** 767 MVここまで **/


    /** 767 お悩み選択 **/
    .sec_problems {
        padding: clamp(3rem, 1.91rem + 4.36vw, 4rem) 0 clamp(4rem, 2.91rem + 4.36vw, 5rem);
        /*-767 3r-4r*/
        /*-767 4r-5r*/
    }

    /** 767 お悩み選択ここまで **/


    /***** 767 下層　*****/

    /** 767 説明　**/
    /** 767 説明ここまで **/


    /** 767 リンクエリア **/
    .factor_box .factor_card {
        width: calc(100% / 2 - 1em);
    }

    .sec_factor {
        padding: clamp(3rem, 0.82rem + 8.72vw, 5rem) 0;
        /*-767 3r-5r*/
    }

    .sec_factor .factor_lead {
        font-size: clamp(1.125rem, 0.921rem + 0.82vw, 1.313rem);
        /*-767 18-21*/
        text-align: left;
        line-height: 1.5;
        margin-bottom: clamp(1.5rem, 0.41rem + 4.36vw, 2.5rem);
        /*-767 1.5r-2.5r*/
    }

    .factor_box {
        gap: clamp(3rem, 1.91rem + 4.36vw, 4rem) 2em;
        /*-767 3r-4r*/
    }

    .factor_box .factor_card h2 {
        font-size: clamp(0.938rem, 0.801rem + 0.54vw, 1.063rem);
        /*-767 15-17*/
    }

    .factor_box .factor_card ul li:nth-child(n+2) {
        margin-top: .75em;
    }

    /** 767 リンクエリアここまで **/

    /***** 767 下層ここまで　*****/
}

@media screen and (max-width: 599px) {
    /***** 599 下層ここまで　*****/
    /** 599 原因ここまで **/

    .factor_box .factor_card {
        width: 100%;
    }

    /** 599 原因ここまで **/


    /** 599 お悩み別 **/
    /** 599 お悩み別ここまで **/


    /***** 599 下層ここまで　*****/
}