<svg viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg" font-family="'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif">
  <defs>
    <linearGradient id="titleUnderlineSetupCustomDomain" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#79bb74"/>
      <stop offset="1" stop-color="#55aae2"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="1200" height="675" fill="#ffffff"/>

  <!-- タイトル -->
  <text x="600" y="46" text-anchor="middle" font-size="26" font-weight="700" fill="#2d2d2d">独自ドメイン接続の設定手順</text>
  <rect x="460" y="62" width="280" height="4" rx="2" fill="url(#titleUnderlineSetupCustomDomain)"/>

  <!-- ステップ1 -->
  <rect x="90" y="160" width="280" height="260" rx="14" fill="#f4f9f3" stroke="#79bb74" stroke-width="2"/>
  <circle cx="230" cy="160" r="24" fill="#79bb74"/>
  <text x="230" y="168" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff">1</text>
  <text x="230" y="216" text-anchor="middle" font-size="17" font-weight="700" fill="#3f6b3c">ホスト名を</text>
  <text x="230" y="238" text-anchor="middle" font-size="17" font-weight="700" fill="#3f6b3c">登録する</text>
  <rect x="114" y="254" width="232" height="1" fill="#c9ddc7"/>
  <text x="130" y="284" font-size="13.5" fill="#4a4a4a">・「独自ドメイン」画面で</text>
  <text x="130" y="306" font-size="13.5" fill="#4a4a4a">　example.com 等を入力</text>
  <text x="130" y="332" font-size="13.5" fill="#4a4a4a">・www有無は別々に登録</text>
  <text x="130" y="358" font-size="13.5" fill="#4a4a4a">・Standardプラン以上が必要</text>
  <rect x="114" y="384" width="232" height="30" rx="15" fill="#79bb74"/>
  <text x="230" y="404" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">「登録する」を押す</text>

  <!-- 矢印1 -->
  <line x1="378" y1="290" x2="404" y2="290" stroke="#a9a9a9" stroke-width="2.5"/>
  <polygon points="404,282 404,298 416,290" fill="#a9a9a9"/>

  <!-- ステップ2 -->
  <rect x="424" y="160" width="280" height="260" rx="14" fill="#f2f8fc" stroke="#55aae2" stroke-width="2"/>
  <circle cx="564" cy="160" r="24" fill="#55aae2"/>
  <text x="564" y="168" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff">2</text>
  <text x="564" y="216" text-anchor="middle" font-size="17" font-weight="700" fill="#2f6a91">CNAME・TXTを</text>
  <text x="564" y="238" text-anchor="middle" font-size="17" font-weight="700" fill="#2f6a91">ドメイン側で設定</text>
  <rect x="448" y="254" width="232" height="1" fill="#bcdcea"/>
  <text x="464" y="284" font-size="13.5" fill="#4a4a4a">・CNAME／ALIAS（接続用）</text>
  <text x="464" y="306" font-size="13.5" fill="#4a4a4a">・TXT（ホスト名検証用）</text>
  <text x="464" y="332" font-size="13.5" fill="#4a4a4a">・TXT（SSL証明書検証用）</text>
  <text x="464" y="358" font-size="13.5" fill="#4a4a4a">・値は管理会社の画面へ登録</text>
  <rect x="448" y="384" width="232" height="30" rx="15" fill="#55aae2"/>
  <text x="564" y="404" text-anchor="middle" font-size="12.5" font-weight="700" fill="#ffffff">ドメイン管理会社側で作業</text>

  <!-- 矢印2 -->
  <line x1="712" y1="290" x2="738" y2="290" stroke="#a9a9a9" stroke-width="2.5"/>
  <polygon points="738,282 738,298 750,290" fill="#a9a9a9"/>

  <!-- ステップ3 -->
  <rect x="758" y="160" width="280" height="260" rx="14" fill="#fdf1e7" stroke="#e0894a" stroke-width="2"/>
  <circle cx="898" cy="160" r="24" fill="#e0894a"/>
  <text x="898" y="168" text-anchor="middle" font-size="20" font-weight="700" fill="#ffffff">3</text>
  <text x="898" y="216" text-anchor="middle" font-size="17" font-weight="700" fill="#a85a1e">検証して</text>
  <text x="898" y="238" text-anchor="middle" font-size="17" font-weight="700" fill="#a85a1e">反映を確認</text>
  <rect x="782" y="254" width="232" height="1" fill="#f0d5b8"/>
  <text x="798" y="284" font-size="13.5" fill="#4a4a4a">・反映まで最大24〜48時間</text>
  <text x="798" y="310" font-size="13.5" fill="#4a4a4a">・「設定済み」（緑）で完了</text>
  <text x="798" y="336" font-size="13.5" fill="#4a4a4a">・「確認中」「取得待ち」</text>
  <text x="798" y="358" font-size="13.5" fill="#4a4a4a">　「失敗」の表示もあり</text>
  <rect x="782" y="384" width="232" height="30" rx="15" fill="#e0894a"/>
  <text x="898" y="404" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">「いま検証する」を押す</text>

  <!-- フッター -->
  <rect x="90" y="460" width="948" height="86" rx="12" fill="#f5f5f3"/>
  <text x="564" y="494" text-anchor="middle" font-size="16" font-weight="700" fill="#2d2d2d">ホスト名登録 → DNS設定 → 検証、の3ステップで接続が完了する</text>
  <text x="564" y="522" text-anchor="middle" font-size="13.5" fill="#4a4a4a">設定に不安がある場合は、有料の「ドメイン設定代行」オプションも利用できる</text>
</svg>
