@charset "utf-8";

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes FideIn {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes FideIn {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes FideDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes FideDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes FideLeft {
	0% {
		opacity: 0;
		transform: translateX(-40px);
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes FideLeft {
	0% {
		opacity: 0;
		transform: translateX(-40px);
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes FideRight {
	0% {
		opacity: 0;
		transform: translateX(40px);
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes FideRight {
	0% {
		opacity: 0;
		transform: translateX(40px);
	}
	10% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes PopUp {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes PopUp {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes Fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




/*page
-------------------------------*/
body {
	opacity: 0;
	transition: 0.7s;
}
body.ready {
	opacity: 1;
}
.page-title {
	opacity: 0;
}
.js-animetion .page-title {
	animation: bounceIn 0.7s ease-in alternate 0.8s forwards;
}
.mv-content,
.pro-skt {
  opacity: 0;
}
.js-animetion .mv-content,
.js-animetion .pro-skt {
  animation: FideIn 0.5s ease-in-out alternate 1.6s forwards;
}
.recipe-b-title,
.recipe-blog-logo,
.recipe-sisiters {
  opacity: 0;
}
.recipe-top .recipe-left,
.recipe-top .recipe-right {
	opacity: 0;
}
.js-animetion.recipe-top .recipe-left {
	animation: FideLeft 0.5s ease-in-out alternate 0s forwards;
}
.js-animetion.recipe-top .recipe-right {
	animation: FideRight 0.5s ease-in-out alternate 0.3s forwards;
}
.js-animetion.recipe-top .recipe-b-title {
	animation: PopUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 0.8s forwards;
}
.js-animetion.recipe-top .recipe-blog-logo,
.js-animetion.recipe-top .recipe-sisiters {
  animation: FideIn 0.5s ease-in-out alternate 1.4s forwards;
}
.recipe-box {
	opacity: 0;
  transform: translateY(-40px);
}
.recipe-lsit .recipe-box:first-child {
	animation: FideDown 0.5s ease-in-out alternate 0s forwards;
}
.recipe-lsit .recipe-box:nth-child(2) {
  animation: FideDown 0.5s ease-in-out alternate 0.2s forwards;
}
.recipe-lsit .recipe-box:nth-child(3) {
  animation: FideDown 0.5s ease-in-out alternate 0.4s forwards;
}
.recipe-lsit .recipe-box:nth-child(4) {
  animation: FideDown 0.5s ease-in-out alternate 0.6s forwards;
}
.recipe-lsit .recipe-box:nth-child(5) {
  animation: FideDown 0.5s ease-in-out alternate 0.8s forwards;
}
.recipe-lsit .recipe-box:last-child {
  animation: FideDown 0.5s ease-in-out alternate 1.0s forwards;
}
.sisiters-recipe {
  opacity: 0;
}
.sisiters-recipe.js-animetion {
  animation: FideIn 0.5s ease-in-out alternate 0s forwards;
}
.beans-title-area,
.beans-spun,
.beans-recipe {
  opacity: 0;
}
.beans.js-animetion .beans-title-area,
.beans.js-animetion .beans-spun {
  animation: PopUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 0.8s forwards;
}
.beans.js-animetion .beans-list .beans-recipe:first-child {
  animation: FideIn 0.5s ease-in-out alternate 1.2s forwards;
}
.beans.js-animetion .beans-list .beans-recipe:nth-child(2) {
  animation: FideIn 0.5s ease-in-out alternate 1.4s forwards;
}
.beans.js-animetion .beans-list .beans-recipe:nth-child(3) {
  animation: FideIn 0.5s ease-in-out alternate 1.6s forwards;
}
.modal-box .modal-main {
  opacity: 0;
}
.modal-box.js-call .modal-main {
  animation: Fade 0.5s ease-in-out alternate 0s forwards;
}

.mv-recipe,
.mv-recipe-title img,
.mv-recipe-list {
  opacity: 0;
}
.mv-recipe.js-animetion {
  animation: FideIn 0.5s ease-in-out alternate 0s forwards;
}

.mv-recipe.js-animetion .mv-recipe-title img {
  animation: FideIn 0.5s ease-in-out alternate 0.5s forwards;
}
.mv-recipe.js-animetion .mv-recipe-list {
  animation: FideIn 0.5s ease-in-out alternate 1s forwards;
}

.hot-recipe,
.hot-recipe-title img,
.hot-recipe-sub-title img,
.hot-recipe-mv,
.hot-list-title,
.hot-list,
.hot-list-after {
  opacity: 0;
}

.hot-recipe.js-animetion {
  animation: FideIn 0.5s ease-in-out alternate 0s forwards;
}

.hot-recipe.js-animetion .hot-recipe-title img {
  animation: FideIn 0.5s ease-in-out alternate 0.5s forwards;
}
.hot-recipe.js-animetion .hot-recipe-sub-title img {
  animation: FideIn 0.5s ease-in-out alternate 1s forwards;
}
.hot-recipe.js-animetion .hot-recipe-mv {
  animation: FideIn 0.5s ease-in-out alternate 1.5s forwards;
}
.hot-recipe.js-animetion .hot-list-title {
  animation: FideIn 0.5s ease-in-out alternate 2s forwards;
}
.hot-recipe.js-animetion .hot-list {
  animation: FideIn 0.5s ease-in-out alternate 2.5s forwards;
}
.hot-recipe.js-animetion .hot-list-after {
  animation: FideIn 0.5s ease-in-out alternate 3s forwards;
}

@media screen and (min-width: 768px) {
  .mv-recipe-item:nth-child(n+4) {
    transform: translateY(-40px);
  }
  .mv-recipe-list.js-open .mv-recipe-item:nth-child(n+4) {
    animation: FideDown 0.5s ease-in-out alternate 0s forwards;
  }
}
@media screen and (max-width: 767px) {
  .mv-recipe-item:nth-child(n+3) {
    transform: translateY(-40px);
  }
  .mv-recipe-list.js-open .mv-recipe-item:nth-child(n+3) {
    animation: FideDown 0.5s ease-in-out alternate 0s forwards;
  }
}