@charset "UTF-8";


/* Side Navigation ----------------------------*/
.sidenav {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 5;
  transform: translate(100%, -50%);
  transition: transform 0.2s ease-out;
}
.sidenav.is-active {
  transform: translate(0, -50%);
}

.sidenav_list {
  margin-top: -5px;
  padding: 15px;
}

.sidenav_list > li {
  margin-top: 5px;
  text-align: right;
  font-size: 1.7rem;
  line-height: 1.4;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .sidenav {
    display: none;
  }
  
  .sidenav_list {
    padding: calc(100vw * (20 / 750));
    margin-top: calc(100vw * (-10 / 750));
  }

  .sidenav_list > li {
    margin-top: calc(100vw * (10 / 750));
    font-size: calc(100vw * (17 / 750) * 1.5);
  }
}


/* Key Visual ----------------------------*/
.kv {
  position: relative;
  z-index: 1;
  max-height: 1324px;
  height: calc(100vh - 125px);
  margin-left: 25px;
  margin-right: 25px;
}

.kv_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kv_loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: #004baf;
  transition: all 0.2s ease-out;
}
body.is-loaded .kv_loader {
  opacity: 0;
  visibility: hidden;
}

.kv_loader::before {
  background-image: url(../png/loader_wt-2.png);
}

.kv_img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  transition: transform 2s linear;
}

.kv_img img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: calc(100vh - 125px);
  transform: translate(-50%, -50%);
  object-fit: cover;
}
body.is-loaded .kv_img {
  transform: scale(1);
}

.kv_nav {
  position: absolute;
  right: 0;
  bottom: 50px;
  z-index: 2;
  padding: 15px 10px 20px 15px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
  transition: all 0.2s ease-out;
}
body.is-loaded .kv_nav {
  opacity: 1;
  visibility: visible;
}

.kv_navProducts {
  width: 191px;
  margin-top: -12px;
}

.kv_navProducts > li {
  margin-top: 12px;
}

.kv_navMenu {
  padding: 20px 5px 0 5px;
  margin-top: -5px;
}

.kv_navMenu > li {
  margin-top: 5px;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.2;
}

.kv_comments {
  position: absolute;
  right: 25px;
  bottom: 20px;
  z-index: 2;
  color: #fff;
  font-size: 1.0rem;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .kv {
    height: calc(100vw * (1100 / 750));
    margin-left: calc(100vw * (25 / 750));
    margin-right: calc(100vw * (25 / 750));
  }
  
  .kv_inner {
    z-index: -1;
  }
  
  .kv_img img {
    width: 100%;
    min-width: inherit;
    min-height: inherit;
  }

  .kv_nav {
    position: static;
    width: calc(100vw * (600 / 750));
    margin: calc(100vw * (-90 / 750)) auto 0 auto;
    padding: calc(100vw * (20 / 750)) calc(100vw * (20 / 750)) 0 calc(100vw * (20 / 750));
    border-top-left-radius: calc(100vw * (15 / 750));
    border-top-right-radius: calc(100vw * (15 / 750));
    border-bottom-left-radius: 0;
  }

  .kv_navProducts {
    display: flex;
    width: auto;
    margin-top: 0;
    margin-left: calc(100vw * (-20 / 750));
  }

  .kv_navProducts > li {
    width: 50%;
    margin-top: 0;
    padding-left: calc(100vw * (20 / 750));
  }
  
  .kv_navProducts > li > a {
    display: block;
    position: relative;
    padding-bottom: calc(100vw * (25 / 750));
  }
  
  .kv_navProducts > li > a::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(100vw * (20 / 750));
    height: calc(100vw * (20 / 750));
    transform: translateX(-50%) rotate(45deg);
    border-bottom: calc(100vw * (4 / 750)) solid #004baf;
    border-right: calc(100vw * (4 / 750)) solid #004baf;
    content: '';
  }

  .kv_navMenu {
    position: absolute;
    left: calc(100vw * (35 / 750));
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    margin-top: calc(100vw * (-10 / 750));
  }

  .kv_navMenu > li {
    margin-top: calc(100vw * (10 / 750));
    font-size: calc(100vw * (20 / 750) * 1.5);
  }
  
  .kv_navMenu > li > a {
    color: #fff;
  }

  .kv_comments {
    right: calc(100vw * (10 / 750));
    bottom: calc(100vw * (105 / 750));
    font-size: calc(100vw * (14 / 750));
  }
}


/* Products ----------------------------*/
.products {
  margin-top: 100px;
}

.products_ttl {
  margin-bottom: 55px;
}

.products_nav {
  width: 620px;
  margin: 0 auto 130px auto;
}

.products_navList {
  display: flex;
  justify-content: center;
  margin-left: -40px;
}

.products_navList > li {
  width: 50%;
  padding-left: 40px;
}

.products_navList > li > a {
  display: block;
  position: relative;
  padding-bottom: 25px;
}

.products_navList > li > a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #004baf;
  border-right: 2px solid #004baf;
  content: '';
}

.products_kv {
  position: relative;
  width: 900px;
  height: 650px;
}

.products_kvImg,
.products_kvImg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.products_kvImg {
  z-index: 1;
  width: calc(900px * 0.7);
  height: calc(650px * 0.7);
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease-out;
  will-change: width, height, opacity;
}

.products_kv.is-animated .products_kvImg,
.products_kvImg img {
  width: 900px;
  height: 650px;
  opacity: 1;
}

.products_kvImg img {
  max-width: 900px;
}

.products_kvComments {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 2;
  color: #fff;
  font-size: 1.0rem;
  text-align: right;
  line-height: 1.4;
}

.products_overviewTtl {
  margin-top: 130px;
  text-align: center;
}

.products_overview {
  margin-top: 35px;
  text-align: center;
}

.products_overview > dt {
  display: block;
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 1.4;
}

.products_overview > dd {
  margin-top: 30px;
  font-size: 1.7rem;
  line-height: 2;
}

.products_features {
  position: relative;
  z-index: 1;
}

.products_features::before {
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 1140px;
  content: '';
}

.products_features > dt {
  display: block;
  text-align: center;
}

.products_features > dt img {
  display: inline-block;
}

.products_featuresLabel {
  position: absolute;
  width: 276px;
  height: 274px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
}

.products_featuresLabelInner {
  width: 100%;
  height: 100%;
}

.products_featuresLabelInner::after {
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

.products_featuresTxt {
  font-size: 1.5rem;
  text-align: center;
  line-height: 2;
}

.products_featuresComments {
  position: absolute;
  font-size: 1.0rem;
  line-height: 1.4;
}

.products_pkg {
  position: relative;
  z-index: 1;
  height: 660px;
}

.products_pkgBg {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100%;
  transition: transform 0.5s ease-out;
}
.products_pkgBg.is-animated {
  transform: translateX(0) !important;
}

.products_pkgInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.products_pkgInner > dt {
  display: block;
}

.products_pkgInner > dd {
  position: absolute;
  font-size: 2.3rem;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .products_features::before {
    width: 1280px;
  }
  
  .products_pkgBg {
    width: 1280px;
  }
}
@media screen and (max-width: 767px) {
  .products {
    margin-top: calc(100vw * (185 / 750));
  }
  
  .products_ttl {
    margin-bottom: calc(100vw * (50 / 750));
  }
  
  .products_nav {
    display: none;
  }

  .products_kv {
    width: calc(100vw * (700 / 750));
    height: calc(100vw * (650 / 750));
  }

  .products_kvImg {
    z-index: 1;
    width: calc(100vw * (700 / 750) * 0.7);
    height: calc(100vw * (650 / 750) * 0.7);
  }

  .products_kv.is-animated .products_kvImg,
  .products_kvImg img {
    width: calc(100vw * (700 / 750));
    height: calc(100vw * (650 / 750));
  }

  .products_kvImg img {
    max-width: calc(100vw * (700 / 750));
  }

  .products_kvComments {
    right: calc(100vw * (20 / 750));
    bottom: calc(100vw * (20 / 750));
    font-size: calc(100vw * (10 / 750) * 1.4);
  }

  .products_overviewTtl {
    margin-top: calc(100vw * (95 / 750));
  }

  .products_overview {
    margin-top: calc(100vw * (80 / 750));
  }

  .products_overview > dt {
    font-size: calc(100vw * (30 / 750) * 1.3);
  }

  .products_overview > dd {
    margin-top: calc(100vw * (40 / 750));
    font-size: calc(100vw * (18 / 750) * 1.3);
    line-height: 2;
  }

  .products_features::before {
    height: calc(100vw * (1200 / 750));
  }
  
  .products_featuresLabel {
    width: calc(100vw * (276 / 750));
    height: calc(100vw * (274 / 750));
  }
  
  .products_featuresTxt {
    font-size: calc(100vw * (15 / 750) * 1.4);
  }
  
  .products_featuresComments {
    font-size: calc(100vw * (10 / 750) * 1.4);
  }

  .products_pkg {
    height: calc(100vw * (935 / 750));
    text-align: center;
  }
  
  .products_pkgInner > dt {
    display: inline-block;
  }

  .products_pkgInner > dd {
    font-size: calc(100vw * (23 / 750) * 1.2);
    font-weight: 500;
  }
}


/* -- .plain -- */
.plain .products_overviewTtl img {
  width: 382px;
}

.plain .products_overview > dt {
  color: #004baf;
}

.plain .products_features {
  margin-top: 40px;
}

.plain .products_features::before {
  top: 220px;
  transform: translateX(-50%) skewY(25deg);
  background-color: #fff2de;
}

.plain .products_features > dt img {
  width: 663px;
  margin-left: 300px;
}

.plain .products_featuresLabel {
  top: -20px;
  left: 50px;
  width: 281px;
  height: 333px;
  background-image: url(../png/plain_features_label_bg.png);
}

.plain .products_featuresLabelInner::after {
  display: none;
}

.plain .products_featuresComments {
  right: 40px;
  bottom: 0;
}

.plain .products_pkg {
  margin-top: 220px;
}

.plain .products_pkgBg {
  right: 0;
  transform: translateX(calc(-100vw + 160px));
  margin-right: -160px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  background-color: #004baf;
}

.plain .products_pkgInner > dt {
  width: 1046px;
  margin-top: -85px;
  margin-left: -80px;
}

.plain .products_pkgInner > dd {
  right: 210px;
  bottom: 115px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .plain .products_overviewTtl img {
    width: calc(100vw * (365 / 750));
  }

  .plain .products_features {
    margin-top: calc(100vw * (125 / 750));
  }

  .plain .products_features::before {
    top: calc(100vw * (260 / 750));
    transform: translateX(-50%) skewY(45deg);
  }

  .plain .products_features > dt img {
    width: calc(100vw * (676 / 750));
    margin-left: calc(100vw * (140 / 750));
  }

  .plain .products_featuresLabel {
    top: calc(100vw * (-100 / 750));
    left: calc(100vw * (30 / 750));
    width: calc(100vw * (281 / 750));
    height: calc(100vw * (333 / 750));
  }

  .plain .products_featuresLabelInner::after {
    right: calc(100vw * (-110 / 750));
    bottom: calc(100vw * (35 / 750));
    width: calc(100vw * (180 / 750));
    height: calc(100vw * (203 / 750));
  }
  
  .plain .products_featuresComments {
    right: calc(100vw * (20 / 750));
    bottom: 0;
  }

  .plain .products_pkg {
    margin-top: calc(100vw * (215 / 750));
  }

  .plain .products_pkgBg {
    right: 0;
    transform: translateX(-100vw);
    margin-right: 0;
    border-top-right-radius: calc(100vw * (80 / 750));
    border-bottom-right-radius: calc(100vw * (80 / 750));
  }

  .plain .products_pkgInner > dt {
    width: calc(100vw * (589 / 750));
    margin-top: calc(100vw * (-150 / 750));
    margin-left: 0;
  }

  .plain .products_pkgInner > dd {
    right: auto;
    left: calc(100vw * (98 / 750));
    bottom: calc(100vw * (65 / 750));
  }
}

/* -- .basil -- */
.basil {
  margin-top: 180px;
}

.basil .products_overviewTtl img {
  width: 299px;
}

.basil .products_overview > dt {
  color: #316b45;
}

.basil .products_features {
  margin-top: 140px;
}

.basil .products_features::before {
  top: 240px;
  transform: translateX(-50%) skewY(-25deg);
  background-color: #d4dfc8;
}

.basil .products_features > dt img {
  width: 751px;
  margin-left: -300px;
}

.basil .products_featuresLabel {
  bottom: 0;
  right: -40px;
  background-image: url(../png/basil_features_label_bg.png);
}

.basil .products_featuresLabelInner::after {
  top: -45px;
  right: -10px;
  width: 158px;
  height: 133px;
  background-image: url(../png/basil_features_label_img.png);
}

.basil .products_featuresTxt {
  margin-top: 80px;
}

.basil .products_featuresComments {
  left: 40px;
  bottom: 0;
}

.basil .products_pkg {
  margin-top: 165px;
}

.basil .products_pkgBg {
  left: 0;
  transform: translateX(calc(100vw + 160px));
  margin-left: -160px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  background-color: #ffe6be;
}

.basil .products_pkgInner > dt {
  width: 1198px;
  margin-top: -55px;
  margin-left: -60px;
}

.basil .products_pkgInner > dd {
  right: 200px;
  bottom: 115px;
  color: #316b45;
}

@media screen and (max-width: 767px) {
  .basil {
    margin-top: calc(100vw * (85 / 750));
  }

  .basil .products_overviewTtl img {
    width: calc(100vw * (299 / 750));;
  }

  .basil .products_features {
    margin-top: calc(100vw * (80 / 750));
  }

  .basil .products_features::before {
    top: calc(100vw * (550 / 750));
    transform: translateX(-50%) skewY(-45deg);
  }

  .basil .products_features > dt img {
    width: calc(100vw * (812 / 750));
    margin-left: calc(100vw * (-140 / 750));
  }

  .basil .products_featuresLabel {
    bottom: calc(100vw * (-140 / 750));
    right: calc(100vw * (15 / 750));
  }

  .basil .products_featuresLabelInner::after {
    top: calc(100vw * (-45 / 750));
    right: calc(100vw * (-10 / 750));
    width: calc(100vw * (158 / 750));
    height: calc(100vw * (133 / 750));
  }

  .basil .products_featuresTxt {
    padding-left: calc(100vw * (50 / 750));
    margin-top: calc(100vw * (40 / 750));
    text-align: left;
  }
  
  .basil .products_featuresComments {
    left: calc(100vw * (50 / 750));
    bottom: calc(100vw * (-60 / 750));
  }

  .basil .products_pkg {
    margin-top: calc(100vw * (350 / 750));
  }

  .basil .products_pkgBg {
    transform: translateX(100vw);
    margin-left: 0;
    border-top-left-radius: calc(100vw * (80 / 750));
    border-bottom-left-radius: calc(100vw * (80 / 750));
  }

  .basil .products_pkgInner > dt {
    width: calc(100vw * (655 / 750));
    margin-top: calc(100vw * (-170 / 750));
    margin-left: calc(100vw * (60 / 750));
  }

  .basil .products_pkgInner > dd {
    right: auto;
    left: calc(100vw * (105 / 750));
    bottom: calc(100vw * (90 / 750));
  }
}

/* -- .arrangement -- */
.arrangement {
  margin-top: 220px;
}

.arrangement_ttl {
  margin-bottom: 90px;
}

.arrangement_overview {
  text-align: center;
}

.arrangement_overview > dt {
  display: block;
  position: relative;
}

.arrangement_overviewComments {
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}

.arrangement_overview > dd {
  margin-top: 165px;
  font-size: 1.7rem;
  line-height: 2;
}

.arrangement_img {
  position: relative;
  z-index: 2;
  margin-top: 120px;
}

.arrangement_img > dt {
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
}

.arrangement_img > dt img {
  width: 592px;
}

.arrangement_imgList {
  position: relative;
  z-index: 1;
}

.arrangement_imgList > li {
  position: absolute;
  overflow: hidden;
}
.arrangement_imgList > li:nth-of-type(1) {
  top: -405px;
  right: -300px;
  z-index: 3;
  width: 570px;
  height: 390px;
}
.arrangement_imgList > li:nth-of-type(2) {
  top: -175px;
  left: -345px;
  z-index: 2;
  width: 620px;
  height: 790px;
}
.arrangement_imgList > li:nth-of-type(3) {
  top: 145px;
  right: -155px;
  z-index: 1;
  width: 605px;
  height: 360px;
}

.arrangement_recipe {
  position: relative;
  z-index: 1;
  margin-top: 350px;
  padding-top: 435px;
  padding-bottom: 195px;
  background-color: #004baf;
}

.arrangement_recipe::before {
  position: absolute;
  top: 610px;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 1388px;
  height: 870px;
  margin-left: 70px;
  background-image: url(../svg/arrangement_recipe_bg.svg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.arrangement_recipeTtl {
  margin-bottom: 55px;
  text-align: center;
}

.arrangement_recipeTtl img {
  width: 548px;
}

.arrangement_recipeInner {
  padding: 30px 30px 55px 30px;
  background-color: #fff;
}

.arrangement_recipeHead,
.arrangement_recipeHead > a {
  display: block;
}

.arrangement_recipeSliderInner {
  position: relative;
}

.arrangement_recipeSliderComments {
  position: absolute;
  right: 15px;
  bottom: 15px;
  color: #fff;
  font-size: 1.0rem;
  text-align: right;
  line-height: 1.4;
}

.arrangement_recipeBody {
  margin-top: 55px;
  text-align: center;
}

.arrangement_recipeComments {
  position: absolute;
  right: 0;
  bottom: -30px;
  color: #fff;
  font-size: 1.0rem;
  text-align: right;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .arrangement {
    margin-top: calc(100vw * (160 / 750));
  }

  .arrangement_ttl {
    margin-bottom: calc(100vw * (40 / 750));
  }
  
  .arrangement_overviewComments {
    bottom: calc(100vw * (15 / 750));
    right: calc(100vw * (10 / 750));
    font-size: calc(100vw * (10 / 750) * 1.4);
  }

  .arrangement_overview > dd {
    margin-top: calc(100vw * (80 / 750));
    font-size: calc(100vw * (15 / 750) * 1.5);
  }

  .arrangement_img {
    margin-top: calc(100vw * (40 / 750));
  }

  .arrangement_img > dt img {
    width: calc(100vw * (592 / 750));
  }

  .arrangement_imgList > li:nth-of-type(1) {
    top: calc(100vw * (-85 / 750));
    right: calc(100vw * (-40 / 750));
    width: calc(100vw * (468 / 750));
    height: calc(100vw * (322 / 750));
  }
  .arrangement_imgList > li:nth-of-type(2) {
    top: calc(100vw * (45 / 750));
    left: calc(100vw * (-40 / 750));
    width: calc(100vw * (380 / 750));
    height: calc(100vw * (550 / 750));
  }
  .arrangement_imgList > li:nth-of-type(3) {
    top: calc(100vw * (335 / 750));
    right: calc(100vw * (75 / 750));
    width: calc(100vw * (288 / 750));
    height: calc(100vw * (166 / 750));
  }

  .arrangement_recipe {
    margin-top: calc(100vw * (440 / 750));
    padding-top: calc(100vw * (240 / 750));
    padding-bottom: calc(100vw * (215 / 750));
  }

  .arrangement_recipe::before {
    top: calc(100vw * (475 / 750));
    width: calc(100vw * (704 / 750));
    height: calc(100vw * (760 / 750));
    margin-left: calc(100vw * (20 / 750));
    background-image: url(../svg/arrangement_recipe_bg_sp.svg);
  }
  
  .arrangement_recipeTtl {
    margin-bottom: calc(100vw * (50 / 750));
  }

  .arrangement_recipeTtl img {
    width: calc(100vw * (488 / 750));
  }

  .arrangement_recipeInner {
    padding: calc(100vw * (25 / 750)) calc(100vw * (25 / 750)) calc(100vw * (40 / 750)) calc(100vw * (25 / 750));
  }
  
  .arrangement_recipeSliderComments {
    position: absolute;
    right: calc(100vw * (15 / 750));
    bottom: calc(100vw * (15 / 750));
    font-size: calc(100vw * (10 / 750) * 1.4);
  }

  .arrangement_recipeBody {
    margin-top: calc(100vw * (35 / 750));
  }
  
  .arrangement_recipeComments {
    bottom: calc(100vw * (-185 / 750));
    font-size: calc(100vw * (10 / 750) * 1.4);
  }
}



/* Recipe ----------------------------*/
.recipe {
  margin-top: 210px;
}

.recipe_ttl {
  margin-bottom: 50px;
}

.recipe_lead {
  position: relative;
  z-index: 1;
  padding-top: 260px;
}

.recipe_lead::before {
  position: absolute;
  top: 880px;
  left: 50%;
  transform: translateX(-50%) skewY(-25deg);
  width: 100vw;
  height: 1140px;
  background-color: #fff2de;
  content: '';
}

.recipe_leadBar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.recipe_leadBar > span {
  display: block;
  width: 2px;
  height: 302px;
  background-color: #004baf;
}

.recipe_leadImg {
  width: 967px;
  margin-left: -20px;
  text-align: center;
}

.recipe_leadComments {
  position: absolute;
  right: 0;
  bottom: 40px;
  font-size: 1.0rem;
  line-height: 1.4;
}

.recipe_inner {
  position: relative;
  z-index: 2;
  padding-bottom: 300px;
  overflow: hidden;
  background-color: #ffcd46;
}

.recipe_inner::after {
  position: absolute;
  left: 50%;
  bottom: -60px;
  z-index: -1;
  transform: translateX(-50%);
  width: 2480px;
  height: 1624px;
  background-image: url(../jpg/bg_recipe.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.recipe_search {
  margin-top: 275px;
}

.recipe_search .c-recipe_inner {
  padding-top: 80px;
  padding-bottom: 135px;
}

.recipe_searchTtl {
  margin-bottom: 60px;
  text-align: center;
}

.recipe_searchTtl img {
  width: 224px;
}

.recipe_searchBanner {
  margin-bottom: 80px;
  text-align: center;
}

.recipe_searchBanner > dt {
  display: block;
  margin-bottom: 45px;
}

.recipe_searchBanner > dt img {
  width: 393px;
}

.recipe_searchBannerImg {
  display: inline-block;
  margin-bottom: 60px;
  position: relative;
}

.recipe_searchBannerImg img {
  width: 650px;
}

.recipe_searchBannerImgComments {
  position: absolute;
  right: 15px;
  bottom: 15px;
  color: #fff;
  font-size: 1.0rem;
  line-height: 1.4;
}

.recipe_searchProduct {
  margin-top: 100px;
  text-align: center;
}

.recipe_searchProduct img {
  width: 380px;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .recipe_lead::before {
    width: 1280px;
  }
}
@media screen and (max-width: 767px) {
  .recipe {
    margin-top: calc(100vw * (150 / 750));
  }
  
  .recipe_ttl {
    margin-bottom: calc(100vw * (40 / 750));
  }
  
  .recipe_lead {
    padding-top: calc(100vw * (180 / 750));
  }
  
  .recipe_lead::before {
    top: calc(100vw * (780 / 750));
    transform: translateX(-50%) skewY(-45deg);
    height: calc(100vw * (1200 / 750));
  }

  .recipe_leadBar > span {
    width: calc(100vw * (3 / 750));
    height: calc(100vw * (211 / 750));
  }

  .recipe_leadImg {
    width: calc(100vw * (693 / 750));
    margin-left: 0;
  }
  
  .recipe_leadComments {
    bottom: calc(100vw * (30 / 750));
    font-size: calc(100vw * (10 / 750) * 1.4);
  }

  .recipe_inner {
    padding-bottom: calc(100vw * (260 / 750));
  }
  
  .recipe_inner::after {
    bottom: calc(100vw * (-180 / 750));
    width: calc(100vw * (2480 / 750) * 0.7);
    height: calc(100vw * (1624 / 750) * 0.7);
  }

  .recipe_search {
    margin-top: calc(100vw * (30 / 750));
  }
  
  .recipe_search .c-recipe_inner {
    padding-top: calc(100vw * (60 / 750));
    padding-bottom: calc(100vw * (90 / 750));
  }

  .recipe_searchTtl {
    margin-bottom: calc(100vw * (55 / 750));
  }

  .recipe_searchTtl img {
    width: calc(100vw * (224 / 750));
  }

  .recipe_searchBanner {
    margin-bottom: calc(100vw * (85 / 750));
  }

  .recipe_searchBanner > dt {
    margin-bottom: calc(100vw * (45 / 750));
  }
  
  .recipe_searchBanner > dt img {
    width: calc(100vw * (394 / 750));
  }
  
  .recipe_searchBannerImg {
    margin-bottom: calc(100vw * (45 / 750));
  }
  
  .recipe_searchBannerImg img {
    width: calc(100vw * (580 / 750));
  }
  
  .recipe_searchBannerImgComments {
    right: calc(100vw * (15 / 750));
    bottom: calc(100vw * (15 / 750));
    font-size: calc(100vw * (10 / 750) * 1.4);
  }
  
  .recipe_searchProduct {
    margin-top: calc(100vw * (70 / 750));
  }

  .recipe_searchProduct img {
    width: calc(100vw * (380 / 750));
  }
}