/** * 無料相談予約フォーム補完スタイル * * 見た目は基本的にテーマ側の custom.css（.izon-form-page 一式、全ページで読み込み済み）に * 委ねている。ここには custom.css でカバーされていない部分（WordPress同梱の * jquery-ui-datepicker の見た目調整、および custom.css の元デザインに無い * 組み合わせの補完）だけを置く。custom.css 自体は他ページにも影響するため編集しない。 * * 注意：jquery-ui-datepicker のカレンダー本体（#ui-datepicker-div）は、 * 呼び出し元の input がどこにあっても常に直下に追加される仕様のため、 * ".izon-form-page " を祖先セレクタに付けると一致しない（適用されない）。 * そのためここでは意図的にグローバルセレクタにしている。 */ .ui-datepicker { background: #fff; border: 1px solid #dfaed3; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); box-sizing: border-box; /* jquery-ui-datepicker のポップアップは直下に追加され、テーマ側のフォント指定（html[lang="ja"] body .site *:not(i) { ... !important }）が .site の外側には効かないため、同じフォントをここで明示的に指定する。 */ font-family: -apple-system, BlinkMacSystemFont, "BIZ UDPGothic", "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif, FontAwesome; padding: 12px; width: 280px; z-index: 20; } .ui-datepicker-header { align-items: center; background: #9a0d7c; border-radius: 6px; color: #fff; display: flex; justify-content: space-between; padding: 8px 12px; } .ui-datepicker-title { font-weight: bold; } .ui-datepicker-prev, .ui-datepicker-next { border-radius: 4px; color: #fff; cursor: pointer; font-size: 13px; padding: 2px 6px; } .ui-datepicker-prev:hover, .ui-datepicker-next:hover { background: rgba(255, 255, 255, 0.2); } .ui-datepicker-prev.ui-state-disabled, .ui-datepicker-next.ui-state-disabled { cursor: default; opacity: 0.4; } .ui-datepicker-calendar { border-collapse: collapse; margin-top: 8px; width: 100%; } .ui-datepicker-calendar th { color: #9a0d7c; font-size: 12px; font-weight: bold; padding: 4px 0; text-align: center; } .ui-datepicker-calendar td { padding: 2px; text-align: center; } .ui-datepicker-calendar a, .ui-datepicker-calendar span { border-radius: 999px; display: block; line-height: 32px; margin: 0 auto; text-decoration: none; width: 32px; } .ui-datepicker-calendar a { color: #333; } .ui-datepicker-calendar a:hover, .ui-datepicker-calendar .ui-datepicker-today a { background: #faf0f8; } .ui-datepicker-calendar span { color: #ccc; } /* 予約可能日／不可能日の見分け。どちらもクリック自体はできる作りなので、「選ぶと弾かれる」不可能日は控えめな色にするだけで、無効化はしない。 */ .ui-datepicker-calendar td.cr-date-available a { background: #faf0f8; color: #9a0d7c; font-weight: bold; } .ui-datepicker-calendar td.cr-date-unavailable a { color: #bbb; } /* 選択中の日付は、予約可能／不可能どちらの色分けよりも優先して強調する。 */ .ui-datepicker-calendar td.cr-date-available a.ui-state-active, .ui-datepicker-calendar td.cr-date-unavailable a.ui-state-active, .ui-datepicker-calendar .ui-state-active { background: #9a0d7c; color: #fff; } /* 個人情報の取扱いについての同意チェック（.info-box--privacy）のエラー表示。 custom.css 側の .error-msg は「.q.is-error の直接の子要素」または「.field-row.is-error の直接の子要素（.is-shown 付き）」の場合だけ表示される作りだが、 .info-box はどちらの構造にも当てはまらない（.info-box > .info-body > .privacy-agree-wrap > .error-msg と2階層下にある）ため、そのままでは custom.css 側のルールに一致せずエラー文が表示されない。custom.css は他ページにも影響するため編集せず、ここで .info-box--privacy 専用の組み合わせを補完する。 */ .izon-form-page .info-box.is-error .privacy-agree-wrap > .error-msg { display: flex; } .izon-form-page .privacy-agree-wrap { display: grid; gap: 8px; } .izon-form-page .privacy-agree { align-items: center; cursor: pointer; display: inline-flex; gap: 8px; } .izon-form-page .privacy-agree input[type="checkbox"] { accent-color: #9a0d7c; cursor: pointer; flex: 0 0 auto; height: 18px; width: 18px; } /* 項番3「相談希望日時」冒頭の医師相談のご案内。 custom.css にはこの表示（.soudan-schedule 一式）に対応するスタイルが無いため、ここで最小限定義する。他の案内ボックス（.info-box）のような背景色付きのカード表示にはせず、他の設問と同じ地の色のまま見出し・注記・案内文だけを並べる。 */ .izon-form-page .soudan-schedule { margin-bottom: 24px; } .izon-form-page .schedule-cap { color: #9a0d7c; font-size: 18px; font-weight: bold; margin: 0 0 8px; } .izon-form-page .jissho-note { color: #666; font-size: 14px; margin: 0 0 12px; } .izon-form-page .mb-3 { margin-bottom: 16px; } .izon-form-page .dr-schedule { display: grid; font-size: 16px; gap: 8px; line-height: 1.8; list-style: none; margin: 0; padding: 0; } .izon-form-page .dr-schedule li { display: flex; flex-wrap: wrap; gap: 4px 8px; } .izon-form-page .dr-day { color: #9a0d7c; flex: 0 0 auto; font-weight: bold; } .izon-form-page .dr-txt { color: #333; flex: 1 1 240px; }