@charset "utf-8";
@import url（ 'https://fonts.googleapis.com/css2？family = M + PLUS + 1p＆ display = swap'）;

/**/


/*Base Layout*/





/*左ナビ
--------------------*/
#left_nav{
	float:left;
	background:rgba(89, 185, 198, 0.7)
	background:-webkit-linear-gradient(top,#59b9c6,#24140e);
	background:linear-gradient(to bottom,#59b9c6,#24140e);
	width:250px;
	margin:0;
	padding:15px;
	line-height:2.2;
}

#left_nav h2 {
	font-size:1.2em;
	border-bottom:#fff 1px solid;
	margin-bottom:10px;
}

#left_nav h3 {
	font-size:1.0em;
	text-indent:1em;
}

#left_nav li {
	font-size:0.9em;
	text-indent:2em;
}

/*右コンテンツ
--------------------*/

.conwrap {
	width:730px;
	float:right;
	padding:0;
	overflow:hidden;
}

#lim_contents ,
#whole_contents ,
#piece_contents ,
#cream_contents ,
#another_contents ,
#allergies_contents {
	width:700px;
	height:300px;
	margin-bottom:10px;
	background:#eee;
	padding:0;
	overflow:hidden;
}

.text_lim {
	float:left;
	background:#eee;
	color:#24140e;
	width:300px;
	margin:0;
	padding:15px;
}

.text_lim h2 {
	font-size:1.2em;
	border-bottom:#000 1px solid;
	margin-bottom:5px;
	padding:10px;
}

.text_lim p {
	font-size:0.8em;
	line-height:2.2em;
	padding:10px;
}

.img_lim {
	width:350px;
	float:right;
	margin:0;
	padding-top:15px;
	padding-right:10px;
}

#topics {
	clear:both;
}

/*Products
--------------------*/

#lim_product ,
#whole_product ,
#piece_product ,
#cream_product {
	clear:both;
	width:700px;
	margin-bottom:80px;
}

#lim_product img ,
#whole_product img ,
#piece_product img ,
#cream_product img {
	width:210px;
}

#lim_product ul ,
#whole_product ul ,
#piece_product ul ,
#cream_product ul {
	overflow:hidden;
}

#lim_product li ,
#whole_product li ,
#piece_product li ,
#cream_product li {
	float:left;
	margin:10px;
}

#lim_product li:nth-child(3) ,
#whole_product li:nth-child(3) ,
#piece_product li:nth-child(3) ,
#cream_product li:nth-child(3){
	margin-right:-10px;
}

#lim_product h3 ,
#whole_product h3 ,
#piece_product h3 ,
#cream_product h3 {
	font-size:1.5em;
	border-bottom:#ffefd5 1px solid;
	margin:10px;
}

#lim_product h4 ,
#whole_product h4 ,
#piece_product h4 ,
#cream_product h4 {
	clear:both;
	font-size:0.9em;
	font-family: 'M PLUS 1p', sans-serif;
}


/*responsive
--------------------*/
@media screen and (max-width:750px){

	#lim_contents ,
	#whole_contents ,
	#piece_contents ,
	#cream_contents ,
	#another_contents ,
	#allergies_contents {
	width:100%;
	height:100%;
	}

	.img_lim {
		float:none;
		width:100%;
		padding:0;
	}

	.text_lim {
		float:none;
		width:100%;
		height:100%;
	}

	.text_lim h2 {
		width:90%;
	}

	.text_lim p {
		width:90%;
	}
	
	.conwrap {
		float:none;
		width:100%;
		margin:0 auto;
		position:relative;
	}

	#lim_product ,
	#whole_product ,
	#piece_product ,
	#cream_product ,
	#another_product ,
	#allergies_product {
	width:100%;
	}

	#lim_product img ,
	#whole_product img ,
	#piece_product img ,
	#cream_product img {
		float:none;
		width:90%;
	}

	#lim_product li ,
	#whole_product li ,
	#piece_product li ,
	#cream_product li {
		float:none;
		width:90%;
		margin-left:20px;
		margin-bottom: 50px;
	}

	.modalArea h5,
	.modalArea2 h5,
	.modalArea3 h5,
	.modalArea4	h5 {
	padding:2% 10%;
	}

	.modalArea p,
	.modalArea2 p,
	.modalArea3 p,
	.modalArea4	p {
	padding:2% 10%;
	line-height:1.2em;
	}

	#lim_product h3 ,
	#whole_product h3 ,
	#piece_product h3 ,
	#cream_product h3 {
	width:30%;
	margin-bottom:5px;
	margin-left:20px;
	}
	
	#lim_product h4 ,
	#whole_product h4 ,
	#piece_product h4 ,
	#cream_product h4 {
/*	margin-bottom:30px;*/
	}
}

/*modal
--------------------*/
.modal-inner {
	position: relative;
}

button {
	padding: 8px;
	background: #fff;
	border: 1px solid #282828;
	border-radius: 10px;
	cursor: pointer;
	color:#8b0000;
	font-weight:bold;
}

button:hover {
	opacity:0.7;
}

.modalArea,
.modalArea2,
.modalArea3,
.modalArea4
 {
	display: none;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color:#24140e;
}

.modalArea h5,
.modalArea2 h5,
.modalArea3 h5,
.modalArea4 h5 {
	font-size:1.3em;
	border-bottom:#8b0000 1px solid;
	margin-bottom:15px;
	color:#8b0000;
}

.gm {
	margin-left:20px;
	display:inline;
	padding: 5px;
	background: #8b0000;
	border-radius: 10px;
	cursor: pointer;
	color:#fff;
	font-size:0.8em;
}


.modalArea p,
.modalArea2 p,
.modalArea3 p,
.modalArea4 p {
	font-size:0.9em;
}

.modalBg,
.modalBg2,
.modalBg3,
.modalBg4 {
	width: 100%;
	height: 100%;
	background: rgba(30, 30, 30, 0.9);
}

.modalWrapper,
.modalWrapper2,
.modalWrapper3,
.modalWrapper4 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 500px;
	height: 315px;
	padding: 10px 30px;
	background: #fff;
}

.closeModal, 
.closeModal2, 
.closeModal3,
.closeModal4 {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	cursor: pointer;
	color:#24140e;
}

.is-open {
	display: block;
}

--------------------*/

/*introduction
--------------------*/


/*topics
--------------------*/


/*footer
--------------------*/


/*SNS
--------------------*/

/*
=========================================
	Utilities
=========================================
*/


/* clearfix */
.clearfix:after {
	content: ""; 
	display: block; 
	clear: both; 
}
.clearfix{
	zoom:1;
}