#arrangeRecipeOuter{
	background: url("../images/arrangerecipe_bg.png") center top repeat;
	padding: 17em 40px 10em;
}

#arrangeRecipeTitle{
	max-width: 850px;
	width: 82%;
	position: relative;
	margin: 0 auto 28em;
	text-align: center;
	padding-bottom: 3em;
}
#arrangeRecipeTitle:before,
#arrangeRecipeTitle:after{
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: 30%;
	background: url("../images/title_bracket.png") left top no-repeat;
	background-size: auto 100%;
	z-index: 10;
}
#arrangeRecipeTitle:before{
	left: 0;
}
#arrangeRecipeTitle:after{
	right: 0;
	transform:rotate(180deg);
}

#arrangeRecipeTitle h1{
	background: none;
	margin: 0;
	padding: 0;
	position: relative;
	font-size: 40px;
	font-weight: 700;
	text-align: center;
}

#arrangeRecipeTitle h1 img{
	width: 550px;
	position: relative;
	top: -0.5em;
}

#arrangeRecipeTitle .text{
	font-size: 18px;
	line-height: 1.8em;
	margin-top: 1em;
}

#arrangeRecipeTitle .illust{
	position: absolute;
}
#arrangeRecipeTitle .illust.map01 img,
#arrangeRecipeTitle .illust.map03 img,
#arrangeRecipeTitle .illust.map05 img{
	animation: shake01 1s steps(1) infinite;
}
@keyframes shake01 {
	/* 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	9%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
	18%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	27%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
	36%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} */
	0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	50%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
}
#arrangeRecipeTitle .illust.map02 img,
#arrangeRecipeTitle .illust.map04 img,
#arrangeRecipeTitle .illust.map06 img{
	animation: shake02 1s steps(1) infinite;
}
@keyframes shake02 {
	/* 0%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
	9%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	18%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
	27%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	36%,100%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)} */
	0%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
	50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
#arrangeRecipeTitle .illust.map01{
	top: -30%;
	left: -19%;
	width: 180px;
}
#arrangeRecipeTitle .illust.map02{
	top: -70%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 180px;
}
#arrangeRecipeTitle .illust.map03{
	top: -48%;
	right: -6%;
	width: 130px;
}
#arrangeRecipeTitle .illust.map04{
	bottom: -62%;
	left: 5%;
	width: 200px;
}
#arrangeRecipeTitle .illust.map05{
	bottom: -33%;
	left: 21%;
	right: 0;
	margin: 0 auto;
	width: 140px;
}
#arrangeRecipeTitle .illust.map06{
	bottom: -40%;
	right: -17%;
	width: 130px;
}




.arrangeRecipeListIn{
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
.arrangeRecipeListIn:nth-of-type(n+2){
	margin-top: 20em;
}
.arrangeRecipeListIn .pastaName{
	position: absolute;
	top: -10em;
	left: 0;
	right: 0;
	margin: auto;
}
.arrangeRecipeListIn .pastaName:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: #fff;
	border-radius: 50%;
	width: 650px;
	height: 600px;
}
.arrangeRecipeListIn .pastaName .name{
	position: relative;
	z-index: 5;
	max-width: 350px;
	margin: 0 auto;
	padding-top: 2.5em;
}
.arrangeRecipeListIn .pastaName .balloon{
	position: absolute;
	left: 0;
	right: 58%;
	top: -18%;
	margin: auto;
	max-width: 300px;
	z-index: 50;
}
.arrangeRecipeListIn .pastaName .balloon img{
	animation: stBounce 2s ease infinite;
}
@keyframes stBounce {
	0%, 10%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
}
.arrangeRecipeListIn.arrange02 .pastaName .balloon{
	top: -40%;
}
.arrangeRecipeListIn.arrange03 .pastaName .balloon{
	right: 49%;
	top: -40%;
}

.arrangeRecipeListIn .pastaPhotoRecipe{
	position: relative;
	z-index: 10;
	background: #fff;
	padding-bottom: 2.5em;
}

.arrangeRecipeListIn .pastaPhotoRecipe .imageAnimation{
	position: relative;
}
.arrangeRecipeListIn .pastaPhotoRecipe .imageAnimation .cover{
	width: 100%;
	height: calc(100%/3);
	background: #fff;
	z-index: 5;
	position: absolute;
	top: 0;
	right: 0;
}
.arrangeRecipeListIn .pastaPhotoRecipe .imageAnimation .cover:nth-of-type(2){
	top: calc(100%/3);
}
.arrangeRecipeListIn .pastaPhotoRecipe .imageAnimation .cover:nth-of-type(3){
	top: calc(100%/3*2);
}

.arrangeRecipeListIn .pastaPhotoRecipe .image{
	padding-top: 1.3em;
}

.pastaPhotoRecipe .package{
	position: absolute;
	top: -2%;
	left: 66%;
	right: 0;
	margin: auto;
	width: 120px;
	z-index: 10;
}

.pastaPhotoRecipe .balloon{
	position: absolute;
	top: 5%;
	left: 0px;
	right: 62%;
	margin: auto;
	width: 300px;
}

.pastaPhotoRecipe .materialList{
	display: flex;
	align-items: center;
}
.pastaPhotoRecipe .materialList > *{
	width: 48%;
}
.pastaPhotoRecipe .materialList .notebook{
	position: relative;
	left: -1.2em;
}

.HowToCookList{
	max-width: 900px;
	width: 88%;
	margin: 3em auto;
	position: relative;
}
.HowToCookList .HowToCookStart{
}
.HowToCookList .HowToCookStart .title{
	max-width: 100px;
	margin-bottom: 2em;
}
.HowToCookList .HowToCookStart ul{
	font-size: 18px;
	counter-reset: number 0;
}
.HowToCookList .HowToCookStart ul li{
	position: relative;
	padding-left: 1.8em;
	line-height: 1.6em;
}
.HowToCookList .HowToCookStart ul li:nth-of-type(n+2){
	margin-top: 1.2em;
}
.HowToCookList .HowToCookStart ul li:before{
	counter-increment: number 1;
	content: counter(number) " ";
	font-family: sans-serif;
	color: #fff;
	background: #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 1.5em;
	height: 1.5em;
}

.HowToCookIllust{
	position: absolute;
	top: 0;
	right: 0;
}
.HowToCookIllust .width01{
	max-width: 200px;
	width: 20vw;
	position: relative;
	right: 10%;
	margin-bottom: -5%;
}
.HowToCookIllust .width02{
	max-width: 320px;
	width: 29.09vw;
}
.HowToCookIllust .width03{
	max-width: 140px;
	width: 12.72vw;
	position: relative;
	right: 33%;
	margin-bottom: -10%;
}
.HowToCookIllust .width04{
	max-width: 250px;
	width: 22.72vw;
}
.HowToCookIllust .width05{
	max-width: 210px;
	width: 19.09vw;
	position: relative;
	right: 16%;
}
.HowToCookIllust .width06{
	max-width: 300px;
	width: 27.27vw;
	margin-top: 2em;
}
.HowToCookIllust .width01 img,
.HowToCookIllust .width03 img,
.HowToCookIllust .width05 img{
	animation: shake01 1s steps(1) infinite;
}
.HowToCookIllust .width02 img,
.HowToCookIllust .width04 img,
.HowToCookIllust .width06 img{
	animation: shake02 1s steps(1) infinite;
}



.arrange02 .HowToCookIllust,
.arrange03 .HowToCookIllust{
	margin-top: 3em;
}


.sSP{
	display: none;
}



/* スマホ
------------------------------------------------*/
@media screen and (max-width:1001.5px){
	.sSP{
		display: block;
	}
	.sPC{
		display: none;
	}
	
	
	#arrangeRecipeOuter {
		padding: 4em 20px 2em;
	}
	#arrangeRecipeTitle{
		padding: 6vw 8vw;
		width: auto;
		margin-bottom: 42vw;
	}
	#arrangeRecipeTitle h1 img {
		top: 0;
	}
	#arrangeRecipeTitle .text {
		font-size: 13px;
	}
	
	#arrangeRecipeTitle .illust.map01 {
		top: -10vw;
		left: -10vw;
		width: 22vw;
		transform: rotate(-29deg);
	}
	#arrangeRecipeTitle .illust.map02{
		top: -17vw;
		width: 23vw;
	}
	#arrangeRecipeTitle .illust.map03 {
		top: -15vw;
		right: -4vw;
		width: 18vw;
	}
	#arrangeRecipeTitle .illust.map04 {
		bottom: -13vw;
		left: 7vw;
		width: 27vw;
	}
	#arrangeRecipeTitle .illust.map05{
		width: 20vw;
		bottom: -8vw;
		left: auto;
		right: 15vw;
	}
	#arrangeRecipeTitle .illust.map06 {
		bottom: 10vw;
		right: -7vw;
		width: 17vw;
	}
	
	
	.arrangeRecipeListIn:nth-of-type(n+2) {
		margin-top: 33vw;
	}
	
	.arrangeRecipeListIn .pastaName .name{
		width: 55%;
		padding-top: 4.5vw;
	}

	.arrangeRecipeListIn .pastaName {
		top: -19.2vw;
	}
	.arrangeRecipeListIn .pastaName:before{
		width: 65vw;
		height: 38vw;
	}
	
	.arrangeRecipeListIn .pastaPhotoRecipe{
		padding-bottom: 1vw;
	}
	
	.arrangeRecipeListIn .pastaPhotoRecipe .image {
		padding-top: 1.5vw;
	}
	
	.pastaPhotoRecipe .package {
		left: 74vw;
		width: 17vw;
	}

	.arrangeRecipeListIn .pastaName .balloon {
		right: 65vw;
		top: -7vw;
		width: 35vw;
	}
	.pastaPhotoRecipe .balloon {
		position: absolute;
		top: 5vw;
		right: 49vw;
		width: 30vw;
	}
	
	.pastaPhotoRecipe .materialList .notebook {
		left: -1.5vw;
		z-index: 10;
	}
	
	.pastaPhotoRecipe .materialList .mPhoto{
		position: absolute;
		right: 2vw;
		width: 55%;
	}
	
	.HowToCookList{
		margin: 2em auto;
	}
	
	.HowToCookList .HowToCookStart .title {
		width: 18vw;
		margin-bottom: 1.5em;
	}
	
	.HowToCookList .HowToCookStart ul {
		font-size: 13px;
	}
	
	
	.HowToCookIllust{
		top: -10vw;
	}
	.arrange02 .HowToCookIllust,
	.arrange03 .HowToCookIllust {
		margin-top: 0;
	}
	.HowToCookIllust .width01 {
		width: 17vw;
		right: 20vw;
		margin-bottom: -10vw;
	}
	.HowToCookIllust .width02{
		width: 22vw;
	}
	.HowToCookIllust .width03 {
		right: 17vw;
		margin-bottom: -13vw;
	}
	.HowToCookIllust .width05 {
		right: 24vw;
		top: 10vw;
	}
	.HowToCookIllust .width06{
		width: 23vw;
		margin-top: -11vw;
	}

}

/* btn */
.sauce_button{
	width: 100%;
	display: flex;
  justify-content: center;
  margin: 50px 0 0px;
}

.btn{
	width: 260px;
}