h1.pg-cleaning_headline{
    position: relative;
    aspect-ratio: 1366 / 439;
    margin-bottom: 1rem;
}

h1.pg-cleaning_headline img{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

h1.pg-cleaning_headline .visually-hidden{
    display: none;
}

section.pg-cleaning_intro {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #F5F9FD;
    padding: 2rem;
    margin-bottom: 3rem;
    width: 100%;

    p {
        max-width: 960px;

        color: #4984C2;
        font-size: clamp(1rem, 1.5vw, 1.2rem);
        line-height: 1.75rem;
    }
}

@media (max-width: 876px) {
    section.pg-cleaning_intro {
        padding: 1.5rem;
    }
}

@media (max-width: 438px) {
    section.pg-cleaning_intro {
        padding: 1rem;
    }
}

section.pg-cleaning_cta {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 4rem;

    a {
        display: block;

        background: #4984C2;
        border-radius: 1.25rem;
        margin: 0 auto;
        padding: 1.5rem;
        text-align: center;
        width: 90%;
        max-width: 420px;
        color: #fff;
        font-weight: 450;
        letter-spacing: normal;
        text-decoration: none;
        transition: all .25s linear;
        }
    a:hover {
        background: hsl(211, 50%, 62%);
    }
}

@media (max-width: 876px) {
    section.pg-cleaning_cta {
        margin-bottom: 3rem;
    }
}

@media (max-width: 438px) {
    section.pg-cleaning_cta {
        margin-bottom: 2rem;
    }
}

.pg-cleaning_contents {
    margin: 0 auto 3rem;
    max-width: 960px;
    width: 90%;

    h2 {
        display: block;
        margin-bottom: 2rem;

        font-family: 'Noto Serif JP', serif;
        font-size: clamp(2rem, 3vw, 3rem);

        font-weight: 100;
        text-align: center;
    }

    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;

        li {
            position: relative;
            width: calc((100% - 4rem) / 3);
            figure{
                margin: 0;
                img {
                    display: block;
                    margin-bottom: 1rem;
                    width: 100%;
                }
                figcaption {
                    display: flex;
                    flex-direction: column;
                    gap: .75rem;

                    h3 {
                        text-align: center;

                        color: #4984C2;
                        font-size: clamp(1rem, 1.25vw, 1.1rem);
                        font-weight: 650;
                        letter-spacing: normal;
                    }

                    p {
                        font-size: clamp(.9rem, 1.15vw, 1rem);
                        line-height: 1.75rem;
                        text-align: center;
                    }
                }
            }
            @media (max-width: 876px) {
                width: calc((100% - 2rem) / 2);
            }
            @media (max-width: 438px) {
                width: 100%;
            }
        }
        
    }

}

.pg-cleaning_price {
    border: #595757 1px solid;
    margin: 0 auto 5rem;
    padding: 10px;

    max-width: 960px;
    width: 90%;
    @media (max-width: 876px) {
        padding: 5px;
        margin: 0 auto 2rem;
    }

    .pg-cleaning_price_inner {
        border: #595757 1px solid;
        h2 {
            display: block;

            border-bottom: #595757 1px solid;
            margin-bottom: 2rem;
            padding: 1.5rem;

            font-family: 'Noto Serif JP', serif;
            font-size: clamp(1.35rem, 2.5vw, 2.5rem);
            font-weight: 100;
            line-height: 1em;
            text-align: center;
            @media (max-width: 876px) {
                margin-bottom: 0;
            }
        }

        div {
            padding: 1rem  1rem  3rem  1rem ;
            @media (max-width: 876px) {
                padding: 2rem;

            }

            p {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 1rem;

                color: #4984C2;
                font-size: clamp(.8rem, 2vw, 1.2rem);

                font-weight: 650;
                line-height: 1em;

                margin-bottom: 3rem;
                @media (max-width: 876px) {
                    margin-bottom: 2rem;
                    gap: .5rem;
                }
                @media (max-width: 438px) {
                    margin-bottom: 1rem;
                }
                span{
                    font-size: clamp(1.5rem, 3vw, 2rem);
                }
            }

            img {
                display: block;
                margin: 0 auto;
                width: 100%;
                max-width: 640px;
            }
        }

    }
}

.pg-cleaning_process {
    margin: 0 auto 4rem;
    h2 {
        display: block;
        margin-bottom: 2rem;
        
        font-family: 'Noto Serif JP', serif;
        font-size: clamp(1.35rem, 2.5vw, 2.5rem);
        font-weight: 100;
        line-height: 1em;
        text-align: center;
    }

    ol {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 640px;
        margin: 0 auto 3rem;
        gap: 1.5rem;
        padding: 0;
        li {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 1rem;

            border: 1px solid #4984C2;

            list-style: none;
            span {
                display: flex;
                justify-content: center;
                align-items: center;

                background-color: #4984C2;

                width: 3rem;
                aspect-ratio: 1 / 1;

                color: #fff;
                font-size: 1.25rem;
                font-weight: 600;
            }

            &::before{
                content: "";
                position: absolute;
                left: 50%;
                bottom: -1rem;

                display: block;
                background: #fff;
                border-bottom: 1px solid #4984C2;
                border-left: 1px solid #4984C2;

                width: 1rem;
                aspect-ratio: 1 / 1;

                transform: rotate(-45deg) translateY(-50%);
            }

            &:last-child::before {
                display: none;
            }

        }
    }
}

.pg-cleaning_process_require {
    border: 1px solid #4984C2;

    max-width: 960px;
    width: 90%;

    margin: 0 auto 4rem;
    padding: 2rem;
    @media (max-width: 876px) {
        margin: 0 auto 3rem;
    }
    @media (max-width: 438px) {
        margin: 0 auto 2rem;
    }

    h3 {
        margin-bottom: 1rem;

        color: #4984C2;
        font-size: clamp(1rem, 1.25vw, 1.1rem);
        font-weight: 650;
        letter-spacing: normal;
        line-height: 1em;
    }
    ul {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin-bottom: 1rem;
        li{
            font-size: clamp(.9rem, 1.15vw, 1rem);
            list-style: inside;
        }
    }
    p {
        font-size: clamp(.9rem, 1.15vw, 1rem);
        line-height: 1.5em;
    }
}

.pg-cleaning-notice {
    background: #F5F9FD;
    padding: 4rem 0 ;
    @media (max-width: 876px) {
        padding: 3rem 0 ;
    }
    @media (max-width: 438px) {
        padding: 2rem 0 ;
    }
    margin-bottom: 4rem;
    h2 {
        display: block;
        margin-bottom: 2rem;
        
        font-family: 'Noto Serif JP', serif;
        font-size: clamp(1.35rem, 2.5vw, 2.5rem);
        font-weight: 100;
        line-height: 1em;
        text-align: center;
    }
    ol {
        display: flex;
        flex-direction: column;
        width: 70%;
        max-width: 960px;
        margin: 0 auto;
        padding: 0;
        gap: .75rem;

        li {
            font-size: clamp(.9rem, 1.15vw, 1rem);
            font-weight: 400;
            line-height: 1.5em;
            ul {
                li{
                    list-style: inside;
                }
            }

        }

    }
}

.pg-cleanig_inquiry {
    margin-bottom: 3rem;
    h2 {
        display: block;
        margin-bottom: 2rem;
        
        font-family: 'Noto Serif JP', serif;
        font-size: clamp(1.35rem, 2.5vw, 2.5rem);
        font-weight: 100;
        line-height: 1em;
        text-align: center;
    }
    p {
        font-size: clamp(1rem, 1.3vw, 1.2rem);
        font-weight: 400;
        line-height: 1.5em;
        text-align: center;
    }
}