お問い合わせフォームをレスポンシブ化したい

前提・実現したいこと

お問い合わせフォームをレスポンシブ化したい。
floatを使ったフォームだったため、
float: none;で試しましたが上手くいきませんでした。
他にもテーブルを使ったフォームでフレックスボックスの解除で、
レスポンシブ化できるとサイトにあったのですが、
私のフォームはフレックスボックスを使っていませんでした。

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

レスポンシブ前

レスポンシブ後（この形にしたい）

各ボックスの中の例）山田太郎は不要です。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>portfolio</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 </head>
 
 <header id="header">
  <div class="header-wrapper">
   <h1><a href="#"><img src="img/logo2.jpg" width="85px" hight="85px"></a></h1>
   <nav>
   <ul>
    <li><a href="#">BUONO!の特徴</a></li>
    <li><a href="#">選べる3つのプラン</a></li>
    <li><a href="#">対応エリア</a></li>
    <li><a class="decoration" href="#">お問い合わせ</a></li>
   </ul>
   </nav>
  </div>
 </header>

 <body>
  <main id="main">
   <div class="mainvisual">
    <img class="img-main" src="img/mainvisual.jpg" alt="mainvisual">
    <div class="black-wrapper">
      <p class="text-a style">準備・片付けもお任せください!</p>
      <p class="text-b style">ケータリング</p>
      <p class="text-c style">1人 1,500円（税抜）～</p>
      <p class="text-d style">BUONO!Catering</p>
    </div>
   </div>
   
   <section class="feature"> 
    <div class="container">
    <h2 class="title">BUONO!Cataring<br>3つの特徴</h2>
　  <div class="container2">
  　<div class="content">
     <img class="feature-img" src="img/feature1.jpg" alt="feature1">
     <h3>リーズナブルな価格<br>1人1,500円(税抜き)～</h3>
      <p>
BUONO! ではリーズナブル<br>
な価格でサービスをご提供。<br>
予算とご相談してプランを<br>
決めていただけます。
      </p> 
    </div> 
 

  　<div class="content2">
     <img class="feature-img" src="img/feature2.jpg" alt="feature2">
     <h3>アドバイザーが<br>料理や演出をご提案</h3>
      <p>
専門のアドバイザーが料理<br>
の内容や、パーティーの演<br>
出をご提案します。
      </p> 
    </div>

  　<div class="content3">
     <img class="feature-img" src="img/feature3.jpg" alt="feature3">
     <h3>準備・片付けも<br>スタッフにお任せ!</h3>
      <p>
準備・片付けは当社のスタッ<br>
フが行うので、お客様のお<br>
手を煩わせません。
      </p> 
    </div>
    </div>
   </section> 

   <section class="plan">
    <div class="container">
    <h2 class="title">選べる3つのプラン</h2>
    <p>お料理や飲み物、演出などはどのプランでもカスタマイズ<br>可能です。まずはお気軽にご相談ください。</p>
    </div>
    
    <div class="container2">
    <div class="content">
     <img src="img/plan1.jpg" alt="plan1">
    </div>
    <div class="content-b">
<h3 class="original">オリジナルプラン</h3>     
<p>
10人以上　1人1,500円(税抜)～
</p>
<p>
お客様に合わせたプランをコーディネーターが<br>
ご提供します。まずはご予算やパーティーの形<br>
式をお伺いします。
</p>
<p>
何も決まっていなくても、お気軽にご相談くだ<br>
さい?
</p>
</div>
</div>

 <div class="container3">
    <div class="content">
     <img src="img/plan2.jpg" alt="plan2">
    </div>
    <div class="content-b">
<h3>フィンガーフードプラン</h3>     
<p>
10人以上　1人2,000円(税抜)～
</p>
<p>
一口で食べられるお食事をご提供するプランで<br>
す。立食パーティーに最適です。
</p>
</div>
</div>

 <div class="container4">
    <div class="content">
     <img src="img/plan3.jpg" alt="plan3">
    </div>
    <div class="content-b">
<h3>贅沢プラン</h3>     
<p>
10人以上　1人3,000円(税抜)～
</p>
<p>
伊勢海老や和牛など、ぜいたくな食材をふんだ<br>
んに使用したお料理を提供するプランです。
</p>
</div>
</div>
    </div>
   </section>

   <section class="area">
   <div class="wrapper-area">

　<h2>対応エリア</h2>

   <div class="area1 margin">
大阪府<br>
大阪市（旭区、阿倍野区、生野区、北区、此花区、城東区、住之江区、住吉区、大正区、
中央区、鶴見区、天王寺区、浪速区、西区、西成区、西淀川区、東住吉区、東成区、東
淀川区、平野区、福島区、港区、都島区、淀川区） 池田市、茨木市、大阪狭山市、柏原市、
門真市、堺市（北区、堺区、中区、東区、美原区）、吹田市
   </div>
   <div class="area2 margin">
兵庫県<br>
芦屋市、尼崎市、宝塚市、西宮市
   </div>
   <div class="area3 margin">
大阪府、兵庫県内で上記に記載がない地域は要相談。
   </div>
   </div>
   </section>

<section>
<h2 class="lead-form">お問い合わせ</h2>
<p class="lead-form2">
詳しい内容が決まっていなくても、<br>
まずはお気軽にご相談ください!
</p>

   <form>
 <div class="item">
<label class="label">名前</label>
<input class="inputs" type="text" name="name">
 </div>

 <div class="item">
<label class="label">フリガナ</label>
<input class="inputs" type="text" name="hurigana"><br>
 </div>

 <div class="item">
<label class="label">貴社名</label>
<input class="inputs" type="text" name="company"><br>
 </div>

 <div class="item">
<label class="label">お電話番号</label>
<input class="inputs" type="number" name="number"><br>
 </div>

 <div class="item">
<label class="label">メール</label>
<input class="inputs" type="email" name="email"><br>
 </div>

 <div class="item size">
<label class="label">コメント</label>
<textarea class="inputs"></textarea><br>
 </div>

 <div class="btn-area">
<input type="submit" value="送信する">
 </div>
</form>
</section>


 <section class="inquiry-call">
  <div class="inquiry-call2">
   <h2>お電話でのお問い合わせ</h2>
　　<p>000（1234）5678</p>
    <p>平日9：00～18：00</p> 
　<div class="button-top">
   <button type="button" onclick="location.href='#'">ページトップへ</button>
  </div>
  </div>
 </section>
   
 <footer id="footer">
<div class="footer2">
<h3>BUONO!Cataring</h3>  
<p class="font">BUONO!フードサービス株式会社</p>
<p class="font">大阪府大阪市淀川区はらぺこ町1-1-1</p>
<p class="font">00012345678</p>
<p class="margin-bottom font">代表取締役　山田太郎</p>
<div class="footer-copy">
<p>(C)BUONO!フードサービス.All Rights Reserved</p>
</div>
</div>
 </footer>


  </main>
 </body>

</html>


■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
@charset "utf-8"

#post_contents ul li { list-style-type:none; background-image:none; padding-left:0; }



.mainvisual .text-c {
 position: absolute;
 top: 80%;
 left: 18%;
}

.feature .title {
 text-align: center;
}

.feature-img {
 height: 135px; 
}

.feature .title {
 margin: 15px 0 0;
 font-size: 18px;
}

.feature .container2 {
 display: flex;
 justify-content: center;
}

.feature h3 {
 margin: 0;
 font-size:14px;
}

.container2 h3 {
 text-align: center;
}

.container2 p {
 text-align: left;
 font-size: 14px;
 margin: 5px 0 0;
}

.plan img {
 width: 300px;
} 

.container2 {
 display: flex;
}

.container3 {
 display: flex;
}

.container4 {
 display: flex;
}

.plan h2 {
 margin: 50px 0 15px;
} 

.plan .container {
 text-align: center;
}

.plan .container2 {
 justify-content: center;
 margin: 0 0 10px;
}

.plan .container3 {
 justify-content: center;
 margin: 0 0 10px;
}

.plan .container4 {
 justify-content: center;
 margin: 0 0 10px;
}

.plan .content-b {
 text-align: left;
 font-size: 14px;
 margin: 0 0 0 15px;
}

.wrapper-area {
 width: 600px;
 margin: 0 auto;
 font-size: 14px;
}

.area h2 {
 text-align: center;
 margin: 0 0 10px;
}

.area .margin {
 margin-bottom: 25px;
}

.lead-form {
 text-align: center;
 margin: 20px 0 3px;
}

.lead-form2 {
 text-align: center;
 font-size: 14px;
}

form {
 width: 450px;
 margin: 0 auto;
}

.item {
 overflow: hidden;
 margin-bottom: 20px;
}

.label {
 float: left;
 margin-right: -30px;
 width: 135px;
}

input.inputs {
 width: 300px;
 float: left;
 border: solid 1px #aaa;
 border-radius: 5px;
 padding: 10px;
 font-size: 15px;
}

textarea {
 border: solid 1px #aaa;
 border-radius: 5px;
 padding: 10px;
 height: 100px;
 font-size: 15px;
 width: 300px;
}

.btn-area {
 text-align: center;
}

.size {
 margin-bottom: 10px;
}

.inquiry-call .inquiry-call2 {
 width: 600px;
 margin: 0 auto;
 text-align: center;
}

.button-top {
 text-align: right;
}

.inquiry-call h2 {
 margin: 30px 0 0;
}

.inquiry-call p {
 margin: 0;
}

/* footer */

#footer .footer2{
 width: 500px;
 margin: 0 auto;
}

#footer p {
 margin: 0;
}

#footer .font {
 font-size: 14px;
}

#footer .margin-bottom {
 margin-bottom: 30px;
}

.footer-copy {
 text-align: center;
 font-size: 10px;
}

/*メディアクエリ*/

@media screen and (max-width: 580px) {

.feature .container2 {
 flex-direction: column;
 text-align: center;
 width: 300px;
 margin: 0 auto;
}

.feature .container2 p {
 text-align: center;
}

#main .text-d {
 font-size: 40px;
 position: absolute;
 top: 50%;
 left: 18%;
}

.plan .container2 {
 display: block;
 text-align: center;
}

.container2 p {
 width: 300px;
 margin: 0 auto;
}

.plan .container3 {
 display: block;
 text-align: center;
}

.container3 p {
 width: 300px;
 margin: 0 auto;
}

.container3 h3 {
 text-align: center;
}

.plan .container4 {
 display: block;
 text-align: center;
}

.container4 p {
 width: 300px;
 margin: 0 auto;
}

.container4 h3 {
 text-align: center;
}

.area .wrapper-area {
 width: 300px;
 margin: 0 auto;
}

.form-table {
 width: 100%;
 border-bottom: none;
 display: block;
}

.inquiry-call .inquiry-call2 {
 text-align: center;
 width: 300px;
 margin: 0 auto;
}



}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/04/08 15:13

floatでレスポンシブはいばらの道では。

m.ts10806

2021/04/08 15:14

あと可能ならコードブロックはファイル毎にわけてください。１つにまとまっていると1つのファイルとして認識しますし、再現確認のときに結構手間です。

JAQKxsuke

2021/04/08 21:10

調べたのですが、コードブロックをファイル毎に分けるとは、ヘッダーとかメインごとでファイル？に分けるということでしょうか。

thyda.eiqau

2021/04/08 21:57

複数のファイルに分かれているコードは複数の``` ... ```の中に記載してくださいという意味です。

dit.

2021/04/09 00:47

指摘されている「コードブロックはファイル毎にわけて」は、質問文中のコードをHTML、CSSなどで分けてほしい　ということで、実際のコードを別ファイルにしてほしいということではありません。 ```html ここにHTMLのコード ``` （HTMLとCSSのコード間は1行以上開ける） ```css ここにCSS ``` こういう書き方です。また、HTMLのインデント部分に全角のスペースがかなりあるので、スペースが表示されるようなエディタやフォントを使用した方が良いかと思います。

JAQKxsuke

2021/04/09 11:40

dit.様ご指摘の解説とアドバイスありがとうございます。活用させていただきます。