@charset "UTF-8";
/* common
================================================== */
/*
 * media query
**/
/**
 * フォントサイズの可変
 *
 * @param {number} $fontsize 基準となるフォントサイズ
 * @param {number} $basewidth 基準となる幅
 * @param {number} $maxwidth フォントサイズの拡大をとめる幅（未指定時は上限なし）
 * @param {number} $minwidth フォントサイズの縮小をとめる幅（未指定時は下限なし）
 */
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior: none;
}
body * {
  box-sizing: border-box;
}
body a {
  text-decoration: none;
  color: inherit;
}

.heartfood-img {
  margin-top: 40px;
  margin-inline: auto;
  max-width: 1000px;
}
@media screen and (max-width: 767px) {
  .heartfood-img {
    margin-top: 20px;
  }
}
.heartfood-img img {
  margin: auto;
}

.heartfood-btn {
  margin-top: 60px;
  margin-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .heartfood-btn {
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

.heartfood-btn a {
  display: block;
  position: relative;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .heartfood-btn a {
    width: 27.8184480234vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .heartfood-btn a {
    width: 380px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767px) {
  .heartfood-btn a {
    width: 213.3674963397px;
  }
}
@media screen and (max-width: 767px) {
  .heartfood-btn a {
    width: 84vw;
  }
}

@media screen and (min-width: 768px) {
  .heartfood-btn a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/-/Media/com/heartfood/202512/btn-hover.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
}
@media screen and (min-width: 768px) {
  .heartfood-btn a:hover:after {
    opacity: 1;
  }
}