﻿:root{
    --line: 100px;
    --pagetop: 92px;
}

/* タブレット */
@media screen and (max-width: 768px){
    :root{
    --line: 190px;
    --pagetop: 50px;
    }
}

@media screen and (max-width: 667px){
    :root{
    --line: calc(100% - 50px);
    --pagetop: 50px;
    
    }
}

/*■■ お問い合わせbtn ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.con_line_box{
    margin-bottom: 30px;
}
.contact_line{
    max-width: 500px;
    margin: 0 auto;
}



.f_contact_btn{
    width: 320px;
    margin: 10px;
}
/* タブレット */
@media screen and (max-width: 768px){
    .contact_tel a{}
    .contact_tel{margin-bottom: 20px;}
}

/* スマホ */
@media screen and (max-width: 667px){
    .f_contact_btn{width: auto;}
    .contact_tel{width: 90%;}
}

/*■■ btn ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#bottom_line{
    width: var(--line);
    right: var(--pagetop);
    bottom: 0px;
    z-index: 4;
}
#bottom_line .small{
    font-size: 1rem;
}
#bottom_line a{
    color: #fff;
    font-size: 24px;
    padding: 22px 0;
    line-height: 1.2;
    background: linear-gradient(45deg, #158b40, #36bd79);
}


#bottom_tel{
    right: calc(var(--pagetop) + var(--line));
    height: 92px;
    box-sizing: border-box;
    padding: 19px 10px;
}
#bottom_tel a{
    height: auto;
    padding: 10px;
}
#bottom_tel a i{
    display: none;
}
/* タブレット */
@media screen and (max-width: 768px){
    #bottom_tel{
        height: 50px;
        padding: 0px 10px;
    }
    #bottom_tel .text{
        line-height: 1.2;
        font-size: 16px;
    }
    #bottom_line a{padding: 11px 0;}
    #bottom_line .small{display: inline !important;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #bottom_line a{padding: 10.5px 0;}
    #bottom_line{
        bottom: 0;
        right: var(--pagetop);
    }
    #bottom_tel{
        padding: 10px;
        bottom: var(--pagetop);
        height: 70px;
        width: 100%;
        right: 0;
    }
    #bottom_tel a{
        padding: 10px 5px;
        width: 50%;
        box-sizing: border-box;
        line-height: 1.2;
        letter-spacing: 0.03em;
        font-size: 19px;
    }
    #bottom_tel a i{
        display: inline;
    }
    #bottom_tel .text{display: none;}
    .copy{padding-bottom: 100px;}
    .more{margin: 50px 0 80px;}
}


/*■■ main ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.catch.slide_ver{
    max-width: 930px;
    width: 55%;
}
#main_img::after{
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, transparent 30%, #fff);
    position: absolute;
    opacity: 1;
    z-index: 1;
}

/* タブレット */
@media screen and (max-width: 768px){
    #main_img{height: 55vh!important;}
    .catch.slide_ver{
        width: 60%;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{
        height: 100vh!important;
    }
    .catch.slide_ver{
        width: 100%;
        max-width: 100%;
        padding-right: 10px;
        padding-bottom: 80px;
    }
}

/*■■ top, all ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.logo1{max-width: 180px;}

.f_contact_box .pagetitle_s{
    opacity: 0.7;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .logo1{max-width: 110px;}
    
    #sp_nav .sp_nav_inner .l-menu ul li{margin: 0;}
    #sp_nav .sp_nav_inner .menu__header .logo3 img{max-width: 130px;}
    #sp_nav .sp_nav_inner{
        padding: 0;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .modal_title1{
        max-width: 250px;
    margin: 0 auto 10px;
    }
}



/*■■ 下層ページ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#cms_2-g .cate_title_wrap{padding-bottom: 10px;}
#cms_2-g .cate_title{
    line-height: 1.3;
    letter-spacing: 0em;
}
#cms_2-g .cate_img1{
    margin-top: 20px;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}


/*■■ お客様の声 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.v_type2 .demo_box {padding-top: 70px}
.v_type2 {counter-reset: number 0;}
.v_type2 .cate_box {padding: 50px 20px 30px;}
.v_type2 .cate_box:before {
    counter-increment: number 1;
    content: "0" counter(number);
    display: inline-block;
    position: absolute;
    top: -43px;
    left: -5px;
    z-index: 1;
    font-size: 80px;
    font-weight: 100;
    font-style: italic;
    color: var(--color1);
    background-color: #fff;
    line-height: 1;
    padding: 0 25px 0 0;
}
@media screen and (max-width: 667px){
.v_type2 .cate_box{padding: 42px 25px 25px;}
.v_type2 .cate_box:before{top: -31px;font-size: 48px;}
}

/*■■ TOPスライド ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#content .swiper-slide > div{padding-left: 130px;}
#content .swiper-button-prev{
    height: auto;
    width: 200px;
    top: 40px;
    left: 0;
}
#content .swiper-button-prev p{margin-left: auto;margin-right: 0;}
#content .swiper-button-prev p::before{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 0px;
    bottom: 0;
    right: 80px;
    margin: auto;
    border-bottom: solid 1px currentColor;
    border-left: solid 1px currentColor;
    transform: rotate(45deg);
}
@media  screen and (max-width: 768px){
    #content .swiper-slide > div {padding-left: 50px;}
    #content .cate_item {padding: 40px 15px 40px 35px;}
    #content .swiper-button-next,
    #content .swiper-button-prev {
        width: 130px;
        top: 310px;
        line-height: 1.2;
    }
}
@media  screen and (max-width: 667px){
    #content .box_title::before{display: none;}
    #content .swiper-slide > div {padding-left: 0;}
    #content .swiper-button-next,
    #content .swiper-button-prev {
        width: 110px;
        top: 310px;
        line-height: 1;
        padding-bottom: 5px;
    }
    .modal_title1{padding-top: 0;}
}
.modal_title1:before{display: none;}