/*共通パーツ------------------------*/
.section_ttl{
    width:100%;
    text-align: center;
}
.section_ttl .en_ttl{
    font-family: "Cinzel", serif;
    font-weight: bold;
    color:#958370;
}
.section_ttl h3{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top:5px;
}
/*--------------------------------*/




.service_info{
    text-align: center;
    margin:5rem 0 3.75rem 0;
}
.service_info .container .service_copy{
    font-size: 1.25rem;
    font-weight: bold;
}
.service_info .container .service_txt{
    margin-top:2.5rem;
}



/*診療内容*/
.service{
    width:100vw;
    background-color: #958370;
    padding:5rem 0;
}
.service .container{
    width:900px;
}
.service .section_ttl{
    color:white;
}
.service .section_ttl .en_ttl{
    color:white;
}

.service_btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:2.5rem auto 3.75rem auto;
}
.service_btn .jump_btn{
    width:calc((100% - 3rem) / 4);
    background-color: white;
    border-radius: 10px;
}
.service_btn .jump_btn a{
    display: inline-block;
    width:100%;
    padding:1rem 0;
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: bold;
    color:#343434;
}
.service_btn .jump_btn a div{
    width:80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
}
.service_btn .jump_btn a div p{
    width:90%;
}
.service_btn .jump_btn a div .arrow{
    width:1rem;
    height:1rem;
    position: relative;
}
.service_btn .jump_btn a div .arrow::before,
.service_btn .jump_btn a div .arrow::after{
    content:"";
    display: block;
    width:10px;
    height:1.5px;
    background-color: #343434;
    position: absolute;
    top:50%;
}
.service_btn .jump_btn a div .arrow::before{
    transform: rotate(45deg) translateY(45%);
    left:5%
}
.service_btn .jump_btn a div .arrow::after{
    transform: rotate(-45deg) translateY(45%);
    right:0;
}

.service_container{
    margin:0 auto;
}
.service_container .service_content{
    width:100%;
    color:white;
    margin-bottom:3.75rem;
}
.service_container .service_content:last-of-type{
    margin-bottom:0;
}
.service_container .service_content h4{
    font-size: 1.25rem;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: bold;
    position: relative;
    padding-left:2rem;
    padding-bottom:1.25rem;
    border-bottom:solid 1px white;
}
.service_container .service_content h4::before{
    content:"◼︎";
    display: block;
    position: absolute;
    top:30%;
    left:0;
    transform: translateY(-50%);
}

.service_container .service_content .service_wrap{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top:1.25rem;
}
.service_container .service_content .service_wrap .service_img{
    width:380px;
    height:220px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(87, 69, 51,.2);
}
.service_container .service_content .service_wrap .service_img img{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius: 10px;
}
.service_container .service_content .service_wrap p{
    width:calc((100% - 380px) - 3%);
}



/*施術の流れ*/
#flow{
    padding:3.75rem 0 5rem 0;
    width:100vw;
    background-color: #FCF7F3;
}

#flow .flow_container{
    margin-top:2.5rem;
}
#flow .flow_container ul{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#flow .flow_container ul li{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: bold;
    color:#958370;
    list-style: none;
    width:calc((100% - 180px) / 4);
    background-color: white;
    border:solid 2px #958370;
    border-radius: 20px;
    text-align: center;
    padding:2.5rem 0;
    position: relative;
}
#flow .flow_container ul li:after{
    content:"▶︎";
    position: absolute;
    top:50%;
    right:-2.5rem;
    transform: translateY(-50%);
    font-size: 1.25rem;
}
#flow .flow_container ul li:last-of-type::after{
    display: none;
}
#flow .flow_container p{
    color:#958370;
    margin-top:1.875rem;
}




/*施術料金*/
#price{
    padding:3.75rem 0 5rem 0;
}
#price .service_table{
    width:900px;
    margin:2.5rem auto 0 auto;
    background-color: white;
    border:solid 1px #60554B;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(149, 131, 112,.2);
    padding:1.875rem 0;
}
#price .service_table table{
    width:750px;
    margin:0 auto;
    border-collapse: collapse;
}
#price .service_table table tr th,
#price .service_table table tr td{
    border-bottom:solid 1px #60554B;
    padding:1.25rem 0 ;
}
#price .service_table table tr:last-of-type th,
#price .service_table table tr:last-of-type td{
    border-bottom:none;
}
#price .service_table table tr th:not(#price .service_table table tr th:last-of-type),
#price .service_table table tr td:not(#price .service_table table tr td:last-of-type){
    border-right:solid 1px #60554B;
}

#price .service_table table tr th{
    font-family: "Zen Kaku Gothic New", sans-serif;
}
#price .service_table table tr td:nth-of-type(n+2){
    text-align: center;
}







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

@media(max-width:1024px){
    /*診療内容*/
    .service .container{
        width: clamp(700px, 80.08vw, 820px);
    }


    /*施術の流れ*/
    #flow .flow_container ul li{
        width: calc((100% - 130px) / 4);
        padding: 2rem 0;
    }
    #flow .flow_container ul li:after{
        right: -2rem;
    }


    /*施術料金*/
    #price .service_table{
        width:100%;
    }
    #price .service_table table{
        width:90%;
    }
}




@media(max-width:768px){
    /*診療内容*/
    .service .container{
        width: 90%;
    }
    .service_btn{
        flex-wrap: wrap;
    }
    .service_btn .jump_btn{
        width: calc((100% - 1rem) / 2);
    }
    .service_btn .jump_btn:nth-of-type(n+3){
        margin-top:1rem;
    }
    .service_container .service_content .service_wrap{
        flex-flow: column;
    }
    .service_container .service_content .service_wrap .service_img{
        width: 100%;
        height: 45vw;
    }
    .service_container .service_content .service_wrap p{
        width:100%;
        margin-top:1rem;
    }



    /*施術の流れ*/
    #flow .flow_container ul{
        flex-flow: column;
    }
    #flow .flow_container ul li{
        width:80%;
        margin-bottom:3.75rem;
    }
    #flow .flow_container ul li:last-of-type{
        margin-bottom:0;
    }
    #flow .flow_container ul li:after{
        content:"▼";
        top: auto;
        bottom: -3rem;
        left:50%;
        transform: translateY(0) translateX(-50%);
    }


    /*施術料金*/
    #price .service_table table tr th{
        display:none;
    }
    #price .service_table table tr{
        display: flex;
        flex-flow: column;
    }
    #price .service_table table tr td:first-of-type{
        width:100%;
    }
    #price .service_table table tr th:not(#price .service_table table tr th:last-of-type), 
    #price .service_table table tr td:not(#price .service_table table tr td:last-of-type){
        border: none;
    }
    #price .service_table table tr td:first-of-type{
        border-bottom:solid 1px #707070 !important;
    }
    #price .service_table table tr td:last-of-type{
        border-bottom:none;
    }

    #price .service_table table tr td:nth-of-type(2){
        padding:1rem 0 0 0 ;
    }
    #price .service_table table tr td:nth-of-type(2):before,
    #price .service_table table tr td:nth-of-type(3):before{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 14px;
        font-weight: bold;
        margin-right: 1rem;
    }
    #price .service_table table tr td:nth-of-type(2):before{
        content:"初回施術";
    }
    #price .service_table table tr td:nth-of-type(3):before{
        content:"2回目以降";
    }
    #price .service_table table tr td:nth-of-type(n+2){
        font-size: 1.25rem;
    }
    #price .service_table table tr:last-of-type td::before{
        display: none;
    }
    #price .service_table table tr:last-of-type td{
        font-size: 1rem;
    }

}




@media(max-width:425px){
    /*キャッチコピー*/
    .service_info{
        margin:2.5rem 0;
    }
    .service_info .container .service_copy{
        font-size: 1.125rem;
    }
    .service_info .container .service_copy,
    .service_info .container .service_txt{
        text-align: left;
    }
    .service_info .container .service_txt .br_1024,
    .service_info .container .service_txt .br_768,
    .service_info .container .service_txt br:nth-of-type(3){
        display: none;
    }
    .service_info .container .service_txt{
        margin-top:1.25rem;
    }


    /*診療内容*/
    .service .container{
        width: 95%;
    }
    .service_btn .jump_btn{
        width:100%;
    }
    .service_btn .jump_btn:nth-of-type(n+2){
        margin-top:1rem;
    }
    .service_container .service_content .service_wrap .service_img{
        height:53.88vw;
    }
    .service_container .service_content{
        margin-bottom:2.5rem;
    }


    /*施術の流れ*/
    #flow{
        padding:2.5rem 0;
    }
    #flow .flow_container ul li{
        width:100%;
        padding:1.25rem 0;
        border-radius: 15px;
    }
}