/*
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;
  }
}

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

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

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

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

.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: #A4D773;
    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: #A4D773;
    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;
}