WP css スマホ テンプレート コンタクトフォーム 7です。

<div class="contact"><div class="contact"> <ul> <li>貴社名・団体名<span class="nok">*</span>[text* text-kaisya placeholder "株式会社〇〇"]</li> <li>お名前[text text-name placeholder "貨物 太郎"]</li> <li>電話番号[tel tel-712 placeholder "03-0000-0000"]</li> <li>メールアドレス<span class="nok">*</span>[url* url-319 placeholder "kamotu@gmail.com"]</li> <li>お問い合わせ内容<span class="nok">*</span>[textarea* textarea-707 placeholder "お気軽にお問合せください。"]</li> </ul>     <p style="text-align:center;">[submit "送信"]</p></div>

 

style.css

------

/* コンタクト フォーム */

div.wpcf7 {padding: 0 0 10px 0;margin-bottom: 40px;}

.s-contact{background: linear-gradient(to bottom, #fff 0%, #fff 152px, #f3f8fb 152px, #f3f8fb 100%);
display: block;height: auto;margin-top: 64px; }

.s-contact h2 {text-align: center; font-size: 44px;color:#f5a21b;}
.s-contact span {text-align: center;font-size: 26px;color:#f5a21b;}
.s-contact p{font-size: 18.5px; text-align: center;padding: 0 0 0 0;margin:0;font-family: "FOT-筑紫オールド明朝 Pro R", "TsukuOldMinPro-R", serif;
padding-bottom: 1em;}

@media(max-width:767px) {
.s-contact h2 {text-align: center; font-size: 24px;color:#f5a21b;}
.s-contact span {text-align: center;font-size: 16px;color:#f5a21b;}
.s-contact p{font-size: 14.5px; text-align: center;font-family: "FOT-筑紫オールド明朝 Pro R", "TsukuOldMinPro-R", serif;line-height: 1.6;}
}

.contact {}
.contact ul{list-style-type: none; font-size:22px;margin-left: 0px;padding-left: 20px;}
.contact li{border-bottom: 2px solid #cfd8dc;padding: 40px 20px 0 40px; width: 75%;
color: #bdbdbd; font-size: 2.0rem;line-height: 1.3;margin-top: 15px;}

.contact input[type="text"] {border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent; padding: 0.45em 0em 0em 0em !important;}
input[type="url"]{border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent;}

input[type="tel" i]{border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent;}

.wpcf7 textarea{border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent;border-width:0px;}

input.wpcf7-form-control.wpcf7-submit {border: 2px solid #e50012;background: transparent;color: #e50012;border-radius: 20px;font-size: 2.4rem;
line-height: 98px;padding: 5px 100px;-webkit-transition: background 0.45s ease-out; -moz-transition: background 0.45s ease-out; transition: background 0.45s ease-out; }

input.wpcf7-form-control.wpcf7-submit:hover {background:#e50012;color:#fff;}

@media(max-width:767px) {
.s-contact{margin-top: 50px;}

.contact input[type="text"] {border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent; padding: 0.45em 0em 0em 0em !important;}
input[type="url"]{border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent; padding: 0.45em 0em 0em 0em !important;}

input[type="tel" i]{border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent; padding: 0.45em 0em 0em 0em !important;}

.wpcf7 textarea{border: none; line-height: 30px; height: 30px;width: 100%;font-size: 25px;background: transparent;border-width:0px; padding: 0.45em 0em 0em 0em !important;}


input.wpcf7-form-control.wpcf7-submit {border: 2px solid #e50012;background: transparent;color: #e50012;border-radius: 20px;font-size: 2.4rem;
line-height: 54px;padding: 5px 52px;-webkit-transition: background 0.45s ease-out; -moz-transition: background 0.45s ease-out; transition: background 0.45s ease-out; }
.contact li {padding: 40px 15px 10px 10px;width: 100%;font-size: 1.92rem;margin: 0;}
}