.service-detail {

    scroll-margin-top: 80px;

    @media (width <=768px) {
        scroll-margin-top: 64px;
    }

    .layout {
        padding: 64px 0;
        display: grid;
        grid-template-columns: 1fr;
        flex-flow: column nowrap;
        row-gap: 30px;

        @media (width<=768px) {
            padding: 32px 0 64px;

        }

        .wrapper {

            @media (width<=768px) {
                border: none;
            }

            .box {
                padding: 36px 0;
                display: grid;
                grid-template-columns: 30% 1fr;
                justify-content: center;
                row-gap: 24px;

                @media (width<=768px) {
                    grid-template-columns: 1fr;

                }

                .image-outer {
                    text-align: center;
                    width: fit-content;
                    margin: 0 auto;
                    grid-row: span 3;

                    @media (width<=768px) {}

                    img {
                        max-height: 250px;

                        @media (width<=768px) {
                            max-height: 200px;
                        }
                    }
                }

                .inner1 {
                    padding: 0 16px;

                    @media (width<=768px) {
                        padding: 0;
                    }

                    p {
                        font-size: 16px;

                        .underline {
                            font-weight: bold;
                            text-decoration: underline;
                            text-decoration-color: #222;
                            /* アンダーラインの色 */
                            text-decoration-thickness: 2px;
                            /* アンダーラインの太さ */
                            text-underline-offset: 3px;
                            /* テキストからの距離 */
                        }
                    }
                }


                .inner2 {
                    padding: 0 16px;

                    @media (width<=768px) {
                        padding: 0;
                    }

                    h4 {
                        font-weight: bold;
                    }

                    p {
                        font-size: 16px;

                        .underline {
                            font-weight: bold;
                            text-decoration: underline;
                            text-decoration-color: #222;
                            /* アンダーラインの色 */
                            text-decoration-thickness: 2px;
                            /* アンダーラインの太さ */
                            text-underline-offset: 3px;
                            /* テキストからの距離 */
                        }
                    }

                    .under-p {
                        margin-bottom: 16px;
                    }
                }
            }

        }
    }

}

.price-lead {
    padding: 16px 0;
    margin-bottom: 64px;

    .detail-btn {
        background-color: #161616;
        color: #ffffff;
        padding: 16px;
        display: block;
        text-align: center;
        width: 60%;
        margin: 16px auto;
        border-radius: 10px;

        @media (width<=768px) {
            width: 100%;
        }

        &:hover {
            background-color: #4b4b4b;
        }

        .price-lead-h2 {
            padding: 1.6em;
            font-size: 20px;
            border-top: dashed 1px;
            border-bottom: dashed 1px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                content: "";
                background-color: #ffffff;
                width: 40px;
                height: 40px;
                border-radius: 999px;
                position: absolute;
                right: 0;
            }

            &::after {
                content: "＞";
                font-weight: bold;
                color: #161616;
                border-radius: 999px;
                position: absolute;
                right: 0;
                width: 38px
            }
        }

    }
}