@charset "UTF-8";

#youshoku .clearfix:after {
	content: "";
	display: block;
	clear: both;
	}

#youshoku .clearfix { display: block; }

#youshoku {
	-webkit-text-size-adjust: 100%;
	width: 100%;
	font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	background:  #fff;
	}

#youshoku img {
	width: 100%;
	vertical-align: bottom;
	border: none;
	}

/*------------ SP ------------*/
#youshoku .pc {
	display: none;
	}

#youshoku .main {
	position: relative;
	}

/* ナビ */
#youshoku .modal-content {
	position: relative;
	display: none;
	width: 100%;
	}

#youshoku .modal-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f1ede3;
	overflow-y: scroll;
	}

#youshoku .modal-wrap {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	}

#youshoku .modal-content ul {
	position: relative;
	width: 80vw;
	margin: 0 auto;
	padding: 8.66vw 0 4vw 0;
	z-index: 300;
	}

#youshoku .modal-content li {
	border-bottom: 2px solid #736357;
	}

#youshoku .modal-content li:last-child {
	border-bottom: none;
	}

#youshoku .modal-close{
	width: 100%;
	display: block;
	}

#youshoku .open-btn {
	display: block;
	position: absolute;
	width: 16vw;
	height: 16vw;
	top: 2.66vw;
	left: 81.33vw;
	z-index: 2;
	cursor: pointer;
	background: url(../img/sp/menu.png) center top no-repeat;
	background-size: contain;
	}

#youshoku .close-btn {
	display: block;
	position: absolute;
	width: 16vw;
	height: 16vw;
	top: 2.66vw;
	left: 81.33vw;
	z-index: 2;
	cursor: pointer;
	background: url(../img/sp/close.png) center top no-repeat;
	background-size: contain;
	z-index: 400;
	}

/* イントロダクション */
#youshoku .intro {
	background: url(../img/sp/intro_bg.gif) center top no-repeat;
	background-size: contain;
	}

#youshoku .intro h2 {
	opacity: 0;
	}

#youshoku .intro01-fade-sp {
	animation: intro01-fade-sp 1s ease 0.5s 1 forwards;
	}

#youshoku .intro p {
	opacity: 0;
	}

#youshoku .intro02-fade-sp {
	animation: intro02-fade-sp 1s ease 0.5s 1 forwards;
	}

/* メニュー */
#youshoku .menu {
	background: url(../img/sp/menu_bg.gif) center top repeat-y;
	background-size: contain;
	padding: 8vw 0 13.6vw;
	}

#youshoku .menu ul {
	margin-top: 5.73vw;
	}

#youshoku .menu li {
	float: left;
	width: 50%;
	}

#youshoku .menu li .btn img {
	width: 24vw;
	height: auto;
	}

#youshoku .menu li:nth-child(odd) .btn {
	margin-left: 13.86vw;
	}

#youshoku .menu li:nth-child(even) .btn {
	margin-left: 11.86vw;
	}

/* 商品紹介 */
#youshoku .product {
	background: #e4dcca url(../img/sp/product_bg.jpg) center top no-repeat;
	background-size: contain;
	padding: 8vw 0 10.66vw;
	}

#youshoku .product ul {
	margin-top: 8vw;
	}

#youshoku .product li {
	width: 64vw;
	margin: 4vw auto 0;
	}

/* ポイント */
#youshoku .point {
	background: url(../img/sp/point_bg.gif) center top repeat-y;
	background-size: contain;
	padding: 8vw 0 3.2vw;
	}

#youshoku .point01 {
	margin-top: 10.93vw;
	}

#youshoku .point01 h3 {
	margin-bottom: 7.6vw;
	}

#youshoku .point02 {
	min-height: 73.2vw;
	background: url(../img/sp/point02_bg.png) left top no-repeat;
	background-size: contain;
	margin-top: 7.6vw;
	}

#youshoku .point02 h3 {
	margin-bottom: 6.26vw;
	}

#youshoku .point03 {
	margin-top: 10vw;
	padding-bottom: 3.6vw;
	}

#youshoku .point03 h3 {
	margin-bottom: 6.66vw;
	}

#youshoku .bottom {
	float: right;
	padding-right: 6.13vw;
	}

#youshoku .bottom img {
	width: 18.26vw;
	}


/*------------ PC ------------*/
@media screen and (min-width: 641px) {

body {
	min-width: 1280px;
	}

#youshoku .pc {
	display: block;
	}

#youshoku .sp {
	display: none;
	}

#youshoku img {
	width: auto;
	}

#youshoku .main {
	border-top: 1px solid #f1ede3;
	border-bottom: 1px solid #f1ede3;
        background-image: url(../img/main.png) , url(../img/main_bg.gif) ;
        background-position: center top, left top;
        background-repeat: no-repeat, repeat;
        background-size: auto, auto;
	}

#youshoku h1 {
	width: 1280px;
	margin: 0 auto;
	}

/* PCナビ */
#youshoku nav {
	width: 1280px;
	margin: 0 auto;
	}

#youshoku nav ul {
	padding: 0 40px;
	}

#youshoku nav li {
	float: left;
	padding: 0 20px;
	}

/* PCイントロダクション */
#youshoku .intro {
	background: url(../img/intro_bg.gif) center bottom no-repeat;
	background-size: auto;
	}

#youshoku .intro-cont {
	position: relative;
	width: 1280px;
	height: 719px;
	margin: 0 auto;
	}

#youshoku .intro-cont h2 {
	position: absolute;
	top: 118px;
	left: 950px;
	opacity: 0;
	}

#youshoku .intro01-fade-pc {
	animation: intro01-fade-pc 1s ease 0.5s 1 forwards;
	}

#youshoku .intro-cont p {
	position: absolute;
	top: 150px;
	left: 0;
	opacity: 0;
	}

#youshoku .intro02-fade-pc {
	animation: intro01-fade-pc 1s ease 1s 1 forwards;
	}

/* PCメニュー */
#youshoku .menu {
	background: url(../img/menu_bg1.png), url(../img/menu_bg2.png), url(../img/menu_bg1.png), url(../img/menu_bg.gif);
        background-position: center 120px, center 840px, center 1560px, center top;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat;
        background-size: auto, auto, auto, auto;
	padding: 0;
	}

#youshoku .menu-cont {
	position: relative;
	width: 1280px;
	margin: 0 auto;
	}

#youshoku .menu ul {
	margin-top: 13px;
	padding: 0 100px;
	}

#youshoku .menu li {
	float: left;
	width: 360px;
	padding-bottom: 102px;
	}

#youshoku .menu li .btn img {
	width: auto;
	margin: 0 auto;
	}

#youshoku .menu li:nth-child(odd) .btn {
	margin-left: auto
	}

#youshoku .menu li:nth-child(even) .btn {
	margin-left: auto;
	}

#youshoku .ttl-pasta {
	position: absolute;
	top: 240px;
	left: 0;
	z-index: 2;
	}

#youshoku .ttl-meat {
	position: absolute;
	top: 690px;
	left: 0;
	z-index: 2;
	}

#youshoku .ttl-rice {
	position: absolute;
	top: 1140px;
	left: 0;
	z-index: 2;
	}

/* PC商品紹介 */
#youshoku .product {
	height: 800px;
	background-color: #e4dcca;
        background-image: url(../img/product_bg2.png), url(../img/product_bg1.jpg);
        background-position: center top, center top;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, auto;
	padding: 0;
	}

#youshoku .product-cont {
	width: 1280px;
	margin: 0 auto;
	}

#youshoku .product ul {
	margin-top: 91px;
	}

#youshoku .product li {
	float: left;
	width: 400px;
	margin: 0 0 0 40px;
	}

#youshoku .product li:first-child {
	margin: 0;
	}

/* PCポイント */
#youshoku .point {
	min-height: 2375px;
	background: url(../img/point_bg.png), url(../img/point_bg.gif);
        background-position: center top, center top;
        background-repeat: no-repeat, repeat;
        background-size: auto, auto;
	padding: 0;
	}

#youshoku .point-wrap {
	min-height: 2375px;
	background-image: url(../img/point01_img.png), url(../img/point02_img.png);
        background-position: center 258px, center 988px;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, auto;
	}

#youshoku .point-cont {
	position: relative;
	width: 1280px;
	margin: 0 auto;
	}

#youshoku .point01 {
	margin-top: 0;
	}

#youshoku .point01 h3 {
	position: absolute;
	top: 268px;
	left: 100px;
	}

#youshoku .point01 p {
	position: absolute;
	top: 478px;
	left: 361px;
	}

#youshoku .point01 h3 {
	margin-bottom: 7.6vw;
	}

#youshoku .point02 {
	min-height: auto;
	background: none;
	margin-top: 0;
	}

#youshoku .point02 h3 {
	position: absolute;
	top: 775px;
	left: 980px;
	margin: 0;
	}

#youshoku .point02 p {
	position: absolute;
	top: 985px;
	left: 482px;
	}

#youshoku .point03 {
	margin-top: 1044px;
	padding-bottom: 19px;
	}

#youshoku .point03 h3 {
	margin: 0;
	}

#youshoku .point03 li {
	float: left;
	}

#youshoku .bottom {
	float: right;
	padding-right: 60px;
	}

#youshoku .bottom img {
	width: auto;
	}
}

@keyframes intro01-fade-sp {
	100% { opacity: 1; }
	}

@keyframes intro02-fade-sp {
	100% { opacity: 1; }
	}

@keyframes intro01-fade-pc {
	100% { transform: translateY(-20px); opacity: 1; }
	}

@keyframes intro02-fade-pc {
	100% { transform: translateY(-20px); opacity: 1; }
	}