:root{
  --accent:#e88945;
  --accent-soft:#fde7d3;
  --ink:#222;
  --muted:#666;
  --bg:#fff;
  --radius:18px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85}

/* Wrap */
.onmoto-best5{max-width:1120px;margin:auto;padding:clamp(16px,3vw,32px)}
.onmoto-eyebrow{letter-spacing:.18em;font-weight:700;color:var(--accent);margin:0 0 6px}

/* Hero */
.best5-hero{text-align:center;padding:24px 0 48px}
.best5-title{font-size:clamp(26px,4vw,40px);margin:0}
h1.best5-title-img{padding: 0;}
.best5-lead{max-width:880px;margin:10px auto 0;color:var(--muted)}
.best5-lead strong{color:var(--accent)}

/* List layout */
.best5-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}

/* 1位は大きめ（カード横並び） */
.rank-1{
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:18px;
  padding:16px;border:1px solid #eee;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)
}

/* 2–5位は2カラムグリッド（PC） */
.rank-2,.rank-3,.rank-4,.rank-5{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:14px;border:1px solid #eee;border-radius:16px;background:#fff;box-shadow:var(--shadow)
}

.best5-thumb{
  position: relative;
}

/* ランキングアイコンを左上にオーバーレイ */
.best5-badge{
  position: absolute;
  left: 8px;           /* 余白はお好みで */
  top: 8px;
  width: 64px;         /* アイコンサイズ調整 */
  height: auto;
  z-index: 2;          /* 画像より前面に */
  pointer-events: none;/* クリックを妨げない */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}

/* 本文 */
.best5-name{margin:0 0 6px;font-size:clamp(18px,2.6vw,22px)}
.best5-price{margin:0 0 8px;font-size: 20px;font-weight:700;color:#e74c3c;}
.best5-price span:first-child {
  font-size: 13px;
  margin-right: 2px;
}
.best5_price span:last-child {
  font-size: 13px;
  color: #666;
  margin-left: 5px;
  font-weight: normal;
}
.best5-desc{margin:0 0 10px;color:#333}
.best5-action{margin:0}
.best5-button{
  display:inline-block;padding:10px 16px;border-radius:999px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  box-shadow:0 6px 18px rgba(232,137,69,.28);transition:transform .06s ease
}
.best5-button:hover{transform:translateY(-1px)}

/* レスポンシブ */
@media (min-width: 960px){
  .best5-list{grid-template-columns:1fr 1fr}
  .rank-1{grid-column:1/-1} /* 1位は横幅いっぱい */
}
@media (max-width: 959.98px){
  .best5-list{ grid-template-columns: 1fr; }

  /* ← ここを追加：rank-1 も 1カラムに */
  .best5-item{ grid-template-columns: 1fr; }
  /* 既存で .rank-2〜.rank-5 に 1fr を指定していたら、上の一行に集約でOK */

  /* （任意）スマホ時の余白を少し詰めたい場合 */
  .rank-1{ padding: 12px; gap: 12px; }
}
/* 免責注記を小さく・控えめに */
.best5-disclaimer{
  font-size:12px;
  line-height:1.6;
  color:#8a8a8a;
  display:inline-block;   /* 前の文と少し間を取りたい時は block に */
  margin-left:.25em;      /* ※の前後が詰まるのを軽減 */
  display:block; margin-top:4px;
}

/* スマホでも読みやすい最小値を担保したい場合（任意） */
@media (max-width: 480px){
  .best5-disclaimer{ font-size:11.5px; }
}

/* ===== 「福箱」選べる5タイプ ===== */
.best5-variants{
  list-style:none;
  margin:10px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* PCで2列 */
  gap:10px;
}
/* 以前の .best5-variant の display:flex; は不要に */
.best5-variant{
  padding:10px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
}

/* 見出し内のA〜Eを太字・差し色で表示（改行させない） */
.variant-badge{
  font-weight:700;
  color:var(--accent);   /* #e88945 */
  display:inline;
  margin-right:.4em;
  font-size:0.95em;      /* 見出しと馴染む程度 */
}

/* 見出しの余白微調整（任意） */
.variant-text h4{ margin:0; font-size:15px; color:var(--accent); }
.variant-text p { margin:0; font-size:14px; color:#333; }

.best5-variants-note{
  margin:8px 0 0;
  font-size:12px;
  color:#8a8a8a;
}

/* モバイルは1列表示 */
@media (max-width: 600px){
  .best5-variants{ grid-template-columns:1fr; }
}
/* PC表示のみ：1位のバッジを2倍に */
@media (min-width: 960px){
  .rank-1 .best5-badge{
    width: 100px;   /* 64pxの2倍 */
    height: auto;
    left: -40px;
    top: -50px;
  }
}

/* 念のため：モバイルは従来サイズ */
@media (max-width: 959.98px){
  .best5-badge{ width: 64px; }
  .rank-1 .best5-badge{
    left: -20px;
    top: -40px;
  }
}