[PCデザイン設定]→[ヘッダー・フッター・レフトナビ]→[編集]から商品ページのヘッダー・フッター を設置しました。レスポンシブ対応に作ってあります。

[ヘッダー・フッター・レフトナビ]画面で iframeの中にwidth="1000px" height="670px" を指定すると正しく表示されますが、幅がレスポンシブではなくなってしまいます。
width="1000px" height="670px" を外してしまうと表示がおかしくなってしまいます（画像のとおり、幅が狭くなってしまう。）
商品ページのヘッダーフッター をレスポンシブ対応で正しく表示するにはどうしたら良いでしょうか？
[PCデザイン設定]→[ヘッダー・フッター・レフトナビ]→[編集]の画面では次のように指定しています。

【ヘッダー】
<iframe src="https//www.rakuten.ne.jp/gold/SHOP-URL/gold/header_ver1_rev06.html" width="1000px" height="670px" marginheight="0" scrolling="no" frameborder="0" align="center">お使いのブラウザはiframeに対応しておりません。iframe対応のブラウザでご覧いただきますようお願いいたします。</iframe>
<br>
<br>

【フッター】
<iframe src="https//www.rakuten.ne.jp/gold/SHOP-URL/gold/footer.html" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="1000px" height="1000px" name="footer">お使いのブラウザはiframeに対応しておりません。iframe対応のブラウザでご覧いただきますようお願いいたします。</iframe>