/*******************************
  PRICE BASE – Category Top CSS
  （画像はPC/SPとも最上段、口コミはSPで横スク）
*******************************/

/* ====== HERO（共通） ====== */
.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__inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}
.pb-title{ font-size:clamp(22px,4vw,36px); font-weight:800; color:#111; margin:6px 0; }
.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; }
.pb-list{ max-width:460px; line-height:1.65; font-size:14px; }

.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{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#fff;
  box-shadow:none;
}
.pb-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pb-hero__media::before,
.pb-hero__media::after{ content:none; }

/* PCでも画像→テキスト（縦積み） */
.pb-hero--imgtop .pb-hero__inner{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.pb-hero--imgtop .pb-hero__media{ order:-1; }
.pb-hero--imgtop .pb-hero__copy{ max-width:880px; margin:0 auto; }

/* 内部横スクが潰れないように（flex/grid対策） */
.pb-hero, .pb-hero__inner, .pb-hero__copy{
  overflow:visible;
  touch-action:auto;
  min-width:0;
}

/* ====== REVIEWS（画像ギャラリー） ====== */
/* 余計な子要素（iframe/blockquote 等）が紛れても非表示にして画像のみ並べる */
.pb-voices.pb-voices--images > :not(.pb-voiceimg){ display:none !important; }

/* 横スクの土台：inline-block + nowrap 方式（テーマ衝突に強い） */
.pb-voices.pb-voices--images{
  position:relative; z-index:3;
  min-width:0; width:100%;
  display:block;               /* 子を横一列にするための土台 */
  white-space:nowrap;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  mask-image:none; -webkit-mask-image:none;
  padding:6px 2px 10px;
}

/* 子カード（1648x1222 比率・SPで70vwの見せ幅） */
.pb-voices.pb-voices--images .pb-voiceimg{
  display:inline-block; vertical-align:top; white-space:normal;
  width:70vw; max-width:320px;
  aspect-ratio:1648 / 1222;
  border:1px solid #ddd; border-radius:10px; overflow:hidden;
  text-decoration:none;
}
.pb-voices.pb-voices--images .pb-voiceimg img{
  width:100%; height:100%; object-fit:cover;
  -webkit-user-drag:none; user-select:none;
}

/* PCでは見やすい幅に（横スク継続でもOKなら削除可） */
@media (min-width:769px){
  .pb-voices.pb-voices--images{ white-space:normal; display:flex; gap:12px; }
  .pb-voices.pb-voices--images .pb-voiceimg{ display:block; width:clamp(200px, 32vw, 320px); }
}

/* ====== GENRES（タグボタン） ====== */
.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;
}

/* ====== 文字の右端切れ防止 ====== */
.pb-hero p, .pb-hero .pb-catch, .pb-hero .pb-title{
  overflow-wrap:anywhere; word-break:normal;
}