/* --------------------
  全体
-------------------- */
h1{
    margin-bottom: 3.75rem;
}
h2{
    margin-bottom: 5rem;
    line-height: 150%;
    letter-spacing: .15rem;
}
h2{
    .underline{
        background-image: linear-gradient(to right, var(--yellow), var(--yellow));
        background-repeat: no-repeat;
        background-size: 100% 30%;
        background-position: bottom;
    }
}
section{
    /* max-width: calc(1280px - 20.4375rem - .5rem); */
    position: relative;
}
section.about-service-common-section{
    padding:5rem .5rem 1.25rem;
}
section.section-last{
    padding:5rem .5rem 0;
}
@media (max-width: 768px) {
    h1{
        margin-bottom: 2rem;
    }
    h2{
        margin-bottom: 3rem;
    }
    h2.underline::after{
        bottom: 0rem;
        height: 0.8rem;
    }
    section.about-service-common-section{
        padding:0 1.3333rem 4.5rem;
    }
}

/* --------------------
  section_top
-------------------- */
#section_top{
    margin-bottom: 5rem;
    .text_area{
        width: 59.5rem;
        max-width: 952px;
        position: relative;
        .subtitle{
            font-size:1.5rem;
            line-height: 180%;
            font-weight: 600;
            margin-bottom:1.75rem;
            span{
                background-image: linear-gradient(to right, var(--yellow), var(--yellow));
                background-repeat: no-repeat;
                background-size: 100% 30%;
                background-position: bottom;
            }
        }
        > p{
            font-size:1.125rem;
            line-height: 180%;
        }
    }
    .text_area::before,
    .text_area::after{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 6.9375rem;
        height: 14.3125rem;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .text_area::before{
        left: 0;
        background-image: url(../img/about/top_left_small.png);
    }
    .text_area::after{
        right: 0;
        background-image: url(../img/about/top_right_small.png);
    }
}

@media (max-width: 768px) {
    #section_top{
        .text_area{
            width: 90%;
            margin: auto;
            .subtitle{
                font-size:1.3rem;
            }
            > p{
                font-size: calc(100vw * 15 / 390);
            }
        }
        .text_area::before,
        .text_area::after{
            content: none;
        }
    }
}
/* --------------------
  section_reason
-------------------- */
#section_reason{
    .reason_lists{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.25rem;
        width: 59.5rem;
        li{
            padding:2rem 2.25rem;
            box-shadow: 0px 4px 20px 3px rgba(0, 0, 0, 0.10);
            border-radius: .9375rem;
            .title_area{
                display:flex;
                align-items: center;
                gap:1.75rem;
                color:var(--orange);
                font-weight: 600;
                margin-bottom:1.6rem;
                .num{
                    font-size: 2.5rem;
                    line-height: 100%;
                    border-bottom: 3px solid var(--orange);
                    padding-bottom: .4rem;
                }
                .title{
                    font-size:1.5rem;
                    line-height: 150%;
                }
            }
            > p{
                font-size:.9375rem;
                line-height: 150%;
            }
        }
    }
}
@media (max-width: 768px) {
    #section_reason{
        .reason_lists{
            grid-template-columns: 1fr;
            gap: 1.125rem;
            width: 100%;
            li{
                padding: 1.3333rem;
                .title_area{
                    margin-bottom: 1.2rem;
                    .title{
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
}
/* --------------------
  section_point
-------------------- */
#section_point{
    .point_lists{
        width: 59.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap:2.875rem;
      }
      .point_list{
        display: flex;
        align-items: center;
        gap:6.8125rem;
        .point_textarea{
            flex:1;
            .label{
                display: inline-block;
                border-radius: 3.125rem;
                padding: .125rem 1rem;
                font-size: 1.125rem;
                font-weight: 700;
                line-height: 1.4rem;
                background-color: var(--yellow);
                margin-bottom: 1.6875rem;
            }
            .title{
                font-weight: 700;
                font-size: 1.5rem;
                line-height: 2.1875rem;
                margin-bottom: 1rem;
            }
            .text{
                font-size: .9375rem;
                line-height: 1.375rem;
            }
        }
        picture{
            width:23.5625rem;
            height: 17rem;
        }
      }
}
@media (max-width: 768px) {
    #section_point{
        .point_lists{
            width:100%;
        }
        .point_list{
            flex-direction: column-reverse;
            gap: 1.6rem;
            .point_textarea{
                .label{
                    margin-bottom: 1.2rem;
                }
                .title{
                    font-size: 1.2rem;
                    line-height: 1.6rem;
                    margin-bottom: 0.7rem;
                }
            }
        }
    }
}
/* --------------------
  section_flow
-------------------- */
#section_flow{
    .flow_lists{
        width: 59.5rem;
        margin: auto;
        position: relative;
        .flow_list{
            display: flex;
            position: relative;
            .label{
                width: 6.75rem;
                height: 6.75rem;
                border-radius: 100%;
                border: .125rem solid var(--orange);
                font-size: 1.1744rem;
                font-weight: 700;
                line-height: 2rem;
                text-align: center;
                color: var(--orange);
                background-color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex-shrink: 0;
                margin-right: 3.125rem;
                z-index: 3;
                .number{
                    font-size: 3.2575rem;
                    margin-left: .25rem;
                    margin-bottom: 1rem;
                    letter-spacing: .25rem;
                }
            }
            .title{
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: .875rem;
                line-height: 150%;
            }
            .text{
                font-size: .9375rem;
                font-weight: 700;
                line-height: 150%;
            }
        }
    }
    .flow_list:not(:nth-last-child(1)){
        margin-bottom: 4rem;
    }
    /* 最後の行は下に縦線がはみださないように */
    .flow_list:nth-last-child(1)::after{
        position: absolute;
        content: "";
        top: 0;
        left: 3.25rem;
        display: block;
        width: .1875rem;
        height: 100%;
        background-color: #fff;
        z-index: 2;
    }
    .flow_lists::after{
        position: absolute;
        content: "";
        top: 0;
        left: 3.375rem;
        display: block;
        width: .0625rem;
        height: 100%;
        background-color: #989898;
        z-index: 1;
    }
}
@media (max-width: 768px) {
    #section_flow{
        .flow_lists{
            width: 100%;
            .flow_list{
                .label{
                    width: 5.5rem;
                    height: 5.5rem;
                    font-size: 1.1744rem;
                    line-height: 1.8rem;
                    margin-right: 2rem;
                    .number{
                        font-size: 2.4rem;
                        margin-bottom: 0.8rem;
                    }
                }
                .title{
                    font-size: 1.3rem;
                    margin-bottom: .7rem;
                }
                .text{
                    font-weight: 500;
                }
            }
        }
        .flow_lists::after{
            left: 2.75rem;
        }
        .flow_list:not(:nth-last-child(1)){
            margin-bottom: 2.5rem;
        }
        .flow_list:nth-last-child(1)::after{
            left: 2.7rem;
        }
    }

}
/* --------------------
  section_price
-------------------- */
#section_price{
    .price_table{
        width: 59.5rem;
        margin: auto;
        table{
            border-collapse: collapse;
            thead{
                tr{
                    th{
                        line-height: 140%;
                        font-size: 1.25rem;
                        border:1px solid var(--lightgray);
                        background-color:var(--yellow);
                        vertical-align: middle;
                        height: 7.5rem;
                        .label{
                            font-size: 1rem;
                        }
                        small{
                            font-size: 1rem;
                        }
                        em.yen{
                            font-size: 1.5rem;
                        }
                    }
                }
            }
            tbody{
                tr{
                    background-color:var(--white);
                    th{
                        vertical-align: middle;
                        font-size:1rem;
                        line-height: 140%;
                        height: 3.75rem;
                        border-left:1px solid var(--lightgray);
                        width: 14.6875rem;
                    }
                    td{
                        vertical-align: middle;
                        text-align: center;
                        font-size: .875rem;
                        font-weight: 300;
                        line-height: 140%;
                        border-left:1px solid var(--lightgray);
                        width: 15rem;
                    }
                    td:last-of-type{
                        border-right:1px solid var(--lightgray);
                    }
                }

                tr:nth-of-type(even){
                    background-color:var(--lightgray02);
                }
                tr:last-of-type{
                    border-bottom:1px solid var(--lightgray);
                }
            }
        }
    }
    .price_table:not(:last-of-type){
        margin-bottom:5rem;
    }
}
@media (max-width: 768px) {
    #section_price{
        .price_table{
            width: 100%;
            table{
                thead{
                    tr{
                        th{
                            line-height: 130%;
                            font-size: .8rem;
                            height: auto;
                            padding:.5rem;
                            .label{
                                font-size: .8rem;
                            }
                            small{
                                font-size: .8rem;
                            }
                            em.yen{
                                font-size: 1.1rem;
                            }
                        }
                    }
                }
                tbody{
                    tr{
                        th{
                            font-size:.8rem;
                            line-height: 120%;
                            width: 25%;
                            padding:.5rem;
                        }
                        td{
                            font-size: .8rem;
                            width: 25%;
                        }
                    }
                }
            }
        }
        .price_table:not(:last-of-type){
            margin-bottom:2rem;
        }
    }
}