【コンタクトフォーム7】textarea*にテキスト入力できない動作不良を起こします。原因と改善策が知りたいです。

Question

【設置環境】
wordpressにてテーマはAstra（無料版)を使用
自分でも原因と考えられる部分を修正したりネット検索したのですが、解決できず。。。

コンタクトフォームの編集画面に書いたコードです。※関連個所抜粋

<div class="form__wrap template04">

<div class="form__row row-title">
  <p class="form__label is-required"><label for="your-subject">件名</label></p>
  <p class="form__body">[text* your-subject id:your-subject placeholder "件名"]</p>
</div>
<div class="form__row row-message">
  <p class="form__label is-required"><label for="message">メッセージ本文</label></p>
  <p class="form__body">[textarea* message id:message placeholder "こちらに詳細をご入力ください"]</p>
</div>

下記CSSはAstraテーマのCSSカスタマイズにコードを書いています※関連個所抜粋

コード
/* template04 */
.form__wrap {
  width: 100%;
  max-width: 600px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template04 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #464646;
  font-size: 14px;
	margin-bottom:20px;
}
.wpcf7 .template04 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template04 a:hover {
  color:#FE8280;
  transition: opacity .25s;
}
.wpcf7 .template04 div.form__row {
  position: relative;
  padding: 0;
  margin: 36px 0px 10px 0px;
}
.wpcf7 .template04 div.form__row.row-name,
.wpcf7 .template04 div.form__row.row-email,
.wpcf7 .template04 div.form__row.row-title,
.wpcf7 .template04 div.form__row.row-url {
  width: calc 80%;
}
.wpcf7 .template04 div.form__row.row-message {
  width: 100%;
}

.wpcf7 .template04 div.form__row.row-checkbox,
.wpcf7 .template04 div.form__row.row-radio {
  display: flex;
  align-items: center;
  width: 100%;
}

.wpcf7 .template04 div.form__row.row-privacy {
  width: 100%;
  margin-top: 3em;
  text-align: center;
}
.wpcf7 .template04 div.form__row.row-submit {
  width: 100%;
  margin-top: 3em;
  text-align: center;
}

.wpcf7 .template04 p.form__label {
  flex-shrink: 0;
  min-width: 136px;
  margin-bottom: 20px;
  padding: 0;
  box-sizing: border-box;
}

.wpcf7 .template04 p.form__body {
  width: 100%;
  margin :0;
  padding:0;
  box-sizing: border-box;
}

.wpcf7 .template04 div.form__row.row-radio p.form__body {
  margin: 0 0 0.6em 2em;
}

.wpcf7 .template04 div.form__row.row-checkbox p.form__body {
	margin: 0 0 1em 2em;
}

.wpcf7 .template04 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  color: #1A6C7A;
  font-size: 14px;
  box-sizing: border-box;
}
.wpcf7 .template04 p.form__label.is-required label {
  margin-right: 1em;
}
.wpcf7 .template04 p.form__label.is-required label::before {
	content: "必須";
  margin-right:4px;
	letter-spacing:0.4px;
  color: #ffffff;
	background-color:#FE8280;
	font-size:12px;
	padding:0px 2px 0px 2px;
	border-radius:2px;
}

.wpcf7 .template04 p.form__label.none label::before {
	content: "〇〇";
  margin-right:4px;
	letter-spacing:0.4px;
  color: #ffffff;
	font-size:12px;
	padding:0px 2px 0px 2px;
	border-radius:2px;
}

/* テキストフィールド */
.wpcf7 .template04 input[type=text],
.wpcf7 .template04 input[type=title],
.wpcf7 .template04 input[type=email],
.wpcf7 .template04 input[type=url],
 {
  width: 100%;
  margin: 0;
  padding: .2em 0;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-weight:inherit ;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.wpcf7 .template04 textarea {
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 20px 0 .2em 0;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* テキストフィールド placeholder */
.wpcf7 .template04 input[type=text]::placeholder,
.wpcf7 .template04 input[type=title]::placeholder,
.wpcf7 .template04 input[type=email]::placeholder,
.wpcf7 .template04 input[type=url]::placeholder,
.wpcf7 .template04 textarea::placeholder {
  opacity: 0.3;
  display: none;
	padding-left:36px;
}

.wpcf7 .template04 textarea::placeholder {
	padding-top:6px;
}

.wpcf7 .template04 input[type=text]:-ms-input-placeholder,
.wpcf7 .template04 input[type=email]:-ms-input-placeholder,
.wpcf7 .template04 input[type=url]:-ms-input-placeholder,
.wpcf7 .template04 textarea:-ms-input-placeholder{
  opacity: 0;
  display: none;
}

.wpcf7 .template04 input[type=text]::-ms-input-placeholder,
.wpcf7 .template04 input[type=email]::-ms-input-placeholder,
.wpcf7 .template04 input[type=url]::-ms-input-placeholder,
.wpcf7 .template04 textarea::-ms-input-placeholder,{
  opacity: 0;
  display: none;
}

/* テキストフィールド フォーカス時 */
.wpcf7 .template04 input[type=text]:focus,
.wpcf7 .template04 input[type=email]:focus,
.wpcf7 .template04 input[type=url]:focus,
.wpcf7 .template04 textarea:focus {
  	padding: 2px 0px 2px 36px;
	  
}

何卒、よろしくお願い致します。

Answer 1

質問していた項目のうち、下記は解決いたしました。

・textarea以外の入力箇所にカーソルを持っていくと止まれ標識が表示されるのを直したい(入力は正常にできる)

何を持って解決したのかわかりませんが、CSSカスタマイズ時のみに上記表示になるだけだったのかもしれません。サイト公開もしたうえでのエラーだったと思うのですが、確認不足の可能性もあります。