/* =====================================================================
*
*    商品等賞当選確率一覧/productPrizeProbabilityList
*
* =================================================================== */

.probability_list_container {
  margin-block: 4rem;
}

.probability_list_title {
  margin-block-end: 1.6rem;
}

.probability_list {
  --border-probability-list: 1px solid #E0E0E0;
  width: 100%;
  margin-block-end: 0.8rem;
  border-collapse: collapse;
  border-top: var(--border-probability-list);
  table-layout: auto;
}

.probability_item :where(td) {
  padding-block: 0.8rem;
  text-align: left;
  border-bottom: var(--border-probability-list);
}
.probability_item :where(td + td) {
  padding-inline-start: 0.8rem;
}


.probability_item_name1 {
}
.probability_item--icon {
  display: block;
  width: 100%;
  padding: .2rem 1rem .4rem 1.2rem;
  color: #f7f7f7;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  border-radius: 2rem;
  background: var(--color-text-primary);
  white-space: nowrap;
}
.probability_item--icon span {
  font-size: 0.8rem;
}

.probability_item_name2 {
  width: 100%;
}

.probability_item_probability {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
}

.probability_list_notice {
  color: var(--color-secondary-2);
}

@media (min-width: 768px) {
  .probability_item--icon {
    font-size: 1.4rem;
  }
  .probability_item--icon span {
    font-size: 1.0rem;
  }
  .probability_item_name2 {
    font-size: 1.6rem;
  }
  .probability_item_probability {
    font-size: 1.6rem;
  }
}

/* アコーディオン */
.probability_accordion {
  display: grid;
  align-content: start;
}
.probability_accordion--content {
  --probability-tr-height: calc((1.2rem * 1.5) + (0.2rem + 0.4rem) + (0.8rem * 2) + 1px); /* .probability_item--icon の高さ*/
  --probability-show-lines: 4; 
}
.probability_accordion--content:has(tbody > tr:nth-child(5)) {
  max-height: calc((var(--probability-tr-height) * var(--probability-show-lines)) + 1px);
  overflow: hidden;
  transition: max-height 0.5s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 95%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.probability_accordion:not(:has(tbody > tr:nth-child(5))) .probability_accordion--toggle {
  display: none;
}
.probability_accordion--toggle {
  justify-self: center;
  z-index: 10;
  display: flex;
  gap: 0.4rem;
  margin-block-start: -1.2rem;
  padding: 1.2rem 2rem;
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
}
.probability_accordion--toggle .c-accordion__summary-icon {
  --color-bg-accordion: #fff;
  --color-shape-accordion: var(--color-primary);
  width: 1.4rem;
  transition: rotate var(--transition-default);
}
.probability_accordion[data-state-probability-accordion="open"] .c-accordion__summary-icon {
  rotate: -180deg;
}
.probability_accordion[data-state-probability-accordion="open"] .probability_accordion--content {
  -webkit-mask-image: none;
  mask-image: none;
}
.probability_accordion[data-state-probability-accordion="open"] .probability_accordion--toggle {
  margin-block-start: 0;
}
@media (min-width: 768px) {
  .probability_accordion--content {
    --probability-tr-height: calc((1.4rem * 1.5) + (0.2rem + 0.4rem) + (0.8rem * 2) + 1px);
  }
}