@charset "utf-8";
/* -------------------------------------
	base
----------------------------------------*/

section h3 {
  margin-bottom: 20px;
  text-align: center;
}
section h3 + p {
  margin-bottom: 10px;
}

#sec01,#sec02,#sec03,#sec04 {
  margin-top: 30px;
}

#sec03 h4,#sec04 h4 {
  margin-top: 20px;
}

#sec04 h4 {
  margin-bottom: 20px;
}

/* -------------------------------------
	winter page style
----------------------------------------*/

.inner-box {
	background: url("../img/bg_ttl.jpg") repeat-x left top;
	padding:30px 0 0 0;
	margin:0 0 60px;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.inner-box p {
	font-size:15px;
	font-weight: normal;
	color:#3f240d;
	line-height:180%;
}

.inner-box h3 span {
	display: block;
}

.inner-box h3 strong.onlyPC {
	display: block;
	text-align: center;
	margin:20px 0 40px 0;
}

.onlyPC {
	display: block;
}

.onlySP {
	display: none;
}

.column-3 {
	text-align: center;
	overflow: hidden;
	width:960px;
	margin:30px 0 0 0;
}

.column-3 li {
	width:297px;
	float:left;
	display: block;
}

.column-3 li:nth-child(2) {
	margin:0 30px 0 30px;
}

.column-2 {
	text-align: :center;
	overflow:hidden;
	width:960px;
	margin:30px 0 0 0;
	position: relative;
}
.column-2 li {
	width:467px;
	float:left;
	font-size:15px;
	color:#3f240d;
	font-weight: bold;
	text-align: center;
}

.column-2 li:first-child {
	margin:0 25px 0 0;
	display: block;
	position: relative;
}

.column-2 li:before {
	background: url(../img/icon_triangle.jpg);
    position: absolute;
    content: '';
    top: 118px;
    left: 473px;
    width: 15px;
    height: 16px;
}

.column-2 li img {
	display: block;
	margin:0 0 10px;
}

.comment {
	text-align: left;
	border-left:1px solid #3f240d;
	border-right:1px solid #3f240d;
	border-top:1px solid #3f240d;
	border-bottom:3px solid #3f240d;
	border-radius:5px;
	padding:15px;
	font-size:13px;
	color:#3f240d;
	margin:20px 0 0 0;
}

.comment img {
	float:right;
	margin: 0 0 10px 10px;
	width:70px;
	height:auto;
}

.btn a {
	display: block;
	height:auto;
	padding:5px 15px;
	font-size:14px;
	font-weight: bold;
	color:#fff;
	text-decoration: none;
	background: #3f240d;
	margin:10px 50px 0;
	border-radius:5px;
	border:2px solid #3f240d;
	transition: color .3s;
	position:relative;
}

.btn a:hover {
	border:2px solid #3f240d;
	background: #fff;
	font-weight: bold;
	color:#3f240d;
}

.btn a:after {
	position: relative;
	content:'▶︎';
	font-size:9px;
	font-weight: normal;
	vertical-align: 2px;
	margin:0 0 0 10px;
}

.bottom-banner {
	margin:60px 0 0 0;
}

.bottom-banner li a {
	transition: color .3s;
}

.bottom-banner li a:hover img, .bottom-banner li a:hover p {
	opacity:0.7;
	
}

.bottom-banner li a p {
	text-align:left;
	font-weight: bold;
	color:#666666;
	font-size:14px;
	letter-spacing: .1em;
	margin:10px 0 0 0;
	padding:2px 0px 6px 30px;
	background: url("../img/icon_link.jpg") no-repeat left top;
}

.ttl01 {
	position: relative;
	text-align: center;
	margin:0 0 20px;
}

.ttl01 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
}

.ttl01::before {
	position: absolute;
	top: 60%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #664930;
}

.ttl02 {
	border-bottom:1px solid #3f240d;
	padding:0 0 10px;
	margin:40px 0 20px;
}

.txt-right {
	text-align: right;
	margin:15px 0 0 0;
}

#board {
	background: #af8e72;
	width:950px;
	margin:20px auto 40px;
	border-radius:5px;
	padding:5px;
}

#board #note {
	background: url("../img/bg_note.jpg");
	position: relative;
	padding:40px 30px;
	color:#3f240d;
}

#board #note figure {
	position: absolute;
	top:-20px;
	right:0;
}

#board #note dl {
	margin:0 0 10px;
}

#board #note dl:first-child {
	width:380px;
}

#board #note dl:last-child {
	width:540px;
}

#board #note dl dt {
	float:right;
}

#board #note dl:last-child dt {
	padding:5px 0 0 0;
}

#board #note dl dd {
	float:left;
	font-size:16px;
}

#board #note dl dd span {
	font-weight: bold;
	font-size:18px;
	display: block;
	margin:0 0 5px;
}


/* -------------------------------------
	tablet / sp
----------------------------------------*/

@media screen and (max-width: 768px) {
	
	h2 {
	text-align: center;
	}
	.column-3 {
		overflow: inherit;
		width:100%;
		margin:5% 0 0 0;
	}
	
	.column-3 li {
		float:none;
		width:90%;
		margin:0 auto 5%;
		text-align: center;
		display: block;
	}
	
	.column-3 li img {
		text-align: center;
	}
	
	.column-3 li:nth-child(2) {
		margin:0 auto 5%;
	}


	.inner-box {
		background: url("../img/bg_ttl.jpg") repeat-x left top;
		padding:10% 0 0 0;
		margin:0 0 5%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.inner-box p {
		font-size:14px;
		font-weight: normal;
		color:#3f240d;
		line-height:180%;
	}
	


	.inner-box h3 span {
		display: block;
	}
	
	.inner-box h3 span img {
		width:60%;
		margin:0 auto;
	}

	.inner-box h3 strong {
		display: block;
		text-align: center;
		margin:3% auto 5% auto;
		width:85%;
	}

	.column-2 {
		text-align:center;
		overflow:inherit;
		width:100%;
		margin:5% auto 0;
		position: relative;
	}
	.column-2 li {
		width:100%;
		float:none;
		font-size:14px;
		margin:0;
		color:#3f240d;
		font-weight: bold;
		text-align: center;
	}

	.column-2 li:first-child {
		margin:0 0 5% 0;
		display: block;
		position: relative;
	}

	.column-2 li:before {
		display: none;
	}

	.column-2 li img {
		display: block;
		margin:0 auto 2%;
	}

	.comment {
		text-align: left;
		border-left:1px solid #3f240d;
		border-right:1px solid #3f240d;
		border-top:1px solid #3f240d;
		border-bottom:3px solid #3f240d;
		border-radius:5px;
		padding:15px;
		font-size:13px;
		color:#3f240d;
		margin:20px 0 0 0;
	}

	.comment img {
		float:right;
		margin: 0 0 10px 10px;
		width:70px;
		height:auto;
	}

	.btn a {
		display: block;
		height:auto;
		padding:2% 5%;
		font-size:14px;
		font-weight: bold;
		color:#fff;
		text-decoration: none;
		background: #3f240d;
		margin:3% auto 0;
		border-radius:5px;
		border:2px solid #3f240d;
		transition: color .3s;
		position:relative;
	}

	.btn a:hover {
		border:2px solid #3f240d;
		background: #fff;
		font-weight: bold;
		color:#3f240d;
	}

	.btn a:after {
		position: relative;
		content:'▶︎';
		font-size:9px;
		font-weight: normal;
		vertical-align: 2px;
		margin:0 0 0 10px;
	}
	
	.ttl01 span.best3 {
		width:50%;
	}

	.bottom-banner {
		margin:10% 0 0 0;
		width:100% !important;
	}

	.bottom-banner li {
		width:80%;
	}
	.bottom-banner li a {
		transition: color .3s;
	}

	.bottom-banner li a:hover img, .bottom-banner li a:hover p {
		opacity:0.7;

	}

	.bottom-banner li a p {
		text-align:left;
		font-weight: bold;
		color:#666666;
		font-size:14px;
		letter-spacing: .1em;
		margin:10px 0 0 0;
		padding:2px 0px 6px 30px;
		background: url("../img/icon_link.jpg") no-repeat left top;
	}

	.txt-right {
		text-align: right;
		margin:5% 0 0 0;
		font-size:12px !important;
	}
	
	#last {
		width:90%;
		margin:0 auto;
	}

	#board {
		width:96%;
		margin:5% auto 5%;
		padding:2%;
	}

	#board #note {
		background: url("../img/bg_note.jpg");
		position: relative;
		padding:3%;
		color:#3f240d;
	}

	#board #note figure {
		position: relative;
		right:0px;
		top:0px;
		width:80%;
		margin:0 auto 3%;
		text-align: center;
	}

	#board #note dl {
		margin:5% 0 5%;
	}

	#board #note dl:first-child {
		width:100%;
	}

	#board #note dl:last-child {
		width:100%;
	}

	#board #note dl dt {
		float:right;
		width:30%;
		text-align: right;
	}

	#board #note dl:last-child dt {
		padding:5px 0 0 0;
	}

	#board #note dl dd {
		float:left;
		font-size:14px;
		width:65%;
	}

	#board #note dl dd span {
		font-weight: bold;
		font-size:16px;
		display: block;
		margin:0 0 5px;
	}


  section {
    margin-top: 3%;
	margin:3% 3% 0;
  }
  section h3 img {
    display: block;
  }
  section h3 + p,section h3 + p + p {
    font-size: 100%;
  }
  #top-bnr li {
    display: block;
    vertical-align: top;
    margin: 10px 0 0;
  }
  #top-bnr li:first-child {
    margin-top: 0;
  }
  .know-flow {
    width: 100%;
    overflow: inherit;
  }
  .know-flow-wrap {
    width: 100%;
  }
  .know-flow-wrap div {
    float: none;
    width: 100%;
    margin-bottom: 15px;
    padding-right: 0;
    padding-bottom: 30px;
    background-position: 50% 100%;
  }
  .know-flow-wrap div:last-child {
    margin-bottom: 0;
    background: none;
  }
  .know-flow-wrap div p {
    margin-top: 7px;
    font-size: 107.7%;
    font-weight: bold;
    font-size: 100%;
  }
  .know-flow-wrap div small {
    display: block;
    font-weight: normal;
    font-size: 92.3%;
  }
  .know-flow-wrap .know-pt {
    padding-top: 71px;
  }
  .know-flow-wrap div {
    background: url(../img/201406/bg-arrow03.gif) 50% 100% no-repeat;
  }
  .know-flow-wrap .know-pt {
    padding-top: 0;
  }
  .know-flow-type02 div {
    background-position: 50% 100%;
  }
  #movie {
    width: 100%;
  }
  #movie-title {
    float: none;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  #movie-title ul {
    margin-top: 10px;
  }
  #movie-title li {
    background-position: 3px 10px;
  }
  #movie-detail {
    float: none;
    width: 100%;
    max-width: 440px;
    margin: 30px auto 0;
    padding-top: 0;
  }
  #movie-detail iframe {
    width: 100%;
  }
  #movie-detail span {
    padding: 7px;
  }
  .recipe-rank {
    width: 100%;
    margin: 20px 0 0 0;
  }
  .recipe-rank div {
    float: none;
    width: 100%;
    margin: 20px auto 0;
  }
  .recipe-rank div:first-child {
    margin-top: 0;
  }
  .recipe-rank dt {
    text-align: center;
  }
  #other-copy-text {
    font-size: 115.4%;
    line-height: 1.7;
  }
  #sec04 p:last-child {
    margin: 15px 0 30px;
  }
	
	.onlyPC {
		display: none !important;
	}
	
	.onlySP {
		display: block !important;
	}
}


/* -------------------------------------
	Clears
----------------------------------------*/
.cl,.know-flow div,#movie,.recipe-rank,.recipe-rank dd {
  display: inline-block;
  min-height: 1%;
  display: block;
  *zoom: 1;
}
.cl:after,.know-flow div:after,#movie:after,.recipe-rank:after,.recipe-rank dd:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
}
* html .cl,* html .know-flow div,* html #movie,* html .recipe-rank,* html .recipe-rank dd {
  height: 1%;
}


/*add*/