@charset "UTF-8";
/* ============================================================
   資料請求フォーム CVR改善スタイル（.rqForm スコープ版）
   CF7フォーム本文を <div class="rqForm"> で囲んだうえで使用すること。
   ============================================================ */

/* ------------------------------------------------------------
   1. 【最優先】iOSの自動ズームを止める
   body が font-size:14px のため入力欄も14pxを継承し、
   iOS Safari はフォーカス時に画面を勝手に拡大する。
   16px 以上にすると拡大しなくなる。
   ------------------------------------------------------------ */
.rqForm input[type="text"],
.rqForm input[type="email"],
.rqForm input[type="tel"],
.rqForm input[type="date"],
.rqForm textarea,
.rqForm select {
    font-size: 16px;
}


/* ------------------------------------------------------------
   2. 入力欄を「押せる」サイズに（30px → 52px）
   ------------------------------------------------------------ */
.rqForm input[type="text"],
.rqForm input[type="email"],
.rqForm input[type="tel"],
.rqForm input[type="date"],
.rqForm select {
    width: 100%;
    height: 52px;
    line-height: 52px;
    padding: 0 14px;
    border: solid 1px #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rqForm input::placeholder,
.rqForm textarea::placeholder {
    color: #9a9a9a;
}


/* ------------------------------------------------------------
   3. フォーカス状態を明示（現状フォーム用の :focus が皆無）
   「今ここを入力している」が分かるだけで離脱が減る。
   ------------------------------------------------------------ */
.rqForm input[type="text"]:focus,
.rqForm input[type="email"]:focus,
.rqForm input[type="tel"]:focus,
.rqForm input[type="date"]:focus,
.rqForm textarea:focus,
.rqForm select:focus {
    outline: none;
    border-color: #a1894b;
    box-shadow: 0 0 0 3px rgba(161, 137, 75, .18);
}


/* ------------------------------------------------------------
   4. セレクトに▼を描画する
   グローバルに appearance:none が当たっていて矢印が消えており、
   「希望の校舎」がプルダウンだと気づかれない状態。
   ------------------------------------------------------------ */
.rqForm select {
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}


/* ------------------------------------------------------------
   5. ラジオ／チェックボックスをカード化
   18pxの丸だけ = タップ標的18px。ラベルごと押せる48pxにする。
   ------------------------------------------------------------ */
.rqForm .wpcf7-radio .wpcf7-list-item,
.rqForm .wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    margin: 0 10px 10px 0;
}

.rqForm .wpcf7-radio .wpcf7-list-item label,
.rqForm .wpcf7-checkbox .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: solid 1px #ccc;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.rqForm .wpcf7-radio .wpcf7-list-item label:hover,
.rqForm .wpcf7-checkbox .wpcf7-list-item label:hover {
    border-color: #a1894b;
}

/* 選択中の状態（:has() 非対応ブラウザでは枠が付かないだけで実害なし） */
.rqForm .wpcf7-list-item label:has(input:checked) {
    border-color: #b01f24;
    background: #fdf4f4;
    font-weight: 500;
}

.rqForm .wpcf7-list-item input[type="radio"],
.rqForm .wpcf7-list-item input[type="checkbox"] {
    flex: 0 0 auto;
}

/* 同意チェックは横幅いっぱいで押しやすく */
.rqForm .wpcf7-checkbox.course-contact .wpcf7-list-item {
    display: block;
    margin: 0;
}

.rqForm .wpcf7-checkbox.course-contact label {
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}


/* ------------------------------------------------------------
   6. 送信ボタン（max-width:210px → 420px / 高さ50px → 64px）
   主要CTAが画面幅の半分しかなかった。
   ------------------------------------------------------------ */
.rqForm .submit {
    margin-top: 28px;
}

.rqForm .submit input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto;
    padding: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #fff;
    background: #b01f24;
    border: 0;
    border-radius: 9999px;
    box-shadow: 0 6px 16px rgba(176, 31, 36, .28);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.rqForm .submit input[type="submit"]:hover {
    background: #c22a30;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(176, 31, 36, .34);
}

.rqForm .submit input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(176, 31, 36, .28);
}

/* 送信処理中は押せないことを見た目で伝える */
.rqForm .submitting input[type="submit"],
.rqForm input[type="submit"].is-sending {
    opacity: .6;
    cursor: wait;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* ボタン直下の安心コピー */
.rqForm .submitAssure {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: #666;
    letter-spacing: .03em;
}


/* ------------------------------------------------------------
   7. エラー表示（.wpcf7-not-valid のスタイルが未定義だった）
   ------------------------------------------------------------ */
.rqForm .wpcf7-not-valid {
    border-color: #b01f24 !important;
    background-color: #fff6f6;
}

.rqForm .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #b01f24;
}

form.wpcf7-form:has(.rqForm) .wpcf7-response-output {
    max-width: 640px;
    margin: 24px auto 0;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
}


/* ------------------------------------------------------------
   8. 必須バッジ（※ → 必須）
   ------------------------------------------------------------ */
.rqForm th span.must {
    display: inline-block;
    margin-left: .6em;
    padding: 3px 7px;
    border-radius: 3px;
    background: #b01f24;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
    vertical-align: middle;
}


/* ------------------------------------------------------------
   9. 住所欄の2段組に余白（現状ぴったり隣接している）
   ------------------------------------------------------------ */
.rqForm .addressTxt {
    margin-top: 10px;
}

/* スクリーンリーダー専用ラベル（WordPress標準と同等） */
.rqForm .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ------------------------------------------------------------
   11. 規約ボックス（高さ240pxのスクロール枠）を読みやすく
   ------------------------------------------------------------ */
.rqForm .formTerms {
    background: #fafafa;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.rqForm .formTerms dt {
    position: sticky;
    top: -30px;
    padding: 8px 0;
    background: #fafafa;
    z-index: 1;
}


/* ------------------------------------------------------------
   12. スマホ最適化
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

    .rqForm th {
        padding: 12px 15px 4px;
        font-size: 14px;
        font-weight: 600;
    }

    .rqForm td {
        padding: 0 15px 14px;
    }

    .rqForm tr {
        border-bottom: none;
    }

    .rqForm .submit input[type="submit"] {
        max-width: none;
        width: calc(100% - 30px);
        height: 60px;
        line-height: 60px;
        font-size: 17px;
    }

    /* ラジオは2枚を等幅に並べる */
    .rqForm .wpcf7-radio {
        display: flex;
        gap: 10px;
    }

    .rqForm .wpcf7-radio .wpcf7-list-item {
        flex: 1 1 0;
        margin: 0;
    }

    .rqForm .wpcf7-radio .wpcf7-list-item label {
        width: 100%;
        justify-content: center;
        padding: 0 10px;
    }
}


/* ------------------------------------------------------------
   13. 【任意】スマホで送信ボタンを画面下に固定する
   効果は大きいが見た目が変わるため、まず 1〜12 を入れて
   数値を確認してから採用するのを推奨。
   使う場合は下のコメントを外す。
   ------------------------------------------------------------ */
/*
@media screen and (max-width: 767px) {
    .rqForm .submit {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 28px -3% 0;
        padding: 12px 3% calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
    }
}
*/


/* ------------------------------------------------------------
   14. 送信中オーバーレイ
   サーバー側の処理に数秒かかるため、無言で待たせない。
   ------------------------------------------------------------ */
.rqForm {
    position: relative;
}

.rqSending {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.rqForm.is-sending .rqSending {
    display: flex;
}

/* オーバーレイ表示中は下の要素を触らせない */
.rqForm.is-sending .formbody {
    pointer-events: none;
}

.rqSending__box {
    position: sticky;
    top: 40vh;
    text-align: center;
}

.rqSending__spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border: 3px solid rgba(176, 31, 36, .2);
    border-top-color: #b01f24;
    border-radius: 50%;
    animation: rqSpin .8s linear infinite;
}

@keyframes rqSpin {
    to { transform: rotate(360deg); }
}

.rqSending__text {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: .04em;
}

/* アニメーションを控えたい設定のユーザーには回転を止める */
@media (prefers-reduced-motion: reduce) {
    .rqSending__spinner {
        animation-duration: 3s;
    }
}