:root {
			--primary-color: #50C878;
			/*#4A90E2*/
			--secondary-color: #4A90E2;
			/*#50C878*/
			--danger-color: #E74C3C;
			--warning-color: #F39C12;
			--text-primary: #2C3E50;
			--text-secondary: #7F8C8D;
			--bg-color: #F8F9FA;
			--card-bg: #FFFFFF;
			--border-color: #E1E8ED;
			--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			--shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			-webkit-tap-highlight-color: transparent;
		}

		a {
			text-decoration: none !important;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			user-select: none;
		}

		a:focus,
		button:focus {
			outline: none;
		}

		button {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			user-select: none;
		}

		html {
			overflow-x: hidden;
			width: 100%;
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
			background: var(--bg-color);
			color: var(--text-primary);
			line-height: 1.6;
			overflow-x: hidden;
			width: 100%;
			max-width: 100vw;
		}

		/* 予約入力ページ専用スタイル */
		.reserve-container {
			max-width: 600px;
			width: 100%;
			margin: 0 auto;
			padding: 0;
			min-height: 100vh;
			background: var(--bg-color);
		}

		.reserve-header {
			background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
			padding: 24px 16px;
			position: sticky;
			top: 0;
			z-index: 100;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
			margin-bottom: 10px;
		}

		.header-content {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}


		.header-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 12px;
		}

		.back-button {
			background: rgba(255, 255, 255, 0.95);
			border: none;
			color: var(--text-primary);
			padding: 10px 16px;
			border-radius: 20px;
			display: flex;
			align-items: center;
			gap: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 14px;
			font-weight: 600;
			text-decoration: none;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		.back-button:active {
			background: rgba(255, 255, 255, 1);
			transform: scale(0.95);
		}

		.date-picker-button {
			background: rgba(255, 255, 255, 0.95);
			border: none;
			color: var(--text-primary);
			padding: 10px 16px;
			border-radius: 20px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 14px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 8px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		.date-picker-button:active {
			background: rgba(255, 255, 255, 1);
			transform: scale(0.95);
		}

		.reserve-title {
			text-align: center;
		}

		.date-month-year {
			font-size: 14px;
			font-weight: 600;
			letter-spacing: 1px;
			margin-bottom: 8px;
			color: rgba(255, 255, 255, 0.95);
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}

		.date-navigation {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
		}

		.date-nav-button {
			background: rgba(255, 255, 255, 0.95);
			border: none;
			color: var(--text-primary);
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 20px;
			font-weight: 700;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		.date-nav-button:active {
			background: rgba(255, 255, 255, 1);
			transform: scale(0.9);
		}

		.date-nav-button.prev.disabled {
			opacity: 0.3;
			cursor: not-allowed;
		}

		.current-date-display {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4px;
		}

		.current-date {
			font-size: 36px;
			font-weight: 700;
			letter-spacing: 1px;
			line-height: 1;
			color: #FFFFFF;
			text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}

		.date-day {
			font-size: 15px;
			font-weight: 600;
			letter-spacing: 0.5px;
			color: rgba(255, 255, 255, 0.95);
			text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}

		.instruction {
			background: white;
			padding: 16px;
			margin: 10px;
			border-radius: 12px;
			box-shadow: var(--shadow);
			text-align: center;
			font-size: 14px;
			color: var(--text-secondary);
			line-height: 1.6;
		}

		.message-box {
			margin: 16px;
			padding: 16px;
			border-radius: 12px;
			box-shadow: var(--shadow);
			animation: slideUp 0.3s ease;
		}

		.message-box.success {
			background: #E8F8F5;
			border-left: 4px solid var(--primary-color);
			color: var(--text-primary);
		}

		.message-box.error {
			background: #FADBD8;
			border-left: 4px solid var(--danger-color);
			color: var(--text-primary);
		}

		.message-box.delete {
			background: #FEF5E7;
			border-left: 4px solid var(--warning-color);
			color: var(--text-primary);
		}

		.message-box p {
			margin: 0;
			font-weight: 600;
		}

		.message-box .detail {
			margin-top: 8px;
			font-weight: 400;
			font-size: 13px;
			opacity: 0.8;
		}

		/* スワイプインジケーター */
		.swipe-indicator {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			width: 60px;
			height: 60px;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.2s ease;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
			z-index: 1000;
		}

		.swipe-indicator.left {
			left: 20px;
		}

		.swipe-indicator.right {
			right: 20px;
		}

		.swipe-indicator.show {
			opacity: 1;
		}

		/* コンテンツのスワイプアニメーション */
		.content-wrapper {
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
		}

		.content-wrapper.swipe-left-out {
			transform: translateX(-100%);
			opacity: 0;
		}

		.content-wrapper.swipe-right-out {
			transform: translateX(100%);
			opacity: 0;
		}

		.time-list-container {
			padding: 0 16px 80px;
			touch-action: pan-y;
			position: relative;
		}

		.time-list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.time-item {
			background: white;
			border-radius: 12px;
			padding: 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: var(--shadow);
			transition: all 0.3s ease;
			cursor: pointer;
			user-select: none;
			text-decoration: none;
			color: inherit;
			border: 2px solid transparent;
		}

		.time-item:active {
			transform: scale(0.98);
		}

		.time-item.available {
			border-color: var(--primary-color);
			background: rgba(80, 200, 120, 0.05);
		}

		.time-item.available:hover {
			background: rgba(80, 200, 120, 0.1);
			box-shadow: var(--shadow-hover);
		}

		.time-item.reserved {
			background: #f4f0f0;
			border-color: var(--border-color);
		}

		.time-item.break-time {
			background: #f4f0f0;
			border-color: var(--border-color);
			cursor: default;
		}

		.time-info {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.time-display {
			font-size: 18px;
			font-weight: 700;
			color: var(--text-primary);
			min-width: 60px;
		}

		.time-item.reserved .time-display,
		.time-item.break-time .time-display {
			color: var(--text-secondary);
		}

		.status-indicator {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 12px;
			border-radius: 20px;
			font-size: 14px;
			font-weight: 600;
		}

		.time-item.available .status-indicator {
			background: var(--primary-color);
			color: white;
		}

		.time-item.reserved .status-indicator,
		.time-item.break-time .status-indicator {
			background: #bdb7b7;
			color: white;
		}

		.status-icon {
			font-size: 16px;
			font-weight: 700;
		}

		/* スワイプナビゲーション */
		.swipe-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: white;
			padding: 12px 50px 12px 8px;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			z-index: 90;
		}

		.swipe-indicator-footer {
			display: flex;
			align-items: center;
			gap: 8px;
			color: var(--text-secondary);
			font-size: 11px;
			flex: 1;
			justify-content: center;
		}

		.swipe-arrow {
			font-size: 18px;
			animation: swipeHint 2s ease-in-out infinite;
		}

		@keyframes swipeHint {

			0%,
			100% {
				transform: translateX(0);
			}

			50% {
				transform: translateX(8px);
			}
		}

		.nav-date-button {
			background: var(--primary-color);
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 8px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 14px;
			min-width: 80px;
		}

		.nav-date-button:active {
			transform: scale(0.95);
			background: var(--secondary-color);
		}

		.nav-date-button.prev {
			background: var(--secondary-color);
		}

		.nav-date-button.prev:active {
			background: var(--primary-color);
		}

		.nav-date-button.hidden {
			display: none;
		}

		/* カレンダーモーダル */
		.calendar-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 1000;
			align-items: center;
			justify-content: center;
			padding: 16px;
			animation: fadeIn 0.3s ease;
		}

		.calendar-modal.active {
			display: flex;
		}

		.calendar-modal-content {
			background: white;
			border-radius: 16px;
			padding: 0;
			max-width: 400px;
			width: 100%;
			max-height: 90vh;
			overflow-y: auto;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
			animation: slideUp 0.3s ease;
		}

		.calendar-modal-header {
			padding: 20px;
			border-bottom: 1px solid var(--border-color);
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.calendar-modal-title {
			font-size: 18px;
			font-weight: 700;
			color: var(--text-primary);
			display: flex;
			align-items: center;
			gap: 16px;
		}

		.month-nav {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.month-nav-button {
			background: var(--bg-color);
			border: 2px solid var(--border-color);
			color: var(--text-primary);
			width: 32px;
			height: 32px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 16px;
			font-weight: 700;
		}

		.month-nav-button:active {
			background: var(--primary-color);
			color: white;
			border-color: var(--primary-color);
			transform: scale(0.9);
		}

		.month-nav-button.disabled {
			opacity: 0.3;
			cursor: not-allowed;
		}

		.current-month {
			font-size: 16px;
			font-weight: 700;
			min-width: 100px;
			text-align: center;
		}

		.close-button {
			background: none;
			border: none;
			font-size: 24px;
			color: var(--text-secondary);
			cursor: pointer;
			padding: 4px;
			line-height: 1;
		}

		.calendar-dates {
			padding: 20px;
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 8px;
		}

		.calendar-date {
			aspect-ratio: 1;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 2px solid transparent;
		}

		.calendar-date:not(.disabled):not(.holiday):hover {
			border-color: var(--primary-color);
			background: rgba(80, 200, 120, 0.1);
		}

		.calendar-date:not(.disabled):not(.holiday):active {
			transform: scale(0.95);
		}

		.calendar-date.disabled {
			color: var(--text-secondary);
			opacity: 0.3;
			cursor: default;
		}

		.calendar-date.holiday {
			background: #FFE5E5;
			color: var(--text-secondary);
			cursor: default;
		}

		.calendar-date.today {
			background: linear-gradient(135deg, #ebcc9b, #F39C12);
			color: #FFFFFF;
			font-weight: 700;
			box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
		}

		.calendar-date.selected {
			background: var(--primary-color);
			color: white;
			font-weight: 700;
			border: 3px solid var(--secondary-color);
			box-shadow: 0 2px 8px rgba(80, 200, 120, 0.4);
		}

		.calendar-date.saturday {
			color: var(--secondary-color);
			font-weight: 600;
		}

		.calendar-date.saturday:not(.disabled):not(.holiday):not(.today):not(.selected) {
			background: rgba(74, 144, 226, 0.1);
		}

		.calendar-date.sunday {
			color: var(--danger-color);
			font-weight: 600;
		}

		body.modal-open {
			overflow: hidden;
			padding-right: var(--scrollbar-width, 0px);
			/* ずれ防止 */
		}


		/* 休業日モーダル */
		/* 黒背景のフェードイン */
		.holiday-modal {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2000;
			align-items: center;
			justify-content: center;
			padding: 16px;
			/* 300ms(スピナー) + 200ms(少し間を空ける) = 0.5s 待ってからフェード */
			animation: fadeIn 2.0s ease forwards;
			animation-delay: 0.3s;
			/* ここをスピナーのフェードアウト時間に合わせる */
		}

		.holiday-modal.active {
			display: flex;
		}

		/* 中身のふわっと表示 */
		.holiday-modal-content {
			opacity: 0.9;
			background: white;
			border-radius: 16px;
			padding: 24px;
			max-width: 320px;
			width: 100%;
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
			text-align: center;
			transform: translateY(16px);
			animation: contentFadeUp 2.0s ease forwards;
			animation-delay: 0.3s;
			/* これも 0.3s 待ってから */
		}

		/* 背景フェードイン */
		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 0.9;
			}
		}

		/* 中身が下からふわっと */
		@keyframes contentFadeUp {
			from {
				opacity: 0;
				transform: translateY(16px);
			}

			to {
				opacity: 0.9;
				transform: translateY(0);
			}
		}


		.holiday-icon {
			font-size: 48px;
			margin-bottom: 16px;
		}

		.holiday-modal-title {
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 12px;
			color: var(--text-primary);
		}

		.holiday-modal-message {
			font-size: 14px;
			color: var(--text-secondary);
			margin-bottom: 24px;
			line-height: 1.5;
		}

		.holiday-modal-buttons {
			display: flex;
			gap: 12px;
		}

		.holiday-modal-button {
			flex: 1;
			padding: 12px 20px;
			border: none;
			border-radius: 8px;
			font-size: 15px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.holiday-modal-button.cancel {
			background: var(--bg-color);
			color: var(--text-primary);
		}

		.holiday-modal-button.next {
			background: var(--primary-color);
			color: white;
		}

		.holiday-modal-button:active {
			transform: scale(0.95);
		}

		/* ローディングオーバーレイ */
		.loading-overlay {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 0.95);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
			transition: opacity 0.3s ease;
		}

		.loading-overlay.hidden {
			opacity: 0;
			pointer-events: none;
		}

		.spinner {
			width: 50px;
			height: 50px;
			border: 4px solid var(--border-color);
			border-top-color: var(--primary-color);
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}

		@media (max-width: 375px) {
			.time-display {
				font-size: 16px;
			}

			.status-indicator {
				font-size: 12px;
				padding: 4px 10px;
			}
		}