.hero {
  --shadow: 20px;
  --text-color: #000;

  position: relative;
  overflow: hidden;
  padding-bottom: var(--shadow);
  
  a:hover {
    text-decoration: none;
  }
  
  @media screen and (min-width:769px) {
    min-width: 1220px;
    margin-bottom: 10px;
  }
  
  @media screen and (max-width:768px) {
  }
}

.hero__inner {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.hero__image {
  display: block;
  text-align: center;
  
  img {
    max-width: none;
  }

  @media screen and (min-width:768.002px) {
    width: 1220px;
    height: 330px;

    img {
      margin: 0 -30px;
    }
  }

  @media screen and (max-width:768px) {
    width: 670px;
    height: 300px;

    img {
      margin: 0 -30px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.hero-slider {
  overflow: visible;
  margin-top: -25px;

  .swiper-slide {
    width: fit-content;
  }
}

.hero-card {
  --space: 10px;
  --red: #b71d21;
  --deep_red: #831d21;
  
  position: relative;
  display: grid;
  grid-template-areas:
  "thumb"
  "header"
  "body"
  "price"
  "footer";
  grid-template-rows: auto auto auto 1fr auto;
  width: 280px;
  height: 541px;
  background: #fff;
  box-shadow: 0px 0px var(--shadow) rgba(0,0,0,0.2);
  font-feature-settings: "palt";
}


.hero-card::before {
  display: block;
  content: "";
  position: absolute;
  top: -23px;
  right: -8px;
  width: 78.5px;
  height: 78.5px;
  pointer-events: none;
}

.hero-card[data-icon="free"]::before {
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2078.5%2078.5%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fcee21%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cg%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2275.63%2024.53%2072.13%2027.69%2076.84%2027.95%2073.06%2030.77%2077.72%2031.46%2073.7%2033.93%2078.28%2035.05%2074.04%2037.13%2078.5%2038.67%2074.09%2040.34%2078.39%2042.29%2073.84%2043.55%2077.94%2045.89%2073.29%2046.73%2077.15%2049.43%2072.45%2049.83%2076.05%2052.89%2071.34%2052.85%2074.64%2056.22%2069.94%2055.76%2072.92%2059.41%2068.29%2058.52%2070.92%2062.44%2066.39%2061.12%2068.65%2065.26%2064.26%2063.53%2066.13%2067.86%2061.92%2065.73%2063.37%2070.22%2059.38%2067.71%2060.41%2072.31%2056.66%2069.44%2057.26%2074.12%2053.8%2070.92%2053.97%2075.63%2050.81%2072.13%2050.55%2076.84%2047.73%2073.06%2047.04%2077.72%2044.58%2073.7%2043.45%2078.28%2041.38%2074.04%2039.83%2078.5%2038.16%2074.09%2036.21%2078.39%2034.95%2073.84%2032.61%2077.94%2031.78%2073.29%2029.07%2077.15%2028.67%2072.45%2025.62%2076.05%2025.65%2071.34%2022.28%2074.64%2022.74%2069.94%2019.09%2072.92%2019.98%2068.29%2016.07%2070.92%2017.38%2066.39%2013.24%2068.65%2014.97%2064.26%2010.64%2066.13%2012.77%2061.92%208.28%2063.37%2010.79%2059.38%206.19%2060.41%209.06%2056.66%204.38%2057.26%207.58%2053.8%202.87%2053.97%206.38%2050.81%201.67%2050.55%205.44%2047.73%20.78%2047.04%204.8%2044.58%20.22%2043.45%204.46%2041.38%200%2039.83%204.41%2038.16%20.12%2036.21%204.66%2034.95%20.57%2032.61%205.21%2031.78%201.35%2029.07%206.05%2028.67%202.45%2025.62%207.17%2025.65%203.86%2022.28%208.56%2022.74%205.58%2019.09%2010.21%2019.98%207.58%2016.07%2012.11%2017.38%209.85%2013.24%2014.24%2014.97%2012.38%2010.64%2016.59%2012.77%2015.13%208.28%2019.12%2010.79%2018.09%206.19%2021.84%209.06%2021.24%204.38%2024.7%207.58%2024.53%202.87%2027.69%206.38%2027.95%201.67%2030.77%205.44%2031.46%20.78%2033.93%204.8%2035.05%20.22%2037.13%204.46%2038.67%200%2040.34%204.41%2042.29%20.12%2043.55%204.66%2045.89%20.57%2046.73%205.21%2049.43%201.35%2049.83%206.05%2052.89%202.45%2052.85%207.17%2056.22%203.86%2055.76%208.56%2059.41%205.58%2058.52%2010.21%2062.44%207.58%2061.12%2012.11%2065.26%209.85%2063.53%2014.24%2067.86%2012.38%2065.73%2016.59%2070.22%2015.13%2067.71%2019.12%2072.31%2018.09%2069.44%2021.84%2074.12%2021.24%2070.92%2024.7%2075.63%2024.53%22%2F%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M26.66%2C27.06c.13.78.48%2C1.45%2C1.06%2C2.02.58.56%2C1.36%2C1.07%2C2.33%2C1.51.62.28%2C1.34.59%2C2.18.94.84.35%2C1.73.7%2C2.67%2C1.05.94.35%2C1.87.69%2C2.79%2C1.02.92.32%2C1.76.6%2C2.52.83-.2.19-.44.44-.72.75-.28.32-.54.64-.79.97-.25.33-.47.64-.64.92-.67-.22-1.41-.48-2.21-.78-.8-.3-1.63-.62-2.47-.95-.84-.33-1.65-.66-2.43-.99s-1.49-.64-2.12-.92c-1.19-.54-2.15-1.14-2.87-1.79s-1.27-1.5-1.63-2.57c-.57.2-1.15.4-1.75.6s-1.26.41-1.99.62l-.18-3.68c.55-.08%2C1.13-.17%2C1.75-.27.61-.1%2C1.21-.23%2C1.79-.37l2.71%2C1.09ZM29.24%2C20.66l-3.1%2C7.69-2.9-1.17%2C2-4.96-2.1-.85%2C1.1-2.73%2C5%2C2.01ZM26.43%2C12.96l2.92-.89c.29.43.57.91.86%2C1.44.29.53.54%2C1.05.77%2C1.57.23.52.39.98.5%2C1.38l-3.16%2C1.01c-.06-.39-.2-.85-.4-1.37-.2-.52-.43-1.06-.69-1.62s-.53-1.06-.8-1.52ZM35.9%2C19.66l2.98%2C1.2-1.37%2C3.41c-.26.65-.62%2C1.29-1.08%2C1.92-.46.63-1.04%2C1.2-1.75%2C1.72-.71.51-1.56.93-2.57%2C1.24-1.01.31-2.2.48-3.58.52-.04-.25-.12-.56-.25-.92-.12-.36-.26-.72-.41-1.08-.15-.36-.3-.67-.46-.95%2C1.25.08%2C2.3.01%2C3.14-.2.84-.21%2C1.52-.5%2C2.04-.88.52-.38.93-.8%2C1.23-1.26.3-.46.54-.91.72-1.36l1.36-3.37ZM30%2C20.53l13.14%2C5.29-1.06%2C2.63-13.14-5.29%2C1.06-2.63ZM32.38%2C16.75l11.67%2C4.7-1.04%2C2.59-11.67-4.7%2C1.04-2.59ZM33.73%2C14.5h2.92c.17.58.31%2C1.23.42%2C1.92.11.7.14%2C1.29.1%2C1.78l-3.13.07c.07-.48.07-1.07%2C0-1.78-.06-.71-.17-1.37-.31-2ZM37.31%2C25.71c.03%2C1.14.34%2C2.22.91%2C3.25.57%2C1.03%2C1.45%2C1.95%2C2.62%2C2.77-.28.11-.6.26-.96.47-.36.21-.71.42-1.04.64-.33.22-.62.43-.86.64-1.29-1.07-2.19-2.29-2.69-3.67s-.72-2.89-.67-4.56l2.68.46ZM42.08%2C16.62l2.67%2C2.14c-.62.43-1.23.84-1.83%2C1.22s-1.14.7-1.61.96l-2.09-1.82c.31-.22.64-.47.99-.75.35-.28.69-.57%2C1.02-.87.33-.3.61-.6.85-.88Z%22%2F%3E%20%3Cpath%20d%3D%22M47.61%2C28.45l1.26%2C1.46c-.44.61-.92%2C1.25-1.44%2C1.92-.52.67-1.06%2C1.32-1.63%2C1.96-.57.64-1.14%2C1.23-1.71%2C1.78-.57.54-1.13%2C1-1.68%2C1.36.04-.35.07-.73.07-1.17%2C0-.43%2C0-.87-.03-1.3-.02-.44-.05-.82-.09-1.15.59-.33%2C1.21-.78%2C1.87-1.34.65-.56%2C1.28-1.15%2C1.88-1.77.6-.62%2C1.1-1.2%2C1.51-1.75ZM51.43%2C20.55l2.73%2C1.1-7.73%2C19.21-2.73-1.1%2C7.73-19.2ZM45.77%2C26.01l8.55%2C3.44-1.11%2C2.76-8.55-3.44%2C1.11-2.75ZM47.69%2C20.9l2.25.29c-.03.57-.09%2C1.18-.2%2C1.82-.11.64-.23%2C1.25-.36%2C1.84-.13.59-.28%2C1.11-.43%2C1.57l-2.42-.29c.18-.45.35-.97.5-1.57.15-.59.29-1.21.4-1.85.12-.64.2-1.24.25-1.81ZM50.32%2C31.09c.08.15.19.37.31.66.12.29.25.62.4.98.15.36.29.72.42%2C1.08s.25.69.36.97c.11.29.18.5.21.64l-2.7%2C1.59c-.02-.36-.05-.77-.1-1.24-.05-.47-.11-.96-.19-1.45-.08-.5-.16-.98-.24-1.44-.08-.46-.17-.86-.25-1.19l1.79-.61ZM51.9%2C35.28l11.25%2C2.35-.68%2C2.93-11.23-2.32.67-2.96ZM54.74%2C22.98l2.26%2C1.5c-.41.5-.82%2C1.01-1.25%2C1.54-.42.53-.84%2C1.02-1.24%2C1.49-.4.47-.77.88-1.1%2C1.24l-1.65-1.26c.32-.39.66-.85%2C1.02-1.38.36-.53.72-1.06%2C1.06-1.61.35-.55.65-1.06.9-1.52ZM53.82%2C30.74l2.24-1.56c.31.36.63.77.95%2C1.23.32.45.62.9.9%2C1.35.28.44.49.85.63%2C1.2l-2.44%2C1.77c-.11-.35-.3-.75-.55-1.22s-.53-.94-.84-1.43c-.3-.49-.6-.93-.9-1.33ZM62.79%2C24.96l2.78%2C1.12-7.81%2C19.39-2.78-1.12%2C7.81-19.39ZM56.75%2C25.94l2.23-1.42c.29.37.59.78.89%2C1.24.3.45.58.9.83%2C1.34.26.44.44.84.55%2C1.19l-2.43%2C1.61c-.09-.35-.26-.76-.48-1.21-.23-.46-.48-.93-.76-1.41s-.56-.93-.84-1.32Z%22%2F%3E%20%3Cpath%20d%3D%22M14.38%2C49.07l2.62%2C1.86c-.54.7-1.16%2C1.37-1.86%2C2.01-.71.64-1.41%2C1.14-2.11%2C1.51l-2.42-2.3c.61-.26%2C1.26-.67%2C1.96-1.24.69-.57%2C1.3-1.18%2C1.82-1.84ZM13.93%2C45.61l17.92%2C7.21-1.06%2C2.63-17.92-7.21%2C1.06-2.63ZM15.49%2C40.74l18.57%2C7.48-1.06%2C2.63-18.57-7.48%2C1.06-2.63ZM19.72%2C38.06l2.61%2C1.05-3.99%2C9.92-2.61-1.05%2C3.99-9.92ZM21.84%2C35.45l2.57%2C2.03c-.67.6-1.4%2C1.16-2.2%2C1.66-.8.51-1.61.95-2.43%2C1.32-.82.37-1.61.67-2.36.89-.1-.26-.25-.58-.45-.94-.2-.37-.41-.72-.62-1.08-.21-.35-.41-.65-.58-.9%2C1.07-.19%2C2.15-.54%2C3.24-1.08%2C1.09-.53%2C2.03-1.17%2C2.82-1.91ZM17.79%2C51.39l2.89.78c-.12.68-.27%2C1.41-.47%2C2.19-.2.78-.39%2C1.44-.59%2C1.96l-3.09-.75c.14-.34.28-.75.44-1.22.16-.47.31-.97.46-1.49.15-.52.26-1.01.36-1.48ZM23.33%2C39.51l2.45.99-3.99%2C9.92-2.45-.99%2C3.99-9.92ZM21.16%2C37.55l14.06%2C5.66-1.04%2C2.59-14.69-5.91%2C1.68-2.34ZM21.76%2C53.08l2.99.66c0%2C.47-.02.98-.05%2C1.51-.03.53-.08%2C1.04-.14%2C1.53-.06.49-.14.92-.23%2C1.29l-3.21-.63c.15-.54.29-1.22.41-2.04.12-.82.2-1.6.24-2.33ZM26.8%2C40.91l2.45.99-3.99%2C9.92-2.45-.99%2C3.99-9.92ZM25.8%2C54.59l3.21.27c.13.54.25%2C1.12.37%2C1.75.12.62.23%2C1.24.32%2C1.83.09.6.14%2C1.13.14%2C1.59l-3.46-.23c.02-.44%2C0-.95-.06-1.54-.05-.59-.13-1.21-.22-1.86-.1-.65-.2-1.25-.3-1.82ZM30.31%2C42.32l2.71%2C1.09-3.99%2C9.92-2.71-1.09%2C3.99-9.92Z%22%2F%3E%20%3Cpath%20d%3D%22M38.25%2C51.64l1.26%2C1.46c-.44.62-.92%2C1.26-1.44%2C1.92-.52.67-1.07%2C1.32-1.63%2C1.96-.57.64-1.14%2C1.23-1.71%2C1.78-.57.54-1.13%2C1-1.68%2C1.37.04-.35.07-.74.07-1.17%2C0-.44%2C0-.87-.03-1.31-.02-.44-.05-.82-.09-1.15.59-.33%2C1.21-.78%2C1.87-1.33.65-.56%2C1.28-1.15%2C1.88-1.77.6-.62%2C1.1-1.21%2C1.51-1.75ZM42.07%2C43.74l2.73%2C1.1-7.73%2C19.2-2.73-1.1%2C7.73-19.21ZM36.41%2C49.19l8.55%2C3.44-1.11%2C2.75-8.55-3.44%2C1.11-2.76ZM38.33%2C44.08l2.25.29c-.03.57-.09%2C1.18-.2%2C1.82-.11.64-.23%2C1.25-.36%2C1.84-.13.59-.28%2C1.11-.43%2C1.57l-2.42-.29c.18-.45.35-.97.5-1.57.15-.59.29-1.21.4-1.85.12-.64.2-1.24.25-1.81ZM40.96%2C54.27c.08.14.19.36.3.66s.25.62.4.98c.15.36.29.72.42%2C1.08.13.36.25.68.36.97.11.29.18.5.22.64l-2.7%2C1.59c-.02-.35-.05-.77-.1-1.24-.05-.47-.11-.95-.19-1.45-.08-.5-.16-.97-.24-1.44-.08-.46-.17-.86-.25-1.19l1.79-.61ZM42.54%2C58.46l11.25%2C2.35-.68%2C2.93-11.23-2.32.67-2.96ZM45.39%2C46.16l2.26%2C1.5c-.41.5-.82%2C1.01-1.25%2C1.54-.43.53-.84%2C1.02-1.24%2C1.49-.4.47-.77.88-1.1%2C1.24l-1.65-1.26c.32-.39.66-.85%2C1.02-1.38.36-.53.72-1.06%2C1.06-1.61.35-.55.65-1.05.9-1.52ZM44.47%2C53.93l2.24-1.56c.31.36.63.77.95%2C1.23s.62.9.9%2C1.35c.28.45.49.85.63%2C1.2l-2.44%2C1.77c-.11-.35-.3-.75-.55-1.22-.26-.47-.53-.94-.84-1.43-.3-.48-.6-.93-.9-1.33ZM53.43%2C48.14l2.78%2C1.12-7.81%2C19.39-2.78-1.12%2C7.81-19.39ZM47.39%2C49.13l2.23-1.43c.29.37.59.78.89%2C1.24.3.45.58.9.83%2C1.34.26.44.44.84.55%2C1.18l-2.43%2C1.61c-.09-.36-.26-.76-.48-1.21-.23-.46-.48-.93-.76-1.41s-.56-.93-.84-1.32Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: contain;
}

.hero-card[data-icon="sale"]::before {
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2078.5%2078.5%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20%7D%20.cls-2%20%7B%20fill%3A%20%23b71d21%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cg%3E%20%3Cpolygon%20class%3D%22cls-2%22%20points%3D%2275.63%2024.53%2072.13%2027.69%2076.84%2027.95%2073.06%2030.77%2077.72%2031.46%2073.7%2033.93%2078.28%2035.05%2074.04%2037.13%2078.5%2038.67%2074.09%2040.34%2078.39%2042.29%2073.84%2043.55%2077.94%2045.89%2073.29%2046.73%2077.15%2049.43%2072.45%2049.83%2076.05%2052.89%2071.34%2052.85%2074.64%2056.22%2069.94%2055.76%2072.92%2059.41%2068.29%2058.52%2070.92%2062.44%2066.39%2061.12%2068.65%2065.26%2064.26%2063.53%2066.13%2067.86%2061.92%2065.73%2063.37%2070.22%2059.38%2067.71%2060.41%2072.31%2056.66%2069.44%2057.26%2074.12%2053.8%2070.92%2053.97%2075.63%2050.81%2072.13%2050.55%2076.84%2047.73%2073.06%2047.04%2077.72%2044.58%2073.7%2043.45%2078.28%2041.38%2074.04%2039.83%2078.5%2038.16%2074.09%2036.21%2078.39%2034.95%2073.84%2032.61%2077.94%2031.78%2073.29%2029.07%2077.15%2028.67%2072.45%2025.62%2076.05%2025.65%2071.34%2022.28%2074.64%2022.74%2069.94%2019.09%2072.92%2019.98%2068.29%2016.07%2070.92%2017.38%2066.39%2013.24%2068.65%2014.97%2064.26%2010.64%2066.13%2012.77%2061.92%208.28%2063.37%2010.79%2059.38%206.19%2060.41%209.06%2056.66%204.38%2057.26%207.58%2053.8%202.87%2053.97%206.38%2050.81%201.67%2050.55%205.44%2047.73%20.78%2047.04%204.8%2044.58%20.22%2043.45%204.46%2041.38%200%2039.83%204.41%2038.16%20.12%2036.21%204.66%2034.95%20.57%2032.61%205.21%2031.78%201.35%2029.07%206.05%2028.67%202.45%2025.62%207.17%2025.65%203.86%2022.28%208.56%2022.74%205.58%2019.09%2010.21%2019.98%207.58%2016.07%2012.11%2017.38%209.85%2013.24%2014.24%2014.97%2012.38%2010.64%2016.59%2012.77%2015.13%208.28%2019.12%2010.79%2018.09%206.19%2021.84%209.06%2021.24%204.38%2024.7%207.58%2024.53%202.87%2027.69%206.38%2027.95%201.67%2030.77%205.44%2031.46%20.78%2033.93%204.8%2035.05%20.22%2037.13%204.46%2038.67%200%2040.34%204.41%2042.29%20.12%2043.55%204.66%2045.89%20.57%2046.73%205.21%2049.43%201.35%2049.83%206.05%2052.89%202.45%2052.85%207.17%2056.22%203.86%2055.76%208.56%2059.41%205.58%2058.52%2010.21%2062.44%207.58%2061.12%2012.11%2065.26%209.85%2063.53%2014.24%2067.86%2012.38%2065.73%2016.59%2070.22%2015.13%2067.71%2019.12%2072.31%2018.09%2069.44%2021.84%2074.12%2021.24%2070.92%2024.7%2075.63%2024.53%22%2F%3E%20%3Cg%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M21.33%2C37.08c.44-1.26.84-2.62.38-4.16-.43-1.47-1.42-2.28-2.21-2.93l-1.57-1.28c-.35-.31-.79-.69-.9-1.18-.13-.5.04-1.4.28-2.07.23-.67.54-1.33%2C1.14-1.64.4-.19.83-.2%2C1.31-.03.73.26.96.68%2C1.06.97.23.66-.07%2C1.51-.16%2C1.78l-.34.97%2C3.77%2C1.33.38-1.09c.62-1.76.63-3.41.02-4.76-.59-1.32-1.75-2.32-3.34-2.88-1.64-.58-3.06-.57-4.35.03-1.44.66-2.54%2C1.92-3.12%2C3.56l-.21.59c-.39%2C1.1-.73%2C2.19-.64%2C3.34.11%2C1.75%2C1.06%2C2.75%2C2.07%2C3.57l1.89%2C1.53c.22.18.79.65.96%2C1.21.13.44.04%2C1.16-.27%2C2.03l-.27.77c-.15.42-.46%2C1.3-1.01%2C1.65-.45.28-1.04.29-1.75.04-.58-.21-.96-.54-1.12-.98-.14-.41-.08-1.02.17-1.72l.34-.97-3.77-1.33-.38%2C1.09c-.25.71-.78%2C2.52-.29%2C4.09.46%2C1.57%2C1.84%2C2.87%2C3.78%2C3.55.85.3%2C1.69.45%2C2.47.45s1.56-.16%2C2.19-.48c1.35-.68%2C2.5-2.21%2C3.25-4.33l.25-.71Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M31.94%2C24.23l-12.28%2C19.87%2C3.79%2C1.33%2C2.54-4.09%2C3.13%2C1.1-.58%2C4.78%2C3.79%2C1.33%2C2.87-23.18-3.26-1.15ZM30.6%2C33.06l-.8%2C5.75-2.14-.75%2C2.94-5Z%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2241.65%2027.65%2034.07%2049.17%2044.12%2052.71%2045.4%2049.08%2039.12%2046.88%2045.42%2028.98%2041.65%2027.65%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2252.51%2045.39%2057.66%2047.2%2058.88%2043.72%2053.74%2041.91%2055.59%2036.63%2061.42%2038.68%2062.7%2035.06%2053.09%2031.68%2045.52%2053.2%2055.21%2056.61%2056.49%2052.99%2050.57%2050.9%2052.51%2045.39%22%2F%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2262.84%2053.48%2069.31%2037.38%2064.91%2035.84%2059.69%2052.37%2062.84%2053.48%22%2F%3E%20%3Crect%20class%3D%22cls-1%22%20x%3D%2258%22%20y%3D%2253.91%22%20width%3D%224.31%22%20height%3D%224.31%22%20transform%3D%22translate(-12.7%2094.2)%20rotate(-70.61)%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: contain;
}

.hero-card[data-icon="new"]::before {
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2078.5%2078.5%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20%7D%20.cls-2%20%7B%20fill%3A%20%23f15a24%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cg%3E%20%3Cpolygon%20class%3D%22cls-2%22%20points%3D%2275.63%2024.53%2072.13%2027.69%2076.84%2027.95%2073.06%2030.77%2077.72%2031.46%2073.7%2033.93%2078.28%2035.05%2074.04%2037.13%2078.5%2038.67%2074.09%2040.34%2078.39%2042.29%2073.84%2043.55%2077.94%2045.89%2073.29%2046.73%2077.15%2049.43%2072.45%2049.83%2076.05%2052.89%2071.34%2052.85%2074.64%2056.22%2069.94%2055.76%2072.92%2059.41%2068.29%2058.52%2070.92%2062.44%2066.39%2061.12%2068.65%2065.26%2064.26%2063.53%2066.13%2067.86%2061.92%2065.73%2063.37%2070.22%2059.38%2067.71%2060.41%2072.31%2056.66%2069.44%2057.26%2074.12%2053.8%2070.92%2053.97%2075.63%2050.81%2072.13%2050.55%2076.84%2047.73%2073.06%2047.04%2077.72%2044.58%2073.7%2043.45%2078.28%2041.38%2074.04%2039.83%2078.5%2038.16%2074.09%2036.21%2078.39%2034.95%2073.84%2032.61%2077.94%2031.78%2073.29%2029.07%2077.15%2028.67%2072.45%2025.62%2076.05%2025.65%2071.34%2022.28%2074.64%2022.74%2069.94%2019.09%2072.92%2019.98%2068.29%2016.07%2070.92%2017.38%2066.39%2013.24%2068.65%2014.97%2064.26%2010.64%2066.13%2012.77%2061.92%208.28%2063.37%2010.79%2059.38%206.19%2060.41%209.06%2056.66%204.38%2057.26%207.58%2053.8%202.87%2053.97%206.38%2050.81%201.67%2050.55%205.44%2047.73%20.78%2047.04%204.8%2044.58%20.22%2043.45%204.46%2041.38%200%2039.83%204.41%2038.16%20.12%2036.21%204.66%2034.95%20.57%2032.61%205.21%2031.78%201.35%2029.07%206.05%2028.67%202.45%2025.62%207.17%2025.65%203.86%2022.28%208.56%2022.74%205.58%2019.09%2010.21%2019.98%207.58%2016.07%2012.11%2017.38%209.85%2013.24%2014.24%2014.97%2012.38%2010.64%2016.59%2012.77%2015.13%208.28%2019.12%2010.79%2018.09%206.19%2021.84%209.06%2021.24%204.38%2024.7%207.58%2024.53%202.87%2027.69%206.38%2027.95%201.67%2030.77%205.44%2031.46%20.78%2033.93%204.8%2035.05%20.22%2037.13%204.46%2038.67%200%2040.34%204.41%2042.29%20.12%2043.55%204.66%2045.89%20.57%2046.73%205.21%2049.43%201.35%2049.83%206.05%2052.89%202.45%2052.85%207.17%2056.22%203.86%2055.76%208.56%2059.41%205.58%2058.52%2010.21%2062.44%207.58%2061.12%2012.11%2065.26%209.85%2063.53%2014.24%2067.86%2012.38%2065.73%2016.59%2070.22%2015.13%2067.71%2019.12%2072.31%2018.09%2069.44%2021.84%2074.12%2021.24%2070.92%2024.7%2075.63%2024.53%22%2F%3E%20%3Cg%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10.45%2C43.51l10.45-25.96%2C3.57%2C1.44-.68%2C17.9.07.03%2C6.3-15.64%2C3.72%2C1.5-10.45%2C25.95-3.5-1.41.59-17.89-.07-.03-6.28%2C15.6-3.72-1.5Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M25.7%2C49.65l10.45-25.95%2C11.08%2C4.46-1.41%2C3.5-7.36-2.96-3.07%2C7.62%2C6.42%2C2.58-1.41%2C3.5-6.42-2.58-3.07%2C7.62%2C7.36%2C2.96-1.5%2C3.72-11.08-4.46Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M68.84%2C36.86l-14.31%2C24.4-3.5-1.41%2C3.94-17.99-.07-.03-9.59%2C15.71-3.5-1.41%2C6.58-27.51%2C3.94%2C1.58-4.77%2C17.22.07.03%2C9.55-15.3%2C2.84%2C1.14-3.77%2C18.1.07.03%2C8.58-16.16%2C3.94%2C1.58Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: contain;
}

.hero-card__tag {
  display: inline-flex;
  position: absolute;
  top: 17px;
  left: -7px;
  padding: 9px 12px;
  align-items: center;
  line-height: 1;
  background: var(--red);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-size: 16px;

  &::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 5px;
    width: 7px;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: var(--deep_red);
  }
}

.hero-card__header {
  grid-area: header;
  padding: 0 var(--space);
  margin-top: 13px;

  h2 {
    margin: 0;
    padding: 0;
    font-family: "Zen Antique", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }
}

.hero-card__thumb {
  display: flex;
  grid-area: thumb;
  padding: var(--space) var(--space) 0;
  width: 100%;
  height: 260px;
  
  img {
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
  }

  @media screen and (max-width:430px) {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

.hero-card__body {
  display: flex;
  grid-area: body;
  padding: 0 var(--space);
  margin-top: 10px;
}

.hero-card__text {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 10px;
  flex-grow: 1;
}

.hero-card__price {
  height: 100%;
  padding: 0 var(--space) 10px;
  grid-area: price;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
}

.regular-price,
.sales-price {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  line-height: 1;

  .regular {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-size: 10px;
    font-weight: bold;
  }

  .tax {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-size: 10px;
    text-align: right;
    font-weight: bold;
  }

  .price {
    font-size: 40px;
  }

  .yen {
    display: flex;
    padding-bottom: .2em;
    grid-area: yen;
    align-items: flex-end;
    font-size: 22px;
  }
}

.regular-price {
  padding-bottom: 4px;
  .regular {
    grid-column: 1 / 2;
    font-size: 10px;
  }

  .tax {
    grid-column: 2 / 3;
    font-size: 9px;
  }

  .price {
    grid-column: 1 / 3;
    text-decoration: line-through;
    color: #000;
    font-size: 22px;
  }

  .yen {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

.sales-price {
  margin-left: 15px;
  color: var(--red);

  .price {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding-bottom: 2px;
  }

  .tax {
    display: flex;
    align-items: flex-end;
    grid-column: 2 / 3;
    translate: 0 3px;
  }

  .yen {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

.hero-card__footer {
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  align-self: flex-end;
  transition: opacity 0.3s ease-in-out;
  
  .hero-card__button {
    padding: 15px 0;
    display: block;
    font-size: 20px;
    color: #fff;
    background: var(--red);
    text-align: center;
  }

  span {
    position: relative;
    display: inline-flex;
    align-items: center;

    &::after {
      content: "";
      display: inline-block;
      margin-left: 8px;
      width: 13px;
      height: 14px;
      background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.72%2014.84%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_4%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%204%22%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2213.72%207.42%200%2014.84%209.45%207.42%200%200%2013.72%207.42%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}


/* base.cssのhover打ち消し */
.hero-slider__link {
  .hero-card__header,
  .hero-card__body,
  .regular-price {
    color: var(--text-color) !important;
  }
}

@media screen and (min-width:768.002px) {
  .hero-slider__link:hover{
    .hero-card__footer {
      opacity: 0.7;
    }
  }
}