/* オトナプライス：作品の比較ページの見た目 */

/* 比較ページだけ、本文の幅を広げる（テーマ Twenty Twenty-Five の既定は 645px）。SAOMUSUと同じ 1180px */
body.op-single { --wp--style--global--content-size: 1180px; --wp--style--global--wide-size: 1180px; }

.op-work { --op-accent: #e08a00; --op-low: #e6f6ea; --op-low-text: #146c2e; --op-line: #e3e5ea; --op-muted: #6b7080;
  font-size: 15px; line-height: 1.7; }
.op-work h2 { font-size: 18px; font-weight: 800; margin: 0 0 12px; padding-left: 10px; border-left: 4px solid var(--op-accent); }
.op-work .op-section { margin: 32px 0 0; }

/* 上部：画像＋（品番・タイトル・最安値・PR表記） */
/* カバーを大きく（左 約6割）、右に 品番・タイトル・ジャンル・最安値 */
.op-work .op-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.op-work .op-cover img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.op-work .op-code { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #333; letter-spacing: .02em; }
.op-work .op-code span { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 4px; background: #2b2f3a; color: #fff;
  font-size: 11px; font-weight: 700; }
.op-work .op-title { margin: 0 0 16px; font-size: 20px; line-height: 1.5; font-weight: 700; }
/* ジャンルのタグ（カード） */
.op-work .op-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.op-work .op-genre { display: inline-block; padding: 4px 10px; border: 1px solid var(--op-line); border-radius: 6px; background: #f7f8fa;
  color: #3a3f4b !important; font-size: 12px; text-decoration: none; line-height: 1.5; }
.op-work .op-genre:hover { border-color: var(--op-accent); color: var(--op-accent) !important; }

/* 最安値の枠（小さめ。値段・販売サイト・ボタン・時点の注記） */
.op-work .op-best { background: #fff8ec; border: 1px solid #f3d9a8; border-radius: 10px; padding: 12px 14px; }
.op-work .op-best-label { margin: 0; font-size: 12px; color: #7a5a1c; font-weight: 700; }
.op-work .op-best-price { margin: 0; font-size: 26px; font-weight: 800; color: var(--op-accent); line-height: 1.3; }
.op-work .op-best-store { margin-left: 8px; font-size: 14px; font-weight: 700; color: #1e1e1e; }
.op-work .op-best-button { display: block; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--op-accent);
  color: #fff !important; font-weight: 800; text-align: center; text-decoration: none; font-size: 15px; }
.op-work .op-best-button:hover { filter: brightness(1.05); }
.op-work .op-checked { margin: 8px 0 0; font-size: 11px; color: var(--op-muted); line-height: 1.5; }
.op-work .op-pr { margin: 6px 0 0; font-size: 12px; color: var(--op-muted); }

/* 価格表 */
.op-work .op-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.op-work table { border-collapse: collapse; width: 100%; }
.op-work .op-table { min-width: 560px; }
.op-work .op-table th, .op-work .op-table td { border: 1px solid var(--op-line); padding: 10px; text-align: center; white-space: nowrap; }
.op-work .op-table thead th { background: #f4f5f8; font-size: 13px; }
.op-work .op-table tbody th { text-align: left; background: #fafbfc; }
.op-work .op-table td.op-low { background: var(--op-low); color: var(--op-low-text); font-weight: 800; }
.op-work .op-table s { color: #8a8f9c; font-size: 12px; }
.op-work .op-sale { display: inline-block; background: #d93636; color: #fff; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; }
.op-work .op-buy { display: inline-block; padding: 7px 14px; border-radius: 6px; background: var(--op-accent); color: #fff !important;
  font-weight: 700; text-decoration: none; font-size: 13px; }
.op-work .op-buy-wait { background: #c9ccd4; }

/* 作品情報 */
.op-work .op-info th, .op-work .op-info td { border-bottom: 1px solid var(--op-line); padding: 9px 10px; text-align: left; vertical-align: top; }
.op-work .op-info th { width: 8em; color: var(--op-muted); font-weight: 400; white-space: nowrap; }

/* カード（出演者・関連作品） */
.op-work .op-cards { display: grid; gap: 14px; }
.op-work .op-performers { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.op-work .op-related { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.op-work .op-card { display: flex; flex-direction: column; border: 1px solid var(--op-line); border-radius: 8px; overflow: hidden;
  background: #fff; color: inherit; text-decoration: none; }
.op-work a.op-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.op-work .op-card-media { display: flex; align-items: center; justify-content: center; background: #f1f2f5; overflow: hidden; }
.op-work .op-card-media-person { aspect-ratio: 1 / 1; }
.op-work .op-card-media-work { aspect-ratio: 3 / 2; }
.op-work .op-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-work .op-card-media-work img { object-fit: contain; }
.op-work .op-noimage { font-size: 11px; color: #9aa0ad; font-weight: 700; letter-spacing: .1em; }
.op-work .op-card-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.op-work .op-card-name { font-weight: 700; font-size: 14px; }
.op-work .op-card-sub { font-size: 11px; color: var(--op-muted); }
.op-work .op-card-title { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-work .op-card-price { font-size: 13px; font-weight: 800; color: var(--op-accent); }

@media (max-width: 720px) {
  .op-work .op-hero { grid-template-columns: 1fr; gap: 16px; }
  .op-work .op-title { font-size: 17px; }
  .op-work .op-best-price { font-size: 28px; }
}