@charset "UTF-8";
.product__container {
  --grid-columns: var(--grid-columns-mobile, 2);
  --grid-gap: 3rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}
@media screen and (min-width: 768px) {
  .product__container {
    --grid-columns: var(--grid-columns-desktop, 4);
    --grid-gap: 3rem 2rem;
  }
}
.product__container a:not(.c-button) {
  color: inherit;
  text-decoration: none;
}
.product__container .c-button {
  min-width: 0;
  width: 100%;
  padding-inline: 0;
}

.product__item {
  width: 100%;
}
.product__item--image {
  width: 100%;
  position: relative;
}
.product__item--soldout {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: grid;
  place-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.product__item--soldout-text {
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.product__item--icon {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-content: flex-start;
  position: absolute;
  bottom: 0;
  z-index: 2;
}
.product__item--id {
  color: var(--color-gray-500);
  display: block;
  margin: 1rem 0 0.5rem;
}
.product__item--variationname {
  margin-top: 1rem;
}
.product__item--name {
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  margin-top: 1.5rem;
}
.product__item--description {
  margin-top: 1rem;
}
.product__item--description:has(.product__item-text--description:empty) {
  display: none;
}
.product__item--price {
  margin-top: 1rem;
}
.product__item--text {
  margin-top: 0.8rem;
  font-size: 1.3rem;
}
.product__item--text dt {
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--color-gray-500);
}
.product__item--text dd {
  display: inline-block;
}
.product__item--actions {
  display: grid;
  row-gap: 1rem;
  margin-top: 1.5rem;
}
.product__item--actions__inner {
  display: contents;
}
.product__item--actions .c-button {
  padding-block: 0.65rem;
}
.product__item-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 1rem;
  height: 100%;
}
.product__item-text--name {
  font-size: 1.4rem;
}
.product__item-text--description {
  color: var(--color-gray-500);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.product__icon {
  display: grid;
  place-content: center;

  padding: .2rem .4rem;
  background-color: var(--color-cicon-bg, transparent);
  border: solid 1px var(--color-cicon-text, var(--color-text-default));
  border-radius: .2rem;

  color: var(--color-cicon-border, var(--color-text-default));
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: normal;
}

@media (min-width: 768px) {
  .product__icon {
    font-size: 1.2rem;
  }
}

.product__icon--3 {
  --color-cicon-border: var(--color-primary);
  --color-cicon-text: var(--color-primary);
}

/* ===============================================
  * 価格表示のスタイル *
=============================================== */
.product__price:nth-of-type(n+2) {
  margin-top: 0.75rem;
}
.product__price--item {
  width: fit-content;
  display: flex;
  align-items: baseline;
  column-gap: 0.5rem;
}
.product__price--icon {
  align-self: center;
  border: 1px solid var(--color-black);
  border-radius: 0.4rem;
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
}
.product__price--numeric {
  display: block;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .product__price--numeric {
    font-size: 1.6rem;
  }
}
.product__price--tax {
  display: block;
  font-size: 1rem;
}
.product__price--discountrate:not(:empty) {
  align-self: center;
  background-color: var(--color-emphasis);
  color: var(--color-white);
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.3rem 0.4rem;
}
.product__price--proper {
  color: var(--color-gray-400);
  position: relative;
}
.product__price--proper::after {
  width: 100%;
  height: 1px;
  background-color: var(--color-black);
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 2;
}
.product__price--discount {
  color: var(--color-emphasis);
}

/* ===============================================
  * ProductVariation.aspx のスタイル *
=============================================== */
@media screen and (min-width: 768px) {
  .product__closed-market-wrapper {
    width: min(80%, 50rem);
    margin: auto;
  }
}
.product__closed-market-content {
  display: grid;
  row-gap: 2rem;
}
.product__closed-market-input-content {
  display: grid;
  row-gap: 0.5rem;
}


/*
 * 最近チェックしたレッスン
 */

.productlist .global-contents__inner:has(#dvCheckList.product__history),
.productdetail .global-contents__inner:has(#dvCheckList.product__history) {
  padding-bottom: 0;
}

#dvCheckList.product__history {
  width: 100%;
  margin-block: 0;
  padding-block: 2rem 5rem;
  border-top: solid 4px var(--color-project-bg-beige-default);
}

@media (min-width: 768px) {
  #dvCheckList.product__history {
    margin-block: 0;
    padding-block: 3rem 5rem;
  }
}

#dvCheckList.product__history .c-heading {
  max-width: 88rem;
  margin-inline: auto;
  margin-bottom: 1rem;
  padding-inline: 1.5rem;

  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  line-height: calc(27 / 18);
}

@media (min-width: 768px) {
  #dvCheckList.product__history .c-heading {
    margin-bottom: 2.5rem;
    padding-inline: 0;

    font-size: 2.4rem;
    line-height: calc(36 / 24);
  }
}

#dvCheckList.product__history .js-historySlider {
  --common-product-slider-arrow-size: 4rem;
  --common-product-slider-arrow-top: 17%;
  position: relative;
  /* display: none; */
  /* opacity: 0; */
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 20rem;
  transition: opacity var(--transition-default);
}
#dvCheckList.product__history:not(:has(.swiper-slide)){
  display: none;
}

@media (max-width: 767px) {
  #dvCheckList.product__history .js-historySlider {
    overflow: hidden;
  }
}

#dvCheckList.product__history .js-historySlider:has(.swiper-initialized) {
  display: block;
  height: auto;
  opacity: 1;
}

#dvCheckList.product__history:not(:has(.swiper-initialized)) .swiper-button-prev,
#dvCheckList.product__history:not(:has(.swiper-initialized)) .swiper-button-next{
  display: none;
}

@media (min-width: 768px) {
  #dvCheckList.product__history .js-historySlider {
    --common-product-slider-arrow-top: 22%;
    height: 24.3rem;
    padding-inline: 0;
  }

  #dvCheckList.product__history .js-historySlider .common-product-slider__button--prev{
    left: -1.8rem;
  }

  #dvCheckList.product__history .js-historySlider .common-product-slider__button--next{
    right: -1.8rem;
  }

}

#dvCheckList.product__history .js-historySlider .swiper {
  display: grid;
}

#dvCheckList.product__history .js-historySlider .swiper-wrapper {
  min-width: 0;
}

#dvCheckList.product__history .js-historySlider .product__item {
  width: 100%;
}

.product__item .product__item--image {
  border-radius: 1rem;
  overflow: hidden;
}

#dvCheckList.product__history .js-historySlider .product__item .product__item--name {
  margin-top: .7rem;

  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  line-height: calc(16.9 / 13);

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
  #dvCheckList.product__history .js-historySlider .product__item .product__item--name {
    margin-top: 1rem;
  }
}

#dvCheckList.product__history .js-historySlider .product__item .product__item--price {
  display: none !important;
}

.swiper-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-width: .6rem;
  --swiper-pagination-bullet-height: .6rem;
  --swiper-pagination-color: var(--color-primary);
  --swiper-pagination-bullet-inactive-color: var(--color-project-ui-border-sub);
  --swiper-pagination-bullet-inactive-opacity: 1;

  position: static;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;

  margin-top: 2rem;
}

@media (min-width: 768px) {
  .swiper-pagination {
    margin-top: 3.6rem;
  }
}


.product__recommend .js-recommendSlider [class*="swiper-button-"] ,
#dvCheckList.product__history .js-historySlider [class*="swiper-button-"] {
  /* --swiper-navigation-top-offset: 3.4rem; */
  --swiper-navigation-top-offset: 18%;
  --swiper-navigation-sides-offset: -.5rem;
  --swiper-navigation-size: 4rem;

  width: var(--swiper-navigation-size);
  margin: 0;
}

@media (min-width: 768px) {
  .product__recommend .js-recommendSlider [class*="swiper-button-"] ,
  #dvCheckList.product__history .js-historySlider [class*="swiper-button-"] {
    /* --swiper-navigation-top-offset: 6rem; */
    --swiper-navigation-top-offset: 22%;
    --swiper-navigation-sides-offset: calc(var(--swiper-navigation-size) / 2 * -1);
  }
}

.product__recommend .js-recommendSlider [class*="swiper-button-"]::after ,
#dvCheckList.product__history .js-historySlider [class*="swiper-button-"]::after {
  content: none !important;
}