/* ============================================================
    contact（お問い合わせ）
    ※ 添付 Group_97 / Group_98.png（横幅1920px書き出し）を
      Python/PIL でピクセル単位に実測した値を採用。
      カード幅は実測1441px ＝ l-inner(min(90%,1440px)) とほぼ一致するため、
      カンプ座標をそのまま px 値として使用している。
    ※「※仮値」と明記した箇所のみ推定値。それ以外は実測値。
   ============================================================ */
.contact {
    background: #E2C5B6;   /* カンプ実測（faq セクションと同値） */
    padding-top: 100px;    /* ※仮値：カンプが天地トリミングのため、他セクションに統一 */
    padding-bottom: 100px; /* ※仮値：同上 */
}

/* ------------------------------------------------------------
    タブ（無料体験予約 / その他のお問い合わせ）
    実測：1個 684×82px、タブ間 gap 75px、下マージン 58px
   ------------------------------------------------------------ */
.c-contact__tabs {
    display: flex;
    gap: 75px;           /* カンプ実測 */
    margin-bottom: 58px; /* カンプ実測：タブ下端 → カード上端 */
}
.c-contact__tab {
    appearance: none;
    flex: 1;
    height: 82px;                    /* カンプ実測 */
    border: 3px solid #8C4521;       /* カンプ実測 */
    border-radius: 20px 20px 0 20px; /* カンプ実測（右下のみ角なし） */
    background: transparent;
    color: #8C4521;
    font-size: 30px;      /* 実測グリフ高26px から算出 */
    letter-spacing: 3px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.c-contact__tab.is-active {
    background: #8C4521;   /* カンプ実測 */
    border-color: #fff;    /* カンプ実測：アクティブ時のみ白枠 */
    color: #fff;
}
#js-contact-tab-general {
    font-size: clamp(20px, 3vw, 30px);
}
/* パネル */
.c-contact__panel {
    display: none;
}
.c-contact__panel.is-active {
    display: block;
}

/* ------------------------------------------------------------
    カード（フォーム全体を包むボックス）
    実測：bg #F6EDE8 / 角丸 50px（右下のみ0） / padding 70px 64px 80px
   ------------------------------------------------------------ */
.c-contact__card {
    background: #F6EDE8;                 /* カンプ実測 */
    border-radius: 50px 50px 0 50px;     /* カンプ実測（右下のみ角なし） */
    padding: 70px 64px 80px;             /* カンプ実測 */
}
.c-contact__lead {
    text-align: center;
    font-size: clamp(16px, 2.4vw, 28px);    /* 実測グリフ高24px から算出 */
    color: #8C4521;
    line-height: 1.6;
    letter-spacing: 3px;
    margin-bottom: 61px;  /* カンプ実測：リード下端 → 1つ目の入力欄上端 */
}

/* ------------------------------------------------------------
    STEP（1:入力 / 2:確認）
    ・display の切り替えのみで制御。入力要素は常に STEP1 に置いたままなので
      CF7 は非表示中でも値をそのまま受け取れる
   ------------------------------------------------------------ */
.c-contact__step {
    display: none;
}
.c-contact__step.is-active {
    display: block;
}

/* ------------------------------------------------------------
    フィールド行：ラベル（左・固定幅）+ 入力欄（右・可変）

    実測：カード左端 x240 / ラベル左端 x304（padding-left 64px）
          入力欄左端 x478 → ラベル列は一律 174px
    ・全行で入力欄の左端を x478 に揃えるため、ラベル列は固定幅 174px、
      gap は 0 とする（最長ラベル「お問い合わせ種別」の実測159pxが収まる）
    ・ラベルは折り返し禁止。折り返すと行の高さが変わり、
      入力欄の縦位置が行ごとにズレるため
    ・padding-top 13px + line-height 27px で、高さ54pxの入力欄に対して
      視覚的中央に揃う（textarea 行でも同じ値でカンプと一致）
   ------------------------------------------------------------ */
.c-contact__row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 23px; /* カンプ実測：フィールド間の間隔 */
}
.c-contact__row > p {
    flex: 1.5;
    min-width: 170px;
}
.c-contact__row > div {
    flex: 8.5;
}
.c-contact__label {
    width: 174px;      /* カンプ実測：ラベル左端x304 → 入力欄左端x478 */
    flex: 0 0 174px;   /* 縮まないよう明示（flex アイテムのデフォルト縮小を無効化） */
    padding-top: 13px; /* カンプ実測から算出（入力欄との視覚的センター揃え） */
    font-size: 18px;   /* 実測グリフ高15px から算出 */
    line-height: 27px;
    letter-spacing: 2px; /* 実測：「お問い合わせ種別」8字159px から算出 */
    white-space: nowrap; /* 折り返し禁止（行高が変わるとレイアウトが崩れるため） */
    color: #8C4521;      /* カンプ実測 */
}

/* 入力欄カラム（1行に複数の入力欄が縦積みになるケースに対応） */
.c-contact__inputs {
    flex: 1 1 auto;
    min-width: 0; /* flex アイテムのはみ出し防止 */
    display: flex;
    flex-direction: column;
    gap: 23px; /* カンプ実測：縦積み時の間隔（希望日時の第1/第2希望） */
}

/* ------------------------------------------------------------
    入力欄本体
    実測：高さ54px / border 1px #A85A33 / 完全な角丸（pill）

    ・CF7 は各コントロールを <span class="wpcf7-form-control-wrap"> で包むが、
      これが inline のままだと width:100% のコントロールとの組み合わせで
      行ごとに余白のズレが生じるため、明示的に block 化する
   ------------------------------------------------------------ */
.c-contact__field {
    position: relative;
    display: block;
    width: 100%;
}
.c-contact__field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.c-contact__field .wpcf7-form-control {
    display: block;
    width: 100%;
    height: 54px;              /* カンプ実測 */
    padding: 0 24px;
    border: 1px solid #A85A33; /* カンプ実測 */
    border-radius: 20px;       /* カンプ実測（高さの半分＝pill形状） */
    background: transparent;
    color: #8C4521;
    font-size: 18px;
    letter-spacing: 1px;
    outline: none;
}
.c-contact__field .wpcf7-form-control::placeholder {
    color: #AAAAAA; /* カンプ実測 */
    opacity: 1;     /* Firefox のデフォルト減光を打ち消す */
}
.c-contact__field .wpcf7-form-control:focus {
    border-color: #8C4521;
}

/* セレクトボックス */
.c-contact__field--select select.wpcf7-form-control {
    appearance: none;
    padding-right: 60px;
    cursor: pointer;
}
/* 未選択（first_as_label の空値）のときはプレースホルダー色にする */
.c-contact__field--select select.wpcf7-form-control:has(option[value=""]:checked) {
    color: #AAAAAA;
}
/* ▼アイコン：実測 18×15px の塗り三角形。Phosphorではなく
   CSS三角形で描画し、カンプの寸法に正確に合わせている */
.c-contact__caret {
    position: absolute;
    right: 24px; /* カンプ実測：入力欄右端からの距離 */
    top: 27px;   /* 入力欄高さ54pxの中央（絶対配置の基準は .c-contact__field） */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 15px solid #A85A33; /* カンプ実測 */
    pointer-events: none;
}

/* テキストエリア */
.c-contact__field--textarea .wpcf7-form-control {
    height: 181px;       /* カンプ実測 */
    padding: 16px 24px;
    border-radius: 20px; /* カンプ実測 */
    line-height: 1.8;
    resize: none;
}

/* ------------------------------------------------------------
    希望日時（第1希望 / 第2希望）：日付欄 ＋ 時間欄の横並び
    ※新UIのカンプが未支給のため、以下の数値はすべて仮値・要確認。
      入力欄本体は .c-contact__field .wpcf7-form-control の既存スタイル
      （高さ54px / border 1px #A85A33 / radius 20px）をそのまま継承する。
   ------------------------------------------------------------ */
.c-contact__datetime {
    /* display: flex; */
    /* align-items: center; */
}
.c-contact__datetime-label {
    flex: 0 0 auto;
    font-size: 16px;     /* ※仮値 */
    line-height: 27px;
    letter-spacing: 2px;
    white-space: nowrap; /* 折り返すと行高が変わり入力欄がズレるため */
    color: #8C4521;      /* 既存ラベルと同値 */
}
/* .c-contact__field の width:100% を打ち消し、日付・時間で幅を分け合う。
   日付は「2026/08/25」と表示文字数が多いためやや広めに配分する ※仮値 */
.c-contact__field--date {
    flex: 1.3 1 0;
    width: auto;
}
.c-contact__field--time {
    flex: 1 1 0;
    width: auto;
}
/* 日付欄（input[type="date"]）
   WebKit（iOS Safari / Chrome）は日付の値を ::-webkit-date-and-time-value という
   内部要素で描画する。これが入力欄とは別の行ボックスを持つため、
   height を固定すると値が上端に寄り、下側に余白が生まれてしまう
   （他の入力欄と縦位置が揃わない原因）。
   入力欄の内寸（高さ54px − 上下border各1px = 52px）を line-height に指定して
   縦中央に揃える。 */
.c-contact__field--date .wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    line-height: 52px;
    text-align: left;
    cursor: pointer;
}
.c-contact__field--date .wpcf7-form-control::-webkit-date-and-time-value {
    margin: 0;
    line-height: 52px;
    text-align: left;
}
.c-contact__field--date .wpcf7-form-control::-webkit-datetime-edit {
    padding: 0;
}
/* カレンダーアイコン（Chromium系のみ有効。他ブラウザでは無視される） */
.c-contact__field--date .wpcf7-form-control::-webkit-calendar-picker-indicator {
    opacity: .6;
    cursor: pointer;
}
/* 時間欄は contact.js が <select> に置き換え、同時に
   .c-contact__field--select クラスと ▼アイコンを付与するため、
   セレクトボックス用の既存スタイルがそのまま適用される。
   ここでは幅の配分のみ指定している（上記 .c-contact__field--time 参照）。 */
/* 過去日選択時のエラー表示（contact.js の initDateRangeValidation が付与）。
   エラー色は既存デザインに定義が無いため仮値：要確認 */
.c-contact__field--date .wpcf7-form-control.is-invalid {
    border-color: #C0392B; /* ※仮値：エラー用の色指定が無いため暫定値 */
}
/* ------------------------------------------------------------
    プライバシーポリシー同意
    実測：チェックボックス 20px角 / border 1px #AAAAAA / 文字との間隔14px
    ・native checkbox を appearance:none で直接装飾している
      （display:none にすると required 付与時にフォーカス不能となり
        ブラウザが送信をブロックするため）
   ------------------------------------------------------------ */
.c-contact__privacy {
    text-align: center;
    margin-top: 53px;    /* カンプ実測：textarea下端 → チェック行 */
    margin-bottom: 56px; /* カンプ実測：チェック行 → ボタン上端 */
}
.c-contact__privacy .wpcf7-form-control-wrap,
.c-contact__privacy .wpcf7-acceptance {
    display: inline-block;
}
.c-contact__privacy .wpcf7-list-item {
    display: inline-block;
    margin: 0;
}
.c-contact__privacy .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 14px; /* カンプ実測 */
    cursor: pointer;
}
.c-contact__privacy input[type="checkbox"] {
    appearance: none;
    flex-shrink: 0;
    width: 20px;  /* カンプ実測 */
    height: 20px; /* カンプ実測 */
    margin: 0;
    border: 1px solid #AAAAAA; /* カンプ実測 */
    background: transparent;
    cursor: pointer;
    position: relative;
}
.c-contact__privacy input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 11px;
    border-right: 2px solid #8C4521;
    border-bottom: 2px solid #8C4521;
    transform: rotate(45deg);
}
.c-contact__privacy .wpcf7-list-item-label {
    font-size: 20px; /* 実測グリフ高18px から算出 */
    letter-spacing: 3px;
    color: #8C4521;  /* カンプ実測 */
}
/* プライバシーポリシーへのリンク：common.cssのグローバルリセット
   （a{color:inherit; text-decoration:none;}）でリンクと分からなくなるため、
   下線のみ最低限付与する ※スタイルはカンプ未記載のため仮値・要確認 */
.c-contact__privacy a {
    text-decoration: underline;
    transition: opacity 0.3s;
}
.c-contact__privacy a:hover {
    opacity: 0.7;
}
/* ------------------------------------------------------------
    ボタン
    実測：477×86px / border 3px #FFE091 / bg #8C4521 / 角丸 10px（右下0）
   ------------------------------------------------------------ */
.c-contact__btn {
    appearance: none;
    cursor: pointer;
    width: 477px;                    /* カンプ実測 */
    max-width: 100%;
    height: 86px;                    /* カンプ実測 */
    border-radius: 10px 10px 0 10px; /* カンプ実測（右下のみ角なし） */
    font-size: 30px;                 /* 実測グリフ高26px から算出 */
    letter-spacing: 3px;
    line-height: 1;
    text-align: center;
    transition: opacity 0.3s;
}
.c-contact__btn--confirm {
    display: block;
    margin: 0 auto;
}
.c-contact__btn--confirm,
.c-contact__btn--submit {
    border: 3px solid #FFE091; /* カンプ実測 */
    background: #8C4521;       /* カンプ実測 */
    color: #fff;
}
.c-contact__btn--back {
    border: 3px solid #8C4521;
    background: transparent;
    color: #8C4521;
    margin-top: 30px;
}
.c-contact__btn:hover {
    opacity: 0.8;
}
.c-contact__btn.is-submitting,
.c-contact__btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
/* 確認画面：戻る / 送信する の横並び */
.c-contact__actions {
    display: flex;
    justify-content: center;
    gap: 40px; /* ※仮値：確認画面のカンプは未支給 */
}
.c-contact__actions .c-contact__btn {
    width: 320px; /* ※仮値：2つ並ぶため入力画面より狭くしている */
}

/* ------------------------------------------------------------
    確認画面（STEP2）の入力内容サマリー
   ------------------------------------------------------------ */
.c-contact__summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    row-gap: 23px;
    margin-bottom: 56px;
}
.c-contact__summary-label,
.c-contact__summary-value {
    font-size: 18px;
    line-height: 1.6;
    color: #8C4521;
}
.c-contact__summary-label {
    letter-spacing: 2px;
}
.c-contact__summary-value {
    letter-spacing: 1px;
    font-weight: bold;
    word-break: break-all;
}

/* ------------------------------------------------------------
    CF7 標準要素の見た目調整
   ------------------------------------------------------------ */
.wpcf7-not-valid-tip {
    color: #8C4521;
    font-size: 13px;
    letter-spacing: 1px;
    margin-top: 6px;
    padding-left: 24px;
}
.wpcf7-response-output {
    margin: 30px 0 0;
    padding: 12px 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    color: #8C4521;
}
.wpcf7-spinner {
    display: block;
    margin: 16px auto 0;
}

@media screen and (max-width: 768px) {
    /* ============================================================
        contact（SP）
        ※SPカンプ未支給のため、以下はすべて仮値。
          横スクロール・はみ出しの防止を最優先に調整している
       ============================================================ */
    .contact {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .c-contact__tabs {
        gap: 12px;
        margin-bottom: 30px;
    }
    .c-contact__tab {
        height: 48px;
        border-width: 2px;
        border-radius: 12px 12px 0 12px;
        font-size: 13px !important;
        letter-spacing: 1px;
    }
    .c-contact__card {
        border-radius: 20px 20px 0 20px;
        padding: 35px 20px 40px;
    }
    .c-contact__lead {
        font-size: 15px;
        letter-spacing: 1px;
        margin-bottom: 30px;
    }
    .c-contact__row {
        flex-direction: column;
        margin-bottom: 20px;
    }
    .c-contact__label {
        width: auto;
        flex: 0 0 auto;
        padding-top: 0;
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 1px;
    }
    .c-contact__inputs {
        width: 100%;
        gap: 12px;
    }
    .c-contact__field .wpcf7-form-control {
        height: 46px;
        padding: 0 16px;
        border-radius: 23px;
        font-size: 14px;
    }
    .c-contact__field--select select.wpcf7-form-control {
        padding-right: 36px;
    }
    .c-contact__caret {
        right: 14px;
        top: 23px;
        border-left-width: 6px;
        border-right-width: 6px;
        border-top-width: 10px;
    }
    .c-contact__field--textarea .wpcf7-form-control {
        height: 140px;
        padding: 12px 16px;
    }
    /* 希望日時（SP）
       ※SPカンプ未支給のため仮値。日付＋時間の横並びは幅が厳しいため、
         ラベルを上段に逃がして2段組にする */
    .c-contact__datetime {
        flex-wrap: wrap;
        gap: 8px;
    }
    .c-contact__datetime-label {
        flex: 0 0 100%;
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 1px;
    }
    .c-contact__field--date .wpcf7-form-control,
    .c-contact__field--time .wpcf7-form-control {
        padding: 0 12px;
    }
    /* SPは入力欄の高さが46pxのため、内寸 46 − 上下border各1px = 44px に合わせる */
    .c-contact__field--date .wpcf7-form-control,
    .c-contact__field--date .wpcf7-form-control::-webkit-date-and-time-value {
        line-height: 44px;
    }
    /* ▼アイコン用の右パディングは確保しつつ、SPの狭い幅でも文字が
       欠けないよう .c-contact__field--select の60px指定を上書きする */
    .c-contact__field--time select.wpcf7-form-control {
        padding-right: 30px;
    }
    .c-contact__privacy {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .c-contact__privacy .wpcf7-list-item label {
        gap: 10px;
    }
    .c-contact__privacy input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    .c-contact__privacy input[type="checkbox"]:checked::after {
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
    }
    .c-contact__privacy .wpcf7-list-item-label {
        font-size: 13px;
        letter-spacing: 1px;
    }
    .c-contact__btn {
        width: 100%;
        height: 56px;
        border-width: 2px;
        border-radius: 8px 8px 0 8px;
        font-size: 16px;
    }
    .c-contact__actions {
        flex-direction: column;
        gap: 12px;
    }
    .c-contact__actions .c-contact__btn {
        width: 100%;
    }
    .c-contact__summary {
        grid-template-columns: 1fr;
        row-gap: 2px;
        margin-bottom: 30px;
    }
    .c-contact__summary-label {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .c-contact__summary-value {
        font-size: 14px;
        margin-bottom: 14px;
    }
    .wpcf7-not-valid-tip {
        padding-left: 16px;
        font-size: 12px;
    }
}