.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1152 / 400;
  max-width: 1152px;
  margin: 0 auto; /* 中央寄せ */
  overflow: hidden;
}

.hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が歪まないようにトリミング */
  aspect-ratio: 1152 / 400;
}

.hero-slider .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が歪まないようにトリミング */
  opacity: 0;
  animation: fadeSlide 15s infinite; /* 3枚で15秒（1枚あたり5秒） */
}

/* 各画像のアニメーション開始タイミングをずらす */
.hero-slider .hero-slide:nth-child(1) {
  animation-delay: 0s;
}
.hero-slider .hero-slide:nth-child(2) {
  animation-delay: 5s;
}
.hero-slider .hero-slide:nth-child(3) {
  animation-delay: 10s;
}

/* フェード切り替えのアニメーション定義 */
@keyframes fadeSlide {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1; /* ふわっと表示 */
  }
  33% {
    opacity: 1; /* 表示をキープ */
  }
  43% {
    opacity: 0; /* ふわっと消える */
  }
  100% {
    opacity: 0;
  }
}

.product-detail {
  color: var(--white-deep);
}

.product-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2.5vw, 32px); 
    margin-bottom: clamp(16px, 2.5vw, 32px);
}

.product-info-col {
    flex: 1;
    min-width: calc(50% - 24px); /* PC時は2カラム */
    background: var(--box-background-highlight);
    border: 1px solid #e0e0e0;
    border-radius: clamp(8px, 1vw, 16px);
    padding: clamp(16px, 2.5vw, 32px); 
    box-shadow: 5px 5px 8px var(--box-shadow-strong);
    display: flex;
    flex-direction: column;
}

.product-info-head-line {
    margin-top: 0;
    margin-bottom: clamp(12px, 1.5vw, 24px);
    color: var(--white-deep);
    border-bottom: 2px solid var(--white-light);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.3;
    position: relative;
    padding-left: 15px;
}

.product-info-head-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 6px;
    background: var(--blue-medium);
    border-radius: 3px;
}

.media-row {
    display: flex;
    gap: clamp(12px, 2vw, 24px);
}

.media-row.ratio-40-60 > div:nth-child(1) {
    flex: 0 0 40%;
    max-width: 40%;
    height: fit-content;
    align-self: flex-start;

}
.media-row.ratio-40-60 > div:nth-child(2) {
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;

}

table tr:nth-child(even) {
  background-color: var(--table-row-hilight);
}

table td:nth-child(2) {
  white-space: nowrap;
  vertical-align: middle;
}

table th,
table td {
  text-align: center;
  border-left: 1px solid var(--white-light);
  border-right: 1px solid var(--white-light);
 
}

@media (max-width: 768px) {
  .product-info-col {
      min-width: 100%; 
  }

}

@media (max-width: 480px) {
  .product-info-col {
      padding: 16px;
  }

  .media-row.ratio-40-60 {
      flex-direction: column;
      gap: 16px;
  }

  /* 1番目の子要素（画像）は幅100%にしつつ、中身を中央寄せにする */
  .media-row.ratio-40-60 > div:nth-child(1) {
      flex: none;
      width: 100%;
      max-width: 100%;
      display: flex;       /* 追加：中の画像を中央にするため */
      justify-content: center; /* 追加：中央寄せ */
  }

  /* 2番目の子要素（テキスト）はそのまま幅100% */
  .media-row.ratio-40-60 > div:nth-child(2) {
      flex: none;
      width: 100%;
      max-width: 100%;
  }

  /* reset.cssの block を上書きして中央に配置できるようにする */
  .media-row.ratio-40-60 > div:nth-child(1) img {
      display: inline-block; 
  }

  table tr:nth-child(even) {
  background-color: var(--table-row-hilight-strong);
  }
}