@charset "UTF-8";

ul {
	list-style-type:none;
}

#newsList {
	width:100%;
	display:flex;
}
#newsList li {
	width:22%;
}
#newsList li:not(:last-of-type) {
	margin-right:4%;
}
.thumbNailWrap img {
	height:200px;
	object-fit:cover;
}
.catName {
	background-color:#fbfcd2;
	padding:5px;
}
.up_ymd {
	margin:0 10px;
}
.newMark {
	color:#FFF;
	background-color:#ff4b4b;
	padding:5px;
}
.title {
	display:inline-block;
	margin-top:10px;
}
h4 {
	display:inline-block;
	font-size:28px;
	background-color:#fbfcd2;
	padding:0 15px;
}
#philosophy {
	background-color:#f6d6e4;
	padding:100px 0;
	position:relative;
	overflow:hidden;
}
#philosophy::before ,
#philosophy::after  ,
#gallery::before ,
#gallery::after {
	content:"";
	display:inline-block;
	width:100%; height:76px;
	position:absolute;
}
#philosophy::before ,
#gallery::before {
	background:url(../../common/img/top.png) repeat-x center;
	top:-21px;
}
#philosophy::after ,
#gallery::after {
	background:url(../../common/img/under.png) repeat-x center;
	bottom:-21px;
}

#philosophy > div::before {
	content:"";
	background:url(../../common/img/bg1.png) no-repeat center;
	width:575px; height:575px;
	position:absolute;
	top:10%; right:-20%;
}

#philosophy .flexBox img {
	width:38%;
	object-fit:cover;
}
#philosophy .flexBox {
	position:relative;
	z-index:1;
}
#philosophy .flexBox div {
	width:58%;
}
#philosophy p {
	text-align:left;
	margin:20px 0;
}
#shop {
	position:relative;
}
#shop::before {
	content:"";
	display:inline-block;
	background:url(../../common/img/star.png) no-repeat center;
	width:700px; height:710px;
	position:absolute;
	bottom:-12%; left:-30%;
	z-index:-100;
}

#shop .flexBox div {
	width:45%;
}
#shop h4 {
	margin-bottom:20px;
}
#shop .flexBox div div {
	width:100%;
	margin-top:15px;
}
#shop div > a {
	color:#000;
}
#shop .flexBox div p {
	margin-bottom:15px;
}
#shop h4 + img {
	width:100%;
}
#shop .tel {
	font-size:28px;
	font-weight:bold;
}
#shop .tel::before {
	content:url(../../common/img/tel.png);
	margin-right:10px;
}
#shop p a {
	margin-right:15px;
}
#shop .btn a {
	margin:0;
}

#gallery {
	background-color:#cdeaf3;
	padding:100px 0;
	position:relative;
	overflow:hidden;
}
#gallery > div::before {
	content:"";
	background:url(../../common/img/bg2.png) no-repeat center;
	width:575px; height:575px;
	position:absolute;
	bottom:5%; right:-20%;
}
#gallery div:not(:last-of-type) {
	margin-bottom:40px;
}
#gallery .clearfix:first-of-type img {
	height:300px; object-fit:cover;
}
#gallery li a {
	text-decoration:none;
	color:#000;
}
#gallery li p {
	text-align:center;
	font-weight:bold;
}
#gallery .clearfix {
	position:relative;
	z-index:1;
}
#sales {
	position: relative;
}
#sales::before {
	content:"";
	display:inline-block;
	background:url(../../common/img/heart.png) no-repeat center;
	width:800px; height:845px;
	position:absolute;
	bottom:-14%; left:-35%;
	z-index:-100;
}
#sales div {
	margin-bottom:40px;
}

#sales li  {
	display:flex;
	flex-direction:column;
}

#sales li p {
	margin-top:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-grow:1;
}
#sales li:nth-of-type(n+5) {
	margin-top:40px;
}


/*------------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/
@media (max-width: 768px){

	#newsList {
		flex-wrap:wrap;
		justify-content:space-between;
	}
	#newsList li {
		width:100%;
		display:flex;
		justify-content:space-between;
	}
	#newsList li:not(:last-of-type) {
		margin-right:0;
		margin-bottom:20px;
	}
	#newsList .clearfix::after {
		content:none;
	}
	.image {
		width:35%;
	}
	.thumbNailWrap img {
		height:120px;
	}
	.textWrap {
		width:60%;
	}
	.up_ymd {
		margin:0;
	}
	#philosophy ,
	#gallery {
		padding:70px 0;
	}
	#philosophy > div::before {
		top:30%; right:-90%;
	}
	#philosophy .flexBox img {
		width:100%;
	}
	#philosophy .flexBox div {
		width:100%;
	}

	#shop .flexBox div {
		width:100%;
		margin-bottom:60px;
	}

	#shop ,
	#sales {
		overflow:hidden;
	}
	#gallery .clearfix:first-of-type img {
		height:410px; object-fit:cover;
	}
	#gallery div:not(:last-of-type) {
		margin-bottom:80px;
	}
	#gallery > div::before {
		right:-65%;
	}
	#gallery li {
		width:100%;
	}
	#gallery li img ,
	#sales li img {
		height:250px;
		object-fit:cover;
	}
	#gallery li p ,
	#sales li p {
		margin:10px 0 40px;
	}
	#sales::before {
		bottom:0%;
		left:-65%;
	}
	#sales li { width:100%; }
	#sales li img { height:100%; }

}