/* 固定バナー全体のスタイル */
.fixed-banner {
  position: fixed;
  bottom: 20px;
  right: 10px; /* 端から少しだけ内側 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 1000;
}

/* ボタン共通のスタイル（スマホ用デフォルトサイズ） */
.banner-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px; /* 初期は短め */
  height: 50px;
  background-color: #ff69b4;
  color: #ffffff;
  text-align: center;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 20px;
  transition: width 0.4s ease-out, background-color 0.3s ease-out, transform 0.4s ease-out;
}

/* PCではボタンを2回り大きくする */
@media (min-width: 1024px) {
  .banner-item {
    width: 120px; /* PC用はもっと大きく */
    height: 70px;
    font-size: 16px; /* テキストサイズも大きく */
    border-radius: 35px;
  }

  .banner-item:hover {
    width: 260px; /* PC用の拡張時 */
    transform: translateX(-25px); /* PCではさらにスライド */
  }
}

/* テキストの切り替え */
.banner-item span.full-text {
  display: none;
}

.banner-item span.short-text {
  display: inline;
}

/* ホバー時にボタンを拡張し、スムーズに表示 */
.banner-item:hover {
  width: 220px; /* スマホではこのサイズ */
  background-color: #ff4f9a;
  transform: translateX(-20px);
  justify-content: center;
}

/* ホバー時のテキスト切り替え */
.banner-item:hover span.full-text {
  display: inline;
}

.banner-item:hover span.short-text {
  display: none;
}

/* 通常時にボタンが濃い青でテキストが白色、縁が透明になる */
.is-style-more_btn a {
    background-color: #003366; /* 濃い青 */
    color: white; /* テキスト色を白に設定 */
    border: 1px solid transparent; /* 通常時の縁を透明に設定 */
    padding: 20px 20px; /* ボタンのパディング */
    box-sizing: border-box; /* ボックスサイズをボーダーボックスに設定 */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 背景色とテキスト色の変化をスムーズに */
}

/* マウスオーバー時にボタンが薄い青になる */
.is-style-more_btn a:hover {
    background-color: #6699CC; /* 薄い青 */
    color: white; /* テキストは白のまま */
    border-color: transparent; /* 縁も透明のまま */
}

.form-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px; /* カレンダーと希望時間の最大幅を統一 */
    margin: auto;
}

/* タイトル */
.section-title-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed #666; /* ここを点線に変更 */
}

/* 必須マーク */
.required {
    font-size: 14px;
    color: white;
    background-color: red;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 10px;
}

/* 希望試乗モデル */
.model-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: auto;
    justify-content: center;
}

@media (max-width: 768px) {
    .model-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.model-option {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.model-option img {
    width: 100%;
    max-width: 250px;
    border-radius: 10px;
}

.model-option:hover {
    background-color: rgba(173, 216, 230, 0.3);
}

.model-option.selected {
    border: 4px solid blue;
    background-color: rgba(173, 216, 230, 0.3);
}

/* カレンダー */
.calendar-container {
    max-width: 900px;
    width: 100%;
    margin-bottom: 20px; /* カレンダーと希望時間の間に余白を追加 */
}

/* カレンダーのヘッダー部分 */
.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* 希望時間と希望日時のタイトルの余白を調整 */
.section-title-container.time-title,
.section-title-container.date-title {
    margin-top: 30px; /* 希望時間と希望日時のタイトルの上に余白を追加 */
}

/* 月表示 */
.calendar-month {
    font-size: 13px; /* 一回り小さく */
    font-weight: bold;
    text-align: center;
    min-width: 100px; /* 幅を少し狭める */
    padding: 6px 0; /* 高さも調整 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 前月・翌月ボタン */
.month-nav {
    background-color: #007bff;
    color: white;
    padding: 6px 10px; /* 一回り小さく */
    border-radius: 4px; /* 角丸も微調整 */
    cursor: pointer;
    font-size: 12px; /* 文字サイズも調整 */
    font-weight: bold;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px; /* 幅を小さく */
}

.month-nav:hover {
    background-color: #0056b3;
}

/* 前月ボタン無効時 */
.month-nav.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.calendar-header #prev-month,
.calendar-header #next-month {
    color: white !important;
}
/* カレンダー本体 */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
    width: 100%;
}

/* 曜日ラベル */
.day {
    font-weight: bold;
    background-color: #f5f5f5;
    padding: 6px; /* 余白を減らしてコンパクトに */
    height: 30px; /* 縦幅を少し小さく */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

/* 日付セル */
.date {
    padding: 20px; /* 余白を減らして小さく */
    border-radius: 5px;
    text-align: center;
    font-size: 16px; /* 文字サイズも微調整 */
    min-width: 45px; /* 幅を調整 */
    height: 80px; /* 縦幅を小さく */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 1px solid #ccc;
    cursor: pointer;
}
/* --- タブレット以下（幅768px以下） --- */
@media (max-width: 768px) {
    .date {
        height: 60px;   /* スマホでも広めに */
        padding: 15px;
        font-size: 16px;
    }
}

/* --- スマホ（幅480px以下） --- */
@media (max-width: 480px) {
    .date {
        height: 45px;   /* コンパクトにしつつ広さ確保 */
        padding: 12px;
        font-size: 14px;
    }
}
/* ホバー時 */
.date:hover {
    background-color: lightblue;
}

/* 選択時 */
.date.selected {
    background-color: blue;
    color: white;
}

/* 選択不可の日付 */
.date.disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    pointer-events: none;
}

/* 曜日（日曜日は赤、土曜日は青） */
.day:nth-child(1), .date.sunday { /* 日曜日 */
    color: red;
}

.day:nth-child(7), .date.saturday { /* 土曜日 */
    color: blue;
}

/* 選択不可の箇所は「押せません」というマウスカーソルに変更 */
.date.disabled {
    cursor: not-allowed;
}

/* 希望時間のタイトルの余白を調整 */
.section-title-container.time-title {
    margin-top: 30px; /* 希望時間のタイトルの上に余白を追加 */
}

/* 希望時間のコンテナ */
.time-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3カラム維持 */
    gap: 10px;
    max-width: 900px; /* カレンダーと同じ幅に統一 */
    width: 100%;
    margin: auto;
    justify-content: center;
    align-items: center;
}

/* 希望時間ボタン */
.time-option {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /*padding: 8px;*/
    font-size: 15px;
    font-weight: normal;
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
    text-align: center;
    width: 100% !important;
    height: 55px;
}

/* 選択時の即時反映 */
.time-option.selected {
    background-color: blue !important;
    color: white !important;
    border-color: #004080 !important;
}

/* 選択済みのボタンにホバーしても色が変わらない */
.time-option:not(.selected):hover {
    background-color: lightblue;
}

/* .time-container の影響で不要な改行を防ぐ */
.time-container br {
    display: none !important;
}

/* 希望店舗のタイトルの上に余白を追加 */
.section-title-container.store-title {
    margin-top: 30px; /* 余白を追加 */
}

/* 希望店舗 */
.store-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラムに調整 */
    gap: 10px;
    max-width: 900px;
    width: 100%;
    margin: auto;
    justify-content: center;
    align-items: center;
}

/* 店舗選択ボタン */
.store-option {
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding: 10px; */ /* 余白を少し減らしてスリム化 */
    font-size: 16px; /* 文字サイズを調整 */
    font-weight: normal; /* 太字を解除 */
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    text-align: center;
    width: 100%;
    height: 55px; /* 縦幅を縮小 */
}

/* 選択時 */
.store-option.selected {
    background-color: blue !important;
    color: white !important;
    border-color: #004080 !important;
}

/* 選択済みのボタンにホバーしても色が変わらない */
.store-option:not(.selected):hover {
    background-color: lightblue;
}

/* 希望店舗のタイトルの上に余白を追加 */
.store-title {
    margin-top: 30px !important; /* 余白を確実に適用 */
}

/* 何を見てご応募されましたか？（タイトルの上に余白30px） */
.referral-title {
    margin-top: 30px !important; /* 余白を統一 */
}

/* 応募経路コンテナ（3カラム、横幅いっぱい） */
.referral-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラム */
    gap: 10px;
    max-width: 900px; /* 最大幅 */
    width: 100%; /* 横幅いっぱい */
    margin: auto;
    justify-content: center;
    align-items: center;
}

/* 応募経路ボタン */
.referral-option {
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding: 10px; */ /* 余白を少し減らしてスリム化 */
    font-size: 15px; /* 文字サイズを微調整 */
    font-weight: normal; /* 太字を解除 */
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    text-align: center;
    width: 100% !important; /* 横幅いっぱい */
    height: 50px; /* 縦幅を縮小 */
}

/* ホバー時 */
.referral-option:hover {
    background-color: lightblue;
}

/* 選択時 */
.referral-option.selected {
    background-color: blue;
    color: white;
}

/* 「査定を希望されますか？」と「見積もりを希望されますか？」（タイトルの上に余白30px） */
.assessment-title, .quotation-title {
    margin-top: 30px !important; /* 余白を統一 */
}

/* 見積・査定2カラムのコンテナ（横幅最大） */
.assessment-container, .quotation-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2カラム */
    gap: 10px;
    max-width: 900px; /* 最大幅 */
    width: 100%; /* 横幅いっぱい */
    margin: auto;
    justify-content: center;
    align-items: center;
}

/* ボタンデザイン */
.assessment-option, .quotation-option {
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding: 10px; */ /* 余白を少し減らしてスリム化 */
    font-size: 16px; /* 文字サイズを微調整 */
    font-weight: normal; /* 太字を解除 */
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    text-align: center;
    width: 100% !important; /* 横幅いっぱい */
    height: 50px; /* 縦幅を縮小 */
}

/* ホバー時 */
.assessment-option:hover, .quotation-option:hover {
    background-color: lightblue;
}

/* 選択時 */
.assessment-option.selected, .quotation-option.selected {
    background-color: blue;
    color: white;
}

/* お名前セクションのタイトル */
.name-title {
    margin-top: 30px !important;
}

/* 名前フィールドを横並びにする */
.name-input-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 900px; /* 他の要素と統一 */
    margin: auto;
    gap: 8px; /* 中央スペースを少し縮小 */
}

/* 各入力フィールドのWrapper */
.name-input-wrapper {
    flex: 1; /* 均等幅に変更 */
    min-width: 0;
}

/* 各入力フィールド */
.name-input {
    padding: 10px; /* 余白を少し減らしてスリム化 */
    font-size: 16px;
    font-weight: normal; /* 太字を解除 */
    border: 2px solid #ccc;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

/* 入力フィールドのフォーカス時 */
.name-input:focus {
    border-color: #007bff; /* より洗練されたブルーに */
    background-color: #eef5ff; /* 柔らかいブルーの背景 */
    transition: 0.2s ease-in-out;
}

/* メールアドレスと電話番号の入力コンテナ */
.email-input-container, .phone-input-container {
    width: 100%;
    max-width: 900px; /* 画面幅に応じて統一 */
    margin: auto;
}

/* 入力フィールドのデザイン */
.email-input, .phone-input {
    width: 100%; /* 横幅をいっぱいに広げる */
    padding: 10px; /* 縦幅を調整してスリムに */
    font-size: 16px; /* 統一感を持たせる */
    font-weight: normal; /* 太字を解除 */
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* 入力フィールドのフォーカス時 */
.email-input:focus, .phone-input:focus {
    border-color: #007bff; /* シックなブルー */
    background-color: #eef5ff; /* 落ち着いたブルーの背景 */
}

/* フォーカス時のスタイル */
.email-input:focus, .phone-input:focus {
    border-color: blue;
}
/* メールアドレス・電話番号セクションの見出し */
.section-title-container.email-title,
.section-title-container.phone-title {
    margin-top: 30px; /* 他のセクションと統一 */
}
/* NG時の赤枠 */
.input-error {
    border: 2px solid red !important;
    background-color: #ffe6e6; /* エラー時の薄い赤 */
}

/* OK時の青枠 */
.input-valid {
    border: 2px solid blue !important;
    background-color: #e6f2ff; /* OK時の薄い青 */
}

/* エラーメッセージ */
.error-message {
    color: red;
    font-size: 14px;
    display: none; /* デフォルトでは非表示 */
    margin-top: 5px;
}
/* お名前・フリガナのエラーメッセージ（赤色） */
.error-text {
    color: red;
    font-size: 14px;
    font-weight: bold;
    display: none; /* デフォルトでは非表示 */
    margin-top: 5px;
}

/* 希望連絡方法のスタイル（査定・見積もりと統一） */
.contact-method-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin: auto;
    max-width: 900px;
}

/* 選択肢のデザイン */
.contact-method-option {
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    /*text-align: center;*/
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}

/* 選択時の即時反映（査定・見積と同じ仕様に統一！） */
.contact-method-option.selected {
    background-color: #007bff;
    color: #fff;
    border-color: #0056b3;
}

/* マウスオーバー時の挙動修正 */
.contact-method-option:hover:not(.selected) {
    background-color: #f0f8ff;
    border-color: #007bff;
 }

/* 希望連絡方法の見出し下の余白を削除 */
.contact-method-title {
    margin-bottom: 5px; /* 余白を小さく */
}

/* ボタンのコンテナの余白を調整 */
.contact-method-container {
    margin-top: 0; /* 余計な余白を削除 */
}
/* 希望連絡方法の見出し上の余白を調整 */
.contact-method-title {
    margin-top: 10px; /* 見出しの上に統一された余白を追加 */
}

.section-title-container.other-requests-title {
    padding-top: 30px;
    border-top: 1px solid transparent; /* マージンの相殺を防ぐ */
}

/* その他要望タイトル */
.textarea-title {
    margin-top: 30px !important;
}



/* テキストエリアの親要素（幅を統一する） */
.textarea-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* 中央揃え */
}

/* テキストエリアのコンテナ（フォーム全幅に揃える） */
.textarea-container {
    width: 100%; /* 全幅 */
    max-width: 100%; /* 画面いっぱい */
}

/* テキストエリアのスタイル */
.textarea-container textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    display: block;
}

.optional {
    font-size: 14px;
    color: white; /* 文字色を白 */
    background-color: #e832cf; /* 背景色をオレンジ */
    margin-left: 10px;
    font-weight: bold;
    padding: 3px 8px; /* 余白を追加 */
    border-radius: 4px; /* 角を少し丸くする */
    display: inline-block; /* 正しく配置するため */
}

.error-message {
    color: red;
    font-size: 14px;
    display: none;
    margin-top: 5px;
}

/* 個人情報保護のセクションに余白を追加 */
.privacy-title {
    margin-top: 30px !important;
}

/* 個人情報保護のテキスト */
.privacy-policy {
    font-size: 14px;
    color: #333;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    line-height: 1.6;
    max-width: 900px;
    margin: auto;
}

/* 同意するチェックボックスのエリア */
/* 同意するチェックボックス */
.consent-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.consent-label {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
/* テキスト系入力欄の高さを他と揃える */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    padding: 12px 10px;   /* 縦を広げたいときは最初の数値を増やす */
    line-height: 1.5;     /* テキストが中央に収まるように */
    box-sizing: border-box;
}

.assessment-option.selected,
.quotation-option.selected,
.contact-method-option.selected,
.time-option.selected,
.store-option.selected,
.referral-option.selected {
    color: white !important;
}

.assessment-option.selected *,
.quotation-option.selected *,
.contact-method-option.selected *,
.time-option.selected *,
.store-option.selected *,
.referral-option.selected * {
    color: white !important;
}

/* チェックボックスのサイズを大きくする */
.consent-label input[type="checkbox"] {
    width: 24px; /* 通常のチェックボックス（16px）より大きく */
    height: 24px;
    cursor: pointer;
}

#submit-button {
    display: block;
    width: 100%; /* 親要素の幅いっぱい */
    min-width: 50vh; /* 余計な幅制限を解除 */
    max-width: 100%; /* エリアを超えない */
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: gray; /* 初期はグレー */
    border: none;
    border-radius: 5px;
    cursor: not-allowed; /* 初期は押せない */
    margin: 20px auto; /* 自動的に中央配置 */
    transition: background-color 0.3s;
}

/* 送信ボタンが有効になった時 */
#submit-button.enabled {
    background-color: blue;
    cursor: pointer;
}
.calendar-header #prev-month,
.calendar-header #next-month {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* Safari対策 */
}

/* 店舗選択 無効化（グレーアウト） */
.store-option.disabled {
    background-color: #666666 !important; /* 濃いグレー */
    color: #ffffff !important;           /* 白文字 */
    pointer-events: none;
    border-color: #444444 !important;    /* さらに濃いグレーの枠線 */
}
/* カレンダーのレスポンシブ対応 */
.calendar-container {
    max-width: 100%;
    overflow-x: auto;  /* スクロールを許可して崩れを防ぐ */
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 常に7等分 */
    width: 100%;
    box-sizing: border-box;
}

.calendar div {
    min-width: 0;  /* 画面幅に合わせて縮む */
    box-sizing: border-box;
    text-align: center;
    padding: 6px;  /* スマホで詰める */
}