/* --- 予約プラグイン共通スタイル --- */
.fp-tabs{display:flex;margin-bottom:8px; flex-wrap: wrap;}
.fp-tabs input{display:none;}
.fp-tabs label{padding:6px 12px;margin-right:4px; margin-bottom: 4px; border:1px solid #ccc;cursor:pointer; border-radius: 4px; transition: all 0.2s;}
.fp-tabs input:checked+label{background:#2b805a;color:#fff; border-color: #2b805a;}
.fp-nav{margin-bottom:8px; text-align: center;} .fp-nav button{margin: 0 10px; background: #f0f0f0; border: 1px solid #ccc; padding: 5px 10px; cursor: pointer; border-radius: 4px;}
.fp-layout{display:flex;} .fp-calendar{flex:1;}
.fp-cal{ border-collapse:collapse; width:100%; table-layout: fixed; }
.fp-cal th,.fp-cal td{ border:1px solid #ddd; padding:6px; text-align:center; width: calc(100% / 7); height: 60px; vertical-align: top;}
.fp-day{cursor:pointer; transition: background-color 0.2s;} .fp-day:hover { background-color: #f0f8ff; }
.fp-times-panel { display: none; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 320px; max-width: 90%; padding: 15px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); border-radius: 8px; z-index: 1001; padding-top: 40px; }
.fp-time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding-right: 5px; }
.fp-time-slot-button { background-color: #e6f7ed; color: #2b805a; padding: 8px 5px; border: 1px solid #2b805a; border-radius: 4px; cursor: pointer; font-size: 0.9em; text-align: center; transition: background-color 0.2s, color 0.2s; white-space: nowrap; }
.fp-time-slot-button:hover:not([disabled]) { background-color: #2b805a; color: #fff; }
.fp-time-slot-button[disabled] { background-color: #e9ecef; color: #6c757d; border-color: #ced4da; cursor: not-allowed; opacity: 1; }
.fp-time-slot-button.fp-selected-slot { background-color: #1a5e3a !important; color: #fff !important; border-color: #0f3d24 !important; }
.fp-time-slot-button.fp-intermediate-slot { background-color: #81c784 !important; color: #fff !important; border-color: #4caf50 !important; }
.fp-cal th.fp-sunday, .fp-cal td.fp-sunday .fp-date-text { color: #dc3545; }
.fp-cal th.fp-saturday, .fp-cal td.fp-saturday .fp-date-text { color: #007bff; }
.fp-cal td.fp-public-holiday .fp-date-text { color: #dc3545; }
.fp-cal td.fp-closed-day { background-color: #e9ecef; cursor: not-allowed; }
.fp-cal td.fp-selected { background-color: #2b805a !important; color: #fff !important; }
.fp-cal td.fp-selected .fp-date-text, .fp-cal td.fp-selected .fp-status { color: #fff !important; }
#fp-message-box{ display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:10px 20px; border-radius:5px; z-index:9999; }
#fp-overlay{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:1000; }
#fp-modal{ display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; padding:20px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.3); z-index:1001; border-radius: 8px;}
#fp-modal label{display:block;margin-bottom:8px;font-size:14px; text-align: left;}
#fp-modal input{width:100%;padding:8px;margin-bottom:8px;font-size:14px; border: 1px solid #ccc; border-radius: 4px;}
.fp-button { display: inline-block; text-decoration: none; border: 1px solid #ccc; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; margin: 0 5px; }
.fp-button-primary { background-color: #2b805a; color: white; border-color: #2b805a; }
.fp-button-primary:hover { background-color: #1e5e3a; border-color: #1e5e3a; }
.fp-button-primary:disabled { background-color: #94b5a6; border-color: #94b5a6; cursor: not-allowed; }
.fp-button-secondary { background-color: #6c757d; color: white; border-color: #6c757d; }
.fp-button-secondary:hover { background-color: #5a6268; border-color: #5a6268; }

/* --- 予約確認ページ専用のスタイル --- */
#fp-confirm-section { max-width: 800px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
#fp-confirm-section label { display: block; margin-bottom: 5px; font-weight: bold; }
#fp-confirm-section input, #fp-confirm-section select { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.fp-button-danger { background-color: #dc3545; color: white; border-color: #dc3545; }
.fp-button-danger:hover { background-color: #c82333; border-color: #bd2130; }
#fp-reservation-display, #fp-other-reservations { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; }
.fp-detail-row { margin-bottom: 10px; }
.fp-detail-row strong { display: inline-block; min-width: 100px; }
#fp-modify-section { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; display: none; }
#fp-time-slots-modify { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto; padding: 10px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9; }
#fp-time-slots-modify button { background-color: #e6f7ed; color: #2b805a; padding: 8px 5px; border: 1px solid #2b805a; border-radius: 4px; cursor: pointer; font-size: 0.9em; text-align: center; }
#fp-time-slots-modify button:hover:not([disabled]) { background-color: #2b805a; color: #fff; }
#fp-time-slots-modify button[disabled] { background-color: #e9ecef; color: #6c757d; border-color: #ced4da; }
.fp-message { padding: 10px; margin-top: 10px; border-radius: 4px; display:none; }
.fp-error { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb;}
.fp-success { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb;}
#fp-other-reservations ul { list-style: none; padding: 0; }
#fp-other-reservations li { padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 5px; cursor: pointer; transition: background-color 0.2s; }
#fp-other-reservations li:hover { background-color: #f0f8ff; }
#fp-other-reservations li.active { background-color: #d4edda; border-color: #2b805a; }