/* YokohamaLab OpenHours front.css */
.yloh-box {
	--yloh-open: #16a34a;
	--yloh-closed: #6b7280;
	--yloh-off: #dc2626;
	box-sizing: border-box;
	border: 1px solid #e4edf5;
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
	max-width: 320px;
	font-size: 15px;
	line-height: 1.7;
	color: #33475b;
}
.yloh-box * {
	box-sizing: border-box;
}

.yloh-shop {
	font-weight: 700;
	color: #1a3a5c;
	margin-bottom: 8px;
	font-size: 15px;
}

.yloh-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 17px;
}
.yloh-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 12px;
}
.yloh-open .yloh-dot { background: var(--yloh-open); box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.yloh-closed .yloh-dot { background: var(--yloh-closed); box-shadow: 0 0 0 4px rgba(107,114,128,.15); }
.yloh-off .yloh-dot { background: var(--yloh-off); box-shadow: 0 0 0 4px rgba(220,38,38,.15); }

.yloh-open .yloh-label { color: var(--yloh-open); }
.yloh-closed .yloh-label { color: var(--yloh-closed); }
.yloh-off .yloh-label { color: var(--yloh-off); }

.yloh-sub {
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.yloh-next {
	margin-top: 6px;
	font-size: 13px;
	color: #52657a;
}

.yloh-week {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 14px;
}
.yloh-week th,
.yloh-week td {
	padding: 6px 4px;
	border-top: 1px solid #eef2f7;
	text-align: left;
}
.yloh-week th {
	width: 42px;
	color: #1a3a5c;
	font-weight: 700;
}
.yloh-week td {
	color: #33475b;
}
.yloh-week tr.is-today th,
.yloh-week tr.is-today td {
	background: #f4f8fb;
}
.yloh-week tr.is-today th {
	color: #3b9eff;
}
.yloh-rest {
	color: #dc2626;
	font-weight: 600;
}

/* ===== カレンダー表示 ===== */
.yloh-box { max-width: 340px; }

.yloh-cal {
	margin-top: 14px;
}
.yloh-cal-title {
	text-align: center;
	font-weight: 700;
	color: #1a3a5c;
	font-size: 15px;
	margin-bottom: 8px;
}
.yloh-cal-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.yloh-cal-table th {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	padding: 4px 0;
	text-align: center;
}
.yloh-cal-table th.yloh-sun { color: #dc2626; }
.yloh-cal-table th.yloh-sat { color: #2563eb; }

.yloh-cal-table td {
	text-align: center;
	padding: 2px;
	vertical-align: middle;
}
.yloh-cal-table td.yloh-empty {
	background: transparent;
}
.yloh-dnum {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 34px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}
/* 営業日 */
.yloh-d-open .yloh-dnum {
	background: #eafaf0;
	color: #16794a;
}
/* 曜日定休 */
.yloh-d-off .yloh-dnum {
	background: #f1f3f5;
	color: #9aa4af;
}
/* 臨時休業 */
.yloh-d-holiday .yloh-dnum {
	background: #fdecec;
	color: #dc2626;
	text-decoration: line-through;
}
/* 今日 */
.yloh-cal-table td.is-today .yloh-dnum {
	outline: 2px solid #3b9eff;
	outline-offset: -2px;
	box-shadow: 0 0 0 3px rgba(59,158,255,.15);
}

.yloh-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 10px;
	font-size: 12px;
	color: #52657a;
}
.yloh-legend span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.yloh-lg {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	display: inline-block;
}
.yloh-lg-open { background: #eafaf0; border: 1px solid #16794a; }
.yloh-lg-off { background: #f1f3f5; border: 1px solid #9aa4af; }
.yloh-lg-holiday { background: #fdecec; border: 1px solid #dc2626; }
.yloh-lg-today { background: #fff; border: 2px solid #3b9eff; border-radius: 50%; }

/* ===== テーマCSS干渉対策 & 月切替ナビ ===== */
/* テーブルの装飾（罫線・背景・thの色）をリセット */
.yloh-box .yloh-cal-table,
.yloh-box .yloh-week {
	width: 100% !important;
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin: 0 !important;
	background: none !important;
	box-shadow: none !important;
	table-layout: fixed;
}
.yloh-box .yloh-cal-table th,
.yloh-box .yloh-cal-table td {
	border: 0 !important;
	background: none !important;
	padding: 3px !important;
	text-align: center !important;
	vertical-align: middle !important;
}
.yloh-box .yloh-cal-table thead th {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #6b7280 !important;
}
.yloh-box .yloh-cal-table thead th.yloh-sun { color: #dc2626 !important; }
.yloh-box .yloh-cal-table thead th.yloh-sat { color: #2563eb !important; }
.yloh-box .yloh-cal-table td { width: 14.2857% !important; }

/* 日付セル：縦長バラつき防止（固定高さで四角に） */
.yloh-box .yloh-dnum {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 38px;
	aspect-ratio: auto;
	min-height: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

/* 月切替ナビ */
.yloh-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.yloh-cal-titles {
	flex: 1 1 auto;
	text-align: center;
	font-weight: 700;
	color: #1a3a5c;
	font-size: 15px;
}
.yloh-nav {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid #d5e0ec;
	background: #fff;
	color: #1a3a5c;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.yloh-nav:hover { background: #eef4fb; }
.yloh-nav:disabled { opacity: .35; cursor: default; }

/* ステータスのドット：テーマ干渉対策で色を確実に適用 */
.yloh-box .yloh-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #6b7280; /* フォールバック */
}
.yloh-box.yloh-open .yloh-dot { background: #16a34a !important; box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.yloh-box.yloh-closed .yloh-dot { background: #6b7280 !important; box-shadow: 0 0 0 4px rgba(107,114,128,.15); }
.yloh-box.yloh-off .yloh-dot { background: #dc2626 !important; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }

/* ===== 色分けのシンプル化（営業＝緑／休業＝グレーの2色） ===== */
/* 臨時休業も休業（グレー）に統一 */
.yloh-box .yloh-d-holiday .yloh-dnum {
	background: #f1f3f5 !important;
	color: #9aa4af !important;
	text-decoration: none !important;
}

/* 週間表示：曜日セルを営業＝緑／休業＝グレーに */
.yloh-box .yloh-week th {
	border-radius: 6px;
	text-align: center !important;
	width: 46px;
}
.yloh-box .yloh-week th.yloh-wd-open {
	background: #eafaf0 !important;
	color: #16794a !important;
}
.yloh-box .yloh-week th.yloh-wd-off {
	background: #f1f3f5 !important;
	color: #9aa4af !important;
}
/* 今日の行：背景ではなく枠線で示す（色分けを保つ） */
.yloh-box .yloh-week tr.is-today th {
	outline: 2px solid #3b9eff;
	outline-offset: -2px;
	background: inherit;
}

/* ===== テーマが付ける外枠（枠線・角丸・影）を除去 ===== */
.yloh-box .yloh-cal,
.yloh-box .yloh-cal-panels,
.yloh-box .yloh-cal-panel,
.yloh-box .yloh-cal-table,
.yloh-box .yloh-week {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
	outline: 0 !important;
}
/* 念のためテーブル内側の罫線・帯も除去（曜日セルの色は別途指定が優先） */
.yloh-box .yloh-week,
.yloh-box .yloh-week tbody,
.yloh-box .yloh-week tr {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.yloh-box .yloh-week td {
	border: 0 !important;
	border-top: 1px solid #eef2f7 !important; /* 行の区切りだけ薄く残す */
	background: none !important;
}
/* 週間表示の曜日セルは罫線なし（背景色のみ） */
.yloh-box .yloh-week th { border: 0 !important; }

/* ===== 確定版：内側セル(td/th)の枠除去（子要素まで対象） ===== */
.yloh-box .yloh-cal-table,
.yloh-box .yloh-cal-table thead,
.yloh-box .yloh-cal-table tbody,
.yloh-box .yloh-cal-table tr,
.yloh-box .yloh-cal-table th,
.yloh-box .yloh-cal-table td,
.yloh-box .yloh-week,
.yloh-box .yloh-week thead,
.yloh-box .yloh-week tbody,
.yloh-box .yloh-week tr,
.yloh-box .yloh-week th,
.yloh-box .yloh-week td {
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background-image: none !important;
}
/* 週間表示の行区切りだけ薄く残す（tdの上線） */
.yloh-box .yloh-week td {
	border-top: 1px solid #eef2f7 !important;
}
/* 曜日セルの背景色（営業=緑／休業=グレー）と角丸は維持 */
.yloh-box .yloh-week th.yloh-wd-open { background: #eafaf0 !important; color: #16794a !important; border-radius: 6px !important; }
.yloh-box .yloh-week th.yloh-wd-off  { background: #f1f3f5 !important; color: #9aa4af !important; border-radius: 6px !important; }
/* 今日の枠線（カレンダー・週間） */
.yloh-box .yloh-cal-table td.is-today .yloh-dnum { outline: 2px solid #3b9eff !important; outline-offset: -2px; }
.yloh-box .yloh-week tr.is-today th { outline: 2px solid #3b9eff !important; outline-offset: -2px; }

/* ===== テーマのテーブル自動ラッパー枠を除去（真犯人） ===== */
/* テーマが table を .yl-page-table-wrap で囲み、枠線・角丸・余白を付けている */
.yloh-box .yl-page-table-wrap {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	overflow: visible !important;
}

/* ===== 週間表示：曜日セルを縦に離して独立させる ===== */
.yloh-box .yloh-week { border-collapse: separate !important; border-spacing: 0 6px !important; }
.yloh-box .yloh-week th {
	padding: 8px 0 !important;
	vertical-align: middle;
}
/* セル間の隙間ができるよう、行区切り線はセル内側の余白で表現 */
.yloh-box .yloh-week td { border-top: 0 !important; padding: 8px 0 8px 12px !important; }