/*******************************
  PRICE BASE – Category Top (Rebuilt)
  ・画像はPC/SPとも最上段
  ・口コミはSPで確実に横スク（iOS安定）
  ・テキスト右端切れを防止
*******************************/

/* --- 基本レイアウト --- */
.pb-hero{
  background:#fffdf9;
  border:1px solid #eee;
  border-radius:12px;
  padding:24px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  margin-bottom:24px;
}
.pb-hero, .pb-hero *{ box-sizing:border-box; }
.pb-hero__inner{
  display:flex;
  flex-direction:column;       /* 画像→テキストの縦積み */
  gap:16px;
  min-width:0;                 /* 子の縮み防止 */
}
.pb-hero__copy{ min-width:0; }
.pb-title{ font-size:clamp(22px,4vw,36px); font-weight:800; color:#111; margin:6px 0; line-height:1.25; }
.pb-badges{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.pb-chip{ background:#f9f9f9; border:1px solid #ddd; padding:6px 12px; border-radius:999px; font-size:12px; }
.pb-chip--red{ background:#ffeaea; border-color:#ffcccc; color:#d62828; font-weight:700; }
.pb-catch{ font-size:15px; font-weight:600; color:#333; line-height:1.6; margin:.4em 0; }
.pb-list{ line-height:1.65; font-size:14px; margin:.6em 0; }
.pb-cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

.pb-btn{
  display:inline-block; background:#d62828; color:#fff;
  padding:12px 22px; border-radius:10px; font-weight:700; text-decoration:none;
  transition:background .2s;
}
.pb-btn:hover{ background:#b71d1d; }
.pb-btn.pb-btn--ghost{ background:#fff; color:#d62828; border:1px solid #f3b1b1; }

/* --- ヒーロー画像 --- */
.pb-hero__media{
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#fff;
}
.pb-hero__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* --- テキスト右端の切れ防止 --- */
.pb-hero p, .pb-hero .pb-catch, .pb-hero .pb-title,
.pb-tag, .pb-chip{ overflow-wrap:anywhere; word-break:break-word; }

/* --- 口コミ（画像ギャラリー） --- */
/* テーマが差し込む埋め込みは無効化し、画像リンクだけを並べる */
.pb-voices.pb-voices--images > :not(a.pb-voiceimg){ display:none !important; }

/* SP：nowrap + inline-block 方式（iOS安定） */
.pb-voices.pb-voices--images{
  display:block;
  width:100%; min-width:0;
  white-space:nowrap;              /* 横一列 */
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:6px 2px 10px;
  mask-image:none; -webkit-mask-image:none;
}
.pb-voices.pb-voices--images a.pb-voiceimg{
  display:inline-block;
  vertical-align:top; white-space:normal;
  width:78vw; min-width:240px; max-width:340px; /* 見せ幅（調整可） */
  margin-right:12px;
  border:1px solid #ddd; border-radius:10px; overflow:hidden;
  aspect-ratio:1648 / 1222;                  /* 安定したカード高さ */
  scroll-snap-align:start;
  text-decoration:none;
  line-height:0;                              /* 画像下の隙間を消す */
}
.pb-voices.pb-voices--images a.pb-voiceimg:last-child{ margin-right:0; }
.pb-voices.pb-voices--images a.pb-voiceimg img{
  display:block;
  width:100%; height:auto;                    /* ← 潰れ/見切れ防止 */
  object-fit:contain;
  -webkit-user-drag:none; user-select:none;
}

/* PC幅：横並びで見やすく（スクロールは残す） */
@media (min-width: 769px){
  .pb-voices.pb-voices--images{
    display:flex; gap:12px;
    overflow-x:auto; overflow-y:hidden;
  }
  .pb-voices.pb-voices--images a.pb-voiceimg{
    flex:0 0 clamp(220px, 30vw, 320px);
    width:auto; margin-right:0;
  }
}

/* --- ジャンルタグ --- */
.pb-genres{ background:#fff; border-radius:12px; padding:20px; box-shadow:0 6px 20px rgba(0,0,0,.05); }
.pb-genres__ttl{ text-align:center; margin:0 0 12px; color:#111; }
.pb-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pb-tag{
  padding:10px 16px; border-radius:999px; background:#fafafa; border:1px solid #ddd;
  text-decoration:none; color:#111; font-weight:600; transition:all .2s ease;
}
.pb-tag:hover{ background:#d62828; color:#fff; border-color:#d62828; }

/* --- Responsive 小調整 --- */
@media (max-width:768px){
  .pb-hero{ padding:18px; }
  .pb-list{ font-size:13px; }
}

/* --- テーマが自動で差し込むカテゴリ画像の抑止（必要時） --- */
.category-image, .c-category-image, .categoryHeaderImage, .cat-image, .category__image{
  display:none !important;
}