@charset "UTF-8";

.content-container {
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   hero
   ======================================================================= */
.hero {
  width: 100%;
  position: relative;
  background: #f7e253;
  overflow: hidden;
}

.hero__wrapper {
  position: relative;
  z-index: 50;
}

@media all and (min-width: 768px) {
  .hero__wrapper {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1170px;
    background: url(../img/top/hero_img.png) 50% 0 no-repeat;
    background-size: cover;
  }

  .hero__wrapper::before {
    content: "";
    width: 1px;
    display: block;
    padding-top: 56.88%;
  }
}

@media all and (max-width: 767px) {
  .hero__wrapper {
    margin-left: auto;
    margin-right: auto;
    /*background: url(../img/top/hero_img_sp.png) 50% 4% no-repeat;*/
    background: url(../img/top/hero_img_sp.png) 50% 0 no-repeat;
    background-size: 100%;
  }

  .hero__wrapper::before {
    content: "";
    display: block;
    /*padding-top: 116.875%;*/
    padding-top: 93.68%;
  }
}



.hero__product {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .hero__product {
    background: url(../img/top/hero_product.png) 0 0 no-repeat;
    background-size: cover;
    width: 33.25%;
    left: 50%;
    margin-left: -21.6%;
    top: 3.5%;
  }

  .hero__product::before {
    content: "";
    display: block;
    padding-top: 121.34%;
  }
}

@media all and (max-width: 767px) {
  .hero__product {
    background: url(../img/top/hero_product_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 45.63%;
    left: 50%;
    margin-left: -23.5%;
    top: 11.8%;
  }

  .hero__product::before {
    content: "";
    display: block;
    padding-top: 125.33%;
  }
}

.hero__copy01 {
  display: inline-block;
  position: absolute;
  -webkit-animation: bound 1.25s ease 1.25s infinite both;
  animation: bound 1.25s ease 1.25s infinite both;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .hero__copy01 {
    background: url(../img/top/hero_copy01.png) 0 0 no-repeat;
    background-size: cover;
    width: 19.7%;
    left: 50%;
    margin-left: 12.8%;
    top: 2.6%;
  }

  .hero__copy01::before {
    content: "";
    display: block;
    padding-top: 133.7%;
  }
}

@media all and (max-width: 767px) {
  .hero__copy01 {
    background: url(../img/top/hero_copy01_sp.png) 0 0 no-repeat;
    background-size: contain;
    width: 22.82%;
    left: 50%;
    margin-left: 22%;
    top: 4%;
  }

  .hero__copy01::before {
    content: "";
    display: block;
    padding-top: 238.4%;
  }
}

.hero__copy02 {
  display: inline-block;
  position: absolute;
  -webkit-animation: bound 1.25s ease 1.25s infinite both;
  animation: bound 1.25s ease 1.25s infinite both;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .hero__copy02 {
    background: url(../img/top/hero_copy02.png) 0 0 no-repeat;
    background-size: contain;
    width: 13.85%;
    left: 50%;
    margin-left: -35.4%;
    top: 4.0%;
  }

  .hero__copy02::before {
    content: "";
    display: block;
    padding-top: 269.69%;
  }
}

@media all and (max-width: 767px) {
  .hero__copy02 {
    background: url(../img/top/hero_copy02_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 23.6%;
    left: 50%;
    margin-left: -47%;
    top: 6%;
  }

  .hero__copy02::before {
    content: "";
    display: block;
    padding-top: 265.29%;
  }
}

.hero__onlineshop span {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

@media all and (min-width: 768px) {
  .hero__onlineshop {
    position: absolute;
    right: 10px;
    top: 20px;
  }

  .hero__onlineshop a {
    display: block;
    width: 140px;
    height: 140px;
    background: #e60012;
    border-radius: 70px;
  }

  .hero__onlineshop span {
    width: 140px;
    height: 140px;
    background: url(../img/top/hero_onlineshop_label.png) 0 0 no-repeat;
  }
}

@media all and (max-width: 767px) {
  .hero__onlineshop {
    position: absolute;
    width: 100%;
    background: #f5efd8;
    left: 0;
    bottom: 0;
  }

  .hero__onlineshop::before {
    content: "";
    display: block;
    padding-top: 22.5%;
  }

  .hero__onlineshop a {
    display: block;
    width: 87.5%;
    height: 59%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #e60012;
    border-radius: 10px;
  }

  .hero__onlineshop a::after {
    content: "";
    display: block;
    width: 19px;
    height: 14px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto 0;
    background: url(../img/top/hero_onlineshop_icon_sp.png) 0 0 no-repeat;
    background-size: 19px 14px;
  }

  .hero__onlineshop span {
    background: url(../img/top/hero_onlineshop_label_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 51.5%;
    position: absolute;
    left: 50%;
    margin-left: -25.35%;
    top: 14%;
  }

  .hero__onlineshop span::before {
    content: "";
    display: block;
    padding-top: 19.5%;
  }
}

.no-touchevents .hero__onlineshop a {
  display: block;
}

.no-touchevents .hero__onlineshop a:hover {
  -webkit-animation: bound 1s ease 0s both;
  animation: bound 1s ease 0s both;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
}

/* ==========================================================================
   ANIME
   ======================================================================= */
.section-anime-view {
  width: 100%;
}

@media all and (min-width: 768px) {
  .section-anime-view {
    height: 160px;
  }
}

@media all and (max-width: 767px) {
  .section-anime-view {
    height: 200px;
  }
}


/* ==========================================================================
   special
   ======================================================================= */
.special {
  width: 100%;
  position: relative;
  background: #f5efd8;
}

.special-wrapper {
  width: 100%;
}

.special__header {
  width: 100%;
  background: #e60012;
}

.special__header span {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
  width: 100%;
}

@media all and (min-width: 768px) {
  .special__header span {
    height: 70px;
    background: url(../img/top/special_title.png) 50% 0 no-repeat;
  }
}

@media all and (max-width: 767px) {
  .special__header span {
    width: 100%;
    background: url(../img/top/special_title_sp.png) no-repeat;
    background-size: 100%;
  }

  .special__header span::before {
    content: "";
    display: block;
    padding-top: 10.94%;
  }
}

.special__bnr {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  .special__body {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 30px 20px;
    max-width: 960px;
  }
}

@media all and (max-width: 767px) {
  .special__body {
    margin-left: auto;
    margin-right: auto;
    padding: 15px 0px;
  }
}

.special__bnr span {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
  width: 100%;
}

@media all and (min-width: 768px) {
  .special__bnr {
    width: 100%;
  }

  .sp_bnr01 span {
    background: #ff8d8d url(../img/top/special_bnr.png) 50% 0 no-repeat;
    background-size: cover;
    border-radius: 20px;
  }

  .sp_bnr01 a span {
    background-color: #ff8d8d;
    -webkit-transition: background-color .15s linear;
    transition: background-color .15s linear;
  }

  .sp_bnr01 a:hover span {
    background-color: #ff8d8d;
  }

  .sp_bnr02 span {
    background: #f39802 url(../img/top/special_bnr_lessoil.png) 50% 0 no-repeat;
    background-size: cover;
    border-radius: 20px;
  }

  .sp_bnr02 a span {
    background-color: #f39802;
    -webkit-transition: background-color .15s linear;
    transition: background-color .15s linear;
  }

  .sp_bnr02 a:hover span {
    background-color: #f5ad37;
  }

  .sp_bnr01 {
    padding-top: 30px;
  }

  /* 2202.02.10 add PC start */
  .sp_bnr03 span,
  .sp_bnr03-sp span {
    background: #E50012 url("../img/top/special_bnr_rakureci.png") 50% 0 no-repeat;
    background-size: cover;
    border-radius: 20px;
  }

  .sp_bnr03 a span,
  .sp_bnr03-sp a span {
    background-color: #E50012;
    -webkit-transition: background-color .15s linear;
    transition: background-color .15s linear;
  }

  .sp_bnr03 a:hover span,
  .sp_bnr03-sp {
    background-color: #F7374E;
  }

  .sp_bnr03,
  .sp_bnr03-sp {
    padding-top: 30px;
  }

  .sp_bnr03-sp {
    display: none;
  }

  /* 2202.02.10 add PC end */
  .special__bnr span::before {
    content: "";
    display: block;
    padding-top: 25.54%;
  }
}

@media all and (max-width: 767px) {
  .special__bnr {
    width: 87.5%;
    margin: 0 auto;
  }

  .sp_bnr01 span {
    background: #ff8d8d url(../img/top/special_bnr_sp.png) 50% 0 no-repeat;
    background-size: 100%;
    border-radius: 10px;
  }

  .sp_bnr02 span {
    background: #f39802 url(../img/top/special_bnr_lessoil_sp.png) 50% 0 no-repeat;
    background-size: 100%;
    border-radius: 10px;
  }

  .sp_bnr01 {
    padding-top: 15px;
  }

  /* 2202.02.10 add SP start */
  .sp_bnr03 {
    display: none;
  }

  .sp_bnr03-sp {
    display: block;
  }

  .sp_bnr03-sp span {
    background: #E50012 url("../img/top/special_bnr_rakureci_sp.png") 50% 0 no-repeat;
    background-size: 100%;
    border-radius: 10px;
  }

  /* 2202.02.10 add SP end */

  /*.special__bnr span{
    background:#69adf8 url(../img/top/special_bnr_undoukai_sp.png) 50% 0 no-repeat;
    background-size: 100%;
    border-radius: 10px;
  }*/
  .special__bnr span::before {
    content: "";
    display: block;
    padding-top: 41.2%;
  }
}

/*.no-touchevents .special__bnr .sp_bnr01 a span{
  background-color: #69adf8;
  -webkit-transition: background-color .15s linear;
  transition: background-color .15s linear;
}
.no-touchevents .special__bnr .sp_bnr01 a:hover span{
  background-color: #75c1ff;
}*/

/* ==========================================================================
   about
   ======================================================================= */
.section-about {
  background: #f5efd8;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .section-about .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.82%;
  }
}

@media all and (max-width: 767px) {
  .section-about .section__wrapper {
    width: 100%;
    padding: 0;
  }

  .section-about .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 125%;
  }
}


.about__title {
  display: inline-block;
  position: absolute;
  background: url(../img/top/about_copy02.png) 0 0 no-repeat;
  background-size: cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .about__title {
    width: 29.83%;
    right: 5.5%;
    /* margin-left: -43.2%; */
    top: 5.2%;
  }

  .about__title::before {
    content: "";
    display: block;
    padding-top: 36.01%;
  }
}

@media all and (max-width: 767px) {
  .about__title {
    width: 31.5%;
    left: 8.2%;
    /* margin-left: -43.1%; */
    top: 11.7%;
  }

  .about__title::before {
    content: "";
    display: block;
    padding-top: 36.41%;
  }
}


.about__product {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .about__product {
    background: url(../img/top/about_product.png) 0 0 no-repeat;
    background-size: cover;
    width: 33.23%;
    left: 50%;
    margin-left: -16.8%;
    top: 4.4%;
  }

  .about__product::before {
    content: "";
    display: block;
    padding-top: 121.64%;
  }
}

@media all and (max-width: 767px) {
  .about__product {
    background: url(../img/top/about_product_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 52.2%;
    left: 50%;
    margin-left: -41.3%;
    top: 22.4%;
  }

  .about__product::before {
    content: "";
    display: block;
    padding-top: 121.3%;
  }
}


.about__copy01 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .about__copy01 {
    background: url(../img/top/about_copy.png) 0 0 no-repeat;
    background-size: cover;
    width: 30.11%;
    left: 50%;
    margin-left: -43.5%;
    top: 8.1%;
  }

  .about__copy01::before {
    content: "";
    display: block;
    padding-top: 126.15%;
  }
}

@media all and (max-width: 767px) {
  .about__copy01 {
    background: url(../img/top/about_copy_sp.png) 0 0 no-repeat;
    background-size: contain;
    width: 34.5%;
    left: 50%;
    margin-left: 8.2%;
    top: 12%;
  }

  .about__copy01::before {
    content: "";
    display: block;
    padding-top: 125.16%;
  }
}


.about__chara {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .about__chara {
    background: url(../img/top/about_char.png) 0 0 no-repeat;
    background-size: cover;
    width: 23.96%;
    left: 50%;
    margin-left: 20.9%;
    bottom: 0;
  }

  .about__chara::before {
    content: "";
    display: block;
    padding-top: 163.04%;
  }
}

@media all and (max-width: 767px) {
  .about__chara {
    background: url(../img/top/about_char.png) 0 0 no-repeat;
    background-size: cover;
    width: 27.5%;
    left: 50%;
    margin-left: 14%;
    bottom: 58px;
  }

  .about__chara::before {
    content: "";
    display: block;
    padding-top: 164.04%;
  }
}





.section-about__btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  .section-about__btn {
    width: 290px;
    top: 85.4%;
  }
}

@media all and (max-width: 767px) {
  .section-about__btn {
    width: 87.5%;
    bottom: 25px;
  }
}


/* ==========================================================================
   products
   ======================================================================= */
.section-products {
  background: #f5efd8;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .section-products .section__wrapper {
    padding: 32px 0 75px;
    /*background: url(../img/top/products_bg.png) 50% 0 no-repeat;*/
    /* background-size: cover; */
  }

  /* .section-products .section__wrapper::before{
    content: "";
    display: block;
    padding-top: 56.82%;
  } */
}

@media all and (max-width: 767px) {
  .section-products .section__wrapper {
    /*background: url(../img/top/products_bg_sp.png) 50% 0 no-repeat;*/
    padding: 10.67vw 0 17.33vw;
    /* background-size: 320px 831px;
    width: 100%; */

  }

  /* .section-products .section__wrapper::before{
    content: "";
    display: block;
    padding-top: 259.84%;
  } */
}

.products__title {
  display: block;
  max-width: 410px;
  width: 46.5%;
  margin: 0 auto 20px;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media all and (max-width: 767px) {
  .products__title {
    max-width: none;
    width: 77.33vw;
    margin: 0 auto 5.33vw;
  }
}

/* .products__title{
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}
@media all and (min-width: 768px){
  .products__title{
    background: url(../img/top/products_title.png) 0 0 no-repeat;
    background-size: cover;
    width: 37%;
    left: 50%;
    margin-left: -50.8%;
    top: 35.5%;
  }
  .products__title::before{
    content: "";
    display: block;
    padding-top: 96.28%;
  }
}

@media all and (min-width: 1180px){
  .products__title{
    width: 42.74%;
    margin-left: -58.1%;
    top: 29.2%;
  }
}

@media all and (max-width: 767px){
  .products__title{
    background: url(../img/top/products_title_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 77.18%;
    left: 50%;
    margin-left: -33.9%;
    top: 4.2%;
  }
  .products__title::before{
    content: "";
    display: block;
    padding-top: 96.38%;
  }
} */

.products__item__01 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .products__item__01 {
    background: url(../img/top/products_item01.png) 0 0 no-repeat;
    background-size: cover;
    width: 22.71%;
    left: 50%;
    margin-left: -11.77%;
    top: 9.5%;
  }

  .products__item__01::before {
    content: "";
    display: block;
    padding-top: 155.96%;
  }
}

@media all and (max-width: 767px) {
  .products__item__01 {
    background: url(../img/top/products_item01_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 40.937%;
    left: 50%;
    margin-left: -20%;
    top: 36.4%;
  }

  .products__item__01::before {
    content: "";
    display: block;
    padding-top: 177.13%;
  }
}

.products__item__02 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .products__item__02 {
    background: url(../img/top/products_item02.png) 0 0 no-repeat;
    background-size: cover;
    width: 14.375%;
    left: 50%;
    margin-left: 13.8%;
    top: 9.5%;
  }

  .products__item__02::before {
    content: "";
    display: block;
    padding-top: 246.38%;
  }
}

@media all and (max-width: 767px) {
  .products__item__02 {
    background: url(../img/top/products_item02_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 27.812%;
    left: 50%;
    margin-left: -37.187%;
    top: 67.2%;
  }

  .products__item__02::before {
    content: "";
    display: block;
    padding-top: 193.3%;
  }
}

.products__item__03 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .products__item__03 {
    background: url(../img/top/products_item03.png) 0 0 no-repeat;
    background-size: cover;
    width: 18.334%;
    left: 50%;
    margin-left: 30.6%;
    top: 9.5%;
  }

  .products__item__03::before {
    content: "";
    display: block;
    padding-top: 193.185%;
  }
}

@media all and (max-width: 767px) {
  .products__item__03 {
    background: url(../img/top/products_item03_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 38.125%;
    left: 50%;
    margin-left: 4.687%;
    top: 67.2%;
  }

  .products__item__03::before {
    content: "";
    display: block;
    padding-top: 141%;
  }
}



.section-products__btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  .section-products__btn {
    width: 290px;
    top: 83.4%;
  }
}

@media all and (max-width: 767px) {
  .section-products__btn {
    width: 87.5%;
    bottom: 30px;
  }
}


/* ==========================================================================
   recipe
   ======================================================================= */
.section-recipe {
  background: #f5efd8;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .section-recipe .section__wrapper {
    /*background: url(../img/top/recipe_bg.png) 50% 0 no-repeat;*/
    background-size: cover;
  }

  .section-recipe .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.82%;
  }
}

@media all and (max-width: 767px) {
  .section-recipe .section__wrapper {
    /*background: url(../img/top/recipe_bg_sp.png) 50% 0 no-repeat;*/
    background-size: 100%;
    padding: 0;
  }

  .section-recipe .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 178.125%;
  }
}

.section-recipe__btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  .section-recipe__btn {
    width: 290px;
    top: 81.2%
  }
}

@media all and (max-width: 767px) {
  .section-recipe__btn {
    width: 87.5%;
    bottom: 30px;
  }
}

.recipe__char {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .recipe__char {
    background: url(../img/top/recipe_char.png) 0 0 no-repeat;
    background-size: cover;
    width: 20%;
    left: 50%;
    margin-left: 30.9%;
    top: 68.3%;
  }

  .recipe__char::before {
    content: "";
    display: block;
    padding-top: 83.53%;
  }
}

@media all and (min-width: 1180px) {
  .recipe__char {
    width: 25.32%;
    margin-left: 34.8%;
    top: 59.3%;
  }
}

@media all and (max-width: 767px) {
  .recipe__char {
    background: url(../img/top/recipe_char_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 28.75%;
    left: 50%;
    margin-left: 7%;
    top: 73.5%;
  }

  .recipe__char::before {
    content: "";
    display: block;
    padding-top: 83.53%;
  }
}

.recipe__title {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .recipe__title {
    background: url(../img/top/recipe_title.png) 0 0 no-repeat;
    background-size: cover;
    width: 71.15%;
    left: 50%;
    margin-left: -35.2%;
    top: 10.5%;
  }

  .recipe__title::before {
    content: "";
    display: block;
    padding-top: 10.4%;
  }
}

@media all and (max-width: 767px) {
  .recipe__title {
    background: url(../img/top/recipe_title_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 65.312%;
    left: 50%;
    margin-left: -32.2%;
    top: 5%;
  }

  .recipe__title::before {
    content: "";
    display: block;
    padding-top: 33.02%;
  }
}

.recipe__body::after {
  content: "";
  display: block;
  clear: both;
}

.recipe__item {
  float: left;
  background: #FFF;
  box-sizing: border-box;
}

.recipe__name {
  min-height: 3em;
  text-align: center;
  font-weight: bold;
  color: #6a3906;
}

.recipe__item img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

@media all and (min-width: 768px) {
  .recipe__body {
    width: 748px;
    top: 32.4%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .recipe__item {
    width: calc((100% - 49px) / 4);
    margin-right: 16px;
    padding: 10px;
    border-radius: 12px;
    border: #6a3906 3px solid;
  }

  .recipe__item:nth-child(4n) {
    margin-right: 0;
  }

  .recipe__item:nth-child(4n + 1) {
    clear: left;
  }

  .recipe__name {
    font-size: 13px;
    line-height: 1.4;
  }

  .recipe__img {
    margin-bottom: 10px;
  }
}

@media all and (max-width: 767px) {
  .recipe__body {
    width: 87.5%;
    top: 19.9%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .recipe__item {
    width: calc((100% - 9px) / 2);
    margin-right: 8px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
    border: #6a3906 2px solid;
  }

  .no-csscalc .recipe__item {
    width: 48%;
  }

  .recipe__item:nth-child(2n) {
    margin-right: 0;
  }

  .recipe__item:nth-child(2n + 1) {
    clear: left;
  }

  .recipe__name {
    font-size: 9px;
    line-height: 1.4;
  }

  .recipe__img {
    margin-bottom: 10px;
  }
}




/* ==========================================================================
   cm
   ======================================================================= */
.section-cm {
  background: #f5efd8;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .section-cm .section__wrapper {
    /*background: url(../img/top/cm_bg.png) 50% 0 no-repeat;*/
    background-size: cover;
  }

  .section-cm .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.82%;
  }
}

@media all and (max-width: 767px) {
  .section-cm .section__wrapper {
    /*background: url(../img/top/cm_bg_sp.png) 50% 0 no-repeat;*/
    background-size: 100%;
    width: 100%;
    padding: 0;
  }

  .section-cm .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 120%;
  }
}

.section-cm__btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  .section-cm__btn {
    width: 290px;
    top: 83.6%;
  }
}

@media all and (max-width: 767px) {
  .section-cm__btn {
    width: 87.5%;
    bottom: 30px;
  }
}


.cm__tv {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .cm__tv {
    background: url(../img/top/cm_tv.png) 0 0 no-repeat;
    background-size: cover;
    width: 43.12%;
    left: 50%;
    margin-left: -21.6%;
    top: 15.8%;
  }

  .cm__tv::before {
    content: "";
    display: block;
    padding-top: 69.82%;
  }
}

@media all and (max-width: 767px) {
  .cm__tv {
    background: url(../img/top/cm_tv_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 65.937%;
    left: 50%;
    margin-left: -32.968%;
    top: 8.5%;
  }

  .cm__tv::before {
    content: "";
    display: block;
    padding-top: 70.15%;
  }
}


.cm__copy1 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

.cm__copy1 {
  background: url(../img/top/cm_copy1.png) 0 0 no-repeat;
  background-size: contain;
  width: 28.55%;
  left: 50%;
  margin-left: 23.9%;
  top: 12%;
}

.cm__copy1::before {
  content: "";
  display: block;
  padding-top: 145.2%;
}

@media all and (max-width: 1080px) {
  .cm__copy1 {
    width: 25.55%;
    left: 50%;
    margin-left: 23.9%;
    top: 12%;
  }

  .cm__copy1::before {
    padding-top: 145.2%;
  }
}

@media all and (min-width: 768px) {
  /* .cm__copy1 {
    background: url(../img/top/cm_copy1.png) 0 0 no-repeat;
    background-size: contain;
    width: 28.55%;
    left: 50%;
    margin-left: 23.9%;
    top: 12%;
  }

  .cm__copy1::before {
    content: "";
    display: block;
    padding-top: 145.2%;
  } */
}

@media all and (max-width: 767px) {
  .cm__copy1 {
    background: url(../img/top/cm_copy1_sp.png) 0 0 no-repeat;
    background-size: contain;
    width: 21.87%;
    left: 50%;
    margin-left: 23%;
    top: 40.5%;
  }

  .cm__copy1::before {
    content: "";
    display: block;
    padding-top: 195.81%;
  }
}

.cm__copy2 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .cm__copy2 {
    display: none;
  }
}

@media all and (max-width: 767px) {
  .cm__copy2 {
    background: url(../img/top/cm_copy2_sp.png) 0 0 no-repeat;
    background-size: contain;
    width: 20.312%;
    left: 50%;
    margin-left: -45.562%;
    top: 40.75%;
  }

  .cm__copy2::before {
    content: "";
    display: block;
    padding-top: 263.1%;
  }
}


.cm__char {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .cm__char {
    background: url(../img/top/cm_char.png) 0 0 no-repeat;
    background-size: cover;
    width: 33.44%;
    left: 50%;
    margin-left: -51.7%;
    top: 38.4%;
  }

  .cm__char::before {
    content: "";
    display: block;
    padding-top: 105.3%;
  }
}

@media all and (max-width: 767px) {
  .cm__char {
    background: url(../img/top/cm_char_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 40.312%;
    ;
    left: 50%;
    margin-left: -18.437%;
    bottom: 40px;
  }

  .cm__char::before {
    content: "";
    display: block;
    padding-top: 104.7%;
  }
}


/* ==========================================================================
   last
   ======================================================================= */

.section-last {
  background: #f7e253;
}

@media all and (min-width: 768px) {
  .section-last .section__wrapper {}

  .section-last .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.82%;
  }
}

@media all and (max-width: 767px) {
  .section-last .section__wrapper {
    width: 100%;
    padding: 0;
  }

  .section-last .section__wrapper::before {
    content: "";
    display: block;
    padding-top: 153.75%;
  }
}


.foot__char__01 {
  display: inline-block;
  position: absolute;
}

@media all and (min-width: 768px) {
  .foot__char__01 {
    background: url(../img/top/foot_char_01.png) 0 0 no-repeat;
    background-size: cover;
    width: 40.11%;
    left: 50%;
    margin-left: -47.3%;
    top: 20.1%;
  }

  .foot__char__01::before {
    content: "";
    display: block;
    padding-top: 87.52%;
  }
}

@media all and (max-width: 767px) {
  .foot__char__01 {
    background: url(../img/top/foot_char_01_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 68.75%;
    left: 50%;
    margin-left: -34.68%;
    top: 6.3%;
  }

  .foot__char__01::before {
    content: "";
    display: block;
    padding-top: 87.28%;
  }
}

.foot__char__02 {
  display: inline-block;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

@media all and (min-width: 768px) {
  .foot__char__02 {
    background: url(../img/top/foot_char_02.png) 0 0 no-repeat;
    background-size: cover;
    width: 49.17%;
    left: 50%;
    margin-left: -5.2%;
    top: 5.9%;
  }

  .foot__char__02::before {
    content: "";
    display: block;
    padding-top: 99.78%;
  }
}

@media all and (max-width: 767px) {
  .foot__char__02 {
    background: url(../img/top/foot_char_02_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 71.875%;
    left: 50%;
    margin-left: -35.937%;
    top: 50.2%;
  }

  .foot__char__02::before {
    content: "";
    display: block;
    padding-top: 106.53%;
  }
}



.anime-container {
  width: 100%;
  height: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #f7e253;
  z-index: 1;
}

.main-container {
  z-index: 2;
  position: relative;
}

.anime01__text {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: bound 1.15s ease 0.25s infinite normal;
  animation: bound 1.15s ease 0.25s infinite normal;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

.anime01__img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: rotate2 1s linear 0s infinite normal;
  animation: rotate2 1s linear 0s infinite normal;
}

.anime01__chara {
  position: absolute;
  left: 50%;
  top: 50%;
}

.anime01__text,
.anime01__img,
.anime01__chara {
  opacity: 0;
}

.is-active-anime-01 .anime01__text,
.is-active-anime-01 .anime01__img,
.is-active-anime-01 .anime01__chara {
  opacity: 1;
}


@media all and (min-width: 768px) {
  .anime01__text {
    background: url(../img/top/anime01_txt.png) 0 0 no-repeat;
    width: 158px;
    height: 42px;
    margin: -21px 0 0 -260px;
  }

  .anime01__img {
    background: url(../img/top/anime01_illust.png) 0 0 no-repeat;
    width: 74px;
    height: 103px;
    margin: -52px 0 0 -37px;
  }

  .anime01__chara {
    background: url(../img/top/anime01_char.png) 0 0 no-repeat;
    width: 65px;
    height: 106px;
    margin: -53px 0 0 105px;
  }
}

@media all and (max-width: 767px) {
  .anime01__text {
    background: url(../img/top/anime01_txt_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 70px;
    height: 53px;
    margin: 25px 0 0 -134px;
  }

  .anime01__img {
    background: url(../img/top/anime01_illust_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 53px;
    height: 73px;
    margin: 22px 0 0 -30px;
  }

  .anime01__chara {
    background: url(../img/top/anime01_char_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 51px;
    height: 83px;
    margin: 30px 0 0 77px;
  }
}

.anime02__text {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: bound 1.15s ease 0.25s infinite normal;
  animation: bound 1.15s ease 0.25s infinite normal;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

.anime02__img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: rotate2 1s linear 0s infinite normal;
  animation: rotate2 1s linear 0s infinite normal;
}

.anime02__chara {
  position: absolute;
  left: 50%;
  top: 50%;
}

.anime02__text,
.anime02__img,
.anime02__chara {
  opacity: 0;
}

.is-active-anime-02 .anime02__text,
.is-active-anime-02 .anime02__img,
.is-active-anime-02 .anime02__chara {
  opacity: 1;
}

@media all and (min-width: 768px) {
  .anime02__text {
    background: url(../img/top/anime02_txt.png) 0 0 no-repeat;
    width: 146px;
    height: 18px;
    margin: -9px 0 0 100px;
  }

  .anime02__img {
    background: url(../img/top/anime02_illust.png) 0 0 no-repeat;
    width: 83px;
    height: 128px;
    margin: -64px 0 0 -42px;
  }

  .anime02__chara {
    background: url(../img/top/anime02_char.png) 0 0 no-repeat;
    width: 94px;
    height: 83px;
    margin: -42px 0 0 -194px;
  }
}

@media all and (max-width: 767px) {
  .anime02__text {
    background: url(../img/top/anime02_txt_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 71px;
    height: 33px;
    margin: -16px 0 0 64px;
  }

  .anime02__img {
    background: url(../img/top/anime02_illust_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 58px;
    height: 90px;
    margin: -40px 0 0 -24px;
  }

  .anime02__chara {
    background: url(../img/top/anime02_char_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 74px;
    height: 65px;
    margin: -20px 0 0 -134px;
  }
}


.anime03__text {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: bound 1.15s ease 0.25s infinite normal;
  animation: bound 1.15s ease 0.25s infinite normal;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

.anime03__img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: rotate2 1s linear 0s infinite normal;
  animation: rotate2 1s linear 0s infinite normal;
}

.anime03__chara {
  position: absolute;
  left: 50%;
  top: 50%;
}

.anime03__text,
.anime03__img,
.anime03__chara {
  opacity: 0;
}

.is-active-anime-03 .anime03__text,
.is-active-anime-03 .anime03__img,
.is-active-anime-03 .anime03__chara {
  opacity: 1;
}

@media all and (min-width: 768px) {
  .anime03__text {
    background: url(../img/top/anime03_txt.png) 0 0 no-repeat;
    width: 128px;
    height: 18px;
    margin: -9px 0 0 -220px;
  }

  .anime03__img {
    background: url(../img/top/anime03_illust.png) 0 0 no-repeat;
    width: 81px;
    height: 102px;
    margin: -51px 0 0 -41px;
  }

  .anime03__chara {
    background: url(../img/top/anime03_char.png) 0 0 no-repeat;
    width: 60px;
    height: 122px;
    margin: -61px 0 0 120px;
  }
}

@media all and (max-width: 767px) {
  .anime03__text {
    background: url(../img/top/anime03_txt_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 58px;
    height: 33px;
    margin: -16px 0 0 -134px;
  }

  .anime03__img {
    background: url(../img/top/anime03_illust_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 59px;
    height: 74px;
    margin: -37px 0 0 -30px;
  }

  .anime03__chara {
    background: url(../img/top/anime03_char_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 48px;
    height: 97px;
    margin: -48px 0 0 77px;
  }
}


.anime04__text {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: bound 1.15s ease 0.25s infinite normal;
  animation: bound 1.15s ease 0.25s infinite normal;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

.anime04__img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-animation: rotate2 1s linear 0s infinite normal;
  animation: rotate2 1s linear 0s infinite normal;
}

.anime04__chara {
  position: absolute;
  left: 50%;
  top: 50%;
}

.anime04__text,
.anime04__img,
.anime04__chara {
  opacity: 0;
}

.is-active-anime-04 .anime04__text,
.is-active-anime-04 .anime04__img,
.is-active-anime-04 .anime04__chara {
  opacity: 1;
}

@media all and (min-width: 768px) {
  .anime04__text {
    background: url(../img/top/anime04_txt.png) 0 0 no-repeat;
    width: 152px;
    height: 19px;
    margin: -9px 0 0 100px;
  }

  .anime04__img {
    background: url(../img/top/anime04_illust.png) 0 0 no-repeat;
    width: 99px;
    height: 61px;
    margin: -30px 0 0 -50px;
  }

  .anime04__chara {
    background: url(../img/top/anime04_char.png) 0 0 no-repeat;
    width: 77px;
    height: 104px;
    margin: -52px 0 0 -177px;
  }
}

@media all and (max-width: 767px) {
  .anime04__text {
    background: url(../img/top/anime04_txt_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 76px;
    height: 33px;
    margin: -16px 0 0 64px;
  }

  .anime04__img {
    background: url(../img/top/anime04_illust_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 73px;
    height: 45px;
    margin: -22px 0 0 -36px;
  }

  .anime04__chara {
    background: url(../img/top/anime04_char_sp.png) 0 0 no-repeat;
    background-size: cover;
    width: 58px;
    height: 77px;
    margin: -38px 0 0 -124px;
  }
}