@charset "UTF-8";

.red-bold{
	font-size:1.5rem;
	font-weight:bold;
	color:#FF0000;
}

.mens{
	color:#00a0e9;
}

.womens{
	color:#e4007f;
}

.first-wrapper, .second-wrapper{
	background-size:80%;
	background-position:center -5px;
	padding:50px 0;
}

.first-wrapper{
	background-color:#e8f4eb;
	margin-top:-10px;
	background-image: url("img/style-bg.svg");
}

.second-wrapper{
	background-color:#fbeed2;
	background-image: url("img/item-bg.svg");
}

h1, h2{
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight:bold;
}

.item-caption h2{
	font-size:1.6rem;
}

.exclusive-box p, .staff-comment, .item-caption p, .item-box p{
	font-size:1.3rem;
}

.second-wrapper h1{
	font-size:3rem;
	color:#f8b625;
	text-align: center;
}

.style-wrapper, .style-main, .item-flex-wrapper, .exclusive-box{
	width:900px;
	margin:30px auto;
	display:flex;
	height:auto;
	justify-content:space-between;
}

.style-wrapper, .item-flex-wrapper{
	align-items: flex-start;
	flex-wrap: wrap;
}

.style-main, .exclusive-box{
	align-items:center;
}

.title img{
	width:500px!important;
}

.style-wrapper{
	gap:70px 10px;
}

.style-mid-container{
	width:30%;
}

.name-wrap{
	display:flex;
	height:auto;
	justify-content:space-between;
	align-items:center;
	margin-bottom:15px;
}

.name-icon{
	width:20%;
}

.style-title{
	text-align: end;
}

.staff-comment{
	padding:15px 5px;
}

.style-main{
	padding-bottom:30px;
}

.big-style-img{
	width:50%;
}

.item-caption{
	width:47%;
}

.item-box h2{
	margin-top:15px;
}

.item-caption p, .item-box p{
	padding:15px 0;
}

.reverse{
	flex-flow: row-reverse;
	padding-top:60px;
}

.item-flex-wrapper{
	gap:40px 10px;
}

.item-box{
	width:48%;
}

.comment-box{
	padding:0 5px;
}

.exclusive-box{
	margin:60px 0;
	padding:50px 0 70px;
}

.new-icon{
	width:15%;
}

.ex-title h1{
	color: #364f72;
	margin-bottom:15px;
}

.ex-caption{
	width:45%;
}

.ex-photo{
	width:50%;
}

.yomo-title{
	width:45%;
}

.yomo-img{
	width:40%;
	margin:15px auto;
}

.jan_yomoyama_box{
	padding-bottom:70px;
}

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

	.style-wrapper, .style-main, .item-flex-wrapper{
		width:650px;
	}
	
	.style-mid-container{
		width:47%;
	}
	
	.exclusive-box{
		width:600px;
		display:block;
		margin:30px auto 60px;
		padding:20px 0 90px;
	}
	
	.ex-caption{
		width:100%;
	}
	
	.ex-photo{
		width:80%;
		margin:20px auto 0;
	}
	
	.everymonth-wrapper{
		width:600px;
		margin:40px auto;
		padding-top:60px;
	}

}


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

	.first-wrapper{
		margin-top:-5px;
	}

	.style-wrapper, .style-main, .item-flex-wrapper, .everymonth-wrapper, .exclusive-box{
		width:320px;
		display:block;
	}
	
	.title{
		width:330px;
		margin:-40px auto 0;
	}

	.style-mid-container, .big-style-img, .item-box, .item-caption, .ex-photo, .yomo-img{
		width:100%;
	}
	
	.style-mid-container, .item-box{
		margin-bottom:70px;
	}
	
	.style-mid-container:last-of-type, .item-box:last-of-type{
		margin-bottom:30px;
	}
	
	.item-caption h2{
		font-size:1.7rem;
	}
	
	.item-caption{
		padding:15px 5px;
	}
	
	.first-wrapper, .second-wrapper{
		background-size:100%;
	}
	
	.first-wrapper{
		background-position:center top;
	}
	
	.second-wrapper h1{
		font-size:2rem;
	}
	
	.sp-block{
		display:block;
	}
	
	.everymonth-wrapper{
		margin:20px auto;
		padding-top:20px;
	}

	.new-icon{
		width:20%;
	}
	
	.yomo-title{
		width:80%;
	}

}

/* CSS Document */