@charset "utf-8";

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

:where(dialog:modal) {
  all: revert;
}

a,
button,
input:not([type=range]),
label,
select,
summary {
  touch-action: manipulation;
}

a,
button {
  cursor: revert;
}

dialog {
  max-width: none;
  max-height: none;
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  border: none;
  margin: 0;
}

.c-modal {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 20%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition-property: top, opacity, visibility;
  transition-duration: .5s;
  overflow-y: auto;
  z-index: 9999
}

.c-modal::backdrop {
  background-color: rgba(33, 37, 41, .8)
}

.c-modal[open] {
  top: 0;
  opacity: 1;
  visibility: visible
}

.c-modal__container {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  /* position: fixed; */
  top: 0;
  left: 0
}

.c-modal__content {
  display: block;
  background-color: #fff;
  margin-inline: auto;
  position: relative;
  z-index: 1
}


@media print,
screen and (min-width: 768px) {
  .c-modal__content {
    width: 100%;
    max-width: 1024px;
    margin-block: 144px
  }
}


@media screen and (min-width: 768px)and (max-width: 1024px) {
  .c-modal__content {
    width: 97.0703125%
  }
}


@media screen and (max-width: 767.98px) {
  .c-modal__content {
    width: 92%;
    margin-block: 136px
  }
}

.c-modal__close {
  display: block;
  background-color: #000;
  -webkit-mask-image: url("/assets/images/common-parts/icon/cross.svg");
  mask-image: url("/assets/images/common-parts/icon/cross.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  transition: opacity .3s
}


@media print,
screen and (min-width: 768px) {
  .c-modal__close {
    width: 40px;
    height: 40px
  }
}


@media screen and (max-width: 767.98px) {
  .c-modal__close {
    width: 32px;
    height: 32px
  }
}


@media(hover: hover) {
  .c-modal__close:not(.is-disabled-hover):hover {
    opacity: .75
  }
}


.c-modal-close-button {
  display: block;
  width: 100%;
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
  color: #005bac;
  padding: 7px 1em;
  border: solid 1px #d7dfe8;
  transition: opacity .3s
}


@media print,
screen and (min-width: 768px) {
  .c-modal-close-button {
    font-size: 1rem
  }
}


@media screen and (max-width: 767.98px) {
  .c-modal-close-button {
    font-size: .875rem
  }
}


@media(hover: hover) {
  .c-modal-close-button:not(.is-disabled-hover):hover {
    opacity: .75
  }
}


.c-add-cart-item__details {
  background-color: #f5f8fa;
  padding: 14px 16px;
  border-radius: 4px;
  margin-top: 8px;
  margin-bottom: 0;
}

.c-add-cart-item__detail {
  display: flex;
  align-items: baseline
}


@media print,
screen and (min-width: 768px) {
  .c-add-cart-item__detail {
    gap: 4px
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart-item__detail {
    gap: 2px
  }
}


@media print,
screen and (min-width: 768px) {
  .c-add-cart-item__term {
    font-size: 1.6rem
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart-item__term {
    font-size: 1.4rem
  }
}


.c-add-cart-item__term--discount {
  font-weight: bold;
  color: #dc3545;
  font-size: 1.4rem
}

.c-add-cart-item__discount {
  font-weight: bold;
  color: #dc3545;
  font-size: 1.4rem
}

.c-add-cart-item__price {
  margin: 0;
}

.c-add-cart-item-price {
  font-family: "Oswald", sans-serif;
  line-height: 1.5;
  margin: 0;
}

@media print,
screen and (min-width: 768px) {
  .c-add-cart-item-price {
    font-size: 2.2rem
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart-item-price {
    font-size: 2rem;
  }
}


.c-add-cart-item-price::before {
  content: "¥";
  margin-right: 4px
}


@media print,
screen and (min-width: 768px) {
  .c-add-cart-item-price::before {
    font-size: 1.7rem;
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart-item-price::before {
    font-size: 1.6rem;
  }
}


.c-add-cart-item-price::after {
  content: " (税込)／"attr(data-unit);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: normal;
  font-size: 1.3rem;
  color: #212529
}

.c-add-cart-item-price-text {
  line-height: 1.8
}

@media print,
screen and (min-width: 768px) {
  .c-add-cart-item-price-text {
    font-size: 1rem
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart-item-price-text {
    font-size: .8125rem
  }
}


@media print,
screen and (min-width: 768px) {
  .c-add-cart {
    padding: 48px 64px
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart {
    padding: 20px 20px 40px
  }
}


.c-add-cart__heading {
  text-align: center;
  font-weight: bold;
}

@media print,
screen and (min-width: 768px) {
  .c-add-cart__heading {
    font-size: 1.6rem;
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart__heading {
    font-size: 1.4rem;
  }
}


.c-add-cart__items {
  overflow-y: auto;
  max-height: 50vh;
  margin-top: 20px
}

.c-add-cart__item+.c-add-cart__item {
  margin-top: 20px
}

@media print,
screen and (min-width: 768px) {
  .c-add-cart__button {
    max-width: 305px;
    margin: 40px auto 0
  }
}


@media screen and (max-width: 767.98px) {
  .c-add-cart__button {
    margin-top: 32px
  }
}

.c-add-cart__close-button {
  display: block;
  width: fit-content;
  font-size: 1.3rem;
  text-decoration: underline;
  padding-bottom: 20px;
  margin-inline: auto
}

.c-add-cart__close-button:focus {
  outline: none;
}

.c-bullet-heading {
  color: #06408c;
  font-weight: bold;
  line-height: 1.8;
  padding-left: 20px;
  position: relative;
}

.c-bullet-heading::before,
.c-bullet-heading::after {
  content: "";
  display: inline-flex;
}

.c-bullet-heading::before {
  width: 12px;
  height: 12px;
  background-color: #06408c;
  border-radius: 2px;
  position: absolute;
  top: calc((1.8em - 12px) / 2);
  left: 0;
}


@media print,
screen and (min-width: 768px) {
  #js-add-products {
    padding: 48px 64px 20px 64px;
  }

  .c-bullet-heading {
    font-size: 1.6rem;
  }


}


@media screen and (max-width: 767.98px) {
  #js-add-products {
    padding: 20px;
  }

  .c-bullet-heading {
    font-size: 1.4rem;
  }

}


.c-cart-confirm-button {
  display: flex;
  justify-content: center;
  width: 100%;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #fff;
  background-color: #005bac;
  padding: 11px .5em;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 4px 10px 0px rgba(31, 114, 208, .2);
  transition: opacity .3s;
}

.c-cart-confirm-button:hover {
  color: #fff;
}

.c-cart-confirm-button__text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
}

.c-cart-confirm-button__text::after {
  content: attr(data-cart-count);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  color: #005bac;
  background-color: #fff;
  border-radius: 50%;
}

.c-add-cart-item__quantity {
  font-size: 1.6rem;
  margin: 0;
}


@media (hover: hover) {
  .c-cart-confirm-button:not(.is-disabled-hover):hover {
    opacity: .8;
  }
}