/*********************************
***** Contact Form 7 のcss ******
**********************************/
.wpcf7 {
  /* 電話番号入力欄の角丸指定 */
  --form--border-radius: 6px;
  /* チェックボックス囲み */
  --form--border-width: 1px;
}

/* 項目名と入力欄の間を狭く */

.koumoku {
  margin-bottom: 0px !important;
}

.koumoku + p{
  margin-top: 5px !important;
}

/* 必須項目の後に「必須」を表示する */
.wpcf7-form  .hissu::after {
    content: "＊必須";
    color: #dc3232; /* 入力してくださいに揃えた */
    font-size: 0.8rem;
    padding-left: 0.8em;
    display: inline-block;
}

 /* チェックボックス囲み */
input[type="radio"]{
  padding: 2px;
  border-color: #555;
}
/* チェックマークの位置調整 */
input[type=checkbox]:after {
  left: 8px !important;
  top: 4px !important;
}

/* チェックボックスの次行を詰める */
.liftup-next {
  margin-bottom: -3em !important;
}

/* フォーム全体の枠組み */
.wpcf7-form {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

/* 入力欄（テキスト、メール、テキストエリア）のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%; /* 幅を100%に */
    padding: 10px;
    border: none;
    border-radius: 6px;
    box-sizing: border-box; /* パディングを含めた幅計算 */
}

/* チェックボックスと文字の縦位置を揃える */
.wpcf7-list-item label {
    display: inline-flex;
}

.wpcf7-list-item-label {
    margin-left: 1em;
}

/* チェックボックス縦つぶれをしないよう */
.wpcf7-list-item label input {
    flex-shrink: 0;
}

.wpcf7-list-item label span.wpcf7-list-item-label {
    flex-shrink: 1;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
    background-color: #72a4e5 !important; /* ボタンの色 */
    transition: background-color 0.5s;
    color: #fff;
    border: none;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px !important;
    width: 100%; /* ボタンの幅を広げる場合 */
}

/* 送信ボタンのホバーエフェクト */
.wpcf7-form input:hover[type="submit"] {
    background-color: #359dff !important;
    opacity: 1 !important;
}

/* 必須項目のラベルを目立たせる 
.wpcf7-list-item-label {
    font-weight: bold;
}*/

/* 最後のmarginを取る */
.wpcf7-form > p {
    margin-bottom: 0;
}

/* Contact Form 7 のフォーム全体の幅を調整 */
.wpcf7 {
    max-width: 700px;  /* 最大幅を700pxに制限 */
    margin: 0 auto;    /* 左右の余白を自動にして中央寄せ */
}

/* 入力欄（テキスト、メール、メッセージなど）を横いっぱいに広げる */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    box-sizing: border-box; /* 枠線を含めて幅を計算 */
}

/* 送信ボタンも中央に寄せたい場合 */
.wpcf7 .wpcf7-submit {
    display: block;
    margin: 0 auto;
}

.wpcf7 {
    margin-top: -20px; /* ここを追記：上に引き上げる（数値は調整してください） */
}

.cf7-modal .wpcf7 {
    margin-top: 0px !important; /* モーダル表示の場合は引き上げをやめる */
}