/*
A modern CSS reset 2023 / 9 / 18
https://github.com/Andy-set-studio/modern-css-reset
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/**  base  **/
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes clipPath {
  100% {
    clip-path: inset(0);
  }
}
@keyframes clipPathCircle {
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}
p,
ul,
ol,
h1,
h2,
h3,
figure,
dl,
dd,
button {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

ul,
ol {
  list-style: none;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
  line-height: 1;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
}

a {
  color: currentColor;
  text-decoration: none;
}
@media (hover: hover) {
  a {
    transition: opacity 0.15s ease 0s;
  }
  a:hover {
    opacity: 0.5;
  }
}

[x-cloak],
[v-cloak] {
  display: none !important;
}

*:focus {
  outline: none;
}

@media (min-width: 600px) {
  .device-sp {
    display: none;
  }
}

.device-pc {
  display: none;
}
@media (min-width: 600px) {
  .device-pc {
    display: block;
  }
}

html {
  scroll-behavior: smooth;
}

body.scroll_rock {
  overflow: hidden;
}

:root {
  --body-text-color: #2d2d2d;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-text-green: #80BA5E;
  --color-text-gray: #767676;
  --color-product-bg: #A4D773;
  --color-product-bespoke-bg: #9F9F9F;
  --color-credit-bg: #FCFFD7;
  --color-footer-bg: #80BA5E;
  --font-body-xs: 0.625rem;
  --font-body-sm: 0.8125rem;
  --font-body-md: 0.875rem;
  --font-body-lg: 0.9375rem;
  --font-body-xl: 1rem;
  --font-title-lg: 0.9375rem;
  --font-title-xl: 1rem;
  --font-title-xxl: 1.125rem;
}
@media (min-width: 768px) {
  :root {
    --font-body-sm: 0.875rem;
    --font-body-md: 0.9375rem;
    --font-body-lg: 0.875rem;
    --font-body-xl: 1.125rem;
    --font-title-lg: 1.25rem;
    --font-title-xxl: 1.375rem;
  }
}

html {
  font-size: 100%;
}

body {
  color: var(--body-text-color);
  font-family: "Koburina Gothic W3 JIS2004";
  font-size: 16px;
  font-size: 1rem;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Koburina Gothic W6 JIS2004";
}

main img {
  width: 100%;
  height: auto;
}

.footer {
  --footer-pad: 38px 20px 34px;
  --footer-font-standard: 0.8125rem;
  --footer-font-small: 0.625rem;
  --footer-store-m: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 42px;
  padding: var(--footer-pad);
  color: var(--color-white);
  background-color: var(--color-footer-bg);
}
.footer_share, .footer_hobo {
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--footer-font-standard);
}
.footer_share svg, .footer_hobo svg {
  fill: currentColor;
}
.footer_share {
  display: grid;
  grid-template-columns: 43.82px auto;
  gap: 47.18px;
  width: 266px;
}
.footer_share__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43.82px;
  height: 34.3px;
  border-top: solid 1.42px var(--color-white);
  border-bottom: solid 1.42px var(--color-white);
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.75px;
}
.footer_share ul {
  justify-content: space-between;
}
.footer_hobo {
  letter-spacing: 1.3px;
}
.footer_hobo ul {
  gap: 24px;
}
.footer_hobo a {
  display: flex;
  align-items: center;
  gap: 9.24px;
}
.footer ul {
  display: flex;
  align-items: center;
  flex-flow: wrap;
}
.footer_store {
  margin: var(--footer-store-m);
  font-size: var(--footer-font-small);
  letter-spacing: 1px;
}
.footer_store ul {
  justify-content: center;
  gap: 14px 20px;
  line-height: 1;
}
.footer_store, .footer_copy {
  width: 100%;
}
@media (min-width: 768px) {
  .footer {
    --footer-pad: 62px 20px 51px;
    --footer-store-m: 0 0 20px;
  }
}

.header {
  --header-pad: 0;
  position: fixed;
  z-index: 50;
  top: 0;
  width: 100%;
  height: 0;
  padding: var(--header-pad);
}
.header .gnav_ico {
  margin-left: auto;
}
@media (min-width: 768px) {
  .header {
    --header-pad: 0 calc((100% - 754px) / 2);
  }
}

.gnav_ico {
  --burger-w: 64px;
  --burger-h: 56px;
  --burger-in: 26px;
  --burger-pad: 19px;
  --burger-pos-x: 0;
  --burger-pos-y: 8px;
  --b-s: 50%;
  --b-e: calc(50% + 1px);
  --b-c: #2B2B2A;
  --b-t: .13s;
  --b-a: .1s;
  --border-color: #2B2B2A;
  position: relative;
  top: var(--burger-pos-y);
  right: var(--burger-pos-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--burger-w);
  height: var(--burger-h);
  padding: var(--burger-pad);
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  z-index: 15;
  transition: all var(--b-a) ease;
  background-image: linear-gradient(transparent var(--b-s), var(--b-c) var(--b-s), var(--b-c) var(--b-e), transparent var(--b-e));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--burger-in) 100%;
  transition: background-position 0.5s;
}
.gnav_ico:before, .gnav_ico:after {
  content: "";
  height: 1px;
  width: 100%;
  transform: rotate(0);
  transform-origin: bottom center;
}
.gnav_ico:before {
  padding-bottom: 9px;
  border-top: 1px solid var(--border-color);
  transition: padding-bottom 0.17s 0.13s ease, transform 0.13s ease-in;
}
.gnav_ico:after {
  padding-top: 9px;
  border-bottom: 1px solid var(--border-color);
  transition: padding-top 0.17s ease 0.13s, transform 0.13s ease-in;
}
.gnav_ico:hover:before {
  padding-bottom: 6px;
}
.gnav_ico:hover:after {
  padding-top: 6px;
}
.gnav_ico.on {
  --b-c: transparent;
  --border-color: #808080;
  background-position: center right 16px;
  transition: all var(--b-a) ease;
}
.gnav_ico.on:before {
  padding-bottom: 0;
  transform: rotate(135deg);
  transition: padding-bottom 0.17s ease, transform 0.13s 0.23s ease-out;
}
.gnav_ico.on:after {
  padding-top: 0;
  transform: rotate(45deg);
  transition: padding-top 0.17s ease, transform 0.13s 0.23s ease-out;
}
.is-light .gnav_ico {
  --b-c: #ffffff;
  --border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0);
}
.is-light .gnav_ico.on {
  --b-c: transparent;
  --border-color: #808080;
}
@media (min-width: 768px) {
  .gnav_ico {
    --burger-pos-x: -19px;
    --burger-pos-y: 23px;
  }
}

@keyframes scale-up {
  0% {
    opacity: 0;
    visibility: visible;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.overflow-hidden {
  overflow-y: hidden;
}

#gnav {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  visibility: hidden;
  opacity: 0;
  color: var(--body-text-color);
  letter-spacing: 0.1em;
  text-align: center;
}
#gnav a {
  color: currentColor;
  transition: opacity 0.15s ease 0s;
}

.gnav__overlay {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-color: rgb(255, 255, 255);
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 768px) {
  .gnav__overlay {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.is-active .gnav__overlay {
  animation: fade-in 0.5s forwards ease-out;
}
.is-active #gnav {
  opacity: 1;
  display: block;
  animation: fade-in 0.5s forwards ease-out;
}

.is-closed .gnav__overlay {
  animation: fade-out 0.3s forwards ease-out;
}

.gnav__header {
  --header-h: 80px;
  --header-pad: 16px 0 0 12px;
  --header-logo-w: 218px;
  --header-logo-height: 34px;
  height: var(--header-h);
  padding: var(--header-pad);
}
.gnav__header img {
  width: var(--header-logo-w);
  height: var(--header-logo-h);
}
@media (min-width: 768px) {
  .gnav__header {
    --header-h: 120px;
    --header-pad: 34px calc((100% - 754px) / 2) 0;
    --header-logo-w: 234px;
    --header-logo-h: 36px;
  }
}

.gnav__wrapper {
  height: 100%;
  overflow-y: auto;
}

.gnav__content {
  --nwi-g-col: none;
  --nwi-g-w: 90.3846153846vw;
  --nwi-g-pad: 0 0 40px;
  display: grid;
  grid-template-columns: var(--nwi-g-col);
  width: min(80vw, 900px);
  margin: 0 auto;
  padding: var(--nwi-g-pad);
}
@media (min-width: 768px) {
  .gnav__content {
    --nwi-g-col: 70% 30%;
    --nwi-g-pad: 0;
  }
}

.gnav__lineup {
  --ul-gap: 15px;
  --h4-fs: 0.75rem;
}
.gnav__lineup ul {
  position: relative;
  display: grid;
  gap: var(--ul-gap);
  max-width: 579px;
  letter-spacing: 0.05em;
  text-align: center;
  grid-template-columns: repeat(3, 1fr);
}
.gnav__lineup li {
  visibility: hidden;
  opacity: 1;
}
.gnav__lineup li:nth-of-type(1) {
  animation: scale-up 0.35s 0.15s forwards ease-out;
}
.gnav__lineup li:nth-of-type(2) {
  animation: scale-up 0.35s 0.3s forwards ease-out;
}
.gnav__lineup li:nth-of-type(3) {
  animation: scale-up 0.35s 0.45s forwards ease-out;
}
.gnav__lineup li:nth-of-type(4) {
  animation: scale-up 0.35s 0.6s forwards ease-out;
}
.gnav__lineup li.medium img {
  width: 80%;
}
.gnav__lineup li.pocket img {
  width: 95%;
}
.gnav__lineup li.stationary {
  grid-column: span 3;
}
.gnav__lineup a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
}
.gnav__lineup .img {
  --a-size: 26px;
  --a-x: -15px;
  --a-y: -5px;
  --size: var(--a-size);
  --p-b: var(--a-y);
  --p-r: var(--a-x);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.1));
}
.gnav__lineup .img:after {
  content: "";
  width: var(--size);
  height: var(--size);
  display: block;
  position: absolute;
  bottom: var(--p-b);
  right: var(--p-r);
  border: 1px solid #858585;
  border-radius: 50%;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 26 37" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.515137 0.706787L24.525 18.4941L0.515137 36.2814" stroke="%23858585" stroke-width="1.5"/%3E%3C/svg%3E');
  background-color: rgba(255, 255, 255, 0.7);
  background-size: 35.2112676056% 52.1126760563%;
  background-position: 56% center;
  background-repeat: no-repeat;
  transition: transform 0.1s ease 0s, right 0.1s ease 0s;
  -webkit-transition: transform 0.1s ease 0s, right 0.1s ease 0s;
}
.gnav__lineup h4 {
  min-height: 42px;
  font-size: var(--h4-fs);
  transition: color 0.1s ease 0s;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .gnav__lineup {
    --ul-gap: 45px;
    --h4-fs: 0.9375rem;
    padding: 0 50px 0 0;
    border-right: 1px solid #ccc;
  }
  .gnav__lineup .img {
    --a-size: 50px;
    --a-x: -22px;
    --a-y: -5px;
  }
}

.gnav__links {
  --c-n-pad: 40px 0 0;
  --c-n-fs: 0.875rem;
  --c-n-border: 1px solid #ccc;
  padding: var(--c-n-pad);
  font-family: "Koburina Gothic W6 JIS2004";
  font-size: var(--c-n-fs);
  font-feature-settings: "halt" on;
}
.gnav__links ul {
  position: relative;
}
.gnav__links li {
  text-align: left;
  visibility: hidden;
  opacity: 1;
}
.gnav__links li:nth-of-type(1) {
  animation: slide-in 0.35s 0.1s forwards ease-out;
}
.gnav__links li:nth-of-type(2) {
  animation: slide-in 0.35s 0.2s forwards ease-out;
}
.gnav__links li:nth-of-type(3) {
  animation: slide-in 0.35s 0.3s forwards ease-out;
}
.gnav__links li:nth-of-type(4) {
  animation: slide-in 0.35s 0.4s forwards ease-out;
}
.gnav__links li:nth-of-type(5) {
  animation: slide-in 0.35s 0.5s forwards ease-out;
}
.gnav__links li:nth-of-type(6) {
  animation: slide-in 0.35s 0.6s forwards ease-out;
}
.gnav__links li:nth-of-type(7) {
  animation: slide-in 0.35s 0.7s forwards ease-out;
}
.gnav__links li.gnav__link--cart {
  color: #e60020;
}
.gnav__links li.gnav__link--cart a {
  display: flex;
  gap: 8px;
}
.gnav__links li.gnav__link--cart a:before {
  content: "";
  width: 21px;
  height: 20px;
  display: block;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0 5.5V19L29 25V29H2V32H32L36 3H42V0H33L32 5.5H0ZM11 36.5C11 38.433 9.43311 40 7.5 40C5.56689 40 4 38.433 4 36.5C4 34.567 5.56689 33 7.5 33C9.43311 33 11 34.567 11 36.5ZM25.5 40C27.4331 40 29 38.433 29 36.5C29 34.567 27.4331 33 25.5 33C23.5669 33 22 34.567 22 36.5C22 38.433 23.5669 40 25.5 40Z" fill="%23E60021"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) {
  .gnav__links li.gnav__link--cart {
    margin: 60px 0 30px 0;
  }
}
.gnav__links a {
  display: block;
  padding: 13px 0;
  border-top: var(--c-n-border);
  transition: color 0.1s ease 0s;
}
@media (min-width: 768px) {
  .gnav__links {
    --c-n-pad: 25px 0 25px 50px;
    --c-n-fs: 0.9375rem;
    --c-n-border: none;
  }
  .gnav__links li {
    margin: 0 0 30px 0;
  }
  .gnav__links a {
    padding: 0;
  }
}

.contents {
  --c-pad: 24px 0 46px;
  --t-fs: 1.25rem;
  --t-lh: 43px;
  --t-ls: 1.4px;
  --ul-mt: 10px;
  --ul-g-dir: column;
  --bl-w-min: 84.1346153846vw;
  --bl-w-max: 994px;
  width: min(var(--bl-w-min), var(--bl-w-max));
  padding: var(--c-pad);
}
.contents h2 {
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: var(--t-fs);
  line-height: var(--t-lh);
  letter-spacing: var(--t-ls);
}
.contents ul {
  margin-top: var(--ul-mt);
  display: flex;
  flex-direction: var(--ul-g-dir);
  gap: 15px 34px;
}
.contents img {
  max-width: 402px;
}
@media (min-width: 768px) {
  .contents {
    --c-pad: 43px 0 95px 46px;
    --ul-g-dir: row;
  }
  .contents .layout-3 {
    max-width: 926px;
    display: grid;
    gap: 12px;
    grid-template-columns: 57.4514038877% 41.252699784%;
  }
  .contents .layout-3 img {
    max-width: 100%;
  }
  .contents .layout-3 li:first-of-type {
    grid-row: span 2;
  }
}

.info {
  --info-pad: 50px 7.2115384615vw;
  --info-g-gap: 30px;
  --h3-fs: 1rem;
  --h3-lh: 187.5%;
  --h3-ls: 2.24px;
  --h3-mb: 6px;
  --p-fs: 0.8125rem;
  --p-lh: 176.923%;
  --p-ls: 1.82px;
  display: grid;
  gap: var(--info-g-gap);
  width: 100%;
  padding: var(--info-pad);
  background-color: #FCFFD7;
}
.info h3 {
  margin-bottom: 6px;
  font-size: var(--h3-fs);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
}
.info p {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
  letter-spacing: var(--p-ls);
}
.info small {
  font-size: 0.75rem;
}
.info__link_vendor {
  position: relative;
  display: block;
  max-width: 355px;
}
.info__link_vendor img {
  width: 100%;
  height: auto;
}
.info__link_vendor p {
  position: absolute;
  bottom: 0;
  right: 13.58px;
  font-family: "Koburina Gothic W6 JIS2004";
  color: var(--color-white);
  font-size: 20px;
  line-height: 215%;
  letter-spacing: 0.6px;
}
.info .hb-open-in-new {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.25em;
  padding-bottom: 2px;
  border-bottom: 0.5px solid currentColor;
}
@media (min-width: 768px) {
  .info {
    --info-pad: 70px;
    --info-g-gap: 29px;
    --p-fs: 0.875rem;
    --p-lh: 178.571%;
    --p-ls: 1.4px;
  }
  .info__section {
    width: 338px;
    margin: 0 auto;
  }
  .info--lg .info__section {
    width: 421px;
  }
}

.h1 {
  --header-h: 71px;
  --header-pad: 16px 0 0 12px;
  --header-logo-w: 218px;
  --header-logo-height: 34px;
  width: 100%;
  height: var(--header-h);
  padding: var(--header-pad);
}
.h1 a {
  display: inline-block;
}
.h1 img {
  width: var(--header-logo-w);
  height: var(--header-logo-h);
}
@media (min-width: 768px) {
  .h1 {
    --header-h: 83px;
    --header-pad: 34px calc((100% - 754px) / 2);
    --header-logo-w: 234px;
    --header-logo-h: 36px;
  }
}

@media (min-width: 768px) {
  .h1 {
    --header-pad: 34px calc((100% - 900px) / 2);
  }
  .header {
    --header-pad: 0 calc((100% - 900px) / 2);
  }
  .gnav__header {
    --header-pad: 34px calc((100% - 900px) / 2) 0;
  }
}
.hero {
  --hero-m: 0 0 25px 0;
  --h2-fs: 1.375rem;
  --h2-m: 0 0 15px 0;
  --cont-pad: 20px 20px 30px 20px;
  --p-fs: 0.8125rem;
  position: relative;
  max-width: 900px;
  width: 100%;
  margin: var(--hero-m);
}
.hero__content {
  padding: var(--cont-pad);
  letter-spacing: 0.025em;
  box-sizing: border-box;
  display: block;
  background-color: #fff;
}
.hero h2 {
  margin: var(--h2-m);
  font-size: var(--h2-fs);
}
.hero p {
  font-size: var(--p-fs);
  line-height: 1.8666em;
}
@media (min-width: 768px) {
  .hero {
    --hero-m: 0 0 45px;
    --h2-fs: 1.75rem;
    --h2-m: 0 0 18px 0;
    --cont-pad: 28px 20px;
    --p-fs: 0.9375rem;
  }
  .hero__content {
    position: absolute;
    top: 45px;
    left: 50px;
    width: 355px;
    height: 180px;
  }
}

.goods {
  --g-mar: 0 0 30px 0;
  --g-pad: 0 0 10px 0;
  --h2-mar: 0 0 15px 0;
  --h2-pad: 0 20px;
  --h2-fs: 1.125rem;
  width: min(90.3846153846vw, 900px);
  max-width: 900px;
  margin: var(--g-mar);
  padding: var(--g-pad);
}
.goods h2 {
  margin: var(--h2-mar);
  font-size: var(--h2-fs);
  letter-spacing: 0.025em;
}
@media (min-width: 768px) {
  .goods {
    --g-pad: 0 0 36px 0;
    --h2-mar: 0 0 40px 0;
    --h2-pad: 0;
    --h2-fs: 1.75rem;
  }
  .goods .item-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
  }
}

.item {
  --item-pad: 20px 0;
  --comapy-fs: 0.75rem;
  --h3-fs: 0.9375rem;
  --cart-price-fs: 0.9375rem;
  --pic-mar: 0 0 20px 0;
  --desc-mar: 0 0 30px 0;
  --desc-fs: 0.875rem;
  --cart-btn-max: 280px;
  display: flex;
  flex-direction: column;
  padding: var(--item-pad);
  border-top: 1px solid #ccc;
}
.item .company {
  margin: 5px 0 7px 0;
  font-size: var(--comapy-fs);
}
.item h3 {
  margin: 0 0 10px 0;
  font-size: var(--h3-fs);
  letter-spacing: 0.05em;
  line-height: 1.5em;
  font-feature-settings: "halt" on;
}
.item__price {
  margin: 0 0 25px 0;
  font-size: var(--cart-price-fs);
  letter-spacing: 0.05em;
}
.item .pic {
  text-align: center;
  max-width: 360px;
  margin: var(--pic-mar);
}
.item .desc {
  margin: var(--desc-mar);
  font-size: var(--desc-fs);
  line-height: 1.6428em;
  letter-spacing: 0.025em;
  color: #666;
}
.item br {
  display: none;
}
.item .colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 320px;
}
.item .colors li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.item .colors,
.item .button {
  flex: auto;
}
.item .button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.item h5 {
  margin: 0;
  font-size: 0.9375rem;
}
.item img {
  width: 100%;
  cursor: pointer;
  transition: opacity 0.1s ease 0s;
  opacity: 1;
}
.item img:hover {
  opacity: 0.7;
}
.item .s {
  font-size: 12px;
}
.item .cart_btn {
  max-width: var(--cart-btn-max);
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  display: block;
  background-color: #CD131C;
  border-radius: 35px;
  transition: all 0.1s ease 0s;
}
.item .colors .cart_btn {
  display: block;
  width: 70px;
  height: 35px;
  font-size: 0;
  text-indent: -9999em;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0 5.5V19L29 25V29H2V32H32L36 3H42V0H33L32 5.5H0ZM11 36.5C11 38.433 9.43311 40 7.5 40C5.56689 40 4 38.433 4 36.5C4 34.567 5.56689 33 7.5 33C9.43311 33 11 34.567 11 36.5ZM25.5 40C27.4331 40 29 38.433 29 36.5C29 34.567 27.4331 33 25.5 33C23.5669 33 22 34.567 22 36.5C22 38.433 23.5669 40 25.5 40Z" fill="%23fff"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px;
  border-radius: 35px;
  transition: all 0.1s ease 0s;
}
.item .cart_btn.sold {
  background-color: #808080;
  cursor: default;
  pointer-events: none;
}
.item .sale_before {
  display: block;
  margin-top: 0.5em;
  color: #808080;
  font-size: 0.75rem;
  text-align: left;
  font-feature-settings: "halt" on;
}
.item .sale_before a {
  display: inline;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 768px) {
  .item {
    --item-pad: 35px 0 40px 40px;
    --company-fs: 0.8125rem;
    --h3-fs: 1.25rem;
    --cart-price-fs: 1.125rem;
    --pic-mar: 0 0 25px 0;
    --desc-mar: 0 0 20px 0;
    --cart-btn-max: 200px;
    border-left: 1px solid #ccc;
    border-radius: 5px 0 0 0;
  }
  .item br {
    display: block;
  }
  .item .s {
    font-size: 15px;
  }
  .item .button {
    align-items: flex-start;
  }
}

.modal {
  --wrap-pad: 20px;
  --data-pad: 80px 20px;
  --close-btn: 30px;
  --close-pos: 10px;
  display: none;
  position: fixed;
  z-index: 50;
  inset: 0;
}
.modal-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wrap-pad);
}
.modal-data {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: var(--data-pad);
  background-color: #fff;
}
.modal img {
  max-width: 720px;
}
.modal-close {
  width: var(--close-btn);
  height: var(--close-btn);
  background-image: url(../images/parts_modal_close.png);
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M1.85786 0.443651L1.15076 1.15076L15.2929 15.2929L0.443649 30.1421L1.15076 30.8492L16 16L30.8492 30.8492L31.5563 30.1421L16.7071 15.2929L30.8492 1.15076L30.1421 0.443651L16 14.5858L1.85786 0.443651Z" fill="gray"/%3E%3C/svg>');
  background-repeat: no-repeat;
  background-size: var(--close-btn);
  position: absolute;
  top: var(--close-pos);
  right: var(--close-pos);
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.1s eas;
}
.modal-overlay {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
@media (min-width: 768px) {
  .modal {
    --wrap-pad: 0;
    --data-pad: 40px 80px;
    --close-btn: 42px;
    --close-pos: 20px;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}