/* ===== 品の枠（全サイト共通。_社長の仕組み/tools/品の枠/。ビルドのたびにサイトの public/itembox.css に写る。本人の見本＝ポチップの枠 2026-11-07）=====
   サイトの global.css に書かない。直すのはこのファイルだけ
   ボタンはパソコンでは横に3つ・同じ大きさ（幅は3等分。文字は枠の幅に合わせて小さくし、2行に折らない＝2026-11-08 本人）。スマホだけ縦 */
.itembox { position: relative; display: flex; gap: 28px; align-items: flex-start; margin: 8px 0 36px; padding: 28px 28px 24px; background: #fff; border: 1px solid #ececec; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); }
.itembox__img { flex: 0 0 160px; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.itembox__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.itembox__img--none { background: #f5f5f5; border-radius: 4px; }
.itembox__body { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
.itembox .itembox__name { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.45; color: #333; }
.itembox .itembox__price { margin: 0 0 6px; font-size: 17px; color: #333; }
.itembox__note { margin-left: 8px; font-size: 13px; color: #666; }
.itembox .itembox__review { margin: 0 0 6px; font-size: 15px; }
.itembox__reviewlink { display: inline-flex; align-items: center; gap: 4px; color: #4a8fa8; text-decoration: none; }
.itembox__reviewlink:hover { text-decoration: underline; }
.itembox__btns { display: flex; gap: 10px; }
.itembox__btnwrap { flex: 0 1 calc((100% - 20px) / 3); min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.itembox__bubble { display: block; min-height: 1.5em; margin: 0 0 4px; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.5; }
.itembox__bubble[hidden] { display: block; visibility: hidden; }
.itembox__btn { display: block; white-space: nowrap; padding: 12px 4px; border-radius: 3px; color: #fff !important; font-size: clamp(12px, 2.7cqi, 17px); letter-spacing: 0.02em; overflow: hidden; text-align: center; text-decoration: none; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); transition: opacity 0.15s, transform 0.15s; }
.itembox__btnwrap:only-child { flex-basis: 100%; } /* Amazon だけの品は横いっぱい（2026-11-08 本人の見本） */
.itembox__btn:hover { opacity: 0.88; transform: translateY(-1px); }
.itembox__btn--amazon { background: linear-gradient(#f2ab4c, #e9993a); }
.itembox__btn--rakuten { background: linear-gradient(#d95b52, #c9463d); }
.itembox__btn--yahoo { background: linear-gradient(#6a9be8, #5385dc); }
.itembox__btn--official { background: linear-gradient(#3f9a72, #2f7d5b); margin-bottom: 4px; }
.itembox__btnwrap:nth-child(1) .itembox__bubble { color: #e9993a; }
.itembox__btnwrap:nth-child(2) .itembox__bubble { color: #c9463d; }
.itembox__btnwrap:nth-child(3) .itembox__bubble { color: #5385dc; }
.itembox__official { margin: 10px 0 0; }
.itembox__official .itembox__bubble { color: #2f7d5b; }
.itembox .itembox__credit { position: absolute; right: 12px; bottom: 4px; margin: 0; font-size: 10px; line-height: 1.4; }
.itembox__credit a { color: #aaa !important; text-decoration: none; }
/* ASP の案件の枠（2026-11-08 本人の見本）。外側はサイトのボタンの <div class="cta" data-box="offer">。ボタンはサイトの cta__button のまま
   画像はバナーの横長に合わせて左に広め・右に名前／一言／値段／ボタン／詳しい記事へのボタン・下に固定の文 */
.cta[data-box="offer"] { position: relative; display: grid; grid-template-columns: 240px 1fr; column-gap: 28px; align-items: start; margin: 8px 0 36px; padding: 26px 26px 18px; background: #fff; border: 1px solid #ececec; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); text-align: left; }
.cta[data-box="offer"]:not(:has(.offerbox__img)) { grid-template-columns: 1fr; }
.offerbox__img { display: block; }
.offerbox__img img { display: block; width: 100%; height: auto; border-radius: 3px; }
.offerbox__body { display: flex; flex-direction: column; min-width: 0; }
.offerbox__name { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.45; color: #333; }
.offerbox__lead { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: #444; }
.offerbox__price { margin: 0 0 14px; font-size: 15px; color: #555; }
.cta[data-box="offer"] .cta__button { margin: 0 0 10px; font-size: 16px; }
.offerbox__detail { display: block; padding: 11px 12px; border-radius: 6px; background: #5385dc; color: #fff !important; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 3px 0 #3c69b5; }
.offerbox__detail:hover { opacity: 0.9; }
.cta[data-box="offer"] .cta__fixed { grid-column: 1 / -1; margin-top: 12px; text-align: left; font-size: 12px; }
.cta[data-box="offer"] .ad-imp { position: absolute; width: 1px; height: 1px; }
.offerbox__scene { margin: 28px 0 6px; padding-left: 10px; border-left: 4px solid #e9993a; font-size: 17px; font-weight: 700; color: #333; }
@media (max-width: 599px) {
  .cta[data-box="offer"] { grid-template-columns: 1fr; row-gap: 12px; padding: 16px 14px 14px; }
  .cta[data-box="offer"] .cta__button { font-size: 15px; }
  .offerbox__img img { max-height: 170px; object-fit: cover; }
}
@media (max-width: 599px) {
  .itembox { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px 24px; }
  .itembox__img { flex-basis: auto; width: 100%; height: 150px; }
  .itembox .itembox__name { font-size: 17px; }
  .itembox__btns { flex-direction: column; gap: 6px; }
  .itembox__btnwrap { flex-basis: auto; }
  .itembox__btn { font-size: 16px; }
  .itembox__bubble--empty { display: none; }
  .itembox__bubble[hidden] { display: none; }
}