@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;
}

.bg-wrapper{
	width:100%;
	box-sizing: border-box;
	padding:50px 0;
	background-image:url("img/bg-img.svg"), url("img/bg-img.svg");
	background-size:70%, 60%;
	background-position:top -10px left, bottom -5px right;
	background-repeat: no-repeat;
}

.beige{
	background-color:#f0e8db;
}

.green{
	background-color:#e7ece6;
}

.title-container{
	width:55%;
	margin:30px auto;
}

.title-container h1{
	text-align: center;
}

.title-container h1 img{
	height:140px;
}

.title-container p{
	margin-top:40px;
	font-weight:700;
}

.flex-container{
	width:70%;
	margin:40px auto;
	padding:40px 0 20px;
	box-sizing: border-box;
	display:flex;
	align-content: flex-start;
	flex-wrap: wrap;
	gap:80px 60px;
}

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

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

.mark{
	position:absolute;
	z-index:10;
	width:16%;
	top:2px;
	left:2px;
}

.staff-caption{
	box-sizing: border-box;
	padding:10px 5px;
	background-position:top 10px right;
}

.one{
	background-image: url("img/one.svg");
	background-size:17%;
}

.two{
	background-image: url("img/two.svg");
	background-size:30%;
}

.three{
	background-image: url("img/three.svg");
	background-size:30%;
}

.four{
	background-image: url("img/four.svg");
	background-size:30%;
}

.five{
	background-image: url("img/five.svg");
	background-size:25%;
}

.six{
	background-image: url("img/six.svg");
	background-size:25%;
}

.seven{
	background-image: url("img/seven.svg");
	background-size:25%;
}

.eight{
	background-image: url("img/eight.svg");
	background-size:25%;
}

.nine{
	background-image: url("img/nine.svg");
	background-size:25%;
}

.ten{
	background-image: url("img/ten.svg");
	background-size:45%;
}

.eleven{
	background-image: url("img/eleven.svg");
	background-size:38%;
}

.twelve{
	background-image: url("img/twelve.svg");
	background-size:45%;
}

.thirteen{
	background-image: url("img/thirteen.svg");
	background-size:45%;
}

.fourteen{
	background-image: url("img/fourteen.svg");
	background-size:50%;
}

.staff-caption h2{
	font-weight:900;
	font-size:1.8rem;
	line-height:1.8;
	color:#b98f50;
	margin-bottom:10px;
}

.shopname{
	font-size:1.3rem;
	display:block;
}

.nameend{
	font-size:1.2rem;
}

.item-name{
	font-size:1rem;
	margin-top:10px;
}

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

.pre-text b{
	color:#364f72!important;
}

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

	.title-container{
		width:70%;
		padding-bottom:20px;
	}
	
	.flex-container{
		width:90%;
		margin:20px auto;
		padding:20px 0 0px;
		gap:60px 40px;
	}
	
	.staff-box{
		width:calc((100% - 40px * 2)/ 3);
	}

}

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

	.bg-wrapper{
		padding:30px 0;
		background-size:100%, 100%;
		background-position:top -5px left;
	}
	
	.title-container{
		width:80%;
		margin:10px auto;
		padding-bottom:10px;
	}

	.title-container h1 img{
		width:100%;
		height:auto;
	}

	.flex-container{
		display:block;
	}
	
	.staff-box{
		width:90%;
		margin:40px auto 50px;
	}

	.yomo-title{
		width:100%;
	}

}
/* CSS Document */