@charset "UTF-8";

/*====================================================================================
 top.css
====================================================================================*/

/* -----------------------------------------------------------
   p-hero
   ----------------------------------------------------------- */
.p-hero {
  position: relative;

  --p-hero-gap: 16px;
  --p-hero-slide-width: clamp(280px, 42vw, 640px);
  --p-hero-slide-ratio: 4 / 3;
}

/* --- Swiper --- */
.p-hero-slider {
  --swiper-wrapper-transition-timing-function: linear;

  overflow: hidden;
  pointer-events: none;
}

.p-hero__track {
  transition-timing-function: linear !important;
}

.p-hero__img.swiper-slide {
  overflow: hidden;
  inline-size: var(--p-hero-slide-width);
  aspect-ratio: var(--p-hero-slide-ratio);
  block-size: auto;
  border-radius: var(--radius-lg);

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
}

/* --- Content --- */
.p-hero__container {
  z-index: 101;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-block-start: -1em;
}

.p-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-size: var(--typography-hero-font-size);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-base);

  & span {
    position: relative;
    display: block;
    inline-size: fit-content;
    color: var(--brand-default);
    white-space: nowrap;

    &::before {
      content: attr(data-text);
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      color: var(--brand-on-brand);
      -webkit-text-stroke: 2px currentColor;
    }
  }
}

.p-hero__text {
  margin-block-start: 1em;
  color: var(--text-secondary);
  letter-spacing: var(--letter-spacing-base);
}

@media (width >= 576px) {
  .p-hero {
    --p-hero-slide-width: clamp(360px, 75vw, 640px);
  }
}
@media (width >= 768px) {
  .p-hero {
    --p-hero-slide-width: 640px;

    min-block-size: 640px;
  }

  .p-hero__container {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-end;
    margin-block-start: -2em;
  }

  .p-hero__text {
    font-weight: var(--font-weight-bold);
  }
}


/* -----------------------------------------------------------
   p-itsumono
   ----------------------------------------------------------- */

.p-itsumono {
  padding-block: var(--layout-section-spacing-y-compact);
}

.p-itsumono__container {
  display: flex;
  flex-direction: column;
}

.p-itsumono__media {
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  aspect-ratio: 658 / 522;
  inline-size: 100%;
  max-width: 658px;
  gap: 2.432%;

  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 10.5%;
    block-size: auto;
    aspect-ratio: 1 / 1;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2269%22%20height%3D%2269%22%20viewBox%3D%220%200%2069%2069%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20opacity%3D%220.96%22%20d%3D%22M22.2821%2068.4871V46.205H0V22.282H22.2821V0H46.205V22.282H68.4871V46.205H46.205V68.4871H22.2821Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
  }
}

.p-itsumono__figure {
  container-type: inline-size;
  overflow: hidden;
  position: relative;
  inline-size: 100%;
  aspect-ratio: 2 / 3;

  &:first-child {
    border-start-start-radius: 5%;
    margin-block: 0 auto;
  }

  &:last-child {
    border-bottom-right-radius: 5%;
    margin-block: auto 0;
  }
}

.p-itsumono__figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .25em;
  text-align: center;

  color: var(--brand-on-brand);
  text-shadow: 0 0 24px var(--brand-text, #C04E10);
  font-size: min(var(--typography-hero-font-size), 15cqi);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-base);

  & .__min {
    font-size: .75em;
  }

  .p-itsumono__figure:first-child & {
    padding-block-end: .75em;
  }
}


@media (width < 768px) {
  .p-itsumono__body {
    display: contents;
  }

  :where(.p-itsumono__container) .c-title--bullet {
    order: 1;
  }

  :where(.p-itsumono__container) .c-paragraph {
    order: 3;
  }

  :where(.p-itsumono__container) .c-btn__wrap {
    order: 4;
  }

  .p-itsumono__media {
    order: 2;
    margin-block-start: 1em;
  }
}

@media (width >= 768px) {

  .p-itsumono {
    position: relative;

    &::before {
      content: "";
      opacity: 0.5;
      pointer-events: none;
      position: absolute;
      top: -25%;
      margin: auto;
      display: block;
      inline-size: 100%;
      block-size: 300%;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221921%22%20height%3D%22961%22%20viewBox%3D%220%200%201921%20961%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1750%20141.4V127.064H1735.57V111.518H1750V97.0955H1765.54V111.518H1779.88V127.064H1765.54V141.4H1750Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1594.97%20140.105V126.546H1581.5V111.95H1594.97V98.3909H1609.57V111.95H1623.13V126.546H1609.57V140.105H1594.97Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1493.9%20101.582V83.7913H1476.2V64.7047H1493.9V47H1512.99V64.7047H1530.78V83.7913H1512.99V101.582H1493.9Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M172.232%20494.237V452.005H130V406.491H172.232V364.259H217.746V406.491H259.979V452.005H217.746V494.237H172.232Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M610.579%20179.396V172.832H604.016V165.75H610.579V159.187H617.661V165.75H624.225V172.832H617.661V179.396H610.579Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M358.318%20120.155V119.55H357.714V118.946H358.318V118.341H358.923V118.946H359.527V119.55H358.923V120.155H358.318Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1827.98%20296.079V282.175H1814.17V267.234H1827.98V253.415H1842.92V267.234H1856.83V282.175H1842.92V296.079H1827.98Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1514.83%20302.47V284.42H1496.86V264.988H1514.83V247.024H1534.26V264.988H1552.31V284.42H1534.26V302.47H1514.83Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M899.133%20285.025V278.375H892.396V271.12H899.133V264.384H906.388V271.12H913.038V278.375H906.388V285.025H899.133Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M631.314%20764.956V741.596H607.896V716.375H631.314V692.956H656.535V716.375H679.896V741.596H656.535V764.956H631.314Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M716.287%20333.507V314.766H697.546V294.643H716.287V275.902H736.41V294.643H755.151V314.766H736.41V333.507H716.287Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M280.59%20275.697V275.093H279.899V274.402H280.59V273.711H281.281V274.402H281.886V275.093H281.281V275.697H280.59Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M802.614%20387.113V382.622H798.037V377.785H802.614V373.208H807.451V377.785H811.942V382.622H807.451V387.113H802.614Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M456.554%20518.753V513.14H451.026V507.181H456.554V501.653H462.513V507.181H468.127V513.14H462.513V518.753H456.554Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1805.62%20671.074V615.542H1750.08V555.777H1805.62V500.245H1865.38V555.777H1920.91V615.542H1865.38V671.074H1805.62Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.1%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1671.23%20610.705V594.383H1655V576.851H1671.23V560.614H1688.76V576.851H1705.09V594.383H1688.76V610.705H1671.23Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1594.54%20763.225V748.802H1580.2V733.343H1594.54V719.007H1610V733.343H1624.42V748.802H1610V763.225H1594.54Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1657.67%20960.482V918.94H1616.13V874.203H1657.67V832.662H1702.41V874.203H1743.95V918.94H1702.41V960.482H1657.67Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: 1920px 960px;
      background-position: center top;
    }
  }

  .p-itsumono__container {
    position: relative;
    display: block;
    padding-inline-end: calc((var(--l-container-max) * 0.5) + var(--space-4));
  }

  .p-itsumono__body {
    inline-size: 100%;
    min-block-size: 32em;
    padding-block-start: var(--layout-section-spacing-y);
  }

  .p-itsumono__media {
    position: absolute;
    top: 0;
    left: calc(50% + var(--space-4));
    right: var(--space-4);
    inline-size: 48vw;
    min-inline-size: 536px;
  }
}

/* -----------------------------------------------------------
   p-news
   ----------------------------------------------------------- */

.p-news {
  padding-block: var(--layout-section-spacing-y-compact);

  & .c-btn__wrap {
    margin-block-start: 2em;
  }
}

.p-news__list {
  display: grid;
  gap: var(--space-3);
}

.p-news__link {
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
}

.p-news__date {
  font-family: var(--typo-font-family-en);
  font-weight: var(--font-weight-bold);
  color: var(--brand-default);
}

.p-news__text {
  text-decoration: underline;
}

@media (width < 768px) {
  .p-news__container {
    display: flex;
    flex-direction: column;

    & .p-news__title {
      order: 1;
    }

    & .c-btn__wrap {
      order: 3;
    }

    & .p-news__list {
      order: 2;
      margin-block-start: 1.5em;
    }
  }

  .p-news__head {
    display: contents;
  }

  .p-news__item {
    padding-block-end: 1em;
    border-block-end: 1px solid var(--border-default);
  }
}

@media (width >= 768px) {
  .p-news {
    position: relative;

    &::before {
      content: "";
      z-index: -1;
      pointer-events: none;
      display: block;
      opacity: .5;
      position: absolute;
      top: -25%;
      inline-size: 100%;
      block-size: 300%;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%223249%22%20height%3D%221004%22%20viewBox%3D%220%200%203249%201004%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1849.61%20269.506V266.138H1846.33V262.597H1849.61V259.315H1853.15V262.597H1856.52V266.138H1853.15V269.506H1849.61Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M2358.1%20322.173V307.923H2343.85V292.636H2358.1V278.386H2373.39V292.636H2387.64V307.923H2373.39V322.173H2358.1Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.75%22%2F%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M3211.04%20373.675V355.538H3192.82V336.02H3211.04V317.797H3230.56V336.02H3248.7V355.538H3230.56V373.675H3211.04Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M3048.33%20504.229V472.706H3016.81V438.765H3048.33V407.242H3082.27V438.765H3113.79V472.706H3082.27V504.229H3048.33Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M2736.21%20297.857V264.002H2702.27V227.47H2736.21V193.615H2772.65V227.47H2806.51V264.002H2772.65V297.857H2736.21Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M2596.64%20462.343V458.024H2592.32V453.447H2596.64V449.129H2601.31V453.447H2605.54V458.024H2601.31V462.343H2596.64Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1913.5%20176.055V138.054H1875.41V97.1175H1913.5V59.0308H1954.43V97.1175H1992.44V138.054H1954.43V176.055H1913.5Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M351.317%200V34.0276H385.344V70.7326H351.317V104.847H314.612V70.7326H280.584V34.0276H314.612V0H351.317Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M375.252%20461.277V501.005H414.979V543.842H375.252V583.569H332.501V543.842H292.773V501.005H332.501V461.277H375.252Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1764.08%20299.251V322.687H1787.46V347.873H1764.08V371.251H1738.84V347.873H1715.46V322.687H1738.84V299.251H1764.08Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.8%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M1636.26%201000.87V1001.9H1637.21V1002.94H1636.26V1003.89H1635.14V1002.94H1634.19V1001.9H1635.14V1000.87H1636.26Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M1714.08%20845.24V846.363H1715.2V847.572H1714.08V848.695H1712.87V847.572H1711.75V846.363H1712.87V845.24H1714.08Z%22%20fill%3D%22%23FFA500%22%2F%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M560.247%20655.065V678.729H583.911V704.207H560.247V727.957H534.769V704.207H511.105V678.729H534.769V655.065H560.247Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M645.834%20477.068V515.414H684.18V556.696H645.834V594.955H604.638V556.696H566.292V515.414H604.638V477.068H645.834Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M109.51%2069.5023V122.185H162.279V179.013H109.51V231.695H52.7688V179.013H0V122.185H52.7688V69.5023H109.51Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M399.695%20178.749V192.912H413.859V208.199H399.695V222.449H384.409V208.199H370.245V192.912H384.409V178.749H399.695Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M550.229%20372.74V377.835H555.324V383.362H550.229V388.458H544.788V383.362H539.692V377.835H544.788V372.74H550.229Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M706.548%20370.408V376.971H713.198V384.14H706.548V390.79H699.38V384.14H692.729V376.971H699.38V370.408H706.548Z%22%20fill%3D%22%23FFA500%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: 3840px 1280px;
      background-position: center top;
    }
  }

  .p-news__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .p-news__head {
    flex-shrink: 0;
  }

  .p-news__list {
    flex-shrink: 0;
    inline-size: 50em;
  }

  .p-news__link {
    display: grid;
    grid-template-columns: 8em 1fr;
    gap: var(--space-2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .p-news__text {
    transition: .3s ease;

    .p-news__link:hover & {
      text-decoration: none;
    }
  }
}


/* -----------------------------------------------------------
   p-products
   ----------------------------------------------------------- */

.p-products {
  padding-block: var(--layout-section-spacing-y-compact) var(--layout-section-spacing-y);
}

.p-products__list {
  display: grid;
  margin-block-start: var(--space-8);
  gap: var(--space-4);
}

.p-products__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-lg);
  text-decoration: none;

  &.p-products--cold {
    background-color: rgba(31, 52, 112, 0.1);
  }

  &.p-products--hot {
    background-color: rgba(193, 78, 16, 0.1);
  }
}

.p-products__img {
  position: relative;
  overflow: hidden;
  margin-block-start: auto;
  border-radius: var(--radius-lg);

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    mix-blend-mode: soft-light;
  }

  .p-products--cold &::after {
    background-image: var(--grad-ice);
  }

  .p-products--hot &::after {
    background-image: var(--grad-hot);
  }
}

.p-products__content {
  padding: var(--space-4);
}

.p-products__tag {
  display: block;
  inline-size: fit-content;
  padding-inline: 1em;
  border-radius: var(--radius-full);
  border: 2px solid currentColors;
  font-weight: var(--font-weight-bold);
  color: var(--border-sub);

  .p-products--cold & {
    background-color: var(--status-info-text);
  }

  .p-products--hot & {
    background-color: var(--brand-default);
  }
}

.p-products__title {
  font-size: var(--typography-heading-font-size);
  font-weight: var(--typography-heading-font-weight);
  line-height: var(--typography-heading-line-height);
  letter-spacing: var(--letter-spacing-base);

  .p-products--cold & {
    color: var(--secondary-text);
  }

  .p-products--hot & {
    color: var(--brand-text)
  }
}

.p-products__text {
  font-size: var(typography-body-font-size);
}

@media (width < 768px) {
  .p-products__tag {
    font-size: min(var(--font-size-base), 3.75vw);
  }
}

@media (width >= 768px) {
  .p-products__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .p-products__lead {
    margin-block-end: 1.5em;
  }

  .p-products__list {
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: var(--space-4);
  }

  .p-products__content {
    margin-block-start: var(--space-4);
    padding: var(--space-8);
  }

  .p-products__item {
    position: relative;
    z-index: 1;

    &::after {
      content: "";
      opacity: .5;
      pointer-events: none;
      position: absolute;
      display: block;
      inline-size: 50vw;
      block-size: 200%;
      margin: auto;
    }

    &.p-products--cold::after {
      right: 0;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22590%22%20height%3D%22684%22%20viewBox%3D%220%200%20590%20684%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M244.599%20485.731V499.118H257.986V513.541H244.599V526.927H230.177V513.541H216.79V499.118H230.177V485.731H244.599Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.5%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M440.659%20470.731V495.259H465.186V521.686H440.659V546.127H414.318V521.686H389.79V495.259H414.318V470.731H440.659Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M402.89%20194.731V203.022H411.095V211.831H402.89V220.036H393.995V211.831H385.79V203.022H393.995V194.731H402.89Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.7%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M44.9959%20310.654V332.332H66.587V355.65H44.9959V377.328H21.6775V355.65H0V332.332H21.6775V310.654H44.9959Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M115.529%20644.559V657.168H128.139V670.728H115.529V683.337H101.97V670.728H89.3608V657.168H101.97V644.559H115.529Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M579.998%200V9.06828H589.152V18.9139H579.998V27.9821H570.238V18.9139H561.084V9.06828H570.238V0H579.998Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M243.569%2051.1941V55.9441H248.319V61.126H243.569V65.8761H238.474V61.126H233.724V55.9441H238.474V51.1941H243.569Z%22%20fill%3D%22%2360A5FA%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: 590px 684px;
      background-position: right 10% top 10%;
    }

    &.p-products--hot::after {
      left: 0;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22920%22%20height%3D%22708%22%20viewBox%3D%220%200%20920%20708%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M341.509%200V13.3001H354.895V27.723H341.509V41.1095H327.086V27.723H313.699V13.3001H327.086V0H341.509Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.9%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M353.337%20450.364V457.014H359.987V464.096H353.337V470.746H346.169V464.096H339.519V457.014H346.169V450.364H353.337Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M256.838%20227.382V261.064H290.52V297.338H256.838V330.933H220.651V297.338H186.969V261.064H220.651V227.382H256.838Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.5%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M766.021%20625.724V652.238H792.449V680.738H766.021V707.166H737.435V680.738H711.007V652.238H737.435V625.724H766.021Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M911.546%20654.052V662.084H919.664V670.806H911.546V678.925H902.823V670.806H894.705V662.084H902.823V654.052H911.546Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.25%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M576.438%20480.382V526.76H622.903V576.765H576.438V623.229H526.433V576.765H479.969V526.76H526.433V480.382H576.438Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M124.607%20254.63V267.93H137.907V282.267H124.607V295.48H110.356V282.267H97.0562V267.93H110.356V254.63H124.607Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M7.60012%20488.573V492.2H11.3137V496.173H7.60012V499.8H3.71372V496.173H0V492.2H3.71372V488.573H7.60012Z%22%20fill%3D%22%23FFA500%22%2F%3E%3Cg%20opacity%3D%220.8%22%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M72.8838%2079.0906V82.3725H76.2519V85.9997H72.8838V89.2816H69.3427V85.9997H65.9746V82.3725H69.3427V79.0906H72.8838Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: 920px 708px;
      background-position: left 15% top 10%;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .p-products__item:hover img {
    transform: scale(1.05);
  }
}


/* -----------------------------------------------------------
   p-overseas
   ----------------------------------------------------------- */

.p-overseas {
  overflow: hidden;
  position: relative;
}

.p-overseas__container {
  z-index: 11;
  position: relative;
}

@media (width < 768px) {
  .p-overseas {
    padding-block-end: var(--layout-section-spacing-y);
  }

  .p-overseas__text::before {
    content: "";
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-block: var(--l-container-padding);
    border-radius: var(--radius-xl);
    background-image: url('../images/overseas-bg.webp');
    background-size: 150% auto;
    background-position: left top;
    mix-blend-mode: difference;
    background-color:   var(--color-neutral-900);

  }
}

@media (width >= 768px) {
  .p-overseas {
    overflow: hidden;
    position: relative;
    margin-block-start: var(--l-container-padding);
    margin-inline:      var(--l-container-padding);
    border-radius:      var(--radius-xl);
    background-color:   var(--color-neutral-900);

    &::before,
    &::after {
      content: "";
      display: block;
      pointer-events: none;
      position: absolute;
      inset: 0;
      margin: auto;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      inline-size:  100%;
      block-size: 100%;
    }
    &::before {
      z-index: 2;
      overflow: hidden;
      background-image: url('../images/overseas-bg.webp');
      background-size: cover;
      background-position: left top;
      mix-blend-mode: difference;
    }
    &::after {
      z-index: 3;
      background-image: linear-gradient(90deg, rgba(242, 240, 238, 0.00) 25%, rgba(242, 240, 238, 0.90) 50.19%, #F2F0EE 100%);
      background-size: cover;
      background-position: right center;
    }
  }

  .p-overseas__container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-block-size: 640px;

    &::after {
      content: "";
      display: block;
      pointer-events: none;
      position: absolute;
      top: 0;
      left:  -40vw;
      right: -60vw;
      margin: auto;
      inline-size: 100vw;
      block-size: 100%;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221334%22%20height%3D%22640%22%20viewBox%3D%220%200%201334%20640%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22mix-blend-mode%3Amultiply%22%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M408.155%2087V118.868H440.024V153.242H408.155V185.11H373.869V153.242H342V118.868H373.869V87H408.155Z%22%20fill%3D%22%23FFA500%22%2F%3E%3Cpath%20opacity%3D%220.25%22%20d%3D%22M1282.58%20289.022V312.402H1306V337.62H1282.58V361H1257.4V337.62H1233.98V312.402H1257.4V289.022H1282.58Z%22%20fill%3D%22%23FFA500%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
      background-size: 1334px 640px;
      background-position: center top;
      mix-blend-mode: multiply;
    }
  }

  .p-overseas__content {
    max-width: 536px;
    padding: var(--space-4);
  }
}