iframeのレスポンシブ化が上手く行きません

ifarameのレスポンシブが上手行きません。paddingの影響で画面を最大にした時に大きく余白があいてしまいます。

縮めた時
　　　　　埋め込みが切れてしまう

大きくした時
　　　　　paddingが大きい

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    <link rel="stylesheet" href="iframe.css">
10    <title>Document</title>
11</head>
12
13<body>
14
15    <!-- CONTACT -->
16    <div id="contact">
17        <div id="contact-top"></div>
18        <div class="iframe-wrap">
19            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdQk7zyuDI79SyoTAZK_PwATr6paabHzFTxLmR1XoU6_kzagg/viewform?embedded=true"
20                width="647" height="1040" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">読み込んでいます...</iframe>
21        </div>
22    </div>
23    <!-- FOOTER -->
24    <footer>
25        <p>&copy;2019 - saranshodo.</p>
26    </footer>
27</body>
28
29</html>
30

css
1
2
3@charset "utf-8";
4
5/* FONT  デフォルトで"Noto Sans Japanese" */
6@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
7
8
9/*
10html5doctor.com Reset Stylesheet
11v1.6.1
12Last Updated: 2010-09-17
13Author: Richard Clark - http://richclarkdesign.com
14Twitter: @rich_clark
15*/
16
17
18
19
20/*要素のフォントサイズやマージン・パディングをリセットしています*/
21html, body, div, span, object, iframe,
22h1, h2, h3, h4, h5, h6, p, blockquote, pre,
23abbr, address, cite, code,
24del, dfn, em, img, ins, kbd, q, samp,
25small, strong, sub, sup, var,
26b, i,
27dl, dt, dd, ol, ul, li,
28fieldset, form, label, legend,
29table, caption, tbody, tfoot, thead, tr, th, td,
30article, aside, canvas, details, figcaption, figure,
31footer, header, hgroup, menu, nav, section, summary,
32time, mark, audio, video {
33    margin:0;
34    padding:0;
35    border:0;
36    outline:0;
37    font-size:100%;
38    vertical-align:baseline;
39    background:transparent;
40    color: #383948;
41}
42
43/*行の高さをフォントサイズと同じにしています*/
44body {
45    line-height:1;
46    font-family: "Noto Sans Japanese", sans-serif;
47}
48
49
50
51/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
52article,aside,details,figcaption,figure,
53footer,header,hgroup,menu,nav,section {
54    display:block;
55}
56
57/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
58/*nav ul {
59    list-style:none;
60}*/
61ol, ul {
62    list-style: none;
63}
64
65
66/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
67a {
68    margin:0;
69    padding:0;
70    font-size:100%;
71    vertical-align:baseline;
72    background:transparent;
73    text-decoration: none;
74}
75
76/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
77また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
78mark {
79    background-color:#ff9;
80    color:#000;
81    font-style:italic;
82    font-weight:bold;
83}
84
85/*テキストに打ち消し線が付くようにしています*/
86del {
87    text-decoration: line-through;
88}
89
90/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
91また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
92abbr[title], dfn[title] {
93    border-bottom:1px dotted;
94    cursor:help;
95}
96
97
98/*縦方向の揃え位置を中央揃えに指定しています*/
99input, select {
100    vertical-align:middle;
101}
102
103/*画像を縦に並べた時に余白が出ないように*/
104img {
105    vertical-align: top;
106    font-size: 0;
107    line-height: 0;
108}
109
110/*box-sizingを全ブラウザに対応*/
111*, *:before, *:after {
112    -webkit-box-sizing: border-box;
113    -moz-box-sizing: border-box;
114    -o-box-sizing: border-box;
115    -ms-box-sizing: border-box;
116    box-sizing: border-box;
117}
118
119/* CONTACT */
120#contact {
121    width: 100%;
122    /* height: 1147px; */
123    height: auto;
124    padding-bottom: 110px;
125
126}
127
128#contact-top {
129    width: 100%;
130    height: 348px;
131    /* height: auto;
132    padding-top: 27.18%; */
133    background: url('img/contact_back.jpg');
134    background-repeat: no-repeat;
135    background-size: cover;
136}
137
138#contact .iframe-wrap {
139    position: relative;
140    width: 95%;
141    height: 0;
142    padding-top: 100.74%;
143    margin: -235px auto 0;
144}
145
146#contact .iframe-wrap iframe {
147    display: block;
148    position: absolute;
149    top: 0;
150    left: 0;
151    width: 100%;
152    height: 100%;
153}
154
155
156
157
158/* FOOTER */
159footer {
160    width: 100%;
161    height: 100px;
162    background-color: #494040;
163    text-align: center;
164}
165
166footer p {
167    font-size: 16px;
168    line-height: 100px;
169    font-weight: normal;
170    color: #ffffff;
171    letter-spacing: 0.2em;
172}
173
174