@charset "utf-8";
/* 広告エリアを中央にする */
.adver{
  width: 100%;
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;
  margin: 20px 0;
}

/* 楽天広告の一番外側のtableを中央に */
.adver > table{
  margin: 0 auto !important;
}

/* 504pxの箱：大きくしすぎない＆中央 */
.adver div[style*="width:504px"]{
  width: 504px !important;     /* 基本は504px固定 */
  max-width: 92vw !important;  /* スマホでは画面に収まる */
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* 中のtableも崩れ防止 */
.adver div[style*="width:504px"] > table{
  width: 100% !important;
}

/* 画像がはみ出さないように */
.adver img{
  max-width: 100% !important;
  height: auto !important;
}

/* スマホ時：2列→縦並びにする */
@media screen and (max-width: 600px){

  /* 2つのtdを縦に積む */
  .adver td{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 商品画像の幅をスマホ向けに調整 */
  .adver td[style*="width:240px"]{
    width: 100% !important;
    text-align: center !important;
  }

  /* 右側（説明文側）も幅100% */
  .adver td[style*="width:248px"]{
    width: 100% !important;
  }

  /* ボタンが変な位置にならないように */
  .adver div[style*="float:right"]{
    float: none !important;
    width: 100% !important;
    margin-top: 8px;
  }

  /* 赤い「楽天で購入」ボタンが切れるのを防ぐ */
.adver a div[style*="background-color:#bf0000"]{
  width: auto !important;        /* 41%を無効化 */
  max-width: 100% !important;
  box-sizing: border-box;
  float: none !important;        /* 右寄せ解除 */
  display: inline-block !important;
  white-space: nowrap;           /* 文字折り返し防止 */
}

/* もし右側がまだ詰まる場合は、余白も調整 */
.adver a div[style*="background-color:#bf0000"]{
  padding: 0 10px !important;
}
}