@charset "utf-8";
/* CSS Document */
header {
	width: 100%;
	min-height: 600px;
	max-width: 1920px;
	margin: 0 auto;
	background: #f2eee9;
	letter-spacing: 1px;
}
article{
	letter-spacing: 1px;
}
#HeaderForm {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}
#Logo {
	width: 84px;
	height: 96px;
	margin-top: 60px;
	position: fixed;
}
#HeaderInfo {
	width: 100%;
	max-width: 1270px;
	padding-top: 200px;
	margin: 0 auto;
	padding-bottom: 200px;
}
#HeaderInfo:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#HeaderLeft {
	width: 470px;
	float: left
}
#HeaderRight {
	width: calc(100% - 470px);
	float: right;
}
#HeaderRight:after {
	content: '';
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
#HeaderTitle {
	width: 365px;
	height: 240px;
	line-height: 70px;
	color: #6e6e6e;
	margin-left: 105px;
	font-family: 'Vollkorn', serif;
	font-size: 60px;
	background: url("/en/Assets/Web/Images/Quality/Img01.png") right bottom no-repeat;
}
#HeaderTitleText1 {
	width: 410px;
	height: 80px;
	font-size: 30px;
	color: #8f3834;
	margin-top: 170px;
}
#HeaderTitleText2 {
	width: 410px;
	line-height: 30px;
	font-size: 16px;
	font-weight: 300;
}
#HeaderRightForm {
	max-width: 680px;
	float: right;
}
#RightText {
	width: 360px;
	height: 120px;
	text-align: center;
	margin: 0 auto;
	color: #6e6e6e;
	padding-top: 80px;
	font-size: 14px;
	font-weight: 200;
	line-height: 30px;
	padding-bottom: 50px;
}
#RightLine {
	width: 1px;
	height: 120px;
	border-right: 2px dashed #c8c8c8;
	margin: 0 auto;
}
#RightImg {
	padding-top: 50px;
	width: 100%;
	max-width: 683px;
}
#RightImg img {
	width: 100%;
}
#BtnHead {
	width: 100%;
	height: 50px;
	text-align: center;
	margin-top: 80px;
}
#BtnCertificate {
	width: 246px;
	height: 50px;
	margin: 0 auto;
	cursor: pointer;
}
#Line1 {
	width: 100%;
	max-width: 1920px;
	height: 33px;
	background: url("/en/Assets/Web/Images/Quality/Line1.png") center center no-repeat;
	margin-top: -30px;
}
#Line2 {
	width: 100%;
	max-width: 1920px;
	height: 33px;
	background: url("/en/Assets/Web/Images/Quality/Line2.png") center center no-repeat;
}
#Products {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	margin-top: -30px;
}
#Products img {
	max-width: 100%;
}
#ProductsName {
	width: 60px;
	height: 200px;
	writing-mode: vertical-lr;
	text-orientation: mixed;
	position: absolute;
	color: #FFF;
	font-size: 28px;
	left: calc(50% - 80px);
	margin-top: 160px;
}
#ProductText {
	width: calc(50% - 200);
	line-height: 30px;
	max-width: 540px;
	position: absolute;
	color: #FFF;
	left: calc(50% + 50px);
	margin-top: 160px;
	letter-spacing: 1px;
	font-weight: 200;
	box-sizing: border-box;
}
#ProductText1 {
	font-size: 18px;
	font-weight: 400;
}
#Products2 {
	width: 100%;
	min-height: 200px;
	background: #f2eee9;
	margin-top: -33px;
	padding-top: 100px;
	padding-bottom: 80px;
}
#Products2Form {
	width: 100%;
	max-width: 1240px;
	box-sizing: border-box;
	padding: 20px;
	margin: 0 auto;
}
#Products2Form:after {
	clear: both;
	content: '';
	display: block;
	visibility: hidden;
	height: 0;
}
#ProductsLeft {
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
	float: left;
}
#ProductsRight {
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
	float: right;
}
#Prodcuts2Text {
	width: 100%;
	line-height: 30px;
	max-width: 510px;
	letter-spacing: 1px;
	font-weight: 200;
	float: left;
}
#ProductsImg {
	width: 100%;
	max-width: 520px;
	text-align: center;
	float: right;
}
#ProductsImg img {
	width: 100%;
	margin: 0 auto;
}
#ProductsLine {
	width: 1px;
	height: 150px;
	border-left: 2px dashed #c8c8c8;
	float: left;
	margin-top: -200px;
	margin-left: 50%;
	z-index: 1000;
	position: relative;
}
#Process {
	width: 100%;
	padding-bottom: 170px;
	padding-top: 170px;
}
#ProcessForm {
	width: 100%;
	max-width: 1210px;
	padding: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
#ProcessForm:after {
	content: '';
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}
#ProcessLeft {
	width: 225px;
	height: 750px;
	float: left;
	color: #8f3834;
	font-size: 30px;
	text-align: center;
	overflow: hidden;
	position: absolute;
}
#ProcessTitle {
	width: 100%;
	height: 100px;
	line-height: 45px;
}
#Line3 {
	width: 120px;
	height: 1px;
	border-bottom: 1px solid #c8c8c8;
	margin: 0 auto;
	padding-top: 30px;
	margin-bottom: 50px;
}
.Line4 {
	width: 0px;
	height: 20px;
	margin: 0 auto;
	border-left: 1px solid #c8c8c8;
	margin-top: 10px;
	margin-bottom: 10px;
}
.Line5 {
	width: 0px;
	height: 20px;
	margin: 0 auto;
	border-left: 1px solid #c8c8c8;
	margin-top: 18px;
	margin-bottom: 18px;
}
.ProcessMenu {
	width: 225px;
	height: 45px;
	line-height: 45px;
	color: #b7a393;
	text-align: center;
	font-size: 18px;
	margin: 0 auto;
	letter-spacing: 1px;
	transition: all .5s;
	background: none;
}
.ProcessMenuNoAct {
	background: none;
	transition: all .5s;
}
.ProcessMenuAct {
	color: #FFF !important;
	font-weight: 500;
	/*
		background: url("/en/Assets/Web/Images/Quality/MenuAct.png") no-repeat;
		*/
	transition: all .5s;
}
.ProcessText {
	width: 225px;
	height: 45px;
	position: absolute;
	z-index: 100;
}
.ProcessMenuBg {
	width: 225px;
	height: 45px;
	background: url("/en/Assets/Web/Images/Quality/MenuAct.png") no-repeat;
	position: absolute;
	opacity: 0;
	transition: all 1s;
}
.ProcessMenuBgAct {
	opacity: 1;
	transition: all 1s;
}
#ProcessRight {
	width: 875px;
	float: right;
	padding-top: 40px;
}
#ProcessRightTitle {
	width: 875px;
	height: 70px;
	padding-right: 30px;
	box-sizing: border-box;
	position: absolute;
	z-index: 100;
}
#ProcessImg {
	width: 100%;
	height: 600px;
	overflow: hidden;
	margin-top: 90px;
}
#Noodle {
	width: 102px;
	height: 102px;
	line-height: 102px;
	border: 1px solid #b7a393;
	border-radius: 50%;
	float: right;
	font-family: 'Vollkorn', serif;
	color: #b7a393;
	text-align: center;
	margin-right: 20px;
	cursor: pointer;
	transition: all .5s;
}
#Ramen {
	width: 102px;
	height: 102px;
	line-height: 102px;
	border: 1px solid #b7a393;
	border-radius: 50%;
	float: right;
	font-family: 'Vollkorn', serif;
	color: #b7a393;
	text-align: center;
	cursor: pointer;
	transition: all .5s;
}
.ProcessItemAct {
	width: 102px;
	height: 116px !important;
	background: url("/en/Assets/Web/Images/Quality/ProcessItemAct.png") no-repeat;
	color: #FFF !important;
	border: none !important;
}
#NoodleMenu {
	position: absolute;
}
#RamenMenu {
	position: absolute;
	margin-left: 250px;
}
#NoodleImg {
	width: 100%;
}
#RamenImg {
	width: 100%;
	display: none;
}
#NoodleImg ul, #RamenImg ul {
	padding: 0px;
	margin: 0px;
}
#NoodleImg ul li, #RamenImg ul li {
	width: 875px;
	height: 600px;
	position: absolute;
	list-style: none;
	display: none;
}
#NoodleImg ul li img, #RamenImg ul li img {
	width: 100%;
}
#Mission {
	width: 100%;
	background: #f2eee9;
	padding-top: 180px;
	padding-bottom: 180px;
}
#MissionForm {
	width: 100%;
	max-width: 1367px;
	padding: 10px;
	box-sizing: border-box;
	margin: 0 auto;
	letter-spacing: 1px;
}
#MissionForm:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#MissionLeft {
	width: 621px;
	float: left;
}
#MissionRight {
	width: 546px;
	float: right;
}
#MisImg1 {
	width: 100%;
}
#MisImg1 img {
	max-width: 100%;
}
#MisImg2 {
	width: 100%;
	padding-top: 100px;
}
#MisImg2 img {
	max-width: 100%;
}
#MisText1 {
	width: 510px;
	line-height: 30px;
	margin: 0 auto;
	padding-top: 100px;
	font-size: 16px;
	font-weight: 300;
	float: right;
	padding-bottom: 90px;
	background: url('/Assets/Web/Images/Quality/Line3.png') no-repeat bottom left;
}
#MisText2 {
	width: 510px;
	line-height: 30px;
	font-size: 18px;
	font-weight: 500;
	color: #8f3834;
}
#MisText3 {
	width: 510px;
	line-height: 30px;
	padding-top: 40px;
	font-size: 16px;
	font-weight: 300;
}
#Line6 {
	width: 430px;
	height: 1px;
	border-top: 2px solid #c8c8c8;
	position: absolute;
	transform: rotate(30deg);
	margin-left: 470px;
	margin-top: 580px;
	z-index: 100;
}
#FooterTopLine {
	width: 100%;
	height: 30px;
	background: url("/en/Assets/Web/Images/Quality/footerBg.png") no-repeat center top;
}
#Certificate {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.50);
	display: none;
}
#CertificateImg {
	width: calc(((100vh - 80px) / 1130) * 800);
	height: calc(100vh - 80px);
	margin: 0 auto;
	margin-top: 40px;
	/*
		background: url("/en/Assets/Web/Images/Quality/Img8.png") center center no-repeat;
		background-size: contain;
		*/
}
#CertificateImg img {
	max-height: 100%;
}
#BtnCertClose {
	width: 32px;
	height: 26px;
	background: url("/en/Assets/Web/Images/Quality/BtnClose.png") no-repeat;
	cursor: pointer;
	float: right;
	margin-right: -60px;
}
@media screen and (min-width: 1461px) and (max-width: 1630px) {
	#ProductsName {
		margin-top: 160px;
	}
	#ProductText {
		margin-top: 160px;
		line-height: 25px;
	}
}
@media screen and (min-width: 1314px) and (max-width: 1460px) {
	#ProductsName {
		margin-top: 100px;
	}
	#ProductText {
		margin-top: 100px;
		line-height: 25px;
	}
}
@media screen and (min-width: 1142px) and (max-width: 1313px) {
	#ProductsName {
		margin-top: 80px;
	}
	#ProductText {
		margin-top: 80px;
		line-height: 23px;
		font-size: 14px;
		padding-right: 20px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1141px) {
	#ProductsName {
		margin-top: 50px;
	}
	#ProductText {
		margin-top: 50px;
		line-height: 21px;
		font-size: 14px;
		padding-right: 20px;
	}
	#ProcessRight {
		width: 750px;
	}
	#ProcessRightTitle {
		width: 750px;
	}
	#NoodleImg ul li, #RamenImg ul li {
		width: 750px;
	}
	.Line4 {
		margin-top: 4px;
		margin-bottom: 4px;
	}
	.Line5 {
		width: 0px;
		height: 20px;
		margin: 0 auto;
		border-left: 1px solid #c8c8c8;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
@media screen and (min-width:992px) and (max-width:1250px) {
	#MissionLeft {
		width: 487px;
	}
	#MissionRight {
		width: 420px;
	}
	#Line6 {
		width: 330px;
		height: 1px;
		border-top: 1px solid #c8c8c8;
		position: absolute;
		transform: rotate(30deg);
		margin-left: 370px;
		margin-top: 480px;
		display: none;
	}
	#MisText1 {
		width: 460px;
	}
	#MisText2, #MisText3 {
		width: 420px;
	}
}
@media screen and (max-width: 991px) {
	#Logo {
		width: 58px;
		height: 65px;
		margin-top: 30px;
		left: 35px;
		position: absolute;
	}
	#Logo img {
		width: 58px;
	}
	#HeaderInfo {
		width: 100%;
		padding-top: 130px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 100px;
		box-sizing: border-box;
	}
	#HeaderTitle {
		width: 240px;
		height: 130px;
		font-size: 36px;
		line-height: 40px;
		background-size: 50px 67px;
		margin: 0 auto;
	}
	#HeaderLeft {
		width: 100%;
		float: none;
	}
	#HeaderTitleText1 {
		width: 100%;
		height: 60px;
		font-size: 20px;
		font-weight: 500;
		margin-top: 70px;
	}
	#HeaderTitleText2 {
		width: 100%;
		font-size: 14px;
	}
	#HeaderRight {
		width: 100%;
		float: none;
	}
	#HeaderRightForm {
		width: 100%;
		float: none;
	}
	#RightImgMb {
		width: 203px;
		height: 568px;
		margin: 0 auto;
		padding-top: 60px;
	}
	#RightLineMb {
		width: 1px;
		height: 100px;
		border-right: 2px dashed #c8c8c8;
		margin: 0 auto;
		margin-top: 30px;
	}
	#RightText {
		width: 100%;
		height: auto;
		padding-top: 30px;
		padding-bottom: 50px;
	}
	#BtnHead {
		margin-top: 10px;
	}
	#BtnCertificate {
		width: 179px;
		height: 36px;
	}
	#BtnCertificate img {
		width: 100%;
	}
	#ProductsMb {
		width: 100%;
		background: #b7a393;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
		padding-top: 50px;
		padding-bottom: 30px;
	}
	.QLine1 {
		width: 100%;
		height: 13px;
		background: url("/en/Assets/Web/Images/Quality/Line1.png") center center no-repeat;
		background-size: 800px;
		margin-top: -13px;
	}
	#ProductsNameMb {
		width: 100%;
		height: 80px;
		color: #FFF;
		font-size: 22px;
		font-weight: 500;
		letter-spacing: 1px;
	}
	#ProductTextMb {
		width: 100%;
		font-weight: 200;
		color: #FFF;
		font-size: 14px;
		letter-spacing: 1px;
		line-height: 20px;
	}
	#ProductText1Mb {
		width: 100%;
		font-size: 16px;
		font-weight: 400;
		line-height: 25px;
	}
	#ProductsBgMb {
		width: 100%;
	}
	#ProductsBgMb img {
		max-width: 100%;
	}
	#Products2 {
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
	}
	#Products2Form {
		width: 100%;
		padding: 0px;
	}
	#ProductsLeft {
		width: 100%;
		float: none;
		padding: 0px;
	}
	#Prodcuts2Text {
		width: 100%;
		float: none;
		font-size: 14px;
		line-height: 25px;
	}
	#ProductsRight, #ProductsImg {
		width: 100%;
		padding: 0px;
		float: none;
		padding-top: 15px;
	}
	#ProcessMb {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		padding-top: 60px;
	}
	#ProcessTitleMb {
		width: 100%;
		height: 90px;
		text-align: center;
		color: #8f3834;
		font-size: 20px;
		font-weight: 500;
		line-height: 30px;
	}
	#ProcessTitleLineMb {
		width: 80px;
		height: 1px;
		border-bottom: 1px solid #c8c8c8;
		margin: 0 auto;
	}
	#ProcessHeadBtn {
		wdith: 100%;
		height: 160px;
		padding-top: 30px;
		text-align: center;
		box-sizing: border-box;
	}
	#BtnNoodle, #BtnRamen {
		width: 78px;
		height: 78px;
		line-height: 80px;
		border: 1px solid #b7a393;
		border-radius: 50%;
		font-family: 'Vollkorn', serif;
		color: #b7a393;
		text-align: center;
		margin: 20px;
		cursor: pointer;
		display: inline-block;
		transition: all .5s;
		font-size: 14px;
	}
	.BtnItemAct {
		width: 78px;
		height: 88px !important;
		background: url("/en/Assets/Web/Images/Quality/ProcessItemAct.png") no-repeat;
		background-size: 78px, 88px;
		color: #FFF !important;
		border: none !important;
	}
	#ProcessImgMb {
		width: 100%;
		box-sizing: border-box;
		padding-top: 50px;
	}
	#ProcessImgMb img {
		max-width: 100%;
	}
	#NoodleImgMb {
		width: 100%;
		display: none;
	}
	.NImgList, .RImgList {
		width: calc(100% - 40px);
		height: 100px;
		position: absolute;
		display: none;
	}
	.NListTitle, .RListTitle {
		width: 181px;
		height: 37px;
		text-align: center;
		line-height: 37px;
		color: #FFF;
		background: url("/en/Assets/Web/Images/Quality/MenuAct.png") no-repeat;
		background-size: 181px, 37px;
		position: absolute;
		margin-top: -18px;
		left: 50%;
		margin-left: -90px;
	}
	#NoolePage, #RamenPage {
		width: 100%;
		height: 20px;
		line-height: 20px;
		text-align: center;
		color: #8c8c8c;
		letter-spacing: 3px;
	}
	#NoolePage {
		display: none;
	}
	#BtnNoPrev, #BtnRaPrev {
		width: 50px;
		height: 200px;
		background: url("/en/Assets/Web/Images/Quality/BtnPrve.png") center center no-repeat;
		position: absolute;
		z-index: 1000;
		cursor: pointer;
	}
	#BtnNoNext, #BtnRaNext {
		width: 50px;
		background: url("/en/Assets/Web/Images/Quality/BtnNext.png") center center no-repeat;
		position: absolute;
		z-index: 1000;
		cursor: pointer;
		right: 20px;
	}
	#MissionMb {
		width: 100%;
		background: #f2eee9;
		padding-top: 70px;
		overflow: hidden;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
		padding-bottom: 50px;
	}
	#MissionImg {
		width: 100%;
		height: 430px;
		margin: 0 auto;
		padding-left: 10px;
	}
	#MissionImg img{
		width: 400px;
	}
	#MisText1Mb {
		width: 100%;
		line-height: 30px;
		margin: 0 auto;
		padding-top: 40px;
		font-size: 16px;
		font-weight: 300;
		padding-bottom: 60px;
		background: url('/Assets/Web/Images/Quality/Line3.svg') no-repeat bottom left;
	}
	#MisText2Mb {
		width: 100%;
		line-height: 25px;
		font-size: 16px;
		font-weight: 500;
		color: #8f3834;
		padding-top: 30px;
	}
	#MisText3Mb {
		width: 100%;
		line-height: 25px;
		padding-top: 30px;
		font-size: 14px;
		font-weight: 300;
	}
	#MisImg2Mb {
		width: 335px;
		padding-top: 40px;
		margin: 0 auto;
	}
	#MisImg2Mb img {
		max-width: 100%;
	}
	#Certificate {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 10000;
		background: rgba(0, 0, 0, 0.50);
		display: none;
		padding: 40px;
		box-sizing: border-box;
		padding-top: 100px;
	}
	#CertificateImg {
		max-width: 100%;
		max-height: calc(100vh - 80px);
		margin: 0 auto;
		margin-top: 0px;
	}
	#CertificateImg img {
		max-width: 100%;
	}
	#BtnCertClose {
		width: 32px;
		height: 26px;
		background: url("/en/Assets/Web/Images/Quality/BtnClose.png") no-repeat;
		background-size: 24px;
		cursor: pointer;
		float: right;
		margin-right: 0px;
		margin-top: -50px;
	}
	#FooterTopLine {
	width: 100%;
	height: 30px;
	background: url("/en/Assets/Web/Images/Quality/footerBg.png") no-repeat center top;
	background-size: 600px;
}
}