@charset "UTF-8";

html{
	font-size:62.5%;
}

p{
	font-family: 'Noto Sans JP', sans-serif;
}

h1, h2, .name h5, .pt-buy a{
	font-family: 'Poppins', sans-serif;
}

.mid-wrapper{
	box-sizing: border-box;
	padding:50px 0;
}

.top-caption, .first-cap{
	width:700px;
	margin:30px auto;
}

.top-caption p{
	font-size:1.3rem;
}

.first-cap p{
	font-size:1.4rem;
	margin-bottom:20px;
}

.top-caption p:last-of-type, .first-cap p:last-of-type{
	margin-bottom:0;
}

.big-wrapper{
	background-color:#c69c6d;
	box-sizing: border-box;
	padding:50px 0;
}

.big-wrapper h1{
	font-size:3.5rem;
	color:#fff;
	text-align: center;
	margin-bottom:80px;
}

.big-wrapper h1::after{
	content:"";
	display:block;
	width:80px;
	height:5px;
	background-color:#fff;
	position:absolute;
	left:47.5%;
	margin-top:20px;
	margin-bottom:90px;
}

.first-wrapper{
	width:800px;
	margin:40px auto;
	padding-top:50px;
}

.flex-cap{
	display:flex;
	height: auto;
	align-items: center;
	justify-content: space-between;
}

.logo-img{
	width:150px;
}

.brand-cap{
	width:550px;
}

.brand-cap h2{
	font-size:1.6rem;
}

.brand-cap p{
	font-size:1.4rem;
}

.image-photo{
	width:600px;
	margin:auto;
}

.second-wrapper{
	margin:70px 0;
	box-sizing:border-box;
	padding:50px 0;
}

.style-box{
	width:900px;
	margin:30px auto 150px;
	background-color:#79654f;
	box-sizing: border-box;
	padding:30px 30px 50px;
}

.style-box:last-of-type{
	margin-bottom:0;
}

.style-box h2{
	font-size:4.5rem;
	text-align: center;
	color:#fff;
}

.big-img{
	width:500px;
}

.small-img{
	width:400px;
	position:relative;
	left:440px;
	bottom:250px;
}

.model-data{
	width:700px;
	margin:-220px auto 20px;
	position:relative;
	box-sizing: border-box;
	padding:30px;
}

.model-data::before, .model-data::after{ 
    content:"";
    width: 50px;
    height: 50px;
    position: absolute;
    display: inline-block;
}

.model-data::before{
    top:0;
    left: 0;
    border-left: solid 3px #ccc;
    border-top: solid 3px #ccc;
}

.model-data::after{
    bottom:0;
    right: 0;
    border-right: solid 3px #ccc;
    border-bottom: solid 3px #ccc;
}

.model-data p{
	font-size:1.3rem;
	color:#fff;
}

.third-wrapper{
	width:100%;
	margin:40px 0 100px;
	box-sizing: border-box;
	padding:50px 0;
}

.line-image, .flex-image{
	display:flex;
	height: auto;
	align-items: center;
}

.line-image img{
	width:calc(100% / 4);
}

.fourth-wrapper{
	width:900px;
	margin:0 auto 60px;
	box-sizing: border-box;
	padding-bottom:70px;
}

.flex-image{
	justify-content: space-between;
	margin-bottom:40px;
}

.item-image{
	width:49%;
}

.fourth-wrapper p{
	font-size:1.3rem;
	text-align: center;
}

.bold{
	font-weight:700;
	margin-right:10px;
}

.pt-buy a{
	display:block;
	width:300px;
	margin:30px auto 0;
	background-color:#79654f;
	color:#fff;
	font-weight:bold;
	font-size:1.6rem;
	text-align: center;
	border-radius:5px;
}

.pt-buy a:hover{
	background-color:#3d3328;
	transition:.3s;
}

.name h5{
	color:#79654f;
}

/*タブレット用*/
@media screen and (max-width: 768px){

	.top-caption{
		width:500px;
	}
	
	.big-wrapper h1::after{
		left:44.5%;
		margin-top:20px;
		margin-bottom:90px;
	}
	
	.first-wrapper{
		width:600px;
	}
	
	.flex-cap{
		display:block;
	}
	
	.logo-img{
		margin:auto;
	}
	
	.brand-cap{
		width:100%;
		margin:30px 0 10px;
	}
	
	.brand-cap h2{
		margin-bottom:15px;
		text-align: center;
	}
	
	.style-box, .fourth-wrapper{
		width:650px;
	}
	
	.big-img{
		width:440px;
	}
	
	.small-img{
		width:310px;
		left:280px;
		bottom:200px;
	}
	
	.model-data{
		width:90%;
		margin:-150px auto 20px;
	}

}

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

	.mid-wrapper{
		width:100%;
		box-sizing: border-box;
		padding:30px 0;
	}

	.top-caption{
		width:300px;
		box-sizing: border-box;
		padding:0 15px;
	}
	
	.first-wrapper, .image-photo, .first-cap{
		width:300px;
	}
		
	.first-wrapper h2 span{
		display:block;
		font-size:1.2rem;
	}
	
	.big-wrapper h1{
		font-size:2.7rem;
	}
	
	.big-wrapper h1::after{
		height:3px;
		left:39.5%;
		margin-top:20px;
		margin-bottom:90px;
	}
	
	.style-box, .fourth-wrapper{
		width:350px;
	}
	
	.style-box{
		padding:30px 15px 50px;
	}
	
	.big-img{
		width:95%;
	}
	
	.small-img{
		width:200px;
		bottom:30px;
		left:120px;
	}
	
	.model-data{
		width:95%;
		margin:0 auto;
	}
	
	.line-image img{
		width:calc(100% / 2);
	}
	
	.line-image{
		flex-wrap: wrap;
	}



}

/* CSS Document */