@charset "UTF-8";

.bg-wrapper{
	wudth:100%;
	box-sizing: border-box;
	padding:50px 0;
	background-color:#ccc;
}

.pc-title{
	display:block;
}

.sp-title{
	display:none;
}

h1, h2, h3, .bg-wrapper p, .bg-wrapper ol li, .bg-wrapper ul li, .bg-wrapper ul li a, .style-sample-wrapper p, .style-sample-wrapper ul li, .style-sample-wrapper ul li a{
	font-family: 'Noto Sans JP', sans-serif!important;
}

.item-name h2{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"!important;
}

.style-sample-wrapper .new-item-list{
	margin-top:15px;
	line-height:2;
}

.new-item-list li{
	margin-left:0;
}

.title-box{
	width:60%;
	margin:40px auto;
}

.title-box h1{
	margin-bottom:20px;
}

.title-box h1, .title-box p{
	text-align: center;
}

.title-box h1 img{
	height:100px;
}

.title-box p{
	font-weight:bold;
}

.point-wrapper, .flex-mid-container{
	width:65%;
	margin:40px auto;
}

.point-wrapper{
	padding-top:10px;
}

.item-wrapper{
	padding:10px 0 20px;
}

.point-flex-box, .flex-mid-container, .text-flex, .style-flex-container{
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.point-flex-box, .flex-mid-container{
	padding-bottom:10px;
}

.point-caption{
	width:65%;
}

.point-caption h2{
	font-size:1.8rem;
	margin-bottom:15px;
	color:#d03d26;
	font-weight:900;
}

.point-img{
	width:28%;
}

.flex-mid-container:last-of-type{
	margin-bottom:0;
}

.text-flex{
	align-items: center;
}

.style-flex{
	align-items: flex-start;
}

.flex-img{
	width:35%;
}

.item-text{
	width:60%;
}

.item-caption p{
	padding:10px 0 2px;
}

.color-round div{
	width:35px;
	height:35px;
	border-radius: 50%;
	display: inline-block;
	margin-left:5px;
}

.new-icon{
	width:10%;
	margin-bottom:10px;
}

.khaki{
	background-color:#677960;
}

.charcoal{
	background-color:#575453;
}

.black{
	background-color:#000;
}

.beige{
	background-color:#bca294;
}

.khaki-2{
	background-color:#3c4837;
}

.black-2{
	background-color:#464440;
}

.olive{
	background-color:#8f9486;
}

.beige-2{
	background-color:#806753;
}

.item-name h2{
	font-size:1.7rem;
	color:#b98f50;
}

.item-name{
	width:75%;
}

.color-round{
	width:25%;
}

.style-sample-wrapper{
	padding:50px 0;
}

.box-title{
	width:20%;
	margin:40px auto;
	background-color:#b98f50;
	box-sizing: border-box;
	padding:5px 10px;
}

.box-title h1{
	text-align: center;
	text-justify: inter-ideograph;
	color:#fff;
	line-height:1;
	font-size:3rem;
}

.box-title h1 span{
	display:block;
}

.style-flex-container{
	width:70%;
	margin:30px auto 0;
}

.style-img, .style-comment{
	width:50%;
}

.style-img{
	position: relative;
	z-index:1;
}

.item-title{
	position:relative;
	bottom:120px;
	text-align: center;
}

.item-title img{
	height:20px;
}

.style-comment{
	box-sizing: border-box;
	padding:20px 30px;
}

.style-comment h3{
	font-size:1.4rem;
	margin-bottom:10px;
}

.style-comment p{
	font-size:1.3rem;
}

.style-comment .new-item-list li{
	font-size:1.1rem!important;
}

.wmns{
	margin-bottom:40px;
}

.wmns h3{
	color:#c21477;
}

.mens h3{
	color:#318cc0;
}

.yomo-title{
	width:70%;
	margin-bottom:40px;
}

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

	.bg-wrapper{
		padding-bottom:70px;
	}

	.title-box, .point-wrapper, .style-flex-container{
		width:70%;
		margin:40px auto;
	}
	
	 .flex-mid-container{
	 	width:80%;
		padding-bottom:30px;
	 }
	
	.point-flex-box, .text-flex, .style-flex-container{
		display:block;
	}
	
	.item-wrapper{
		padding:0;
	}
	
	.point-flex-box{
		margin-bottom:20px;
	}
	
	.point-caption, .item-name, .color-round{
		width:100%;
	}
	
	.color-round{
		margin-top:15px;
	}

	.point-img{
		width:50%;
		margin:30px auto;
	}

	.new-icon{
		width:12%;
		margin-bottom:10px;
	}

	.box-title{
		width:40%;
	}
	
	.style-flex-container{
		padding-bottom:30px;
	}
	
	.style-flex-container:last-of-type{
		padding-bottom:0;
	}
	
	.style-img{
		width:80%;
		margin:auto;
	}
	
	.style-comment{
		width:100%;
		margin:10px 0;
	}
}

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

	.bg-wrapper{
		padding-top:30px;
		padding-bottom:40px;
	}
	
	.title-box{
		width:90%;
	}
	
	.style-flex-container{
		width:85%;
	}
	
	.point-wrapper, .flex-mid-container{
		width:80%;
	}
	
	.point-caption h2{
		font-size:1.6rem;
	}
	
	.point-img{
		width:80%;
		margin:20px auto;
	}

	.title-box{
		margin:20px auto;
	}
	
	.title-box p{
		font-size:1.3rem!important;
	}
	
	.flex-mid-container{
		display: block;
	}
	
	.item-wrapper{
		padding-top:5px;
	}
	
	.flex-img, .item-text{
		width:100%;
	}
	
	.flex-img{
		margin-bottom:20px;
	}
	
	.new-icon{
		width:16%;
		margin-bottom:8px;
	}
	
	.color-round{
		margin:10px 0;
	}
	
	.color-round div{
		width:25px;
		height:25px;
	}
	
	.everymonth-wrapper{
		margin-top:10px!important;
		padding-top:10px!important;
	}

	.box-title{
		width:50%;
	}

	.box-title h1{
		font-size:3rem;
	}
	
	.style-img{
		width:100%;
	}
	
	.style-comment{
		padding:5px 15px;
	}
	
	.item-title{
		bottom:80px;
	}
	
	.item-title img{
		height:15px;
	}

	.yomo-title{
		width:100%;
	}


}
/* CSS Document */