@charset "UTF-8";

/** @format */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  font-size: 0.521vw;

}

@media (max-width: 960px) {

  html {

    font-size: 2.086vw;

  }

}



body {

  font-family: "Noto Sans JP", sans-serif;

  font-size: 16px;

  line-height: 1.6;

  color: #232323;

}



h1, h2, h3, h4, h5, h6 {

  font-weight: 500;

}



.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}



.header {

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 50;

  color: #fff;

  font-family: 'Inter', sans-serif;

  text-transform: uppercase;

  background-color: #fff;

}

.header__top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 1.2rem;

  padding: 0.8rem 5rem 0.5rem 5rem;

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.header__links {

  display: flex;

  gap: 2rem;

}

.header__links a {

  color: #171717;

  text-decoration: none;

  opacity: 0.8;

}

.header__links a:hover {

  opacity: 1;

}

.header__membership {

  color: #171717;

  text-decoration: none;

  opacity: 0.8;

}

.header__membership:hover {

  opacity: 1;

}

.header__inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1.5rem 5rem;

}

.header__inner--top {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  padding-top: 0.9rem;

  padding-bottom: 0.9rem;

  background-color: #1a1a1a;

  font-size: 1.3rem;

  line-height: 110%;

  letter-spacing: .15rem;

  color: #ffffff;

}

.header__nav--left {

  width: 90rem;

}

.header__nav .nav__list {

  display: flex;

  gap: 1.5rem;

}

.header__nav .nav__item a {

  color: #171717;

  font-weight: 600;

  text-decoration: none;

  font-size: 1.3rem;

  letter-spacing: 0.05em;

}

.header__icons {

  display: flex;

  justify-content: flex-end;

  gap: 1.5rem;

  font-size: 0rem;

  vertical-align: top;

  line-height: 100%;

  padding: 1rem 2.5rem;

  background-color: #fff;

  border-radius: 5rem;

}

.header__icons svg {

  width: 3.5rem;

  height: 3.5rem;

}

.header__icons a {

  color: #fff;

  text-decoration: none;

  transition: opacity 0.3s;

}

.header__icons a:hover {

  opacity: 0.7;

}



ul,

ol {

  list-style: none;

}



.icon circle,

.icon ellipse,

.icon g,

.icon line,

.icon path,

.icon polygon,

.icon polyline,

.icon rect {

  fill: inherit;

  stroke: inherit;

}



.header__icons .icon circle,

.header__icons .icon ellipse,

.header__icons .icon g,

.header__icons .icon line,

.header__icons .icon path,

.header__icons .icon polygon,

.header__icons .icon polyline,

.header__icons .icon rect {

  fill: #171717;

  stroke: #171717;

}



body.home header {

  background-color: transparent;

}

body.home .header__links a,

body.home .header__membership,

body.home .header__nav .nav__item a,

body.home .header-cart__count {

  color: #330d01;

  font-weight: 600;

}

body.home .header__top {

  border-bottom: 1px solid rgba(51, 13, 1, 0.3);

}

body.home .header__icons .icon circle,

body.home .header__icons .icon ellipse,

body.home .header__icons .icon g,

body.home .header__icons .icon line,

body.home .header__icons .icon path,

body.home .header__icons .icon polygon,

body.home .header__icons .icon polyline,

body.home .header__icons .icon rect {

  fill: #330d01;

  stroke: #330d01;

}



.u-sp {

  display: none !important;

}



@media (max-width: 960px) {

  .u-sp {

    display: block !important;

  }



  .header__inner {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

  .header__inner--top {

    display: none;

  }

  .header .nav__list, .header__top {

    display: none;

  }

  .header__icons {

    gap: 0.6rem;

  }

  .header__logo {

    width: 45rem;

    height: 6rem;

  }



  .header__inner {

    position: fixed;

    width: 100%;

    left: 0;

    top: 0;

    z-index: 99999;

    transition: ease all 0.35s;

    justify-content: flex-end;

  }

  .header__inner .header__icons {

    transition: ease all 0.35s;

  }

  .header__inner.is-fixed {

    padding-top: 0.8rem;

    padding-bottom: 0.8rem;

    background-color: #273865;

  }

  .header__inner.is-fixed .header__icons {

    background-color: transparent;

    padding-right: 0;

  }

  .header__inner.is-fixed .hamburger__line {

    background-color: #ffffff;

  }

  .header__inner.is-fixed .header__links a,

  .header__inner.is-fixed .header__membership,

  .header__inner.is-fixed .header__nav .nav__item a,

  .header__inner.is-fixed .header-cart__count {

    color: #ffffff;

  }

  .header__inner.is-fixed .header__icons .icon circle,

  .header__inner.is-fixed .header__icons .icon ellipse,

  .header__inner.is-fixed .header__icons .icon g,

  .header__inner.is-fixed .header__icons .icon line,

  .header__inner.is-fixed .header__icons .icon path,

  .header__inner.is-fixed .header__icons .icon polygon,

  .header__inner.is-fixed .header__icons .icon polyline,

  .header__inner.is-fixed .header__icons .icon rect {

    fill: #ffffff;

    stroke: #ffffff;

  }

}

@media (min-width: 960.5px) {

  .header__inner.is-fixed {

    position: fixed;

    width: 100%;

    left: 0;

    top: 0;

    background: rgba(0, 0, 0, 0.7);

  }

  .header__inner.is-fixed .header__icons {

    background-color: transparent;

  }

  .header__inner.is-fixed .header__links a,

  .header__inner.is-fixed .header__membership,

  .header__inner.is-fixed .header__nav .nav__item a,

  .header__inner.is-fixed .header-cart__count {

    color: #ffffff;

  }

  .header__inner.is-fixed .header__icons .icon circle,

  .header__inner.is-fixed .header__icons .icon ellipse,

  .header__inner.is-fixed .header__icons .icon g,

  .header__inner.is-fixed .header__icons .icon line,

  .header__inner.is-fixed .header__icons .icon path,

  .header__inner.is-fixed .header__icons .icon polygon,

  .header__inner.is-fixed .header__icons .icon polyline,

  .header__inner.is-fixed .header__icons .icon rect {

    fill: #ffffff;

    stroke: #ffffff;

  }

}

.sub-banner {

  position: relative;

  width: 100%;

  height: 30rem;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background-color: #e8e6e1;

  padding-top: 13rem;

}

.sub-banner__inner {

  position: relative;

  z-index: 2;

  text-align: center;

  color: #171717;

}

.sub-banner__title {

  font-size: 3rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

}

.sub-banner__subtitle {

  font-size: 1.6rem;

  letter-spacing: 0.1em;

}



.hamburger {

  position: relative;

  width: 3.2rem;

  height: 2.4rem;

  display: inline-flex;

  flex-direction: column;

  justify-content: space-between;

  cursor: pointer;

  background: transparent;

  border: none;

  padding: 0;

  z-index: 100;

  transition: all 0.3s ease;

  top: -7px;

}



.hamburger__line {

  display: block;

  width: 100%;

  height: 2px;

  background-color: #333;

  transition: all 0.3s ease;

}



.hamburger--active {

  z-index: 200;

}

.hamburger--active .hamburger__line {

  background-color: #333 !important;

}



.hamburger--active .hamburger__line:nth-child(1) {

  transform: translateY(8.5px) rotate(45deg);

}



.hamburger--active .hamburger__line:nth-child(2) {

  opacity: 0;

}



.hamburger--active .hamburger__line:nth-child(3) {

  transform: translateY(-8.5px) rotate(-45deg);

}



@media (max-width: 960px) {

  .header__nav .nav__list {

    position: fixed;

    top: 0;

    left: -100%;

    width: 75%;

    height: 100vh;

    background: #fff;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    transition: left 0.4s ease;

    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);

    display: flex !important;

    z-index: 150;

    gap: 0rem;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    padding-top: 8rem;

  }

  .header__nav .nav__list.nav__list--open {

    left: 0;

  }

  .header__nav .nav__item {

    width: 100%;

    padding: 2rem 0;

    display: block;

    border-bottom: 1px dashed #eee;

  }

  .header__nav .nav__item a {

    text-decoration: none;

    color: #333 !important;

    font-size: 1.8rem !important;

    font-weight: 500;

  }



  .nav-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease;

    z-index: 100;

  }



  .nav-overlay.nav-overlay--active {

    opacity: 1;

    visibility: visible;

  }



  body.nav-open {

    overflow: hidden;

  }



  .page-banner {

    position: relative;

    width: 100%;

    height: 22rem;

    overflow: hidden;

    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .page-banner__content {

    position: relative;

    z-index: 2;

    color: #333;

    text-align: center;

    padding: 0 1rem;

  }

  .page-banner__title {

    font-size: 2.5rem;

    color: #333;

    font-weight: 700;

    letter-spacing: .2rem;

    margin-bottom: 0rem;

    line-height: 170%;

  }

  .page-banner__subtitle {

    font-size: 0.9rem;

    letter-spacing: 0.5px;

    opacity: 0.9;

  }

}

.hero {

  position: relative;

  height: 100%;

  overflow: hidden;

}

.hero__image img {

  width: 100%;

  height: 94.3rem;

  object-fit: cover;

  vertical-align: top;

}

.hero__content {

  position: absolute;

  bottom: 10%;

  left: 5%;

  color: #fff;

  max-width: max-content;

  background: rgba(0, 0, 0, 0.2);

  padding: 4rem 5rem 6rem;

}

.hero__title {

  font-size: 9rem;

  text-transform: uppercase;

  margin-bottom: 0rem;

  line-height: 115%;

  color: #fff;

  font-family: "Rampart One", sans-serif;

}

.hero__text {

  font-size: 3.5rem;

  margin-bottom: 0rem;

  font-weight: 500;

  letter-spacing: .3rem;

  display: inline-block;

  font-family: "Rampart One", sans-serif;

}

.hero__buttons {

  display: flex;

  gap: 1rem;

  margin-top: 3rem;

}



@media (max-width: 960px) {

  .hero {

    height: auto;

    background: #cdcdcd;

  }

  .hero__content {

    bottom: 5%;

    padding: 2rem 2rem 3rem;

  }

  .hero__text {

    font-size: 2.5rem;

    font-weight: 300;

    letter-spacing: .2rem;

  }

  .hero__title {

    font-size: 5rem;

  }

  .hero__image img {

    height: 100%;

  }

}

/* ===============================

   HEADER CART ICON

=============================== */

.header-cart {

  position: relative;

  display: inline-block;

}

.header-cart__icon {

  font-size: 2.4rem;

}

.header-cart__count {

  position: absolute;

  top: -0.4rem;

  right: -0.6rem;

  color: #171717;

  border-radius: 50%;

  font-size: 1.2rem;

  width: 1.8rem;

  height: 1.8rem;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ===============================

   CART BOX + PRODUCT LIST

=============================== */

.cart_box {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  padding: 2rem;

}



#loadProduct {

  width: 100%;

  height: 70vh;

  overflow-y: auto;

  opacity: 0;

  transition: all 0.35s ease-in-out;

}

#loadProduct.show {

  opacity: 1;

}

#loadProduct::-webkit-scrollbar {

  width: 0.1rem;

}

#loadProduct::-webkit-scrollbar-thumb {

  background: transparent;

  opacity: 0.2;

}



/* ===============================

   CART BUTTON + OVERLAY + DRAWER

=============================== */

#cart-btn {

  position: fixed;

  top: 2rem;

  right: 2rem;

  background: #c2866f;

  color: #fff;

  border: none;

  padding: 1rem 1.8rem;

  font-size: 1.5rem;

  border-radius: 0.4rem;

  cursor: pointer;

  z-index: 1001;

}



#cart-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(0.3rem);

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease;

  z-index: 998;

}

#cart-overlay.active {

  opacity: 1;

  visibility: visible;

}



#cart-popup {

  position: fixed;

  top: 0;

  right: -42rem;

  width: 42rem;

  background: #fff;

  box-shadow: -0.3rem 0 1rem rgba(0, 0, 0, 0.1);

  overflow-y: auto;

  transition: right 0.35s ease;

  z-index: 999;

  color: #000;

  font-family: "Poppins", sans-serif;

}

#cart-popup.open {

  right: 0;

}

#cart-popup::-webkit-scrollbar {

  width: 0.6rem;

}

#cart-popup::-webkit-scrollbar-thumb {

  background: #c2866f;

  border-radius: 0.3rem;

}



/* ===============================

   CART CONTENT

=============================== */

.cart__title {

  font-weight: 600;

  margin-bottom: 1rem;

  font-size: 1.8rem;

  color: #000;

}

.cart__header {

  display: flex;

  justify-content: space-between;

  font-weight: 600;

  border-bottom: 0.1rem solid #eee;

  padding-bottom: 0.5rem;

  font-size: 1.3rem;

  color: #000;

}

.cart__item {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  border-bottom: 0.1rem solid #eee;

  padding: 1.5rem 0;

  justify-content: space-between;

}

.cart__item-img img {

  width: 7rem;

  height: auto;

  object-fit: cover;

}

.cart__item-details {

  flex: 1;

}

.cart__item-brand {

  font-size: 1.2rem;

  text-transform: uppercase;

  color: #999;

  margin: 0;

}

.cart__item-name {

  font-weight: 600;

  margin: -0.5rem 0 0.3rem;

  font-size: 1.4rem;

  color: #171717;

}

.cart__item-price {

  font-weight: 500;

  color: #666;

  font-size: 1.4rem;

}

.cart__item-extra {

  font-size: 1.2rem;

  color: #666;

}

.cart__actions {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  margin-top: 1.5rem;

}

.cart__actions_box {

  border: 0.1rem solid #ccc;

  display: flex;

  align-items: center;

}

.cart__actions_box span {

  width: 3.8rem;

  height: 4.4rem;

  font-weight: 400;

  font-size: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #171717;

}

.cart__actions_box .icon * {

  fill: #171717;

  stroke: #171717;

  font-weight: 500;

}

.cart__actions button {

  width: 2.5rem;

  height: 4.4rem;

  border: none;

  background: #fff;

  cursor: pointer;

  font-size: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

}

.cart__actions button svg {

  width: 1rem;

}

.cart__actions .cart__remove {

  background: #c2866f;

  color: #fff;

  border: none;

  width: 4.4rem;

  transition: all 0.35s;

}

.cart__actions .cart__remove svg {

  width: 1.5rem;

}

.cart__actions .cart__remove:hover {

  background: #171717;

}

.cart__actions .cart__remove .icon * {

  fill: #fff;

  stroke: #fff;

}

.cart__total {

  font-weight: 600;

  color: #c2866f;

  align-self: center;

  min-width: 8rem;

  text-align: right;

  font-size: 1.7rem;

}

.cart__subtotal {

  display: flex;

  justify-content: space-between;

  margin-top: 1.5rem;

  font-weight: 600;

  font-size: 1.6rem;

}

.cart__subtotal-value {

  color: #c2866f;

}

.cart__info {

  font-size: 1.4rem;

  color: #171717;

  margin-top: 1rem;

  line-height: 1.65;

  font-weight: 500;

}

.cart__info a {

  color: #c2866f;

  text-decoration: underline;

}

.cart__buttons {

  display: flex;

  gap: 1rem;

  margin-top: 2rem;

}

.cart__buttons .btn {

  flex: 1;

  border: none;

  padding: 1rem;

  font-weight: 600;

  cursor: pointer;

  border-radius: 0.4rem;

  transition: background 0.3s;

}

.cart__buttons .btn--view {

  background: #d8b4a0;

  color: #fff;

}

.cart__buttons .btn--checkout {

  background: #c2866f;

  color: #fff;

  padding: 1.5rem;

  border-radius: 0;

}

.cart__buttons .btn:hover {

  opacity: 0.9;

}

.cart__buttons .btn.loading {

  opacity: 0.7;

  pointer-events: none;

}



/* ===============================

   EMPTY + LOADING STATE

=============================== */

.cart-empty {

  text-align: center;

  padding: 4rem 2rem;

  color: #777;

}

.cart-empty__icon {

  opacity: 0.4;

  margin-bottom: 1rem;

}

.cart-empty__icon svg {

  width: 4.8rem;

  height: 4.8rem;

  fill: #ccc;

}

.cart-empty__text {

  font-size: 1.5rem;

  font-weight: 500;

}



.cart-loading {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 4rem 2rem;

  color: #777;

  opacity: 1;

  position: absolute;

  width: 100%;

  left: 0;

  top: 0;

  transition: all 0.35s ease-in-out;

}

.cart-loading.hide {

  opacity: 0;

  z-index: -1;

}

.cart-loading__spinner {

  width: 4rem;

  height: 4rem;

  border: 0.4rem solid #eee;

  border-top-color: #c2866f;

  border-radius: 50%;

  animation: cart-spin 0.8s linear infinite;

  margin-bottom: 1rem;

}

.cart-loading__text {

  font-size: 1.4rem;

  font-weight: 500;

  color: #666;

}



@keyframes cart-spin {

  to {

    transform: rotate(360deg);

  }

}

/* ===============================

   TOAST NOTIFICATION

=============================== */

#toast {

  position: fixed;

  bottom: 3.2rem;

  right: 3.2rem;

  z-index: 9999;

}

#toast .toast {

  display: flex;

  align-items: center;

  background-color: #fff;

  padding: 2rem 0;

  min-width: 36rem;

  max-width: 40rem;

  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);

  border-left: 0.6rem solid;

  animation: slideInLeft ease 0.3s, fadeOut linear 1s 3s forwards;

  overflow: hidden;

  margin-top: 1.2rem;

}

#toast .toast__icon {

  font-size: 2.4rem;

  margin: 0 2rem;

}

#toast .toast__body {

  flex-grow: 1;

}

#toast .toast__title {

  font-weight: 600;

  font-size: 1.6rem;

  color: #333;

}

#toast .toast__msg {

  font-size: 1.4rem;

  color: #555;

  margin-top: 0.4rem;

}

#toast .toast__close {

  font-size: 2rem;

  color: #888;

  padding: 0 1.6rem;

  cursor: pointer;

}

#toast .toast--success {

  border-color: #47d864;

}

#toast .toast--success .toast__icon {

  color: #47d864;

}

#toast .toast--error {

  border-color: #ff623d;

}

#toast .toast--error .toast__icon {

  color: #ff623d;

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(calc(100% + 3.2rem));

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}

@keyframes fadeOut {

  to {

    opacity: 0;

  }

}

p.cart__name {

  font-size: 1.5rem;

  font-weight: bold;

  letter-spacing: .04rem;

  line-height: 150%;

  margin-top: -0.4rem;

}



.cart__img img {

  width: 10rem;

}



p.cart__price {

  font-size: 1.6rem;

  letter-spacing: .1rem;

  margin: 1rem 0;

}



/* ===============================

   RESPONSIVE (MAX 960px)

=============================== */

@media (max-width: 960px) {

  #cart-popup {

    width: 90%;

    right: -100%;

  }

  #cart-popup.open {

    right: 0;

  }



  #cart-btn {

    top: 1rem;

    right: 1rem;

    font-size: 1.4rem;

    padding: 0.8rem 1.4rem;

  }



  .cart__buttons {

    flex-direction: column;

  }

  .cart__buttons .btn {

    width: 100%;

  }



  .cart__item {

    gap: 1.3rem;

    justify-content: space-between;

  }



  .cart__price {

    font-size: 1.7rem;

    margin: 1rem 0;

  }



  .cart__name {

    font-size: 1.8rem;

    letter-spacing: 2px;

  }



  .cart__total {

    min-width: 9rem;

    font-size: 2rem;

    align-self: flex-start;

  }



  .cart__img img {

    width: 10rem;

  }



  .cart__header {

    font-size: 1.6rem;

  }



  .cart__title {

    margin-bottom: 2rem;

    font-size: 2.2rem;

  }



  #loadProduct {

    height: 57vh;

  }



  .cart_box {

    padding-bottom: 15rem;

  }



  .header-fixed #loadProduct {

    height: 62vh;

  }

  .header-fixed .cart_box {

    padding-bottom: 2rem;

  }



  .cart__subtotal-value {

    font-size: 2rem;

  }



  .cart__info {

    font-size: 1.5rem;

    letter-spacing: .1rem;

  }

}

body.no-scroll {

  overflow: hidden;

  height: 100vh;

  padding-right: 1.5rem;

}



.footer {

  background: #e8e6e1;

  padding: 8rem 0rem 1.5rem;

  color: #222;

}

.footer__inner {

  max-width: 80%;

  margin-left: auto;

  margin-right: auto;

}

.footer__inner {

  display: grid;

  grid-template-columns: 1.2fr 0.8fr 2fr;

  gap: 3rem;

  align-items: start;

}

@media (max-width: 1024px) {

  .footer__inner {

    grid-template-columns: 1fr;

    text-align: center;

  }

}

.footer__newsletter .footer__title {

  font-size: 1.6rem;

  letter-spacing: 0.05em;

  font-family: "Georgia", serif;

  margin-bottom: 2rem;

}

.footer__newsletter .footer__form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  align-items: flex-start;

}

@media (max-width: 1024px) {

  .footer__newsletter .footer__form {

    align-items: center;

  }

}

.footer__newsletter .footer__form .footer__input {

  width: 100%;

  max-width: 350px;

  border: none;

  border-bottom: 1px solid #222;

  background: transparent;

  padding: 0.8rem 0;

  font-size: 1.4rem;

  color: #222;

}

.footer__newsletter .footer__form .footer__input:focus {

  outline: none;

  border-color: #000;

}

.footer__newsletter .footer__form .footer__btn {

  background: #000;

  color: #fff;

  padding: 1rem 0;

  width: 100%;

  max-width: 350px;

  border: none;

  letter-spacing: 0.1em;

  cursor: pointer;

  transition: background 0.3s ease;

}

.footer__newsletter .footer__form .footer__btn:hover {

  background: #333;

}

.footer__newsletter .footer__socials {

  display: flex;

  gap: 1.5rem;

  margin-top: 2rem;

}

.footer__newsletter .footer__socials a {

  color: #000;

  font-size: 1.6rem;

  transition: opacity 0.3s;

}

.footer__newsletter .footer__socials a:hover {

  opacity: 0.7;

}

@media (max-width: 1024px) {

  .footer__newsletter .footer__socials {

    justify-content: center;

  }

}

.footer__center {

  display: flex;

  justify-content: center;

  align-items: start;

}

.footer__center img {

  width: 24rem;

  display: block;

}

.footer__links {

  display: flex;

  justify-content: space-between;

  gap: 3rem;

}

@media (max-width: 1024px) {

  .footer__links {

    flex-direction: column;

    align-items: center;

  }

}

.footer__heading {

  font-weight: 600;

  font-size: 1.3rem;

  margin-bottom: 1.5rem;

  letter-spacing: 0.05em;

}

.footer__list {

  list-style: none;

  padding: 0;

}

.footer__list li {

  margin-bottom: 0.8rem;

}

.footer__list a {

  color: #333;

  text-decoration: none;

  font-size: 1.3rem;

  transition: opacity 0.3s;

}

.footer__list a:hover {

  opacity: 0.7;

}

.footer__bottom {

  text-align: center;

  border-top: 1px solid #d2d0cc;

  padding-top: 1.5rem;

  margin-top: 3rem;

  font-size: 1.2rem;

  color: #555;

}



@media (max-width: 960px) {

  .footer {

    padding: 4rem 2rem 1.5rem;

  }

  .footer__inner {

    max-width: 100%;

    gap: 0;

  }

  .footer__newsletter {

    display: none;

  }

  .footer__bottom {

    font-size: 1.8rem;

  }

  .footer__links {

    flex-direction: column;

    flex-wrap: wrap;

    gap: 1.5rem;

  }

  .footer__heading {

    text-align: left;

    padding: 2rem 1.5rem 1rem 2.5rem;

    margin-bottom: 0;

    font-size: 2.5rem;

  }

  .footer__list {

    padding-bottom: 1rem;

  }

  .footer__list li {

    text-align: left;

    padding: 0.5rem;

  }

  .footer__list a {

    font-size: 1.6rem;

    padding: 1rem 2rem;

    text-align: left;

    font-weight: 600;

    letter-spacing: .2rem;

  }

  .footer__column {

    width: 100%;

    background-color: #fff;

  }

}

/** @format */

.discover {

  background-color: #f8f7f4;

  text-align: center;

  padding: 8rem 5rem;

}

.discover__inner {

  max-width: 80%;

  margin-left: auto;

  margin-right: auto;

}

.discover__title {

  font-size: 2.8rem;

  letter-spacing: 0.1em;

  color: #3b3b3b;

  font-weight: 900;

  margin-bottom: 0.8rem;

}

.discover__subtitle {

  font-size: 1.4rem;

  color: #7a7a7a;

  letter-spacing: 0.05em;

  margin-bottom: 4rem;

  text-transform: uppercase;

}

.discover__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.5rem;

}

@media (max-width: 768px) {

  .discover__grid {

    grid-template-columns: 1fr;

    gap: 2rem;

  }

}

.discover__item {

  background-color: transparent;

  overflow: hidden;

}

.discover__item .discover__images {

  overflow: hidden;

  display: block;

  vertical-align: top;

  line-height: 100%;

}

.discover__item:hover .discover__image {

  transform: scale(1.03);

}

.discover__image {

  width: 100%;

  height: auto;

  display: block;

  transition: transform 0.4s ease;

}

.discover__caption {

  margin-top: 1.5rem;

  margin-bottom: 2rem;

  font-size: 2rem;

  font-weight: bold;

  color: #3b3b3b;

  letter-spacing: 0.1em;

  text-align: left;

  position: relative;

  padding-left: 3.5rem;

}

.discover__caption::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.5rem;

  width: 2.3rem;

  height: 2.3rem;

  border-radius: 100%;

  background-color: #3b3b3b;

}



.shop {

  background: #fff;

  text-align: center;

  padding: 8rem 5rem;

}

.shop__inner {

  max-width: 80%;

  margin-left: auto;

  margin-right: auto;

}

.shop__title {

  font-size: 2.8rem;

  letter-spacing: 0.05em;

  color: #3b3b3b;

  margin-bottom: 0.8rem;

  font-weight: 900;

  text-transform: uppercase;

}

.shop__subtitle {

  font-size: 1.3rem;

  color: #777;

  margin-bottom: 5rem;

  text-transform: uppercase;

}

.shop__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 3rem;

}

@media (max-width: 1024px) {

  .shop__grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 640px) {

  .shop__grid {

    grid-template-columns: 1fr;

  }

}

.shop__item {

  text-align: left;

  border: 1px solid #ad222d;

}

.shop__image-wrap {

  position: relative;

  overflow: hidden;

}

.shop__label {

  position: absolute;

  top: 1rem;

  left: 1rem;

  background: #fff;

  color: #000;

  font-size: 1.1rem;

  padding: 0.3rem 0.8rem;

  letter-spacing: 0.05em;

  display: none;

}

.shop__image {

  width: 100%;

  height: auto;

  transition: transform 0.4s ease;

  display: block;

}

.shop__arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: #fff;

  border: none;

  width: 3rem;

  height: 3rem;

  cursor: pointer;

  font-size: 1.4rem;

  color: #000;

  transition: background 0.3s ease;

}

.shop__arrow:hover {

  background: #eee;

}

.shop__arrow--left {

  left: 1rem;

}

.shop__arrow--right {

  right: 1rem;

}

.shop__info {

  margin-top: 0rem;

  text-align: center;

  padding: 2rem 1.5rem 2rem 1.5rem;

  background-color: #ffffff;

}

.shop__name {

  font-size: 1.8rem;

  color: #171717;

  margin-bottom: 0.5rem;

  font-weight: 900;

  text-align: center;

}

.shop__price {

  font-size: 2rem;

  color: #ad222d;

  margin-bottom: 0.3rem;

  text-align: center;

  font-weight: bold;

}

.shop__price s {

  font-size: 1.7rem;

  color: #171717;

  font-weight: 500;

}

.shop__member {

  color: #000;

  font-weight: 500;

}

.shop__regular {

  color: #888;

}

.shop__colors {

  font-size: 1.2rem;

  color: #888;

  font-style: italic;

}



.collection__visual {

  border: 1rem solid #c59d23;

}



.category {

  background: #ffffff;

  padding: 5rem 5rem;

}

.category__grid {

  max-width: 80%;

  margin-left: auto;

  margin-right: auto;

}

.category__grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

}

@media (max-width: 768px) {

  .category__grid {

    grid-template-columns: 1fr;

  }

}

.category__item {

  position: relative;

  overflow: hidden;

}

.category__item:hover .category__image {

  transform: scale(1.03);

}

.category__image {

  width: 100%;

  height: 20.1rem;

  transition: transform 0.5s ease;

  display: block;

  object-fit: cover;

}

.category__overlay {

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  padding: 3rem;

  color: #fff;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);

}

.category__title {

  font-size: 3.2rem;

  font-weight: 400;

  letter-spacing: 0.05em;

  margin-bottom: 1rem;

}

.category__text {

  font-size: 1.4rem;

  line-height: 1.8;

  margin-bottom: 2rem;

}



/* Button white */

.btn--white {

  display: inline-block;

  background: #fff;

  color: #000;

  padding: 1rem 2rem;

  font-size: 1.3rem;

  letter-spacing: 0.05em;

  text-decoration: none;

  transition: background 0.3s ease;

}

.btn--white:hover {

  background: #e5e5e5;

}



.collection {

  background-color: #f8f7f4;

  padding: 8rem 5rem;

}

.collection__inner {

  max-width: 80%;

  margin-left: auto;

  margin-right: auto;

}

.collection__header {

  text-align: left;

  margin-bottom: 4rem;

}

.collection__title {

  font-size: 2.8rem;

  color: #3b3b3b;

  font-weight: 900;

  letter-spacing: 0.05em;

}

.collection__subtitle {

  font-size: 1.4rem;

  color: #7a7a7a;

  margin-top: 0.5rem;

  letter-spacing: 0.05em;

}

.collection__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

}

@media (max-width: 1024px) {

  .collection__grid {

    grid-template-columns: 1fr;

  }

}

.collection__products {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 3rem;

}

@media (max-width: 768px) {

  .collection__products {

    grid-template-columns: 1fr;

  }

}

.collection__item {

  text-align: left;

}

.collection__image-wrap {

  position: relative;

  overflow: hidden;

}

.collection__image-wrap:hover .collection__image {

  transform: scale(1.03);

}

.collection__image {

  width: 100%;

  transition: transform 0.4s ease;

}

.collection__label {

  position: absolute;

  top: 1rem;

  left: 1rem;

  background: #fff;

  color: #000;

  font-size: 1.1rem;

  padding: 0.4rem 0.8rem;

}

.collection__info {

  margin-top: 1rem;

}

.collection__name {

  font-size: 1.5rem;

  color: #171717;

  margin-bottom: 0.5rem;

}

.collection__price {

  font-size: 1.3rem;

  color: #555;

}

.collection__member {

  color: #000;

  font-weight: 500;

}

.collection__regular {

  color: #888;

}

.collection__colors {

  font-size: 1.2rem;

  color: #888;

  font-style: italic;

  margin-top: 0.4rem;

}

.collection__visual .collection__visual-img {

  width: 100%;

  height: 90.5rem;

  object-fit: cover;

  display: block;

}



.membership {

  position: relative;

  width: 100%;

  height: 55vh;

  min-height: 400px;

  overflow: hidden;

}

.membership__bg {

  position: absolute;

  inset: 0;

}

.membership__bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  filter: brightness(75%);

  transition: transform 1.2s ease;

}

.membership:hover .membership__bg img {

  transform: scale(1.03);

}

.membership__overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.35);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}

.membership__content {

  color: #fff;

  padding: 2rem;

}

.membership__subtitle {

  font-size: 1.2rem;

  letter-spacing: 0.1em;

  margin-bottom: 1rem;

}

.membership__title {

  font-size: 3.2rem;

  font-weight: 400;

  letter-spacing: 0.05em;

  margin-bottom: 1.5rem;

}

.membership__text {

  font-size: 1.4rem;

  letter-spacing: 0.03em;

  max-width: 650px;

  margin: 0 auto;

  color: #eaeaea;

}

@media (max-width: 768px) {

  .membership {

    height: 45vh;

  }

  .membership__title {

    font-size: 2.4rem;

  }

  .membership__text {

    font-size: 1.2rem;

  }

}



.membership__btn {

  margin-top: 3rem;

  display: inline-block;

  background: transparent;

  color: #fff;

  border: 1px solid #fff;

  padding: 1rem 3rem;

  font-size: 1.4rem;

  letter-spacing: 0.05em;

  text-decoration: none;

  transition: all 0.3s ease;

}

.membership__btn:hover {

  background: #fff;

  color: #000;

}

@media (max-width: 768px) {

  .membership {

    height: 45vh;

  }

  .membership__title {

    font-size: 2.4rem;

  }

  .membership__text {

    font-size: 1.2rem;

  }

}



@media (max-width: 960px) {

  .shop {

    padding: 6rem 2rem;

  }

  .shop__inner {

    max-width: 100%;

  }

  .shop__grid {

    gap: 1.5rem;

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .shop__subtitle, .shop__title {

    text-align: center !important;

  }

  .shop__name {

    font-size: 1.7rem;

    font-weight: bold;

    letter-spacing: 0rem;

  }

  .shop__price {

    font-size: 2rem;

    font-weight: bold;

    position: relative;

  }

  .shop__price s {

    font-size: 1.8rem;

    font-weight: 500;

  }

  .shop__price span {

    display: block;

    color: #171717;

  }

  .shop__label {

    display: none;

  }



  .discover {

    padding: 6rem 2rem;

  }

  .discover__inner {

    max-width: 100%;

  }

  .discover__grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1.5rem !important;

  }

  .discover__caption {

    display: none;

  }



  .category {

    padding: 6rem 2rem;

  }

  .category__grid {

    max-width: 100%;

  }

  .category__image {

    height: auto;

  }



  .collection {

    padding: 6rem 2rem;

  }

  .collection__inner {

    max-width: 100%;

  }

  .collection__header {

    text-align: center;

  }

  .collection__grid {

    display: flex;

    flex-direction: column-reverse;

  }

  .collection__products {

    margin-top: -10rem;

    gap: 1.5rem;

    z-index: 2;

    grid-template-columns: repeat(2, 1fr) !important;

  }

  .collection__name {

    font-size: 1.8rem;

    font-weight: bold;

    letter-spacing: 0.15rem;

  }

  .collection__price {

    font-size: 2rem;

    font-weight: bold;

    position: relative;

  }

  .collection__price s {

    font-size: 1.8rem;

    font-weight: 500;

  }

  .collection__price span {

    position: absolute;

    padding-left: 6.1rem;

    left: 0;

    width: 100%;

    top: 2rem;

    font-size: 1.8rem;

  }

  .collection__visual {

    left: -2rem;

    position: relative;

    width: calc(100% + 4rem);

    border: 0.5rem solid #c59d23 !important;

  }

  .collection__visual-img {

    aspect-ratio: 4 / 6;

    height: auto !important;

  }



  .membership {

    min-height: 30vh;

  }

  .membership__subtitle {

    font-size: 1.8rem;

  }

  .membership__title {

    font-size: 3rem;

    font-weight: 900;

  }

  .membership__text {

    font-size: 1.6rem;

    font-weight: 400;

  }

  .membership__btn {

    font-size: 1.6rem;

    font-weight: 600;

    padding: 1.5rem 5rem;

  }



  .collection__products .shop__name {

    letter-spacing: normal;

  }



  .collection__item {

    text-align: left;

    box-shadow: 2px 2px 4px 0px rgba(197, 159, 32, 0.5);

  }

}

.shop__btn-add {

  width: 80%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  background-color: #91212a;

  color: #fff;

  font-size: 1.6rem;

  font-weight: 400;

  border: none;

  border-radius: 0.8rem;

  padding: 1.2rem 2.4rem;

  cursor: pointer;

  transition: all 0.3s ease;

  font-family: "Noto Sans JP", sans-serif;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  margin-top: 1rem;

  margin-left: auto;

  margin-right: auto;

}

.shop__btn-add svg {

  fill: #fff;

  transition: transform 0.3s ease;

}

.shop__btn-add span {

  display: inline-block;

  line-height: 1;

  letter-spacing: 0.05em;

}

.shop__btn-add:hover {

  background-color: #67181e;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);

}

.shop__btn-add:hover svg {

  transform: scale(1.15);

}

.shop__btn-add:active {

  transform: scale(0.96);

  background-color: #531318;

}

.shop__btn-add:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}

@media (max-width: 960px) {

  .shop__btn-add {

    width: 100%;

    font-size: 1.6rem;

    padding: 1rem 1.8rem;

    border-radius: 0.6rem;

  }

  .shop__btn-add svg {

    width: 20px;

    height: 20px;

  }

}



.page_box {

  padding-top: 8.5rem;

  padding-bottom: 0rem;

  background-color: #ffffff;

}

@media (min-width: 960.5px) {

  .page_box {

    padding-top: 11.7rem;

    background: #f9f9f5;

  }

  .page_box .has-fixed-layout {

    width: 100%;

  }

  .page_box .page-banner {

    position: relative;

    width: 100%;

    height: 22rem;

    overflow: hidden;

    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .page_box .page-banner__title {

    font-size: 2.5rem;

    color: #333;

    font-weight: 700;

    letter-spacing: 0.2rem;

    margin-bottom: 0rem;

    line-height: 170%;

    text-align: center;

  }

  .page_box .page-banner__title span {

    font-size: 2rem;

  }

}



.shop__info a {

  color: #171717;

  text-decoration: none;

}



.box__layout {

  width: 100%;

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

}

.box__layout--item:first-child {

  margin-bottom: 2rem;

  max-width: 80rem;

  margin-left: auto;

  margin-right: auto;

  padding: 2rem;

}

.box__layout--item:last-child {

  width: 100%;

}

.box__layout .shop__grid {

  gap: 0.5rem;

}

.box__layout .shop__btn-add {

  width: 90%;

  font-size: 1.45rem;

}

.box__layout .shop__name {

  font-size: 1.5rem;

}

.box__layout .shop__price {

  font-size: 1.6rem;

}

.box__layout .shop__price span {

  display: block;

  color: #171717;

}

.box__layout .shop__btn-add svg {

  width: 2rem;

  height: 2rem;

}



.list__category {

  display: grid;

  gap: 1.5rem;

  justify-content: center;

  grid-template-columns: repeat(3, 1fr);

}

.list__category a {

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #c59d23;

  padding: 1.5rem 2rem;

  color: #ffffff;

  font-size: 1.5rem;

  font-weight: 500;

  text-decoration: none;

}



.product-list {

  padding: 6rem 1.91754rem 10rem;

  background: #f9f9f5;

}

@media (min-width: 960.5px) {

  .product-list {

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

  }

}

.product-list .shop__grid {

  gap: 1rem;

}

.product-list__header {

  margin-bottom: 1rem;

}

.product-list svg {

  width: 1.9rem;

  height: 1.9rem;

}

.product-list .icon circle,

.product-list .icon ellipse,

.product-list .icon g,

.product-list .icon line,

.product-list .icon path,

.product-list .icon polygon,

.product-list .icon polyline,

.product-list .icon rect {

  fill: #171717;

  stroke: #171717;

}

.product-list__controls {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 1.8rem;

  font-weight: 600;

  color: #171717;

  margin-bottom: 2rem;

}

.product-list__filter {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  background: none;

  border: none;

  font-size: 1.8rem;

  font-weight: 500;

  color: #171717;

  cursor: pointer;

}

.product-list__filter-icon {

  position: relative;

  top: 0.2rem;

}

.product-list__grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1rem;

}



.product-card {

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  text-align: center;

}

.product-card__image img {

  width: 100%;

  height: auto;

  display: block;

}

.product-card__info {

  padding: 0.8rem 0.5rem;

}

.product-card__desc {

  font-size: 0.95rem;

  color: #444;

  margin-bottom: 0.3rem;

}

.product-card__price {

  font-weight: 600;

  font-size: 1rem;

  color: #000;

}



.filter-drawer {

  position: fixed;

  inset: 0;

  z-index: 500;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s ease;

}

.filter-drawer__overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.4);

}

.filter-drawer__panel {

  position: absolute;

  top: 0;

  right: -100%;

  width: 80%;

  max-width: 380px;

  height: 100vh;

  background: #f9f9f5;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition: right 0.4s ease;

}

.filter-drawer__header {

  text-align: center;

  padding: 2rem;

  border-bottom: 1px solid #ddd;

  position: relative;

  color: #171717;

  font-weight: 600;

  letter-spacing: 0.2rem;

}

.filter-drawer__title {

  font-size: 2rem;

  font-weight: 600;

}

.filter-drawer__count {

  font-size: 1.6rem;

  margin-top: 0.3rem;

}

.filter-drawer__close {

  position: absolute;

  top: 1rem;

  right: 1rem;

  background: none;

  border: none;

  font-size: 3rem;

  cursor: pointer;

  color: #171717;

}

.filter-drawer__body {

  flex: 1;

  padding: 2rem;

}

.filter-drawer__list {

  list-style: none;

  margin: 0 0 1rem 0;

  padding: 0;

  height: 80vh;

  overflow-y: auto;

}

.filter-drawer__item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 2rem 0;

  border-bottom: 1px solid #eee;

  font-size: 1.6rem;

  color: #171717;

  font-weight: 600;

  letter-spacing: 0.1rem;

}

.filter-drawer__item a {

  color: #171717;

  text-decoration: none;

}

.filter-drawer__item.active a {

  font-weight: 900;

  color: #c59d23;

}

.filter-drawer__arrow {

  font-size: 1.2rem;

  color: #777;

}

.filter-drawer__sort {

  margin-top: 1rem;

  font-size: 0.9rem;

}

.filter-drawer__select {

  width: 100%;

  padding: 0.5rem;

  margin-top: 0.3rem;

  border: 1px solid #ccc;

  border-radius: 4px;

}

.filter-drawer__footer {

  display: flex;

  justify-content: space-between;

  padding: 1rem;

  border-top: 1px solid #ddd;

}

.filter-drawer__reset {

  background: none;

  border: none;

  color: #171717;

  font-size: 0.9rem;

  cursor: pointer;

}

.filter-drawer__apply {

  background: #a00067;

  color: #fff;

  border: none;

  border-radius: 6px;

  padding: 0.6rem 1.2rem;

  font-size: 0.95rem;

  font-weight: 600;

  cursor: pointer;

}

.filter-drawer--active {

  visibility: visible;

  opacity: 1;

}

.filter-drawer--active .filter-drawer__panel {

  right: 0;

}



body.category {

  padding: 0 !important;

}



.single_product {

  padding-top: 2rem;

  padding-left: 2rem;

  padding-right: 2rem;

  overflow: hidden;

}

.single_product .product__title {

  font-size: 1.35rem;

  color: #171717;

  font-weight: bold;

  letter-spacing: 0rem;

}

.single_product .product__title h1 {

  font-weight: bold;

}

.single_product .product__title br {

  display: none !important;

}

.single_product .shop__price {

  font-size: 3rem;

}

.single_product .shop__price s {

  font-size: 2rem;

}

.single_product .shop__price span {

  font-size: 2rem;

  display: inline-block;

  position: relative;

  top: -2px;

}

.single_product .post-category {

  font-size: 1.6rem;

  color: #2e2a39bf;

  font-weight: 600;

  line-height: 150%;

  letter-spacing: 0.1rem;

}

.single_product .price__add {

  margin-top: 1rem;

}

.single_product .shop__btn-add {

  padding: 2rem;

  font-size: 1.8rem;

}

.single_product .shop__price {

  text-align: left;

}

.single_product .product-tabs {

  margin-top: 2em;

  padding-bottom: 5rem;

}

.single_product .product-tabs__nav {

  display: flex;

  border-bottom: 1px solid #eee;

  list-style: none;

  padding: 0;

  margin: 0 0 0.5em;

}

.single_product .product-tabs__nav li {

  padding: 10px 20px;

  cursor: pointer;

  border: 1px solid #ddd;

  border-bottom: none;

  background: #f9f9f9;

  margin-right: 5px;

  border-radius: 6px 6px 0 0;

  transition: background 0.2s ease;

}

.single_product .product-tabs__nav li.active {

  background: #fff;

  font-weight: bold;

  border-bottom: 2px solid #fff;

}

.single_product .product-tabs__content {

  display: none;

  border: 1px solid #ddd;

  border-radius: 0 6px 6px 6px;

  padding: 20px;

  background: #fff;

}

.single_product .product-tabs__content img,

.single_product .product-tabs__content video {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.single_product .product-tabs__content.active {

  display: block;

}



.single_product_inner_image {

  width: 100%;

  order: 1;

  margin-bottom: 4rem;

  box-shadow: 1px 1px 2px #868686;

}



.single_product_inner_image img {

  width: 100%;

  max-width: 100%;

  display: block;

  height: auto;

}



.product-tabs__content :is(h1, h2, h3, h4, h5, h6) {

  margin: 1.5rem 0;

  font-weight: bold;

  font-size: 2.6rem;

}

.product-tabs__content :is(h1, h2, h3, h4, h5, h6):first-child {

  margin-top: 0;

}

.product-tabs__content p {

  font-size: 1.8rem;

  color: #333333;

  line-height: 195%;

  letter-spacing: 0.12rem;

  font-weight: 500;

  text-align: justify;

  margin-bottom: 4rem;

}

.product-tabs__content p:last-child {

  margin-bottom: 0;

}



.cart-toast {

  position: fixed;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  background-color: #222;

  color: #fff;

  padding: 12px 8px 12px 16px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  gap: 12px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

  font-size: 1.4rem;

  z-index: 90;

  opacity: 0;

  transform: translate(-50%, 20px);

}



.cart-toast.show {

  animation: fadeIn 0.3s ease forwards;

}



.cart-toast__msg {

  margin: 0;

  width: 17.5rem;

  text-align: center;

  font-size: 1.6rem;

}



.cart-toast__actions {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: auto;

}



.cart-toast__btn {

  border: none;

  cursor: pointer;

  padding: 6px 6px;

  border-radius: 6px;

  font-size: 1.6rem;

  width: 7.5rem;

}

@media (max-width: 960px) {

  .cart-toast__btn {

    width: 15rem;

    font-size: 1.8rem;

    padding: 10px;

  }

}



.cart-toast__btn--outline {

  background-color: #fff;

  color: #000;

}



.cart-toast__btn--filled {

  background-color: #000;

  color: #fff;

}



.cart-toast__close {

  background: transparent;

  color: #fff;

  font-size: 2.5rem;

  border: none;

  cursor: pointer;

  margin-left: 0;

  padding: 7px;

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translate(-50%, 20px);

  }

  to {

    opacity: 1;

    transform: translate(-50%, 0);

  }

}

/* Tùy chọn: hiệu ứng ẩn dần */

.cart-toast.hide {

  opacity: 0;

  transition: opacity 0.3s ease;

}



#toast {

  bottom: 14rem;

}



@media (min-width: 960.5px) {

  .cart-toast {

    width: 100%;

    max-width: 50rem;

  }



  .cart-toast__msg {

    width: 30rem;

  }



  .cart-toast__btn {

    width: 12rem;

  }

}

.page__content_box {

  width: 100%;

  max-width: 960px;

  margin-left: auto;

  margin-right: auto;

  padding-top: 5rem;

  padding-left: 2rem;

  padding-right: 2rem;

  padding-bottom: 8rem;

}

@media (min-width: 960.5px) {

  .page__content_box {

    max-width: 1200px;

    padding-top: 10rem;

    padding-bottom: 12rem;

  }

}

.page__content_box .wp-block-image {

  margin-bottom: 20px;

  margin-top: 15px;

}

.page__content_box img {

  width: 100%;

  height: auto;

  object-fit: cover;

  display: block;

  margin-left: auto;

  margin-right: auto;

}

.page__content_box .wp-block-heading {

  font-size: 25px;

  line-height: 145%;

  letter-spacing: 1px;

  font-weight: 700;

  color: #293f71;

  margin-bottom: 2rem;

}

.page__content_box h3.wp-block-heading {

  font-size: 18px;

  position: relative;

  margin-top: 20px;

}

.page__content_box h3.wp-block-heading::before {

  content: "●";

  margin-right: 5px;

}

.page__content_box p {

  font-size: 15px;

  line-height: 185%;

  letter-spacing: 0.5px;

  font-weight: 400;

  color: #232323;

  margin-bottom: 20px;

}

.page__content_box .wp-block-separator {

  margin: 30px 0 50px;

}

.page__content_box .wp-block-list {

  list-style: none;

  margin: 0 0 1.5rem 0;

  padding: 0;

  counter-reset: list-counter;

}

.page__content_box .wp-block-list li {

  position: relative;

  padding-left: 2rem;

  margin-bottom: 0.8rem;

  font-size: 15px;

  line-height: 185%;

  letter-spacing: 0.5px;

  font-weight: 400;

  color: #232323;

}

.page__content_box .wp-block-list li::before {

  content: "・";

  position: absolute;

  left: 0;

  top: 1px;

  color: #293f71;

  font-weight: bold;

}

.page__content_box .wp-block-list--numbered {

  counter-reset: num;

}

.page__content_box .wp-block-list--numbered li {

  counter-increment: num;

}

.page__content_box .wp-block-list--numbered li::before {

  content: counter(num) ".";

  color: #a00067;

  font-weight: 600;

}

.page__content_box table td {

  width: 100%;

  float: left;

  font-size: 15px;

  line-height: 185%;

  letter-spacing: 0.5px;

  font-weight: 400;

  color: #232323;

  padding-top: 1.8rem;

  padding-bottom: 1.8rem;

}

.page__content_box table td:first-child {

  color: #ffffff;

  padding-left: 15px;

  padding-right: 15px;

  font-weight: bold;

  background-color: #273865;

}



.grid-1100 {

  width: 100%;

  max-width: 1100px;

  margin-left: auto;

  margin-right: auto;

}



.btn {

  display: inline-block;

  padding: 1.2rem 3rem 1.2rem;

  font-size: 1.5rem;

  text-transform: uppercase;

  text-decoration: none;

  transition: all 0.3s ease;

  font-weight: 600;

  letter-spacing: .2rem;

}

.btn--primary {

  background-color: #1a1a1a;

  color: #fff;

}

.btn--primary:hover {

  background-color: #c7a46e;

}

.btn--outline {

  border: 1px solid #fff;

  color: #000;

  background-color: #ffffff;

}

.btn--outline:hover {

  color: #ffffff;

  border: 1px solid black;

  background-color: black;

}

@media (max-width: 960px) {

  .btn {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

}



/** @format */

.customers-reviews {

  padding: 3rem 0 5rem;

  font-size: 1.7rem;

}

.customers-reviews__circle {

  display: flex;

  justify-content: center;

  align-items: center;

  max-height: calc(260 / 7.82667 * 1rem);

  max-width: calc(260 / 7.82667 * 1rem);

  margin-right: calc(88 / 7.82667 * 1rem);

  background-image: radial-gradient(#fff calc(75 / 7.82667 * 1rem), transparent calc((75 / 7.82667 * 1rem) + (0.5 / 7.82667 * 1rem))), conic-gradient(#91212a 0% 94%, #efefef 94% 100%);

  border-radius: 50%;

  height: calc(200 / 7.82667 * 1rem);

  width: calc(200 / 7.82667 * 1rem);

  margin: auto;

}

.customers-reviews__average {

  text-align: center;

}

.customers-reviews__average-title {

  font-size: 1.7rem;

  font-weight: bold;

}

.customers-reviews__average-desc {

  font-size: 1.5rem;

}

.customers-reviews__average-score {

  font-size: 5rem;

  font-weight: bold;

}

.customers-reviews__count {

  font-size: 2rem;

  font-weight: bold;

  margin: 2rem 0;

}

.customers-reviews__list {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 1.5rem;

}

.customers-reviews__item {

  display: flex;

  flex-direction: row;

  width: 100%;

}

.customers-reviews__stars-text {

  display: inline-block;

  width: fit-content;

}

.customers-reviews__stars {

  display: inline-block;

  width: fit-content;

  font-size: 1.7rem;

  width: 100%;

  max-width: calc(91.25 / 7.82667 * 1rem);

  margin-left: 1rem;

  color: #f19e39;

}

.customers-reviews__bar {

  flex: 1;

  position: relative;

  z-index: 1;

  margin-left: 1rem;

  margin-right: 1rem;

}

.customers-reviews__bar-fill {

  position: absolute;

  height: 100%;

  z-index: 1;

  top: 0;

  left: 0;

  background: #91212a;

}

.customers-reviews__number {

  font-weight: bold;

}

.customers-reviews__medias {

  margin: 4rem -1rem;

  overflow: hidden;

  position: relative;

}

.customers-reviews__medias .slick-track {

  display: flex;

  flex-direction: row;

}

.customers-reviews__medias .slick-arrow {

  left: 0rem !important;

  transform: translateY(-50%);

}

.customers-reviews__medias .slick-next {

  left: unset !important;

  right: 0rem !important;

}

.customers-reviews__media-item {

  aspect-ratio: 1 / 1;

  border: 1px #aaa solid;

  border-radius: 1rem;

  line-height: 0;

  overflow: hidden;

  width: calc(100vw / 3);

  margin: 0 1rem;

}

.customers-reviews__media-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.customers-reviews__media-item video {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.reviews {

  display: flex;

  flex-direction: column;

  gap: 2rem;

  margin-top: 3.5rem;

  position: relative;

  z-index: 1;

}

.reviews__container {

  padding: 0 15px;

}

.reviews__title {

  font-size: 2.8rem;

  letter-spacing: 0.05em;

  color: #3b3b3b;

  margin-bottom: 0.8rem;

  font-weight: 900;

  text-transform: uppercase;

  text-align: center;

}

.reviews__subtitle {

  font-size: 1.3rem;

  color: #777;

  margin-bottom: 5rem;

  text-transform: uppercase;

  text-align: center;

}



.single-post .reviews .slick-track {

  display: flex;

  flex-direction: row;

}

.single-post .reviews .slick-list {

  margin: 0 -4rem;

  z-index: -1;

}

.single-post .reviews .slide {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin: 0 4rem;

}

.single-post .reviews .slick-arrow.slick-disabled {

  opacity: 0.3;

}



.review {

  padding: 1.5rem;

  border-radius: 1.5rem;

  border: 1px solid #999999;

  background-color: #fff;

}

.review__author {

  display: flex;

  flex-direction: row;

  align-items: center;

  position: relative;

  z-index: 1;

  margin-bottom: 1.5rem;

}

.review__author-icon {

  width: 2.7rem;

  height: 2.7rem;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 0.75rem;

}

.review__author-name {

  font-weight: bold;

  font-size: 2rem;

}

.review__author-age {

  font-size: 1.5rem;

  font-weight: 400;

  display: inline-block;

  margin-left: 0.75rem;

}

.review__guchikomi th {

  text-align: left;

  display: block;

  margin-right: 3rem;

  font-size: 1.7rem;

}

.review__guchikomi td {

  font-size: 1.7rem;

  color: #f19e39;

}

.review__comment {

  margin-top: 1.5rem;

}

.review__comment-title {

  font-weight: bold;

  font-size: 1.7rem;

}

.review__comment-main {

  font-size: 1.7rem;

  font-weight: 500;

  line-height: 185%;

  text-align: justify;

  margin-top: 1rem;

}



.single_product_inner .product-tabs .tab-content {

  display: none;

}

.single_product_inner .product-tabs .tab-content.active {

  display: block;

}



.matomekai {

  margin-top: 4rem;

}

.matomekai__title {

  font-weight: bold;

  font-size: 2.5rem;

  margin: 0 0 1.5rem;

  text-align: left;

}

.matomekai__btn {

  text-decoration: none;

  width: 80%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  background-color: #91212a;

  color: #fff;

  font-weight: 400;

  border: none;

  border-radius: 0.8rem;

  padding: 2rem;

  font-size: 2.2rem;

  cursor: pointer;

  transition: all 0.3s ease;

  font-family: "Noto Sans JP", sans-serif;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  margin-top: 1rem;

  margin-left: auto;

  margin-right: auto;

}

.matomekai__btn-group {

  display: flex;

  flex-direction: row;

  gap: 1rem;

}

.matomekai__btn svg {

  fill: #fff;

  transition: transform 0.3s ease;

}

@media (max-width: 960px) {

  .matomekai__btn {

    width: 100%;

    font-size: 2rem;

    padding: 1rem 1.8rem;

    border-radius: 0.6rem;

  }

}



.single-post .shop__btn-add {

  width: 100%;

}



.single_product_inner_info .customers-reviews {

  margin: 4rem 0;

  padding: 1.5rem;

  border-radius: 1.5rem;

  border: 1px solid #999999;

  background-color: #fff;

  overflow: hidden;

}



.product__review-rate {

  margin: 1rem 0;

}



.review-rate__point {

  font-size: 3rem;

  font-weight: bold;

}

.review-rate__star {

  font-size: 2.2rem;

  color: #f19e39;

}

.review-rate__cmt-count {

  font-size: 1.5rem;

}



.page-comments .grid-1200 {

  padding: 0 15px;

}



.comments__header-title {

  font-size: 2.35rem;

  color: #171717;

  font-weight: bold;

  letter-spacing: 0rem;

  text-align: center;

  margin: 4rem 0;

}

.comments__header-title br {

  display: none;

}

.comments__header-image {

  width: 100%;

  width: 100%;

  border: 1px solid #aaa;

}

.comments__header-image img {

  width: 100%;

}



.review-form__media .input_wrap {

  position: relative;

  z-index: 1;

  width: 100%;

  padding: 10px 12px;

  background: #f6fafb;

  border: 2px dashed #aaa;

  border-radius: 6px;

  font-size: 15px;

  transition: border-color 0.2s ease;

  box-sizing: border-box;

  margin-bottom: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

}

.review-form__media input[type="file"] {

  position: absolute;

  z-index: 1;

  opacity: 0;

  display: block;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

}



.henkin-banner {

  margin-top: 4rem;

  border-radius: 1rem;

  overflow: hidden;

  line-height: 0;

}

.henkin-banner img {

  width: 100%;

}



#matomekaiSlider {

  width: 100%;

  position: relative;

  display: block;

}

#matomekaiSlider .slick-track {

  display: flex;

  flex-direction: row;

  gap: 3rem;

}

#matomekaiSlider .slick-list {

  padding: 0 !important;

}

#matomekaiSlider .slick-arrow {

  position: relative;

  display: none !important;

}



/** @format */

@media (min-width: 961px) {

  .wp-scroll-product .shop__grid_auto .shop__grid,

  .wp-scroll-product.vs-02 .shop__grid_auto .shop__grid {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    width: 100% !important;

    max-width: 1440px;

    margin-left: auto;

    margin-right: auto;

  }



  .shop__inner {

    width: 100%;

    max-width: 100%;

  }



  .shop__title {

    font-size: 3.8rem;

  }



  .shop__item {

    width: calc(50% - 0.5rem) !important;

    display: flex;

    flex-direction: row;

  }



  .shop__image-wrap {

    width: 35%;

  }



  .shop__info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    flex: 1;

  }



  .shop__name {

    font-size: 2.6rem;

    font-weight: 700;

    text-align: left;

  }

  .shop__name br {

    display: none;

  }

  .shop__name a {

    display: flex;

    flex-direction: row;

    gap: 1rem;

  }

  .shop__name button.shop__btn-add {

    margin-top: auto;

    width: fit-content;

    margin-left: 0;

  }



  img.certificate_img {

    aspect-ratio: 2259/2500;

    height: auto !important;

    width: 100%;

    max-width: 1440px;

    margin: 1rem auto;

  }



  .content_container {

    width: 100%;

    max-width: 1440px;

    padding: 0 20px;

    margin: 4rem auto;

  }

  .content_container img.after-use_img {

    aspect-ratio: 978 / 469;

  }

  .content_container h2.shop__title {

    text-align: center;

  }



  .category__grid {

    max-width: 100%;

    max-width: 1440px;

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    justify-content: center;

  }

  .category__grid .category__item {

    width: calc((100% - 2rem) / 2);

  }

  .category__grid .category__item a {

    width: 100%;

    height: 100%;

  }

  .category__grid .category__item a img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }



  .shop__grid {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 1rem;

  }



  .reviews_summary-histogram {

    display: flex;

    flex-direction: row;

    gap: 4rem;

    margin-bottom: 4rem;

  }



  .customers-reviews__histogram {

    flex: 1;

  }



  .reviews {

    flex-direction: row;

    flex-wrap: wrap;

  }



  .review {

    width: calc((100% - 2rem) / 2);

  }



  .reviews__more {

    width: fit-content;

    margin: 0 auto;

  }



  .faq-list {

    max-width: 100% !important;

  }



  .dflex-3col {

    display: flex;

    flex-direction: row;

    gap: 2rem;

  }



  .dflex-3col > * {

    width: calc((100% - 4rem) / 3);

    margin: 0 !important;

  }



  .dflex-2col {

    display: flex;

    flex-direction: row;

    gap: 2rem;

    margin: 2rem 0;

  }



  .dflex-2col > * {

    width: calc((100% - 2rem) / 2);

    margin: 0 !important;

  }



  .after-use__container {

    display: flex;

    flex-direction: row;

    gap: 2rem;

  }



  .after-use__container > * {

    width: calc((100% - 2rem) / 2);

    margin: 0 !important;

  }



  .category__grid {

    height: 440px;

    flex-wrap: nowrap;

  }

  .category__grid .category__item {

    width: unset;

  }

  .category__grid .category__item a {

    display: block;

  }

  .category__grid .category__item a img {

    height: 100%;

    object-fit: unset;

  }



  .shop {

    padding: 8rem 0rem;

  }

}



/*# sourceMappingURL=main.css.map */