@charset "utf-8";

/* ========================
　　　ファミーユとは
======================== */

/* ページ内共通 */
.concept2025 p,
.concept2025 a{
    font-size: 4.27vw;
}
.concept2025 .mv_container{
    padding: 0 16px;
}

.concept2025 .new_style_h2{
    margin-bottom: 35px;
}

/* 青文字テキストリンク */
.concept2025 .linkBox{
    float: right;
    width: auto!important;
}
.concept2025 .linkBox a{
    font-size: 3.7vw;
}

/*  フォントサイズ */
/* h3 */
.fivepoint_title{
    font-size: 5.87vw;
}
.fivepoint_title span{
    font-size: 4.27vw;
}
.nps_enquete_title,
.nps h3{
    font-size: 4.87vw
}
/* h4 */
h4{
    font-size: 4.8vw;
}
.concept2025 .small_comment{
    font-size: 3.73vw;
}
.concept2025 sup{
    font-size: 0.6em;
}

/* wave */
/* 上部：白 */
.concept2025 .concept_link::before{
    content: "";
    position: absolute;
    left: 0;
    top: -35%;
    width: 100%;
    aspect-ratio: 375 / 120; 
    background-image: url(../img/white_wave_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
}
/* 上部：ピンク */
.concept2025 .nps::before,
.concept2025 .csr::before{
    content: "";
    position: absolute;
    left: 0;
    top: -1.3%;
    width: 100%;
    aspect-ratio: 375 / 120; 
    background-image: url(../img/pink_wave_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.concept2025 .csr::before{
    top: -6%;
}

/* 下部：ピンク */
.concept2025 .nps::after,
.concept2025 .csr::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.3%;
    width: 100%;
    aspect-ratio: 375 / 120; 
    background-image: url(../img/pink_wave_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(-1, -1);
}
.concept2025 .csr::after{
    bottom: -5%;
}

/* メインビジュアル */
.concept2025 .mv{
    background-color: #ffddf2;
}
.concept2025 .mv img{
    width: 100%;
    height: auto;
}
.concept2025 .mv_container{
    padding-left: 20px;
}
.concept2025 .mv_container_callout{
    font-size: 22px;
    color: #ef5c79;
    font-weight: bold;
    position: relative;
    width: fit-content;
    height: 50px;
}
.concept2025 .mv_container_callout::after{
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-image: url(../img/callout.png);
    background-size: contain; /* or cover */
    background-repeat: no-repeat;
    background-position: bottom;
}
.concept2025 .mv_container img{
    width: 50%;
    height: auto;
    display: block;
    margin: 16px 0 0 auto;
}

/* 目次 */
.concept2025 .concept_link{
    position: relative;
    padding: 10px 16px 0;
}
.concept2025 .concept_link li{
    position: relative;
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 1rem;
}
.concept2025 .concept_link li img{
    width: 6.8vw;
    height: auto;
}

/*  ファミーユの5つの安心 */
.concept2025 .fivepoint{
    position: relative;
    padding: 32px 16px 56px;
}
.concept2025 .fivepoint_title{
    display: flex;
    color: #cc3366;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 8px;
}
.concept2025 .number_label{
    width: 8.53vw;
    height: 8.53vw;
    background-color: #fee6e6;
    color: #cc3366;
    font-size: 7.2vw;
    background-color: #fee6e6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
}
.concept2025 .fivepoint_container{
    margin-bottom: 40px;
}
.concept2025 .fivepoint_container_content{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.concept2025 .fivepoint_container_content_hall{
    border: 2px solid #ffb6e3;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 10px;
    margin: 1rem 0;
}
.concept2025 .fivepoint_container_content_hall li{
    text-decoration: underline;
    margin-bottom: 0.8rem;
}
/* オリプラカルーセル内のfont-size:120%;設定の打ち消し */
.concept2025 .article_text{
    font-size: 100%!important;
}
.concept2025 .fivepoint_container5 .linkBox:first-of-type{
    display: none;
}
.concept2025 .image_arrow{
    width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.concept2025 .fivepoint_answer_container{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.concept2025 .fivepoint_answer .small_comment{
    color: #999;
    text-align: center;
}

/* 日本でいちばんNPSにこだわる葬儀社 */
.concept2025 .nps{
    background-color: #fff4fb;
    padding: 24px 0;
    position: relative;
}
/* 一番外側の余白 */
.concept2025 .nps_introduction,
.concept2025 .nps_enquete,
.concept2025 .nps_score,
.concept2025 .nps_answer{
    padding: 0 16px;
}
.concept2025 .nps_about{
    margin: 0 16px 40px 16px;
}
.concept2025 .nps h2 span{
    display: block;
}
.concept2025 .nps_introduction{
    margin-bottom: 40px;
}
.concept2025 .nps_enquete{
    margin-bottom: 40px;
}
.concept2025 .nps_enquete_title{
    text-align: center;
}
.concept2025 .nps_enquete_disc{
    margin: 16px 0 24px;
}
.concept2025 .nps_enquete_disc .small_comment{
    margin-top: 1em;
}
.concept2025 .nps_enquete_disc img{
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.concept2025 .nps_enquete_disc .sp:nth-of-type(2){
    width: 100%;
    height: auto;
}
.concept2025 .nps_enquete_disc_question{
    position: relative;
    font-size: 3.9vw;
    padding-left: 16px;
    margin-bottom: 1em;
}
.concept2025 .nps_enquete_disc_question::before{
    content: "";
    position: absolute;
    top: 0.2em;
    left: -8px;
    margin-left: 4px;
    width: 18px;
    height: 18px;
    background-image: url(../img/question.png);
    background-size: contain;
}
.concept2025 .nps_enquete_disc_chart{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.concept2025 .nps_slider{
    margin-bottom: 40px;
}
.concept2025 .review_link {
    display: none;
}
.concept2025 .nps_slider .linkBox{
    margin-top: -40px;
}

/* NPSとは？ */
.concept2025 .nps_about{
    background-color: #fff;
    padding: 32px 24px;
    border-radius: 10px;
}
.concept2025 .nps_about h3,
.concept2025 .nps_score h3{
    text-align: center;
    color: #cc3366;
}
.concept2025 .nps_about_introduction{
    margin-bottom: 32px;
}
.concept2025 .nps_about h4{
    text-align: center;
    margin-bottom: 16px;
}
.concept2025 .nps_about_calc_container{
    margin-bottom: 32px;
}
.concept2025 .nps_about_calc_container,
.concept2025 .nps_about_difference_container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.concept2025 .nps_about_calc_container img,
.concept2025 .nps_about_difference_container img{
    width: 95%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.concept2025 .nps_about_calc_container_disc p,
.concept2025 .nps_about_difference_container_disc p{
    font-size: 3.73vw;
}

/* NPSスコア */
.concept2025 .nps_score_image{
    width: 60%;
    height: auto;
    display: block;
    margin: 1em auto;
}
.concept2025 .nps_score_image .small_comment{
    text-align: right;
}
.concept2025 .nps_score_disc p{
    margin-bottom: 1em;
}
.concept2025 .smaller_comment{
    font-size: 3.2vw;
}

/* NPS結論 */
.concept2025 .nps_answer .image_arrow{
    margin: 24px auto;
}
.concept2025 .nps_answer_text img{
    width: 100%;
    height: auto;
    display: block;
    margin: 8px auto 32px;
}
.concept2025 .nps_answer_text_penguin{
    width: 40%!important;
    height: auto;
}

/* CTA */
.concept2025 .nps_cta{
    padding: 24px 0;
}

/* 貸切の家族式場 */
.concept2025 .search_hall{
    padding: 0 16px;
}
.concept2025 .search_hall .new_style_h2{
    margin-bottom: 16px;
}
.concept2025 .search_hall p{
    text-align: center;
    font-weight: bold;
    margin-bottom: 1em;
}
.concept2025 .search_hall span{
    font-size: 5.33vw;
    color: #d34376;
}
.concept2025 .search_hall_image{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}

/* 葬儀場を探す */
.concept2025 .sub_info {
    margin: 32px 0;
}
.concept2025 .section_search .top_tit span{
    font-size: 18px;
    color: #333;
} 
.concept2025 .section_search .title_area_sp span{
    color: #333;
}
.concept2025 .map_sp{
    width: 100%;
}

/* ファミーユの地域密着・社会貢献 */
.concept2025 .csr{
    padding: 24px 16px 40px;
    background-color: #fff4fb;
    position: relative;
}
.concept2025 .csr .new_style_h2 span{
    display: block;
}
.concept2025 .csr .new_style_h2 + p{
    margin-bottom: 1em;
}
.concept2025 .csr_container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px 8px;
}
.concept2025 .csr_container_box{
    background-color: #fff;
}
.concept2025 .csr_container_box p{
    font-size: 3.73vw;
    padding: 4px;
}
.concept2025 .concept_dosen{
    padding: 56px 16px 40px; 
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 1em;
}

/* PC版 */
@media screen and (min-width: 768px) {
    .concept2025 p,
    .concept2025 a {
        font-size: 16px;
    }
    .concept2025 h2{
        font-size: 28px;
    }
    .concept2025 h2 span{
        font-size: 24px;
    }
    /* h3 */
    .fivepoint_title,
    .nps_enquete_title,
    .nps h3{
        font-size: 22px;
    }
    .fivepoint_title span{
        font-size: 16px;
    }
    /* h4 */
    h4{
        font-size: 18px;
    }
    .concept2025 .small_comment{
        font-size: 14px;
    }
    .concept2025 .linkBox a{
        font-size: 16px;
    }
    /* wave */
    .concept2025 .concept_link::before{
        content: none;
    }
    .concept2025 .nps::before{
        top: -4%;
    }
    .concept2025 .nps::after{
        bottom: -4%;
    }
    .concept2025 .csr::before{
        top: -22%;
    }
    .concept2025 .csr::after{
        bottom: -20%;
        pointer-events: none;
    }

    /* 目次 */
    .concept2025 .concept_link{
        margin-top: 32px;
        display: flex;
        gap: 24px;
        justify-content: center;
    }
    .concept2025 .concept_link li img{
        width: 25px;
        height: auto;
    }
    /* ファミーユの5つの安心 */
    .concept2025 .fivepoint_container{
        margin-bottom: 64px;
    }
    .concept2025 .fivepoint_container_content{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        gap: 40px;
    }
    .concept2025 .fivepoint_title{
        justify-content: flex-start;
    }
    .concept2025 .number_label{
        width: 40px;
        height: 40px;
        font-size: 28px;
    }
    .concept2025 .fivepoint_container_content img{
        width: 400px;
        height: auto;
    }
    .concept2025 .fivepoint_container_content_hall{
        grid-template-columns: repeat(3,1fr);
        padding: 16px;
        margin-top: 24px;
    }
    .concept2025 .fivepoint_container1 .fivepoint_container_content_text p,
    .concept2025 .fivepoint_container2 .fivepoint_container_content_text p{
        line-height: 2;
    }
    .concept2025 .fivepoint_container2 .small_comment{
        margin-top: 1em;
        text-align: right;
    }
    .concept2025 .fivepoint_container4 .linkBox{
        margin-top: 1em;
    }
    .concept2025 .fivepoint_container5 .fivepoint_container_content{
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }
    .concept2025 .fivepoint_container5_link{
        margin-top: -48px;
        margin-bottom: 40px;
    }
    .concept2025 .fivepoint_answer{
        margin: 82px 0 56px;
    }
    .concept2025 .fivepoint_answer_container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
        margin: 32px 0 0;
    }
    .concept2025 .fivepoint_answer_container img{
        width: 450px;
        height: auto;
    }
    /* 日本でいちばんNPSにこだわる葬儀社 */
    .concept2025 .nps{
        padding: 24px;
    }
    .concept2025 .nps_enquete_title {
        margin: 0 auto;
    }
    .concept2025 .nps_enquete_disc{
        width: 80%;
        margin: 24px auto;
    }
    .concept2025 .nps_enquete_disc_question{
        font-size: 16px;
        display: block;
        width: fit-content;
        margin: 0 auto;
    }
    .concept2025 .nps_enquete_disc_chart{
        flex-direction: row;
        justify-content: center;
        margin: 32px auto; 
        gap: 32px;
    }
    .concept2025 .nps_enquete_disc_chart img{
        width: 300px;
        height: auto;
        margin: 0;
    }
    .concept2025 .nps_about{
        padding: 40px;
        position: relative;
        margin: 56px 16px;
    }
    .concept2025 .nps_about_calc_container,
    .concept2025 .nps_about_difference_container{
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
    .concept2025 .nps_about_calc_container img,
    .concept2025 .nps_about_difference_container img{
        width: 300px;
        height: auto;
    }
    .concept2025 .nps_about_calc_container_disc p,
    .concept2025 .nps_about_difference_container_disc p{
        font-size: 14px;
    }
    .concept2025 .nps_score_disc p{
        text-align: center;
    }
    .concept2025 .smaller_comment{
        font-size: 12px;
    }
    .concept2025 .nps_answer .image_arrow {
        margin: 32px auto;
    }
    .concept2025 .nps_answer_text img{
        width: 55%;
        height: auto;
        margin: 32px auto 16px;
    }
    .concept2025 .nps_answer_text_penguin{
        position: absolute;
        width: 130px!important;
        z-index: 10;
        bottom: -2%;
        right: 7%;
    }
    .concept2025 .nps_cta{
        padding: 88px 0 0;
    }
    .concept2025 .search_hall{
        padding-bottom: 90px;
    }
    .concept2025 .search_hall .new_style_h2{
        margin-bottom: 32px;
    }
    .concept2025 .search_hall span{
        font-size: 20px;
    }
    .concept2025 .search_hall_image{
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    .concept2025 .search_hall_image img,
    .concept2025 .csr_container_box img{
        width: 100%;
        height: auto;
        display: block;
    }
    .concept2025 .csr .new_style_h2 span{
        display: inline;
    }
    .concept2025 .csr .new_style_h2 + p{
        text-align: center;
    }
    .concept2025 .csr_container{
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
    .concept2025 .csr_container_box p{
        font-size: 14px;
    }
    .concept2025 .concept_dosen{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        padding-top: 116px;
    }
}