@charset "UTF-8";
/* ==========================================
 Layout
============================================*/
/* ==========================================
 Contents
============================================*/
.product {
  color: #2a2a2a;
  font-size: var(--sz-28);
  font-weight: 400;
  line-height: 1.44;
  padding-block: var(--sz-38) var(--sz-35);
}

.product__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: 1.53;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sz-43);
}
.product__heading::after {
  content: "";
  display: block;
  width: var(--sz-454);
  height: 1px;
  background-color: var(--color-primary);
}

/* 商品情報グリッド */
.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  overflow: hidden;
  gap: var(--sz-25);
  margin-bottom: var(--sz-50);
}

/* 商品画像を包むコンテナ */
.product__images {
  min-width: 0;
  width: 100%;
}

/* Slickの各スライドアイテム */
.slide-item {
  border: var(--sz-5) solid var(--color-primary);
  width: 100%;
}
.slide-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Slickの本体に横幅を強制 */
.item_visual {
  margin-bottom: var(--sz-24);
  width: 100%;
  max-width: 100%;
}

.item_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sz-20);
}

.slideThumb {
  width: var(--sz-160);
  opacity: 0.8;
  cursor: pointer;
}
.slideThumb img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

/* 商品情報 */
.product__profile {
  font-size: var(--sz-24);
  font-weight: normal;
  line-height: 1.5;
}

/** 商品名 */
.product__title {
  margin-bottom: var(--sz-12);
}

.product__name {
  font-size: var(--sz-32);
  font-weight: bold;
  line-height: 1.12;
}

/** 商品タグ */
.product__tags {
  margin-bottom: var(--sz-28);
  display: flex;
  flex-direction: column;
  gap: var(--sz-8);
}

.product__tag {
  color: #fff;
  font-size: var(--sz-24);
  font-weight: bold;
  line-height: 2.1;
  background-color: var(--bg-color, var(--color-primary));
  width: var(--sz-104);
  display: flex;
  padding: 0.2em 0.4em;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%);
}
.product__tag.tag_1 {
  --bg-color: #ff5177;
}
.product__tag.tag_2 {
  --bg-color: #6fa2ff;
}
.product__tag.tag_3 {
  --bg-color: #f7931e;
}

/** 商品価格 */
.product__regularPrice {
  font-size: var(--sz-26);
  color: var(--color-gray);
  line-height: 1.53;
}
.product__regularPrice s {
  text-decoration-thickness: var(--sz-3);
  text-decoration-color: var(--color-pink);
}

.product__sellingPrice {
  font-size: var(--sz-32);
  font-weight: bold;
  color: var(--color-price);
  line-height: 1.25;
  margin-bottom: var(--sz-30);
}

/** 商品カテゴリ */
.product__category {
  margin-bottom: var(--sz-24);
}
.product__category ul {
  list-style: disc inside;
  color: var(--color-blue);
}
.product__category ul a {
  color: inherit;
}

/** 商品アクション */
.product__actions {
  margin-bottom: var(--sz-34);
}

.product__numberInput {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
  font-size: var(--sz-28);
  font-weight: bold;
  line-height: 1.25;
}

.product__numberInput .form-control {
  display: inline-block;
  border-radius: var(--sz-5);
  color: inherit;
  border-color: var(--color-gray);
  width: 5em;
  font-size: var(--sz-28);
  text-align: center;
}

/* ボタン */
.add-cart {
  color: #fff;
  --bs-btn-disabled-color: #fff;
  font-size: var(--sz-24);
  aspect-ratio: 311/68;
  padding: 0;
  width: var(--sz-311);
  margin: 0;
}

.btn-favorite {
  color: #fff;
  background-color: var(--color-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-dark);
  --bs-btn-disabled-border-color: #fff;
  --bs-btn-disabled-bg: var(--color-dark);
  --bs-btn-hover-border-color: #fff;
  font-size: var(--sz-24);
  aspect-ratio: 311/68;
  padding: 0;
  width: var(--sz-311);
  margin: 0;
  margin-top: var(--sz-15);
}

/* 商品説明 */
.product__desc {
  font-size: var(--sz-28);
  font-weight: normal;
  line-height: 1.5;
}

/* フリーエリア */
.product__freearea {
  margin-top: var(--sz-50);
  font-size: var(--sz-24);
  font-weight: normal;
  line-height: 1.5;
}

@media screen and (min-width: 992px) {
  .product {
    font-size: var(--sz-20);
  }
  .product__heading {
    font-size: var(--sz-50);
    margin-bottom: var(--sz-30);
  }
  .product__body {
    padding-inline: var(--sz-30);
  }
  /* 商品情報グリッド */
  .product__grid {
    grid-template-columns: 1fr var(--sz-468);
    margin-bottom: var(--sz-32);
  }
  /* 商品画像 */
  .product__images {
    order: 1;
  }
  .item_visual {
    margin-bottom: var(--sz-30);
  }
  .slideThumb {
    width: var(--sz-115);
  }
  /* 商品情報 */
  .product__infos {
    order: 0;
  }
  .product__profile {
    font-size: var(--sz-16);
  }
  /** 商品名 **/
  /** 商品タグ **/
  .product__tags {
    margin-bottom: var(--sz-20);
    gap: var(--sz-4);
  }
  .product__tag {
    font-size: var(--sz-18);
    width: var(--sz-72);
  }
  /** 商品価格 **/
  .product__regularPrice {
    font-size: var(--sz-24);
  }
  .product__sellingPrice {
    font-size: var(--sz-24);
    margin-bottom: var(--sz-15);
  }
  /** 商品アクション **/
  .product__actions {
    margin-bottom: var(--sz-23);
  }
  .product__numberInput {
    font-size: var(--sz-20);
  }
  .product__numberInput .form-control {
    font-size: var(--sz-24);
  }
  /** 商品コード **/
  .product__code {
    margin-bottom: var(--sz-12);
  }
  /** 商品カテゴリ **/
  .product__category {
    margin-bottom: var(--sz-32);
  }
  /* ボタン */
  .add-cart {
    width: 100%;
    aspect-ratio: 336/68;
  }
  .btn-favorite {
    aspect-ratio: 336/68;
    width: 100%;
  }
  /* 商品説明 */
  .product__desc {
    font-size: var(--sz-20);
  }
  /* フリーエリア */
  .product__freearea {
    font-size: var(--sz-20);
  }
}
/* ==========================================
 Modal
============================================*/
.modal-confirm .modal-header {
  padding: var(--sz-15);
  border-bottom: none;
}
.modal-confirm .modal-header .btn-close {
  position: static;
  aspect-ratio: 1;
  height: var(--sz-25);
  background: transparent var(--bs-btn-close-bg) center/cover no-repeat;
  margin-left: auto;
}
.modal-confirm .modal-content {
  border-radius: 0;
}
.modal-confirm .modal-body {
  padding: 0 var(--sz-50) var(--sz-50);
}
.modal-confirm__lead {
  text-align: center;
  font-size: var(--sz-36);
}
.modal-confirm__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sz-30);
}
.modal-confirm__actions > .btn {
  flex: 1 1 50%;
  aspect-ratio: 3/1;
  margin-bottom: 0;
  padding: 0;
}