/* ブランド共通 */

/* .brand-logo {
  width: 88px;
} */


/* about */

.about {
  overflow: hidden;
  position: relative;
  background-color: var(--brand-color);
}

.about__deco-img {
  position: absolute;
  filter: drop-shadow(0 5.677px 9.083px #b37d07);
}

.about__deco-img--top {
  top: -14.6px;
  right: -56px;
  width: 127px;
}

.about__deco-img--bottom {
  bottom: -34px;
  left: -16px;
  width: 118px;
}

.about__content {
  @media (768px <= width) {
    margin-top: 56px;
  }
}

.about__inner {
  position: static;
  z-index: 1;

  @media (768px <= width) {
    position: relative;
  }
}

.about__item-top {
  @media (768px <= width) {
    display: flex;
    justify-content: space-between;
    gap: 24px;
  }
}

.about__item-top-body {
  padding-inline: 16px;
  @media (768px <= width) {
    flex: 1 1 0;
    width: auto;
    max-width: 548px;
    min-width: 0;
    padding-inline: 0;
  }
}

.about__item-body {
  padding-inline: 16px;

  @media (768px <= width) {
    padding-inline: 0;
  }
}

.about__item-img {
  border-radius: 16px;

  @media (768px <= width) {
    display: block;
    flex: 1 1 0;
    width: 100%;
    height: fit-content;
    max-width: 460px;
    min-width: 0;
    border-radius: 16px;
  }
}

.about__item-title {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;

  @media (768px <= width) {
    margin-top: 0;
    font-size: 28px;
  }
}

.about__item-sentence-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  color: #fff;

  @media (768px <= width) {
    margin-top: 25px;
  }
}

.about__item-sentence {
  font-size: 14px;
  font-weight: 400;
  line-height: 2.2;
}

.about__card-items {
  display: grid;
  position: relative;
  margin-top: 64px;

  @media (768px <= width) {
    display: grid;
    gap: 40px 24px;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    width: 100%;
    max-width: 1032px;
    margin-top: 97px;
    margin-inline: auto;
  }
}

.about__card-item-balloon {
  position: absolute;
  top: -16px;
  left: 50%;
  width: auto;
  height: 40px;
  transform: translateX(-50%);
}

.about__card-item {
  padding-block: 24px;
  padding-inline: 16px;
  background-color: #fff;
  position: relative;

  &:not(:first-of-type) {
    margin-top: 24px;

    @media (768px <= width) {
      margin-top: 0;
    }
  }

  @media (768px <= width) {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-inline: 24px;
  }
}

.about__card-item-body {
  margin-top: 16px;

  @media (768px <= width) {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

.about__card-item-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.about__card-item-sentence {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;

  @media (768px <= width) {
    flex-grow: 1;
  }
}

.about__card-item-btn {
  max-width: 311px;
  margin-top: 16px;

  @media (768px <= width) {
    padding-block: 14px;
  }
}


/* カートモーダル */
.qty-counter {
  --qty-border1: #ccc;
  --qty-border2: #adb5bd;
  --qty-bg: #fff;
  --qty-btn-bg: #fff;
  --qty-btn-bg-hover: #f1f3f5;
  --qty-icon-color: #212529;
  --qty-text: #212529;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}


.product-card__cart-btn-wrap {
  margin-top: 8px;

  .btn__icon {
    path {
      fill: #fff;
    }
  }

  .btn__text {
    font-size: 14px;
    @media (768px <= width) {
      font-size: 16px;
    }
  }
}

.cart-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}
.cart-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.cart-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cart-modal.is-open .cart-modal__overlay {
  opacity: 1;
}
.cart-modal__sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px 16px 32px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cart-modal.is-open .cart-modal__sheet {
  transform: translateY(0);
}

.cart-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #212529;
}

.cart-modal__content {
  width: min(100%, 560px);
  margin-inline: auto;
}


.cart-modal__product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #ADB5BD;
}
.cart-modal__img-wrap {
  width: 100px;
  flex-shrink: 0;
  @media (768px <= width) {
    width: 200px;
  }
}

.cart-modal__img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.cart-modal__info {
  flex: 1;
}
.cart-modal__name {
  color: #212529;
  font-family: var(--font-family-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
}

.cart-modal__price-wrap {
  margin-top: 12px;
}

.cart-modal__price {
  font-size: 14px;
}
.cart-modal__price-number {
  font-size: 20px;
  font-weight: 700;
}



.cart-modal__options {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}

.product-option-item {
  display: flex;
  flex-direction: column;

  select {
    color: #212529;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%; /* 16px */

    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px !important;
    height: auto;
    padding: 8px 16px;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1701_27654' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1701_27654)'%3E%3Cpath d='M11.4747 14.4755L7.84971 10.8505C7.79971 10.8005 7.76221 10.7464 7.73721 10.688C7.71221 10.6297 7.69971 10.5672 7.69971 10.5005C7.69971 10.3672 7.74554 10.2505 7.83721 10.1505C7.92887 10.0505 8.04971 10.0005 8.19971 10.0005H15.7997C15.9497 10.0005 16.0705 10.0505 16.1622 10.1505C16.2539 10.2505 16.2997 10.3672 16.2997 10.5005C16.2997 10.5339 16.2497 10.6505 16.1497 10.8505L12.5247 14.4755C12.4414 14.5589 12.358 14.6172 12.2747 14.6505C12.1914 14.6839 12.0997 14.7005 11.9997 14.7005C11.8997 14.7005 11.808 14.6839 11.7247 14.6505C11.6414 14.6172 11.558 14.5589 11.4747 14.4755Z' fill='%23212529'/%3E%3C/g%3E%3C/svg%3E")!important;
    background-repeat: no-repeat;
    background-size: 24px 24px !important;
  }

  input {
    color: #212529;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%; /* 16px */

    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #ADB5BD !important;
    border-radius: 4px !important;
    height: auto;
    padding: 8px 12px;
  }
}

.product-option-item__label {
  color: #212529;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%; /* 16px */

  + * {
    margin-top: 12px;
  }
}

.product-option-item__control {
  
}



.cart-modal__quantity {
  margin-top: 24px;
}
.cart-modal__quantity .qty-counter {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cart-modal__quantity .qty-counter__label {
  font-size: 14px;
  font-weight: 700;
}
.cart-modal__quantity .qty-counter__control {
  display: grid;
  overflow: hidden;
  align-items: center;
  grid-template-columns: 40px 1fr 40px;
  width: min(154px, 100%);
  background: var(--qty-bg);
  border: 1px solid var(--qty-border1);
  border-radius: 4px;
}
.cart-modal__quantity .qty-counter__btn {
  display: grid;
  height: 42px;
  background: var(--qty-btn-bg);
  border: 0;
  cursor: pointer;
  place-items: center;

  @media (768px <= width) {
    height: 40px;
  }
}

.cart-modal__quantity .qty-counter__btn:hover {
  background: var(--qty-btn-bg-hover);
}

.cart-modal__quantity .qty-counter__btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.cart-modal__quantity .qty-counter__icon {
  width: 24px;
  height: 24px;

  path {
    fill: var(--qty-icon-color);
  }
}

.cart-modal__quantity .qty-counter__input {
  width: 100%;
  height: 100%;
  font-family: var(--font-family-latin);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--qty-text);
  border: none;
  border-right: 1px solid var(--qty-border2);
  border-left: 1px solid var(--qty-border2);
  outline: none;
  appearance: textfield;
}

.cart-modal__quantity .qty-counter__input::-webkit-inner-spin-button,
.cart-modal__quantity .qty-counter__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-modal__action {
  margin-top: 20px;

  .btn__icon {
    path {
      fill: #fff;
    }
  }
}

.cart-modal__action .product-controls__cart-btn {
  width: 100%;
  max-width: 100%;
}