/* 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-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: 1px solid var(--npp-cell); padding: .4em .6em; text-align: center; }
.npp-price-table thead th { font-weight: normal; color: var(--npp-thead-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-*（料金表には効かない）。無ければ共通の --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: bold; font-size: var(--npp-cal-title-size, 1.3em); 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: 0 0 .6em; font-size: .95em; color: var(--npp-cal-lead, inherit); text-align: var(--npp-cal-title-align, left); }
.npp-cal__legend { order: var(--npp-cal-order-legend, 20); display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.npp-cal__legend-item { flex: 1 1 12em; padding: .4em .6em; font-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: 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: 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: bold; padding: .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: #fff; }
.npp-cal .npp-cal__grid th.npp-cal__dow--6 { background: var(--npp-cal-head-sat, var(--npp-sat)); color: #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: .2em clamp(1px, .5cqi, 4px) .4em; 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: 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: 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-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: clamp(8px, 1.8cqi, 12px); font-weight: bold; color: var(--npp-cal-date-sun, var(--npp-sun)); margin-left: .25em; white-space: nowrap; }
.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; border-radius: var(--npp-cal-fee-radius, 0); }
.npp-cal__caption { order: var(--npp-cal-order-caption, 40); font-size: .85em; color: var(--npp-cal-caption, #4b5563); 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-text, var(--npp-text)); }
.npp-cal__tier--late { background: var(--npp-tier-late); color: 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: 3px solid var(--npp-cal-example-line, var(--npp-cal-head, var(--npp-head))); background: var(--npp-cal-example-bg, transparent); color: var(--npp-tier-text, var(--npp-text)); 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: bold; padding: .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: .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 { order: var(--npp-cal-order-notes, 60); margin: 1em 0 0; padding: .8em 1em .8em 2em; background: var(--npp-notes-bg); color: var(--npp-tier-text, var(--npp-text)); border-left: 4px solid var(--npp-notes-line); border-radius: var(--npp-cal-notes-radius, 0); }
.npp-cal__notes li { 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: 3.4em; }
	.npp-price-table td { font-size: 1em; }
}

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

/* シミュレーター */
.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; }