@charset "Shift_JIS";

/* --------------------------------------------------------------------
アコーディオンパネル（accordionPanel.js）
--------------------------------------------------------------------- */
.js-accordion button {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
}

.js-accordion .js-accordion_header {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.js-accordion .js-accordion_content {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.6s ease, opacity 0.6s ease;
}

/* 線の矢印（.arrow） */
.js-accordion .js-accordion_header .arrow {
  position: absolute;
  top: 40%;
  right: 5%;
  display: inline-block;
  width: 10px;
  aspect-ratio: 1;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  transform: rotate(-45deg);
  transition: transform 0.6s ease;
}

.js-accordion .js-accordion_header.opening-accordion .arrow {
  transform: rotate(135deg) !important;
}

/* --------------------------------------------------------------------
商品スライダー（itemSlider.js）
--------------------------------------------------------------------- */
.wrapper_:not(:has(.mainframe_)) .custom_item-slider {
  margin-top: 30px;
}

/* 中央揃えにする場合（非アクティブは透明） */
.wrapper_:not(:has(.mainframe_)) .custom_item-slider .swiper-slide {
  opacity: 0.6;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.wrapper_:not(:has(.mainframe_)) .custom_item-slider .swiper-slide-active {
  opacity: 1;
}

/* バレット */
.wrapper_:not(:has(.mainframe_)) .custom_item-slider .swiper-pagination {
  position: relative;
  bottom: 0;
  left: 0;
  margin-top: 20px;
}

.wrapper_:not(:has(.mainframe_)) .custom_item-slider .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgb(34, 34, 34, 30%);
  border-radius: 999px;
  transition: width 0.6s ease, background 0.6s ease;
}

.wrapper_:not(:has(.mainframe_)) .custom_item-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 26px;
  background: rgb(34, 34, 34, 60%);
}

/* --------------------------------------------------------------------
商品カード（removeExtraText.js / retrieveImage.js）
--------------------------------------------------------------------- */

.mainframe_ .event_ .goods_ ul.StyleS_Frame_,
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ {
  --fs-card-name : var(--fontsize-s); /* 商品カード：15px */
  --fs-card-price : var(--fontsize-l); /* 商品カード太字：18px */
  --fs-card-lead : var(--fontsize-1xs); /* 商品カードリード：14px */
}

/* 【PC】商品表示モード：リスト（.event_ > .goods_ > ul.StyleS_Frame_）
--------------------------------- */
.mainframe_ .event_ .goods_ ul.StyleS_Frame_ {
  display: grid;
  gap: 20px 15px;
  grid-template-columns: repeat(4, 1fr);
}

.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li {
  padding: 0;
  border: none;
  overflow: visible;
}

.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li > a {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  background: #fff;
  border-bottom: 0;
  overflow: hidden;
}

.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li > a:hover {
  text-decoration: none;
  opacity: 0.75;
}

.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li img {
  width: 100%;
}

/* 商品名 */
.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li .name_ a {
  display: -webkit-box;
  height: calc(var(--fs-card-name) * 1.4 * 2) !important;
  margin: 20px 0 0;
  font-size: var(--fs-card-name);
  line-height: 1.4;
  color: #222;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-decoration: none;
}

/* 値段 */
.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li .price_ {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 100%;
  margin-top: 10px;
  padding: 0;
  font-size: var(--fs-card-price);
  text-align: left;
  color: #222;
  flex-grow: 1;
}

.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li .price_::after {
  content: '(税込)';
  position: relative;
  bottom: 4px;
  font-size: var(--fs-card-lead);
  color: #222;
}

/* コメント文 */
.mainframe_ .event_ .goods_ ul.StyleS_Frame_ li .small_ {
  display: none;
}

/* 【SP】商品表示モード：なし（.event_ > .goods_ > ul.goods_p_.goods_list_wrapper_）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ {
  border: none;
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ li {
  background: #fff;
  border: 1px solid #222;
  border-radius: 10px;
  overflow: hidden;
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ li.swiper-slide-active {
  box-shadow: 0 0 4px rgb(34, 34, 34, 30%);
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ li a {
  padding: 20px;
}

/* 商品写真 */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .img_ {
  display: block;
  width: 100%;
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ img {
  width: 100%;
}

/* 商品情報 */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}

/* 商品名 */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .name_ {
  display: -webkit-box;
  height: calc(var(--fs-card-name) * 1.4 * 2) !important;
  margin: 20px 0 0;
  font-size: var(--fs-card-name);
  line-height: 1.4;
  color: #222;
  overflow: hidden;
  order: 1;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 値段 */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .price_box {
  margin-top: 10px;
  order: 2;
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .price_box .price_ {
  position: relative;
  font-size: var(--fs-card-price);
  text-align: left;
  color: #222;
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .price_box .price_::after {
  content: '(税込)';
  font-size: var(--fs-card-lead);
  color: #222;
}

/* コメント文 */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .comment_ {
  margin-top: 10px;
  order: 3;
}

.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .comment_ .small_ {
  display: -webkit-box;
  height: calc(var(--fs-card-lead) * 1.4 * 3) !important;
  font-size: var(--fs-card-lead);
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* アイコン */
.wrapper_:not(:has(.mainframe_)) .event_ .goods_ ul.goods_p_.goods_list_wrapper_ .desc_ .icon_ {
  display: none;
}