@charset "utf-8";

/* ==============================================
   CSS カスタムプロパティ (CSS Variables)
   共通の設定や色の定義
   ============================================== */
:root {
    /* スペーシング */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */

    /* ボーダー半径 */
    --border-radius-sm: 4px;
    --border-radius-md: 5px;

    /* ブレークポイント */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px; /* デスクトップ用ブレークポイントを明示的に追加 */

    /* Contact Form 7 固有のカスタムプロパティ */
    --cf7-primary-color: #007bff;
    --cf7-text-color: var(--color-black); /* 共通変数を使用 */
    --cf7-bg-color: var(--color-white); /* 共通変数を使用 */
    --cf7-border-color: #ddd;
    --cf7-focus-color: #80bdff;
    --cf7-error-color: var(--color-red); /* 共通変数を使用 */
    --cf7-success-color: #28a745;
    --cf7-breakpoint-sm: var(--breakpoint-sm);
    --cf7-breakpoint-md: var(--breakpoint-md);
    --cf7-breakpoint-lg: var(--breakpoint-lg); /* 新しい変数追加 */
    --cf7-border-radius: var(--border-radius-sm);
    --cf7-spacing: var(--spacing-sm); /* 1rem (16px) */

    /* Datepicker 固有のカスタムプロパティ */
    --datepicker-saturday-color: #7ec225;
    --datepicker-saturday-bg: #f7ffed;
    --datepicker-sunday-color: #9b0000;
    --datepicker-sunday-bg: #fdd;
    --datepicker-holiday-color: #767000;
    --datepicker-holiday-bg: #fffec8;
}

/* ==============================================
   Inquiry Page Specific Styles (#inquiry-id)
   ============================================== */
#inquiry-id {
    /* ここに #inquiry-id 自体へのスタイルがあれば記述 */
}

#inquiry-id .required {
    display: inline-block; /* text-top との組み合わせでインライン要素として機能 */
    padding: 5px;
    margin-left: 10px;
    font-size: var(--fSize--12);
    vertical-align: text-top;
    color: var(--color-white);
    background-color: var(--color-red);
    border-radius: var(--border-radius-md); /* 5px */
}

#inquiry-id .form-group:not(:last-child) {
    margin-bottom: var(--spacing-md); /* 30px */
}

#inquiry-id .privacy {
    padding: 20px;
    background: var(--color-grey);
    border-radius: var(--border-radius-sm); /* 4px */
}

#inquiry-id .privacy__content {
    height: 250px;
    overflow-y: scroll;
}

#inquiry-id .privacy__content h1 {
    margin-bottom: var(--spacing-md); /* 20px */
    font-size: var(--fSize--20);
    font-weight: var(--font-family-base-bold);
}

#inquiry-id .privacy__content h2 {
    margin-bottom: var(--spacing-sm); /* 10px */
    font-size: var(--fSize--18);
    font-weight: var(--font-family-base-bold);
}

/* ==============================================
   Contact Form 7 - モダン レスポンシブ CSS
   ============================================== */

/* フォーム全体のコンテナ */
.wpcf7 {
    max-width: 800px;
    padding: calc(var(--cf7-spacing) * 1.5);
    margin: 0 auto var(--cf7-spacing) auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: var(--cf7-text-color);
    background-color: var(--cf7-bg-color);
    border-radius: var(--cf7-border-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* フォームの各項目 (pタグで囲まれていることが多い) */
/* もしデフォルトのmargin-bottomを消したい場合はコメントを解除 */
/* .wpcf7 p {
  margin-bottom: var(--cf7-spacing);
} */

/* ラベル */
.wpcf7 label {
    display: block;
    margin-bottom: calc(var(--cf7-spacing) / 4);
}

/* テキスト入力、メール、URL、電話、数値、テキストエリア */
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(
        .wpcf7-radio
    ):not(.wpcf7-acceptance),
.wpcf7-textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: calc(var(--cf7-spacing) * 0.75) var(--cf7-spacing);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cf7-text-color);
    border: 1px solid var(--cf7-border-color);
    border-radius: var(--cf7-border-radius);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* フォーカス時のスタイル */
.wpcf7-form-control:not(.wpcf7-submit):focus,
.wpcf7-textarea:focus {
    outline: 0;
    border-color: var(--cf7-primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* テキストエリアの高さ調整 */
.wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
}

/* チェックボックスとラジオボタンのコンテナ */
/* CF7は自動的にこれらの項目を span.wpcf7-list-item-label で囲みます */
.wpcf7-list-item {
    display: flex;
    align-items: center;
    margin-right: var(--cf7-spacing);
    margin-bottom: calc(var(--cf7-spacing) / 2);
}

/* チェックボックス、ラジオボタンの実際の入力要素 */
.wpcf7-list-item input[type='checkbox'],
.wpcf7-list-item input[type='radio'] {
    margin-right: calc(var(--cf7-spacing) / 4);
}

/* 承諾チェックボックス (wpcf7-acceptance) */
.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
}

.wpcf7-acceptance input[type='checkbox'] {
    margin-top: 3px;
    margin-right: 0.5rem;
}

/* ファイルアップロードフィールド */
.wpcf7-file {
    box-sizing: border-box;
    width: 100%;
    padding: calc(var(--cf7-spacing) * 0.5) calc(var(--cf7-spacing) * 0.75);
    border: 1px solid var(--cf7-border-color);
    border-radius: var(--cf7-border-radius);
}

/* 送信ボタン */
.wpcf7-submit {
    display: inline-block;
    padding: var(--cf7-spacing) calc(var(--cf7-spacing) * 2);
    color: var(--color-white);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* OSデフォルトのスタイルをリセット */
    cursor: pointer;
    background-color: var(--cf7-primary-color);
    border: none;
    border-radius: var(--cf7-border-radius);
    transition: background-color 0.2s ease-in-out;
}

.wpcf7-submit:hover {
    /* CSS変数でSCSSのdarkenは使えないため、直接色指定またはJavaScriptで処理 */
    /* 例: background-color: #0056b3; */
    background-color: var(
        --cf7-primary-color
    ); /* デフォルトのままにしておくか、濃い色を定義 */
    opacity: 0.9; /* シンプルなホバー効果 */
}

.wpcf7-submit:active {
    /* 例: background-color: #004085; */
    background-color: var(--cf7-primary-color);
    opacity: 0.8;
}

/* メッセージ (送信後など) */
.wpcf7-response-output {
    padding: var(--cf7-spacing);
    text-align: center;
    border-radius: var(--cf7-border-radius);
}

/* 送信成功時のメッセージ */
.wpcf7-mail-sent-ok {
    color: var(--cf7-success-color);
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--cf7-success-color);
}

/* エラーメッセージ (入力エラー) */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: calc(var(--cf7-spacing) / 4);
    font-size: 0.85rem;
    color: var(--cf7-error-color);
}

/* バリデーションエラー時の入力フィールド */
.wpcf7-not-valid {
    border-color: var(--cf7-error-color) !important;
}

/* 送信失敗、設定エラーなどのメッセージ */
.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam,
.wpcf7-validation-errors {
    color: var(--cf7-error-color);
    background-color: rgba(220, 53, 69, 0.1);
    border-color: var(--cf7-error-color);
}

/* ローディングスピナー */
.wpcf7 .ajax-loader {
    margin-left: calc(var(--cf7-spacing) / 2);
    vertical-align: middle;
}

/* ==============================================
   CF7 レスポンシブ対応 (メディアクエリ)
   ============================================== */

/* 中画面以上 (タブレット横向き、デスクトップ) */
@media (min-width: var(--cf7-breakpoint-md)) {
    /* ラジオボタンとチェックボックスのレイアウトを横並びにする場合はここを調整 */
    .wpcf7-checkbox,
    .wpcf7-radio {
        flex-direction: row; /* 横並びにする */
        flex-wrap: wrap;
    }
}

/* 広い画面 (デスクトップ) */
@media (min-width: var(--cf7-breakpoint-lg)) {
    .wpcf7 {
        padding: calc(var(--cf7-spacing) * 2.5);
    }
}

/* ==============================================
   CF7 その他の調整
   ============================================== */

.wpcf7 form.wpcf7-form {
    padding: 0;
    margin: 0;
}

/* 複数のラジオボタンやチェックボックスのグループ */
/* デフォルトで Flexbox を使用するようにしたので、ここでの大きな変更は不要ですが、
   必要に応じてより複雑なレイアウトを定義できます。 */
/* .wpcf7-checkbox, .wpcf7-radio {} */

/* reCAPTCHA の表示調整 */
.wpcf7-recaptcha {
    margin-top: var(--cf7-spacing);
    margin-bottom: var(--cf7-spacing);
}

/* スパム対策クイズの調整 */
.wpcf7-quiz {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: var(--cf7-spacing);
}

.wpcf7-quiz input[type='text'] {
    flex-grow: 1;
}

/* プライバシーポリシー同意チェックボックス */
.wpcf7 .privacy-accept {
    display: flex; /* 親要素にも Flexbox を適用 */
    align-items: center;
    justify-content: center;
}

.wpcf7 .privacy-accept .wpcf7-list-item {
    margin: 0; /* 親で設定されたマージンをリセット */
}

/* 送信ボタンとスピナーのラッパー */
.inquiry-submit-btn {
    position: relative;
    display: flex; /* ボタンを中央寄せする場合など */
    justify-content: center;
    margin-top: var(--spacing-lg); /* 必要であれば上部にマージン */
}

.inquiry-submit-btn .wpcf7-spinner {
    position: absolute;
    top: -30px; /* 位置を調整 */
    left: 50%; /* ボタンの中央に配置 */
    transform: translateX(-50%); /* 中央寄せの微調整 */
}

/* ==============================================
   Datepicker Specific Styles
   ============================================== */
#ui-datepicker-div {
    z-index: 10 !important; /* 他の要素より手前に表示 */
}

.ui-datepicker-trigger {
    position: relative; /* hasDatepicker との関係で調整 */
    z-index: 10;
    width: 16px;
    height: 16px;
    margin: -65px 0 0 10px; /* 画像と入力フィールドの配置を調整 */
    cursor: pointer;
}

.hasDatepicker {
    position: relative;
    z-index: 1; /* トリガー画像より奥に配置 */
    padding-left: 2rem;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    font-size: var(--fSize--12);
}

/* Datepicker の特定日のスタイル */
.gcal-saturday .ui-state-default,
.gcal-sunday .ui-state-default,
.gcal-holiday .ui-state-default {
    /* .ui-state-default も含めることで特異性を確保 */
    border: 1px solid #a5a198 !important; /* !important はライブラリを上書きするため */
}

.gcal-saturday .ui-state-default {
    color: var(--datepicker-saturday-color) !important;
    background: var(--datepicker-saturday-bg) !important;
}

.gcal-sunday .ui-state-default {
    color: var(--datepicker-sunday-color) !important;
    background: var(--datepicker-sunday-bg) !important;
}

.gcal-holiday .ui-state-default {
    color: var(--datepicker-holiday-color) !important;
    background: var(--datepicker-holiday-bg) !important;
}