@charset "UTF-8";

/* top */
.mainVisual {
	position: relative;
	z-index: 2;
	height: 588px;
	background: url(../../img/top_main_bg_pc.jpg) #fff no-repeat top center;
	overflow: hidden;
	background-size: auto 100%;
}
.mainVisual .inner {
	position: relative;
	width: 100%;
	background: none;
	margin-top: 0;
}
.mainVisual h1,
.mainVisual p {
	text-align: center;
	margin: 0;
}
.mainVisual h1 {
	padding-top: 13px;
}
.mainVisual .txt {
	padding: 10px 0 15px;
}
.mainVisual .steam {
	position: absolute;
	display: block;
}
.mainVisual .steam img {
	position: relative;
	display: block;
	top: 0;
	-webkit-transform: translate3d(0,0,0),;
	transform: translate3d(0,0,0),;
	transition: all 1.6s cubic-bezier(0.47, 0.4, 0.71, 0.71);
}
.mainVisual .steam.img01 img,
.mainVisual .steam.img03 img {
	left: 0;
}
.mainVisual .steam.img02 img,
.mainVisual .steam.img04 img {
	right: 0;
}
.mainVisual .img01 { top: 0px; left: calc( 50% - 550px); z-index: 2; }
.mainVisual .img02 { top: 0px; right: calc( 50% - 535px); z-index: 2; }
.mainVisual .img03 { top: 198px; left: calc( 50% - 480px); z-index: 1; }
.mainVisual .img04 { top: 175px; right: calc( 50% - 500px); z-index: 1; }
.mainVisual .pkg .slider {
	display: none !important;
}
.nav {
	position: relative;
	z-index: 4;
}
.gyoza .cont01 {
	padding-bottom: 70px;
	background: url(../../img/gyoza_cont01_bg01_pc.png) no-repeat center top 0px,
		url(../../img/gyoza_cont01_bg02_pc.png) no-repeat center bottom 30px;
}
.gyoza .cont01 .mainttl {
	padding: 105px 0 65px;
	margin: -14px auto 0;
	text-align: center;
}
.gyoza .cont01 .mainttl + img {
	max-width: 980px;
	width: 100%;
	padding: 0 0 4.5vw;
	box-sizing: border-box;
}
.gyoza .cont01 h4 {
	margin-bottom: 40px;
}

.gyoza .cont01 .flex {
	margin-bottom: 50px;
}

.gyoza .cont02 { background: url(../../img/gyoza_cont02_bg_pc.gif) #d70000 center; }

.gyoza .cont02 .ttl {
	padding: 72px 0 31px;
}
.gyoza .cont02 .flex a {
	padding: 20px 20px 0;
	margin: 0 0 75px;
	background: #fff;
	display: block;
}
.gyoza .cont02 .flex a:nth-of-type(2) { margin-left: 40px; }
.gyoza .cont02 .flex a p {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 18px;
	text-align: left;
}



.gyoza .cont02 .inner {
	background: url(../../img/gyoza_cont02_bg_pc.png) no-repeat center top;
}
.gyoza .cont02 .ttl {
	padding: 67px 0 23px;
}
.gyoza .cont02 .flex {
/*	padding-bottom: 90px;*/
}
.gyoza .cont02 .flex div > img {
	display: block;
	margin-bottom: 43px;
}

.gyoza .cont03 {
	padding: 60px 0 80px;
	background:url(../../img/gyoza_cont03_bg01_pc.png) no-repeat center top 55px, url(../../img/gyoza_cont03_bg02_pc.png) no-repeat center bottom;
}
.gyoza .cont03 h3 {
	margin-bottom: 45px;
}
.gyoza .cont03 h3 + img {
	margin-bottom: 10px;
}
.gyoza .cont03 h4 {
	margin-bottom: 35px;
}
.gyoza .cont03 p {
	margin-bottom: 35px;
	font-size: 20px;
}
.gyoza .cont03 .flex {
	margin: 0 auto 60px;
	justify-content: space-between;
	width: 880px;
}
.gyoza .cont03 .flex div {

}

.gyoza .cont04 {
	height: 600px;
	background: url(../../img/gyoza_cont04_bg_pc.jpg) no-repeat top center;
}
.gyoza .cont04 .ttl {
	padding: 60px 0 22px;
}
.gyoza .cont04 p {
	font-size: 20px;
	line-height: 2;
	text-shadow: 1px 0 0 #FFF, 0 1px 0 #FFF, -1px 0 0 #FFF, 0 -1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF, 1px -1px 0 #FFF,
	 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF;
	
}
.gyoza .cont04 .btnBox {
	padding: 48px 0 0;
}



.recipeLink {
	position: relative;
}
.recipeLink .ttl {
	padding: 74px 0 36px;
}
.recipeLink .anchorLink {
	
}
.recipeLink .anchorLink li {
	margin: 0 5px;
	line-height: 1;
}
.recipeLink .anchorLink + p {
	margin: 40px 0 45px;
}
.recipeLink .recipeList > div {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 540px;
	margin: 0 auto;
}
.recipeLink .recipeList .intro {
	position: absolute;
	top: 0;
	width: 500px;
	height: 540px;
	background: url(../../img/top_recipe_intro_bg_pc.png) no-repeat;
}
.recipeLink .recipeList > div:nth-of-type(odd) .intro { right: 0; }
.recipeLink .recipeList > div:nth-of-type(even) .intro { left: 0; }
.recipeLink .recipeList .intro p {
	font-size: 18px;
	margin-top: 20px;
}
.recipeLink .recipeList #yaki h3 { margin-top: 40px; }
.recipeLink .recipeList #sui h3 { margin-top: 50px; }
.recipeLink .recipeList #soup h3 { margin-top: 40px; }
.recipeLink .recipeList #wonton h3 { margin-top: 60px; }
.recipeLink .recipeList #potato h3 { margin-top: 45px; }
.recipeLink .recipeList #chuka h3 { margin-top: 60px; }
.recipeLink .recipeList #yaki p + img { margin: 10px 0; }
.recipeLink .recipeList #sui p + img { margin: 35px 0; }
.recipeLink .recipeList #soup p + img { margin: 35px 0; }
.recipeLink .recipeList #wonton p + img { margin: 35px 0; }
.recipeLink .recipeList #potato p + img { margin: 35px 0; }
.recipeLink .recipeList #chuka p + img { margin: 35px 0; }

.recipeLink .recipeList > div:nth-of-type(even) .bgImg {
	position: absolute;
	right: 0;
}
.recipeLink .recipeList .bgImg {
	width: calc(100% - 500px);
	height: 100%;
}
.recipeLink .recipeList #yaki .bgImg { background: url(../../img/top_recipe_bg01_pc.jpg) no-repeat center center; }
.recipeLink .recipeList #sui .bgImg { background: url(../../img/top_recipe_bg02_pc.jpg) no-repeat center center; }
.recipeLink .recipeList #wonton .bgImg { background: url(../../img/top_recipe_bg03_pc.jpg) no-repeat center center; }
.recipeLink .recipeList #soup .bgImg { background: url(../../img/top_recipe_bg04_pc.jpg) no-repeat center center; }
.recipeLink .recipeList #chuka .bgImg { background: url(../../img/top_recipe_bg05_pc.jpg?cache) no-repeat center center; }
.recipeLink .recipeList #potato .bgImg { background: url(../../img/top_recipe_bg06_pc.jpg?cache) no-repeat center center; }











/* animation */
.hide {
	opacity: 0;
}

.contents .mainttl.hide,
.contents .ttl.hide,
.cont03 h3 + p.hide,
.cont03 .btnBox.hide,
.contents .anchorLink.hide,
.contents .anchorLink + p.hide,
.contents .recipeList > div.hide,
.contents .intro > div.hide {
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
}

body:not(.sp) .mainVisual .steam img,
body:not(.sp) .mainVisual .txt img,
body:not(.sp) .mainVisual .pkg img {
	opacity: 0;
}

.show {
	transition: all 0.4s cubic-bezier(0.36, 0.37, 0.33, 0.99);
	opacity: 1;
}

.contents .mainttl.show,
.contents .ttl.show,
.cont03 h3 + p.show,
.cont03 .btnBox.show,
.contents .anchorLink.show,
.contents .anchorLink + p.show,
.contents .recipeList > div.show,
.contents .intro > div.show {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.mainVisual .txt img.show,
.mainVisual .pkg img.show,
.mainVisual .steam img.show { opacity: 1 !important; }

.mainVisual .txt img,
.mainVisual .pkg img {
	transition: all 2.2s cubic-bezier(0.36, 0.37, 0.33, 0.99);
}
.mainVisual .txt img { transition-delay: 0.4s; }
.mainVisual .pkg img { transition-delay: 0.8s; }

.mainVisual .steam img { animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.mainVisual .img01 img { transition-delay: 1s; animation-duration: 3.2s; animation-name: steamScale; }
.mainVisual .img02 img { transition-delay: 1.1s; animation-duration: 2s; animation-name: steamScaleS; }
.mainVisual .img03 img { transition-delay: 1.2s; animation-duration: 2.4s; animation-name: steamScaleS; }
.mainVisual .img04 img { transition-delay: 1.3s; animation-duration: 2.8s; animation-name: steamScale; }

.mainVisual .img01 { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 4.2s; animation-name: steamRotateL; }
.mainVisual .img02 { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 4s; animation-name: steamRotateR; }
.mainVisual .img03 { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 3.5s; animation-name: steamRotateR; }
.mainVisual .img04 { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 3.8s; animation-name: steamRotateL; }

@keyframes steamScaleS {
  0% { transform: scale( 1.03); }
  42% { transform: scale( 0.96); }
  45% { transform: scale( 0.96); }
  100% { transform: scale( 1.03); }
}
@keyframes steamScale {
  0% { transform: scale( 1.06); }
  42% { transform: scale( 0.9); }
  45% { transform: scale( 0.9); }
  100% { transform: scale( 1.06); }
}
@keyframes steamRotateR {
  0% { transform: rotate( 3deg); }
  60% { transform: rotate( -4deg); }
  100% { transform: rotate( 3deg); }
}

@keyframes steamRotateL {
  0% { transform: rotate( -3deg); }
  70% { transform: rotate( 6deg); }
  100% { transform: rotate( -3deg); }
}
body.sp .mainVisual .steam img,
body.sp .mainVisual .txt img,
body.sp .mainVisual .pkg img,
body.sp .mainVisual .steam img {
	opacity: 1;
}

@media only screen and (max-width: 1280px) {
	.tablet .mainVisual .img01 { left: -20px; }
	.tablet .mainVisual .img02 { right: -20px; }
	.tablet .mainVisual .img03 { left: 30px; }
	.tablet .mainVisual .img04 { right: 70px; }
	.tablet .gyoza .cont01 .mainttl { background: none; }
	.tablet .gyoza .cont01 { background: url(../../img/gyoza_cont01_bg01_pc.png) no-repeat center top 20px;background-size: 179% auto;}
}
@media only screen and (min-width: 751px) {
	.anchorLink li a.hover {
		position: relative;
	}
	.anchorLink li a.hover:hover {
		opacity: 1;
	}
}

@media only screen and (max-width: 750px) {
	.mainVisual .steam {
		display: none;
	}

	/* animation */
	.mainVisual .txt img,
	.mainVisual .pkg img {
		opacity: 1;
	}
	body:not(.sp) .mainVisual .steam img,
	body:not(.sp) .mainVisual .txt img,
	body:not(.sp) .mainVisual .pkg img {
		opacity: 1;
	}

	.mainVisual {
		height: auto;
    background: url(../../img/top_main_bg_sp.jpg) no-repeat top center;
    background-size: 100vw auto;
	}
	.mainVisual * {
		outline: none;
	}
	.mainVisual .inner {
    height: 129.87vw;
	}
	.mainVisual h1 {
    padding-top: 5.5vw;
	}
	.mainVisual .txt {
    padding-top: 29.6vw;
	}
	.mainVisual .pkg {
		width: 100%;
		position: absolute;
    bottom: 5.2vw;
	}
	.mainVisual .pkg img {
		transition: none;
		width: 100%;
	}
	.mainVisual .pkg .slider {
		width: 100%;
		display: block !important;
		padding: 0 5.2vw;
	}
	.mainVisual .pkg .slider .slick-slide {
		padding: 0 .8vw;
	}
	.gyoza .cont01 {
		padding-bottom: 9vw;
	}
	.gyoza .cont01 .mainttl {
		background: none;
		padding: 0;
    margin: 0;
	}
	.gyoza .cont01 .mainttl + img {
		padding: 0 6.6vw 0;
	}
	.gyoza .cont01 h4 {
		margin-bottom: 10px;
	}
	.gyoza .cont01 .flex {
		display: block;
		margin-bottom: 0;
	}
	.gyoza .cont01 .flex div {
		margin-bottom: 5vw;
	}
	.gyoza .cont01 .btn {
		background: transparent;
	}
	.gyoza .cont01 .btn img {
		padding: 0 7vw;
		box-sizing: border-box;
	}
	.gyoza .cont02 .ttl {
    padding: 10.5vw 0 0;
  }
  .gyoza .cont02 .flex div > img {
  	margin-bottom: 0;
  }
	.gyoza .cont02 .btn {
		display: block;
		width: 82.8vw;
    margin: 0 auto;
  }
  .gyoza .cont02 .flex div:nth-of-type(1) {
  	    padding-bottom: 9.6vw;
  }
	.gyoza .cont02 {
		padding: 0 6.6vw 10vw;
		background: url(../../img/gyoza_cont02_bg_sp.png) #d70000 center top;
		background-size: 100% auto;
	}
	.gyoza .cont02 .ttl {
		padding: 9.5vw 0 4.5vw;
		width: 100vw;
		position: relative;
		left: -6.6vw;
	}
	.gyoza .cont02 .flex {

		display: block;
	}
	.gyoza .cont02 .flex a {
		display: block;
		padding: 4.3vw 4.3vw .8vw;
		margin: 0 0 5.5vw;
	}
	.gyoza .cont02 .flex a p {
		padding-top: 1.8vw;
		padding-bottom: 1.8vw;
		font-size: calc(100vw / 31);
	}
	.gyoza .cont02 .flex a p:before {
		top: calc(50% - 5px);
	}
	.gyoza .cont02 .flex a:nth-of-type(2) {
		margin-left: 0;
		margin-bottom: 0;
	}
  .gyoza .cont03 {
	  background: none;
    background-size: 100% auto;
	  padding: 12vw 0 10vw;
  }
  .gyoza .cont03 .ttl {
  	padding: 0 0 1vw;
	  margin-bottom: 0;
  }
	.gyoza .cont03 h3 + img {
		margin-bottom: 0;
	}
	.gyoza .cont03 .flex {
		display: block;
		width: 100%;
		padding: 0 12vw;
		box-sizing: border-box;
		margin-bottom: 5vw;
	}
	.gyoza .cont03 .flex div:first-of-type {
		margin-bottom: 5vw;
	}
	.gyoza .cont03 p {
		font-size: calc(100vw / 31);
		padding: 3.5vw 6.6vw;
		margin-bottom: 0;
	}
	.gyoza .cont03 .btn {
		background: transparent;
	}
	.gyoza .cont03 .btn img {
		padding: 0 6.6vw;
		box-sizing: border-box;
	}
	
	.gyoza .cont04 {
		height: 87.47vw;
		background: url(../../img/gyoza_cont04_bg_sp.jpg) #fff no-repeat top center;
		background-size: 100% auto;
	}
	.gyoza .cont04 .ttl {
		padding: 0 0 1vw;
	}
  .gyoza .cont04 p {
	  font-size: calc(100vw / 31);
	  padding: 0vw 6.6vw 0;
	  text-align: center;
	  margin-bottom: 0;
  }
  .gyoza .cont04 .btnBox {
    padding: 3vw 6.6vw 9vw;
  }
  .recipeLink .ttl {
    padding: 10.7vw 0 5.5vw;
  }
  .recipeLink .anchorLink {
  	padding: 0 6.6vw 2vw;
  }
  .recipeLink .anchorLink .flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .recipeLink .anchorLink li {
  	margin: 0;
    width: 27.2vw;
    margin-bottom: 2.6vw;
  }
  .recipeLink .anchorLink + p {
		font-size: calc(100vw / 26.5);
		margin: 0 0 5.5vw;
		line-height: 1.5;
  }
  .recipeLink .recipeList{

    margin: 1.35vw 1.35vw 0;
  }
  .recipeLink .recipeList > div {
  	height: auto;
  	padding: 0 0 6.6vw;
	background: url(../../img/top_recipe_intro_bg_sp.png) no-repeat bottom;
	margin-bottom: 5.5vw;
	background-size: 100% auto;
  }
  .recipeLink .recipeList > div:last-child {
  	margin-bottom: 0;
  }
	.recipeLink .recipeList #yaki .bgImg { background: url(../../img/top_recipe_bg01_sp.jpg) no-repeat bottom center; }
	.recipeLink .recipeList #sui .bgImg { background: url(../../img/top_recipe_bg02_sp.jpg) no-repeat bottom center; }
	.recipeLink .recipeList #wonton .bgImg { background: url(../../img/top_recipe_bg03_sp.jpg) no-repeat bottom center; }
	.recipeLink .recipeList #soup .bgImg { background: url(../../img/top_recipe_bg04_sp.jpg) no-repeat bottom center; }
	.recipeLink .recipeList #chuka .bgImg { background: url(../../img/top_recipe_bg05_sp.jpg?cache) no-repeat bottom center; }
	.recipeLink .recipeList #potato .bgImg { background: url(../../img/top_recipe_bg06_sp.jpg?cache) no-repeat bottom center; }
  .recipeLink .recipeList .bgImg {
  	position: static !important;
  	width: 100%;
    height: 60vw;
    background-size: 100% auto !important;
  }
  .recipeLink .recipeList .intro {
    position: static;
    width: 100%;
    height: auto;
	background: #fff;
  	border-left: 1px solid #e5af06;
  	border-right: 1px solid #e5af06;
  	box-sizing: border-box;
  }
  .recipeLink .recipeList .intro > div {
  	padding: 0 5vw;
  }
  .recipeLink .recipeList .intro h3 {
  	padding-top: 3vw;
  	margin-top: 0 !important;
  }
  .recipeLink .recipeList .intro p {
    font-size: calc(100vw / 26.5);
    margin-top: 2.7vw;
  }
  .recipeLink .recipeList p + img {
    margin: 2.7vw 0 2vw !important;
  }
	.recipeLink .recipeList #yaki p + img,
	.recipeLink .recipeList #soup p + img,
	.recipeLink .recipeList #potato p + img,
	.recipeLink .recipeList #sui p + img {
		margin: 3.8vw 0 3.8vw !important;
	}
/*
  .recipeLink .recipeList #soup p + img {
  	
    margin: 1vw 0 2vw !important;
  }
*/
  .recipeLink .recipeList #wonton p + img {
  	
    margin: 5vw 0 6vw !important;
  }
  .recipeLink .recipeList #chuka p + img {
  	
    margin: 3vw 0 7vw !important;
  }
}



@media only screen and (max-width: 320px){
	.gyoza .cont03 p {
    font-size: 12px;
    line-height: 1.8;
  }
  .gyoza .cont04 .flex a p {
  	font-size: 12px;
  }
  .recipeLink .anchorLink + p {
  	font-size: 13px;
  }
  .recipeLink .recipeList .intro p {
  	font-size: 13px;
  	margin-left: -0.5em;
  	margin-right: -1.1em;
  }
}