@charset "utf-8";

/* main_cisual */
.main_visual{
    /* position: relative;
    top: 0; */
    height : 550px;
    /* background-color: #fff;
    background-image: url(../img/img_index_main.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; */
    /* color: var(--color_dark); */
    /* background: var(--color_gradient_top); */


/* background-color:hsla(192,100%,54%,1);
background-image:
radial-gradient(at 18% 3%, hsla(188,70%,78%,1) 0px, transparent 50%),
radial-gradient(at 75% 65%, hsla(87,100%,78%,1) 0px, transparent 50%),
radial-gradient(at 5% 88%, hsla(196,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 71% 36%, hsla(355,0%,100%,1) 0px, transparent 50%); */

/* background-color:hsla(192,100%,54%,1);
background-image:
radial-gradient(at 100% 73%, hsla(181,84%,65%,1) 0px, transparent 50%),
radial-gradient(at 18% 3%, hsla(188,70%,78%,1) 0px, transparent 50%),
radial-gradient(at 73% 62%, hsla(87,100%,78%,1) 0px, transparent 50%),
radial-gradient(at 5% 88%, hsla(196,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 71% 36%, hsla(355,0%,100%,1) 0px, transparent 50%); */

background-color:hsla(192,100%,54%,1);
background-image:
radial-gradient(at 100% 73%, hsla(181,84%,65%,1) 0px, transparent 50%),
radial-gradient(at 18% 3%, hsla(188,70%,78%,1) 0px, transparent 50%),
radial-gradient(at 73% 62%, hsla(64,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 5% 88%, hsla(196,100%,50%,1) 0px, transparent 50%),
radial-gradient(at 71% 36%, hsla(355,0%,100%,1) 0px, transparent 50%);
}

.main_visual_wrap{
    position: relative;
    top: 140px;
    left: 50px;
    /* padding: 0 8rem; */
    width: 80vw;
    margin: 0 auto;
}

.main_visual_title_catch_wrap{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* gap: var(--size_gap); */
}
.main_visual_title_catch{
    font-size: 3.6rem;
    font-style: normal;
    /* color: var(--color_dark); */
    color: #fff;
    /* font-weight: 600; */
    letter-spacing: .03em;
    font-family: "Outfit", sans-serif;
}
.main_visual_title_catch img{
    width: 39vw;
    max-width: 600px;
    margin-bottom: 20px;
}
.main_visual_title_catch_wrap_2{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.main_visual_title_catch_line{
    background-color: #000;
    height: 0.5px;
    width: calc(100% - 165px);
}
.main_visual_title_catch_rubi{
    width: 165px;
    font-size:.9rem;
    font-weight: 400;
    text-align: right;
    color: #000;
}

.main_visual_title_catch_text{
    padding-bottom: 20px;
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.5;
    white-space: nowrap;
}
.main_visual_title_catch_text span{
    font-size: 3.4rem;
    font-weight: 300;
}

.main_visual_title_catch_wrap_right{
    display: flex;
    gap: var(--size_gap);
    margin-left: -250px;
    /* margin-top: 60px; */
}
.main_visual_title_catch_wrap_right img{
    width: 1000px;
    height: auto;
    position: relative;
    top: 80px;
}

@media screen and (max-width: 768px)  {
    .main_visual{
        height: 630px;
    }
    .main_visual_title_catch_wrap{
        top: 500px;
        padding-top: 15px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .main_visual_title_catch{
        margin-bottom: var(--size_gap);
        text-align: center;
        font-size: 3rem;
    }

    .main_visual_title_catch img {
        width: 80vw;
        /* max-width: 600px; */
        /* margin-bottom: 20px; */
    }
    .main_visual_wrap{
        left: 0;
    }
    .main_visual_title_catch_wrap_2{
        width: 80vw;
        margin: 0 auto;
        margin-bottom: 60px;
    }
    .main_visual_title_catch_text{
        font-size: 1.8rem;
    }
    .main_visual_title_catch_text span{
        font-size: 2.8rem;
    }
    .main_visual_title_catch_wrap_right{
        margin-left:0;
    }
    .main_visual_title_catch_wrap_right img{
        width: 190% !important;
        top: 0;
        left: -145px;
    }
}
@media screen and (max-width: 1200px)  {
    .main_visual_title_catch_wrap_right img{
        width:800px
    }
}


section{
    width: 100%;
}


/* News */
.news{
    padding: var(--size_gap_section) 0;
    background-color: #fff;
}
.news > div{
    display: flex;
}
.news > div > div:nth-child(1){
    width: 240px;
}
.news__list{
    width: 100%;
    border-top: solid 2px var(--color_gray_pale);
}
.news__list > li{
    border-bottom: solid 2px var(--color_gray_pale);
}
.news__list > li > a{
    display: flex;
    padding: var(--size_gap) var(--size_gap_half);
    transition: all .2s;
}
.news__list > li > a:hover{
    background-color: var(--color_gray_pale);
    transition: all .2s;
}
.news__list .date{
    padding-right: var(--size_gap);
    color: var(--color_gray);
}

@media screen and (max-width: 768px) {
    .news > div{
        flex-direction: column;
        gap: var(--size_gap);
        margin-top: var(--size_gap);
    }
}


/* arrow */
.arrow{
    padding: 150px 0 80px 0;
    background-color: #fff;
    text-align: center;
}


/* catch */
.catch{
    padding: 0 0 var(--size_gap_section) 0;
    background-color: #fff;
}
.catch > div{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--size_gap_half);
}
.catch h2{
    margin-bottom: var(--size_gap_half);
}
.catch_head_deco{
    background: var(--color_gradient);
    padding: 5px 10px;
    color: #fff;
    font-size: 1.8rem;
    width: fit-content;
    margin-bottom: var(--size_gap_half);
    margin-right: 15px;
}

.catch_text{
    line-height: 1.8;
}

.catch__list{
    display: flex;
    align-items: center;
    margin-bottom: var(--size_gap_section);
    gap: var(--size_gap);
}
.catch__list_item_left{
    width: 55%;
}
.catch__list_item_right{
    width: 45%;
}
.catch__list img{
    width: 100%;
}
.catch_img{
    width: 800px;
}
@media screen and (max-width: 768px) {
    .catch > div{
        flex-direction: column;
        gap: var(--size_gap_double);
    }
    .catch img{
        width: 100%;
    }
    .catch__list{
        flex-direction: column;
        gap: var(--size_gap_double);
        margin-bottom: var(--size_gap_half);
    }
    .catch__list div{
        width: 100%;
    }
}


/* point */
.point{
    padding: var(--size_gap_section) 0 148px 0;
    background: var(--color_gradient);

    /* clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0 100%); */

    position: relative;

    &::before {
    content: "";
    width: 100%;
    height: 60px;
    background-color: var(--color_gray_pale);
    position: absolute;
    bottom: 0px;
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%);
    }

    &::after {
    content: "";
    width: 100%;
    height: 60px;
    background-color: var(--color_gray_pale);
    position: absolute;
    bottom: 0px;
    clip-path: polygon(50% 100%, 100% 0%, 100% 100%);
    }
}
.point h2{
    color: #fff ;
    font-size: 1.4rem;
    margin: 0 auto;
    font-weight: 400;
    margin-bottom: var(--size_gap);
}
.point h2 span{
    font-size: 1.9rem;
    font-weight: 600;
}
.point__list{
    display: flex;
    gap: var(--size_gap);
    justify-content: center;
    flex-direction: column;
}
.point__list div{
    /* background-color: var(--color_yellow); */
    background-color: #fff;
    padding: var(--size_gap_half);
    text-align: center;
    font-size: 1.4rem;
}


/* comparison */
.comparison{
    padding: var(--size_gap_section) 0 108px 0;
    background-color: var(--color_gray_pale);
}
.comparison h2{
    margin: 0 auto;
    position: relative;

    /* &:before{
        content: "";
        background-color: var(--color_yellow);
        width: 790px;
        height: 3px;
        position: absolute;
        left: 0;
        top: 50px;
    } */
}
.comparison__wrap{
    background-color: #fff;
    border-radius: var(--size_radius_big);
    padding: var(--size_gap);
    text-align: center;
    /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
}
.comparison__wrap img{
    margin-top: var(--size_gap_half);
    max-width: 1000px;
    width: 100%;
}


/* decision */
.decision{
    padding: 188px 0 var(--size_gap_section) 0;
    background-color: #fff;

background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 24% 99%, hsla(195,100%,81%,0.47) 0px, transparent 50%),
radial-gradient(at 100% 96%, hsla(189,100%,56%,0.48) 0px, transparent 50%),
radial-gradient(at 100% 64%, hsla(221,100%,70%,0.49) 0px, transparent 50%);

position: relative;

    &::before{
        content: "";
        position: absolute;
        height: 60px;
        width: 100%;
        clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
        background-color: var(--color_gray_pale);
        left: 0;
        top: 0;
    }

}
.decision h2{
    background: var(--color_gradient);
    padding: 4px 10px;
    color: #fff;
    box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
    display: inline;
    line-height: 2.1;
    margin-bottom: var(--size_gap_double);
    font-size: 2rem;
}
.decision__list{
    display: flex;
    gap: var(--size_gap);
    justify-content: center;
    gap: var(--size_gap);
}
.decision__list div img{
    width: 400px;
}
.decision__list_left{
    width: 50%;
}
.decision__list_right{
    width: 50%;
    text-align: center;
}
.decision__list_2{
    margin-top: var(--size_gap);
}
.decision__list_2 li{
    padding: 15px 0;
}
.decision__list_2__head{
    color: var(--color_main);
    font-size: 1.5rem;
    font-weight: 800;
}
.decision__list_2__text{
    margin: var(--size_gap_half) 0 0 0;
    /* font-size: 1.1rem; */
}
.decision__list_2__text span{
    font-size: 3rem;
    color: var(--color_main);
}
.decision__list_2__text span span{
    font-size: 2rem;
}
.decision__list_2__text.first{
    margin-top: -10px;
}
.decision__text{
    line-height: 1.8;
    margin-top: 40px;
    padding: 25px 30px;
    background-color: #ffffff90;
    width: fit-content;
    color: var(--color_main);
    border-radius: var(--size_radius);
    /* box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px; */
}

@media screen and (max-width: 768px) {
    .decision__list{
        flex-direction: column;
        gap: var(--size_gap_double);
    }
    .decision__list div{
        width: 100%;
    }
    .decision__list_2__text.first {
    margin-top: 20px;
    }
    .decision__list div img{
        width: 100%;
    }
}




/* feature */
.feature{
    padding: var(--size_gap_section) 0;
    background-color: #fff;
}
.feature h2{
    margin-bottom: var(--size_gap_double);
}
.feature h3{
    margin-bottom: var(--size_gap);
    border-left: solid 5px var(--color_main);
    padding-left: var(--size_gap_half);
    /* color: var(--color_main); */
}
.feature h4{
    margin-bottom: var(--size_gap_half);
}
.feature .marker{
    background: linear-gradient(to right, #afdbfa 0%, #cfecff 100%);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
    width: fit-content;
}
.feature__line{
    border-bottom: dotted 1px #aaa;
    width: 100%;
    margin: var(--size_gap) 0;
}
.feature__img_1{
    width: 900px;
    margin: 0 auto;
    display: block;
}
.feature__img_2{
    width: 750px;
    margin: 0 auto;
}
.feature__text{
    margin: var(--size_gap) 0;
}
.feature_wrap{
    width: fit-content;
    margin: 0 auto;
}
.h3_margin{
    margin-top: var(--size_gap_double);
}
.feature__list{
    display: flex;
    gap: var(--size_gap_double);
    margin-bottom: var(--size_gap_double);
}
.feature__list_item{
    width: 50%;
}
.feature__list_head{
    font-size: 1.6rem;
    margin-bottom: var(--size_gap_half);
    color: var(--color_main);
    border-bottom: dotted 3px var(--color_main);
    width: fit-content;
    padding-bottom: 5px;
}
.feature__list_sub{
    font-size: 1.4rem;
    margin-bottom: var(--size_gap_half);
}
.feature__list_text{
    line-height: 1.5;
    margin-bottom: var(--size_gap_half);
    font-size: .9rem;
}
.feature__list_img{
    width: 100%;
}
.feature__list_img.border{
    border: solid 1px var(--color_gray);
}
.feature__list_img.margintop{
    margin-top: 90px;
}

@media screen and (max-width: 768px) {
    .feature__img_1{
        width: 100%;
    }
    .feature__list{
        flex-direction: column;
        gap: var(--size_gap_double);
    }
    .feature__list div{
        width: 100%;
    }
    .feature__list_img.margintop{
    margin-top: 0;
}

}



/* usecase */
.usecase{
    padding: var(--size_gap_section) 0;
    background-color: var(--color_gray_pale);
}
.usecase h2{
    margin-bottom: var(--size_gap_double);
}
.usecase__list_1{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--size_gap);
}
.usecase__list_1 img{
    width: 150px;
}
.usecase__list_1 p{
    line-height: 1.8;
}
.usecase h3{
    margin-bottom: var(--size_gap);
    border-left: solid 5px var(--color_main);
    padding-left: var(--size_gap_half);
    /* color: var(--color_main); */
}
.usecase__list_2{
    display: flex;
    gap: var(--size_gap);
    margin-bottom: var(--size_gap);
}
.usecase__list_2_item{
    width: calc(100% / 3);
    background-color:#fff;
    border-radius: var(--size_radius);
    padding: var(--size_gap_half);
    display: flex;
    gap: var(--size_gap_half);
    align-items: center;
}
.usecase__list_2_item_left{
    width: 80px;
}
.usecase__list_2_item_right{
    width: calc(100% - 80px);
}
.usecase__list_2_item_right_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--size_gap_half);
}
.usecase__list_2_item_right_head{
    color: var(--color_main);
    font-size: 1.2rem;
}
.usecase__list_2_item_right_tag{
    background-color: var(--color_main);
    border-radius: 20px;
    color: #fff;
    padding: 5px 10px;
    font-size: .9rem;
    letter-spacing: 0.05rem;
    white-space: nowrap;
}
.usecase__list_2_item_right_text{
    font-size: .8rem;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .usecase__list_1{
        flex-direction: column;
        gap: var(--size_gap_half);
        align-items: center;
    }
    .usecase__list_2{
        flex-direction: column;
        gap: var(--size_gap_half);
        margin-bottom: var(--size_gap_half);
    }
    .usecase__list_2_item{
        width: 100%;
    }
}




/* inquiry */
.main > section.inquiry{
    padding: 80px 0;
    width: 100%;
    background-color: var(--color_main);
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    /* text-align: center; */
    /* background-image: url(../img/img_index_inqury.png);
    background-position: center;
    background-size: cover; */
}
.main > section.inquiry > div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--size_gap_double);
}
.inquiry_head{
    font-size: 1.7rem;
    color: #fff;
    font-weight: 800;
    padding-bottom: var(--size_gap_half);
    position: relative;
    left: -4px;
}
.inquiry_head > span{
    width: fit-content;
    font-size: 1rem;
    font-weight: 300;
    margin-left: 3px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    display: block;
    color: var(--color_yellow);
    font-family: "Outfit", sans-serif;
    /* opacity: .5; */
    /* margin-top: -10px; */
    /* margin-left: var(--size_gap_half); */
}
.inquiry_text{
    color: #fff;
    padding-bottom: var(--size_gap_half);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
}
.inquiry_text > span{
    font-size: .9rem;
}
.inquiry_text_small{
    color: #fff;
    font-size: .8rem;
    font-weight: 400;
}

.inquiry_tel{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 500;
    padding-bottom: var(--size_gap);
    color: #fff;
}
.inquiry_tel > img {
    width: 28px;
    height: auto;
    margin-right: 10px;
}
.inquiry .layout__btn{
    background-color: #fff;
    border: solid 2px #fff;
    color: var(--color_main);
    font-weight: 500;
    transition: all .2s;
    /* margin: 0 auto; */
    width: 300px;
}
.inquiry .layout__btn:hover{
    background:var(--color_main);
    /* color: #fff; */
    /* color: var(--color_yellow); */
    transition: all .2s;
    border-color: var(--color_yellow);
    background:var(--color_yellow);

}
@media screen and (max-width: 1024px) {
    .main > section.inquiry > div{
        flex-direction: column;
    }
    .inquiry .layout__btn{
        width: 80vw;
        font-size: 1rem;
    }
    .dli-caret-circle-fill-right{
        display: none;
    }
}