.page-head_recipe {
  padding-bottom: 100px;
}
@media screen and (max-width: 640px) {
  .page-head_recipe {
    background-size: auto 220px;
    background-position: 50% 32px;
  }
}
@media print, screen and (min-width: 1200px) {
  .page-head_recipe .ttl {
    margin-top: 32px;
  }
}
.page-head_recipe .lead {
  font-size: 16px;
  /*
  margin-top: 136px;
  @include media(tablet){
      margin-top: 266px;
  }*/
}
.page-head_recipe .recipe-slider {
  margin: 0 -32px;
  position: relative;
}
.page-head_recipe .recipe-slider .slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.page-head_recipe .recipe-slider .slider li {
  width: 155px;
}
@media print, screen and (min-width: 1200px) {
  .page-head_recipe .recipe-slider .slider li {
    width: 300px;
  }
}
.page-head_recipe .recipe-slider .slider li + li {
  margin-left: 8px;
}
@media print, screen and (min-width: 1200px) {
  .page-head_recipe .recipe-slider .slider li + li {
    margin-left: 15px;
  }
}

.block-filter {
  padding-bottom: 15px;
}
.block-filter .block-ttl {
  font-size: calc(26px + (1vw - 6.4px) * 1.0714285714);
  text-align: center;
}
@media screen and (max-width: 640px) {
  .block-filter .block-ttl {
    font-size: 20px;
  }
}
@media print, screen and (min-width: 1200px) {
  .block-filter .block-ttl {
    font-size: 26px;
  }
}
.block-filter .block-ttl ~ .block-ttl {
  margin-top: 40px;
}
.block-filter .wrap-filters {
  margin-top: 24px;
  white-space: nowrap;
}
@media screen and (min-width: 641px) {
  .block-filter .wrap-filters {
    margin-right: auto;
    margin-left: auto;
    max-width: 65%;
    min-width: 500px;
    white-space: inherit;
  }
}
.block-filter .filter-item {
  background: #ffffff;
  border: 1px solid #DDDDDD;
  border-radius: 2em;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  margin-bottom: 1em;
  padding: 0.75em 1.75em;
  position: relative;
}
@media screen and (max-width: 640px) {
  .block-filter .filter-item {
    font-size: 12px;
  }
}
.block-filter .filter-item.active {
  background-color: #D42025;
  border-color: #D42025;
  color: #ffffff !important;
}
@media print, screen and (min-width: 1200px) {
  .block-filter .filter-item:hover {
    color: #D42025;
  }
}
.block-filter .filter-item input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* scroll hint */
.scroll-hint-icon {
  top: calc(50% - 34px);
  left: calc(50% - 55px);
  width: 78px;
  height: 68px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  padding: 22px 10px 10px 10px;
  -webkit-box-shadow: 0 0 10px rgba(100, 77, 0, 0.3);
          box-shadow: 0 0 10px rgba(100, 77, 0, 0.3);
}
.scroll-hint-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.785' height='30.52'%3E%3Cpath fill='%23d42025' d='M21.335 30.52H7.855A1.55 1.55 0 0 1 6.305 29a12.46 12.46 0 0 0-.63-4.42 25.16 25.16 0 0 0-4.25-5l-.06-.06a5 5 0 0 1-1.36-3.66 3.64 3.64 0 0 1 1.17-2.62 3.63 3.63 0 0 1 5.14.07V3.77a3.77 3.77 0 1 1 7.54 0v4.56a3.35 3.35 0 0 1 1.26 0 3 3 0 0 1 2 1.22 3.5 3.5 0 0 1 2-.06 3.21 3.21 0 0 1 2 1.54 3.74 3.74 0 0 1 3 .47 4.21 4.21 0 0 1 1.63 3.5v.46a19.26 19.26 0 0 1-.84 7c-.14.38-.36.81-.56 1.22l-.11.22c0 .07-.09.14-.14.21a7.13 7.13 0 0 0-1.17 2.17c-.06.56-.06 2.15-.05 2.71a1.55 1.55 0 0 1-1.54 1.53Zm-12.72-2.31h12a21.781 21.781 0 0 1 .07-2.23 8.74 8.74 0 0 1 1.59-3.25l.06-.12a10 10 0 0 0 .46-1 16.8 16.8 0 0 0 .7-6.12v-.54a2 2 0 0 0-.64-1.52 1.33 1.33 0 0 0-1.55.08 1.13 1.13 0 0 1-1.18.28 1.15 1.15 0 0 1-.78-.94 1.26 1.26 0 0 0-.75-1.11 1 1 0 0 0-1.11.28l-.1.1a1.153 1.153 0 0 1-1.97-.66c-.09-.68-.21-.77-.7-.87a.82.82 0 0 0-1 .48 1.16 1.16 0 0 1-2.16-.58V3.77a1.46 1.46 0 1 0-2.92 0v12.18a1.17 1.17 0 0 1-.83 1.11 1.15 1.15 0 0 1-1.2-.35l-1-.91c-.47-.42-.73-.66-.84-.77a1.35 1.35 0 0 0-2-.12l-.06.09a1.32 1.32 0 0 0-.39 1 2.57 2.57 0 0 0 .69 1.85 27.24 27.24 0 0 1 4.7 5.62 12.63 12.63 0 0 1 .91 4.74Zm14.59-4.86Zm-16.69-6.76Z'/%3E%3C/svg%3E");
  color: #D42025;
  width: 31px;
  height: 31px;
}
.scroll-hint-icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35.003' height='13.059'%3E%3Cpath fill='%23d42025' stroke='rgba(0,0,0,0)' stroke-miterlimit='10' d='M26.902 12.559a1.144 1.144 0 0 1-1.183-1.1 1.116 1.116 0 0 1 .431-.906l3.659-2.838h-6a1.189 1.189 0 0 1-1.307-1.056 1.174 1.174 0 0 1 1.077-1.267 1.226 1.226 0 0 1 .222 0h6.113l-3.737-2.789a1.144 1.144 0 0 1-.112-1.644 1.217 1.217 0 0 1 1.547-.214l6.426 4.786a1.153 1.153 0 0 1 .464.913 1.128 1.128 0 0 1-.441.924l-6.417 5.016a1.236 1.236 0 0 1-.636.176l-.106-.001Zm-19.54-.172L.945 7.371a1.134 1.134 0 0 1-.444-.924 1.153 1.153 0 0 1 .464-.913L7.392.744a1.216 1.216 0 0 1 1.546.214A1.141 1.141 0 0 1 8.822 2.6L5.085 5.389h6.114a1.215 1.215 0 0 1 .221 0 1.175 1.175 0 0 1 1.082 1.27 1.188 1.188 0 0 1-1.3 1.051h-6l3.656 2.838a1.119 1.119 0 0 1 .434.906 1.146 1.146 0 0 1-1.19 1.105h-.106a1.23 1.23 0 0 1-.634-.176Z'/%3E%3C/svg%3E");
}
.scroll-hint-text {
  display: none;
  color: #D42025;
  font-weight: bold;
  margin-top: 5px;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: 1;
}

@media print, screen and (min-width: 1200px) {
  .section-search .layouter {
    padding: 0;
  }
}

/* recipe data */
.block-data {
  margin-top: 48px;
}
.block-data .disable {
  display: none;
}
.block-data .list-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
@media screen and (min-width: 641px) {
  .block-data .item-recipe {
    max-width: 590px;
  }
}
.block-data .nodata {
  font-size: 20px;
  margin: 2em 0 4em;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .block-data .nodata {
    font-size: 16px;
  }
}

/* data toggle */
.btn-toggle {
  background: #ffffff;
  border: 1px solid #DDD;
  border-radius: 28px;
  color: #231815;
  font: inherit;
  font-size: 16px;
  margin-top: 3em;
  outline: none;
  padding: 0;
}
.btn-toggle span {
  display: inline-block;
  padding: 0.75em 2.75em 0.75em 3.75em;
  position: relative;
}
.btn-toggle span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.93' height='6.372'%3E%3Cpath fill='%23d42025' d='M0 .9A.9.9 0 0 1 1.54.265l3.925 3.93L9.389.265a.902.902 0 0 1 1.277 1.275L6.104 6.107a.9.9 0 0 1-1.277 0L.263 1.54A.9.9 0 0 1 0 .9Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
  width: 11px;
  height: 6px;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 34px;
}
.btn-toggle:hover span {
  color: #D42025;
}/*# sourceMappingURL=recipe.css.map */