@charset "UTF-8";
/* CSS Document */



/*---------センター寄せ------------*/
#breadcrumb {
	width: 78.334%;
	margin: 0 auto;
}
#main {
	float: none;
	margin: 0 auto;
}
/*---------------------------------*/
.cl:after {
  content: "";
  clear: both;
  display: block;
}
/*---------------------------------*/

/*//////////////////////1024pxよりも大きい幅のときここから////////////////////////*/
br.sp480{
	display:none;
}
#miso{
	font-size:62.5%;
}


#miso section.lead{
	margin:4% 0;
}
#miso section.lead .about{
	margin:3% 0 4% 0;
}
	#miso section.lead .about dl{
		background:url(../../contents/labo_miso/miso01_bg.jpg) 0 0 repeat-y;
		background-size:contain;
		padding:3% 0;
		border-top:2px dotted #344f39;
		border-bottom:2px dotted #344f39;
	}
	#miso section.lead .about dl dt{
		width:21%;
		padding:0 6.5%;/*計34%*/
		float:left;		
	}
	#miso section.lead .about dl dd{
		width:66%;
		float:left;
		font-size:2rem;
		line-height:1.8;
		color:#2f2f2f;
	}
	#miso section.lead .about dl dd span{
		background: linear-gradient(transparent 60%, #ffea00 60%);
		color:#2f2f2f;
	}
#miso section.lead p.head{
	width:53%;
	float:left;
}
#miso section.lead p.chara{
	width:41%;
	padding:0 0 0 6%;
	float:right;
}
#miso section.lead p.comment{
	font-size:1.8rem;
	line-height:2;
	padding:13% 0 0 0;
}
	#miso section.lead p.comment span{
		font-weight:bold;
		background: linear-gradient(transparent 60%, #ffea00 60%);
		color:#2f2f2f;
	}
/**/


#miso section.labo{
	background:url(../../contents/labo_miso/miso01_bg.jpg) 0 0 repeat-y;
	background-size:contain;
	padding:2.5%;
	color:#573019;
	margin:0 0 5% 0;
}
#miso section.labo h3.mgTB{
	padding:6% 0 2% 0;
	clear:both;
}
#miso section.labo img{
	max-width:100%;
}

/* チャットレイアウトここから */
#miso section.labo .chat-box {
    width: 100%;
    height: auto;
    overflow: hidden; 
    margin-bottom: 15px;
	font-size:1.8rem;
	line-height:1.4;
}
#miso section.labo .chat-box2 {
    width: 68%;
    height: auto;
    overflow: hidden; 
    margin-bottom: 15px;
	font-size:1.6rem;
	float:left;
}
#miso section.labo .chat-box3 {
    width: 100%;
    height: auto;
    overflow: hidden; 
    margin-bottom: 15px;
	font-size:1.6rem;
	float:left;
	position:relative;
}
#miso section.labo .chat-face {
    float: left;
    margin-right: -100px;
}
#miso section.labo .chat-face img{
    width:70px;
	max-width:100%;
}
#miso section.labo .chat-area {
    width: 100%;
    float: right;
}
#miso section.labo .chat-hukidashi {
    display: inline-block;
    padding: 18px 20px;
    margin-left: 100px;
    margin-top: 6px;
    border-radius: 10px;
	position: relative;
    background-color: #e5f5dd; 
}
#miso section.labo .chat-box3 .chat-hukidashi {
	width:60%;
}
	#miso section.labo .chat-hukidashi span.red{
		color:#ff6600;
		font-weight:bold;
	}
	#miso section.labo .chat-hukidashi span.big{
		font-size:125%;
	}
	#miso section.labo .chat-hukidashi span.nagao{
		color:#c86207;
		font-weight:bold;
		text-decoration:underline;
	}
	#miso section.labo .chat-hukidashi a{
		color:#FF6600;
		text-decoration:underline;
	}
	#miso section.labo .chat-hukidashi img{
		margin:0 0 0 70%;
	}
	
#miso section.labo .chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 35px; left: -10px;
    margin-top: -15px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #e5f5dd transparent transparent;
}
#miso section.labo .someone {
    background-color: #ffebeb;
}
#miso section.labo .someoneN {
    background-color: #fceec8;
}
#miso section.labo .someone:after {
    border-color: transparent #ffebeb transparent transparent;
}
#miso section.labo .someoneN:after {
    border-color: transparent #fceec8 transparent transparent;
}

/* チャットレイアウトここまで */

#miso section.labo .right2{
	width:28%;
	float:right;
	margin-left:-28%;
}
#miso section.labo .right3{
	width:20%;
	position:absolute;
	bottom:0;
	right:0;
}
#miso section.labo .bg1{
	background-image:url(../../contents/labo_miso/miso04_3bg.jpg) ;
	background-position:90% 90%;
	background-repeat:no-repeat;
	background-size:25%;
	padding-bottom:10%;
}

#miso section.labo ul.inn{
	margin-left:100px;
	clear:both;
}

#miso section.labo ul.inn2{
	margin-left:100px;
	position:relative;
	height: auto;
}

#miso section.labo ul.inn li{
	float:left;
}
		#miso section.labo ul.inn li.img1-1 { width:60%; }
		#miso section.labo ul.inn li.img1-2 { width:35%; }
		#miso section.labo ul.inn li.img2-1 { width:55%; }
		#miso section.labo ul.inn li.img2-2 { width:38%; padding:2% 0 0 5%; }
		#miso section.labo ul.inn li.img3-1 { width:46%; }
		#miso section.labo ul.inn li.img3-2 { width:33%; padding-left:5%; }
		#miso section.labo p.img3-3         { width:90%; }
		#miso section.labo p.img3-4         { width:100%; }
		#miso section.labo ul.inn li.img4-1 { width:100%; margin:0 0 5% 0; }
		#miso section.labo ul.inn li.img4-2 { width:100%; padding:2% 0; }
		miso section.labo p.img4-3          { width:100%; }
		#miso section.labo p.img5-1         { width:100%; }
		#miso section.labo p.img5-2         { width:100%; }
		#miso section.labo ul.inn li.img5-3 { width:20%; }
		#miso section.labo ul.inn li.img5-4 { width:45%; }
		#miso section.labo p.img6-1         { width:100%; }
		#miso section.labo ul.inn li.img6-2 { width:80%; }
		#miso section.labo ul.inn2 p.img6-3 { position:absolute; top:65%; left:0; width:25%; height:100%; }
		#miso section.labo ul.inn2 p.img6-4 { position:relative; left:25%; width:50%; height:100%; margin-bottom:4%; }
		#miso section.labo p.img6-5         { width:100%; }
		#miso section.labo ul.inn li.img6-6 { width:100%; padding:2% 0; }
		#miso section.labo ul.inn li.img6-7 { width:20%; }
		#miso section.labo ul.inn li.img6-8 { width:60%; }
		#miso section.labo p.img7-1         { }/*6-1と同じ*/
		#miso section.labo ul.inn li.img7-2 { width:100%; }
		#miso section.labo ul.inn li.img7-3 { width:100%; margin:0 0 5% 0; }
		#miso section.labo ul.inn li.img7-4 { width:50%; }
		#miso section.labo ul.inn li.img7-5 { width:30%; }
		#miso section.labo ul.inn li.img7-6 { width:100%; }
		#miso section.labo ul.inn li.img7-7 { width:100%; margin:0 0 5% 0; }
		#miso section.labo p.img7-8         { width:100%; }
		#miso section.labo ul.inn li.img7-9 { width:33%; margin:30px 0 0 0; }
		#miso section.labo ul.inn li.img7-10{ width:45%; margin:30px 0 0 0; }
		
		
/*下部味噌レシピ*/
#miso section.labo .homemade a{
	display:block;
}
#miso section.labo .homemade img{
	width:100%;
}
#miso section.labo .homemade p.this{
	width:65%;
	margin:0 auto;
}
#miso section.labo .homemade .buyit{
	width:90%;
	margin:5% auto;
	position:relative;
	padding:50px 0 0 0;
}
	#miso section.labo .homemade .buyit h4{
		width:380px;
		text-align:center;
		position:absolute;
		top:0;
		left:50%;
		transform:translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	#miso section.labo .homemade .buyit h4 img{
		width:100%;
	}
#miso section.labo .homemade .buyit .list{
	background-color:#f2eedd;
	background-image:url(../../contents/labo_miso/miso08_list_bg.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	background-size:100%;
	margin:0 0 3% 0;
}
	#miso section.labo .homemade .buyit .list ul{
		width:95%;
		padding:5% 0 3% 5%;
	}
	#miso section.labo .homemade .buyit .list ul li{
		width:23%;
		float:left;
		padding-right:2%;
		text-align:center;
	}
		#miso section.labo .homemade .buyit .list ul li h5 a{
			font-size:1.85rem;
			line-height:1.3;
			color:#573019;
			height:3.5em;
			padding:2% 0 0 0;
		}
		#miso section.labo .homemade .buyit .list ul li h5.min a{
			font-size:1.85rem;
			line-height:1.3;
			letter-spacing:-0.1em;
			color:#573019;
			height:3.5em;
			padding:2% 0 0 0;
		}
		#miso section.labo .homemade .buyit .list ul li p.btn{
			width:80%;
			margin:0 auto;
		}
/**/

#miso section.nisikawa{
	background:url(../../contents/labo_miso/miso09_bg.jpg) 0 0 repeat-y;
	background-size:contain;
	padding:2.5%;
	color:#573019;
	margin:0 0 5% 0;
}
#miso section.nisikawa ul{
	padding:0 0 3% 0;
}
#miso section.nisikawa ul li{
	float:left;
}
#miso section.nisikawa ul li.pf1{ width:53%; padding:0 0 0 3%; }
#miso section.nisikawa ul li.pf2{ width:40%; padding:0 0 0 2%; }
#miso section.nisikawa ul li.recipe{ width:49%; padding:0 2% 0 0; }
#miso section.nisikawa ul li.la{ margin:0 -2% 0 0; }



/*//////////////////////1024pxよりも大きい幅のときここまで////////////////////////*/

@media screen and (max-width: 1209px) {
/* 1209pxまでの幅の場合に適応される */
#miso section.lead p.comment br{
	display:none;
}
}

@media screen and (max-width: 1023px) {
/* 1023pxまでの幅の場合に適応される */
#miso section.lead .about dl dd{
	font-size:2.2vw;
	line-height:1.8;
}
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
#miso section.lead .about dl dt{
	width:28%;
	padding:0 4%;/*計34%*/
	float:left;		
}
#miso section.lead .about dl dd{
	width:60%;
	font-size:1.6rem;
	line-height:1.8;
}
#miso section.lead .about dl dd br{
	display:none;
}
#miso section.lead p.head{
	width:70%;
}
#miso section.lead p.chara{
	width:28%;
	padding:0 0 0 2%;
}
#miso section.lead p.comment{
	font-size:1.8rem;
	line-height:2;
	padding:20% 0 0 0;
	text-align:justify;
}

/* チャットレイアウトここから */
#miso section.labo .chat-box {
	font-size:1.6rem;
}
#miso section.labo .chat-box2 {
	font-size:1.6rem;
    width: 100%;
}
#miso section.labo .chat-box3 {
   font-size:1.6rem;
   width: 100%;
}
#miso section.labo .chat-face {
    float: left;
    margin-right: -65px;
}
#miso section.labo .chat-face img{
    width:50px;
	max-width:100%;
}
#miso section.labo .chat-area {
    width: 100%;
    float: right;
}
#miso section.labo .chat-hukidashi {
    display: inline-block;
    padding: 18px 20px;
    margin-left: 65px;
    margin-top: 0;
    border-radius: 10px;
	position: relative;
    background-color: #e5f5dd; 
	text-align:justify;
}
#miso section.labo .chat-box3 .chat-hukidashi {
	width:auto;
}
	#miso section.labo .chat-hukidashi span.red{
		color:#ff6600;
		font-weight:bold;
	}
	#miso section.labo .chat-hukidashi span.big{
		font-size:125%;
	}
	#miso section.labo .chat-hukidashi span.nagao{
		color:#c86207;
		font-weight:bold;
		text-decoration:underline;
	}
	#miso section.labo .chat-hukidashi a{
		color:#FF6600;
		text-decoration:underline;
	}
	
#miso section.labo .chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 30px; left: -10px;
    margin-top: -15px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #e5f5dd transparent transparent;
}
#miso section.labo .someone {
    background-color: #ffebeb;
}
#miso section.labo .someoneN {
    background-color: #fceec8;
}
#miso section.labo .someone:after {
    border-color: transparent #ffebeb transparent transparent;
}
#miso section.labo .someoneN:after {
    border-color: transparent #fceec8 transparent transparent;
}
/* チャットレイアウトここまで */

#miso section.labo h3.mgTB{
	padding:12% 0 5% 0;
}
#miso section.labo .right2{
	width:auto;
	float:none;
	margin-left:65px;
	margin-bottom:15px;
}
#miso section.labo .right3{
	width:auto;
	position:static;
	margin-left:65px;
	margin-top:38%;
}
#miso section.labo .bg1{
	background-size:20%;
	padding-bottom:50px;
}
	
#miso section.labo ul.inn,
#miso section.labo ul.inn2{
	margin-left:65px;
}

		#miso section.labo ul.inn li.img1-1 { width:80%; }
		#miso section.labo ul.inn li.img1-2 { width:80%; }
		#miso section.labo ul.inn li.img2-1 { width:55%; }
		#miso section.labo ul.inn li.img2-2 { width:38%; padding:5% 0 0 5%; }
		#miso section.labo ul.inn li.img3-1 { width:80%; }
		#miso section.labo ul.inn li.img3-2 { width:60%; padding:0; margin:0 0 5% 0; }
		#miso section.labo p.img3-3         { width:70%; }
		#miso section.labo p.img3-4         { width:40%; }
		#miso section.labo ul.inn li.img4-1 { width:100%; }
		#miso section.labo ul.inn li.img4-2 { width:80%; padding:2% 0 5% 0; }
		#miso section.labo p.img4-3         { width:35%; }
		#miso section.labo p.img5-1         { width:40%; }
		#miso section.labo p.img5-2         { width:45%; }
		#miso section.labo ul.inn li.img5-3 { width:26%; }
		#miso section.labo ul.inn li.img5-4 { width:50%; }
		#miso section.labo p.img6-1         { width:100%; }
		#miso section.labo ul.inn li.img6-2 { width:80%; }
		#miso section.labo ul.inn2 p.img6-3 { position:absolute; top:65%; left:0; width:25%; height:100%; }
		#miso section.labo ul.inn2 p.img6-4 { position:relative; left:25%; width:50%; height:100%; margin-bottom:4%; }
		#miso section.labo p.img6-5         { width:50%; }
		#miso section.labo ul.inn li.img6-6 { width:80%; }
		#miso section.labo ul.inn li.img6-7 { width:20%; }
		#miso section.labo ul.inn li.img6-8 { width:60%; }
		#miso section.labo p.img7-1         { }/*6-1と同じ*/
		#miso section.labo ul.inn li.img7-2 { width:40%; margin:0 0 3% 0; }
		#miso section.labo ul.inn li.img7-3 { width:100%; }
		#miso section.labo ul.inn li.img7-4 { width:60%; }
		#miso section.labo ul.inn li.img7-5 { width:40%; margin:0 0 5% 0; }
		#miso section.labo ul.inn li.img7-6 { width:90%; margin:0 0 3% 0; }
		#miso section.labo ul.inn li.img7-7 { width:100%; }
		#miso section.labo p.img7-8         { width:60%; }
		#miso section.labo ul.inn li.img7-9 { width:42%; margin:30px 0 0 0; }
		#miso section.labo ul.inn li.img7-10{ width:58%; margin:30px 0 0 0; }
/**/

#miso section.labo .homemade p.this{
	width:80%;
	margin:0 auto;
}		
#miso section.labo .homemade .buyit .list ul{
		width:95%;
		padding:5% 0 3% 12%;
	}
	#miso section.labo .homemade .buyit .list ul li{
		width:35%;
		float:left;
		padding-right:10%;
		padding-bottom:8%;
		text-align:center;
	}
		#miso section.labo .homemade .buyit .list ul li h5 a{
			font-size:3.5vw;
		}
		#miso section.labo .homemade .buyit .list ul li h5.min a{
			font-size:3.5vw;
			letter-spacing:auto;	
		}
		#miso section.labo .homemade .buyit .list ul li p.btn{
			width:70%;
		}	
/**/

#miso section.nisikawa ul li{
	float:none;
}
#miso section.nisikawa ul li.pf1{ width:100%; padding:0 0 0 0; margin:0 auto; text-align:center; }
#miso section.nisikawa ul li.pf2{ width:100%; padding:0 0 0 0; margin:0 auto; text-align:center; }
#miso section.nisikawa ul li.recipe{ width:80%; padding:0 0 0 0; margin:0 auto 2% auto; text-align:center; }
#miso section.nisikawa ul li.la{ margin:0 auto 2% auto; }		
		
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
br.sp480{
	display:block !important;
}
#miso section.lead .about dl dt{
	width:65%;
	padding:0;
	margin:0 auto;
	text-align:center;
	float:none;		
}
#miso section.lead .about dl dd{
	width:90%;
	margin:0 auto;
	font-size:1.6rem;
	line-height:1.5;
	float:none;
	padding:2% 0 0 0;
}
#miso section.lead p.head{
	width:90%;
	margin:0 auto;
	float:none;
}
#miso section.lead p.chara{
	width:58%;
	padding:0 21%;
	margin:0 auto;
}
#miso section.lead p.comment{
	font-size:1.6rem;
	line-height:1.5;
	padding:20% 0 0 0;
	width:90%;
	margin:0 auto;
}
/**/

#miso section.labo ul.ht:after{
	content: "";
    display: block;
    padding-bottom: 45%; 
}
#miso section.labo .bg1{
	background-size:30%;
	padding-bottom:20%;
}
#miso section.labo .right3{
	margin-top:65%;
}

		#miso section.labo ul.inn li.img1-1{ width:100%; }
		#miso section.labo ul.inn li.img1-2{ width:100%; }
		#miso section.labo ul.inn li.img2-1{ width:100%; }
		#miso section.labo ul.inn li.img2-2{ width:80%; padding:2% 0 0 0; }
		#miso section.labo ul.inn li.img3-1 { width:100%; }
		#miso section.labo ul.inn li.img3-2 { width:100%; }
		#miso section.labo p.img3-3         { width:100%; }
		#miso section.labo p.img3-4         { width:65%; }
		#miso section.labo ul.inn li.img4-1 { width:100%; }
		#miso section.labo ul.inn li.img4-2 { width:100%; }
		#miso section.labo p.img4-3         { width:50%; }
		#miso section.labo p.img5-1         { width:65%; }
		#miso section.labo p.img5-2         { width:100%; }
		#miso section.labo ul.inn li.img5-3 { width:50%; }
		#miso section.labo ul.inn li.img5-4 { width:90%; }
		#miso section.labo p.img6-1         { width:100%; }
		#miso section.labo ul.inn li.img6-2 { width:100%; }
		#miso section.labo ul.inn2 p.img6-3 { position:absolute; top:33%; left:0; width:50%; height:100%; }
		#miso section.labo ul.inn2 p.img6-4 { position:absolute; top:78%; left:0; width:95%; height:100%; margin-bottom:4%; }
		#miso section.labo p.img6-5         { width:90%; margin:0 0 5% 0; }
		#miso section.labo ul.inn li.img6-6 { width:100%; }
		#miso section.labo ul.inn li.img6-7 { width:50%; }
		#miso section.labo ul.inn li.img6-8 { width:100%; }
		#miso section.labo p.img7-1         { }/*6-1と同じ*/
		#miso section.labo ul.inn li.img7-2 { width:80%; }
		#miso section.labo ul.inn li.img7-3 { width:100%; }
		#miso section.labo ul.inn li.img7-4 { width:100%; }
		#miso section.labo ul.inn li.img7-5 { width:100%; }
		#miso section.labo ul.inn li.img7-6 { width:90%; }
		#miso section.labo ul.inn li.img7-7 { width:100%; }
		#miso section.labo p.img7-8         { width:100%; }
		#miso section.labo ul.inn li.img7-9 { width:65%; margin:30px 0 0 0; }
		#miso section.labo ul.inn li.img7-10{ width:100%; margin:0 0 0 0; }
		
/**/
#miso section.labo .homemade .buyit{
	width:100%;
	padding:8% 0 0 0;
}
#miso section.labo .homemade .buyit h4{
		width:80%;
}
#miso section.labo .homemade .buyit .list{
	background-size:200%;
}
#miso section.labo .homemade .buyit .list ul{
	padding:12% 0 3% 5%;
}
	#miso section.labo .homemade .buyit .list ul li{
		width:45%;
		float:left;
		padding-right:5%;
		padding-bottom:8%;
		text-align:center;
	}
		#miso section.labo .homemade .buyit .list ul li h5 a{
			font-size:4.8vw;
		}
		#miso section.labo .homemade .buyit .list ul li h5.min a{
			font-size:4.8vw;
			letter-spacing:auto;	
		}
		#miso section.labo .homemade .buyit .list ul li p.btn{
			width:80%;
		}
/**/
#miso section.nisikawa ul li.pf1{ width:80%; }
#miso section.nisikawa ul li.pf2{ width:80%; }
#miso section.nisikawa ul li.recipe{ width:100%; padding:0 0 0 0; margin:0 auto; text-align:center; }
		
}