/* ---- サイト共通（カスタマイズ例）追加設定 ---- */
/* body {
   font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
   background: #f8f8f6;
   color: #333;
   display: flex;
   justify-content: center;
   padding: 40px 16px;
} */
.demo-page {
   max-width: 800px;
   width: 100%;
   background: #f8f8f6;
   margin: 20px auto 80px auto;
   padding: 20px;
}
.demo-heading {
   font-size: 13px;
   color: #999;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 8px;
}
.demo-section {
   background: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 24px;
   margin-bottom: 24px;
}
.demo-section h2 {
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 16px;
   border-bottom: 1px solid #eee;
   padding-bottom: 8px;
   color: #444;
}
.demo-code {
   background: #f5f5f5;
   border-radius: 4px;
   padding: 12px 16px;
   font-size: 12px;
   font-family: monospace;
   color: #555;
   line-height: 1.8;
   overflow-x: auto;
   margin-top: 16px;
}

/* =============================================
   push-reserve today ウィジェットのカスタマイズ例
   （サイトのデザインに合わせて変更してください）
   ============================================= */

/* ラッパー */
.pr-widget--today {
   font-family: inherit;
   font-size: 14px;
}

/* 午前/午後の行 */
.pr-period {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 6px 0;
}

/* 「午前」「午後」ラベル */
.pr-period-label {
   min-width: 30px;
   font-size: 13px;
   color: #888;
}

/* バッジのサイズを少し大きく */
.pr-badge {
   font-size: 16px;
   min-width: 2.8em;
   padding: 0.2em 0.8em;
}


/* =============================================
   push-reserve week ウィジェットのカスタマイズ例
   （サイトのデザインに合わせて変更してください）
   ============================================= */

/* フォントをサイトに合わせる */
.pr-widget { font-family: inherit; }

/* グリッド全体に枠線をつける例 */
.pr-week-grid {
   border: 1px solid #e8e8e8;
   border-radius: 6px;
   overflow: hidden;
}

/* ヘッダー行（日付）の背景 */
.pr-grid-row--header .pr-grid-corner,
.pr-grid-row--header .pr-grid-date {
   background: #fafafa;
}

/* 本日列のハイライト */
.pr-grid-date--today,
.pr-grid-cell--today {
   background: #fffcf5;
}
.pr-grid-date--today .pr-date-label {
   font-weight: 700;
}

/* 「本日」タグの色をサイトカラーに合わせる例 */
.pr-today-tag {
   background: #c0392b; /* ← サイトのアクセントカラーに変更 */
   max-width: 5.5em;
   margin: 3px auto;
}

/* ラベルセルの幅と見た目 */
.pr-grid-corner,
.pr-grid-label {
   background: #fafafa;
   color: #aaa;
   font-size: 0.8em;
   width: 3em;
}

/* データセルのパディング */
.pr-grid-date,
.pr-grid-cell {
   padding: 10px 8px;
}

/* バッジサイズ調整 */
.pr-badge { font-size: 15px; }

/* 枠数テキスト */
.pr-count {
   font-size: 0.72em;
   color: #bbb;
}

/* 午前・午後行の下線 */
.pr-grid-row--am .pr-grid-label,
.pr-grid-row--am .pr-grid-cell {
   border-bottom: 1px solid #eee;
}