@charset "UTF-8";

html{
	font-size:62.5%;
}

h1{
	font-family: 'Permanent Marker', cursive;
	font-size:3.5rem;
	color:#d94b19;
}

p, a, h5, ul li{
	font-family: 'Noto Sans JP', sans-serif;
}

.top-caption p, .flex-cap p, .caption p{
	font-size:1.3rem;
	color:#57523e;
}

.top-caption{
	width:700px;
	margin:30px auto;
	padding:30px 0;
}

.first-wrapper, .bg, .second-wrapper{
	width:100%;
	padding:40px 0;
	box-sizing: border-box;
}

.bg{
	background-color:#d8d8c9;
}

.bgbg{
	background-color:#efefe9;
}

.sl-style-box, .st-container{
	width:900px;
	margin:auto;
	padding:30px 0;
	box-sizing: border-box;
}

.riot-container{
	width:800px;
	margin:auto;
	padding:30px 0;
}

.sl-style-box{
	margin-bottom:40px;
}

.style-wrapper{
	display:flex;
	height: auto;
	align-items:center;
	justify-content: space-between;
	padding:30px 0;
}

.flex-img, .flex-cap{
	width:48%;
}

.slick-container{
	width:600px;
	margin:30px auto;
}

.new-item-list{
	margin-top:40px;
}

.riot-container h1{
	margin-bottom:20px;
	text-align: center;
}

.img-flex{
	display:flex;
	height: auto;
	align-items:center;
	justify-content: space-between;
	margin:30px 0;
}

.riot-img{
	width:49%;
}

.name h5{
	color:#d94b19;
}


/* タブレット */
@media screen and (max-width: 768px){
	.top-caption{
		width:600px;
	}
	
	.sl-style-box, .st-container, .riot-container{
		width:650px;
	}
	
	.sl-style-box:first-of-type{
		margin-bottom:0;
	}
	
	.slick-container{
		width:500px;
	}
	
	.style-wrapper{
		align-items:flex-start;
	}
	
	.jiko_soto{
		padding-top:30px;
	}

}

/* スマホ */
@media screen and (max-width:640px){

	.top-caption{
		width:300px;
		box-sizing: border-box;
		padding:30px 15px;
	}
	
	.sl-style-box, .st-container, .riot-container, .slick-container{
		width:320px;
	}
	
	h1{
		font-size:2.5rem;
		text-align: center;
	}
	
	h1 span{
		display:block;
	}
	
	.second-wrapper, .bg{
		padding:20px 0 0;
	}
	
	.style-wrapper, .img-flex{
		display:block;
	}
	
	.style-wrapper{
		padding:30px 0 0;
	}
	
	.flex-img, .flex-cap, .riot-img{
		width:100%;
		box-sizing: border-box;
	}
	
	.flex-cap, .caption{
		padding:15px;
	}
	
	.flex-cap, .riot-img{
		margin:20px 0;
	}
	
	.slick-container{
		margin:0;
	}
	
	.jiko_soto{
		padding-top:0;
	}

}
/* CSS Document */