@charset "utf-8";

/* page-title */
.page-title {
    &.page-topimage {
        background-image: url(../img/topimage_sales01.jpg);
        @media (width <= 800px) {
            background-image: url(../img/topimage_sales01_sp.jpg);
        }
        .topimage-bottom {
            height: 16.6vw;
            background-image: url(../img/topimage_sales02.webp);
            @media (width <= 800px) {
                height: 33.3vw;
                background-image: url(../img/topimage_sales02_sp.webp);
            }
        }
    }
}


/* read-top */
.read-top {
    @media (width <= 800px) {
        margin-bottom: 40px;
    }
}

/* article */
.circlelist {
    li {
        .cl-img {
            &.cl01 {
                margin-bottom: 12px;
                @media (width <= 800px) {
                    width: 218px;
                }
            }
            &.cl02 {
                margin-bottom: 35px;
                @media (width <= 800px) {
                    width: 180px;
                    margin-bottom: 25px;
                }
            }
            &.cl03 {
                margin-bottom: 14px;
                @media (width <= 800px) {
                    width: 167px;
                    margin-bottom: 10px;
                }
            }
        }
        .cl-title {
            font-size: 30px;
            @media (width <= 800px) {
                font-size: 20px;
            }
            .jisseki {
                display: block;
                font-size: 16px;
                text-align: center;
                @media (width <= 800px) {
                    font-size: 14px;
                }
            }
        }
    }
}



/* service */
.service {
    margin-top: 19vw;
    padding-bottom: 20vw;
    background-color: var(--yellowgreen02);
    z-index: 0;
    @media (width <= 800px) {
        margin-top: 41vw;
        padding-bottom: 42.7vw;
    }
    .bg-service {
        position: absolute;
        left: 0;
        top: -13vw;
        width: 100%;
        z-index: -1;
        @media (width <= 800px) {
            top: -21vw;
        }
        img {
            width: 100%;
        }
    }
    h2 {
        margin-bottom: 45px;
        @media (width <= 800px) {
            margin-bottom: 25px;
        }
    }
    .arrow-double {
        margin-bottom: 80px;
        @media (width <= 800px) {
            margin-bottom: 20px;
        }
    }
}

.service-content {
    background-color: var(--white);
    border-radius: 100px;
    padding: 90px 0 0;
    margin-bottom: 100px;
    @media (width <= 800px) {
        border-radius: 30px;
        padding: 40px 0 0;
    }
    &:last-child {
        margin-bottom: 0;
    }
    .sticky {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0 64px;
        margin-bottom: 88px;
        @media (width <= 800px) {
            display: block;
            padding: 0 30px;
            margin-bottom: 105px;
        }
        &.reverse {
            flex-direction: row-reverse;
            .r-sticky {
                .service-img {
                    img {
                        border-radius: 0 30px 30px 0;
                    }
                }
            }
        }
        .l-sticky {
            width: 44.6%;
            @media (width <= 800px) {
                width: 100%;
            }
            h3 {
                display: inline-flex;
                font-size: 28px;
                margin-bottom: 40px;
                background-color: var(--yellow02);
                border-radius: 9999px;
                padding: 6px 22px;
                @media (width <= 800px) {
                    font-size: 18px;
                    padding: 6px 15px;
                    margin-bottom: 25px;
                }
                &::after {
                    position: absolute;
                    left: 48px;
                    top: 100%;
                    width: 22px;
                    height: 22px;
                    content: "";
                    background-color: var(--yellow02);
                    clip-path: polygon(100% 0, 0 0, 100% 100%);
                    @media (width <= 800px) {
                        left: 32px;
                        width: 14px;
                        height: 14px;
                    }
                }
            }
            p {
                margin-bottom: 50px;
                @media (width <= 800px) {
                    margin-bottom: 25px;
                }
                &.read-service {
                    color: var(--green01);
                    font-size: 36px;
                    font-weight: 700;
                    line-height: 1.5;
                    margin-bottom: 45px;
                    @media (width <= 800px) {
                        font-size: 20px;
                        margin-bottom: 25px;
                    }
                }
            }
            h4 {
                color: var(--green01);
                font-size: 20px;
                margin-bottom: 24px;
                @media (width <= 800px) {
                    font-size: 16px;
                    padding-left: 15px;
                    margin-bottom: 10px;
                }
                &::after {
                    position: absolute;
                    left: -25px;
                    top: 50%;
                    translate: 0 -50%;
                    width: 10px;
                    height: 12px;
                    content: "";
                    clip-path: polygon(0 0, 0% 100%, 100% 50%);
                    background-color: var(--yellowgreen01);
                    @media (width <= 800px) {
                        left: 0;
                        width: 7px;
                        height: 8px;
                    }
                }
            }
            ul {
                margin: 0;
                padding: 0;
                &::after {
                    display: inline-block;
                    color: var(--green01);
                    font-weight: 700;
                    line-height: 1.5;
                    background-color: var(--yellowgreen02);
                    border-radius: 20px;
                    content: "etc.";
                    padding: 6px 14px;
                    margin-bottom: 10px;                     
                    @media (width <= 800px) {
                        font-size: 14px;
                        margin-top: 10px;
                    }
                }
                li {
                    display: inline-block;
                    color: var(--green01);
                    font-weight: 700;
                    background-color: var(--yellowgreen02);
                    border-radius: 9999px;
                    padding: 6px 14px;
                    margin-bottom: 10px;
                    @media (width <= 800px) {
                        border-radius: 20px;
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
        .r-sticky {
            position: sticky;
            top: 200px;
            left: 0;
            width: 42.5%;
            height: 100%;
            @media (width <= 800px) {
                display: none;
            }
        }
        .service-img {
            width: 100%;
            @media (width <= 800px) {
                width: 81.3vw;
                margin: 0 0 25px -30px;
            }
            img {
                width: 100%;
                border-radius: 30px 0 0 30px;
                @media (width <= 800px) {
                    border-radius: 0 30px 30px 0;
                }
            }
        }
    }
}
.t-green {
    color: var(--green01);
}

.flow-content {
    position: relative;
    background-color: var(--yellowgreen03);
    border-radius: 0 0 100px 100px;
    padding: 46px 100px 60px;
    @media (width <= 800px) {
        width: 100%;
        border-radius: 0 0 30px 30px;
        padding: 46px 20px 40px;
    }
    .flow-img {
        position: absolute;
        &.fi01 {
            top: -87px;
            left: 16px;
            width: 226px;
            @media (width <= 800px) {
                top: -50px;
                left: 10px;
                width: 132px;
            }
        }
        &.fi02 {
            top: -102px;
            right: 16px;
            width: 281px;
            @media (width <= 800px) {
                top: -54px;
                right: 10px;
                width: 159px;
            }
        }
    }
    h3 {
        color: var(--green01);
        font-size: 28px;
        margin-bottom: 35px;
        @media (width <= 800px) {
            font-size: 18px;
            padding-left: 10px;
            margin-bottom: 20px;
        }
        &::before {
            position: absolute;
            left: -30px;
            top: 50%;
            translate: 0 -50%;
            width: 19px;
            height: 14px;
            content: "";
            background-image: url(../img/arrow_r_double.svg);
            background-repeat: no-repeat;
            background-position: left top;
            background-size: cover;
            @media (width <= 800px) {
                left: -8px;
                translate: 0 -45%;
                width: 16px;
                height: 12px;
            }
        }
    }
    .scroll-content {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        width: calc(100% + 200px);
        padding: 25px 100px 60px;
        margin: 0 0 65px -100px;
        @media (width <= 800px) {
            width: calc(100% + 40px);
            margin: 0 0 25px -20px;
            padding: 22px 20px 45px;
        }
        ol {
            display: flex;
            gap: 0 72px;
            margin: 0;
            padding: 0;
            counter-reset: my-counter;
            @media (width <= 800px) {
                gap: 0 62px;                
            }
            li {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                width: 170px;
                height: 176px;
                color: var(--green01);
                font-weight: 700;
                text-align: center;
                background-color: var(--white);
                border-radius: 20px;
                margin: 0;
                padding: 0;
                padding-bottom: 8px;
                @media (width <= 800px) {
                    width: 150px;
                    height: 155px;
                }
                &:last-child {
                    &::after {
                        display: none;
                    }
                }
                &::before {
                    position: absolute;
                    left: 50%;
                    top: 0;
                    translate: -50% -50%;
                    width: 48px;
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--white);
                    font-family: "Poppins", sans-serif;
                    font-size: 21px;
                    font-weight: 700;
                    line-height: 1;
                    letter-spacing: 0.05em;
                    background-color: var(--green01);
                    border-radius: 50%;
                    counter-increment: my-counter;
                    content: counter(my-counter, decimal-leading-zero);
                    @media (width <= 800px) {
                        width: 42px;
                        height: 42px;
                        font-size: 18px;
                    }       
                }
                &::after {
                    position: absolute;
                    top: 50%;
                    right: -44px;
                    translate: 0 -50%;
                    width: 18px;
                    height: 31px;
                    content: "";
                    background-image: url(../img/arrow_r_flow.svg);
                    background-repeat: no-repeat;
                    background-position: left top;
                    background-size: cover;
                    @media (width <= 800px) {
                        right: -38px;
                    }
                }
                .service-img {
                    display: block;
                    margin: 0 auto 5px;
                    @media (width <= 800px) {
                        width: 103px;
                    }
                }
                .service-text {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 48px;
                    @media (width <= 800px) {
                        min-height: 41px;
                    }
                }
            }
        }
    }
    .btn {
        margin: 0 auto;
    }
}