/* ============================================================
   メルマガ「単独ページ版」用のスマホ対応
   ------------------------------------------------------------
   メール本体は 600px 固定幅で組んである（メールクライアント互換のため）。
   その HTML をそのまま Web ページとして公開すると、スマホで横にはみ出す。
   このファイルは「メール本体には一切手を入れず」に、
   Web で見たときだけ画面幅に合わせて折り返すための上書き。

   ★ ブレークポイントを 599px にしている理由
     登録ページ（/mailmagazine/）のプレビューは 600px 幅の iframe で
     読み込んでいる。600px ちょうどは PC と同じ見た目のままにしたいので、
     599px 以下だけレスポンシブに切り替える。
   ============================================================ */

html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

@media (max-width: 599px) {

  /* --- 外枠（本体 600px）と内部の固定幅テーブルを画面幅に --- */
  table[width="600"],
  table[width="572"],
  table[width="536"],
  table[width="320"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- 固定レイアウトを解除して、セルが折り返せるようにする --- */
  table[style*="table-layout:fixed"] { table-layout: auto !important; }
  colgroup col { width: auto !important; }

  /* --- 左右の余白を少し詰めて本文の幅を稼ぐ --- */
  td[style*="padding:36px 14px"],
  td[style*="padding:34px 14px"],
  td[style*="padding:32px 14px"],
  td[style*="padding:30px 14px"],
  td[style*="padding:28px 14px"],
  td[style*="padding:26px 14px"],
  td[style*="padding:24px 14px"],
  td[style*="padding:22px 14px"],
  td[style*="padding:20px 14px"],
  td[style*="padding:18px 14px"],
  td[style*="padding:16px 14px"],
  td[style*="padding:14px 14px"],
  td[style*="padding:0 14px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- 数値表：右端の金額が改行で潰れないように --- */
  td[style*="white-space:nowrap"] { white-space: normal !important; }

  /* --- Kindle・書籍の表紙（左110px＋右テキスト）を縦積みに --- */
  td[style*="width:110px"] {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    padding-bottom: 14px !important;
  }
  td[style*="width:110px"] + td { display: block !important; width: 100% !important; }
  td[style*="width:110px"] img { margin: 0 auto !important; }

  /* --- 記事リンクカードのサムネ（88px角）は縮めない --- */
  td[style*="width:88px"] { width: 88px !important; display: table-cell !important; }

  /* --- 見出しを少しだけ小さく（長いタイトルの2行目が窮屈になるため） --- */
  h1 { font-size: 21px !important; line-height: 1.5 !important; }
}

/* --- さらに狭い端末（iPhone SE など） --- */
@media (max-width: 375px) {
  td[style*="padding"] { padding-left: 13px !important; padding-right: 13px !important; }
  h1 { font-size: 19.5px !important; }
}