/* =========================================================
   kk-button：整列の最終整理（回り込み復活 + 本文左 + 表は中央）
   ========================================================= */

#kk-button{
  font-size:16px;
  line-height:1.9;
  color:#222;
}

#kk-button h2,
#kk-button .kk-detail-h2{
  font-size:26px !important;
  line-height:1.25 !important;
  margin:34px 0 14px !important;
}

/* 本文は左で読む（centerタグ由来の崩れも吸収） */
#kk-button p{
  margin:0 0 12px !important;
  text-align:left;
}
#kk-button p:empty{ display:none !important; }

/* ---------------------------
   1) 画像の基本：勝手に中央にしない
   --------------------------- */
/* 全imgを中央に寄せる指定を無効化（←ここが回り込みを殺してた） */
#kk-button img{
  max-width:100%;
  height:auto;
  margin:0;                 /* auto にしない */
  display:inline;           /* blockにしない（floatを殺さない） */
}

/* 例外：センターにしたい画像だけ */
#kk-button .kk-img-center{
  display:block;
  margin:12px auto 14px !important;
}

/* 例外：右回り込み画像（トップの貝写真用） */
#kk-button .kk-img-float-right{
  float:right;
  width:320px;              /* 好みで 280〜360 */
  max-width:45%;
  margin:0 0 12px 18px;     /* 左に余白 */
  display:block;            /* floatするならblockでOK */
}

/* SPは回り込み解除（読みやすさ優先） */
@media (max-width:640px){
  #kk-button .kk-img-float-right{
    float:none;
    max-width:100%;
    width:auto;
    margin:10px auto 14px;
  }
}

/* ---------------------------
   2) テーブル：画像+キャプションは中央、説明文は左
   --------------------------- */
#kk-button table{
  width:100%;
  border-collapse:collapse;
}

#kk-button td,
#kk-button th{
  vertical-align:top !important;
  line-height:1.7 !important;
}

/* サムネ並び（table1/2/3 の “画像＋短いキャプション” 部分は中央） */
#kk-button table.table1 td,
#kk-button table.table2 td,
#kk-button table.table3 td{
  text-align:center;
  padding:14px 10px;
}

/* テーブル内の画像は中央にしてOK（本文のfloatとは切り分け） */
#kk-button table td img{
  display:block;
  margin:0 auto 10px;
}

/* テーブル内キャプションのdiv/pも中央 */
#kk-button table td > div,
#kk-button table td p{
  margin:6px 0;
  text-align:center;
}

/* ただし “説明が長い段落” は左の方が読みやすい場合があるので、
   そうしたいセルに class="kk-td-left" を付ければ左になる */
#kk-button .kk-td-left,
#kk-button .kk-td-left *{
  text-align:left !important;
}

/* ---------------------------
   3) centerタグ：レイアウト崩しやすいので最低限の効果に抑える
   --------------------------- */
#kk-button center{
  display:block;
}
#kk-button center p{
  text-align:center;
}

/* 画像の説明（商品名行）だけ中央寄せ */
#kk-button .kk-btn-cap{
  text-align:center;
  font-weight:700;     /* 必要なければ外す */
  margin:0 0 10px;
}