ヒーロー16点 取扱中

テキストヒーローText Only

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:44px 24px 12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:2px;color:#D7000F;">NEW ARRIVAL</td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:28px;font-weight:bold;line-height:1.4;color:#26221F;">
      夏の新作が、届きました。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:14px 32px 40px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
      風を通す軽やかな一着から、朝晩の冷え込みに備える羽織ものまで。今季のラインナップが揃いました。
    </td>
  </tr>
</table>

画像+見出しヒーローImage Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td>
      <a href="https://example.com/" target="_blank">
        <img src="https://example.com/your-image.jpg" width="600" height="300" alt="キャンペーンのメインビジュアル" style="display:block;width:100%;max-width:600px;height:auto;border:0;background-color:#E5DFD0;font-family:Arial,sans-serif;font-size:16px;color:#26221F;">
      </a>
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:24px 24px 8px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:24px;font-weight:bold;line-height:1.5;color:#26221F;">
      秋の贈りもの特集、はじまりました
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 32px 36px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
      敬老の日から年末のご挨拶まで。のし・ラッピングは無料でお承りします。
    </td>
  </tr>
</table>

背景色ヒーローSolid Banner

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#2B5EA7" style="background-color:#2B5EA7;">
  <tr>
    <td align="center" style="padding:46px 24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:26px;font-weight:bold;line-height:1.5;color:#ffffff;">
            会員限定プログラムのご案内
          </td>
        </tr>
        <tr>
          <td align="center" style="padding:12px 0 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#D9E4F5;">
            背景はbgcolor属性+インラインの二重指定で全クライアント対応。
          </td>
        </tr>
        <tr>
          <td align="center">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                <td align="center" bgcolor="#ffffff">
                  <a href="https://example.com/" target="_blank" style="display:inline-block;border:solid 13px #ffffff;border-left-width:38px;border-right-width:38px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;line-height:1.2;color:#2B5EA7;text-decoration:none;background-color:#ffffff;">詳しく見る</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

クーポンヒーローCoupon Code

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:36px 24px 6px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:22px;font-weight:bold;line-height:1.5;color:#26221F;">
      いつもありがとうございます
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#5F584E;">
      感謝を込めて、10%OFFクーポンをお届けします。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 36px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
          <td align="center" style="border:2px dashed #D7000F;padding:16px 40px;font-family:'Courier New',monospace;font-size:22px;font-weight:bold;letter-spacing:4px;color:#D7000F;background-color:#FDF3F3;">
            THANKS10
          </td>
        </tr>
        <tr>
          <td align="center" style="padding:8px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:11px;color:#5F584E;">
            有効期限: 2026年7月31日 / お会計時にご入力ください
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

セール告知ヒーローSale Splash

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#26221F" style="background-color:#26221F;">
  <tr>
    <td align="center" style="padding:44px 24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;font-weight:bold;letter-spacing:3px;color:#E8B93B;">SUMMER FINAL</td>
        </tr>
        <tr>
          <td align="center" style="padding:8px 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:52px;font-weight:bold;line-height:1.1;color:#ffffff;">
            MAX <span style="color:#E8B93B;">70%</span> OFF
          </td>
        </tr>
        <tr>
          <td align="center" style="padding:10px 0 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.7;color:#CFC9BE;">
            7月7日(火) 23:59まで / 対象1,200点以上
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

イベント案内ヒーローEvent Invite

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td width="120" valign="top" align="center" bgcolor="#D7000F" style="background-color:#D7000F;padding:20px 10px;">
      <span style="font-family:Arial,sans-serif;font-size:13px;font-weight:bold;color:#ffffff;">JUL</span><br>
      <span style="font-family:Arial,sans-serif;font-size:40px;font-weight:bold;line-height:1.2;color:#ffffff;">18</span><br>
      <span style="font-family:Arial,sans-serif;font-size:12px;color:#F5C9CC;">SAT 14:00</span>
    </td>
    <td valign="middle" style="padding:16px 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;border:1px solid #D2CBBB;border-left:none;">
      <span style="font-size:18px;font-weight:bold;line-height:1.5;color:#26221F;">オンラインセミナー開催</span><br>
      <span style="font-size:13px;line-height:1.8;color:#5F584E;">参加無料・アーカイブ配信あり。</span><br>
      <a href="https://example.com/" target="_blank" style="font-size:13px;font-weight:bold;color:#D7000F;text-decoration:underline;">お申し込みはこちら &#8594;</a>
    </td>
  </tr>
</table>

カウントダウンヒーローCountdown Timer

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#26221F" style="background-color:#26221F;">
  <tr>
    <td align="center" style="padding:40px 24px 8px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:3px;color:#E8B93B;">LIMITED TIME OFFER</td>
        </tr>
        <tr>
          <td align="center" style="padding:8px 0 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:24px;font-weight:bold;line-height:1.4;color:#ffffff;">セール終了まで、あとわずか</td>
        </tr>
        <tr>
          <td align="center">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                <td align="center" style="padding:0 6px;">
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="62" bgcolor="#ffffff" style="background-color:#ffffff;width:62px;">
                    <tr><td align="center" style="padding:10px 0 2px;font-family:'Courier New',monospace;font-size:26px;font-weight:bold;color:#26221F;">02</td></tr>
                    <tr><td align="center" style="padding:0 0 8px;font-family:Arial,sans-serif;font-size:10px;color:#5F584E;">日</td></tr>
                  </table>
                </td>
                <td align="center" style="padding:0 2px;font-family:Arial,sans-serif;font-size:22px;font-weight:bold;color:#E8B93B;">:</td>
                <td align="center" style="padding:0 6px;">
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="62" bgcolor="#ffffff" style="background-color:#ffffff;width:62px;">
                    <tr><td align="center" style="padding:10px 0 2px;font-family:'Courier New',monospace;font-size:26px;font-weight:bold;color:#26221F;">14</td></tr>
                    <tr><td align="center" style="padding:0 0 8px;font-family:Arial,sans-serif;font-size:10px;color:#5F584E;">時間</td></tr>
                  </table>
                </td>
                <td align="center" style="padding:0 2px;font-family:Arial,sans-serif;font-size:22px;font-weight:bold;color:#E8B93B;">:</td>
                <td align="center" style="padding:0 6px;">
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="62" bgcolor="#ffffff" style="background-color:#ffffff;width:62px;">
                    <tr><td align="center" style="padding:10px 0 2px;font-family:'Courier New',monospace;font-size:26px;font-weight:bold;color:#26221F;">39</td></tr>
                    <tr><td align="center" style="padding:0 0 8px;font-family:Arial,sans-serif;font-size:10px;color:#5F584E;">分</td></tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td align="center" style="padding:22px 0 40px;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                <td align="center" bgcolor="#E8B93B" style="background-color:#E8B93B;">
                  <a href="https://example.com/" target="_blank" style="display:inline-block;padding:13px 38px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;color:#26221F;text-decoration:none;">今すぐ購入する</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

ビッグタイポグラフィヒーローBig Type Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:56px 24px 4px;font-family:Georgia,'Hiragino Mincho ProN',serif;font-size:15px;letter-spacing:4px;color:#8C8475;">NEW COLLECTION</td>
  </tr>
  <tr>
    <td align="center" style="padding:0 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:58px;font-weight:900;line-height:0.98;color:#26221F;">
      AUTUMN<br><span style="color:#D7000F;">STORIES</span>
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:24px 40px 48px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
      写真の代わりに、大きな文字だけで魅せるヒーロー。画像ブロック環境でも世界観が崩れません。
    </td>
  </tr>
</table>

動画サムネイル風ヒーローVideo Thumbnail

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td background="https://example.com/your-image.jpg" bgcolor="#1B2430" width="600" height="320" valign="middle" align="center" style="background-image:url('https://example.com/your-image.jpg');background-size:cover;background-position:center;background-color:#1B2430;padding:40px 24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
          <td align="center" bgcolor="#ffffff" style="background-color:#ffffff;width:64px;height:64px;border-radius:32px;font-family:Arial,sans-serif;font-size:20px;color:#26221F;line-height:64px;">&#9658;</td>
        </tr>
      </table>
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td align="center" style="padding:18px 24px 0;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;font-weight:bold;letter-spacing:1px;color:#ffffff;">再生時間 1:42 ・ 導入事例インタビュー</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:20px 24px 40px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#5F584E;">
      約3分の動画で、新機能の使い方をご紹介しています。通勤中の気分転換にもどうぞ。
    </td>
  </tr>
</table>

画像オーバーレイヒーローOverlay Text Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td background="https://example.com/your-image.jpg" bgcolor="#1B2430" width="600" height="360" valign="middle" align="center" style="background-image:url('https://example.com/your-image.jpg');background-size:cover;background-position:center;background-color:#1B2430;padding:60px 24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:3px;color:#E8B93B;">LIMITED COLLECTION</td>
        </tr>
        <tr>
          <td align="center" style="padding:10px 0 20px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:34px;font-weight:bold;line-height:1.3;color:#ffffff;">
            景色の中に、<br>物語がある。
          </td>
        </tr>
        <tr>
          <td align="center">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
              <tr>
                <td align="center" bgcolor="#ffffff">
                  <a href="https://example.com/" target="_blank" style="display:inline-block;padding:13px 36px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;color:#1B2430;text-decoration:none;">コレクションを見る</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

画像+テキスト スプリットヒーローSplit Image Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td width="280" valign="top">
      <img src="https://example.com/your-image.jpg" width="280" height="320" alt="商品のメインビジュアル" style="display:block;width:280px;height:320px;border:0;background-color:#E5DFD0;font-family:Arial,sans-serif;font-size:14px;color:#26221F;">
    </td>
    <td width="320" valign="middle" style="padding:24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
      <span style="font-size:11px;font-weight:bold;letter-spacing:2px;color:#D7000F;">NEW IN</span><br>
      <span style="font-size:22px;font-weight:bold;line-height:1.5;color:#26221F;">スタッフの愛用品、集めました</span><br>
      <span style="font-size:13px;line-height:1.8;color:#5F584E;">今季の新作から、スタッフが実際に愛用しているアイテムだけを選びました。</span><br><br>
      <a href="https://example.com/" target="_blank" style="font-size:13px;font-weight:bold;color:#D7000F;text-decoration:underline;">詳しく見る &#8594;</a>
    </td>
  </tr>
</table>

実績数字ヒーローStats Banner

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:44px 24px 6px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:3px;color:#2B5EA7;">TRUSTED BY</td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:24px;font-weight:bold;line-height:1.5;color:#26221F;">
      選ばれ続けて、10年。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 44px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
          <td align="center" width="150" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
            <span style="font-size:34px;font-weight:bold;color:#D7000F;">98%</span><br>
            <span style="font-size:12px;color:#5F584E;">満足度</span>
          </td>
          <td width="1" bgcolor="#D2CBBB" style="background-color:#D2CBBB;font-size:0;line-height:0;">&nbsp;</td>
          <td align="center" width="150" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
            <span style="font-size:34px;font-weight:bold;color:#D7000F;">12,000</span><br>
            <span style="font-size:12px;color:#5F584E;">導入社数</span>
          </td>
          <td width="1" bgcolor="#D2CBBB" style="background-color:#D2CBBB;font-size:0;line-height:0;">&nbsp;</td>
          <td align="center" width="150" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;">
            <span style="font-size:34px;font-weight:bold;color:#D7000F;">4.9</span><br>
            <span style="font-size:12px;color:#5F584E;">平均評価</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

パーソナライズ挨拶ヒーローWelcome Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:48px 24px 16px;">
      <img src="https://example.com/your-image.jpg" width="72" height="72" alt="" style="display:block;width:72px;height:72px;border-radius:36px;border:0;background-color:#E5DFD0;">
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 6px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:13px;color:#5F584E;">ようこそ</td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:30px;font-weight:bold;line-height:1.4;color:#26221F;">
      田中 様、はじめまして。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:14px 40px 32px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
      ご登録ありがとうございます。まずはアカウントの初期設定から始めましょう。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:0 24px 48px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
          <td align="center" bgcolor="#D7000F" style="background-color:#D7000F;">
            <a href="https://example.com/" target="_blank" style="display:inline-block;padding:14px 40px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:15px;font-weight:bold;color:#ffffff;text-decoration:none;">初期設定をはじめる</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

グラデーションメッシュヒーローGradient Mesh Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="center" bgcolor="#2B5EA7" style="background-color:#2B5EA7;background-image:linear-gradient(135deg,#2B5EA7 0%,#5B7FD1 45%,#E8B93B 100%);padding:0;">
      <!--[if mso]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
      <v:fill type="gradient" color="#2B5EA7" color2="#E8B93B" angle="45" />
      <v:textbox inset="0,0,0,0">
      <![endif]-->
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" style="padding:52px 32px 12px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;font-weight:bold;letter-spacing:3px;color:#ffffff;">BRAND STORY</td>
        </tr>
        <tr>
          <td align="center" style="padding:0 32px 16px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:30px;font-weight:bold;line-height:1.4;color:#ffffff;">
            色が、気分をつくる。
          </td>
        </tr>
        <tr>
          <td align="center" style="padding:0 44px 44px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#EAF0FB;">
            新しいカラーコレクションが本日より登場。8色のなかから、今日の気分に合う一色を。
          </td>
        </tr>
      </table>
      <!--[if mso]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

ビフォーアフター比較ヒーローBefore / After Split

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;margin:0 auto;">
  <tr>
    <td align="center" style="padding:40px 24px 4px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:24px;font-weight:bold;line-height:1.5;color:#26221F;">
      この変化を、ご覧ください。
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:8px 24px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.8;color:#5F584E;">
      築25年のキッチンが、3日間の工事で生まれ変わりました。
    </td>
  </tr>
  <tr>
    <td>
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td width="298" valign="top" style="padding:0 1px 0 0;position:relative;">
            <img src="https://example.com/your-image.jpg" width="298" height="240" alt="施工前の写真" style="display:block;width:100%;max-width:298px;height:auto;border:0;background-color:#E5DFD0;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:-32px;">
              <tr>
                <td bgcolor="#26221F" style="background-color:#26221F;padding:6px 16px;font-family:Arial,sans-serif;font-size:11px;font-weight:bold;letter-spacing:1px;color:#ffffff;">BEFORE</td>
              </tr>
            </table>
          </td>
          <td width="298" valign="top" style="padding:0 0 0 1px;">
            <img src="https://example.com/your-image.jpg" width="298" height="240" alt="施工後の写真" style="display:block;width:100%;max-width:298px;height:auto;border:0;background-color:#E5DFD0;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:-32px;">
              <tr>
                <td bgcolor="#D7000F" style="background-color:#D7000F;padding:6px 16px;font-family:Arial,sans-serif;font-size:11px;font-weight:bold;letter-spacing:1px;color:#ffffff;">AFTER</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center" style="padding:32px 24px 44px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
          <td align="center" bgcolor="#D7000F" style="background-color:#D7000F;">
            <a href="https://example.com/" target="_blank" style="display:inline-block;padding:13px 38px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;font-weight:bold;color:#ffffff;text-decoration:none;">施工事例をもっと見る</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

ダークモード対応ヒーローDark Mode Adaptive Hero

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#F0EBE0" class="dm-bg" style="background-color:#F0EBE0;">
  <tr>
    <td align="center" style="padding:48px 24px 8px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;max-width:600px;">
        <tr>
          <td align="center" class="dm-title" style="font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:26px;font-weight:bold;line-height:1.5;color:#26221F;">
            どちらの明るさでも、読みやすく。
          </td>
        </tr>
        <tr>
          <td align="center" class="dm-body" style="padding:12px 32px 28px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:14px;line-height:1.9;color:#5F584E;">
            朝の通勤中も、寝る前のベッドでも。あなたの端末の明るさに合わせて表示をお届けします。
          </td>
        </tr>
        <tr>
          <td align="center" style="padding:0 24px 48px;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="dm-card" style="border:1px solid #D2CBBB;background-color:#ffffff;">
              <tr>
                <td align="center" style="padding:18px 24px;font-family:Arial,'Hiragino Sans','Yu Gothic',sans-serif;font-size:12px;line-height:1.7;" class="dm-body">
会員限定の先行販売は8月1日(土)10:00スタートです
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

@media (prefers-color-scheme: dark) {
  .dm-bg { background-color: #1B1815 !important; }
  .dm-title { color: #F5F1E8 !important; }
  .dm-body { color: #C9C2B4 !important; }
  .dm-card { background-color: #26221F !important; border-color: #46403A !important; }
}