/* ------------------------------ mainView ------------------------------ */
.mainView{
    background-color: #f0f0fb;
}

.mainView__inner{
    padding-top: clamp(180px, calc(200 / 1280 * 100vw), 200px);
    padding-bottom: clamp(50px, calc(100 / 1280 * 100vw), 100px);
    padding-left: clamp(40px, calc(120 / 1440 * 100vw), 120px);
    align-items: center;
    background-image: none;
}
@media screen and (max-width: 1200px) {
    .mainView__inner{
        padding: calc(6rem + 2vw) 2rem;
    }
}

.mainView__title{
    color: var(--fontColor-base);
    font-weight: var(--fontWeight-bold);
    letter-spacing: .06em;
    font-size: clamp(2rem, calc(42 / 1280 * 100vw), 8.4rem);
    margin: 0;
}
@media screen and (max-width: 768px) {
    .mainView__title{
        font-size: 6vw;
        text-align: center;
    }
}
.mainView__wave {
    margin-top: -10.6vw;
}

@media screen and (max-width: 768px) {
    .mainView__right {
        width: 100%;
        margin-left: 0;
        margin-top: 3rem;
    }
}
/* ------------------------------ section ------------------------------ */
.section__title{
    color: var(--fontColor-base);
    font-size: 3rem;
    line-height: calc(46 / 30);
    margin-bottom: 4rem;
}
@media screen and (max-width: 768px) {
    .section__title{
        font-size: 2.4rem;
        margin-bottom: 3rem;
    }
    .section__title.-right{
        text-align: left;
    }
}

.section__title.-blog{
    font-family: var(--fontFamily-accent);
    font-size: 5rem;
}

.section__text.-sub{
    font-size: 1.6rem;
    line-height: 2;
}

/* ------------------------------ about ------------------------------ */
.about{
    background-color: #fbfaff;
}
.about__inner{
    padding-bottom: 6rem;
}
@media screen and (max-width: 768px) {
    .about__inner{
        padding-bottom: 4rem;
    }
}
.about .section__text{
    color: #2a2a2a;
    font-size: 1.6rem;
    line-height: 2;
}

/* ------------------------------ service ------------------------------ */
.service{
    background-color: #8da0e0;
}
.service__inner{
    align-items: center;
}

/* ------------------------------ features ------------------------------ */
.point{
    color: var(--color-accent);
}
.features{
    background-color: #f4f3ff;
}

.features__title{
    color: var(--color-accent);
}

.features__text{
    color: #2a2a2a;
    font-size: 1.6rem;
    line-height: 2;
}

.features__wave{
    margin-top: 0;
}
@media screen and (max-width: 768px) {
    .features__content,.features__content:nth-child(even){
        display: flex;
        flex-direction: column-reverse;
    }
}
/* ------------------------------ case ------------------------------ */
.case{
    background-color: #8da0e0;
}
.caseCard__link{
    box-shadow: 0 10px 30px #8da0e0;
}
.more{
    color: var(--color-accent);
}
.more::before{
    background-color: var(--color-accent);
}
.case__btnArea{
    max-width: 27rem;
    margin: 4rem auto 0;
}
.case__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: var(--fontWeight-bold);
    text-align: center;
    padding: 1.2rem 1.6rem;
    border-radius: 99px;
    border: 2px solid;
}
.case__btnArrow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
}
.case__btnText{
    flex: 1;
}
.case .swiper-slide-duplicate {
    opacity: .25 !important;
}
.case .swiper-slide-prev,.case .swiper-slide-next,.case .swiper-slide-active{
    opacity: 1 !important;
}
.case .swiper-button-prev,.case .swiper-button-next{
    width: 80px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case .swiper-pagination{
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}
@media screen and (max-width: 768px) {
    .case .swiper-slide-prev,.case .swiper-slide-next{
        opacity: .25 !important;
    }
    .case .swiper-button-prev,.case .swiper-button-next{
        width: 40px;
        height: 44px;
        top: auto;
        bottom: -8px;
    }
    .case .swiper{
        padding-bottom: 3rem;
    }
    .case .swiper-button-prev{
        left: calc(50% - 80px);
    }

    .case .swiper-button-next{
        right: calc(50% - 80px);
    }
}
.swiper-slide.caseCard{
    height: auto;
}