@charset "UTF-8";

/*-- arrange recipe --*/
#arrange {
	width: 980px;
	margin: 0 auto;
	padding: 140px 0 60px 0;
	}

#lineup01 {
	position: relative;
	width: 980px;
	background: #ffa596 url(../img/lineup01_bg.png) left top repeat-y;
	border-radius: 20px;
	padding-bottom: 40px;
	}

#lineup02 {
	position: relative;
	width: 980px;
	background: #c1dc32 url(../img/lineup02_bg.png) left top repeat-y;
	border-radius: 20px;
	margin-top: 130px;
	padding-bottom: 40px;
	}

#lineup03 {
	position: relative;
	width: 980px;
	background: #fdd200 url(../img/lineup03_bg.png) left top repeat-y;
	border-radius: 20px;
	margin-top: 130px;
	padding-bottom: 40px;
	}

#lineup04 {
	position: relative;
	width: 980px;
	background: #f5bdc0 url(../img/lineup04_bg.png) left top repeat-y;
	border-radius: 20px;
	margin-top: 130px;
	padding-bottom: 40px;
	}

#arrange .pkg {
	position: absolute;
	top: -80px;
	left: -60px;
	z-index: 2;
	}

#arrange .ttl {
	position: absolute;
	top: -37px;
	left: 389px;
	z-index: 3;
	}

#arrange h2 {
	padding-top: 33px;
	}

#lineup01 .lineup01-1 {
	position: relative;
	}

#lineup01 .lineup01-2 {
	position: relative;
	margin-top: 77px;
	}

#lineup02 .lineup02-1 {
	position: relative;
	}

#lineup02 .lineup02-2 {
	position: relative;
	margin-top: 77px;
	}

#lineup03 .lineup03-1 {
	position: relative;
	}

#lineup03 .lineup03-2 {
	position: relative;
	margin-top: 77px;
	}

#lineup04 .lineup04-1 {
	position: relative;
	}

#lineup04 .lineup04-2 {
	position: relative;
	margin-top: 77px;
	}

#arrange .recipe {
	position: relative;
	width: 900px;
	border-radius: 10px;
	background: #fff;
	margin: 0 auto;
	padding: 60px 0 50px 0;
	}

#lineup01 .recipe {
	box-shadow: 6px 6px 4px 3px rgba(255,69,52,0.6);
	}

#lineup02 .recipe {
	box-shadow: 6px 6px 4px 3px rgba(111,164,2,0.6);
	}

#lineup03 .recipe {
	box-shadow: 6px 6px 4px 3px rgba(247,145,0,0.6);
	}

#lineup04 .recipe {
	box-shadow: 6px 6px 4px 3px rgba(226,104,109,0.6);
	}

#arrange .point {
	margin-bottom: 56px;
	}

#arrange .point2 {
	margin-bottom: 36px;
	}

#arrange .photo {
	position: absolute;
	top: 104px;
	left: 494px;
	z-index: 2;
	}

#arrange .time {
	position: absolute;
	top: 76px;
	left: 848px;
	z-index: 3;
	}

#arrange .ingre {
	float: left;
	width: 370px;
	margin-left: 50px;
	}

#arrange .step {
	float: left;
	width: 400px;
	margin-left: 40px;
	}

#arrange .hd {
	display: inline;
	font-size: 17px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	border-radius: 19px;
	margin: 0 auto;
	padding: 7px 2rem 3px;
	}

#lineup01 .hd {
	background: #ff0000;
	}

#lineup02 .hd {
	background: #00b946;
	}

#lineup03 .hd {
	background: #ff9914;
	}

#lineup04 .hd {
	background: #ff868d;
	}

#arrange .ingre ul {
	margin-top: 18px;
	}

#arrange .ingre li {
	font-size: 15px;
	line-height: 21px;
	font-weight: bold;
	margin-top: 8px;
	padding-bottom: 5px;
	}

#lineup01 .ingre li {
	border-bottom: 1px solid #ff0000;
	}

#lineup02 .ingre li {
	border-bottom: 1px solid #00b946;
	}

#lineup03 .ingre li {
	border-bottom: 1px solid #ff9914;
	}

#lineup04 .ingre li {
	border-bottom: 1px solid #ff868d;
	}

#arrange .step ul {
	margin-top: 18px;
	}

#arrange .step li {
	font-weight: bold;
	margin-top: 15px;
	padding-bottom: 15px;
	}

#lineup01 .step li {
	border-bottom: 1px solid #ff0000;
	}

#lineup02 .step li {
	border-bottom: 1px solid #00b946;
	}

#lineup03 .step li {
	border-bottom: 1px solid #ff9914;
	}

#lineup04 .step li {
	border-bottom: 1px solid #ff868d;
	}

#arrange .listL {
	float: left;
	text-align: left;
	white-space: nowrap;
	}

#arrange .listR {
	float: right;
	text-align: right;
	}

#arrange .ico {
	float: left;
	width: 87px;
	padding-left: 2px;
	}

#arrange .txt {
	float: right;
	width: 311px;
	font-size: 15px;
	line-height: 27px;
	}

#arrange span.green {
	color: #00b946;
	}

#arrange span.orange {
	color: #ff9914;
	}

#arrange span.orange2 {
	color: #ff5026;
	}


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

	#arrange {
		width: auto;
		padding: 18vw 0 7.5vw 0;
		}

	#lineup01 {
		width: 88vw;
		background: #ffa596 url(../img/sp/lineup01_bg.png) left top repeat-y;
		background-size: contain;
		border-radius: 2.66vw;
		margin: 0 auto;
		padding-bottom: 6.7vw;
		}

	#lineup02 {
		width: 88vw;
		background: #c1dc32 url(../img/sp/lineup02_bg.png) left top repeat-y;
		background-size: contain;
		border-radius: 2.66vw;
		margin-top: 15.4vw;
		margin: 15.33vw auto 0;
		padding-bottom: 6.7vw;
		}

	#lineup03 {
		width: 88vw;
		background: #fdd200 url(../img/sp/lineup03_bg.png) left top repeat-y;
		background-size: contain;
		border-radius: 2.66vw;
		margin-top: 15.4vw;
		margin: 15.33vw auto 0;
		padding-bottom: 6.7vw;
		}

	#lineup04 {
		width: 88vw;
		background: #f5bdc0 url(../img/sp/lineup04_bg.png) left top repeat-y;
		background-size: contain;
		border-radius: 2.66vw;
		margin-top: 15.4vw;
		margin: 15.33vw auto 0;
		padding-bottom: 6.7vw;
		}

	#arrange .pkg {
		top: -11.33vw;
		left: -2.66vw;
		}

	#arrange .pkg img {
		width: 30.26vw;
		}

	#arrange .ttl {
		top: 5.33vw;
		left: 0;
		}

	#arrange .ttl img {
		width: 88vw;
		}

	#arrange h2 {
		position: absolute;
		top: 16.8vw;
		left: 0;
		width: auto;
		padding: 0;
		z-index: 3;
		}

	#arrange h2 img {
		width: 88vw;
		}

	#lineup01 .lineup01-1 {
		padding: 27.46vw 0 0 0;
		}

	#lineup01 .lineup01-2 {
		margin-top: 2.67vw;
		padding: 27.46vw 0 0 0;
		}

	#lineup02 .lineup02-1 {
		padding: 27.46vw 0 0 0;
		}

	#lineup02 .lineup02-2 {
		margin-top: 2.67vw;
		padding: 27.46vw 0 0 0;
		}

	#lineup03 .lineup03-1 {
		padding: 27.46vw 0 0 0;
		}

	#lineup03 .lineup03-2 {
		margin-top: 2.67vw;
		padding: 35.46vw 0 0 0;
		}

	#lineup04 .lineup04-1 {
		padding: 27.46vw 0 0 0;
		}

	#lineup04 .lineup04-2 {
		margin-top: 2.67vw;
		padding: 27.46vw 0 0 0;
		}

	#arrange .recipe {
		width: 80vw;
		border-radius: 1.33vw;
		padding: 63.5vw 0 5vw 0;
		}

	#lineup01 .recipe {
		box-shadow: 0.8vw 0.8vw 0.5vw 0.4vw rgba(255,69,52,0.6);
		}

	#lineup02 .recipe {
		box-shadow: 0.8vw 0.8vw 0.5vw 0.4vw rgba(111,164,2,0.6);
		}

	#lineup03 .recipe {
		box-shadow: 0.8vw 0.8vw 0.5vw 0.4vw rgba(247,145,0,0.6);
		}

	#lineup04 .recipe {
		box-shadow: 0.8vw 0.8vw 0.5vw 0.4vw rgba(226,104,109,0.6);
		}

	#arrange .point {
		margin-bottom: 8vw;
		}

	#arrange .point img {
		width: 100%;
		}

	#arrange .point2 {
		margin-bottom: 8vw;
		}

	#arrange .point2 img {
		width: 100%;
		}

	#arrange .photo {
		top: 28.66vw;
		left: 0;
		}

	#lineup03 .lineup03-2 > .photo {
		top: 36.79vw;
		}

	#arrange .photo img {
		width: 88vw;
		}

	#arrange .time {
		top: 24.8vw;
		left: 66.8vw;
		}

	#lineup03 .lineup03-2 > .time {
		top: 32.93vw;
		}

	#arrange .time img {
		width: 14.4vw;
		}

	#arrange .hd {
		display: inline-block;
		min-width: 30vw;
		font-size: 23px;
		border-radius: 22px;
		padding: 6px 2rem 4px;
		}

	#arrange .ingre {
		float: none;
		width: 70.66vw;
		text-align: center;
		margin: 0 auto;
		}

	#arrange .step {
		float: none;
		width: 70.66vw;
		text-align: center;
		margin: 7.5vw auto 0;
		}

	#arrange .ingre ul {
		text-align: left;
		margin-top: 4vw;
		}

	#arrange .ingre li {
		font-size: 22px;
		line-height: 28px;
		margin-top: 1.9vw;
		padding-bottom: 1.2vw;
		}

	#arrange .step ul {
		text-align: left;
		margin-top: 4vw;
		}

	#arrange .step li {
		margin-top: 3vw;
		padding-bottom: 2.5vw;
		}

	#arrange .step li:last-child {
		border: none;
		}

	#arrange .ico {
		width: calc(100% - 56vw);
		padding-left: 0;
		}

	#arrange .ico img {
		width: 12.53vw;
		padding: 3px 0 0 2px;
		}

	#arrange .txt {
		width: 56vw;
		font-size: 21px;
		line-height: 31px;
		}

}