@charset "UTF-8";

/* フォーム全体の幅と余白 */
.wpcf7 {
    max-width: 700px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #595757;
}

input,
select {
    vertical-align: bottom;
}

/* 上部注意書き */
.form-notice {
    text-align: center;
    font-size: 16px;
    line-height: calc(22 / 16);
    margin-bottom: 0px;
    letter-spacing: 0.064em;
}
.text-danger {
    color: #e60012;
    font-size: 16px;
    text-align: center;
    margin-bottom: 48px; /* 余白を少し詰める */
    line-height: calc(21.2 / 16);
}

.form-item {
    text-align: left;
}

/* ラベルテキスト */
.form-label {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 20px;
    color: #00a5a8;
    margin-bottom: 6px;
    line-height: 1.1;
}

/* バッジ（必須・任意） */
.badge {
    display: inline-block;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
    color: #fff;
    font-weight: normal;
}
.badge.required {
    background-color: #e60012; /* 必須：赤 */
}
.badge.optional {
    background-color: #9fa0a0; /* 任意：グレー */
}

/* 入力フィールド（1行・複数行） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #bfc0c0;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px !important;
    box-sizing: border-box;
    height: 28px;
}

.wpcf7 textarea {
    height: 112px;
}

/* プレースホルダーのカラー */
.wpcf7 ::placeholder {
    color: #b5b5b5;
    font-size: 13px;
}

/* ==========================================
   ラジオボタン：デザイン維持のままタップ領域拡大＆間隔調整
========================================== */

/* 項目間の下余白（12pxから8〜10px広げて20pxに設定） */
.wpcf7 .wpcf7-list-item {
    display: block;
    margin: 0 0 15px 0 !important;
}

/* ラベル要素（◎とテキスト全域）をタップ可能にする */
.wpcf7 .wpcf7-list-item label {
    display: inline-flex !important; /* ◎とテキストを横並び＆上下中央に */
    align-items: center;
    cursor: pointer; /* タップ・クリック可能であることを示す */
    padding: 6px 0; /* 上下に少しだけ押しやすい余白を追加 */
    -webkit-tap-highlight-color: transparent; /* スマホタップ時の余計なハイライトを防止 */
}

/* ラジオボタン（◎）とテキストの間の余白調整 */
.wpcf7 .wpcf7-list-item input[type="radio"] {
    margin: 0 10px 0 0 !important;
    cursor: pointer;
    flex-shrink: 0; /* スマホで丸ボタンが潰れるのを防止 */
}

/* テキスト部分のカーソル指定 */
.wpcf7-list-item-label {
    cursor: pointer;
}

.wpcf7-list-item-label {
    font-size: 16px;
}

/* 個人情報保護方針枠 */
.privacy-box {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 24px;
    background-color: #fff;
}
.privacy-title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 8px;
}
.privacy-content {
    height: 90px;
    overflow-y: scroll;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    border: 1px solid #eee;
    padding: 8px;
    background: #fafafa;
}

/* 送信前の注意書き */
.form-note {
    text-align: center;
    font-size: 11px;
    color: #666;
    margin: 16px 0;
}

/* 送信ボタン */
.form-submit {
    text-align: center;
    margin-top: 20px;
    margin-left: 50px;
}
.wpcf7 input[type="submit"] {
    background-color: #00a5a8;
    color: #fff;
    font-size: 28px;
    font-weight: normal;
    padding: 8px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.wpcf7 input[type="submit"]:hover {
    opacity: 0.8;
}

/* 全体囲み（枠線なしで位置調整のみ） */
.wpcf7 .privacy-box {
    display: block !important;
    width: 100% !important;
    margin-top: 30px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 見出し（枠の外・左寄せ） */
.wpcf7 .privacy-title {
    display: block !important;
    font-size: 20px !important;
    font-weight: normal !important;
    color: #595757 !important;
    text-align: left !important;
    margin: 0 0 12px 0 !important;
}

/* スクロールする枠本体（常にスクロールバーを表示） */
.wpcf7 .privacy-scroll-box {
    display: block !important;
    width: 100% !important;
    height: 112px !important; /* 枠の高さ */
    max-height: 112px !important; /* 高さを固定 */
    overflow-y: scroll !important; /* 縦スクロール枠を維持 */
    scrollbar-gutter: stable; /* スクロールバー領域を最初から確保 */
    border: 1px solid #bfc0c0 !important; /* 薄いグレーの枠線 */
    border-radius: 4px !important; /* 角丸 */
    background-color: #fff !important; /* 背景色：白 */
    padding: 16px 20px !important; /* 内側の余白 */
    box-sizing: border-box !important;
    font-size: 12px !important; /* 文字サイズ */
    line-height: calc(20 / 12) !important; /* 行間 */
    color: #595757 !important;
    text-align: left !important;
}

.wpcf7 .privacy-scroll-box p {
    font-size: 12px !important; /* 文字サイズ */
}

/* === スクロールバー自体のデザイン（常時くっきり表示用） === */
/* スクロールバー全体の幅 */
.wpcf7 .privacy-scroll-box::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

/* スクロールバーの背景（レール部分） */
.wpcf7 .privacy-scroll-box::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 0 8px 8px 0 !important;
}

/* スクロールバーのつまみ（動く部分） */
.wpcf7 .privacy-scroll-box::-webkit-scrollbar-thumb {
    background: #aaa !important; /* つまみの色（グレー） */
    border-radius: 4px !important;
}

/* つまみにホバーしたとき */
.wpcf7 .privacy-scroll-box::-webkit-scrollbar-thumb:hover {
    background: #888 !important;
}

/* Firefox用スクロールバー設定 */
.wpcf7 .privacy-scroll-box {
    scrollbar-width: thin;
    scrollbar-color: #aaa #f1f1f1;
}

/* 送信ボタンの上の注意書き */
.wpcf7 .form-note {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #595757 !important;
    margin: 52px 0 48px 0 !important;
}

.form-thanks-txt {
    margin-top: 80px;
}

.form-thanks-main {
    align-items: center !important;
    text-align: center !important;
    font-weight: normal !important;
    font-size: 32px !important;
    color: #00a5a8 !important;
    margin-bottom: 80px !important;
    line-height: 1.714 !important;
}

.form-thanks-sub {
    align-items: center !important;
    text-align: center !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #595757 !important;
    margin-bottom: 6px !important;
    line-height: 1.75 !important;
}

@media only screen and (max-width: 947px) {
    .form-thanks-head {
        background-image: url(../img/sp-main/contact.png);
    }
}

/* ==========================================
   Contact Form 7 入力エラー時のスタイル
========================================== */

/* エラー時の入力フィールド（テキスト・メール・電話番号・テキストエリア等） */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
    border: 2px solid #c20c33 !important; /* くっきりとした赤枠 */
    background-color: #ffd9e1 !important; /* 薄い赤背景 */
    color: #630015 !important; /* 濃い赤文字 */
}

/* ラジオボタンで未選択エラーが発生した場合 */
.wpcf7 .wpcf7-radio.wpcf7-not-valid {
    display: inline-block;
    padding: 8px;
    border: 1px solid #c20c33 !important;
    background-color: #ffd9e1 !important;
    border-radius: 4px;
}

/* 項目ごとの個別エラーメッセージ（入力欄の下に出る赤文字） */
.wpcf7-not-valid-tip {
    color: #e60012 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin-top: 6px !important;
    display: block;
}

/* Contact Form 7 エラーメッセージのデザイン調整 */
.wpcf7-response-output {
    border: 2px solid #f29b00 !important; /* オレンジの枠線 */
    color: #333333 !important; /* テキストの色（濃いグレー） */
    background-color: #ffffff !important; /* 背景色（白） */
    font-size: 18px !important; /* 文字サイズ */
    text-align: center !important; /* 文字を中央揃え */
    padding: 12px 20px !important; /* 上下左右の余白 */
    margin-top: 20px !important; /* 上要素との余白 */
    box-sizing: border-box !important;
}


.mb-1 {
    margin-bottom: 1px;
}
.mb-2 {
    margin-bottom: 2px;
}
.mb-3 {
    margin-bottom: 3px;
}
.mb-4 {
    margin-bottom: 4px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-6 {
    margin-bottom: 6px;
}
.mb-7 {
    margin-bottom: 7px;
}
.mb-8 {
    margin-bottom: 8px;
}
.mb-9 {
    margin-bottom: 9px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-11 {
    margin-bottom: 11px;
}
.mb-12 {
    margin-bottom: 12px;
}
.mb-13 {
    margin-bottom: 13px;
}
.mb-14 {
    margin-bottom: 14px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-16 {
    margin-bottom: 16px;
}
.mb-17 {
    margin-bottom: 17px;
}
.mb-18 {
    margin-bottom: 18px;
}
.mb-19 {
    margin-bottom: 19px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-21 {
    margin-bottom: 21px;
}
.mb-22 {
    margin-bottom: 22px;
}
.mb-23 {
    margin-bottom: 23px;
}
.mb-24 {
    margin-bottom: 24px;
}
.mb-25 {
    margin-bottom: 25px;
}
.mb-26 {
    margin-bottom: 26px;
}
.mb-27 {
    margin-bottom: 27px;
}
.mb-28 {
    margin-bottom: 28px;
}
.mb-29 {
    margin-bottom: 29px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-31 {
    margin-bottom: 31px;
}
.mb-32 {
    margin-bottom: 32px;
}
.mb-33 {
    margin-bottom: 33px;
}
.mb-34 {
    margin-bottom: 34px;
}
.mb-35 {
    margin-bottom: 35px;
}
.mb-36 {
    margin-bottom: 36px;
}
.mb-37 {
    margin-bottom: 37px;
}
.mb-38 {
    margin-bottom: 38px;
}
.mb-39 {
    margin-bottom: 39px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-41 {
    margin-bottom: 41px;
}
.mb-42 {
    margin-bottom: 42px;
}
.mb-43 {
    margin-bottom: 43px;
}
.mb-44 {
    margin-bottom: 44px;
}
.mb-45 {
    margin-bottom: 45px;
}
.mb-46 {
    margin-bottom: 46px;
}
.mb-47 {
    margin-bottom: 47px;
}
.mb-48 {
    margin-bottom: 48px;
}
.mb-49 {
    margin-bottom: 49px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-51 {
    margin-bottom: 51px;
}
.mb-52 {
    margin-bottom: 52px;
}
.mb-53 {
    margin-bottom: 53px;
}
.mb-54 {
    margin-bottom: 54px;
}
.mb-55 {
    margin-bottom: 55px;
}
.mb-56 {
    margin-bottom: 56px;
}
.mb-57 {
    margin-bottom: 57px;
}
.mb-58 {
    margin-bottom: 58px;
}
.mb-59 {
    margin-bottom: 59px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-61 {
    margin-bottom: 61px;
}
.mb-62 {
    margin-bottom: 62px;
}
.mb-63 {
    margin-bottom: 63px;
}
.mb-64 {
    margin-bottom: 64px;
}
.mb-65 {
    margin-bottom: 65px;
}
.mb-66 {
    margin-bottom: 66px;
}
.mb-67 {
    margin-bottom: 67px;
}
.mb-68 {
    margin-bottom: 68px;
}
.mb-69 {
    margin-bottom: 69px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mb-71 {
    margin-bottom: 71px;
}
.mb-72 {
    margin-bottom: 72px;
}
.mb-73 {
    margin-bottom: 73px;
}
.mb-74 {
    margin-bottom: 74px;
}
.mb-75 {
    margin-bottom: 75px;
}
.mb-76 {
    margin-bottom: 76px;
}
.mb-77 {
    margin-bottom: 77px;
}
.mb-78 {
    margin-bottom: 78px;
}
.mb-79 {
    margin-bottom: 79px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-81 {
    margin-bottom: 81px;
}
.mb-82 {
    margin-bottom: 82px;
}
.mb-83 {
    margin-bottom: 83px;
}
.mb-84 {
    margin-bottom: 84px;
}
.mb-85 {
    margin-bottom: 85px;
}
.mb-86 {
    margin-bottom: 86px;
}
.mb-87 {
    margin-bottom: 87px;
}
.mb-88 {
    margin-bottom: 88px;
}
.mb-89 {
    margin-bottom: 89px;
}
.mb-90 {
    margin-bottom: 90px;
}
.mb-91 {
    margin-bottom: 91px;
}
.mb-92 {
    margin-bottom: 92px;
}
.mb-93 {
    margin-bottom: 93px;
}
.mb-94 {
    margin-bottom: 94px;
}
.mb-95 {
    margin-bottom: 95px;
}
.mb-96 {
    margin-bottom: 96px;
}
.mb-97 {
    margin-bottom: 97px;
}
.mb-98 {
    margin-bottom: 98px;
}
.mb-99 {
    margin-bottom: 99px;
}
.mb-100 {
    margin-bottom: 100px;
}