/* フォーム全体の余白とフォント調整 */
.wpcf7 form {
  max-width: 900px;
  margin: 0 auto 100px auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
}

/* ラベルとフォーム要素の間隔調整 */
.wpcf7-form label {
  display: block;
  margin-bottom: 15px;
  font-weight: bold;
}

/* 必須マーク（*）を赤に */
.wpcf7-form label span.wpcf7-form-control-wrap::before {
  content: '';
}

.wpcf7-form label:has(.wpcf7-form-control.required)::after {
  content: '*';
  color: red;
  margin-left: 5px;
}

/* テキスト、メール、電話、テキストエリアなどの共通スタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px;
  background: #fff;
}

/* プレースホルダー文字のスタイル */
.wpcf7-form ::placeholder {
  color: #aaa;
}

/* セレクトボックスの矢印カスタム */
.wpcf7-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg fill='navy' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
  background-color: #fff;
  background-size: 16px;
  padding-right: 35px;
}

/* テキストエリアの高さ調整 */
.wpcf7-form textarea {
  height: 120px;
  resize: vertical;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
  background-color: #002F6C;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 15px;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #001e4d;
}


.wpcf7-form-control{
    border-radius:500px;
}

/* メッセージ全体の共通スタイル */
.wpcf7-response-output {
  color: red;            /* 文字赤系 */
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}

/* 成功メッセージ（送信完了時）を緑系に */
.wpcf7-mail-sent-ok {
  border-color: #198754;
  background-color: #d1e7dd;
  color: #0f5132;
}

/* アニメーションで表示 */
.wpcf7-response-output {
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width:575px) {
    .wpcf7-response-output {
        text-align: left;
        margin-left:10px;
        margin-right:10px;
    }
}
/* 音声読み上げ用（見えないが必要） */
.screen-reader-response {
  position: absolute;
  left: -9999px;
}

.wpcf7-not-valid-tip{
    color:red;
}

/*
  cf7.css - Contact Form 7 custom styles

  このファイルは、Contact Form 7 プラグインのラジオボタンとチェックボックスの表示をカスタマイズします。
  - .wpcf7-form-control.wpcf7-radio: ラジオボタンのリストをflex表示にし、横並びにします。
  - .wpcf7-form-control.wpcf7-checkbox: チェックボックスのリストをflex表示にし、横並びにします。
  - .wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required: 必須チェックボックスの表示をinlineに強制します。
  - .wpcf7-list-item-label: ラジオ・チェックボックスのラベルにパディングを追加し、見た目を調整します。

  これらのクラスはContact Form 7のフォーム要素に自動的に付与され、フォームのレイアウトやユーザビリティを向上させます。
*/
@media screen and (min-width:576px){
    .wpcf7-form-control.wpcf7-radio{
        display: flex;
    }
    .wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required{
        display: flex;
    }
    .wpcf7-form-control.wpcf7-checkbox{
        display: flex;
    }
    .wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label,
    .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label{
        padding: 0.3rem 0.7rem 0.3rem 0.1rem;
    }
}

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

h5{
  color: #013384;
}

.textform-sm{
  width: 10px;
}