@charset "UTF-8";
/* CSS Document */

.mb100{
	padding-top:-50px;
	margin-bottom: 10rem;
}

/* KV以外のセクションを左右決まったwidthで統一したい。*/
.container-box{
	max-width: 1980px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}
.contents-box{
	max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}
.container-box .contents-box{
    padding-left: 0rem;
    padding-right: 0rem;
}

.service-item_sns{
	max-width: 1980px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}
.service-item-sns-img{
	max-width: 40%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

.service-item_sns .service-item-sns-img{
	padding-left: 0rem;
    padding-right: 0rem;
}

/*タイトル*/
.service-title{
	text-align: center;
	margin-bottom: 2em;
}

.service-title h2{
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0.25em;
    color: #0a0a0a;
}


.service-title p{
font-weight: 300;
    font-size: 20px;
    letter-spacing: 0.25em;
    color: #caad79;
    margin-top: 10px;
}


/*サービスページスライダー用*/
   .service-slider{
        width:70%;
        margin:0 auto;
    }
    .service-slider img{
        width:100%;
    }
/*    .service-slider .slick-slide{
        height:auto!important;
    }
    .service-slider .slick-arrow{
        z-index:2!important;
    }
    .service-slider .slick-next{
        right:0!important;
    }
    .service-slider .slick-prev{
        left:0!important;
    }*/

	.service-slider .slick-slide{
		margin-right: 1vw!important;
		margin-left: 1vw!important;
	}



/*矢印の変更*/
.slick-prev,.slick-next{
width:1.2vw;
height:1.2vw;
transform: translate(50%,50%);
z-index: 9999;
}

.slick-prev{
	left: calc(20% + 0.4vw);
}

.slick-next{
	right: calc(20% + 2vw);
}


.slick-prev:before,.slick-next:before{
width:1.2vw;
height:1.2vw;
background-color: none;
}
.slick-prev:before{
	display: inline-block;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(45deg);
}


.slick-next:before{
	display: inline-block;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(-135deg);
}


/*サービスページスライダーの高さをあわせる*/
.service-slider .slick-track{
	display: flex;}


.service-slider .slick-slide{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 1em;
	box-sizing: border-box;
	border-radius: 1em;
	height: auto;
    max-height: 100%;
	box-shadow: 0px 0.2em 0.5em 0px rgba(0, 0, 0, 0.35);
}



/*サービスページスライダーの中身*/


.service-slider-list{
    display: flex;
    justify-content: space-between;
}
.service-slider-ul li{
    list-style-type: disc;
    list-style-position: inside;
}


.service-img{
    width: 100%;
}

.service-text{
    width: calc(100% - 260px);
    font-size: 16px;
}
.service-text h3{
     font-size: 28px;
    color: #caad79;
}

.service-text h4{
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 20px;
}
.service-text h5{
    margin-top: 1em;
    margin-bottom: 0.2em;
    font-size: 20px;
}

.service-text span{
    display: inline-block;
    padding: 0.2em 0;
    text-align: center;
    width:40%;
    border-radius: 0.3em;
    margin-right: 1em;
    box-sizing: border-box;
    background-color: #d9d9d9;
}

.service-result{
color: #caad79;
}



.service-merit{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
}
.service-merit+.service-merit{
    margin-top: 2em;
}

.service-merit .left-img{
    width: 63%;
    position: relative;
}

.service-merit .text{
    width:34%;
}


.service-merit img {
    position: relative;
    object-fit: cover;
    width: 100%;
  
}

.service-merit .text h3{
    font-size: 24px;
    margin-bottom: 1em;
}

.service-slider-web-text{
    padding: 2em;
    box-sizing: border-box;
    font-size: 16px;
}
.service-slider-web-text h3{
     font-size: 24px;
    margin-top: 1em;
    margin-bottom: 1em;
    color: #caad79;
}
.service-slider-web-text h4{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-align: center;
    font-size: 20px;
}
.service-slider-web-text h5{
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: 20px;
}
.service-slider-web-text span{
    display: inline-block;
    padding: 0.2em 0;
    text-align: center;
    padding: 0.2em 3em;
    border-radius: 0.3em;
    margin-right: 1em;
    box-sizing: border-box;
    background-color: #d9d9d9;
}



@media screen and (max-width: 1500px) {
.service-merit .left-img{
    width: 49%;
}
   .service-slider{
        width:100%;
    }
.service-merit .text{
    width:49%;
}
.service-img{
    width: 25%;
}

.service-text{
    width:72%;
}

}

@media screen and (max-width: 1000px) {

    .mb100{
	margin-bottom: 5rem;
}


 /*サービスページスライダーの矢印を小さいとき押しやすくする*/
    .slick-prev,.slick-next{
        display: block;
         display: block;
    position: absolute;
 background-color: #f2f2f2;
        border-radius: 40px;
        padding: 4em;
        width:30px;
        height:30px;
        z-index: 10;
}


.slick-prev{
	left: 0;
}

.slick-next{
	right:21px;
}

.slick-prev:before,.slick-next:before{
width:15px;
height:15px;
background-color: none;
}

.service-merit .left-img{
    width: 100%;
}

.service-merit .text{
    width:100%;
}




.service-slider-list{
    flex-wrap: wrap;
}



.service-img{
    width: 100%;
    margin-bottom: 1em;
    text-align: center;
}
.service-img img{
    display: inline-block;
    width: 30%;
}

.service-slider-web-text{
    padding: 0;
}

.service-text{
    width: 100%;
}
.service-merit .text h3{
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}
.service-slider-web-text h3,.service-text h3{
     font-size: 18px;
}
.service-slider-web-text h4,.service-text h4{
    font-size: 16px;
}
.service-slider-web-text h5,.service-text h5{
    font-size: 16px;
}

}/*@media screen and (max-width: 789px) {*/