
.main h3:not(.contact h3){
    font-size: 2rem;
    padding-bottom:1.75rem;
    margin-bottom:1.75rem;
    color:#FF77AD;
    border-bottom:solid #FF77AD 1px;
}



.main_fl{
    margin: 13rem auto 0 auto !important;
}

/*ページヘッダー*/
.sub_ttl{
    display: flex;
    flex-flow:row-reverse;
    position: absolute;
    top:21vw;
    right:8.75rem;
    z-index: 2;
    align-items: center;
}
.sub_ttl p{
    color:#FF77AD;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 1.75rem;
    background-color: white;
    padding:1.25rem;
}
.sub_ttl p:last-of-type{
    position: relative;
    top:6rem;
    margin-right:1.25rem;
}


.sudden{
    display: inline-block;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    text-align: center;
}
.sudden::before{
    content:"";
    display: block;
    width:0;
    height:100%;
    border-left:solid 1px black;
    position: absolute;
    top:0;
    left:-2rem;
    transform:rotate(-25deg);
}
.sudden::after{
    content:"";
    display: block;
    width:0;
    height:100%;
    border-right:solid 1px black;
    position: absolute;
    top:0;
    right:-2rem;
    transform: rotate(25deg);
}
.sudden span{
    font-size: 2.5rem;
    font-weight: 700;
    color:#ed005e;
    position: relative;
}
.sudden span::after{
    content:"";
    width:100%;
    height:1.5rem;
    background-color: yellow;
    position: absolute;
    bottom:-.5rem;
    left:0;
    z-index: -1;
}




/*メリット*/
.merit{
    margin-top:6rem;
}
.merit_content{
    width:100%;
}
.merit_content .merit_box{
    background-color: white;
    width:80%;
    padding:3rem 0 2rem 0;
    border-radius: 1.25rem;
    margin:4rem auto 0 auto;
}
.merit_box .merit_inner{
    width:90%;
    margin:0 auto;
}
.merit_box .merit_inner .merit_ttl{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.merit_box .merit_inner .merit_ttl img{
    width:10%;
    height:auto;
    margin-right:2rem;
}
.merit_box .merit_inner .merit_ttl h4{
    font-weight: 700;
    color:black;
    margin:3rem 0 4rem 0;
}



/*サービス内容*/
.service{
    margin-top:6rem;
}
.service h3{
    text-align: center;
}
.service_wrapper{
    width:100%;
    display: flex;
    justify-content: space-evenly;
    align-items:stretch;
    flex-wrap: wrap;
}
.service_content{
    width:calc((100% - 5%) / 3);
    background-color: rgba(255, 119, 173, 0.1);;
    border-radius: 1.5rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    margin-top:4rem;
    padding:2rem 0;
}
.service_content img{
    width:90%;
    height:200px;
    object-fit: cover;
    border-radius: 1.25rem;
}
.service_content .service_info{
    width:90%;
    margin:0 auto;
}
.service_content .service_info h4{
    background-color:#FF77AD;
    color:white;
    padding:.5rem 0;
    text-align: center;
    margin:2rem 0;
    border-radius: 99999px;
}



/*不要なもの*/
.unnecessary{
    margin-top:6rem;
}
.unnecessary_top{
    text-align: center;
}
.unnecessary_top p span:not(.ten){
    font-size: 2.5rem;
    color:#ed005e;
    font-weight: 700;
    background-color: yellow;
    display: inline-block;
    padding:.5rem 0;
}
.unnecessary_top p .ten{
    border-bottom:dashed 2px #555555;
    padding:.5rem 0;
    background-color: white;
}

.unnecessary .bubble{
    margin:4rem auto 0 auto;
    width: 80%;
    align-items: center;
}
.unnecessary .bubble p{
    padding: 2.25rem 4rem;
    border-radius: 2rem;
}
.unnecessary .bubble p::after{
    top: 50%;
    transform: translateY(-50%);
}
.unnecessary .bubble p span{
    font-weight: 700;
    font-size: 2rem;
}
.unnecessary .bubble p .pink{
    color:#ed005e;
}
.unnecessary .bubble p .gray{
    color:rgb(67, 67, 67);
}

.unnecessary_bottom{
    text-align: center;
    margin-top:4rem;
}


/*生前整理の料金*/
.price{
    margin-top:8rem;
}


/*作業風景*/
.work{
    margin-top:6rem;
    padding-bottom:4rem;
}
.work h3{
    background-color: #FF77AD;
    color:white !important;
    text-align: center;
    padding:2rem 0 !important;
    border-bottom:none !important;
}
.work .work_info{
    text-align: center;
    width:90%;
    margin:0 auto;
}

.bubble_wrapper{
    margin-top:2rem;
}
.bubble_wrapper .bubble{
    width:80%;
    margin:0 auto;
    align-items: center;
}
.bubble_wrapper .bubble p{
    border-radius: 2rem;
}
.bubble_wrapper .bubble p::after{
    top: 50%;
    transform: translateY(-50%);
}
.bubble.staff_bubble{
    flex-flow: row-reverse;
    margin-top:2rem;
}
.bubble.staff_bubble p{
    margin-left:0;
    margin-right:5rem;
}
.bubble.bubble.staff_bubble p::after{
    border-left:3rem solid rgba(255, 119, 173, .1);
    border-right:0;
    left:auto;
    right:-3rem;
}
.work_txt{
    width:90%;
    margin:4rem auto 0 auto;
    text-align: center;
}
.work_img{
    width:50%;
    height:300px;
    object-fit: cover;
    border-radius: 1.25rem;
    margin:2rem auto 0 auto;
}

.img_fl{
    display: flex;
    justify-content: space-between;
    position: relative;
}
.img_fl .work_img{
    width:calc((100% - 5%) / 2);
}
.img_fl .arrow{
    width:10rem;
    height:auto;
    position: absolute;
    bottom:2rem;
    left:50%;
    transform: translateX(-50%);
}


/*質問*/
.question{
    margin-top:6rem;
}
.question_wrapper{
    width:90%;
    margin:3rem auto 0 auto;
}

.question_item{
    background-color: white;
    padding:2.5rem 0 ;
    border-radius:1.25rem;
    box-shadow: 0 0 10px 0 rgba(255, 119, 173,.1);
    cursor: pointer;
}
.question_item:nth-of-type(n+2){
    margin-top:2rem;
}
.question_ttl{
    width:90%;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.question_ttl h4{
    color:#FF77AD;
    width:calc(100% - 2.5rem);
}
.q_a_btn{
    width:1.75rem;
    position: relative;
}
.q_a_btn span{
    display: inline-block;
    width:100%;
    height:.2rem;
    background-color: #FF77AD;
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%);
    transition: .5s;
}
.q_a_btn span:last-of-type{
    transform: translateX(-50%) rotate(90deg);
}
.q_a_btn span.open:last-of-type{
    transform: rotate(0deg);
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    opacity: 0;
}
.question_item .answer{
    width:90%;
    margin:1.5rem auto 0 auto;
    display: none;
}
.question_item.open .answer{
    display: block;
}



/*資格*/
.acquisition{
    margin-top:6rem;
}
.acquisition img{
    width:90%;
    margin:4rem auto 0 auto;
}
.acquisition .message{
    display: inline-block;
    padding:1.5rem 0;
    width:100%;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    margin-top:4rem;
    color:black;
    line-height:3.5rem;
}
.acquisition .message span{
    font-size: 2.5rem;
    color:#ed005e;
    position: relative;
}
.acquisition .message span::after{
    content:"";
    display: block;
    width:100%;
    height:1rem;
    background-color: yellow;
    position: absolute;
    bottom:0;
    left:0;
    z-index: -1;
}






/*----------------------------------------------------------------------
レスポンシブ
------------------------------------------------------------------------*/


/*------------------------------------------
1024px以下
--------------------------------------------*/
@media(max-width:1024px){
    /*作業風景*/
    .work_img{
        height:200px;
    }
}



/*------------------------------------------
768px以下
--------------------------------------------*/
@media(max-width:768px){
    .sub_ttl{
        top: 30vw;
        right: 5vw;
    }


    /*メリット*/
    .merit_content .merit_box{
        width:100%;
    }
    .merit_box .merit_inner .merit_ttl h4{
        margin:2rem 0 4rem 0;
    }


    /*不要なもの*/
    .unnecessary .bubble{
        width:100%;
    }
}


/*------------------------------------------
600px以下
--------------------------------------------*/
@media(max-width:600px){
    .main_fl{
        margin: 17rem auto 0 auto !important;
    }


    /*メリット*/
    .merit_box .merit_inner .merit_ttl img{
        width: 65px;
    }

    /*サービス内容*/
    .service_content{
        width: calc((100% - 5%) / 2);
        margin-top: 2rem;
    }


    /*作業風景*/
    .work .work_info{
        text-align: left;
    }
    .work_img{
        width:70%;
        height:250px;
    }
    .img_fl .work_img {
        height: 200px;
    }

    /*資格*/
    .acquisition img{
        width:100%;
    }

    /*メッセージ*/
    .acquisition .message{
        font-size: 1.75rem;
    }
}



/*------------------------------------------
425px以下
--------------------------------------------*/
@media(max-width:425px){
    .sub_ttl{
        top: 40vw;
        right: 3vw;
    }
    .sub_ttl p{
        font-size: 1.5rem;
        padding: 1rem;
    }
    .sub_ttl p:last-of-type{
        margin-right: .5rem;
    }


    /*急激に〜*/
    .sudden::before,
    .sudden::after{
        height:60%;
        top:auto;
        bottom:0;
    }


    /*メリット*/
    .merit_content .merit_box{
        margin: 2rem auto 0 auto;
    }


    /*サービス内容*/
    .service_wrapper{
        flex-flow: column;
    }
    .service_content {
        width: 100%;
    }


    /*不要なもの*/
    .unnecessary .bubble p{
        width:70%;
        padding: 1.25rem 5%;
    }
    .unnecessary .bubble p::after {
        top: -40px;
        transform: translateY(0);
    }
    .unnecessary .bubble img {
        margin: 0 auto 0 4rem;
    }


    /*作業事例*/
    .bubble_wrapper .bubble{
        width:100%;
    }
    .bubble_wrapper .bubble p::after{
        top: -40px;
        transform: translateY(0);
    }
    .bubble.staff_bubble{
        flex-flow: column;
    }
    .bubble.staff_bubble img {
        margin: 0 0 0 auto;
    }
    .bubble.staff_bubble p{
        margin-right:0;
    }
    .bubble.bubble.staff_bubble p::after{
        border-right: 1rem solid transparent;
        border-left: 1rem solid transparent;
        right: 4rem;
    }
    .work_img{
        width:100%;
        height: 55vw;
    }
    .img_fl{
        flex-flow: column;
    }
    .img_fl .work_img{
        width:100%;
        height: 55vw;
    }
    .img_fl .arrow{
        transform: rotate(90deg);
        left:0;
        bottom:45%;

    }

    /*質問*/
    .question_wrapper{
        width:100%;
    }

    /*メッセージ*/
    .acquisition .message{
        font-size: 1.5rem;
    }
    .acquisition .message span{
        font-size: 2rem;
    }
}



/*------------------------------------------
375px以下
--------------------------------------------*/
@media(max-width:375px){
    /*急激に〜*/
    .sudden::before{
        left:-4rem;
    }
    .sudden::after{
        right:-4rem;
    }

     /*急激に〜*/
     .sudden::before,
     .sudden::after{
         height:40%;
    }



    /*サービス内容*/
    .service_content img{
        height: 160px;
    }
}


/*------------------------------------------
320px以下
--------------------------------------------*/
@media(max-width:320px){
    /*急激に〜*/
    .sudden::before{
        left:-2rem;
    }
    .sudden::after{
        right:-2rem;
    }


    /*不要なもの*/
    .unnecessary_top p span:not(.ten){
        font-size: 2rem;
    }


    /*作業風景*/
    .work_txt{
        text-align: left;
    }
}