/* =========================================================================
 * mh-bundle.css ／ ミツハシEC 5月改修 商品詳細ページ用 統合CSS
 *
 * 含まれる項目:
 *   - 共通アコーディオン基底（common/mh-accordion.css）
 *   - #2 商品説明SPアコーディオン
 *   - #3 個数 +/- ボタン
 *   - #4 返品カード＋特約ボタン
 *   - #5 入荷お知らせアコーディオン
 *   - #7+#8 スタッフレビュー
 *
 * 含まれない項目（別ファイル運用）:
 *   - #1 FVバナー：fv-banner.css は単独でテーマに貼る
 *   - #6 補完商品：recommend.css は保留中
 *
 * 反映方法:
 *   futureshop テーマ「共通CSS」または商品詳細レイアウトのスタイルに本ファイルを丸ごと貼り付ける。
 *
 * バージョン: 2026-05-30
 * ========================================================================= */

/* ===== common/mh-accordion.css （共通アコーディオン基底） ===== */
/* =========================================================================
 * 共通：アコーディオン基底スタイル
 *   - details/summary 形式（#5 入荷お知らせ、#4 返品）
 *   - クラス: .mh-accordion / .mh-accordion__summary / .mh-accordion__body
 *   - mh- プレフィックスで衝突回避
 *   - chevron はサマリーに対して position: absolute で右中央に固定
 *     （flex 任せだとサイト側CSSの影響で右下にずれることがあるため）
 * ========================================================================= */

.mh-accordion {
  --mh-acc-border: #d6e0ee;
  --mh-acc-bg: #fff;
  --mh-acc-text: #1a2b48;
  overflow: hidden;
}

.mh-accordion__summary {
  position: relative;          /* chevron の基準 */
  display: flex;
  align-items: center;
  padding: 14px 44px 14px 16px;/* 右側に chevron 用の余白を確保 */
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.mh-accordion__summary::-webkit-details-marker {
  display: none;
}

.mh-accordion__summary::marker {
  display: none;
  content: '';
}

.mh-accordion__title {
  flex: 1 1 auto;
  padding-bottom: 0!important;
}

.mh-accordion__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  color: #1b1b1b;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
  pointer-events: none;        /* クリックはサマリーで受ける */
}

.mh-accordion[open] .mh-accordion__chevron {
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 768px) {
  .mh-accordion__summary {
    padding: 12px 40px 12px 14px;
  }
  .mh-accordion__chevron {
    right: 14px;
  }
}

/* ===== 02-description-accordion/description-accordion.css （#2 商品説明SPアコーディオン） ===== */
/* =========================================================================
 * #2 商品説明（SPのみ）アコーディオン
 *  - 商品番号 `.fs-c-productNumber` を本文先頭に取り込み
 *  - PCはアコーディオンUI無効（ヘッダー非表示・本文は普通に表示）
 *  - SP（〜768px）のみ閉じ高95pxのヘッダーバー表示
 * ========================================================================= */

.mh-desc-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* PC（769px以上）: ヘッダーは非表示、ラッパーは透過扱い */
.mh-desc-accordion__header { display: none; }

/* SP のみ動作 */
@media (max-width: 768px) {
  .mh-desc-accordion {
    margin: 12px 0;
    border-block: 1px solid #ccc;
    overflow: hidden;
    background: #fff;
  }
  .mh-desc-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 85px;
    background: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 18px;
    color: #1b1b1b;
    -webkit-tap-highlight-color: transparent;
  }
  .mh-desc-accordion__header::before {
    content: "";
    background-color: #2559A8;
    width: 6px;
    height: 30px;
    position: absolute;
  }
  .mh-desc-accordion__title {
    flex: 0 0 auto;
    line-height: 1.4;
    padding-left: 20px;
  }
  .mh-desc-accordion__chevron {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: #000;
    transition: transform 0.25s ease;
  }
  .mh-desc-accordion.is-open .mh-desc-accordion__chevron {
    transform: rotate(180deg);
  }
  .mh-desc-accordion__body {
    display: none;
    padding: 12px 16px 16px;
  }
  .mh-desc-accordion.is-open .mh-desc-accordion__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

/* ===== 04-return-accordion/return-accordion.css （#4 返品アコーディオン） ===== */
/* =========================================================================
 * #4 返品アコーディオン用CSS（元 fs-p-card 構造を維持）
 *  - 共通アコーディオン基底（common/mh-accordion.css）を併用
 *  - fs-p-card / fs-p-card__title / fs-c-list の既定スタイルを整合
 *  - 返品特約は JS が本文スロットに移動。本文内ではボタン体裁にする
 * ========================================================================= */

.mh-accordion__summary {
  position: relative;
}

.fs-p-card__title {
  text-align: center;
}

.mh-accordion__chevron {
  position: absolute;
  right: 20px;
}

/* 返品特約：JS が本文スロットへ移動した先での体裁（ボタン） */
.mh-accordion__return-policy-slot {
  margin-top: 12px;
}
/* ===== 05-restock-notice-accordion/restock-notice.css （#5 入荷お知らせアコーディオン） ===== */
/* =========================================================================
 * #5 入荷お知らせアコーディオン 補助CSS
 *  - 元の .fs-p-card / .fs-p-card__title / .fs-p-card__message を保持しつつ
 *    details/summary 化するための調整のみ
 *  - 視覚は共通 mh-accordion.css がメインで担当
 * ========================================================================= */



/* ===== 07-08-staff-reviews/staff-reviews.css （#7+#8 スタッフレビュー） ===== */
/* =========================================================================
 * #7+#8 スタッフレビュー描画スタイル
 *  - 「参考になった」フッターはグッドボタン化（件数表示なし）
 *  - 押下で色変化 + 弾みアニメ + 周囲にスパーク放射
 * ========================================================================= */

section.mh-reviews {
    padding-top: 50px;
    border-top: 1px solid #ccc;
}

.mh-reviews__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mh-review {
  width: 100%;
  max-width: 800px;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}
.mh-review__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

/* 緑丸の人型アバター（カンプ準拠） */
.mh-review__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #5a8c5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mh-review__avatarIcon {
  width: 26px;
  height: 26px;
  color: #fff;
  display: block;
}

/* 名前 → 肩書き → 星 を縦並び */
.mh-review__author {
  padding-top: 5px;
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.2;
}
.mh-review__name {
  font-weight: 700;
  font-size: 14px;
  color: #1a2b48;
}
.mh-review__title {
  font-size: 12px;
  color: #666;
}
.mh-review__stars {
  margin-top: 3px;
  display: inline-flex;
  gap: 1px;
  color: #ddd;
  font-size: 14px;
  line-height: 1;
}
.mh-review__star.is-on {
  color: #f5a623;
}
.mh-review__headline {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 6px;
  color: #2559A8;
}
.mh-review__body {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #000;
  margin: 0;
}
/* ===== フッター（グッドボタン） ===== */
.mh-review__foot {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.mh-review__good {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible; /* スパークがはみ出して見えるように */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mh-review__good:hover {
  background: #f9fafb;
}
.mh-review__good:active {
  background: #f3f4f6;
}

.mh-review__goodIconWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  overflow: visible;
}

.mh-review__goodIcon {
  width: 100%;
  height: 100%;
  color: inherit;
  display: block;
}

/* 押下後の状態（色変化） */
.mh-review__good.is-pressed {
  background: #ffe6ed;
  border-color: #f5728a;
  color: #d33564;
}
.mh-review__good.is-pressed:hover {
  background: #ffd5e0;
}

/* 弾みアニメーション（押した瞬間に再生） */
.mh-review__good.is-burst {
  animation: mh-good-pop 0.45s ease-out;
}
@keyframes mh-good-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* スパーク（✨🎉💖 等） */
.mh-review__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  --tx: 0px;
  --ty: -30px;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: mh-spark-fly 0.85s ease-out forwards;
  z-index: 1;
}
@keyframes mh-spark-fly {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  60%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.6);
    opacity: 0;
  }
}

/* アニメーションを好まないユーザーには静かに */
@media (prefers-reduced-motion: reduce) {
  .mh-review__good.is-burst { animation: none; }
  .mh-review__spark { display: none; }
}

@media (max-width: 768px) {
  .mh-reviews__heading { font-size: 16px; }
  .mh-review { padding: 12px; }
  .mh-review__headline { font-size: 14px; }
  .mh-review__body { font-size: 13px; }
  .mh-review__good {
    padding: 8px 14px;
    font-size: 12px;
  }
}