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

/*TOP以外のページ共通したStyle*/
.wrapper{
	padding-top: 88px;/*headerの高さ*/
}

.content .heading03{
	text-align: center;
}

/**/

.sp{
	display: none;
}


.service .text/*一番上のテキストエリアのStyle*/{
	margin: 20px auto;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}

.service .block{
	display: flex;
	padding-top: 120px;
}

.service .block .text{
	font-size: 1.6rem;
	font-weight: 500;
	text-align:justify;
	margin: 20px auto;
}


.service .detail{
	background-color: #E9F6FF;
	padding: 15px 30px;
	border-radius: 10px;
}

.service .item02{
	width: 60%;
	padding-left: 50px;
}

.service .item03{
	width: 60%;
	padding-right: 50px;
}

.nonslider img{
	width: 540px;
}


.slider {
    display: flex;
    background-color: #efefef;
    overflow: hidden;
}

.slider-list {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    animation: slideShow 30s infinite linear;
    list-style: none;
}

.slider-item {
	background-color: #FFFFFF;
    width: 400px;
    height: 400px;
	padding-left: 10px;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 0.5rem;
}

.slider:hover .slider-list {
    animation-play-state: paused;
}

@keyframes slideShow {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }

}



@media screen and (max-width: 1024px) {
	
	.wrapper{
		padding-top: 0px;/*headerの高さ*/
	}
	
	.service .block{
	padding-top: 100px;
}
	
	.nonslider img{
		width: 350px;
	}


}




@media screen and (max-width: 480px) {
	
	.wrapper{
		padding-top: 0px;/*headerの高さ*/
	}
	
	.sp{
		display: block;
	}
	
	.pc{
		display: none;
	}
	
	.service .text/*一番上のテキストエリアのStyle*/{
		font-size: 1.4rem;
		text-align: justify;
		line-height: 2rem;
	}


	.service .block{
		flex-direction: column;
		margin: 0 20px 0;
		padding-top: 50px;
	
	}
	
	
	.service .block .text{
		font-size: 1.2rem;
		font-weight: 500;
		text-align:justify;
		margin: 20px auto;
	}


	.service .detail{
		background-color: #E9F6FF;
		padding: 15px;
		border-radius: 10px;
	}
	
	.slider-item {
		max-width: 250px;
		max-height: 250px;
	}
	
	.service .item02{
		width: 100%;
		padding-left: 0px;
	}
	
	.service .item03{
		width: 100%;
		padding-right: 0px;
	}
	
	.slider{
		margin: 20px auto;
	}
	
	.slider-item {
		width: 400px;
		height: 400px;
		padding-left: 10px;
	}
	
	.slider-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		margin: 0 0.5rem;
	}
	
		.nonslider img{
		width: 300px;
			margin-top:20px;
	}



}