/*
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;
  text-wrap: unset;
}

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: #89C49D;
  --color-text-gray: #595959;
  --color-product-bg: #CAE6C3;
  --color-product-bespoke-bg: #9F9F9F;
  --color-credit-bg: #CAE6C3;
  --color-footer-bg: #4C7165;
  --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";
  background-color: var(--body-bg, white);
}

.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";
}

.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;
  }
}

.ff_b {
  font-family: "Koburina Gothic W6 JIS2004";
}

@media screen and (min-width: 641px) {
  br.sp {
    display: none;
  }
  img.sp {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  br {
    display: none;
  }
}
#contents_area a[target=_blank]::after {
  margin: 0 3px 0 1px;
  font-family: "Hobonichi-Icons" !important;
  content: "\e914";
  font-size: 85%;
  position: relative;
  top: -3px;
}

a.ico_none[target=_blank]::after {
  display: none;
}

.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;
}
.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 {
  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: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 {
  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 li.stationary img {
  width: 75%;
}
.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;
}
.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 #5C9E72;
  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="%235C9E72" 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 .img {
  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 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;
  }
}

.h1 {
  --header-h: 71px;
  --header-pad: 16px 0 0 12px;
  --header-logo-w: 218px;
  --header-logo-h: 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;
  }
}

.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: #CAE6C3;
}
.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 p br {
  display: block;
}
.info small {
  font-size: 0.75rem;
}
.info__link_vendor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 0.8125rem;
  width: min(100%, 22.1875rem);
  height: 4.5625rem;
  padding-left: 19.7183098592%;
}
.info__link_vendor::after {
  content: "";
  align-self: flex-end;
  display: block;
  width: 3.4375rem;
  height: 2.875rem;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 55 46" xmlns="http://www.w3.org/2000/svg"><path d="M49.2217 0.0380859L50.3018 1.29883L54.9532 20.6084C55.207 23.2481 54.4325 25.459 52.3799 27.165C51.8507 27.6063 50.5479 28.1156 50.4483 28.6416V46H31.545C31.4823 44.2974 31.6489 42.3449 31.583 41.5264C31.0838 35.25 23.8333 35.8778 23.209 41.5303C23.0942 42.5682 23.2762 44.4357 23.2774 46H4.41995C4.21687 42.0821 4.87665 37.5606 4.5596 33.7217C4.88257 31.7104 7.97659 32.3088 7.97659 33.4971V45.5498L8.29886 45.8682H19.4532L19.7754 45.5498V40.8984C19.7754 40.5462 20.4859 38.4238 20.6924 37.9951C23.1239 32.8605 30.4263 32.1904 33.6836 36.918C34.0452 37.4407 35.0034 39.7387 35.0039 40.2656V45.3418L35.3272 45.6602H46.6953L47.0186 45.3418V28.8496L47.0098 28.8545L43.042 26.4141C40.301 28.7353 37.3921 29.7242 34.1563 27.5684C33.5842 27.1907 33.2916 26.4019 32.5303 26.3975C29.5569 29.5039 25.4252 29.5039 22.4561 26.3975C21.7248 26.3637 21.4578 27.1351 20.9502 27.4746C18.5663 29.083 15.7604 29.2365 13.3506 27.5645C12.9461 27.2843 12.3694 26.4102 11.9434 26.4102C11.0314 26.9449 10.4847 27.7469 9.45218 28.1924C4.19816 30.4626 -0.586833 25.6836 0.0586251 20.417C0.798828 14.3441 3.79344 7.47775 4.68851 1.29883L5.94534 0L49.2217 0.0380859ZM7.64847 3.79297L3.48734 20.625C2.6917 24.9238 8.24747 27.584 9.91702 22.7334C10.2954 21.6342 10.1492 19.7883 11.7237 19.6396C13.7501 19.4487 13.5612 21.4856 13.9698 22.7334C15.1488 26.3365 19.138 26.1586 20.2998 22.6064C20.7043 21.363 20.4379 19.7203 22.2451 19.6396C24.3062 19.5506 23.9193 21.5204 24.3926 22.8232C25.589 26.1373 29.4053 26.1416 30.6016 22.8232C31.062 21.5416 30.6577 19.7718 32.5381 19.6445C34.5347 19.513 34.2549 21.2739 34.6895 22.6064C35.9417 26.4429 39.8448 26.1078 41.1143 22.4072C41.4155 21.5287 41.2523 19.92 42.625 19.6611C45.0385 19.2033 44.6341 22.2161 45.4688 23.6123C47.7322 27.4106 52.4962 24.1555 51.4678 20.4463L47.3409 3.79297L46.8721 3.19922H8.1182L7.64847 3.79297Z" fill="white" fill-opacity="0.5"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
}
.info__link_vendor {
  font-family: "Koburina Gothic W6 JIS2004";
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: 2.15;
  background-color: #5C9E72;
  border-radius: 1.25rem;
}
.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;
  }
}

.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 {
  width: 100%;
  max-width: 25.125rem;
  height: auto;
}
@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;
  }
}

.borderline {
  --bl-w-min: 84.1346153846vw;
  --bl-w-max: 994px;
  width: min(var(--bl-w-min), var(--bl-w-max));
  border-top: 1px solid #BCBCBC;
}

@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;
  }
}
/*------------------------------------------------------------------------------------------
*
*
    shop_sp.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  /*------------------------------------------------------------------------------------------
  *
  *
      max-width: 640px;
  *
  *
  ------------------------------------------------------------------------------------------ */
  article {
    position: relative;
  }
  section.line:after,
  article.line:after {
    content: "";
    width: 100%;
    display: block;
    border-top: 1px solid #BCBCBC;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  section h2,
  article h2 {
    margin: 0 0 35px 0;
    font-size: 22px;
    letter-spacing: 0.05em;
  }
  article#net h2 {
    font-size: 20px;
    white-space: nowrap;
  }
  .shop_list h3 {
    height: 30px;
    text-align: center;
    padding: 7px 20px;
    margin: 0 0 20px 0;
    font-size: 15px;
    display: inline-block;
    letter-spacing: 0.05em !important;
    color: #fff;
    background-color: #89C49D;
    border-radius: 3px;
    box-sizing: border-box;
    line-height: 1em;
  }
  .shop_list h3.bl {
    display: none !important;
    background: none !important;
  }
  /* --------------------------------------------------
  *
      #sec_title
  *
  -------------------------------------------------- */
  #sec_title {
    margin: 0 0 35px 0;
    padding: 40px 20px 60px 20px;
    position: relative;
    overflow: hidden;
  }
  #sec_title:before {
    content: "";
    width: 100%;
    display: block;
    border-top: 1px solid #BCBCBC;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sec_title ul {
    max-width: 420px;
    margin: 0 auto;
  }
  #sec_title li {
    width: 100%;
    height: 68px;
    margin: 0 0 30px 0;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1;
    display: block;
    letter-spacing: 0.025em;
    border-radius: 3px;
  }
  #sec_title li a {
    width: 100%;
    height: 68px;
    padding: 26px 20px;
    display: block;
    box-sizing: border-box;
    transition: opacity 0.1s ease 0s;
  }
  .is_pc #sec_title li a:hover,
  .is_sp #sec_title li a.touch {
    opacity: 0.7;
    transition: opacity 0.15s ease 0.05s;
  }
  #sec_title li a:after {
    display: none !important;
  }
  #sec_title li span {
    height: 100%;
    display: inline-block;
    position: relative;
  }
  #sec_title li span:after {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background-color: #ffffff;
    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-repeat: no-repeat;
    background-size: 9px;
    background-position: center left 9px;
    background-repeat: no-repeat;
    position: absolute;
    border-radius: 50%;
    top: -3px;
    right: -40px;
  }
  #sec_title li.loft {
    background-color: #facd12;
  }
  #sec_title li.hands {
    background-color: #389155;
    margin: 0;
  }
  #sec_title li.costco {
    background-color: #00468e;
    margin: 30px 0 0 0;
  }
  #sec_title li.costco a {
    color: #FFF;
  }
  #sec_title li.tobichi {
    background-color: #bec8c8;
    margin: 30px 0 0 0;
  }
  #sec_title .notes {
    margin: -20px 0 35px 0;
    color: #666;
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: 1.8666em;
  }
  /* --------------------------------------------------
  *
      .shop_list
  *
  -------------------------------------------------- */
  .shop_list {
    margin: 0 0 40px 0;
    padding: 0 20px 35px 20px;
    overflow: hidden;
  }
  #net.shop_list {
    margin: 0 0 30px 0;
  }
  .shop_list ul {
    max-width: 420px;
    margin: 0 auto 40px auto;
    letter-spacing: -0.4em;
  }
  .shop_list p {
    width: 100%;
    margin: 0 0 15px 0;
    display: block;
    letter-spacing: normal;
    line-height: 1.3em;
  }
  .shop_list p a {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 15px;
    color: #000;
    letter-spacing: 0.025em;
    display: block;
    transition: color 0.1s ease 0s, border 0.1s ease 0s;
  }
  .is_pc .shop_list p a:hover,
  .is_sp .shop_list p a.touch {
    color: #666;
    border-color: #000;
    transition: color 0.15s ease 0.05s, border 0.15s ease 0.05s;
  }
  .shop_list li a:after {
    left: 5px;
  }
  .shop_list li .disabled a {
    color: #000 !important;
    border-color: #ccc !important;
    cursor: default !important;
  }
} /* ----- min-width : 641px ----- */
/*------------------------------------------------------------------------------------------
*
*
    shop_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 641px) {
  /*------------------------------------------------------------------------------------------
  *
  *
      min-width : 641px
  *
  *
  ------------------------------------------------------------------------------------------ */
  #contents_area {
    overflow: hidden;
  }
  article {
    position: relative;
  }
  section.line:after,
  article.line:after {
    content: "";
    width: 100%;
    display: block;
    border-top: 1px solid #BCBCBC;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  section h2,
  article h2 {
    margin: 0 0 65px 0;
    font-size: 28px;
    letter-spacing: 0.05em;
  }
  article h2 {
    margin: 0 0 55px 0;
  }
  .shop_list h3 {
    height: 30px;
    text-align: center;
    padding: 7px 20px;
    margin: 0 0 25px 0;
    font-size: 17px;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0.05em !important;
    color: #fff;
    background-color: #89C49D;
    border-radius: 3px;
    box-sizing: border-box;
  }
  .shop_list h3.bl {
    background: none !important;
  }
  .wrap {
    max-width: 900px;
    margin: 0 auto;
  }
  /* --------------------------------------------------
  *
      #sec_title
  *
  -------------------------------------------------- */
  #sec_title {
    margin: 0 0 65px 0;
    padding: 96px 0 106px 0;
    position: relative;
    overflow: hidden;
  }
  #sec_title:before {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    border-top: 1px solid #BCBCBC;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sec_title ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }
  #sec_title li {
    box-sizing: border-box;
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0.025em;
    border-radius: 3px;
  }
  #sec_title li a {
    padding: 35px 30px;
    display: block;
    box-sizing: border-box;
    transition: opacity 0.1s ease 0s;
  }
  .is_pc #sec_title li a:hover,
  .is_sp #sec_title li a.touch {
    opacity: 0.7;
    transition: opacity 0.15s ease 0.05s;
  }
  #sec_title li a:after {
    display: none !important;
  }
  #sec_title li span {
    height: 100%;
    display: inline-block;
    position: relative;
  }
  #sec_title li span:after {
    content: "";
    width: 35px;
    height: 35px;
    display: block;
    background-color: #ffffff;
    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-repeat: no-repeat;
    background-size: 14px;
    background-position: center left 12px;
    position: absolute;
    border-radius: 50%;
    top: -4px;
    right: -55px;
  }
  #sec_title li.loft {
    background-color: #facd12;
  }
  #sec_title li.hands {
    background-color: #389155;
    margin: 0;
  }
  #sec_title li.costco {
    background-color: #00468e;
  }
  #sec_title li.costco a {
    color: #FFF;
  }
  #sec_title li.tobichi {
    background-color: #bec8c8;
  }
  #sec_title .notes {
    margin: -40px 0 45px 0;
    color: #666;
    font-size: 13px;
    letter-spacing: 0.025em;
    line-height: 1.8666em;
  }
  /* --------------------------------------------------
  *
      .shop_list
  *
  -------------------------------------------------- */
  .shop_list {
    margin: 0 0 65px 0;
    padding: 0 0 76px 0;
  }
  #net.shop_list {
    margin: 0 0 30px 0;
  }
  .shop_list ul {
    margin: 0 0 30px 0;
    letter-spacing: -0.4em;
  }
  #net.shop_list ul {
    margin: 0;
  }
  .shop_list p {
    margin: 0 45px 25px 0;
    display: inline-block;
    letter-spacing: normal;
    line-height: 1.6em;
  }
  .shop_list li a {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    color: #000;
    letter-spacing: 0.025em;
    display: block;
    transition: color 0.1s ease 0s, border 0.1s ease 0s;
  }
  .is_pc .shop_list p a:hover,
  .is_sp .shop_list p a.touch {
    color: #666;
    border-color: #000;
    transition: color 0.15s ease 0.05s, border 0.15s ease 0.05s;
  }
  .shop_list li p:after {
    left: 5px;
  }
  .shop_list li .disabled a {
    color: #000 !important;
    border-color: #ccc !important;
    cursor: default !important;
  }
} /* ----- min-width : 641px ----- */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}