/* NPP 料金表示。色はサイト設定の CSS 変数（--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-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: 1px solid var(--npp-cell); padding: .4em .6em; text-align: center; }
.npp-price-table thead th { font-weight: normal; color: var(--npp-muted); font-size: .85em; }
.npp-price-table tbody th { background: var(--npp-head); color: #fff; }
.npp-price-table td { font-size: 1.3em; font-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: #fff; font-size: 1em; font-weight: normal; }
.npp-price-table-plain { width: 100%; }
.npp-price-table__note { margin: .4em 0 0; font-size: .85em; color: var(--npp-muted); }

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

/* 繁忙期カレンダー */
.npp-cal { color: var(--npp-text); container-type: inline-size; }
.npp-cal__title { font-weight: bold; font-size: 1.3em; margin-bottom: .4em; }
.npp-cal__legend { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.npp-cal__legend-item { flex: 1 1 12em; padding: .4em .6em; font-size: .85em; }
.npp-cal__legend-item b { font-size: 1.3em; margin-right: .3em; }
.npp-cal__grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.npp-cal__dow { background: var(--npp-head); color: #fff; font-weight: bold; padding: .2em 0; text-align: center; }
.npp-cal__dow--0 { background: var(--npp-sun); }
.npp-cal__dow--6 { background: var(--npp-sat); }
.npp-cal__cell { background: var(--npp-cell); vertical-align: top; padding: .2em clamp(1px, .5cqi, 4px) .4em; height: 4.2em; }
.npp-cal__cell--out { background: var(--npp-cell-out); color: var(--npp-muted); }
.npp-cal__date { display: block; font-weight: bold; font-size: clamp(10px, 2.4cqi, 16px); }
.npp-cal__cell--dow0 .npp-cal__date, .npp-cal__cell--holiday .npp-cal__date { color: var(--npp-sun); }
.npp-cal__cell--dow6 .npp-cal__date { color: var(--npp-sat); }
.npp-cal__cell--out .npp-cal__date { color: var(--npp-muted); }
.npp-cal__holiday { font-size: .7em; color: var(--npp-sun); margin-left: .2em; }
.npp-cal__fee { display: block; text-align: center; font-weight: bold; font-size: clamp(9px, 3.1cqi, 22px); line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em; }
.npp-cal__caption { font-size: .85em; color: #4b5563; margin: .4em 0 1em; }

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

.npp-cal__example { border: 3px solid var(--npp-head); margin: 1em 0; }
.npp-cal__example-title { background: var(--npp-head); color: #fff; font-weight: bold; padding: .3em .8em; }
.npp-cal__example-items { display: flex; flex-wrap: wrap; }
.npp-cal__example-item { flex: 1 1 10em; text-align: center; padding: .4em .5em; }
.npp-cal__example-label { display: block; font-size: .85em; font-weight: bold; }
.npp-cal__example-total { font-size: 1.9em; font-variant-numeric: tabular-nums; }
.npp-cal__example-total small { font-size: .5em; }

.npp-cal__notes { margin: 1em 0 0; padding: .8em 1em .8em 2em; background: #f1f5f2; border-left: 4px solid #2f6b46; }
.npp-cal__notes li { margin: .2em 0; }

@media (max-width: 600px) {
	.npp-cal__grid { border-spacing: 1px; }
	.npp-cal__cell { height: 3.4em; }
	.npp-price-table td { font-size: 1em; }
}

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

/* 表示確認モードの帯（管理者だけに出る） */
.npp-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999999; padding: .6em 1em; background: #b3261e; color: #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: #fff; text-decoration: underline; margin-left: .5em; }