@charset "UTF-8";

h2, h3, .main-contents p{
	font-family: 'Noto Sans JP', sans-serif!important;
}

.main-contents{
	width:100%;
	box-sizing: border-box;
	position:relative;
}

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

.title-container{
	align-items: center;
	background: linear-gradient(90deg, #E0EDE1 0%, #E0EDE1 50%, #FDF3E8 50%, #FDF3E8 100%);
	display: flex;
	justify-content: center;
	width:100%;
	box-sizing: border-box;
	padding:40px 0;
}

.title-box{
	width:50%;
	margin:50px auto 20px;
}

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

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

.flex-wrapper{
	display:flex;
	align-items:stretch;
}

.flex-container{
	width:50%;
	box-sizing: border-box;
	padding:40px 0 0;
}

.round-img{
	width:20%;
	margin:-30px auto 90px;
}

.no-margin{
	margin-bottom:70px!important;
}

.mens{
	background-color:#E0EDE1;
}

.wmns{
	background-color:#FDF3E8;
}

.staff-container{
	width:85%;
	margin:50px auto 150px;
}

.staff-flex{
	display:flex;
	align-items: flex-start;
}

.wmns .staff-flex{
	flex-flow: row-reverse;
}

.mens .comment{
	margin-right:20px;
	margin-left:-50px;
	margin-top:-40px;
}

.wmns .comment{
	margin-left:20px;
	margin-right:-50px;
	margin-top:-40px;
}

.comment{
	width:50%;
	border:2px solid #000;
	background-color:#fff;
	position:relative;
	z-index:10;
}

.comment p{
	font-size:1.2rem;
}

.bottom-box p{
	font-size:1.1rem;
}

.bottom-box h3{
	font-weight:700;
	font-size:1.3rem;
}

.c-title, .honbun{
	width:100%;
	box-sizing: border-box;
	border-bottom:2px solid #000;
}

.c-title h2, .name p, .bottom-box h3, .bottom-box p{
	text-align: center!important;
}

.bottom-box h3, .bottom-box p{
	line-height:1.8;
}

.c-title{
	padding:20px;
}

.c-title h2{
	font-weight:700;
	font-size:1.5rem;
}

.honbun{
	padding:30px 20px;
}

.name{
	padding:10px 0;
}

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

.mark{
	position:absolute;
	z-index:10;
	width:10%;
}

.wmns .mark{
	bottom:15px;
	right:20px;
}

.mens .mark{
	bottom:15px;
	left:20px;
}

.bottom-box{
	width:90%;
	margin:10px auto;
	box-sizing: border-box;
	padding:10px 0;
	background-color:#fff;
	border:2px solid #000;
}

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

	.staff-flex{
		display:block;
	}
	
	.title-box{
		width:70%;
		margin:20px auto;
	}
	
	.staff-container{
		margin:50px auto 80px;
	}

	
	.mens .comment{
		margin-right:0;
		margin-left:0;
		margin-top:20px;
	}

	.wmns .comment{
		margin-left:0;
		margin-right:0;
		margin-top:20px;
	}

	.comment, .bottom-box, .style-img{
		width:100%;
	}

	.bottom-box{
		margin:20px auto;
	}

	.bottom-box p{
		font-size:0.9rem;
	}
	
	.round-img{
		width:30%;
		margin:-30px auto 30px;
	}


}

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

	.title-container{
		background: linear-gradient(90deg, #E0EDE1 0%, #E0EDE1 50%, #E0EDE1 50%, #E0EDE1 100%);
		width:100%;
		padding:30px 0 20px;
	}
	
	.title-box{
		width:90%;
	}

	.title-box h1 img{
		width:100%;
	}
	
	.title-container, .flex-wrapper{
		display:block;
	}
	
	.flex-container, .yomo-title{
		width:100%;
	}
	
	.wmns .round-img{
		margin-top:30px;
	}
	
	.comment p{
		font-size:1.3rem;
	}

	.flex-container{
		padding:40px 0 30px;
	}

	.no-margin{
		margin-bottom:0;
	}


}
/* CSS Document */