@charset "utf-8";
/* おんどり庵 スマホの画面下の予約の帯（2026-11-13 B-11）。cta.js と組で使う。幅 780px 以下だけ表示 */
.octa-bar, .octa-backdrop, .octa-sheet { display: none; }

@media screen and (max-width: 780px) {
	body.octa-on { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
	.octa-bar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
		height: 56px; padding: 0 0 env(safe-area-inset-bottom, 0px); box-sizing: content-box;
		background: #15110e; border-top: 1px solid rgba(216, 163, 26, .45);
		box-shadow: 0 -4px 14px rgba(0, 0, 0, .35);
		font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	}
	/* スマホのメニューを開いている間は隠す（main.js が body に .on を付ける） */
	body.on .octa-bar { display: none; }
	.octa-bar .octa-btn {
		flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 6px;
		margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: none;
		color: #f3ece0; font: inherit; font-size: 15px; font-weight: bold; letter-spacing: .04em;
		text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: rgba(216, 163, 26, .25);
	}
	.octa-bar .octa-btn + .octa-btn { border-left: 1px solid #3a2f26; }
	.octa-bar .octa-btn.is-main { background: #b3202f; color: #fff; }
	.octa-bar .octa-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
	.octa-bar .octa-btn:focus-visible { outline: 3px solid #d8a31a; outline-offset: -3px; }

	/* 下から出る店の一覧 */
	html.octa-lock, html.octa-lock body { overflow: hidden; }
	.octa-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6); }
	.octa-sheet.is-open {
		display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
		max-height: 85vh; max-height: 85dvh; padding-bottom: env(safe-area-inset-bottom, 0px);
		background: #15110e; color: #f3ece0; border-top: 2px solid #d8a31a; border-radius: 14px 14px 0 0;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
		font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
		animation: octa-up .22s ease-out;
	}
	@keyframes octa-up { from { transform: translateY(100%); } to { transform: none; } }
	@media (prefers-reduced-motion: reduce) { .octa-sheet.is-open { animation: none; } }
	.octa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
	.octa-title { margin: 0; color: #f3ece0; font-size: 17px; font-weight: bold; line-height: 1.4; }
	.octa-close {
		flex: none; min-width: 72px; min-height: 40px; padding: 0 12px; border: 1px solid #5a4a3a; border-radius: 6px;
		background: none; color: #f3ece0; font: inherit; font-size: 14px; font-weight: bold; cursor: pointer;
	}
	.octa-hours { margin: 0; padding: 0 14px 10px; color: #b5a993; font-size: 12px; line-height: 1.6; border-bottom: 1px solid rgba(216, 163, 26, .25); }
	.octa-list { margin: 0; padding: 4px 14px 14px; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
	.octa-store { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #2e251e; }
	.octa-name { flex: 1 1 auto; min-width: 0; margin: 0; color: #f3ece0; font-size: 15px; font-weight: bold; line-height: 1.35; }
	.octa-name small { display: block; color: #b5a993; font-size: 11px; font-weight: normal; }
	.octa-note { display: block; margin-top: 2px; color: #f3d27a; font-size: 12px; font-weight: normal; }
	.octa-acts { flex: none; display: flex; gap: 6px; }
	.octa-act {
		display: flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 8px; box-sizing: border-box;
		border: 1px solid #5a4a3a; border-radius: 6px; color: #f3ece0; font-size: 13px; font-weight: bold; line-height: 1.2;
		text-align: center; text-decoration: none; white-space: nowrap;
	}
	.octa-act.is-main { border-color: #b3202f; background: #b3202f; color: #fff; }
	.octa-act:focus-visible, .octa-close:focus-visible { outline: 3px solid #d8a31a; outline-offset: 2px; }
	.octa-list a, .octa-list a:hover, .octa-list a:visited { text-decoration: none; }
	.octa-act.is-main:visited { color: #fff; }
	.octa-act:visited { color: #f3ece0; }
}
@media screen and (max-width: 340px) {
	.octa-bar .octa-btn { font-size: 14px; letter-spacing: 0; gap: 4px; }
	.octa-act { min-width: 56px; padding: 0 6px; font-size: 12px; }
	.octa-name { font-size: 14px; }
}