Contact Form7のファイルタグにスマホ用のCSSが当たらないためレイアウトが崩れる

ご連絡ありがとうございます。

以下のコードを記述してみましたが、スマホ用のCSSはやはり当たっておらず、
レイアウトが崩れております。

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <tbody>
      <tr>
        <th>写真1</th>
        <td>[file file-01]</td>
      </tr>
    </tbody>
  </table>
</div>

ほかになにか原因がありますでしょうか。

以下のURLのページをスマホにてご確認ください。
※PC表示ではレイアウト崩れはおきません。

http://weblinx01.xsrv.jp/dev_andoh-mitsuki.com/%E3%81%8A%E5%95%8F%E5%90%88%E3%81%9B%E3%83%BB%E3%81%94%E6%B3%A8%E6%96%87/

一つ目のテーブル内にはファイルタグがありますが、
二つ目のテーブルにはファイルタグがありません。

Contact Form7のコードは以下の内容です。

<h2>ファイルタグあり</h2>
<table class="table table-responsive table-striped table-bordered mobile-block">
	<tbody>
		<tr>
			<th>お名前</th>
			<td>[text* your-name placeholder "お名前を入力してください"]</td>
        </tr>
		<tr>
			<th>メールアドレス</th>
			<td>[email* your-mail placeholder "メールアドレスを入力してください"]</td>
		</tr>
		<tr>
			<th>電話番号</th>
			<td>[tel* tel placeholder "電話番号を入力してください"]</td>
		</tr>
		<tr>
			<th>郵便番号</th>
			<td>[text zip class:p-postal-code minlength:8 size:8 placeholder "郵便番号を入力して下さい"]</td>
		</tr>
		<tr>
			<th>住所</th>
			<td>[text address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所を入力して下さい"]</td>
		</tr>
		<tr>
			<th>写真1</th>
			<td>[file file-01]</td>
		</tr>
		<tr>
			<th>写真2</th>
			<td>[file file-02]</td>
		</tr>
		<tr>
			<th>写真3</th>
			<td>[file file-03]</td>
		</tr>
		<tr>
			<th>お問い合わせ内容</th>
			<td>[textarea your-message placeholder "お問い合わせ内容を入力してください"]</td>
		</tr>
	</tbody>
</table>

<h2>ファイルタグなし</h2>
<table class="table table-responsive table-striped table-bordered mobile-block">
	<tbody>
		<tr>
			<th>お名前</th>
			<td>[text* your-name placeholder "お名前を入力してください"]</td>
        </tr>
		<tr>
			<th>メールアドレス</th>
			<td>[email* your-mail placeholder "メールアドレスを入力してください"]</td>
		</tr>
		<tr>
			<th>電話番号</th>
			<td>[tel* tel placeholder "電話番号を入力してください"]</td>
		</tr>
		<tr>
			<th>郵便番号</th>
			<td>[text zip class:p-postal-code minlength:8 size:8 placeholder "郵便番号を入力して下さい"]</td>
		</tr>
		<tr>
			<th>住所</th>
			<td>[text address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所を入力して下さい"]</td>
		</tr>
		<tr>
			<th>お問い合わせ内容</th>
			<td>[textarea your-message placeholder "お問い合わせ内容を入力してください"]</td>
		</tr>
	</tbody>
</table>

>>画面が狭い時にテーブルを横にスライドする事はできますか？
テーブルを横にスライドするようには見えないです。

>>class=”table-responsive” をtableタグにではなく、tableの外側のdivに<div class=”table-responsive”> と書くと>>横スライドになります。
>>（tableタグからは table-responsive ） は削除してください。
★スマホ表示の際に横スライドは求めていないため、table-responsiveは削除します。
　
>>『レイアウト崩れ』とはどういう状態を指していますか？
★スマホ表示した場合にtype=fileのinputタグがテーブルタグの枠をはみ出します。
　type=fileのinputタグがテーブルタグの枠をはみ出したせいなのか、
　その他のinputタグもテーブルタグの枠をはみ出します。

>>table {font-size:12px;}
>>input[type=file] {width:300px;}
★input[type=file] {width:300px;}を使用しても変化はありませんでした。
　table {font-size:12px;}を使用したところ、BizVektorでtype=fileのinputタグを使用した際の表示と同じになりました。

■結果
BizVektorの場合
スマホ表示した場合、ContactForm7のinputタグのtype=fileのフォントサイズは12pxとなり、テーブルタグの枠をはみ出さない

Lightningの場合
スマホ表示した場合、ContactForm7のinputタグのtype=fileのフォントサイズは16pxとなり、テーブルタグの枠をはみ出すため、table {font-size:12px;}を記述する必要がある