スマホをレシポンシブ表示にしたい

前提

ここに質問の内容を詳しく書いてください。

スマホ表示した時に画像が縮小されているので、
HTMLとCSSで大きくしたいです。

実現したいこと

スマホ表示
レシポンシブデザインはHTMLとCSSのみで対応したい

発生している問題・エラーメッセージ

スマホ表示すると、全体が小さく見える。

該当のソースコード(HTML)

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>ロサンゼルスで成功した男 vs 女性問題で全てを失った男</title> <link rel="stylesheet" href="files/audioplayer.2016.css" /> <link rel="stylesheet" href="files/style.css" /> <script src="files/jquery-1.10.2.min.js"></script> <script src="files/audioplayer.2016.min.js"></script> <script> $(function() { $('audio').audioPlayer(); });

   // var _send = false;
   // function formsend(e) {
   // if( _send ) return false;
   // e.innerHTML = "感想を送信しています...";
   // e.disabled = true;
   // e.className = 'btn disabled';
   // document.forms[e.parentNode.name].submit();
   // }
</script>

</head> <body>

<header>

<div style="margin-bottom:5px;">
    <h1><span style="color:#B51700">ロサンゼルス</span>で成功した男<br>
        <span style="color:#B51700">女性問題</span>で全てを失った男<br>
        <span style="color:#B51700">18年</span>の時を経て特別対談<br>
    </h1>
</div>

</header>

</span>

<span class="centering_item" style="vertical-align: 80px;">
    
    <picture>
        <a target="_blank" href="https://www.yelp.com/biz/tensho-los-angeles-2">
            <source type="image/webp" srcset="images/cp2.webp" width="30%" />
            <img src="images/cp2.jpg" alt="" width="25%">
        </a>
    </picture>

</span>

</div>

<section class="steps">
    <dl class="step">
        <dt><span class="u"><span class="ft_arial">Step</span>１:</span>&nbsp;</dt>
        <dd>再生ボタンをクリック</dd>
    </dl>
    <div id="audio">
        <audio preload="metadata" controls>
            <source src="https://senninx.s3.ap-northeast-1.amazonaws.com/SingleMother_10_mZtx8R.mp3" type="audio/mp3" />
            <p>お使いのブラウザでは対応していません。<a target="_blank" href="https://www.google.com/chrome/">Google Chrome</a>、<a target="_blank" href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>などの最新版をご利用ください。</p>
        </audio>
    </div>
    <p class="download" style="margin-bottom:60px;"><a target="_blank" href="https://senninx.s3.ap-northeast-1.amazonaws.com/SingleMother_10_mZtx8R.mp3">右クリックでMP3を保存ダウンロード</a></p>
</section>
<section class="step2">
    <dl class="step">
        <dt><span class="u"><span class="ft_arial">Step</span>２:</span>&nbsp;</dt>
        <dd>感想を送って次の音声をGET</dd>
    </dl>

    <form name="form" action="https://xcapitalism.com/CKtest/sendTest.php" method="post">
        <input type="hidden" value="UTF-8" />
        <input type="hidden" name="tourokuLP" value="nanpa10_mZtx8R" />
        <div class="table" style="margin-bottom:20px;">
                <dt><label for="email">メルアド：</label></dt>
                <dd><input type="email" name="touroku_mail" id="touroku_mail" required /></dd>
            </dl>
            <dl>
                <dt><label for="message">感想：</label></dt>
                <dd><textarea name="touroku_free1" id="touroku_free1" required></textarea>
            </dl>
        </div>
        <button type="submit" onclick="return formsend(this);" class="btn" name="sbm" value="本日限定オーディオを無料で受け取る">本日限定オーディオを無料で受け取る</button>


    </form>
</section>
<footer>
    <div id="ftnav">
        <ul>
    <li><a href="https://xcapitalism.com/tokusho/" target="_blank">特商法</a></li>
    <li><a href="https://xcapitalism.com/privacy/" target="_blank">プライバシーポリシー</a></li>
        </ul>
    </div>
</footer>

</body> </html>

該当のソースコード(CSS)

{
line-height: 1;
margin: 0;
padding: 0
}

a img {
border: 0
}

header, footer, section, article, nav, aside {
display: block
}

body {
font-family: "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "HGP創英角ｺﾞｼｯｸUB", "HGPSoeiKakugothicUB", "ＭＳＰゴシック", "MS PGothic", sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center
}

header {
padding-top: 40px
}

p {
line-height: 160%
}

h1, h2 {
color: black;
line-height:1.5em;
}

h1 {
font-size: 51px;
margin: 0 auto 33px
}

h2 {
font-size: 44px;
margin: 0 auto 65px
}

.intro {
font-size: 26px;
margin: 0 auto 62px
}

.step {
display: table;
font-size: 21px;
margin: 0 auto
}

.step dt, .step dd {
display: table-cell
}

.ft_arial {
font-family: "Arial Black", Arial, sans-serif
}

.u {
border-bottom: 1px solid #000;
display: inline-block;
padding-bottom: 4px
}

.part {
font-size: 23px;
margin: 0 auto 23px;
text-align: left;
width: 615px
}

.centering_parent {
size:110%; }

#audio {
margin: 0 auto 20px;
width: 540px
}

.download {
font-size: 18px;
margin: 0 auto 83px
}

.steps .step {
margin: 0 auto 31px

}

.step2 .step {
margin: 0 auto 45px;
}

.table {
display: table;
margin: 0 auto;
width: 572px;
}

.table dl {
display: table-row
}

.table dt, .table dd {
display: table-cell;
padding: 0 0 15px;
vertical-align: top
}

.table dt {
font-size: 25px;
text-align: right;
width: 134px
}

.table dd {
text-align: left
}

input[type="email"], textarea {
border: 1px solid #999;
font-size: 100%;
padding: 3px
}

input[type="name"], textarea {
border: 1px solid #999;
font-size: 100%;
padding: 3px
}

#touroku_mail {
width: 400px
}

#touroku_name {
width: 400px
}

#touroku_free1 {
height: 150px;
width: 400px;
}

.btn {
border: 1pt solid #ccc;
cursor: pointer;
font-family: "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN", "HGP創英角ｺﾞｼｯｸUB", "HGPSoeiKakugothicUB", "ＭＳＰゴシック", "MS PGothic", sans-serif;
font-size: 24px;
font-weight: bold;
position: relative;
padding: 8px 12px 8px 56px;
text-align: center;
background: #ffe398;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe397), color-stop(0.43, #ffdf86), color-stop(0.43, #feca33), to(#cb9b0e));
background: -webkit-linear-gradient(top, #ffe397 0%, #ffdf86 43%, #feca33 43%, #cb9b0e 100%);
background: -moz-linear-gradient(top, #ffe397 0%, #ffdf86 43%, #feca33 43%, #cb9b0e 100%);
background: -ms-radial-gradient(top, #ffe397 0%, #ffdf86 43%, #feca33 43%, #cb9b0e 100%);
background: -o-linear-gradient(top, #ffe397 0%, #ffdf86 43%, #feca33 43%, #cb9b0e 100%);
background: linear-gradient(top, #ffe397 0%, #ffdf86 43%, #feca33 43%, #cb9b0e 100%);
border: 2px solid #0e3c94;
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-topleft: 24px;
-moz-border-radius-bottomleft: 24px;
-moz-border-radius-topright: 24px;
-moz-border-radius-bottomright: 8px;
-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-left-radius: 24px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-right-radius: 8px;
color: #2b256f;
}

.btn::before {
background: #0d378b;
background: -webkit-gradient(linear, left top, right bottom, from(#153c8d), to(#01063d));
background: -webkit-linear-gradient(left top, #153c8d 0%, #01063d 100%);
background: -moz-linear-gradient(left top, #153c8d 0%, #01063d 100%);
background: -ms-radial-gradient(left top, #153c8d 0%, #01063d 100%);
background: -o-linear-gradient(left top, #153c8d 0%, #01063d 100%);
background: linear-gradient(left top, #153c8d 0%, #01063d 100%);
content: "";
display: block;
float: left;
height: 31.2px;
left: 4px;
position: absolute;
top: 4px;
width: 31.2px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px
}

.btn::after {
border: 8px solid transparent;
border-left: 12px solid #fff;
content: "";
display: block;
height: 0;
left: 15.33333px;
position: absolute;
top: 11.6px;
width: 0
}

.btn:disabled, .btn .disabled {
background: #666;
border-color: #000;
color: #ccc;
cursor: default;
-moz-box-shadow: inset 0 0 10px 0 #000;
-webkit-box-shadow: inset 0 0 10px 0 #000;
box-shadow: inset 0 0 10px 0 #000
}

.btn:disabled::before, .btn .disabled::before {
background: #000;
color: #ccc
}

footer {
overflow: hidden;
padding: 70px 0 50px
}

#ftnav {
font-family: sans-serif;
font-size: 13px;
font-weight: normal;
overflow: hidden;
position: relative
}

#ftnav ul {
float: left;
left: 50%;
list-style: none;
position: relative
}

#ftnav li {
float: left;
left: -50%;
margin-right: 10px;
position: relative
}

#ftnav li::after {
color: #ccc;
content: "|";
margin-left: 10px
}

#ftnav li:nth-last-of-type(1)::after {
content: "";
margin-left: 0
}

.wrap {
max-width: 800px;
margin: 0 auto;
padding: 60px 0; }

a {
text-decoration:none;
}

/*# sourceMappingURL=style.css.map */