/**
* OHDr. Plan Pricing フロントCSS（仕様書① §5・§8）
* すべて .ohdr-ps / .ohdr-autoselect / .rsv-form-wrap 配下にスコープ。
* !important は使用しない（干渉を実測確認した場合の最終手段のみ）。
*/
/* ---- 配色（カスタムプロパティ） ----
ブランド緑を役割で分ける。文字に使う色は白地・tint地の両方で4.5:1以上、
枠線などUI部品の色は3:1以上を満たす組み合わせにしている。
非選択状態のグレー（#ccc / #666 / #ddd / #c5c5c5 / #f2f2f2）は
ブランド色ではないため変数化せずそのまま残す。 */
.ohdr-ps,
.rsv-form-wrap {
--ohdr-green-strong: #1F6B29; /* 文字・表ヘッダー背景・選択枠・ステップ現在 */
--ohdr-green-mid: #2E9C3F; /* hover枠・フォーカスリング（白地3.5:1） */
--ohdr-brand: #40BC50; /* 装飾専用（料金カード枠等）。文字は載せない */
--ohdr-tint: #E9F7EB; /* 選択ボタン背景・アクティブ行 */
--ohdr-tint-strong: #CBEBD0; /* アクティブセル */
--ohdr-muted: #6B6B6B; /* 注記・プレースホルダ文字 */
--ohdr-error: #C1272D; /* 検証エラー（白地5.8:1 / tint地5.3:1） */
}
/* ---- ステップバー（純装飾） ---- */
.ohdr-ps .ohdr-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0 0 1.5em;
font-size: 14px;
color: #666;
}
.ohdr-ps .ohdr-steps__item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ohdr-ps .ohdr-steps__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #ccc;
color: #fff;
font-size: 12px;
line-height: 1;
}
.ohdr-ps .ohdr-steps__item.is-current {
color: var(--ohdr-green-strong);
font-weight: 700;
}
.ohdr-ps .ohdr-steps__item.is-current .ohdr-steps__num {
background: var(--ohdr-green-strong);
}
.ohdr-ps .ohdr-steps__sep {
flex: 0 1 40px;
height: 1px;
background: #ccc;
min-width: 16px;
}
/* ---- radioのボタン化（use_label_element前提・両対応スタイル） ---- */
.ohdr-ps .wpcf7-radio {
display: grid;
gap: 8px;
}
/* 人數グリッド（§5 v13）: 列数を固定しない自動折り返し。
repeat(9, 1fr) は 1fr = minmax(auto, 1fr) で最小値が min-content になるため、
9個の合計幅がコンテナを超えると右端が見切れる。auto-fit + minmax の下限を
決め打ちすれば、収まらない分は必ず次行へ送られる（行数は問わない要件）。
下限84px: 320px幅で3列、768pxで7〜8列、1440pxで9列がすべて1行に収まる。 */
.ohdr-ps .ohdr-num-grid .wpcf7-radio {
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}
/* 天數は3択固定。minmax(0,1fr) で min-content の下限を外し、
狭い画面でも横に溢れないようにする。 */
.ohdr-ps .ohdr-period-list .wpcf7-radio {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ohdr-ps .wpcf7-radio .wpcf7-list-item {
margin: 0;
}
.ohdr-ps .wpcf7-radio label {
position: relative; /* 視覚的に隠したinputのabsolute基準 */
display: flex;
align-items: center; /* 上下中央 */
justify-content: center; /* 左右中央 */
gap: 4px; /* ラジオ円が見える環境で円と文字を離す */
min-height: 44px; /* タップ領域 */
padding: 8px 4px;
border: 1px solid #c5c5c5;
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 16px; /* iOSズーム防止 */
line-height: 1.2;
text-align: center;
transition: border-color 0.15s, background-color 0.15s;
}
/* ラベル文字を上下中央で揃える（円が見える環境では円と並ぶ） */
.ohdr-ps .wpcf7-radio .wpcf7-list-item-label {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.2;
}
/* 1行固定は人數ボタンのみ。天數（「16〜30日」など長い）は
狭い画面で折り返せるようにして横溢れを避ける。 */
.ohdr-ps .ohdr-num-grid .wpcf7-radio label,
.ohdr-ps .ohdr-num-grid .wpcf7-radio .wpcf7-list-item-label {
white-space: nowrap;
}
.ohdr-ps .wpcf7-radio label:hover {
border-color: var(--ohdr-green-mid);
}
.ohdr-ps .wpcf7-radio input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
/* キーボード操作時のフォーカス可視化。
inputを視覚的に隠しているため、フォーカスリングはラベル側に出す。 */
.ohdr-ps .wpcf7-radio label:has(input:focus-visible) {
outline: 3px solid var(--ohdr-green-mid);
outline-offset: 2px;
}
/* 選択状態: :has()対応ブラウザ */
.ohdr-ps .wpcf7-radio label:has(input:checked) {
border-color: var(--ohdr-green-strong);
background: var(--ohdr-tint);
font-weight: 700;
color: var(--ohdr-green-strong);
}
/* 選択状態: :has()非対応ブラウザ向けフォールバック。
:has()対応時と二重装飾にならないよう @supports で切り分ける。
@supports selector() 自体が非対応の旧ブラウザでは下の色・太字のみが効く。 */
.ohdr-ps .wpcf7-radio input:checked + .wpcf7-list-item-label {
font-weight: 700;
color: var(--ohdr-green-strong);
}
@supports not selector(:has(*)) {
.ohdr-ps .wpcf7-radio .wpcf7-list-item-label {
display: block;
width: 100%;
padding: 2px 0;
border-radius: 4px;
}
.ohdr-ps .wpcf7-radio input:checked + .wpcf7-list-item-label {
background: var(--ohdr-tint);
box-shadow: 0 0 0 2px var(--ohdr-green-strong);
}
/* :focus-visible も使えない世代のため :focus で代替する */
.ohdr-ps .wpcf7-radio input:focus + .wpcf7-list-item-label {
outline: 3px solid var(--ohdr-green-mid);
outline-offset: 2px;
}
}
/* ---- 料金カード ---- */
.ohdr-ps .ohdr-price-card {
margin: 1em 0 0.5em;
padding: 16px;
border: 2px solid var(--ohdr-brand);
border-radius: 8px;
background: var(--ohdr-tint);
text-align: center;
}
.ohdr-ps .ohdr-price-card__placeholder {
margin: 0;
color: var(--ohdr-muted);
}
.ohdr-ps .ohdr-price-card__selected {
margin: 0 0 4px;
font-size: 14px;
}
.ohdr-ps .ohdr-price-card__amount {
margin: 0;
font-size: 28px;
font-weight: 700;
color: var(--ohdr-green-strong);
}
.ohdr-ps .ohdr-price-card__noscript {
margin: 0;
}
.ohdr-ps .ohdr-price-note {
margin: 0 0 1em;
font-size: 12px;
color: var(--ohdr-muted);
text-align: center;
}
/* 方案有效期間（§5 A-1・v14）。來日時間と日數が揃うとJSが hidden を外す。 */
.ohdr-ps .ohdr-plan-period {
margin: 0 0 0.25em;
font-size: 15px;
font-weight: 700;
color: var(--ohdr-green-strong);
text-align: center;
}
.ohdr-ps .ohdr-plan-period[hidden] {
display: none;
}
/* 料金表直下の案内1行（§6-1 追加処置E）。ショートコード出力ではなく
フォームタブ側に置く のため、.ohdr-price 外にスコープする。 */
.ohdr-ps .ohdr-price-note-sub {
margin: 0 0 1.25em;
font-size: 13px;
line-height: 1.6;
color: var(--ohdr-muted);
}
/* ---- 料金一覧表 ---- */
.ohdr-ps .ohdr-price-table-wrap {
overflow-x: auto;
margin-bottom: 1.5em;
}
.ohdr-ps .ohdr-price-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.ohdr-ps .ohdr-price-table th,
.ohdr-ps .ohdr-price-table td {
border: 1px solid #ddd;
padding: 8px 6px;
text-align: center;
white-space: nowrap;
}
.ohdr-ps .ohdr-price-table thead th {
background: var(--ohdr-green-strong);
color: #fff;
}
.ohdr-ps .ohdr-price-table tbody th {
background: #f2f2f2;
font-weight: 400;
}
.ohdr-ps .ohdr-price-table tbody tr.is-active th,
.ohdr-ps .ohdr-price-table tbody tr.is-active td {
background: var(--ohdr-tint);
}
.ohdr-ps .ohdr-price-table tbody td.is-active {
background: var(--ohdr-tint-strong);
font-weight: 700;
color: var(--ohdr-green-strong);
}
/* ---- cf-rsv-type 自動選択の説明（JS有効時のみJSが .is-visible を付与） ---- */
.ohdr-autoselect .ohdr-autoselect-note {
display: none;
margin: 4px 0 0;
font-size: 12px;
color: var(--ohdr-muted);
}
.ohdr-autoselect .ohdr-autoselect-note.is-visible {
display: block;
}
/* ---- 検証エラーの視認性（§5・v7。対象フォーム内にのみスコープ） ---- */
/* CF7既定のtipは小さく淡いため、文字サイズと前後の余白を確保する */
.rsv-form-wrap .wpcf7-not-valid-tip {
display: block;
margin: 6px 0 8px;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
color: var(--ohdr-error);
}
/* エラー欄そのものの強調。border-colorの変更とinsetの左バーで、
幅を変えずに（レイアウトを動かさずに）赤い左端を出す。
:has()非対応ブラウザでもここは効く。 */
.rsv-form-wrap .wpcf7-not-valid {
border-color: var(--ohdr-error);
box-shadow: inset 4px 0 0 var(--ohdr-error);
}
/* エラー欄ラッパーの左ボーダー強調（:has()対応ブラウザ）。
ラッパーはラベル直下の入力ブロック全体を指すため、tipまで含めて赤帯が付く。
display:block は dd / li の内側で完結し、生年月日の横並び（.flex）は
flexアイテムが dd 側のため崩れない。 */
@supports selector(:has(*)) {
.rsv-form-wrap .wpcf7-form-control-wrap:has(.wpcf7-not-valid) {
display: block;
box-sizing: border-box;
border-left: 4px solid var(--ohdr-error);
padding-left: 10px;
}
/* ラッパー側で左帯を出せた場合は、欄内側のバーは重複するので消す */
.rsv-form-wrap .wpcf7-form-control-wrap:has(.wpcf7-not-valid) .wpcf7-not-valid {
box-shadow: none;
}
}
/* ---- 同意ボタン（.cf-agreement 内の acceptance）の中央寄せ ----
このボタンだけテーマ側で別デザインになっている。
・緑のボタン本体は `.select-rsv-type .wpcf7-list-item-label`
（フォームの