@charset "UTF-8";

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

.main-top{
	width:70%;
	margin:auto;
}

.main-top h1{
	text-align: center;
	margin:40px 0 20px;
}

.main-top h1 img{
	height:120px;
}

.xmas-img{
	width:100%;
}

.main-top p, .box-1-title p, .box-2-title p{
	font-weight:700;
}

.box-1-title p, .box-2-title p{
	margin-top:15px;
}

.main-top p{
	box-sizing: border-box;
	padding:20px 60px;
}

.box-1, .box-2{
	width:100%;
	box-sizing: border-box;
	padding:50px 0;
}

.box-1{
	background-color:#faebea;
	background-image:url("img/round-bg.svg");
	background-size:100%;
	background-position:top 320% center;
	background-repeat: no-repeat;
}

.box-1-title, .box-2-title{
	width:60%;
	margin:30px auto;
}

.box-1-flex-wrapper{
	width:75%;
	margin:50px auto 20px;
	display:flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap:60px 30px;
}

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

.comment{
	width:100%;
	box-sizing: border-box;
	padding:10px 15px;
}

.comment h2{
	font-size:2rem;
	font-weight:900;
	color:#b98f50;
}

.comment p{
	margin:10px 0;
}

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

.box-2{
	background-color:#f0e8db;
	background-image:url("img/staff-winter-bg.svg"), url("img/round-bg.svg"), url("img/round-bg.svg");
	background-size:60%, 50%, 40%;
	background-position:top right, center left -5%, bottom 10% right -10%;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

.box-2-title{
	padding-bottom:0;
}

.box-2-title h1{
	font-size:2.8rem;
	font-weight:900;
	color:#b91c22;
}

.staff-box{
	width:55%;
	margin:30px auto;
	padding:50px 0 40px;
	border-bottom:2px solid #666;
}

.staff-box:last-of-type{
	border-bottom:0;
	padding-bottom:20px;
}

.staff-text-container h2{
	font-size:2rem;
	font-weight:700;
	color:#fff;
	margin-bottom:40px;
}

.staff-text-container h2 span{
	box-sizing: border-box;
	padding:10px 20px;
}

.staff-text-container h2 span span{
	font-size:1.4rem;
}

.nishida h2 span{
	background-color:#66a1c0;
}

.banno h2 span{
	background-color:#df9a35;
}

.nozaki h2 span{
	background-color:#c7a573;
}

.nishio h2 span{
	background-color:#eb99b3;
}

.s-text p{
	margin-bottom:20px;
}

.s-img{
	width:80%;
	margin:40px auto;
	padding-top:15px;
	display:flex;
	gap:30px;
}

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

.s-slick{
	display:none;
}

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

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

	.box-1-title, .box-2-title{
		width:70%;
	}

	.box-1-flex-wrapper{
		width:85%;
	}

	.box-1{
		background-position:top -118% center;
	}

	.staff-box{
		width:75%;
		margin:30px auto;
		padding:50px 0 40px;
	}

}

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

	.main-top{
		width:100%;
	}

	.main-top h1 img{
		height:70px;
	}
	
	.box-1-title, .box-2-title{
		width:85%;
	}
	
	.box-1{
		background-size:150%;
		background-position:top -7% center;
	}
	
	.box-1-flex-wrapper{
		width:85%;
		margin:50px auto 20px;
		display:block;
	}
	
	.item-box{
		width:100%;
		margin-bottom:55px;
	}
	
	.item-box:last-of-type{
		margin-bottom:0;
	}
	
	.box-2{
		background-size:100%, 90%, 110%;
		background-position:top right, center left 5%, bottom 10% right -10%;
		padding:30px 0;
	}
	
	.staff-box{
		width:100%;
		padding:30px 0;
		border-bottom:none;
	}
	
	.staff-text-container{
		width:95%;
		margin:auto;
	}
	
	.staff-text-container h2{
		text-align: center;
		font-size:1.7rem;
	}
	
	.staff-text-container h2 span{
		padding:10px 5px;
	}
	
	.staff-text-container h2 span span{
		font-size:1.1rem;
	}
	
	.s-text{
		box-sizing: border-box;
		padding:0 20px;
	}
	
	.s-img{
		display:none;
	}
	
	.s-slick{
		display:block;
		width:90%;
		margin:auto;
		padding-top:20px;
	}

	.yomo-title{
		width:100%;
	}

}
/* CSS Document */