@charset "UTF-8";
/*
変数関係をまとめたファイル
 */
/*
ブレイクポイントに関して記述しているファイル
下のブレイクポイントの設定を変更するときは必ずPMに一声かける
 */
.recipe-page > .section-title {
  background-color: #1f1f23;
  background-image: url(../../../assets/imgs/recipe/mv.jpg);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-title {
    background-image: url(../../../assets/imgs/recipe/mv_sp.jpg);
  }
}
.recipe-page > .section-title > .container {
  max-width: 1180px;
  padding: 0 20px;
  margin: 0 auto;
}
.recipe-page > .section-title > .container > .page-title {
  color: #ffffff;
  font-size: 68px;
  padding: 188px 0 60px;
}
@media screen and (max-width: 1036px) {
  .recipe-page > .section-title > .container > .page-title {
    font-size: 54px;
  }
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-title > .container > .page-title {
    font-size: 36px;
    padding: 128px 0 170px;
  }
}
@media screen and (max-width: 640px) {
  .recipe-page > .section-title > .container > .page-title {
    padding: 114px 0 40px;
  }
}
.recipe-page > .section-title > .container > .page-title > .decoration {
  display: block;
  width: 27px;
  margin-bottom: 8px;
}
.recipe-page > .section-title > .container > .page-title > .english {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  color: #677add;
  font-size: 16px;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
@media screen and (max-width: 640px) {
  .recipe-page > .section-title > .container > .page-title > .english {
    font-size: 14px;
  }
}
.recipe-page > .section-banner {
  background-color: #ededeb;
  padding: 48px 20px 80px;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-banner {
    padding: 32px 20px 52px;
  }
}
.recipe-page > .section-banner > .background {
  right: 0;
  background-color: #ffffff;
  border-radius: 0 0 0 110px;
  max-width: 87%;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-banner > .background {
    border-radius: 0 0 0 50px;
    max-width: 92%;
  }
}
.recipe-page > .section-banner > .container {
  max-width: 1180px;
  padding: 0 20px;
  margin: 0 auto;
  z-index: 2;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-banner > .container {
    padding: 0;
  }
}
.recipe-page > .section-banner > .container > .backbutton {
  position: relative;
  display: inline-block;
  text-decoration: underline;
  font-size: 13px;
  padding-left: 15px;
  margin-bottom: 72px;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-banner > .container > .backbutton {
    margin-bottom: 25px;
  }
}
.recipe-page > .section-banner > .container > .backbutton::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%) rotate(135deg);
          transform: translateY(-50%) rotate(135deg);
  border-right: 1.5px solid #1f1f23;
  border-bottom: 1.5px solid #1f1f23;
  width: 8px;
  height: 8px;
}
.recipe-page > .section-banner > .container > .backbutton > .link {
  color: #363644;
}
.recipe-page > .section-banner > .container > .box-banner {
  max-width: 780px;
  margin: 0 auto;
}
.recipe-page > .section-recipe {
  background-color: #ffffff;
}
.recipe-page > .section-recipe > .background {
  left: 0;
  background-color: #ededeb;
  border-radius: 0 110px 0 0;
  max-width: 87%;
}
.recipe-page > .section-recipe > .container {
  max-width: 1234px;
  padding: 0 20px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .recipe-page > .section-recipe > .container {
    padding: 0 20px 120px;
  }
}
.recipe-page > .section-recipe > .container > .list-recipe {
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -16px;
  z-index: 3;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-recipe > .container > .list-recipe {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe {
  position: relative;
  max-width: 380px;
  width: 100%;
  margin: 0 9px 48px;
}
@media screen and (max-width: 1036px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe {
    margin: 0 9px 32px;
  }
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe {
    max-width: 45%;
    margin: 0 12px 32px;
  }
}
@media screen and (max-width: 640px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe {
    max-width: 100%;
    margin: 0 auto 32px;
  }
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe:nth-child(3), .recipe-page > .section-recipe > .container > .list-recipe > .recipe:nth-child(4), .recipe-page > .section-recipe > .container > .list-recipe > .recipe:nth-child(5) .recipe-page > .section-recipe > .container > .list-recipe > .recipe:last-child {
  display: none;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .category {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 4px;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .category.pretreatment {
  background-color: #08083d;
  color: #ffffff;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .category.color {
  background-color: #d1d1db;
  color: #08083d;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .category.accurate {
  background-color: #b6654b;
  color: #ffffff;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .category.sensation {
  background-color: #fadcba;
  color: #b6654b;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .image {
  max-width: 380px;
  width: 100%;
  height: 241px;
  margin-bottom: 16px;
}
@media screen and (max-width: 820px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .image {
    max-width: 100%;
    height: 217px;
    margin-bottom: 8px;
  }
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .image > img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #1f1f23;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}
@media screen and (max-width: 1036px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .title {
    font-size: 18px;
  }
}
@media screen and (max-width: 640px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .title {
    font-size: 16px;
  }
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .title > .icon {
  width: 18px;
  margin-left: 8px;
}
@media screen and (max-width: 1036px) {
  .recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .title > .icon {
    width: 14px;
  }
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .list-tag > .tag {
  border: 1px solid #b6654b;
  background-color: #ffffff;
  border-radius: 50px;
  color: #b6654b;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  margin-right: 12px;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .list-tag > .tag.impregnation {
  border: 1px solid #b6654b;
  color: #b6654b;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .list-tag > .tag.selection {
  border: 1px solid #677add;
  color: #677add;
}
.recipe-page > .section-recipe > .container > .list-recipe > .recipe > .link > .list-tag > .tag.lowTemperature {
  border: 1px solid #1f1f23;
  color: #1f1f23;
}