ニュースレター付きフッター

<footer class="d01-03-03-ft">
          <div class="d01-03-03-top">
            <div class="d01-03-03-news">
              <h4>ニュースレター登録</h4>
              <p>最新情報を月1回お届けします。</p>
              <form class="d01-03-03-form">
                <input type="email" placeholder="メールアドレス" required>
                <button type="submit">登録</button>
              </form>
              <span class="d01-03-03-msg" aria-live="polite"></span>
            </div>
            <nav class="d01-03-03-links">
              <a href="#">会社概要</a>
              <a href="#">サービス</a>
              <a href="#">ブログ</a>
              <a href="#">お問い合わせ</a>
              <a href="#">プライバシー</a>
              <a href="#">利用規約</a>
            </nav>
          </div>
          <div class="d01-03-03-copy">&copy; 2026 Mailbox Inc.</div>
        </footer>

.d01-03-03-ft{background:#101828;color:#cbd5e1;padding:20px;font-size:11px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center}
        .d01-03-03-top{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
        .d01-03-03-news h4{color:#fff;font-size:12px;margin:0 0 4px}
        .d01-03-03-news p{color:#94a3b8;font-size:10px;margin:0 0 8px}
        .d01-03-03-form{display:flex;gap:6px}
        .d01-03-03-form input{flex:1;min-width:0;padding:7px 8px;border:1px solid #334155;border-radius:6px;background:#1c2636;color:#fff;font-size:10.5px}
        .d01-03-03-form input:focus{outline:none;border-color:#6366f1}
        .d01-03-03-form button{padding:7px 12px;border:none;border-radius:6px;background:#6366f1;color:#fff;font-size:10.5px;cursor:pointer;transition:background .25s}
        .d01-03-03-form button:hover{background:#4f46e5}
        .d01-03-03-msg{display:block;margin-top:6px;color:#34d399;font-size:10px;min-height:12px}
        .d01-03-03-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;align-content:center}
        .d01-03-03-links a{color:#cbd5e1;text-decoration:none;transition:color .25s}
        .d01-03-03-links a:hover{color:#a5b4fc}
        .d01-03-03-copy{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#64748b;font-size:10px}

(function(){
        var root=document.getElementById('item-01-03-03');
        var form=root.querySelector('.d01-03-03-form');
        var msg=root.querySelector('.d01-03-03-msg');
        form.addEventListener('submit',function(e){
          e.preventDefault();
          msg.textContent='登録ありがとうございました。';
          form.reset();
        });
      })();