@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よりも大きい幅のときここから////////////////////////*/

#butter h1{
	max-width:940px;
	height:auto;
}
#butter section.lead{
	font:#000000;
	font-size:115%;
	margin:10px 0 50px 0;
}





#butter section.select{
	margin:0 0 10% 0;
}
#butter section.select h2{
	width:99%;
	border-bottom:1px solid #2e2e2e;
	margin:0 0 2% 1%;
}
#butter section.select h2 img{
	width:43.3%;
	margin:0 0 0 -1%;
}
#butter section.select .selectL{
	width:56.875%;
	float:left;
	background:#fff;
	z-index:3;
}
#butter section.select .chart{
	width:96%;
	padding:0 0 5% 0;
}
#butter section.select .answer01{
	float:right;
	width:43.125%;
	background:#f6ecd1;
	margin:1.2% 0 0 0;
	z-index:2;
}
#butter section.select .answer02{
	clear:both;

}
#butter section.select .chart img{
	width:100%;
}
#butter section.select .chart .se01{ width:100%; }
#butter section.select .chart .se02-1{ width:21%; float:left; }
#butter section.select .chart .se02-2{ width:78.2%; float:left; }
#butter section.select .chart .se03L{ width:44%; float:left; }
#butter section.select .chart .se03L-1{ width:100%; }
#butter section.select .chart .se03L-2{ width:50%; float:left; }
#butter section.select .chart .se03L-3{ width:50%; float:left; }
#butter section.select .chart .se03R{ width:56%; float:left; }
#butter section.select .chart .se04-1{ width:55%; float:left; clear:both;}
#butter section.select .chart .se04-2{ width:44%; float:left; }
#butter section.select .chart .se05L{ width:32.8%; float:left; }
#butter section.select .chart .se05R{ width:67.2%; float:left; }
#butter section.select .chart .se05R-1{ width:100%; float:none; }
#butter section.select .chart .se05R-2{ width:32.738%; float:left; }
#butter section.select .chart .se05R-3{ width:34.523%; float:left; }
#butter section.select .chart .se05R-4{ width:32.738%; float:left; }
#butter section.select .chart .se06{ width:44%; float:none; }
#butter section.select .chart .se07-1{ width:22%; float:left; }
#butter section.select .chart .se07-2{ width:22%; float:left; }
/*
#butter section.select .chart p a{
	pointer-events:none;
}
*/
#butter section.select .answer01 h3{
	margin:0 0 2% 0;
	text-align:center;
}
#butter section.select .answer01 .ansBox{
	width:96%;
	margin:0 auto 2.5% auto;
	background:#fff;
	border-radius: 5px;        /* CSS3草案 */
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;
	padding:5% 0 3% 0;
}
#butter section.select .answer01 .ansBox .number{
	float:left;
	width:5.7%;
	clear:both;
}
#butter section.select .answer01 .ansBox ul{
	padding:0 2% 2.5% 2%;
	float:left;
}
#butter section.select .answer01 .ansBox ul li{
	float:left;
}
#butter section.select .answer01 .ansBox ul li p.name{
	font-weight:bold;
}
#butter section.select .answer01 .ansBox .catch{
	width:21.7%;
	float:left;
}
#butter section.select .answer01 .ansBox .comment{
	clear:both;
	margin:2% 0 0 7%;
	border:1px dotted #ff2a00;
	color:#ff2a00;
	line-height:1.3em;
	padding:1.5%;
	width:85%;
}
#butter section.select .answer01 .ansBox .comment span{
	font-weight:bold;
}
#butter section.select .answer03{
	z-index:1;
	background:#f6ecd1;
	padding-bottom:8%;
}
#butter section.select .answer03 .ansBox{
	width:58%;
	padding-top:100%;
	height:0;
	padding-bottom:30%;
}
#butter section.select .answer03 .ansBox .cont{
	width:94.5%;
	background:#ffffff;
	margin:5% 2% 0 2%;
	border-radius: 5px;        /* CSS3草案 */
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;
	padding:3% 0 32% 0;
	height:0;
}
#butter section.select .answer03 .ansBox .cont2{
	width:94.5%;
	background:#ffffff;
	margin:2% 2% 0 2%;
	border-radius: 5px;        /* CSS3草案 */
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;
	padding:3% 0 15% 0;
	height:0;
}
#butter section.select .answer03 .ansBox .number{
	float:left;
	width:5.7%;
	clear:left;
}
#butter section.select .answer03 .ansBox ul{
	padding:0 2% 1% 2%;
	float:left;
}
#butter section.select .answer03 .ansBox ul li{
	float:left;
	line-height:1.5em;
}
#butter section.select .answer03 .ansBox ul li p{
	float:left;
}
#butter section.select .answer03 .ansBox ul li p.name{
	font-weight:bold;
	font-size:90%;
}
#butter section.select .answer03 .ansBox .catch{
	width:15%;
	float:left;
}
#butter section.select .answer03 .ansBox .comment{
	clear:left;
	margin:2% 0 0 7%;
	border:1px dotted #ff2a00;
	color:#ff2a00;
	line-height:1.3em;
	padding:1.5%;
	width:85%;
}







/*---------バター比較詳細------------*/
#butter section.bgLine{
	background:url(../../contents/butter1610/bg_line.jpg) left bottom no-repeat;
	background-size:contain;
}
#butter section.bu_box{
	margin:0 0 8% 0;
}
#butter section.bu_box .bu_ttl{
	border-left:#d73332 12px solid;
	margin:5px 0;
}
#butter section.bu_box .bu_ttl p{
	font-size:190%;
	color:#904132;
	padding:0 0 0 10px;
	font-weight:bold;
	font-style: italic;
	line-height:1.3em;
}
#butter section.bu_box .bu_ttl h2{
	font-size:230%;
	font-weight:bold;
	padding:0 0 0 10px;
	line-height:1.3em;
}
#butter section.bu_box .about{
	font-size:140%;
	color:#904132;
	padding:10px 0 20px 30px;
	line-height:1.5em;
	width:85%;
}
#butter section.bu_box .bu_detail{
	clear:both;
	width:100%;
}
#butter section.bu_box .btm{
	padding:0 0 9% 0;
}
#butter section.bu_box .bu_detail p{
	width:40%;
	float:left;
}
#butter section.bu_box .bu_detail .bu_name{
	float:left;
	width:60%;
	margin:30px 0 0 0;
}
#butter section.bu_box .bu_detail .bu_name h3{
	border-left:8px solid #000000;
	padding:0 0 0 10px;
	line-height:1.1em;
	font-size:175%;
	font-weight:bold;
}
#butter section.bu_box .bu_detail .bu_name h3 span{
	font-weight:normal;
	font-size:70%;
}
#butter section.bu_box .bu_detail .bu_name h3 span.gram{
	font-weight:normal;
	font-size:70%;
	color:#fff;
	background:#000;
	padding:0.5% 1%;
	border-radius: 6px;        /* CSS3草案 */
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 6px;   /* Firefox用 */
}
#butter section.bu_box .bu_detail .bu_name h3 span.newBtn{
	background:#000 no-repeat left top;
	font-size:90%;
	color:#FFF454;
	font-weight:bold;
	padding:0.5%;
	margin:0 1% 0 0;
}
#butter section.bu_box .bu_detail .bu_name ul{
	clear:both;
}
#butter section.bu_box .bu_detail .bu_name ul li{
	float:left;
	margin:3.5% 5% 3% 0;
}
#butter section.bu_box .bu_detail .bu_name ul li.salt{
	width:60%;
}
#butter section.bu_box .bu_detail .bu_name ul li.btn{
	width:20%;
}
#butter section.bu_box .recipi{
	clear:both;
	margin:0 auto;
	width:80%;
	padding:5% 0 10% 0;
}
#butter section.bu_box .recipi h4 span{
	vertical-align:bottom;
	font-size:115%;
	text-align:left;
}
#butter section.bu_box .recipi h4{
	margin:0 0 10px 0;
	text-align:center;
}
#butter section.bu_box .recipi ul li{
	float:left;
	margin:0 10px 0 0;
	width:45%;
}
#butter section.bu_box .recipi ul.moriMT li{
	float:none;
	margin:0 auto;
	width:80%;
	text-align:center;
}
/*---------発酵バター------------*/
#butter section.fax_box{
	background:#f7efd8;
	margin:5% 0 0 0;
}
#butter section.fax_box .Hb{
	background:url(../../contents/butter1610/bg_topQ1.jpg) left top no-repeat;
	background-size:cover;
}
#butter section.fax_box .Kb{
	background:url(../../contents/butter1610/bg_topQ2.jpg) left top no-repeat;
	background-size:cover;
}
#butter section.fax_box .ttl p.q1img{
	padding:22% 0 0 5%;
	float:left;
	width:30%;
}
#butter section.fax_box .ttl p.q1lead{
	float:left;
	width:60%;
	padding:25% 0 0 0;
	font-size:115%;
	text-align: justify;
	text-justify: inter-ideograph;
}

#butter section.fax_box .ttl p.q1lead span {
  background: linear-gradient(transparent 60%, #ff0 0%);
}

#butter section.fax_box .cont_box{
	margin:0 auto;
	width:90%;
}
#butter section.fax_box .cont_box .detail{
	width:46%;
	background:url(../../contents/butter1610/bg_box.png) 0 0 no-repeat;
	background-size:cover;
	text-align:center;
}
#butter section.fax_box .cont_box .one{
	margin:0 4% 0 0;
	float:left;
}
#butter section.fax_box .cont_box .two{
	margin:0 0 0 4%;
	float:right;
}
#butter section.fax_box .cont_box .detail p.IMG img{
	width:80%;
	padding:10% 0 2% 0;
}
#butter section.fax_box .cont_box .detail h3{
	line-height:1.1em;
	font-size:150%;
	font-weight:bold;
	padding:0 0 2% 0;
}
#butter section.fax_box .cont_box .detail span.newBtn{
	background:#000 no-repeat left top;
	font-size:90%;
	color:#FFF454;
	font-weight:bold;
	padding:0.5%;
}
#butter section.fax_box .cont_box .detail h3 span{
	font-weight:normal;
	font-size:70%;
}
#butter section.fax_box .cont_box .detail p.SALT img{
	width:70%;
	padding:0 0 4% 0;
}
#butter section.fax_box .cont_box .detail p.BTN img{
	width:70%;
}
#butter section.fax_box .cont_box .detail p.BTN{
	padding:0 0 25% 0;
}

#butter section.fax_box .recipi_faq{
	clear:both;
	margin:0 auto;
	width:70%;
	padding:5% 0 5% 0;
}
#butter section.fax_box .recipi_faq h4{
	margin:0 0 10px 0;
	text-align:center;
}
#butter section.fax_box .recipi_faq ul{
}
#butter section.fax_box .recipi_faq ul li{
	float:left;
	width:48%;
}
#butter section.fax_box .recipi_faq ul li.mr2{
	padding:0 2% 0 0;
}

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



@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
#butter section.select .answer03 .ansBox ul li p.name{
	font-size:1.5vw;
}
#butter section.select .answer03 .ansBox .comment{
	font-size:1.5vw;
}


	#butter section.bu_box .bu_detail p{
		margin-right:2%;
		width:30%;
	}




	#butter section.fax_box .Hb{
		background:url(../../contents/butter1610/bg_topQ1.jpg) left top no-repeat;
		background-size:cover;
		}
	#butter section.fax_box .Kb{
		background:url(../../contents/butter1610/bg_topQ2.jpg) left top no-repeat;
		background-size:cover;
	}


}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

#butter section.select h2{
	width:98.5%;
	border-bottom:1px solid #2e2e2e;
	margin:0 0 2% 1.5%;
}
#butter section.select h2 img{
	width:60%;
	margin:0 0 0 -1.5%;
}
#butter section.select .selectL{
	width:85%;
	float:none;
	background:#fff;
	z-index:3;
	margin:0 auto;
}
#butter section.select .chart{
	width:100%;
}
#butter section.select .answer01 h3 img {
	display:none;
}
#butter section.select .answer01 h3{
	margin:0;
	background:url(../../contents/butter1610/seAttl_sp.jpg) top center no-repeat;
	background-size:100%;
	height:0;
	padding-bottom:15%;
}
#butter section.select .answer01{
	float:none;
	width:100%;
	background:#f6ecd1;
	margin:1.2% 0 0 0;
	z-index:2;
	padding:0 0 0.5% 0;
}
#butter section.select .answer03{
	z-index:1;
	background:#f6ecd1;
	padding-bottom:0;
}
#butter section.select .answer03 .ansBox{
	width:100%;
	background:#f6ecd1;
	padding:0 0 2% 0;
	height:auto;
}
#butter section.select .answer03 .ansBox .cont{
	width:96%;
	margin:0 auto 2.5% auto;
	background:#fff;
	border-radius: 5px;        /* CSS3草案 */
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;
	padding:3% 0;
	height:auto;
}
#butter section.select .answer03 .ansBox .cont2{
	width:96%;
	background:#ffffff;
	margin:0 auto 2.5% auto;
	border-radius: 5px;        /* CSS3草案 */
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;
	padding:3% 0;
	height:auto;
}
#butter section.select .answer01 .ansBox ul li p.name,
#butter section.select .answer03 .ansBox ul li p.name{
	font-size:3vw;
}
#butter section.select .answer01 .ansBox .comment,
#butter section.select .answer03 .ansBox .comment{
	font-size:2vw;
}
#butter section.select .answer03 .ansBox ul li p{
	float:none;
}
#butter section.select .answer03 .ansBox .catch{
	width:21.7%;
}
#butter section.select .answer01 .ansBox ul,
#butter section.select .answer03 .ansBox ul{
	padding:0 2% 0.5% 2%;
}
#butter section.select .answer03 .ansBox ul li{
	line-height:inherit;
}


	#butter section.bu_box .bu_detail p{
		margin-right:2%;
		width:25%;
	}
	#butter section.bu_box .bu_detail .bu_name{
		width:70%;
		margin:0;
	}
	#butter section.bu_box .bu_detail .bu_name ul li{
		margin:3.5% 5% 8% 0;
	}
	#butter section.bu_box .recipi h4{
		width:80%;
		margin:-5% auto 2% auto;
	}
	#butter section.bu_box .recipi h4 img{
		width:60%;
		margin:-3% 0 0 0;
	}
	#butter section.bu_box .recipi h4 span{
		text-align:center;
	}
	#butter section.bu_box .recipi ul.moriMT li{
		width:50%;
	}



	#butter section.fax_box .Hb{
		background:url(../../contents/butter1610/bg_topQ1.jpg) left top no-repeat;
		background-size:contain;
	}
	#butter section.fax_box .Kb{
		background:url(../../contents/butter1610/bg_topQ2.jpg) left top no-repeat;
		background-size:contain;
	}
	#butter section.fax_box .cont_box .detail h3{
		font-size:120%;
	}


}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
#butter section.select .selectL{
	width:100%;
}





	#butter section.lead{
		font-size:100%;
	}
	#butter section.bu_box .bu_ttl p{
		font-size:130%;
	}
	#butter section.bu_box .about{
		font-size:100%;
	}
	#butter section.bu_box .about br{
		display:none;
	}
	#butter section.bu_box .bu_detail{
		padding:0 0 4% 0;
	}
	#butter section.bu_box .btm{
		padding:0 0 12% 0;
	}
	#butter section.bu_box .bu_detail p{
		width:60%;
		float:none;
		margin:0 auto;
	}
	#butter section.bu_box .bu_detail .bu_name{
		float:none;
		width:80%;
		margin:0 auto;
	}
	#butter section.bu_box .bu_detail .bu_name h3{
		border-left:none;
		padding:0;
		text-align:center;
		font-size:140%;
	}
	#butter section.bu_box .bu_detail .bu_name ul li.salt{
		width:70%;
		margin:3% 0 0 0;
	}
	#butter section.bu_box .bu_detail .bu_name ul li.btn{
		width:22%;
		margin:3% 2% 0 2%;
	}
	#butter section.bu_box .recipi h4 img{
		width:100%;
	}
	#butter section.bu_box .recipi h4 span{
		display:block;
	}
	#butter section.bu_box .recipi ul li{
		float:none;
		margin:0 auto;
		width:80%;
		padding:0 0 2% 0;
 	}
	#butter section.bu_box .recipi ul.moriMT li{
		width:80%;
	}




	#butter section.fax_box .cont_box .detail{
		width:80%;
		background:url(../../contents/butter1610/bg_box.png) 0 0 no-repeat;
		background-size:cover;
		margin:0 auto;
	}
	#butter section.fax_box .cont_box .one{
		float:none;
	}
	#butter section.fax_box .cont_box .two{
		float:none;
	}
	#butter section.fax_box .ttl p.q1img{
		float:none;
		display:none;
	}
	#butter section.fax_box .ttl p.q1lead{
		float:none;
		width:90%;
		padding:25% 5% 2% 5%;
		font-size:100%;
		margin:0 auto;
	}
	#butter section.fax_box .recipi_faq{
		width:70%;
	}
	#butter section.fax_box .recipi_faq ul{
		width:70%;
		margin:0 auto;
	}
	#butter section.fax_box .recipi_faq ul li{
		float:none;
		margin:0 auto 2% auto;
		width:auto;
	}

}