@charset "utf-8";

/*============================================================
 FOOD PAIRING用
============================================================*/
.bold { font-weight: bold; }
.small { font-size: 14px !important; }

/* メイン */
.main_photo {
    width: 100%;
    height: 330px;
    background: url(../img/food/bg.jpg) center center no-repeat;
    background-size: cover;
    padding-top: 60px;
    box-sizing: border-box;
}
.main_photo.beef { background-image: url(../img/food/photo_beef.jpg); height: 415px; }
.main_photo.pork { background-image: url(../img/food/photo_pork.jpg); height: 415px; }
.main_photo.lamb { background-image: url(../img/food/photo_lamb.jpg); height: 415px; }
.main_photo.salmon { background-image: url(../img/food/photo_salmon.jpg); height: 415px; }


/* トップページ
----------------------------------------*/
.pairing {
    background-color: #fff7e5;
    text-align: left;
}
.pairing h2 {
    margin-bottom: 50px;
    text-align: center;
}
.pairing h3 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 20px;
    text-align: center;
}
.pairing h4 {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    background-color: #be9d09;
    margin-bottom: 20px;
    padding: 0 10px;
}
.pairing p {
	line-height: 1.7;
    margin-bottom: 20px;
}
.pairing ul {
    width: 950px;
    border: 1px solid #be9d09;
    margin: 0 0 50px 0;
    padding: 0;
}
.pairing ul li {
    float: left;
    width: 197px;
    border-left: 1px solid #be9d09;
    margin: 0;
    padding: 20px 20px 5px 19px;
}
.pairing ul li:first-child { border-left: none; }
.pairing ul li h5,
.pairing ul li h6 {
    color: #be9d09;
    font-size: 18px;
    border-bottom: 1px solid #be9d09;
    margin: 0 0 10px 0;
}
.pairing ul li h6 { font-size: 16px; }
.pairing ul li h5 span {
    font-size: 14px;
    font-weight: normal;

}
.pairing ul li p {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.pairing ul.other { margin-bottom: 70px; }
.pairing ul.other li {
    width: 435px;
    border-left: none;
    margin: 0;
    padding: 20px 19px 5px 19px;
}
.pairing ul.other li.last {
    width: 910px;
    border-top: 1px solid #be9d09;
}
.pairing ul.other li p { margin-bottom: 0 !improtant; }


.bg_white {
	background-color: #fff;
	padding-bottom: 60px;
}
.bg_white h2 { margin-bottom: 50px; }


/* レシピ
----------------------------------------*/
.recipe {
    background-color: #fff7e5;
    text-align: left;
}
.recipe h1 {
    font-size: 26px;
    line-height: 1.4;
    border-top: 1px solid #be9d09;
    border-bottom: 1px solid #be9d09;
    margin-bottom: 40px;
    padding: 15px 0;
    text-align: center;
}
.recipe h2 {
    margin-bottom: 50px;
    text-align: center;
}

.recipe dl {
    width: 950px;
    margin-bottom: 30px;
}
.recipe dl dd {
    float: left;
    width: 475px;
    margin: 0;
}
.recipe dl dd.howto {
    float: right;
    width: 450px;
    border-left: 1px solid #be9d09;
    margin-bottom: 50px;
    padding-left: 24px;
}

.recipe dl dd ul {
    margin: 0 0 30px 0;
    padding: 0;
}
.recipe dl dd ul li {
    font-size: 16px;
	padding-left: 1.2em;
	text-indent: -1.2em;
}
.recipe dl dd.howto ul li {
    margin-bottom: 25px;
	padding-left: 1.7em;
	text-indent: -1.7em;
}

dl.recommend {
    padding-top: 20px;
    text-align: left;
}
dl.recommend dt {
    float: left;
    width: 475px;
    text-align: center;
}
dl.recommend dd {
    float: left;
    width: 360px;
    margin: 0;
}
dl.recommend dd h3 { margin-bottom: 10px; 
}
dl.recommend dd h3,
dl.recommend dd p.small { text-align: center; }

dl.recommend dd p { margin-bottom: 30px; }
dl.recommend dd p.rec { color: #004065; }
dl.recommend dd a { color: #004065; }
dl.recommend dd a:hover { color: #4d7a94; }


/* ボタン
----------------------------------------*/
ul.btn img.bg { width: 100%; }
ul.btn {
	width: 950px;
	margin: 10px auto 0 auto;
	padding: 0;
}
ul.btn li {
	position: relative;
	float: left;
	width: 460px;
	margin: 0 0 10px 10px;
	padding: 0;
	overflow: hidden;
}
ul.btn.layer li { width: 178px; }
ul.btn.layer li:first-child  { width: 366px; }

ul.btn li div::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	box-shadow: 0 0 0 30px rgba(0,0,0,0.4);
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
ul.btn li:hover div::before {
	opacity: 0;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}
ul.btn li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-size: 0;
	text-indent: 200%;
	white-space: nowrap;
	z-index: 1000;
}