@charset "UTF-8";
/* -----------------------------------------------
setting
Scssの変数等を定義
-------------------------------------------------- */
/* -----------------------------------------------
既存CSSの上書き
-------------------------------------------------- */
.hs-c-link[href^="#"]:before {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.hs-fixed-buttons .hs-c-button {
  padding: 0;
}

.hs-c-button[target=_blank]:before {
  background-image: url(/r23res/image/common/icon_blank.svg);
}

.hs-c-button.hs-c-button--target:not(.hs-c-button--white)::before, .hs-c-button[target=_blank]:not(.hs-c-button--white)::before {
  width: 6px;
  height: 11px;
  background-image: url(/r23res/image/common/icon_link_white.svg);
}

.hs-main-visual {
  display: block;
  color: #fff !important;
}
@media (hover: hover) {
  .hs-main-visual {
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .hs-main-visual:hover {
    opacity: 0.7;
  }
}

@media (min-width: 768px) {
  .hs-text-button-area .hs-text-button-area__button {
    -ms-flex-preferred-size: calc(33.33333% - 80px);
        flex-basis: calc(33.33333% - 80px);
  }
  .hs-fixed-buttons .hs-c-button {
    padding: 15px;
  }
}
/* -----------------------------------------------
common
共通パーツ
-------------------------------------------------- */
a {
  word-break: break-all;
}

.hs-lg-show {
  display: none;
}
@media (max-width: 1099px) {
  .hs-lg-show {
    display: block;
  }
}

@media (max-width: 1099px) {
  .hs-lg-hide {
    display: none;
  }
}

.hs-md-show {
  display: none;
}
@media (max-width: 767px) {
  .hs-md-show {
    display: block;
  }
}

@media (max-width: 767px) {
  .hs-md-hide {
    display: none;
  }
}

.hs-main-visual--recipe {
  background: center/cover url(/recipe/asset/img/common/bg_mv.jpg);
}

.hs-button {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background: #333;
  min-width: 210px;
  color: #fff !important;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  padding: 14px 28px;
  position: relative;
}
.hs-button:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 16px;
  background: center/contain no-repeat url(/r23res/image/common/icon_arrow_white.svg);
  right: 12px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (hover: hover) {
  .hs-button {
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .hs-button:hover {
    opacity: 0.7;
  }
}
@media (max-width: 767px) {
  .hs-button {
    min-width: 50%;
    font-size: 3.4666666667vw;
    padding: 3.7333333333vw 7.4666666667vw;
  }
  .hs-button:after {
    width: 2.1333333333vw;
    height: 4.2666666667vw;
    right: 3.2vw;
  }
}

.hs-button--download:after {
  width: 17px;
  height: 19px;
  background-image: url(/recipe/asset/img/common/icon_download.svg);
}
@media (max-width: 767px) {
  .hs-button--download:after {
    width: 4.5333333333vw;
    height: 5.0666666667vw;
  }
}

.hs-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 767px) {
  .hs-tags {
    gap: 2.6666666667vw;
  }
}

.hs-tag {
  display: inline-block;
  background: #F1F3F5;
  font-size: 12px;
  line-height: 1;
  padding: 8px 15px;
  border: 1px solid #BEBEBE;
  border-radius: 15px;
}
@media (max-width: 767px) {
  .hs-tag {
    font-size: 3.2vw;
    padding: 2.1333333333vw 4vw;
    border-width: 0.2666666667vw;
    border-radius: 4vw;
  }
}

.hs-date {
  font-size: 13px;
  line-height: 1;
}
@media (max-width: 767px) {
  .hs-date {
    font-size: 3.4666666667vw;
  }
}

.hs-cta-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
}
@media (max-width: 767px) {
  .hs-cta-buttons {
    gap: 2.6666666667vw;
  }
}

.hs-cta-button {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 280px;
  background: #333;
  color: #fff !important;
  font-size: 18px;
  line-height: 1;
  padding: 20px 40px 20px 20px;
  position: relative;
}
.hs-cta-button:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 16px;
  background: center/contain no-repeat url(/r23res/image/common/icon_arrow_white.svg);
  right: 12px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (hover: hover) {
  .hs-cta-button {
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .hs-cta-button:hover {
    opacity: 0.7;
  }
}
@media (max-width: 1099px) {
  .hs-cta-button {
    width: calc(50% - 10px);
    min-width: auto;
  }
}
@media (max-width: 767px) {
  .hs-cta-button {
    width: 100%;
    font-size: 3.4666666667vw;
    padding: 5.3333333333vw 10.6666666667vw 5.3333333333vw 5.3333333333vw;
  }
  .hs-cta-button:after {
    width: 2.1333333333vw;
    height: 4.2666666667vw;
    right: 3.2vw;
  }
}

.hs-boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 767px) {
  .hs-boxes {
    gap: 2.6666666667vw;
  }
}

.hs-box {
  background: none;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 18px;
  border: 2px solid #000;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .hs-box {
    font-size: 5.6vw;
    padding: 2.1333333333vw 4.2666666667vw !important;
    border-width: 0.5333333333vw;
  }
}

.hs-box--red {
  background: #CC0022 !important;
  color: #fff;
  border-color: #CC0022;
}

.hs-box--blue {
  background: blue !important;
  color: #fff;
  border-color: blue;
}

.hs-format {
  display: inline-block;
  font-size: 13px;
  line-height: 19px;
  padding-right: 26px;
  position: relative;
}
.hs-format:after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 19px;
  background: center/contain no-repeat url(/recipe/asset/img/common/icon_pdf.png);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}
@media (max-width: 767px) {
  .hs-format {
    font-size: 3.4666666667vw;
    line-height: 5.0666666667vw;
    padding-right: 6.9333333333vw;
  }
  .hs-format:after {
    width: 4.5333333333vw;
    height: 5.0666666667vw;
  }
}