﻿html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
body{
	line-height:1
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display:block
}
nav ul{
	list-style:none
}
blockquote,q{
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after{
	content:'';
	content:none
}
a{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
ins{
	background-color:#ff9;
	color:#000;
	text-decoration:none
}
mark{
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold
}
del{
	text-decoration:line-through
}
abbr[title],dfn[title]{
	border-bottom:1px dotted;
	cursor:help
}
table{
	border-collapse:collapse;
	border-spacing:0
}
hr{
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0
}
input,select{
	vertical-align:middle
}
html{
	font-size:62.5%
}
ul,ol{
	list-style:none
}
a{
	text-decoration:none
}
img{
	max-width:100%;
	vertical-align:bottom
}
p{
	line-height:1.7em
}

/*-----------------------------------------------------------------*/

#headerKetchup{
	clear:both;
	width:960px;
	height:120px;
	margin:5px auto 0
}

#contentsWrap {
	background: #e5e3dc url(../youshoku/img/bg_cloth.png) center top -200px repeat-y;
	background-size: 100% auto;
	margin-bottom: 50px;
}

.l-main{
	position:relative;
	width:100%;
	min-width:980px;
	font-size:1.4rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	color:#333;
	margin: 0 auto;
	overflow:hidden;
}

.hdrLine {
	width: 100%;
	height: 14px;
}



/*-----------------------------------------------------------------*/

.cover{
	width:100%;
	min-width: 960px;
	margin-bottom: 40px;
	background: url(../youshoku/img/main_bg.png) center top no-repeat;
	background-size: 100% 100%;
}

.cover .inner{
	width:960px;
	height:685px;
	margin:0 auto;
	position:relative
}

.cover .inner .flare{
	position:absolute;
	top: 0px;
  left: 40px;
	width: 243px;
	z-index: 0;
	opacity: 0;
	animation: rotate-flare 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	animation-delay: 2.0s;
	animation-fill-mode: forwards;
}
@keyframes rotate-flare {
	0%  {
		transform: rotate(-20deg);
		opacity: 0;
	}
	100%  {
		transform: rotate(0);
		opacity: 1;
	}
}


.cover .title {
	position: absolute;
	left: 454px;
  top: 116px;
	z-index: 10;
	opacity: 0;
}
.cover .title img {
	width: 343px;
}

.cover .package {
	position: absolute;
	width: 281px;
	left: 152px;
	top: 107px;
	z-index: 10;
	opacity: 0;
}

.cover .new {
	position: absolute;
	width: 144px;
	left: 110px;
  top: 82px;
	z-index: 20;
	opacity: 0;
}

.cover .dish {
	position: absolute;
	width: 547px;
	left: 334px;
	top: 354px;
	opacity: 0;
}

.cover .new.show,
.cover .package.show {
	opacity: 1;
	transition: 1s;
}
.cover .title.show,
.cover .dish.show {
	opacity: 1;
	transition: 1.7s;
}

.cover .title.show {
	top: 66px;
}

.cover .new.show {
	top: 32px;
}

.cover .package.show {
	top: 57px;
}

.cover .dish.show {
	top: 304px;
}


/*-----------------------------------------------------------------*/

#contents {
	position: relative;
}

.contentsInner{
	width:960px;
	margin:0 auto;
	padding-bottom: 50px;
}

.contentsInner h2 {
	text-align: center;
	margin-bottom: 30px;
}

.contentsInner h2 img {
	width: 534px;
}

.contentsInner img.recipe1,
.contentsInner img.recipe2,
.contentsInner img.recipe3 {
	position: relative;
	opacity: 0;
	top: 50px;
}

.contentsInner img.show{
	opacity: 1;
	top: 0px;
	transition: 1s;
}

.contentsInner a img {
	transition: 0.3s;
}
.contentsInner a:hover img {
	transition: 0.3s;
	opacity: 0.7;
}

.contentsInner .recipe1 {
	position: relative;
	text-align: left;
	margin-bottom: 50px;
}
.contentsInner .recipe1 img {
	width: 834px;
}

.contentsInner .recipe1::before {
	content: '';
	position: absolute;
	top: -56px;
	right: -80px;
	width: 238px;
	height: 464px;
	background: url(../youshoku/img/img_spoon.png) center center no-repeat;
}



.contentsInner .recipe2 {
	position: relative;
	text-align: right;
	margin-bottom: 50px;
}
.contentsInner .recipe2 img {
	width: 825px;
}

.contentsInner .recipe2::before {
	content: '';
	position: absolute;
	top: 5px;
	left: -70px;
	width: 226px;
	height: 473px;
	background: url(../youshoku/img/img_folk.png) center center no-repeat;
}


.contentsInner .recipe3 {
	position: relative;
	text-align: left;
	margin-bottom: 50px;
}
.contentsInner .recipe3 img {
	width: 834px;
}

.contentsInner .recipe3::before {
	content: '';
	position: absolute;
	top: 62px;
	right: -80px;
	width: 276px;
	height: 439px;
	background: url(../youshoku/img/img_knife.png) center center no-repeat;
}



.btnProduct {
	width: 694px;
}

#linkBtn {
	position: relative;
	text-align: center;
	padding: 50px 0 115px;
	background: #002c69;
}

#linkBtn img { 
	transition: 0.2s;
}

#linkBtn img:hover {
	opacity: 0.7;
	transition: 0.2s;
}

#linkBtn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: linear-gradient(to right,  #a07f27 8%,#e2c857 32%,#b38825 65%,#b38825 65%,#9f7f26 100%);
}

#linkBtn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: linear-gradient(to left,  #a07f27 8%,#e2c857 32%,#b38825 65%,#b38825 65%,#9f7f26 100%);
}



