.test {
	padding: 3px 3px 3px 3px;
	background-color: bisque;
	border: 1px solid #FFFFFF;
}


/* body {
	color: #666;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	background-color:#f5f5f5;
	font-size: 120%;
	line-height: 150%;
	letter-spacing: 0.1em;
} */

.container {
	box-sizing: border-box;
	border-collapse: collapse;
	padding-left: 5px;
}


/* h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
} */

#site_description {
	font-size: 80%;
}

.left {
	float: left;
}

.clear {
	clear: left;
}

.center {
	text-align: center;
}

/*.right {
	text-align: right;
}*/

.ui-datepicker-trigger {
	margin-bottom: -4px;
}


.th {
	background-color: #f0f0f0;
	font-weight: bold;
}



.table {
	display:table; 
	border-collapse: collapse;
	font-size: 85%;
	font-weight: bold;
}

.row {
	display:table-row;
}

.row>div {
	display:table-cell;
	padding:10px;
	border:1px solid #E4E4E4;
	vertical-align: top;
}




/* ▼メニュー一覧のCSS */
.menu-list-box {
	background-color: #ecf5ff;
	width:  750px;
	height: 180px;
	border: 1px solid #cef0f4;
	margin-top: 10px;
	overflow:hidden;
}

.menu-left {
	background-color: #ecf5ff;
	padding: 10px;
	width:  570px;
	height: 178px;
	border-right: 1px solid #cef0f4;
	box-sizing: border-box;
}

.menu-right {
	background-color: #ecf5ff;
	width:  150px;
	text-align: center;
	padding-top: 53px;
	padding-left: 5px;
}


.menu-tag {
	background-color: #ecf5ff;
	width:  500px;
	height: 20px;
	padding-bottom: 10px;
}

.menu-name {
	background-color: #ecf5ff;
	width:  420px;
	height: 20px;
	border-bottom: 2px solid #4AA1AB;
}


.menu-price {
	background-color: #ecf5ff;
	width:  120px;
	height: 20px;
	text-align: right;
	border-bottom: 2px solid #4AA1AB;
	color: #f00;
}

.menu-img {
	background-color: #ecf5ff;
	width:  120px;
	height: 100px;
	text-align: center;
	padding-top: 10px;
}

.menu-comment {
	background-color: #ecf5ff;
	padding-top: 10px;
	width:  420px;
	height:  95px;
}

.menu-time {
	background-color: #ecf5ff;
	padding-top: 10px;
	width:  420px;
}

/* ▲メニュー一覧のCSS */


/* ▼パンクズCSS▼ */

.flow_area {
	margin: 0 0 10px 0;
}


ol {
	padding: 0;
}


.bookStepList {
	border: 1px solid #824D21;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: table;
	line-height: 1;
	overflow: hidden;
	width: 100%;
	text-align: left;
}
.bookStepList > li {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #bb944f;
	display: table-cell;
	font-size: 13px;
	font-weight: bold;
	height: 42px;
	position: relative;
	vertical-align: middle;
/*	background-color: none;										パンクズ背景色 */
}
.bookStepList > li > span {
	display: block;
	font-size: 10px;
	margin-bottom: 4px;
}
.bookStepList > li > span:before,
.bookStepList > li > span:after {
	border-style: solid;
	content: "";
	display: block;
	position: absolute;
}
.bookStepList > li > span:before {
	border-color: transparent transparent transparent rgba(255, 102, 0, 0);
	border-width: 22px 0 22px 13px;
	right: 0;
	top: -1px;
/*	background-color: none;										右▲ の背景色 */
}
.bookStepList > li > span:after {
	border-color: transparent transparent transparent #824D21;	/* 右▲ の色 */
	border-width: 22px 0 22px 13px;
	right: 1px;
	top: -1px;
}
.bookStepList > li:last-child > span:after{
	content:none;
 
}
.bStep1 {
	padding-left: 10px;
	width: 120px;
}
.bStep2 {
	padding-left: 10px;
	width: 120px;
}
.bStep3 {
	padding-left: 10px;
	width: 120px;
}
.bStep4 {
	padding-left: 10px;
	width: 120px;
}
.bStep5 {
	padding-left: 10px;
	width: 120px;
}
.bStepEnd {
	line-height: 42px;
	text-align: center;
	width: 120px;
}
.bStep1:before,
.bStep2:before {
/*	background-image: url(icon_book.png);*/
	background-repeat: no-repeat;
	display: block;
	position: absolute;
}
.bStep1:before {
	height: 20px;
	left: 10px;
	top: 11px;
	width: 30px;
}
.bStep2:before {
	background-position: 0 -90px;
	height: 30px;
	left: 10px;
	top: 5px;
	width: 30px;
}
.bookStepList > .active	{ color: #3F4EFF; }
.bookStepList > .passive   { color: #CCCCCC; }
.bStep1.active:before	  { background-position: 0 0; }
.bStep1.passive:before	 { background-position: 0 -60px; }
.bStep2.active:before	  { background-position: 0 -130px; }
.bStep2.passive:before	 { background-position: 0 -210px; }

/* ▲パンクズCSS▲ */



/* 管理画面 スケジュール一覧 */
.lineAll {
	box-shadow: 0 0 0 1px #FFFFFF inset;
}

.lineLeft {
	border-left: 1px solid #FFFFFF;
}

.lineRight {
	border-right: 1px solid #FFFFFF;
}

.lineBottom {
	border-bottom: 1px solid #FFFFFF;
}

.lineTop {
	border-top: 1px solid #FFFFFF;
}

.even {
	border-right:	1px dotted #C3C3C3;
}

.odd {
	border-left:	 1px dotted #C3C3C3;
}

/* フロント スケジュール一覧 */
.FlineLeft {
	border-left: 1px solid #929FAD;
	box-sizing: border-box;
}

.FlineRight {
	border-right: 1px solid #929FAD;
	box-sizing: border-box;
}

.FlineBottom {
	border-bottom: 1px solid #786A5E;
	box-sizing: border-box;
}

.FlineTop {
	border-top: 1px solid #929FAD;
	box-sizing: border-box;
}




.headerYM {
	background-color: #FDECBE;
	height: 30px;
	width: 100px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 10px;
}

.header {
	background-color: #FDECBE;
	height: 20px;
	width: 100px;
	text-align: center;
}

.time {
	background-color: #ecf5ff;
	height: 25px;
	width: 100px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

.dd {
	background-color: #FDECBE;
	height: 20px;
	width: 50px;
	text-align: center;
}


.book-list {
   /*background-color: #FFFFCC;*/
	height: 25px;
	width: 50px;
	text-align: center;
	line-height: 1.5em;
	font-size: 150%;
}

.book-list:hover {
	background-color: #F3F35E;
}


.sat{
	background-color: lightblue;
	color: #618AFF;
}
.sun{
	background-color: lightpink;
	color: #FF0000;
}
.today{
	background-color: #FFCC33;
}


.cal {
	height: 30px;
	text-align: center;
	background-color: #FDECBE;
	padding-top: 5px;
	padding-bottom: 5px;
}

.cal2 {
	height: 30px;
	text-align: center;
	background-color: #FFCC66;
	padding-top: 5px;
	padding-bottom: 5px;
}


.cel1 {
	width: 50px;
}

.cel2 {
	width: 100px;
}

.cel3 {
	width: 150px;
}

.cel4 {
	width: 200px;
}

.cel5 {
	width: 250px;
}

.cel6 {
	width: 300px;
}

.cel7 {
	width: 350px;
}

.cel8 {
	width: 400px;
}

.cel9 {
	width: 450px;
}

.cel10 {
	width: 500px;
}


/* スタッフ */
.staff-box {
	padding: 3px 3px 3px 3px;
	width : 180px;
	height: 320px;
/*	background-color: bisque; */
	border: 1px solid #E4E4E4;
	margin: 5px;
}

.staff-picture {
	width : 150px;
	height: 140px;
}
.staff-picture img {
	width : 100%;
}

.staff-list-comment {
	width : 340px;
	height: 100px;
	padding-top: 10px;
}

.staff-comment {
	width : 180px;
	height: 100px;
}

.staff-other {
	width : 300px;
	height: 20px;
	padding-top   : 10px;
}

.simei-title {
	border-bottom: 2px solid #BFBFBF;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}

/* スタッフ指定なし */
.staff-box-mini {
	padding: 3px 3px 3px 3px;
	width : 148px;
	height: 40px;
/*	background-color: bisque; */
	border: 1px solid #FFFFFF;
	padding-top: 10px;
}

/* スタッフ(スケジュール) */
.staff-box-schedule {
	padding: 3px 3px 3px 3px;
	width : 100%;
	height: 180px;
/*	background-color: bisque; */
	border: 1px solid #786a5e;
	margin-bottom: 10px;
}


/* ボタン基本CSS */
.button {
	display: inline-block;
	width: 140px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	line-height: 30px;
	outline: none;
}

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.list-btn {
	padding: 5px;
}

/* ボタン挙動 */
.button {
	position: relative;
	background-color: #844A1C;
	border-radius: 4px;
	color: #FFEDCD !important;
	line-height: 30px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #673712;
	margin-bottom: 10px;
}
.button:hover {
	background-color: #88562E;
	box-shadow: 0 3px 0 #844A1C;
}
.button:active {
	top: 3px;
	box-shadow: none;
}

/* 戻るボタンの色を定義 */
.btn-back{
	background-color: #844A1C;
	box-shadow: 0 3px 0 #673712;
	/*text-shadow: 0 1px 1px #333;*/
}
.btn-back:hover {
	background-color: #88562E;
	box-shadow: 0 3px 0 #844A1C;
}

/* 変更ボタンの色を定義 */
.btn-change{
	background-color: #844A1C;
	box-shadow: 0 3px 0 #673712;
}
.btn-change:hover {
	background-color: #88562E;
	box-shadow: 0 3px 0 #844A1C;
}


.msg {
	padding-top: 10px;
	color: red;
}

/* 予約完了画面 */
.yoyaku {
	background-color: #DBEAFF;
	color: red;
}


/* 管理画面 スケジュール管理 */
.book-header {
	border: 1px solid #000;
	border-width: 1px 0px 1px 1px;
	box-sizing: border-box;
	background-color: #CCFFCC;
	height: 100%;
	width:  60px;
	text-align: center;
	padding-top:	16px;
	padding-bottom: 16px;
	white-space: nowrap;
}

.book-time {
	border: 1px solid #000;
	border-width: 1px 0px 0px 1px;
	box-sizing: border-box;
	background-color: lightblue;
	height: 200px;
	width:   60px;
	text-align: center;
/*	padding-top: 30px;
	padding-bottom: 30px;*/
}

.book-time p{
	padding: 5px;
}

.book-staff {
	border: 1px solid #000;
	border-width: 1px 0px 1px 1px;
	box-sizing: border-box;
	background-color: #F9C5EB;
	height: 100%;
	width: 280px;
	text-align: center;
	padding-top:	16px;
	padding-bottom: 16px;
}

.book-main {
	border: 1px solid #000;
	border-width: 1px 0px 0px 1px;
	box-sizing: border-box;
	/*background-color: #E0F3F9;*/
	height: 200px;
	width:  280px;
/*  text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;*/
}
.book-main p{
	padding: 5px;
}
.book-main a{
	font-weight: bold;
}


.disp_menu{
	padding-left: 5px;
}

.disp_tel{
	padding-left: 5px;
}

/*グレー背景*/

.bk_color {
	background-color: #E2DEDE;
}

.staff-on {
	background-color: #FFEAED;
}

.stock-none {
	background-color: #C0C0C0;
}

.yoyaku-ok {
	background-color: lightpink;
}

.simei {
	background-color: #CCFFCC;

}

/*指定なし予約の背景*/

.simei_gray {
	background: #f0f0f0;
}


.table-top {
	border-top:	1px solid #000;
	box-sizing: border-box;
}
.table-bottom {
	border-bottom: 1px solid #000;
	box-sizing: border-box;
}
.table-top-none {
	border-top:	1px solid #000;
	box-sizing: border-box;
}
.table-left {
	border-left:   1px solid #000;
	box-sizing: border-box;
}
.table-right {
	border-right:  1px solid #000;
	box-sizing: border-box;
}

/*
.wide {
	width: 1000px;
}
.sub-menu {
	height:  55px;
	width: 1000px;
}
*/



.fixed {
	padding-top: 10px;
	position: fixed;
/*	top: 0px;	   //一番上なら0pxに指定してください*/
	left: 20px;
	z-index: 1;
/*	background: white;//不要であればいらないです*/
}

/* アイコン */
.MenuIcons li {
	float: left;
	margin-right: 5px;
	padding: 1px 10px;
	color: #FFF;
	text-align: center;
	white-space: nowrap;
	font-size: 12px;
	min-height: 1px;
}
.menutag{
	color:#FFF;
	font-size:12px;
	line-height:16px;
	margin-left:8px;
	padding:3px 10px;
	background-color:#85C53A;
}
.MenuIcon {
	background-color: #85C53A;
	margin-bottom: 5px;
}


table.staff-list {
	width: 100%;
	margin-bottom: 0px;
}

table.staff-detail {
	width: 200px;
	margin-bottom: 0px;
}


.check-area {
	margin : 0 0 10px 0;
	padding: 10px 0;
	clear: both;
	width: 100%;
	background: #f5f5f5;
	text-align: center;
}



.link_box{
	position:relative;
}
 
.link_box a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

}

.link_box a:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}






.table60 {
	width: 60%;
}

.mg10 {
	margin-right: 10px;
	margin-left: 10px;
}

/* 最後の方に記載が望ましい */
.evenF {
	border-bottom:   1px dotted #C3C3C3;
}

.none {
	background-color: #FFF;
}
.none:hover {
	background-color: #FFF;
}

.warning {
	color: #f90;
}

.row {
	padding: 0px;
	border-collapse: collapse;
	box-sizing: border-box;
}

.row>div.nb {
	border: 0px;
	padding: 0px;
	border-collapse: collapse;
	box-sizing: border-box;
}

.admin {
	background: #FFF5AB;
}

.assign {
	background: #C5C9FF;
}

.simei.assign_err {
	background: red;
}

.simei_gray.admin {
	background: #f0f0f0;
}


.simei_gray.assign_err {
	background: red;
}

p.each_yoyaku {
	margin-bottom: 5px;
}


/* スケジュール表 */
.even {
/*	// border-right: 2px #ccc dotted;*/
}

th.left_staff {
	background: #FFEAED;
}

th.leftside {
	background: #D5F5FF;  
}

.schedule a:link {
	color: #FD7575;
	/*padding-left:20px;*/
}

.schedule td:last-child {
	border-right: solid 1px #ccc;
}

table.schedule td {
	min-width: 20px;
	white-space: nowrap;
	max-width: 20px;
}

table.schedule th {
	min-width: 60px;
	white-space: nowrap;
}

table.schedule td div {
	padding-left:30px;
}

.no_shimei {
	padding: 2px;
	padding-left: 5px;
}

.simei.assign_err a:link {
	color: #F3F35E;
}

.simei.assign_err a:hover {
	color: #39c;
}

/*その他お問い合わせ事項*/

textarea.txtarea {
	color: #000;
}

/*指定なしカラー*/

.simei_gray a:link {
	color: #aaaaaa;
}

.simei{
	background-image: url("/files/book/web.png");
	background-position: 8px center;
	background-repeat: no-repeat;
	background-size: 18px;
}


.admin{
   background-image: url("/files/book/pc.png");
   background-repeat: no-repeat;
   background-position: 8px center;
   background-size: 18px;
}

.simei_gray.assign_err{
/*	background-image: url("/files/book/pc.png"); */	  /* 指定なし は、アイコンを表示しない */
	background-position: 8px center;
	background-repeat: no-repeat;
	background-size: 18px;
}

.simei.assign_err{
	background-image: url("/files/book/web.png");
	background-position: 8px center;
	background-repeat: no-repeat;
	background-size: 18px;
}

.admin.simei.assign_err{
	background-image: url("/files/book/pc.png");
	background-repeat: no-repeat;
	background-position: 8px center;
	background-size: 18px;
}

p.each_yoyaku img {
	width: 20px;
	height: auto;
}

td.simei_gray.no_shimei a {
	padding-left: 0;
}


td.simei_gray.no_shimei.admin a {
	padding: 0;
}


#return_to_book{
	cursor:pointer;
	border-radius:8px;
	text-align:center;
	background-color:#EEE;
	box-shadow:0 0 2px #888;
}
#menu_rows{
	position:relative;
}
#menu_rows .menu_row{
	width:100%;
	padding:8px;
	margin:8px 0;
	margin-left:1px;
	box-shadow:0 0 1px #888;
}
#menu_rows .menu_row .menu_column{
	width:100%;
	padding:8px;
	margin:8px 0;
	margin-left:1px;
	border-radius:8px;
	box-shadow:0 0 1px #888;
}
#menu_rows .menu_row .menu_image{
	width:30%;
	float:left;
	overflow:hidden;
	position:relative;
	border-radius:8px;
	background-color:#EEE;
	box-shadow:0 0 2px #888;
}
#menu_rows .menu_row .menu_image img{
	width:100%;
	height:100%;
	object-fit:cover;
}
#menu_rows .menu_row .menu_image .noimage{
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-shadow:0 0 12px #888;
}
#menu_rows .menu_row .main_description{
	width:69%;
	float:right;
	font-size:0.95em;
	position:relative;
	white-space: pre-line;
	overflow: hidden;
}
#menu_rows .menu_row .menu_detail{
	font-size:1em;
	cursor:pointer;
	line-height:2em;
	margin-top:0.5em;
}
#menu_rows .menu_row .menu_title{
	font-size:1.2em;
	font-weight:bold;
}
#menu_rows .menu_row .menu_buttons{
	font-size:1em;
	line-height:2em;
}
#menu_rows .menu_row .menu_tags{
	width:100%;
	margin-bottom:6px;
	position:relative;
}
#menu_rows .menu_row .item_button,
#menu_rows .menu_row select{
	cursor:pointer;
}
#menu_rows .menu_row .item_button{
	width:10em;
}
#menu_rows .menu_row .menu_detail,
#menu_rows .menu_row .item_button{
	border-radius:4px;
	text-align:center;
	box-shadow:0 0 2px #000;
	/* background-color:#c3eaff; */
}
#menu_rows .menu_row .item_error{
	border-radius:4px;
	box-shadow:0 0 6px #F88;
}
#menu_template{
	display:none;
}
.menu_clear{
	clear:both;
}
#menu_rows .menu_frame_main,
#menu_rows .menu_frame_sub{
	display:block;
}
#menu_rows .menu_frame_main img,
#menu_rows .menu_frame_sub img{
	display:block;
	float:none;
	width:100%;
	/* max-width:500px; */
	margin:0 auto 0.8em;
}
#menu_rows .menu_frame_main .comment,
#menu_rows .menu_frame_sub .comment{
	display:block;
	white-space:pre-line;
}


#schedule_base{
	width:99.8%;
	margin:0 5px;
	position:relative;
	box-sizing:border-box;
}
#schedule_base div{
	text-align:center;
	position:relative;
	box-sizing:border-box;
}
#schedule_base a{
	text-decoration:none;
}
#schedule_base .schedule_hm{
	border:solid 1px #888;
}
#schedule_ym{
	background-color:#ECF5FF;
}
#schedule_body{
	border-top:solid 1px #888;
	border-bottom:solid 1px #888;
}
#schedule_body .schedule_ym{
	background-color:#FFCC66;
}
#schedule_body .schedule_ym,
#schedule_body .schedule_col{
	border-left:solid 1px #888;
}

#schedule_body .schedule_ym:first-child,
#schedule_body .schedule_col_first{
	border-left:none;
}
#schedule_body .schedule_col{
	border-top:solid 1px #888;
}
#schedule_body .schedule_ym,
#schedule_body .schedule_hd{
	padding:0.5em 0;
}
#schedule_base .schedule_hm .schedule_item,
#schedule_body .schedule_col .schedule_item{
	line-height:30px;
	border-top:dotted 1px #888;
}
#schedule_base .schedule_hm .schedule_item.schedule_item_first,
#schedule_body .schedule_col .schedule_item.schedule_item_first{
	border-top:solid 1px #888;
}
#schedule_body .schedule_col.sat{
	background-color:#aaffe1;
}
#schedule_body .schedule_col.sun{
	background-color:#ffd5d5;
}
#template{
	display:none;
}
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}

/* ▼月カレンダー（日時選択画面）▼ */
.calendar_area {
	margin: 20px 0;
}
.calendar_nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: 10px;
}
.calendar_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.calendar_table thead th {
	text-align: center;
	padding: 8px 0;
	font-weight: bold;
	border-bottom: 2px solid #ccc;
}
.calendar_table thead th.cal_sun { color: #FF0000; }
.calendar_table thead th.cal_sat { color: #618AFF; }

.calendar_table td {
	text-align: center;
	vertical-align: middle;
	padding: 0;
	border-bottom: 1px solid #eee;
	aspect-ratio: 1;
}
.calendar_table td.cal_day a,
.calendar_table td.cal_day .cal_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 4px 2px;
}
.calendar_table td.cal_day {
	cursor: default;
}
.calendar_table td.cal_ok,
.calendar_table td.cal_part {
	cursor: pointer;
}
.calendar_table td.cal_day .day_num {
	display: block;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.4;
}
.calendar_table td.cal_day .cal_mark {
	display: block;
	font-size: 18px;
	line-height: 1.2;
}
.calendar_table td.cal_day .cal_mark.ok   { color: #4CAF50; }
.calendar_table td.cal_day .cal_mark.part { color: #FF9800; }
.calendar_table td.cal_day .cal_mark.full { color: #F44336; }

.calendar_table td.cal_past .day_num { color: #ccc; }
.calendar_table td.cal_past .cal_mark { visibility: hidden; }

.calendar_table td.cal_ok:hover { background-color: #e8f5e9; }
.calendar_table td.cal_part:hover { background-color: #fff3e0; }
/* ▲月カレンダー（日時選択画面）▲ */


/*  追加分
---------------------------------------------------------------------------------------------------- */
/*ローディング*/
.black-screen {
    background-color: rgb(0, 0, 0);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100000;
}
.black-screen > .inner {
    position: absolute;
    inset: calc(50vh - 2.5vw) 0px 0px;
    margin: 0px auto;
    width: 3vw;
    height: 3vw;
    background-image: url(/files/loading.svg);
    background-size: cover;
    overflow: hidden;
}


/* ▼ 開始時間選択 timeslot ▼ */

.timeslot_heading {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 20px 0 10px;
}

.timeslot_area {
    margin: 0;
}

.timeslot_list {
    border-top: 1px solid #e0e0e0;
}

.timeslot_row {
    display: flex;
    align-items: center;
    padding: 16px 10px;
    border-bottom: 1px solid #e0e0e0;
}

.timeslot_row.timeslot_full {
    opacity: 0.5;
}

.timeslot_time {
    flex: 0 0 80px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.timeslot_status {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timeslot_mark {
    font-size: 24px;
    line-height: 1;
}

.timeslot_mark.mark_ok {
    color: #e74c3c;
}

.timeslot_mark.mark_full {
    color: #999;
}

.timeslot_label {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.timeslot_action {
    flex: 0 0 130px;
    text-align: right;
}

.timeslot_btn {
    display: inline-block;
    background-color: #e74c3c;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 4px;
    text-align: center;
    min-width: 110px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s;
}

.timeslot_btn:hover {
    background-color: #c0392b;
    color: #fff;
    text-decoration: none;
}

.timeslot_btn_disabled {
    background-color: #ccc;
    color: #fff;
    cursor: default;
    pointer-events: none;
}

.timeslot_btn_disabled:hover {
    background-color: #ccc;
}

/* SP対応 */
@media screen and (max-width: 480px) {
    .timeslot_time {
        flex: 0 0 60px;
        font-size: 15px;
    }

    .timeslot_action {
        flex: 0 0 100px;
    }

    .timeslot_btn {
        font-size: 12px;
        padding: 10px 12px;
        min-width: 90px;
    }

    .timeslot_mark {
        font-size: 20px;
    }

    .timeslot_label {
        font-size: 10px;
    }
}

/* ▲ 開始時間選択 timeslot ▲ */

/* ▼ 人数・オプション選択 count ▼ */

/* --- 人数カウンター行 --- */
.count-section {
	border-top: 1px solid #e0e0e0;
}
.count-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	border-bottom: 1px solid #e0e0e0;
}
.count-row__info {
	flex: 1;
	min-width: 0;
}
.count-row__title {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	margin: 0 0 2px 0;
}
.count-row__price {
	font-size: 13px;
	color: #888;
	margin: 0;
}
.count-row__price .price-original {
	text-decoration: line-through;
	color: #bbb;
	margin-right: 6px;
}
.count-row__price .price-current {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}
.count-row__note {
	font-size: 11px;
	color: #999;
	margin-top: 4px;
}
.count-row__counter {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin-left: 16px;
}
.count-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid #ccc;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	color: #333;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: border-color 0.15s, color 0.15s, opacity 0.15s;
	padding: 0;
}
.count-btn:hover {
	border-color: #87b12f;
	color: #87b12f;
}
.count-btn:active {
	background: #f5f5f5;
}
.count-btn.disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
.count-value {
	display: inline-block;
	min-width: 24px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

/* --- オプション セクション --- */
.option-section {
	border-bottom: 1px solid #e0e0e0;
	padding: 14px 0;
}
.option-section__header {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	margin: 0 0 4px 0;
}
.option-section__sub {
	font-size: 12px;
	color: #999;
	margin: 0 0 12px 0;
}
.option-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
}
.option-row__info {
	flex: 1;
	min-width: 0;
}
.option-row__title {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	margin: 0 0 2px 0;
}
.option-row__price {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin: 0;
}
.option-row__note {
	font-size: 11px;
	color: #999;
	margin-top: 4px;
}

/* --- トグルスイッチ --- */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 28px;
	flex-shrink: 0;
	margin-left: 16px;
}
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #ccc;
	border-radius: 28px;
	transition: background-color 0.25s;
}
.toggle-slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	border-radius: 50%;
	transition: transform 0.25s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
	background-color: #87b12f;
}
.toggle-switch input:checked + .toggle-slider:before {
	transform: translateX(22px);
}

/* --- 合計金額エリア --- */
.total-price-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	margin-top: 8px;
}
.total-price-bar__label {
	font-size: 14px;
	color: #333;
}
.total-price-bar__value {
	font-size: 22px;
	font-weight: bold;
	color: #333;
}

/* --- エラー表示 --- */
.count-error {
	background: #fff5f5;
	border: 1px solid #f5c6cb;
	color: #c00;
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: 13px;
}

/* ▲ 人数・オプション選択 count ▲ */