@charset "utf-8"; 
/* Worry */
.p-worry {
    background: var(--cl_bg_light);
}

.p-worry .c-sec-ttl {
    margin-bottom: 0;
}

.p-worry .c-sec-ttl::after {
    width: 33.4rem;
    height: 1.6rem;
    background: url(../img/top_worry_ttl-dec.webp) no-repeat center/contain;
}

.p-worry__img {
    position: relative;
}

.p-worry__img:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/top_worry_item-dec.webp) no-repeat center/contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

@media screen and (max-width: 750px) {
    .p-worry .l-inner {
        width: 100%;
    }

    .p-worry .c-sec-ttl::after {
        height: 2.4rem;
        width: 48rem;
    }

    .p-worry__img:after {
        background-image: url(../img/top_worry_item-dec_sp.webp);
    }
}

/* Solution */
/* Solution Section - V字マスク対応版 */
.p-solution {
    color: #fff;
    z-index: 0;
    position: relative;
    background: url(../img/top_solution-dec.webp) no-repeat center bottom/98rem,var(--grad_main);
    overflow: visible;
    margin-top: -11rem;
    padding-bottom: 20.5rem;
    font-weight: 500;
}

.p-solution::before {
    content: "";
    position: absolute;
    top: calc(-16rem + 0.5px );
    left: 0;
    width: 100%;
    height: 16rem;
    z-index: 1;
    background: var(--grad_main);
    -webkit-mask: url(../img/top_solution-bg-top.webp) no-repeat center top /100% 100%;
    mask: url(../img/top_solution-bg-top.webp) no-repeat center top /100% 100%;
}

.p-solution__ttl {
    font-size: 3rem;
    position: relative;
    width: fit-content;
    margin: 0 auto 4rem;
    padding: 0 0.5em;
}

.p-solution__ttl:after {
    content: '';
    display: block;
    width: 40.5rem;
    height: 0.8rem;
    background: url(../img/top_solution_ttl-dec.webp) no-repeat center/100%;
    margin: 0 -1em 0 auto;
}

.p-solution__ttl-dot span {
    position: relative;
}

.p-solution__ttl-dot span:before {
    content: '・';
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    line-height: 1;
    font-size: 2rem;
}

/* Solution Slider Adjustment */
.p-solution__visual {
    margin-top: 14rem;
    position: absolute;
    left: 0;
}

.p-solution__slider {
    width: 100%;
    padding: 0;
}

.p-solution__slide {
    height: 24rem;
    margin: 0 0.5rem;
}

.p-solution__slider img {
    width: 100%;
    height: 100%;
    background: #ededed;
    object-fit: cover;
}

@media screen and (max-width: 750px) {
    .p-solution {
        padding-bottom: 41.8rem;
        background: url(../img/top_solution-dec_sp.webp) no-repeat center bottom / 78rem, var(--grad_main);
    }

    .p-solution::before {
        height: 5.5rem;
        top: calc(-5.5rem + 0.5px);
    }

    .p-solution__ttl {
        font-size: 3.6rem;
    }
    
    .p-solution__desc {
        font-size: 2.4rem;
        line-height: 2.1;
        margin-bottom: 2em;
    }
    .p-solution__ttl:after {
        width: 48.8rem;
        height: 0.9rem;
        margin: 0 -1.4em 0 auto;
    }

    .p-solution__visual {
        bottom: -18.3rem;
    }

    .p-solution__slide {
        height: 36.6rem;
    }
}

/* Merit */
.p-merit {
    background: url(../img/top_merit-bg.webp) no-repeat center/cover;
    padding-top: 20rem;
}

.p-merit .c-sec-ttl {
    font-weight: 600;
    letter-spacing: 0.1rem;
}

.p-merit .c-sec-ttl::after {
    width: 34rem;
    height: 6rem;
    top: 57%;
    transform: translate(-50%,-50%) skew(10deg);
    background: url(../img/top_merit_ttl-dec.webp) no-repeat center/contain;
}

.p-merit .c-sec-ttl .en {
    transform: translateY(-50%) skew(10deg);
    opacity: 0.4;
}

.p-merit .c-sec-ttl .en.number {
    display: inline-block;
    font-size: 8.6rem;
    vertical-align: sub;
    line-height: 1;
    transform: translateY(0.1em);
    position: relative;
    opacity: 1;
    font-weight: inherit;
    letter-spacing: 0.2rem;
    color: inherit;
    z-index: 1;
}

.p-merit__item {
    background: #fff;
    border-radius: 2rem;
    padding: 4rem;
    position: relative;
    max-width: 90rem;
    margin: 0 auto 6rem;
}

.p-merit__item:after {
    content: '';
    display: block;
    width: calc(100% + 0.6rem);
    height: calc(100% + 0.6rem);
    background: var(--grad_main);
    border-image: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: calc(2rem + 0.3rem);
    z-index: -1;
    transform: translate(-50%,-50%);
    mask: url("../img/top_merit_item-bg.webp") no-repeat center top /100% 100%;
}

.p-merit__head {
    text-align: center;
    margin: 0 auto 4rem;
    position: relative;
    padding: 0 3em;
}

.p-merit__head .num {
    width: 10rem;
    position: absolute;
    left: 0.5rem;
    top: -7.5rem;
    z-index: 1;
}

.p-merit__head .ttl {
    font-size: 2rem;
    font-weight: bold;
    color: var(--cl_main);
    margin: 0 auto;
    padding: 0 0.5rem;
    display: inline;
    background: linear-gradient(transparent 50%, #f1f571 0%);
}

.p-merit__body.u-flex-wrap,ul.c-check-list.u-flex-wrap {
    justify-content: center;
}

.p-merit__body.u-flex-wrap > .u-flex_col2,.c-check-list.u-flex-wrap > .u-flex_col2 {
    max-width: 36.4rem;
}

.p-merit__img.u-flex_col2.p-merit__img--over {
    margin: 0 -3.3rem 0 0;
    max-width: 100%;
}

.c-catch-copy {
    font-size: 2.4rem;
    color: var(--cl_main);
    position: relative;
    width: fit-content;
    margin: 0 auto 3em;
    padding-bottom: 0.7rem;
    font-weight: 500;
}

.c-catch-copy:before {
    content: '';
    display: block;
    border-top: 6px double;
    width: 34rem;
    transform: skewX(50deg);
    position: absolute;
    bottom: 0;
    left: 0;
}

@media screen and (max-width: 750px) {
    .p-merit,.p-service {
        background-image: url(../img/top_merit-bg_sp.webp);
    }

    .p-merit {
        padding-top: 25rem;
    }

    .p-merit .c-sec-ttl {
        font-size: 4.3rem;
    }

    .p-merit .c-sec-ttl .en.number {
        font-size: 11.8rem;
    }

    .p-merit .c-sec-ttl::after {
        width: 52rem;
        height: 46rem;
        top: 53%;
    }

    .p-merit__item:after {
        width: calc(100% + 1rem);
        height: calc(100% + 1rem);
        mask-image: url("../img/top_merit_item-bg_sp.webp");
    }

    .p-merit__head {
        padding: 0;
    }

    .p-merit__head .num {
        width: 15rem;
        left: -2.7rem;
        top: -11.5rem;
    }

    .p-merit__head .ttl {
        font-size: 3.2rem;
    }

    .p-merit__body {
        gap: 0;
    }

    .p-merit__body.u-flex-wrap > .u-flex_col2, .c-check-list.u-flex-wrap > .u-flex_col2 {
        max-width: 100%;
    }

    .p-merit__item {
        padding: 5rem;
        margin: 0 auto 10rem;
        border-radius: 1.7rem;
    }

    .p-merit__img.u-flex_col2.p-merit__img--over {
        margin: 0 -3%;
        max-width: 106%;
        width: 106%;
    }

    .c-catch-copy {
        font-size: 3.6rem;
        line-height: 2;
        margin-bottom: 10rem;
    }

    .c-catch-copy:before {
        top: 6.6rem;
        margin: 0 auto;
        width: 51.2rem;
        left: 60%;
        transform: translateX(-50%) skewX(50deg);
        border-top: 6px double;
    }
}



/* cta */
.c-cta {
    margin: calc(-34.4rem/2) auto;
    position: relative;
    z-index: 1;
}

.c-cta-btn {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.c-cta-btn a {
    text-align: center;
    display: block;
    font-size: 1.8rem;
    background: #f07137;
    padding: 1em 3em;
    border-radius: 0.5em;
    color: #fff;
    font-weight: 500;
    max-width: 34rem;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
}

.c-cta-btn a:after {
    content: '';
    display: block;
    width: 1.8rem;
    height: 1rem;
    background: url(../img/btn-arrow.webp) no-repeat center/contain;
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width: 750px) {
    .c-cta {
        margin: -1.5rem auto 0;
        width: 100%;
    }

    .c-cta-btn {
        width: 100%;
    }

    .c-cta-btn a {
        max-width: 74.4%;
        font-size: 3rem;
    }

    .c-cta-btn a:after {
        width: 4rem;
        height: 2rem;
        right: 4rem;
    }
}

/* FAQ */
.p-faq {
    background: url(../img/top_faq-bg.webp) no-repeat center / cover, #fff;
}
