/*
 * WordPress 組み込み用の追加スタイル（styles.css は納品物のまま残し、差分はここに書く）
 * - Contact Form 7 が出力するマークアップを LP のフォームデザインに合わせる
 * - 予約カレンダー（埋め込みコード未着の間のリンク表示）
 */

/* ---------- Contact Form 7 ---------- */
.dl-form .wpcf7-form-control-wrap{display:block}

/* ラジオ: CF7 は <span.wpcf7-list-item><label><input><span></label></span> を出力する。.radio と同じ見た目にする */
.radio-row .wpcf7-form-control-wrap,.radio-row .wpcf7-radio{display:contents}
.radio-row .wpcf7-list-item{display:block;margin:0}
.radio-row .wpcf7-list-item label{display:flex;align-items:center;gap:10px;height:40px;border:1px solid var(--hairline);padding:0 14px;font-size:14px;cursor:pointer;transition:border-color .2s}
.radio-row .wpcf7-list-item input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--gray);border-radius:50%;margin:0;position:relative;flex:none}
.radio-row .wpcf7-list-item input:checked{border-color:var(--ink)}
.radio-row .wpcf7-list-item input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.radio-row .wpcf7-list-item label:has(input:checked){border-color:var(--ink)}

/* セレクト: 未選択（先頭の「選択してください」）はプレースホルダー色 */
.field select:has(option[value=""]:checked){color:var(--gray-l)}
.field select option{color:var(--ink)}

/* エラー・送信結果 */
.dl-form .wpcf7-not-valid-tip{display:block;margin-top:4px;font-size:11.5px;letter-spacing:.06em;color:var(--red)}
.dl-form .wpcf7-not-valid{border-color:var(--red)}
.dl-form .wpcf7 form .wpcf7-response-output{margin:12px 0 0;padding:8px 12px;font-size:12px;line-height:1.7;letter-spacing:.06em}
.dl-form .wpcf7 form.init .wpcf7-response-output,.dl-form .wpcf7 form.submitting .wpcf7-response-output{display:none}
.dl-form .wpcf7-spinner{display:none}
.dl-form form.submitting .dl-submit{opacity:.6;pointer-events:none}

@media (max-width:768px){
  .radio-row .wpcf7-list-item label{height:48px;font-size:16px}
}

/* ---------- 予約カレンダー（TimeRex 埋め込み） ---------- */
/* 高さは TimeRex(iframe-resizer) がインラインで自動調整する。
   ウィジェット内部が min-width:550px のため、SP ではカード幅に収めてウィジェット内で横スクロールさせる */
.consult-grid>*,.consult-side>*{min-width:0}
#timerex_calendar{-webkit-overflow-scrolling:touch}

/* ---------- 予約カレンダー（リンク表示） ---------- */
.calendar-embed.is-link{min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(40px,6vw,72px) 24px;text-align:center}
.calendar-link p{font-size:14px;line-height:2;letter-spacing:var(--ls-body)}
.calendar-link .btn{margin-top:24px;min-width:280px}
.calendar-link-note{margin-top:12px;font-size:11.5px !important;color:var(--gray)}