/* ==============================================

FORM お問い合わせ・希望条件登録・来店予約

============================================== */

/* ----------------------------------------
CONTACT FORM 7 リセット・基本設定
---------------------------------------- */

/* CF7のデフォルトマージンをリセット */
.wpcf7-list-item {
    margin: 0;
}

/* CF7のレスポンス出力 */
.wpcf7-response-output {
    text-align: center;
}

/* CF7のフォームコントロールラップ */
.wpcf7-form-control-wrap {
    color: #403734;
    display: inline-block;
}

/* CF7のスピナー非表示 */
.wpcf7-spinner {
    display: none;
}

/* ----------------------------------------
フォーム全体の基本設定
---------------------------------------- */

.contact-body p {
    text-align: left;
}

.contact-body p:has(.wpcf7-form-control-wrap, .btn) {
    text-align: center;
}

.form-wrapper {
    margin: 0 auto;
}

.form-box {
    width: 100%;
}

/* ----------------------------------------
フォームフィールド共通スタイル
---------------------------------------- */

/* テキスト入力系の基本スタイル */
form input[type=text],
form input[type=email],
form input[type=tel],
form textarea {
    border-radius: 5px;
    background-color: #F4F4F5;
    padding: 1.3em 2em;
    --font-min: 16;
    --font-max: 20;
    font-size: var(--font-size);
    width: 100%;
    box-sizing: border-box;
}

@media (width < 800px) {
    form input[type=text], 
    form input[type=email], 
    form input[type=tel], 
    form textarea {
        padding: 1em;
    }
}

/* オートフィル時の背景色 */
input:-internal-autofill-selected {
    background-color: #F8F5E4 !important;
}

/* placeholder のスタイル */
.form-box input::placeholder,
.form-box textarea::placeholder {
    color: #A8A8A8;
    font-family: var(--fontFamily-base);
}

/* ブラウザ別のplaceholder対応 */
.form-box input::-webkit-input-placeholder,
.form-box textarea::-webkit-input-placeholder {
    font-family: var(--fontFamily-base);
    color: #A8A8A8;
}

.form-box input::-moz-placeholder,
.form-box textarea::-moz-placeholder {
    font-family: var(--fontFamily-base);
    color: #A8A8A8;
    opacity: 1; 
}

.form-box input:-ms-input-placeholder,
.form-box textarea:-ms-input-placeholder {
    font-family: var(--fontFamily-base);
    color: #A8A8A8;
}

/* ----------------------------------------
フォームレイアウト（dl/dt/dd）
---------------------------------------- */

.form-box dl {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    --space-min: 16;
    --space-max: 45;
    margin-bottom: var(--space);
}

.form-box dl:last-of-type {
    margin-bottom: 30px;
}

.form-box dt {
    --font-min: 16;
    --font-max: 24;
    font-size: var(--font-size);
    font-weight: var(--wght-regular);
    line-height: 1;
    text-align: left;
    padding-bottom: 0.6em;
}

@media (max-width: 800px) {
    .form-box dt {
        padding-bottom: 12px;
        font-weight: var(--wght-medium);
    }

    .form-box dd {
        width: 100%;
    }
}

.form-box dt .message {
    padding-top: 10px;
    vertical-align: top;
}

.form-box dd P {
    display: flex;
}

/* ----------------------------------------
必須・任意バッジ
---------------------------------------- */

.form-box dt .required {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-box dt .required:after {
    content: "必須";
    display: inline-block;
    padding-left: 0.5em;
    color: white;
    line-height: 1;
    font-size: 12px;
    background: var(--color-base);
    padding: 4px 5px 5px;
    border-radius: 5px;
    margin-top: 0.1em;
}

/* ボタングループの並び */
.wpcf7-form-control {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
}

@media (max-width: 800px) {
    .wpcf7-form-control {
        gap: 5px 10px;
    }
}

/* ----------------------------------------
ラジオボタン・チェックボックス共通スタイル（ボタン風デザイン）
---------------------------------------- */

/* 本体を非表示 */
.form-box .radio-btn-wrapper input[type="radio"],
.form-box .checkbox-btn-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ラベルの共通スタイル */
.form-box .radio-btn-wrapper .wpcf7-list-item-label,
.form-box .checkbox-btn-wrapper .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.45em 1em;
    border: 1px solid var(--color-base);
    border-radius: 999px;
    background-color: #fff;
    color: var(--color-base);
    --font-min: 14;
    --font-max: 24;
    font-size: var(--font-size);
    font-weight: var(--wght-regular);
    line-height: 1;
    min-width: 5em;
    transition: all 0.3s;
}

@media (max-width: 800px) {
    .form-box .radio-btn-wrapper .wpcf7-list-item-label,
    .form-box .checkbox-btn-wrapper .wpcf7-list-item-label {
        padding: 0.6em 1.2em;
        font-size: 14px;
    }
}

/* ホバー */
.form-box .radio-btn-wrapper .wpcf7-list-item-label:hover,
.form-box .checkbox-btn-wrapper .wpcf7-list-item-label:hover {
    filter: brightness(0.95);
}

/* 選択時 */
.form-box .radio-btn-wrapper input[type="radio"]:checked + .wpcf7-list-item-label,
.form-box .checkbox-btn-wrapper input[type="checkbox"]:checked + .wpcf7-list-item-label {
    background-color: var(--color-base);
    color: white;
    border-color: var(--color-base);
}

/* 「はい」「その他」ボタンに矢印を追加 */
.form-box .radio-btn-wrapper input[value="はい"] + .wpcf7-list-item-label::after,
.form-box .radio-btn-wrapper input[value="その他"] + .wpcf7-list-item-label::after,
.form-box .checkbox-btn-wrapper input[value="その他"] + .wpcf7-list-item-label::after {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.5em;
}

@media (max-width: 800px) {
    .form-box .radio-btn-wrapper input[value="はい"] + .wpcf7-list-item-label::after,
    .form-box .radio-btn-wrapper input[value="その他"] + .wpcf7-list-item-label::after,
    .form-box .checkbox-btn-wrapper input[value="その他"] + .wpcf7-list-item-label::after {
        border-top: 1px solid currentColor;
        border-right: 1px solid currentColor;
    }
}

/* 選択時は矢印も白に */
.form-box .radio-btn-wrapper input[type="radio"]:checked + .wpcf7-list-item-label::after,
.form-box .checkbox-btn-wrapper input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    border-color: white;
}

/* ----------------------------------------
ラジオボタン個別設定
---------------------------------------- */

/* ラジオボタンのレイアウト調整 */
.form-box dd .wpcf7-form-control-wrap,
.form-box .radio-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

/* ボタン配置の時にバリデーションを下に表示 */
.form-box dd .wpcf7-form-control-wrap, 
.form-box .radio-btn-wrapper {
    flex-direction: column;
}

/* ----------------------------------------
チェックボックス個別設定
---------------------------------------- */

/* h3サブ見出し（エリア選択用） */
.form-box h3 {
    --font-min: 14;
    --font-max: 20;
    font-size: var(--font-size);
    font-weight: var(--wght-bold);
    color: var(--color-base);
    margin: 1em 0 0.5em 0;
    width: 100%;
}

/* チェックボックスのレイアウト */
.form-box .checkbox-btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

/* labelタグを透過（.checkbox-btn-wrapper内のみ） */
.form-box .checkbox-btn-wrapper label {
    display: contents;
}

/* ----------------------------------------
チェックボックス（プライバシーポリシー同意用）
---------------------------------------- */

.accept-wrap {
    text-align: center;
    --font-min: 14;
    --font-max: 18;
    font-size: var(--font-size);
}

.wpcf7-acceptance input[type="checkbox"] {
    position: relative;
    border: 1px solid var(--color-base);
    border-radius: 4px;
    vertical-align: -0.2em;
    opacity: 1;
    pointer-events: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.2s;
    padding: 0.5em;
}

.wpcf7-acceptance input[type="checkbox"]:checked {
    background-color: var(--color-base);
    border-color: var(--color-base);
}

.wpcf7-acceptance input[type="checkbox"]:checked:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    width: 6px;
    height: 12px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.wpcf7-form-control-wrap .wpcf7-acceptance {
    display: inline-block;
}

.wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item {
    margin: 0 1em 0 0;
}

/* チェックボックスのラベル */
.accept-wrap label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    --font-min: 14;
    --font-max: 16;
    font-size: var(--font-size);
}

/* ----------------------------------------
個人情報の取り扱い
---------------------------------------- */

.privacy-notice {
    --space-min: 10;
    --space-max: 52;
    padding: var(--space) 11px;
    margin: 2em 0 1em;
    border: 1px solid #D9D9D9;
    text-align: center;
    font-weight: var(--wght-regular);
}

.privacy-notice__title {
    --font-min: 14;
    --font-max: 24;
    font-size: var(--font-size);
    --space-min: 6;
    --space-max: 22;
    margin-bottom: var(--space);
}

.privacy-notice__text {
    --font-min: 12;
    --font-max: 18;
    font-size: var(--font-size);
    --space-min: 6;
    --space-max: 22;
    margin-bottom: var(--space);
}

.privacy-link {
    color: var(--color-main);
    text-decoration: underline;
}

.privacy-link:hover {
    text-decoration: none;
}

/* privacy-notice内のチェックボックス */
.privacy-notice .accept-wrap {
    --space-min: 6;
    --space-max: 22;
    margin-top: var(--space);
    text-align: center;
}

/* 確認用チェックボックス（グレー背景） */
.accept-wrap--confirm {
    background: #F4F4F5;
    padding: 1em;
    --space-min: 12;
    --space-max: 30;
    margin: var(--space) 0;
    border-radius: 8px;
    font-weight: var(--wght-medium);
    --font-min: 13;
    --font-max: 18;
    font-size: var(--font-size);
}

/* ----------------------------------------
セレクトボックス（占有面積用）
---------------------------------------- */

.form-box .select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

@media (max-width: 800px) {
    .form-box .select-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}

.form-box .area-select {
    border: 1px solid var(--color-base);
    border-radius: 999px;
    padding: 0.45em 1em;
    --font-min: 14;
    --font-max: 24;
    font-size: var(--font-size);
    font-weight: var(--wght-regular);
    font-family: var(--fontFamily-base);
    color: #403734;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23403734' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 1.5em) center;
    padding-right: 3.5em;
    min-width: 150px;
}

@media (max-width: 800px) {
    .form-box .area-select {
        padding: 0.6em 1.2em;
        padding-right: 3.5em;
        font-size: 14px;
        min-width: fit-content;
    }
}

@media (max-width: 768px) {
    .form-box .area-select {
        width: 100%;
        min-width: auto;
    }
}

.form-box .area-select:focus {
    outline: 2px solid var(--color-main);
    border: none;
}

.form-box .select-wrapper span {
    --font-min: 14;
    --font-max: 18;
    font-size: var(--font-size);
}

/* ----------------------------------------
条件付き表示フィールド
---------------------------------------- */

.form-box .conditional-field {
    display: none;
}

.form-box .conditional-field[style*="display: block"] {
    display: block;
}

/* ----------------------------------------
見出し
---------------------------------------- */

.form-box h2:first-child {
    margin-top: 0;
}

/* ----------------------------------------
送信ボタン
---------------------------------------- */

.submit-wrap {
    text-align: center;
}

input.wpcf7-submit.has-spinner.btn,
input.wpcf7-submit.has-spinner.btn:disabled {
    width: 100%;
    text-align: center;
    color: white;
    --font-min: 16;
    --font-max: 24;
    font-size: var(--font-size);
    font-family: var(--fontFamily-base); 
    font-weight: var(--wght-medium);
    background-color: var(--color-base);
    border-radius: 999px;
    padding: 1em 2em;
    margin-inline: auto;
    transition: 0.3s;
}

input.wpcf7-submit.has-spinner.btn:disabled {
    background-color: #C4C4C4;
}

/* ----------------------------------------
バリデーション
---------------------------------------- */

.wpcf7-not-valid-tip {
    text-align: left;
}

/* ========================================
希望条件登録,予約相談ページ専用スタイル
======================================== */

.requirements .form-section {
    --space-min: 20;
    --space-max: 74;
    margin-bottom: var(--space);
}

.form__text {
    --font-min: 16;
    --font-max: 36;
    font-size: var(--font-size);
    margin-bottom: clamp(40px, 7.22vw, 104px);
    font-weight: var(--wght-light);
}

.requirements h2 {
    --font-min: 14;
    --font-max: 36;
    font-size: var(--font-size);
    font-weight: var(--wght-regular);
    --space-min: 9;
    --space-max: 67;
    margin-bottom: var(--space);
}