@charset "utf-8";

#yakisoba span.green {
	color: #64aa51;
	}

#yakisoba span.brown {
	color: #8f3714;
	}

#yakisoba span.orange {
	color: #e14401;
	}

/*------------ SP ------------*/
@media screen and (max-width: 640px) {

#yakisoba {
	color: #21100d;
	background: url("../../img/bg_red.jpg") left top repeat;
	padding-top: 10.66vw;
	}

#yakisoba .recipe-area {
	position: relative;
	width: 94.66vw;
	margin: 0 auto;
	background: #fff;
	border-radius: 2.66vw;
	box-shadow: 0.53vw 0.66vw 0.53vw rgba(0,0,0,0.3);
	margin: 14.66vw auto 0;
	padding: 14.13vw 0 3.6vw 0;
	}

#yakisoba .recipe-area h1 {
	position: absolute;
	top: -9.33vw;
	left: 0;
	z-index: 1;
	}

#yakisoba .recipe-area div.photo {
	width: 85.33vw;
	margin: 0 auto;
	}

/* Ingre */
#yakisoba .ingre {
	font-size: 3.73vw;
	font-weight: bold;
	color: #231815;
	margin-top: 5.33vw;
	}

#yakisoba .ingre ul {
	width: 74.93vw;
	margin: 0 auto;
	}

#yakisoba .ingre ul.listL {
	margin-top: 3.7vw;
	}

#yakisoba .ingre li {
	background: url("../img/sp/ingre_dot.gif") left bottom no-repeat;
	background-size: 100% auto;
	margin-top: 0.7vw;
	padding-bottom: 0.6vw;
	}

#yakisoba .ingre li.end {
	background: none;
	}

#yakisoba .ingre li.noline {
	background: none;
	}

#yakisoba .ingre p.left {
	float: left;
	}

#yakisoba .ingre p.right {
	float: right;
	}

/* Howto */
#yakisoba .howto {
	margin-top: 7.2vw;
	}

#yakisoba .time {
	width: 40.93vw;
	margin: 0 auto 6.53vw;
	}

#yakisoba .howto ul.step {
	width: 85.33vw;
	margin: 5.6vw auto 0;
	}

#yakisoba .howto ul.step li p {
	font-size: 4vw;
	line-height: 6.93vw;
	font-weight: normal;
	font-feature-settings: "palt";
	color: #231815;
	padding: 2.66vw 0.6vw 6.93vw;
	}

/* Point */
#yakisoba .point {
	margin-top: 0;
	}

/*----- arrange -----*/
#yakisoba .arrange-area {
	position: relative;
	width: 94.66vw;
	margin: 0 auto;
	background: #fff;
	border: 0.53vw solid #d49159;
	border-radius: 2.66vw;
	box-sizing: border-box;
	margin: 14.66vw auto 0;
	padding: 3.6vw 0 3.33vw 0;
	}

#yakisoba .fukidashi {
	position: absolute;
	top: -7.6vw;
	left: 2.53vw;
	z-index: 1;
	}

#yakisoba .fukidashi img {
	width: 24.8vw;
	}

#yakisoba .arrange-area ul {
	width: 80vw;
	margin: 4.8vw auto 0;
	}

#yakisoba .arrange-area li {
	margin-bottom: 5.2vw;
	}

#yakisoba .fig {
	text-align: center;
	margin-top: 13.33vw;
	}

#yakisoba .bnr-area {
	width: 89.33vw;
	margin: 13.33vw auto 0;
	padding-bottom: 9.33vw;
	}

#yakisoba .bnr-area li {
	margin-bottom: 6.66vw;
	}

}

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

/*----- recipe -----*/
#yakisoba {
	width: 100%;
	background: url("../../img/bg_red.jpg") left top repeat;
	padding-top: 128px;
	}

#yakisoba .recipe-area {
	position: relative;
	width: 960px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 4px 5px 4px rgba(0,0,0,0.3);
	margin: 0 auto;
	padding: 117px 0 55px 0;
	}

#yakisoba .recipe-area h1 {
	position: absolute;
	top: -70px;
	left: 0;
	z-index: 1;
	}

#yakisoba .recipe-area div.photo {
	width: 720px;
	margin: 0 auto;
	}

/* Ingre */
#yakisoba .ingre {
	font-size: 18px;
	font-weight: bold;
	color: #231815;
	margin-top: 33px;
	}

#yakisoba .ingre ul.listL {
	float: left;
	width: 302px;
	margin: 25px 0 0 120px;
	}

#yakisoba .ingre ul.listR {
	float: left;
	width: 362px;
	margin: 25px 0 0 58px;
	}

#yakisoba .ingre ul.listL li {
	width: 302px;
	background: url("../img/ingre_dot_l.gif") left bottom no-repeat;
	margin-top: 7px;
	padding-bottom: 9px;
	}

#yakisoba .ingre ul.listR li {
	width: 362px;
	background: url("../img/ingre_dot_r.gif") left bottom no-repeat;
	margin-top: 7px;
	padding-bottom: 9px;
	}

#yakisoba .ingre ul.listL li:last-child {
	background: none;
	}

#yakisoba .ingre ul.listR li:last-child {
	background: none;
	}

#yakisoba .ingre p.left {
	float: left;
	}

#yakisoba .ingre p.right {
	float: right;
	}

#yakisoba .ingre ul.listR li.noline {
	background: none;
	}

/* Howto */
#yakisoba .howto {
	position: relative;
	font-weight: bold;
	margin-top: 16px;
	}

#yakisoba .time {
	position: absolute;
	top: 13px;
	left: 730px;
	z-index: 1;
	}

#yakisoba .howto ul.step {
	width: 800px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin: 32px auto 0;
	}

#yakisoba .howto ul.step li {
	width: 380px;
	}

#yakisoba .howto ul.step li p {
	font-size: 18px;
	line-height: 32px;
	font-weight: normal;
	font-feature-settings: "palt";
	color: #231815;
	padding: 15px 10px 30px;
	}

/* Point */
#yakisoba .point {
	text-align: center;
	margin-top: 12px;
	}

#yakisoba .point img {
	display: inline-block;
	}

/*----- arrange -----*/
#yakisoba .arrange-area {
	position: relative;
	width: 960px;
	margin: 0 auto;
	background: #fff;
	border: 4px solid #d49159;
	border-radius: 20px;
	box-sizing: border-box;
	margin: 100px auto 0;
	padding: 43px 0 6px 0;
	}

#yakisoba .fukidashi {
	position: absolute;
	top: -26px;
	left: 94px;
	z-index: 1;
	}

#yakisoba .arrange-area ul {
	width: 800px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
	margin: 40px auto 0;
	}

#yakisoba .arrange-area li {
	margin-bottom: 47px;
	}

#yakisoba .fig {
	text-align: center;
	margin-top: 80px;
	}

#yakisoba .fig img {
	display: inline-block;
	}

#yakisoba .bnr-area {
	width: 960px;
	margin: 40px auto 0;
	padding-bottom: 80px;
	}

#yakisoba .bnr-area ul {
	width: 960px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 30px;
	margin: 100px auto 0;
	}

}