/* NPP 料金表示。プラグインが出す要素の見た目は、すべてサイト設定の CSS 変数（--npp-*）で変えられる。
   var(--npp-名前, 初期値) の初期値が、変数を入れていないときの見た目。使える変数の一覧は「サイト設定」の画面に出る（このファイルから作る） */
:root {
	--npp-text: #1f2933;
	--npp-muted: #8a94a0;
	--npp-line: #ffffff;
	--npp-cell: #f1f3f6;
	--npp-cell-out: #f8f9fb;
	--npp-head: #1f2933;
	--npp-sun: #b3261e;
	--npp-sat: #1f5fa8;
	--npp-tier-early45: #1f4e8c;
	--npp-tier-early21: #dbe7f5;
	--npp-tier-late: #fbe1c8;
	--npp-primary: #1f4e8c;
	--npp-late-text: #b45309;
	--npp-notes-bg: #f1f5f2;
	--npp-notes-line: #2f6b46;
	--npp-radius: 2px;
}

.npp-variant[hidden], .npp-switch[hidden] { display: none !important; }

/* 料金表 */
.npp-price-table { border-collapse: collapse; width: 100%; color: var(--npp-text); }
.npp-price-table th, .npp-price-table td { border: var(--npp-table-border, 1px solid var(--npp-cell)); padding: var(--npp-table-pad, .4em .6em); text-align: var(--npp-table-align, center); }
.npp-price-table thead th { font-weight: var(--npp-thead-weight, normal); color: var(--npp-thead-color, var(--npp-muted)); font-size: var(--npp-thead-size, .85em); }
.npp-price-table tbody th { background: var(--npp-head); color: var(--npp-head-text, #fff); }
.npp-price-table td { font-size: var(--npp-table-price-size, 1.3em); font-weight: var(--npp-table-price-weight, bold); }
.npp-price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.npp-price-table-wrap .npp-price-table:not(.npp-price-table--vertical) th, .npp-price-table-wrap .npp-price-table:not(.npp-price-table--vertical) td { white-space: nowrap; }
.npp-price-table--vertical tbody td:first-child { background: var(--npp-head); color: var(--npp-head-text, #fff); font-size: var(--npp-table-day-size, 1em); font-weight: var(--npp-table-day-weight, normal); }
.npp-price-table-plain { width: 100%; }
.npp-price-table__note { margin: var(--npp-table-note-margin, .4em 0 0); font-size: var(--npp-table-note-size, .85em); color: var(--npp-table-note, var(--npp-muted)); }

/* 繁忙期の一覧 */
.npp-peak-list { list-style: none; margin: var(--npp-peak-margin, 0); padding: 0; }
.npp-peak-list__item { display: flex; flex-wrap: wrap; gap: var(--npp-peak-gap, .3em 1em); padding: var(--npp-peak-pad, .4em 0); border-bottom: var(--npp-peak-border, 1px solid var(--npp-cell)); }
.npp-peak-list__label { font-weight: var(--npp-peak-label-weight, bold); min-width: var(--npp-peak-label-width, 6em); }

/* 繁忙期カレンダー */
/* カレンダーだけの見た目は --npp-cal-*（料金表には効かない）。無ければ共通の --npp-* を使う。
   サイト設定の「カレンダーのデザイン」（初期値・A〜D の案）は、この変数の値の組み合わせ */
.npp-cal { color: var(--npp-cal-text, var(--npp-text)); container-type: inline-size; display: flex; flex-direction: column; background: var(--npp-cal-bg, transparent); padding: var(--npp-cal-pad, 0); border: var(--npp-cal-border, 0); border-radius: var(--npp-cal-radius, 0); box-shadow: var(--npp-cal-shadow, none); }
.npp-cal > * { order: 50; }
.npp-cal__title { order: var(--npp-cal-order-title, 10); font-weight: var(--npp-cal-title-weight, bold); font-size: var(--npp-cal-title-size, 1.3em); margin: var(--npp-cal-title-margin, 0 0 .4em); color: var(--npp-cal-title, inherit); background: var(--npp-cal-title-bg, transparent); padding: var(--npp-cal-title-pad, 0); border-radius: var(--npp-cal-title-radius, 0); text-align: var(--npp-cal-title-align, left); letter-spacing: var(--npp-cal-title-spacing, normal); text-shadow: var(--npp-cal-title-shadow, none); }
.npp-cal__lead { order: var(--npp-cal-order-lead, 15); margin: var(--npp-cal-lead-margin, 0 0 .6em); font-size: var(--npp-cal-lead-size, .95em); color: var(--npp-cal-lead, inherit); text-align: var(--npp-cal-lead-align, var(--npp-cal-title-align, left)); }
.npp-cal__legend { order: var(--npp-cal-order-legend, 20); display: flex; flex-wrap: wrap; gap: var(--npp-cal-legend-gap, 4px); margin-bottom: var(--npp-cal-legend-margin, 8px); }
.npp-cal__legend-item { flex: 1 1 12em; padding: var(--npp-cal-legend-pad, .4em .6em); font-size: var(--npp-cal-legend-size, .85em); border-radius: var(--npp-cal-legend-radius, 0); box-shadow: var(--npp-cal-legend-shadow, none); }
.npp-cal__legend-item b { font-size: var(--npp-cal-legend-label-size, 1.3em); margin-right: .3em; }
/* 凡例の文は、まとめて次の行へ送る（1文字だけ次の行に落ちないように） */
.npp-cal__legend-text { display: inline-block; text-wrap: balance; }
/* テーマの表の指定（table { border-collapse: collapse }・.entry-content table { border: … } など）に負けないように、.npp-cal を前に付ける */
.npp-cal .npp-cal__grid { order: var(--npp-cal-order-grid, 30); width: 100%; border: 0; background: var(--npp-cal-grid-bg, none); border-collapse: separate; border-spacing: var(--npp-cal-gap, 3px); table-layout: fixed; margin: 0; }
/* テーマの表の指定（.entry-content td など）に負けないように、.npp-cal を前に付ける。
   マスどうしの角は丸めない（丸めると、すき間の交わる所に背景が星形に見える）。丸めるのはカレンダーの外側の4つの角だけ（--npp-cal-grid-radius） */
.npp-cal .npp-cal__dow { border: 0; font-weight: var(--npp-cal-head-weight, bold); padding: var(--npp-cal-head-pad, .2em 0); text-align: center; }
/* 色は、サイトの本文やテーマの「.○○ th.npp-cal__dow」の指定（goto の固定ページ 13 など）より強くする */
.npp-cal .npp-cal__grid th.npp-cal__dow { background: var(--npp-cal-head, var(--npp-head)); color: var(--npp-cal-head-text, #fff); }
.npp-cal .npp-cal__grid th.npp-cal__dow--0 { background: var(--npp-cal-head-sun, var(--npp-sun)); color: var(--npp-cal-head-sun-text, #fff); }
.npp-cal .npp-cal__grid th.npp-cal__dow--6 { background: var(--npp-cal-head-sat, var(--npp-sat)); color: var(--npp-cal-head-sat-text, #fff); }
.npp-cal .npp-cal__cell { border: var(--npp-cal-cell-border, 0); background: var(--npp-cal-cell, var(--npp-cell)); color: var(--npp-cal-cell-text, inherit); vertical-align: top; padding: var(--npp-cal-cell-pad, .2em clamp(1px, .5cqi, 4px) .4em); height: var(--npp-cal-cell-height, 4.2em); box-shadow: var(--npp-cal-cell-shadow, none); }
/* 期間の外の日：押せないボタンのように、白っぽく薄く */
.npp-cal .npp-cal__cell--out { background: var(--npp-cal-cell-out, var(--npp-cell-out)); color: var(--npp-cal-muted, var(--npp-muted)); border: var(--npp-cal-cell-out-border, var(--npp-cal-cell-border, 0)); box-shadow: var(--npp-cal-cell-out-shadow, none); }
.npp-cal .npp-cal__dow:first-child { border-top-left-radius: var(--npp-cal-grid-radius, 0); }
.npp-cal .npp-cal__dow:last-child { border-top-right-radius: var(--npp-cal-grid-radius, 0); }
.npp-cal tbody tr:last-child .npp-cal__cell:first-child { border-bottom-left-radius: var(--npp-cal-grid-radius, 0); }
.npp-cal tbody tr:last-child .npp-cal__cell:last-child { border-bottom-right-radius: var(--npp-cal-grid-radius, 0); }
/* 日付と「元日」「祝」は同じ行に並べ、料金はその下。祝日のマスだけ料金が1段下がらないように */
.npp-cal__date { display: inline-block; font-weight: var(--npp-cal-date-weight, bold); font-size: var(--npp-cal-date-size, clamp(10px, 2.4cqi, 16px)); }
.npp-cal__cell--dow0 .npp-cal__date, .npp-cal__cell--holiday .npp-cal__date { color: var(--npp-cal-date-sun, var(--npp-sun)); }
.npp-cal__cell--dow6 .npp-cal__date { color: var(--npp-cal-date-sat, var(--npp-sat)); }
.npp-cal .npp-cal__cell--out .npp-cal__date { color: var(--npp-cal-muted, var(--npp-muted)); }
.npp-cal__holiday { display: inline-block; font-size: var(--npp-cal-holiday-size, clamp(8px, 1.8cqi, 12px)); font-weight: var(--npp-cal-holiday-weight, bold); color: var(--npp-cal-holiday, var(--npp-cal-date-sun, var(--npp-sun))); margin-left: .25em; white-space: nowrap; }
.npp-cal__fee { display: block; text-align: center; font-weight: var(--npp-cal-fee-weight, bold); font-size: var(--npp-cal-fee-size, clamp(9px, 3.1cqi, 22px)); line-height: var(--npp-cal-fee-line-height, 1.35); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: var(--npp-cal-fee-spacing, -.02em); border-radius: var(--npp-cal-fee-radius, 0); }
.npp-cal__caption { order: var(--npp-cal-order-caption, 40); font-size: var(--npp-cal-caption-size, .85em); color: var(--npp-cal-caption, #4b5563); margin: var(--npp-cal-caption-margin, .4em 0 1em); text-wrap: pretty; }

.npp-cal__tier--early45 { background: var(--npp-tier-early45); color: var(--npp-tier-early45-text, #fff); }
.npp-cal__tier--early21 { background: var(--npp-tier-early21); color: var(--npp-tier-early21-text, var(--npp-tier-text, var(--npp-text))); }
.npp-cal__tier--late { background: var(--npp-tier-late); color: var(--npp-tier-late-text, var(--npp-tier-text, var(--npp-text))); }
.npp-cal__legend-item.npp-cal__tier--early21 b { color: var(--npp-tier-early21-label, var(--npp-tier-early45)); }
.npp-cal__legend-item.npp-cal__tier--late b { color: var(--npp-late-text); }

.npp-cal__example { order: var(--npp-cal-order-example, 50); border: var(--npp-cal-example-border-width, 3px) solid var(--npp-cal-example-line, var(--npp-cal-head, var(--npp-head))); background: var(--npp-cal-example-bg, transparent); color: var(--npp-cal-example-text, var(--npp-tier-text, var(--npp-text))); margin: var(--npp-cal-example-margin, 1em 0); border-radius: var(--npp-cal-example-radius, 0); overflow: hidden; box-shadow: var(--npp-cal-example-shadow, none); }
.npp-cal__example-title { background: var(--npp-cal-example-line, var(--npp-cal-head, var(--npp-head))); color: var(--npp-cal-example-title-text, var(--npp-cal-head-text, #fff)); font-weight: var(--npp-cal-example-title-weight, bold); padding: var(--npp-cal-example-title-pad, .3em .8em); text-wrap: balance; }
.npp-cal__example-items { display: flex; flex-wrap: wrap; }
.npp-cal__example-item { flex: 1 1 10em; text-align: center; padding: var(--npp-cal-example-item-pad, .4em .5em); }
.npp-cal__example-label { display: block; font-size: var(--npp-cal-example-label-size, .85em); font-weight: var(--npp-cal-example-label-weight, bold); }
.npp-cal__example-total { font-size: var(--npp-cal-example-total-size, 1.9em); font-variant-numeric: tabular-nums; }
.npp-cal__example-total small { font-size: var(--npp-cal-example-unit-size, .5em); }

.npp-cal__notes { order: var(--npp-cal-order-notes, 60); margin: var(--npp-cal-notes-margin, 1em 0 0); padding: var(--npp-cal-notes-pad, .8em 1em .8em 2em); background: var(--npp-notes-bg); color: var(--npp-notes-text, var(--npp-tier-text, var(--npp-text))); border-left: var(--npp-notes-line-width, 4px) solid var(--npp-notes-line); border-radius: var(--npp-cal-notes-radius, 0); }
.npp-cal__notes li { margin: var(--npp-notes-item-margin, .2em 0); }

@media (max-width: 600px) {
	.npp-cal { padding: var(--npp-cal-pad-sp, var(--npp-cal-pad, 0)); border-radius: var(--npp-cal-radius-sp, var(--npp-cal-radius, 0)); }
	.npp-cal__title { font-size: var(--npp-cal-title-size-sp, var(--npp-cal-title-size, 1.3em)); }
	.npp-cal .npp-cal__grid { border-spacing: var(--npp-cal-gap-sp, 1px); }
	.npp-cal .npp-cal__cell { height: var(--npp-cal-cell-height-sp, 3.4em); }
	.npp-price-table td { font-size: var(--npp-table-price-size-sp, 1em); }
}

/* カレンダーがとても狭いとき（マス1つが約45px未満）は、「元日」「祝」を出さない（日付の色で分かる。入りきらずに料金が下がらないように） */
@container (max-width: 340px) {
	.npp-cal__holiday { display: none; }
}

/* シミュレーター */
.npp-sim { border: var(--npp-sim-border, 1px solid var(--npp-cell)); padding: var(--npp-sim-pad, 1em); }
.npp-sim__row { display: flex; flex-wrap: wrap; gap: var(--npp-sim-gap, .5em 1em); margin-bottom: var(--npp-sim-row-margin, .6em); align-items: center; }
.npp-sim__row label { display: inline-flex; gap: .4em; align-items: center; }
.npp-sim__result { margin-top: var(--npp-sim-result-margin, .8em); }
.npp-sim__lines { width: 100%; border-collapse: collapse; }
.npp-sim__lines td { padding: var(--npp-sim-line-pad, .25em .4em); border-bottom: var(--npp-sim-line-border, 1px solid var(--npp-cell)); }
.npp-sim__lines td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.npp-sim__total { font-size: var(--npp-sim-total-size, 1.6em); font-weight: var(--npp-sim-total-weight, bold); text-align: right; color: var(--npp-sim-total, var(--npp-primary)); }

/* 表示確認モードの帯（管理者だけに出る） */
.npp-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999999; padding: .6em 1em; background: var(--npp-bar-bg, #b3261e); color: var(--npp-bar-text, #fff); font-size: 14px; line-height: 1.5; text-align: center; box-shadow: 0 -2px 6px rgba(0, 0, 0, .25); }
.npp-preview-bar a { color: var(--npp-bar-text, #fff); text-decoration: underline; margin-left: .5em; }