@charset "UTF-8";
/* recipe一覧ページ */
.recipe-archive {
  margin: 4px 0 0;
}

@media screen and (max-width: 768px) {
  .recipe {
    margin: 4px 0 0;
  }
}

.recipe-search.recipe-header {
  margin: 0 auto;
  padding: 0 32px;
}

.recipe-search.recipe-header .recipe-search-wrap {
  padding: 53px 53px 58px;
}

.recipe-search.recipe-header .recipe-search-main {
  margin: 14px 0 0;
}

.recipe-search .recipe-search-tags {
  margin: 38px auto 0;
  justify-content: center;
}

.recipe-search .recipe-search-tags li a {
  background-color: #e4e3e0;
  border: none;
}

/* hover */
.recipe-search .recipe-search-tags li a:hover {
  background-color: var(--main-color-orange);
}

@media screen and (max-width: 768px) {
  .recipe-search.recipe-header {
    padding: 0 8px;
  }

  .recipe-search.recipe-header .recipe-search-wrap {
    padding: 24px 24px 40px;
  }

  .recipe-search.recipe-header .recipe-search-main {
    margin: 14px 0 0;
  }

  .recipe-search .recipe-search-tags {
    margin: 34px auto 0;
  }
}

.recipe-lists {
  margin: 65px 0 0;
  padding: 0 64px;
}

.recipe-lists .recipe-lists-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.recipe-lists .recipe-lists-header .recipe-search-result > p {
  margin: 0;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.recipe-lists .recipe-lists-header .recipe-search-result ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  margin: 20px 0 0;
}

.recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a {
  display: block;
  position: relative;
  padding: 7px 39px 7px 16px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--main-color-black);
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a::before {
  position: absolute;
  display: block;
  right: 10px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f4f4f4;
  content: "";
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a::after {
  position: absolute;
  width: 9px;
  height: 9px;
  top: 50%;
  right: 16px;
  background: url('../images/icon_cross.svg') bottom right / contain no-repeat;
  transform: translateY(-50%);
  content: "";
  transition: all 0.3s ease;
}

.recipe-lists .recipe-lists-header .recipe-lists-sort {
  position: relative;
  width: 164px;
}

.recipe-lists .recipe-lists-header .recipe-lists-sort::before {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 24px;
  height: 24px;
  background: url('../images/recipe/arrow-select.png') center center / cover no-repeat;
  transform: translateY(-50%);
  content: "";
}

.recipe-lists .recipe-lists-header .recipe-lists-sort select {
  width: 100%;
  padding: 12.25px 10px;
  border: 1px solid var(--border-color);
  color: var(--main-color-black);
  font-size: 0.875em;
  font-weight: 500;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.recipe-lists > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 72px 36px;
  margin: 30px 0 0;
}

.recipe-lists > ul > li {
  width: calc(33.3333% - 24px);
}

.recipe-lists > ul > li a:has(figure) {
  position: relative;
  display: block;
}

.recipe-lists > ul > li .recipe-item-info {
  margin: 13px 0 0;
}

.recipe-lists > ul > li a:has(p) {
  display: block;
  text-decoration: none;
}

.recipe-lists > ul > li a .recipe-item-title {
  margin: 0;
  color: var(--main-color-black);
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  transition: color 0.3s ease;
}

.recipe-lists > ul > li figure {
  width: 100%;
  height: auto;
  aspect-ratio: 412 / 309;
  overflow: hidden;
  border-radius: 16px;
}

.recipe-lists > ul > li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.recipe-lists .recipe-item-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px auto 0;
}

.recipe-lists .recipe-item-tags li a {
  display: block;
  padding: 3px 9px;
  border: 1px solid var(--recipe-color);
  border-radius: 50px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--recipe-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.recipe-lists div:has(.common-btn) {
  display: flex;
  justify-content: center;
  margin: 64px auto 0;
}

.recipe-lists .common-btn {
  width: 250px;
}

/* hover */
.recipe-lists .recipe-item-tags li a:hover {
  border: 1px solid var(--main-color-orange);
  background-color: var(--main-color-orange);
  color: #fff;
}

.recipe-lists > ul > li > a:hover figure img {
  transform: scale(1.05);
}

.recipe-lists > ul > li a:hover .recipe-item-title {
  color: var(--main-color-orange);
}

.recipe .recipe-btn {
  margin: 70px auto 0;
  max-width: 260px;
}

.recipe .recipe-btn .more-btn {
  display: block;
  position: relative;
  width: 100%;
  border-radius: 32px;
  padding: 20.75px 31px 20.75px 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: var(--main-color-black);
  transition: all 0.3s ease;
}

.recipe .recipe-btn .more-btn::after {
  position: absolute;
  display: inline-block;
  top: 50%;
  right: 27px;
  width: 24px;
  height: 24px;
  background: url('../images/icon_plus.png') center center / cover no-repeat;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  content: "";
}

/* hover */
.recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a:hover::before {
  background-color: var(--main-color-orange);
}

.recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a:hover::after {
  background: url('../images/icon_cross_white.svg') bottom right / contain no-repeat;
}

.recipe .recipe-btn .more-btn:hover {
  background-color: var(--main-color-orange);
}

.recipe .recipe-btn .more-btn:hover::after {
  transform: translateY(-50%) rotate(180deg);
}

@media screen and (max-width: 768px) {
  .recipe-lists {
    margin: 36px 0 0;
    padding: 0 16px;
  }

  .recipe-lists .recipe-lists-header {
    flex-direction: column;
    align-items: unset;
    row-gap: 28px;
  }

  .recipe-lists .recipe-lists-header .recipe-search-result > p {
    font-size: 1em;
  }

  .recipe-lists .recipe-lists-header .recipe-search-result ul {
    margin: 16px 0 0;
    gap: 8px;
  }

  .recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a {
    padding: 7px 34px 7px 16px;
    border-radius: 32px;
    font-size: 0.8125em;
  }

  .recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a::before {
    right: 10px;
  }

  .recipe-lists .recipe-lists-header .recipe-search-result ul .sort-category a::after {
    right: 16px;
  }

  .recipe-lists .recipe-lists-header .recipe-lists-sort {
    width: 120px;
    margin: 0 0 0 auto;
  }

  .recipe-lists .recipe-lists-header .recipe-lists-sort::before {
    right: 9px;
  }

  .recipe-lists .recipe-lists-header .recipe-lists-sort select {
    padding: 10.25px 10px;
  }

  .recipe-lists > ul {
    flex-direction: column;
    gap: 18px 36px;
    margin: 20px 0 0;
  }

  .recipe-lists > ul > li {
    display: flex;
    column-gap: 13px;
    width: 100%;
  }

  .recipe-lists > ul > li a:has(figure) {
    width: 48%;
    padding: 0 0 26px;
  }

  .recipe-lists > ul > li a:has(p) {
    margin: 0;
  }

  .recipe-lists > ul > li .recipe-timer {
    height: 26px;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    padding: 6px 0px 6px 17px;
    border-radius: 0 0 16px 16px;
    background-color: #f2f1ef;
    text-align: center;
  }

  .recipe-lists > ul > li .recipe-item-info {
    flex: 1;
    margin: 1px 0 0;
  }

  .recipe-lists > ul > li a .recipe-item-title {
    font-size: 1em;
  }

  .recipe-lists > ul > li figure {
    aspect-ratio: 165 / 124;
    border-radius: 16px 16px 0 0;
  }

  .recipe-lists .recipe-item-tags {
    gap: 6px;
    margin: 11px auto 0;
  }

  .recipe-lists .recipe-item-tags li a {
    padding: 2px 8px;
    font-size: 0.625em;
  }

  .recipe .recipe-btn {
    margin: 45px auto 0;
    max-width: 237px;
  }

  .recipe .recipe-btn .more-btn {
    padding: 18px 27px 18px 0;
    font-size: 1em;
  }
}

.loop-text {
  position: relative;
  background-color: var(--main-color-red);
  margin: 88px 0 0;
  padding: 88px 0;
}

.loop-text::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/top/recipe-item-bg.png') center center / cover no-repeat;
  mix-blend-mode: color-burn;
  content: "";
}

.loop-text .loop-block p:first-child:before {
  background: url('../images/recipe/icon_soysauce.png') center center / cover no-repeat;
}

.loop-text .loop-block p:nth-child(2):before {
  background: url('../images/recipe/icon_sauce.png') center center / cover no-repeat;
}

.loop-text .loop-block p:nth-child(3):before {
  background: url('../images/recipe/icon_makoto.png') center center / cover no-repeat;
}

@media screen and (max-width: 768px) {
  .loop-text {
    padding: 60px 0;
  }

  .loop-text .loop-block p {
    margin: 9px 0 0;
  }

  .loop-text .loop-block p img {
    height: 27px;
  }
}

/* recipe詳細ページ */
.recipe {
  margin: 4px 0 0;
}

@media screen and (max-width: 768px) {
  .recipe {
    margin: 0;
  }
}
.recipe-wrap {
  width: 100%;
  margin: 73px 0 0;
  padding: 0 64px;
}

@media screen and (max-width: 768px) {
  .recipe-wrap {
    margin: 23px 0 0;
    padding: 0;
  }

  .recipe-title {
    padding: 0 16px;
  }
}

.recipe-anchor ul {
  display: flex;
  column-gap: 24px;
  margin: 55px auto 0;
}

.recipe-anchor ul li a {
  display: block;
  position: relative;
  padding-right: 24px;
  font-weight: 500;
  color: var(--main-color-black);
  text-decoration: none;
}

.recipe-anchor ul li a::after {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 0;
  top: 50%;
  background: url('../images/arrow_bent_thin_orange.svg') center center / cover no-repeat;
  transform: translateY(-50%) rotate(-90deg);
  transition: all 0.3s ease;
  content: "";
}

/* hover */
.recipe-anchor ul li a:hover::after {
  transform: translateY(calc(-50% + 4px)) rotate(-90deg);
}

@media screen and (max-width: 768px) {
  .recipe-anchor ul {
    flex-wrap: wrap;
    column-gap: 0;
    margin: 28px auto 0;
  }

  .recipe-anchor ul li {
    width: 50%;
  }

  .recipe-anchor ul li:nth-child(1),
  .recipe-anchor ul li:nth-child(2) {
    border-top: 1px solid var(--border-color);
  }

  .recipe-anchor ul:has(> :nth-child(3)) li:nth-child(1) {
    border-bottom: 1px solid var(--border-color);
  }

  .recipe-anchor ul:has(> :nth-child(3)) li:nth-child(2) {
    border-bottom: 1px solid var(--border-color);
  }

  .recipe-anchor ul li:nth-child(2n + 1) {
    border-right: 1px solid var(--border-color);
  }

  .recipe-anchor ul li a {
    padding: 11px 12px;
    font-size: 0.875em;
  }
}

.recipe-main {
  display: flex;
  margin: 30px auto 0;
  border-radius: 32px;
  overflow: hidden;
}

.recipe-main > figure,
.recipe-main > .recipe-detail {
  width: 50%;
}

.recipe-main > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.recipe-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px;
  background-color: #f2f1ef;
}

.recipe-detail .recipe-data {
  display: flex;
  column-gap: 6px;
}

.recipe-detail .recipe-visual-time {
  width: 25%;
  border-radius: 16px;
  overflow: hidden;
}

.recipe-detail .recipe-visual-time,
.recipe-detail .recipe-visual-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.recipe-detail .recipe-visual-time figure,
.recipe-detail .recipe-visual-item figure {
  width: 28px;
  height: 28px;
}

.recipe-detail .recipe-visual-time figure img,
.recipe-detail .recipe-visual-item figure img {
  width: 100%;
}

.recipe-detail .recipe-visual-title {
  margin: 8px 0 0;
  font-size: 0.625em;
}

.recipe-detail .recipe-visual-title + p {
  margin: 0;
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
}

.recipe-detail .recipe-visual-lists {
  display: flex;
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
}

.recipe-detail .recipe-visual-lists li:first-child {
  border-radius: 16px 0 0 16px;
}

.recipe-detail .recipe-visual-lists li:last-child {
  border-radius: 0 16px 16px 0;
}

.recipe-detail .recipe-visual-item {
  width: calc(100% / 3);
}

.recipe-detail .recipe-visual-item + .recipe-visual-item {
  border-left: 1px solid var(--border-color);
}

.recipe-data + p {
  margin: 20px 0 0;
  font-size: 0.875em;
}

.recipe-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin: 20px auto 0;
}

.recipe-tags li a {
  display: block;
  padding: 7px 15px;
  border: 1px solid var(--recipe-color);
  border-radius: 50px;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--recipe-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.recipe-share {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.recipe-share > p {
  margin: 0;
  font-weight: 500;
}

.recipe-share .recipe-share-btns {
  display: flex;
  column-gap: 15px;
}

.recipe-share .recipe-share-btns li a {
  display: block;
  width: 32px;
  height: 32px;
  transition: all 0.3s ease;
}

.recipe-share .recipe-share-btns li a img {
  width: 100%;
}

/* hover */
.recipe-tags li a:hover {
  border: 1px solid var(--main-color-orange);
  background-color: var(--main-color-orange);
  color: #fff;
}

.recipe-share .recipe-share-btns li a:hover {
  transform: scale(1.2);
}

@media screen and (max-width: 768px) {
  .recipe-main {
    flex-direction: column;
    margin: 0;
    border-radius: 0;
  }

  .recipe-main > figure,
  .recipe-main > .recipe-detail {
    width: 100%;
  }

  .recipe-main > figure {
    height: 100%;
    aspect-ratio: 375 / 281;
  }

  .recipe-main > figure img {
    height: auto;
  }

  .recipe-detail {
    padding: 16px 12px 28px;
  }

  .recipe-detail .recipe-data {
    column-gap: 5px;
  }

  .recipe-detail .recipe-visual-time {
    border-radius: 12px;
  }

  .recipe-detail .recipe-visual-time,
  .recipe-detail .recipe-visual-item {
    padding: 14px 16px;
  }

  .recipe-detail .recipe-visual-time figure,
  .recipe-detail .recipe-visual-item figure {
    width: 24px;
    height: 24px;
  }

  .recipe-detail .recipe-visual-title {
    margin: 5px 0 0;
    font-size: 0.5em;
  }

  .recipe-detail .recipe-visual-title + p {
    margin: -2px 0 0;
    font-size: 0.875em;
  }

  .recipe-data + p {
    margin: 14px 0 0;
    font-size: 0.8125em;
  }

  .recipe-tags {
    gap: 8px 6px;
    margin: 15px auto 0;
  }

  .recipe-tags li a {
    padding: 6.75px 15px;
    font-size: 0.8125em;
  }

  .recipe-share {
    margin: 35px 4px 0;
  }

  .recipe-share > p {
    font-size: 0.875em;
  }
}

.recipe-block {
  display: flex;
  column-gap: 96px;
  margin: 96px auto 0;
  padding: 0 54px;
}

.recipe-block > div {
  width: calc(50% - 48px);
}

.recipe-info-title {
  position: relative;
  margin: 0;
  padding: 25px 0 0;
  font-size: 1.75em;
  font-weight: 600;
}

.recipe-info-title::before {
  position: absolute;
  top: -3px;
  width: 20px;
  height: 2px;
  background: #e85903;
  content: "";
}

.recipe-info-title::after {
  position: absolute;
  right: 0;
  top: -3px;
  width: calc(100% - 20px);
  height: 2px;
  background: #e4e3e0;
  content: "";
}

.recipe-info-main ul {
  margin: 28px 0 0;
}

.recipe-info-main ul li {
  padding: 13.5px 0;
  border-bottom: 1px solid var(--main-color-gray);
  font-size: 0.875em;
}

.recipe-info-main ol {
  margin: 14px 0 0;
  padding-left: 17px;
  list-style: decimal;
}

.recipe-info-main ol li {
  position: relative;
  padding: 21px 0 21px 29px;
}

.recipe-info-main ol li::after {
  position: absolute;
  width: calc(100% + 22px);
  height: 1px;
  bottom: 0;
  left: -22px;
  background: var(--main-color-gray);
  content: "";
}

.recipe-info-main ol li::marker {
  color: #9a9997;
  font-size: 1.25em;
  font-weight: 500;
}

.recipe-ingredients .recipe-info-main > p:has(b),
.recipe-ingredients .recipe-info-main > p:has(strong) {
  margin: 37px 0 0;
  padding: 0;
  border-bottom: none;
  font-size: 0.875em;
  font-weight: 500;
  color: var(--main-color-orange);
}

.recipe-ingredients .recipe-info-main p:first-child {
  margin: 28px 0 0;
}

.recipe-ingredients .recipe-info-main p {
  margin: 0;
  padding: 13.5px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875em;
}

.recipe-method .recipe-info-main > p {
  /* margin: 20px auto 0; */
  margin: 0;
  padding: 21px 0;
  border-bottom: 1px solid var(--border-color);
}

.recipe-info-main > p + ul {
  margin: 3px 0 0;
}

.recipe-keytips {
  margin: 48px 0 0;
  padding: 24px 28px;
  border: 2px solid var(--main-color-orange);
  border-radius: 16px;
}

.recipe-keytips p.recipe-keytips-title {
  position: relative;
  font-size: 1.125em;
  font-weight: 500;
  margin: 0;
  padding: 0 0 0 36px;
  border-bottom: none;
}

.recipe-keytips .recipe-keytips-title::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: url('../images/icon_keytips.png') center center / cover no-repeat;
  content: "";
}

.recipe-keytips p.recipe-keytips-title + p {
  margin: 16px auto 0;
  padding: 0;
  font-size: 0.875em;
  line-height: 1.5;
  border-bottom: 0;
}

.recipe-keytips p + p {
  margin: 10px auto 0;
  padding: 0;
  font-size: 0.875em;
  line-height: 1.5;
  border-bottom: 0;
}

.recipe-keytips ul {
  position: relative;
  display: flex;
  flex-direction: column;
}

.recipe-keytips ul li {
  position: relative;
  margin: 10px 0 0;
  padding: 0 0 0 15px;
  border-bottom: none;
}

.recipe-keytips ul li::before {
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--main-color-black);
  transform: translateY(-50%);
  content: "";
}

.recipe-video {
  margin: 124px auto 0;
  padding: 0 54px;
}

.recipe-video > p {
  margin: 0;
}

.recipe-video iframe {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 41px auto 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.recipe-used {
  position: relative;
  margin: 120px 0 0;
  padding: 0 54px;
}

.recipe-used::after {
  position: absolute;
  right: -111px;
  top: 26px;
  width: 615px;
  height: 439px;
  background: url('../images/recipe-bg.png') center center / cover no-repeat;
  content: "";
  z-index: 0;
}

.recipe-used ul {
  display: flex;
  column-gap: 30px;
  margin: 41px auto 0;
}

.recipe-used ul li {
  width: calc((100% / 5) - 25px);
}

.recipe-used ul li a {
  color: var(--main-color-black);
  text-decoration: none;
  transition: all 0.3s ease;
}

.recipe-used ul li a figure {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  border: 2px solid var(--main-color-gray);
  border-radius: 16px;
}

.recipe-used ul li a figure img {
  width: 96px;
  height: 156px;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.recipe-used ul li a p {
  width: 90%;
  margin: 13px auto 0;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* hover */
.recipe-used ul li a:hover {
  color: var(--main-color-orange);
}

.recipe-used ul li a:hover figure img {
  transform: scale(1.05);
}

@media screen and (max-width: 768px) {
  .recipe-block {
    flex-direction: column;
    row-gap: 56px;
    margin: 51px auto 0;
    padding: 0 16px;
  }

  .recipe-block > div {
    width: 100%;
  }

  .recipe-info-title {
    padding: 20px 0 0;
    font-size: 1.375em;
  }

  .recipe-info-main ul {
    margin: 16px 0 0;
  }

  .recipe-info-main ul li {
    padding: 12px 0;
    font-size: 0.8125em;
  }

  .recipe-info-main ol {
    margin: 9px 0 0;
    padding-left: 19px;
  }

  .recipe-info-main ol li {
    font-size: 0.875em;
    padding: 16px 0 16px 15px;
  }

  .recipe-method .recipe-info-main > p {
    font-size: 0.875em;
  }

  .recipe-ingredients .recipe-info-main > p:has(b),
  .recipe-ingredients .recipe-info-main > p:has(strong) {
    margin: 13px 0 0;
    font-size: 0.8125em;
  }

  .recipe-ingredients .recipe-info-main p:first-child {
    margin: 14px 0 0;
  }

  .recipe-keytips {
    margin: 24px 0 0;
    padding: 15px 20px 17px;
  }

  .recipe-keytips p.recipe-keytips-title {
    font-size: 1em;
    padding-left: 36px;
  }

  .recipe-keytips .recipe-keytips-title::before {
    width: 24px;
    height: 24px;
  }

  .recipe-keytips p.recipe-keytips-title + p {
    margin: 9px auto 0;
    font-size: 0.8125em;
  }

  .recipe-keytips ul li {
    padding: 0 0 0 10px;
  }

  .recipe-keytips ul li::before {
    top: 9px;
  }

  .recipe-video {
    margin: 57px auto 0;
    padding: 0 16px;
  }

  .recipe-video iframe {
    margin: 28px auto 0;
  }

  .recipe-used {
    margin: 58px 0 0;
    padding: 0 16px;
  }

  .recipe-used::after {
    content: none;
  }

  .recipe-used ul {
    column-gap: 9px;
    margin: 32px auto 0;
  }

  .recipe-used ul li {
    width: calc((100% / 2) - 4px);
  }

  .recipe-used ul li a figure {
    padding: 20px 44px;
  }

  .recipe-used ul li a figure img {
    width: 77px;
    height: 123px;
  }

  .recipe-used ul li a p {
    width: 90%;
    margin: 13px auto 0;
    font-size: 0.8125em;
  }
}

.recipe-search {
  position: relative;
  width: 100%;
  margin: 120px auto 0;
  text-align: center;
}

.recipe-search .recipe-search-wrap {
  padding: 56px;
  border-radius: 24px;
  background: url('../images/recipe/recipe_seacrh_bg.jpg') center center / cover no-repeat;
}

.recipe-search .recipe-search-title {
  margin: 0 auto;
  font-size: 3.125em;
  font-weight: 700;
}

.recipe-search .recipe-search-main {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
  margin: 23px 0 0;
}

.recipe-search .recipe-search-filter a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 56px;
  border: 2px solid var(--main-color-orange);
  border-radius: 32px;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  background-color: var(--main-color-orange);
  transition: all 0.3s ease;
}

.recipe-search .recipe-search-filter a span {
  position: relative;
  padding-left: 36px;
}

.recipe-search .recipe-search-filter a span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  background: url('../images/icon_filter.png') center center / cover no-repeat;
  transform: translateY(-50%);
  content: "";
  transition: all 0.3s ease;
}

.recipe-search form {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.recipe-search input[type="text"] {
  width: 100%;
  padding: 16px 23px;
  border-radius: 28px;
  border: 2px solid var(--main-color-orange);
  color: var(--main-color-black);
  background-color: #fff;
  border-radius: 28px;
  font-size: 1em;
  font-weight: 500;
}

.recipe-search input[type="text"]::-webkit-input-placeholder {
  color: var(--main-color-orange);
  opacity: 1;
}

.recipe-search input[type="text"]:focus {
  outline: none;
}

.recipe-search button {
  position: absolute;
  padding: 0;
  right: 23px;
  top: 50%;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  outline: none;
  transform: translateY(-50%);
  cursor: pointer;
}

.recipe-search button img {
  width: 100%;
  height: auto;
}

/* hover */
.recipe-search .recipe-search-filter a:hover {
  color: var(--main-color-orange);
  background-color: #fff;
}

.recipe-search .recipe-search-filter a:hover span::before {
  background: url('../images/icon_filter_orange.png') center center / cover no-repeat;
  transform: translateY(-50%) scale(-1, 1);
}

@media screen and (max-width: 768px) {
  .recipe-search {
    margin: 55px auto 0;
    padding: 0 16px;
  }

  .recipe-search .recipe-search-wrap {
    padding: 29px 29px 41px;
    background: url('../images/recipe/recipe_seacrh_bg_sp.jpg') center top / cover no-repeat;
  }

  .recipe-search .recipe-search-title {
    font-size: 1.875em;
  }

  .recipe-search .recipe-search-main {
    column-gap: 8px;
    margin: 12px 0 0;
  }

  .recipe-search .recipe-search-filter a {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }

  .recipe-search .recipe-search-filter a span {
    font-size: 0;
  }

  .recipe-search .recipe-search-filter a span::before {
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
  }

  .recipe-related {
    margin: 40px auto 0;
  }

  /* hover */
  .recipe-search .recipe-search-filter a:hover span::before {
    background: url('../images/icon_filter_orange.png') center center / cover no-repeat;
    transform: translate(-50%, -50%) scale(-1, 1);
  }
}

/* 絞り込みmodal */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  z-index: 1000;
  display: none;
}

.modal .modal-wrap {
  position: relative;
  width: calc(100% - 322px);
  max-height: 90vh;
  margin: 5vh 0;
  /* margin: 120px 0; */
  left: 50%;
  padding: 44px 48px 20px;
  transform: translateX(-50%);
  border-radius: 32px;
  background-color: #f2f1ef;
  opacity: 0;
  transition: all 0.3s ease;
}

.modal.modal-open .modal-wrap {
  opacity: 1;
  transition: all 0.3s ease 0.3s;
}

.modal form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.modal .filter-title {
  position: relative;
  padding: 0 0 0 56px;
  font-size: 1.75em;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.modal .filter-title::before {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 18px;
  left: 0;
  transform: translateY(-50%);
  background: url('../images/icon_filter_orange.png') center center / cover no-repeat;
  content: "";
}

.modal form .form-main {
  position: relative;
  margin: 28px 0 0;
  flex: 1 1 auto;
  overflow: scroll;
}

.modal .filter-block {
  position: relative;
  margin: 0;
  padding: 27px 32px;
  border-radius: 24px;
  background-color: #fff;
}

.modal .filter-block.is-open {
  padding: 27px 32px 32px;
}

.modal .filter-block + .filter-block {
  margin: 24px 0 0;
}

.modal .filter-block .filter-block-toggle {
  position: absolute;
  top: 27px;
  right: 31px;
  width: 24px;
  height: 24px;
}

.modal .filter-block .filter-block-toggle button {
  position: relative;
  border: none;
  outline: none;
  appearance: none;
  background: none;
  cursor: pointer;
}

.modal .filter-block .filter-block-toggle button::before,
.modal .filter-block .filter-block-toggle button::after {
  position: absolute;
  background: var(--main-color-black);
  transition: all 0.3s ease;
  content: "";
}

.modal .filter-block .filter-block-toggle button::before {
  top: -5px;
  left: 0;
  width: 24px;
  height: 2px;
}

.modal .filter-block .filter-block-toggle button::after {
  top: -16px;
  left: 11px;
  height: 24px;
  width: 2px;
}

.modal .filter-block.is-open .filter-block-toggle button::after {
  transform: rotate(-90deg);
}

.plus::before,
.minus::before {
  width: 24px;
  height: 4px;
}

.plus::after {
  width: 4px;
  height: 24px;
}

.modal .filter-block > p {
  position: relative;
  margin: 0;
  padding-left: 28px;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.modal .filter-block > p::before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  background: url('../images/icon_filter_title.png') center center / cover no-repeat;
  transform: translateY(-50%);
  content: "";
}

.modal .filter-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 26px 0 0;
  padding: 0 11px;
}

.modal .filter-block ul li {
  width: calc(25% - 9px);
}

.modal .filter-block ul li label input {
  display: none;
}

.modal .filter-block ul li label .filter-text {
  position: relative;
  display: block;
  padding: 17.5px 10px 17.5px 38px;
  border-radius: 40px;
  border: 2px solid var(--border-color);
  color: var(--main-color-black);
  font-size: 0.875em;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
}

.modal .filter-block ul li label .filter-text::before {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}

.modal .filter-block ul li label input:checked + .filter-text {
  color: #fff;
  background: var(--main-color-orange);
  border: 2px solid var(--main-color-orange);
}

.modal .filter-block ul li .filter-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

.modal .filter-block ul li .filter-product:has(input:checked) {
  border: 2px solid var(--main-color-orange);
}

.modal .filter-block ul li label .filter-product-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 14px;
  height: 136px;
}

.modal .filter-block ul li label .filter-product-image img {
  width: auto;
  height: 100px;
}

.modal .filter-block ul li label .filter-product-text {
  flex: 1;
  padding: 11px 22px 16px;
  border-radius: 0 0 12px 12px;
  color: var(--main-color-black);
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: all 0.3s ease;
}

.modal .filter-block ul li .filter-product:has(input:checked) .filter-product-text {
  background-color: var(--main-color-orange);
  color: #fff;
}

.modal .filter-block ul li.cat-cooling-at-home label span::before {
  background: url('../images/icon_filter/icon_filter_home.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-food-service label span::before {
  background: url('../images/icon_filter/icon_filter_food.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-breakfast label span::before {
  background: url('../images/icon_filter/icon_filter_breakfast.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-soup label span::before {
  background: url('../images/icon_filter/icon_filter_soup.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-lunch label span::before {
  background: url('../images/icon_filter/icon_filter_lunch.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-entree label span::before {
  background: url('../images/icon_filter/icon_filter_entree.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-appetiser label span::before {
  background: url('../images/icon_filter/icon_filter_appetiser.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-main label span::before {
  background: url('../images/icon_filter/icon_filter_main.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-salad label span::before {
  background: url('../images/icon_filter/icon_filter_salad.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-side label span::before {
  background: url('../images/icon_filter/icon_filter_side.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-stir-fry label span::before {
  background: url('../images/icon_filter/icon_filter_stirfly.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-barbeque label span::before {
  background: url('../images/icon_filter/icon_filter_barbeque.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-dessert label span::before {
  background: url('../images/icon_filter/icon_filter_dessert.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-drinks label span::before {
  background: url('../images/icon_filter/icon_filter_drinks.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-asian label span::before {
  background: url('../images/icon_filter/icon_filter_asian.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-japanese label span::before {
  background: url('../images/icon_filter/icon_filter_japanese.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-modern-australian label span::before {
  background: url('../images/icon_filter/icon_filter_australian.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-international label span::before {
  background: url('../images/icon_filter/icon_filter_international.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-beef label span::before {
  background: url('../images/icon_filter/icon_filter_beef.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-chicken label span::before {
  background: url('../images/icon_filter/icon_filter_chicken.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-duck label span::before {
  background: url('../images/icon_filter/icon_filter_duck.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-pork label span::before {
  background: url('../images/icon_filter/icon_filter_pork.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-meat label span::before {
  background: url('../images/icon_filter/icon_filter_meat.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-seafood label span::before {
  background: url('../images/icon_filter/icon_filter_seafood.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-turkey label span::before {
  background: url('../images/icon_filter/icon_filter_turkey.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegetables label span::before {
  background: url('../images/icon_filter/icon_filter_vegetables.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-fruit label span::before {
  background: url('../images/icon_filter/icon_filter_fruit.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-15-minutes label span::before {
  background: url('../images/icon_filter/icon_filter_15minutes.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-30-minutes label span::before {
  background: url('../images/icon_filter/icon_filter_30minutes.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-60-minutes label span::before {
  background: url('../images/icon_filter/icon_filter_60minutes.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-over-60-minutes label span::before {
  background: url('../images/icon_filter/icon_filter_60minutes_over.png') center center / cover no-repeat;
}

.modal .filter-block ul li.has-video label span::before {
  background: url('../images/icon_filter/icon_filter_video.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-gluten-free label span::before {
  background: url('../images/icon_filter/icon_filter_gulten_free.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegetarian label span::before {
  background: url('../images/icon_filter/icon_filter_vegetarian.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegan label span::before {
  background: url('../images/icon_filter/icon_filter_vegan.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-cooling-at-home label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_home_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-food-service label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_food_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-breakfast label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_breakfast_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-soup label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_soup_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-lunch label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_lunch_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-entree label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_entree_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-appetiser label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_appetiser_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-main label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_main_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-salad label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_salad_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-side label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_side_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-stir-fry label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_stirfly_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-barbeque label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_barbeque_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-dessert label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_dessert_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-drinks label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_drinks_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-asian label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_asian_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-japanese label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_japanese_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-modern-australian label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_australian_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-international label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_international_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-beef label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_beef_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-chicken label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_chicken_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-duck label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_duck_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-pork label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_pork_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-meat label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_meat_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-seafood label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_seafood_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-turkey label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_turkey_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegetables label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_vegetables_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-fruit label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_fruit_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-15-minutes label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_15minutes_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-30-minutes label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_30minutes_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-60-minutes label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_60minutes_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-over-60-minutes label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_60minutes_over_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.has-video label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_video_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-gluten-free label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_gulten_free_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegetarian label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_vegetarian_white.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegan label input:checked + span::before {
  background: url('../images/icon_filter/icon_filter_vegan_white.png') center center / cover no-repeat;
}

/* modal背景 */
.modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 1px);
  background-color: rgba(0, 0, 0, 0.75);

  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.modal.modal-open .overlay {
  opacity: 1;
}

/* 閉じるボタン */
.modal .modal-close-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  padding: 0;
  z-index: 10;
  transition: right 0.3s cubic-bezier(0, 0, 0, 0.75);
  border: none;
  outline: none;
  appearance: none;
  background: none;
  cursor: pointer;
}

.modal .modal-close-icon span {
  display: none;
}

.modal .modal-close-icon::before,
.modal .modal-close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 36px;
  border-radius: 1px;
  background: var(--main-color-black);
}

.modal .modal-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal .modal-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal .submit-btn {
  width: 100%;
  max-width: 275px;
  margin: 20px auto 0;
}

.modal .submit-btn .common-btn {
  font-size: 1.125em;
  letter-spacing: 0.05em;
  padding: 19px 27px 19px 0;
  border: none;
  outline: none;
}

/* hover */
.modal .filter-block .filter-block-toggle:hover button::before,
.modal .filter-block .filter-block-toggle:hover button::after {
  background-color: var(--main-color-orange);
}

.modal .filter-block ul li label:hover .filter-text {
  color: var(--main-color-orange);
  border: 2px solid var(--main-color-orange);
}

.modal .filter-block ul li .filter-product:hover {
  border: 2px solid var(--main-color-orange);
}

.modal .filter-block ul li label:hover .filter-product-text {
  color: var(--main-color-orange);
}

.modal .filter-block ul li.cat-cooling-at-home:hover label span::before {
  background: url('../images/icon_filter/icon_filter_home_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-food-service:hover label span::before {
  background: url('../images/icon_filter/icon_filter_food_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-breakfast:hover label span::before {
  background: url('../images/icon_filter/icon_filter_breakfast_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-soup:hover label span::before {
  background: url('../images/icon_filter/icon_filter_soup_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-lunch:hover label span::before {
  background: url('../images/icon_filter/icon_filter_lunch_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-entree:hover label span::before {
  background: url('../images/icon_filter/icon_filter_entree_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-appetiser:hover label span::before {
  background: url('../images/icon_filter/icon_filter_appetiser_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-main:hover label span::before {
  background: url('../images/icon_filter/icon_filter_main_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-salad:hover label span::before {
  background: url('../images/icon_filter/icon_filter_salad_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-side:hover label span::before {
  background: url('../images/icon_filter/icon_filter_side_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-stir-fry:hover label span::before {
  background: url('../images/icon_filter/icon_filter_stirfly_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-barbeque:hover label span::before {
  background: url('../images/icon_filter/icon_filter_barbeque_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-dessert:hover label span::before {
  background: url('../images/icon_filter/icon_filter_dessert_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-drinks:hover label span::before {
  background: url('../images/icon_filter/icon_filter_drinks_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-asian:hover label span::before {
  background: url('../images/icon_filter/icon_filter_asian_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-japanese:hover label span::before {
  background: url('../images/icon_filter/icon_filter_japanese_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-modern-australian:hover label span::before {
  background: url('../images/icon_filter/icon_filter_australian_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-international:hover label span::before {
  background: url('../images/icon_filter/icon_filter_international_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-beef:hover label span::before {
  background: url('../images/icon_filter/icon_filter_beef_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-chicken:hover label span::before {
  background: url('../images/icon_filter/icon_filter_chicken_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-duck:hover label span::before {
  background: url('../images/icon_filter/icon_filter_duck_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-pork:hover label span::before {
  background: url('../images/icon_filter/icon_filter_pork_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-meat:hover label span::before {
  background: url('../images/icon_filter/icon_filter_meat_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-seafood:hover label span::before {
  background: url('../images/icon_filter/icon_filter_seafood_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-turkey:hover label span::before {
  background: url('../images/icon_filter/icon_filter_turkey_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegetables:hover label span::before {
  background: url('../images/icon_filter/icon_filter_vegetables_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-fruit:hover label span::before {
  background: url('../images/icon_filter/icon_filter_fruit_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-15-minutes:hover label span::before {
  background: url('../images/icon_filter/icon_filter_15minutes_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-30-minutes:hover label span::before {
  background: url('../images/icon_filter/icon_filter_30minutes_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-under-60-minutes:hover label span::before {
  background: url('../images/icon_filter/icon_filter_60minutes_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-over-60-minutes:hover label span::before {
  background: url('../images/icon_filter/icon_filter_60minutes_over_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.has-video:hover label span::before {
  background: url('../images/icon_filter/icon_filter_video_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-gluten-free:hover label span::before {
  background: url('../images/icon_filter/icon_filter_gulten_free_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegetarian:hover label span::before {
  background: url('../images/icon_filter/icon_filter_vegetarian_orange.png') center center / cover no-repeat;
}

.modal .filter-block ul li.cat-vegan:hover label span::before {
  background: url('../images/icon_filter/icon_filter_vegan_orange.png') center center / cover no-repeat;
}

@media screen and (max-width: 1440px) {
  .modal .filter-block ul li {
    width: calc((100% / 3) - 9px);
  }
}

@media screen and (max-width: 1220px) {
  .modal .modal-wrap {
    width: calc(100% - 160px);
  }

  .modal .filter-block ul li {
    width: calc(50% - 9px);
  }
}

@media screen and (max-width: 768px) {
  .modal .modal-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 24px);
    max-height: none;
    margin: 24px 0 0;
    padding: 26px 8px;
    border-radius: 32px 32px 0 0;
  }

  .modal .filter-title {
    padding-left: 42px;
    font-size: 1.375em;
  }

  .modal .filter-title::before {
    width: 28px;
    height: 28px;
    top: 13px;
    left: 3px;
  }

  .modal .modal-close-icon::before,
  .modal .modal-close-icon::after {
    height: 28px;
  }

  .modal form {
    max-height: none;
  }

  .modal form .form-main {
    margin: 20px 0 0;
  }

  .modal .filter-block {
    margin: 0;
    padding: 20px 15px;
    border-radius: 24px;
    background-color: #fff;
  }

  .modal .filter-block.is-open {
    padding: 20px 15px 26px;
  }

  .modal .filter-block + .filter-block {
    margin: 13px 0 0;
  }

  .modal .filter-block .filter-block-toggle {
    top: 20px;
    right: 17px;
    width: 16px;
    height: 16px;
  }

  .modal .filter-block .filter-block-toggle button::before {
    top: -8px;
    left: 0;
    width: 16px;
    height: 1px;
  }

  .modal .filter-block .filter-block-toggle button::after {
    top: -16px;
    left: 8px;
    height: 17px;
    width: 1px;
  }

  .modal .filter-block > p {
    padding-left: 26px;
    font-size: 1em;
  }

  .modal .filter-block > p::before {
    top: 49%;
    width: 18px;
    height: 18px;
  }

  .modal .filter-block ul {
    gap: 6px 5px;
    margin: 16px 0 0;
    padding: 0;
  }

  .modal .filter-block ul li {
    width: calc(50% - 6px);
  }

  .modal .filter-block ul li label .filter-text {
    padding: 13px 10px 13px 30px;
    border-radius: 32px;
    font-size: 0.75em;
  }

  .modal .filter-block ul li label .filter-text::before {
    width: 16px;
    height: 16px;
    left: 10px;
  }

  .modal .filter-block ul li label .filter-product-image {
    height: 84px;
  }

  .modal .filter-block ul li label .filter-product-image img {
    width: auto;
    height: 84px;
  }

  .modal .filter-block ul li .filter-product {
    padding: 20px 0 0;
  }

  .modal .filter-block ul li label .filter-product-text {
    padding: 14px 22px 13px;
    font-size: 0.75em;
  }

  .modal .modal-close-icon {
    top: 21px;
    right: 18px;
    width: 36px;
    height: 36px;
  }

  .modal .submit-btn {
    max-width: 251px;
    margin: 20px auto 0;
  }

  .modal .submit-btn .common-btn {
    font-size: 1em;
    padding: 18px 27px 18px 0;
  }
}