@charset "UTF-8";

.beige{
	background-color:#f0e7df;
}

.green{
	background-color:#ebf4f0;
	background-image: url("img/bg-beige-round.svg");
	background-size:90%;
	background-position:top -5% right -60%;
}

h1, h2, h3, h4, .main-contents p, .main-contents ol li, .main-contents ul li, .main-contents ul li a, .main-contents dt, .main-contents dd, .main-contents a{
	font-family: 'Noto Sans JP', sans-serif!important;
}

.bg-wrapper{
	width:100%;
	box-sizing: border-box;
	padding:40px 0;
	position:relative;
}

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

.content-title{
	width:50%;
	margin:40px auto;
}

.content-title h1{
	text-align: center;
	margin-bottom:30px;
}

.content-title h1 img{
	height:120px;
}

.style-flex-container{
	width:65%;
	margin:40px auto;
	box-sizing: border-box;
	padding-top:20px;
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-flow: wrap;
	gap:60px 50px;
}

.style-box{
	width:calc((100% - 25px * 2)/ 2);
}

.style-img{
	position:relative;
}

.mens .round-icon{
	position:absolute;
	z-index:10;
	width:20%;
	top:2px;
	left:2px;
}

.wmns .round-icon{
	position:absolute;
	z-index:10;
	width:20%;
	top:2px;
	right:2px;
}

.mens .style-title{
	position:absolute;
	z-index:10;
	width:13%;
	top:30px;
	right:25px;
}

.wmns .style-title{
	position:absolute;
	z-index:10;
	width:13%;
	top:30px;
	left:25px;
}

.style-caption{
	width:100%;
	box-sizing: border-box;
	padding:20px 15px;
}

.main-contents .new-item-list{
	margin-top:30px;
}

.item-wrapper{
	width:65%;
	margin:40px auto;
	box-sizing: border-box;
	padding-top:20px;
}

.item-big-box{
	width:100%;
	margin-bottom:60px;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.item-big-img{
	width:55%;
}

.item-big-caption{
	width:41%;
}

.item-big-caption h2, .item-caption h2{
	text-decoration: underline;
	line-height:1.8;
	color:#000;
	font-weight:700;
	margin-bottom:20px;
}

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

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

.item-flex-container{
	width:100%;
	margin:40px auto;
	display:flex;
	gap:50px 30px;
	flex-flow: wrap;
}

.item-box{
	width:calc((100% - 30px * 2)/ 3);
}

.item-caption{
	width:100%;
	box-sizing: border-box;
	padding:10px;
}

.news{
	width:100%;
	display:flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom:80px;
	padding-bottom:30px;
}

.news-caption{
	width:50%;
}

.news-img{
	width:43%;
}

.news-caption h4{
	color:#ff0000;
	font-weight:700;
	font-size:2rem;
}

.news-caption h3 img{
	height:20px;
	margin-bottom:20px;
}

.news-caption p{
	margin-top:20px;
}

.news-red{
	font-weight:700;
	color:#ff0000;
}

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

	.content-title{
		width:80%;
		margin:40px auto;
	}
	
	.content-title h1 img{
		height:80px;
	}
	
	.style-flex-container{
		width:80%;
	}

	.mens .style-title{
		position:absolute;
		z-index:10;
		width:15%;
		top:20px;
		right:15px;
	}

	.wmns .style-title{
		position:absolute;
		z-index:10;
		width:15%;
		top:20px;
		left:15px;
	}

	.item-wrapper{
		width:80%;
	}

}

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

	.green{
		background-size:120%;
		background-position:top -100px right -100px;
	}

	.style-flex-container, .item-big-box, .item-flex-container, .news{
		display:block;
	}

	.content-title h1 img{
		width:100%;
		height:auto;
	}
	
	.style-flex-container{
		width:85%;
		margin:40px auto;
		padding-top:20px;
	}

	.style-box, .item-box{
		width:100%;
		margin-bottom:50px;
	}
	
	.mens .round-icon{
		width:22%;
	}

	.wmns .round-icon{
		width:22%;
	}
	
	.style-box:last-of-type{
		margin-bottom:0;
	}

	.main-contents .new-item-list{
		margin-top:20px;
	}
	
	.item-big-img, .item-big-caption, .news-caption, .news-img, .yomo-title{
		width:100%;
	}
	
	.item-big-caption{
		box-sizing: border-box;
		padding:10px;
	}

	.news-img{
		margin-top:30px;
	}
	
	.news{
		margin-bottom:90px;
	}


}
/* CSS Document */