@charset "UTf-8";
.panel-body {
	background-color: var(--dark_bg_color);
	padding: 0;
}
.panel-heading-md {
	text-align: left;
	display: flex;
}
.center_block {
	padding-inline: 0;
}
@media (min-width: 992px)
{
	.center_block{
		max-width: 990px;
		margin: auto;
	}
}
.modal-content {
	border-radius: 0;
}
.modal-dialog > .modal-content > .modal-header > .modal-title {
	text-align: center;
	color: #000000;
}
.modal-content {
	background-color: #ffffff;
}
.modal-body > div > h4 {
	text-align: center;
}

.modal-header {
	padding: 0;
	height: 40px;
	background-color: #ffffff;
}

.modal-header >button.close {
	background-color: #d6d1ca;
	width: 40px;
	height: 100%;
	margin: 0;
}

.modal-footer {
	padding: 0;
	display: flex;
	height: 50px;
}

.modal-footer >.btn {
	width: 50%;
	height: 100%;
	font-size: 17px;
	border-radius: 0;
}
#modal_dialog_btn_ok {
	margin-left: 0;
	background-color: var(--modal_dialog_btn_ok_bg_color);
	border-radius: 0;
}
#modal_dialog_btn_cancel {
	background-color: #d6d1ca;
	color: unset;
	border: none;
}
hr {
	border-color:#d6d1ca;
}
.text_bolder{
	font-weight: bolder;
}
/*--------------------------------------
  スライダー部
---------------------------------------*/
.range_wrapper {
	padding-top: 40px;
	padding-bottom: 20px;
	padding-inline: 30px;
}

#time_range {
	height: 10px;
}

#time_range .noUi-connect {
	background: var(--noUi_bg_color);
}

#time_range .noUi-handle {
	height: 18px;
	width: 18px;
	top: -5px;
	right: -9px; /* half the width */
	border-radius: 9px;
	background: var(--noUi_bg_color);
	border: solid 1px var(--noUi_bg_color);
	box-shadow: none;
}
#time_range .noUi-handle:after, .noUi-handle:before {
	display: none;
}

#time_range .noUi-tooltip {
	border: 1px solid var(--noUi_bg_color);
	background: var(--noUi_bg_color);
	color: #ffffff;
	padding: 5px;
	font-size: 10px;
	bottom: 160%;
}
#time_range .noUi-tooltip::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top: 5px solid var(--noUi_bg_color);
  }

/*--------------------------------------
  ヘッダ部
---------------------------------------*/
.header_title {
	display: none;
}
.criteria_bg_color {
	background-color: var(--dark_bg_color);
}
.criteria_block {
	padding-block: 45px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.criteria_content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.btn_search_outer {
	width: 100%;
	overflow: visible;
	position: relative;
}
.btn_search {
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-overflow: ellipsis;
	border: none;
	background-color: #ffffff;
	border-radius: 0;
}
.btn_search:hover
,.btn_search:focus {
	color: unset;
}
.btn_search > .icon {
	width: 25px;
	height: 25px;
	margin-inline: 5px;
}
.btn_search > .icon img {
	width: 25px;
	vertical-align: middle;
}
.btn_search > .icon >.glyphicon {
	height: 25px;
	vertical-align: middle;
	font-size: 20px;
}
.legend {
	background-color: var(--dark_bg_color);
	width: 100%;
	min-height: 50px;
	padding-block: 10px;
	display: inline-block;
	width: 100%;
}
.content {
	text-align: center;
	border-radius: 0;
	padding : 10px;
	font-size: 10px;
	line-height: 14px;
}
.legend > .content
{
	background-color: var(--legend_content_bg_color);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	line-height: 25px;
}
.legend > .content > .item > .icon {
	width: 25px;
	height: 25px;
	margin-inline: 5px;
}
.legend > .content  > .item > .icon img {
	width: 25px;
	vertical-align: top;
}
.legend_posfix{
	position: fixed;
	z-index: 999;
	left:0px;
	width:100%;
	padding-top : 26px;
	background-color: var(--dark_bg_color);
}
.bottom_right_triangle {
	padding: 0;
	position: relative;
	overflow: hidden;
}
.bottom_right_triangle:before {
	content: "";
	bottom: 0;
	right: 0;
	border-top: 20px solid transparent;
	border-right: 20px solid var(--accent_color);
	position: absolute;
	z-index: 100;
}
.criteria_content > .btn_search_outer.filter_on> .btn {
	border: solid 1px #ca514f;
	background-color: #f9eaea;
}
.filter_on > .clear_block > .btn_clear:after {
	content: "\e014";
	font-family: 'Glyphicons Halflings';
	position: absolute;
	background-color: #ebe8e596;
	border: solid 1px #ab9d93;
	color: #303030;
	font-size: 20px;
	right: -7px;
	top: 7px;
	z-index: 800;
    cursor: pointer;
}
@media (max-width: 991px) {
	.criteria_block {
		padding-block: 25px;
		padding-inline: 16px;
	}
	.criteria_bg_color {
		background-color: var(--criteria_bg_color_sp);
	}
}
/*--------------------------------------
  検索結果部
---------------------------------------*/
.panel_result {
	padding-block: 16px;
	position: relative;
}
@media (max-width: 991px) {
	.panel_result {
		margin-inline: 16px;
	}
}
/*--------------------------------------
  日付選択部
---------------------------------------*/
.header_select_date {
	background-color: #ffffff;
	font-size: 20px;
	height: 45px;
	line-height: 45px;
}
.header_select_date button {
	background-color: transparent;
	border: 0;
}
.select_date_accent_color {
	color: var(--select_date_accent_color);
}
.header_select_date div {
	align-self: center;
}
.header_select_date_posfix{
	position: fixed;
	z-index: 999;
	left:0px;
	width:100%;
	background: #ffffff;
}
/*--------------------------------------
  スケジュールモーダル部
---------------------------------------*/
div.schedule_filter{
	padding-inline: 10px;
	padding-bottom: 10px;
}
div.filter_clear {
	font-size: 12px;
	text-align: right;
	text-decoration: underline;
	font-weight: normal;
	cursor: pointer;
}
div.filter_clear:hover {
	background-color: transparent;
	text-decoration: none;
}

.input-group > .btn-group.check_btn.schedule_filter > .btn,
.input-group > .btn-group.radio_btn.schedule_filter > .btn {
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 15px;
	text-align: left;
}

.input-group > .btn-group.check_btn.schedule_filter > .btn.not_active,
.input-group > .btn-group.radio_btn.schedule_filter > .btn.not_active
{
	border: solid 1px #d6d1ca;
	background-color: #ffffff;
	color: #303030;
}
.input-group > .btn-group.check_btn.schedule_filter > .btn.highlight.not_active,
.input-group > .btn-group.radio_btn.schedule_filter > .btn.highlight.not_active
{
	border: solid 1px var(--schedule_filter_btn_highlight_active_border_color);
	color: var(--schedule_filter_btn_highlight_active_color);
}
.input-group > .btn-group.check_btn.schedule_filter > .btn.active,
.input-group > .btn-group.radio_btn.schedule_filter > .btn.active
{
	border: solid 1px var(--schedule_filter_btn_active_border_color);
	background-color: var(--schedule_filter_btn_active_bg_color);
	color: #303030;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.input-group > .btn-group.check_btn.schedule_filter > .btn.highlight.active,
.input-group > .btn-group.radio_btn.schedule_filter > .btn.highlight.active
{
	color: var(--schedule_filter_btn_active_accent_color);
}

.input-group > .btn-group.check_btn > .btn.not_active:before,
.input-group > .btn-group.radio_btn > .btn.not_active:before
{
	font-family: 'Glyphicons Halflings';
	content: "\e013";
	font-size: 12px;
	margin-right: 5px;
	color: var(--schedule_filter_btn_not_active_accent_color);
}

.input-group > .btn-group.check_btn > .btn.active:before,
.input-group > .btn-group.radio_btn > .btn.active:before {
	font-family: 'Glyphicons Halflings';
	content: "\e013";
	font-size: 12px;
	margin-right: 5px;
	color: var(--schedule_filter_btn_active_accent_color);
}

.title_label {
	text-align: left;
	padding: 10px;
}

/*--------------------------------------
  カレンダーモーダル部
---------------------------------------*/
.modal-body >.container {
	width: auto;
	padding-left: 0;
	padding-right: 0;
}

.modal-body > .container > form > .target_dates {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 30px;
}

.modal-body > .container > form > .target_dates > .label {
    background-color: transparent;
    font-weight: normal;
    border: solid 1px;
    border-color: #d6d1ca;
    border-radius: 3em;
    color: #000000;
    margin: 5px;
    padding-block: 5px;
    padding-inline: 10px;
}
/*--------------------------------------
  カレンダーピッカー部
---------------------------------------*/
/** レイアウト **/
#calendar{
	position: relative;
	padding-top: 30px;
	padding-inline: 0px;
	font-weight: normal;
}

#calendar > .datepicker-inline{

	width: 100%;
	display: flex;
	justify-content: center;
}
div.datepicker-days > table.table-condensed > thead > tr > th.prev,
div.datepicker-days > table.table-condensed > thead > tr > th.next
{
	overflow: hidden;
	text-indent: -9999px;
	display: block;
}
div.datepicker-days > table.table-condensed > thead > tr > th.prev::before,
div.datepicker-days > table.table-condensed > thead > tr > th.next::before {
	display: block;
	width: 100%;
	text-align: center;
	text-indent: 0;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
	font-weight: normal;
	line-height: 0.7;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

div.datepicker-days > table.table-condensed > thead > tr > th.prev::before {
	content: "\e257";
}
div.datepicker-days > table.table-condensed > thead > tr > th.next::before {
	content: "\e258";
}

div.datepicker-days > table.table-condensed > thead > tr > th.datepicker-switch {
	padding-top: 0;
	pointer-events: none;
	font-weight: normal;
	font-size: 18px;
}

div.datepicker-days > table.table-condensed > thead > tr > th.dow {
	font-weight: normal;
	font-size: 15px;
	border-bottom: solid 2px;
	border-color: #d6d1ca;
}
div.datepicker-days > table.table-condensed > tbody > tr > td.day {
	border-bottom: solid 1px;
	border-color: #d6d1ca;
}

div.datepicker-days > table.table-condensed > tfoot > tr > th.clear {
	position: absolute;
	margin: 0 0 0 auto;
	top: 0px;
	right: 5px;
	left: 0px;
	width: 45%;
	font-size: 12px;
	text-align: right;
	text-decoration: underline;
	font-weight: normal;
}

div.datepicker-days > table.table-condensed > thead > tr > th,
div.datepicker-days > table.table-condensed > tbody > tr > th,
div.datepicker-days > table.table-condensed > tfoot > tr > th,
div.datepicker-days > table.table-condensed > thead > tr > td,
div.datepicker-days > table.table-condensed > tbody > tr > td,
div.datepicker-days > table.table-condensed > tfoot > tr > td {
	padding: 8px;
	font-size: 15px;
}

/** 配色 **/
div.datepicker-days > table.table-condensed > tfoot > tr > th.clear:hover {
	background-color: transparent;
	text-decoration: none;
}

.datepicker table tr td.day:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover {
	background-color: transparent;
}

.datepicker table tr td.day.active, .datepicker table tr td.day.active:hover, .datepicker table tr td.day.active.disabled, .datepicker table tr td.day.active.disabled:hover {
	color: #ffffff;
	background-color: transparent;
	background-image: radial-gradient(circle, var(--datepicker_day_active_bg_color) 50%, transparent 53%);
	border-color: #d6d1ca;
}
div.datepicker-days > table.table-condensed > tbody > tr > td:last-child:not(.new):not(.old).active
,div.datepicker-days > table.table-condensed > tbody > tr > td:first-child:not(.new):not(.old).active{
	color: #ffffff;
}
div.datepicker-days > table.table-condensed > thead > tr > th.dow:last-child, div.datepicker-days > table.table-condensed > tbody > tr > td:last-child:not(.new):not(.old) {
	color: #9f8fca  ;
}
div.datepicker-days > table.table-condensed > thead > tr > th.dow:first-child, div.datepicker-days > table.table-condensed > tbody > tr > td:first-child:not(.new):not(.old) {
	color: #c9504f;
}
.datepicker table tr td.closed {
	color: #999999;
}
.datepicker table tr td.holiday {
	color: #c9504f;
}
.status_label > i.glyphicon {
	color: #d6d1ca;
}

/*--------------------------------------
  週間日付表示部
---------------------------------------*/
.header_week {
	display: flex;
	justify-content: space-between;
	column-gap: 10px;
	background-color: var(--dark_bg_color);
	padding-block: 10px;
}
.header_week > div {
	background-color: white;
	border-radius: 4px;
	padding-block: 2px;
	padding-inline: 10px;
	flex-grow: 1;
	text-align: center;
	font-size: 10px;
}
.header_week > div.active {
	background-color: var(--accent_color) !important;
	color: #ffffff !important;
}
.header_week > div.holiday {
	background-color: #ffffff;
	color: #d79a9a;
}
.header_week > div.sunday {
	background-color: #ffffff;
	color: #d79a9a;
}
.header_week > div.saturday {
	background-color: #ffffff;
	color: #bb9fd1;
}
.header_week > div.closed {
	background-color:var(--closed_bg_color);
	color: #99999999;
}
.header_week_posfix {
	position: fixed;
	z-index: 999;
	left:0px;
	width:100%;
}
/*--------------------------------------
  グリッドカレンダー
---------------------------------------*/
.grid_calendar {
	background-color: var(--dark_bg_color);
}
.grid_calendar > .header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	height: 35px;
}
.header_posfix{
	position: fixed;
	z-index: 999;
	left:0px;
	height: 45px;
	margin-bottom: 10px;
	background-color: #d6d1ca;
}
.grid_calendar > .header > .cell {
	color: white;
	background-color: var(--accent_color);
	text-align: center;
	padding-block: 6px;
}
.grid_calendar > .header > .cell.holiday {
	background-color: #d79a9a;
}
.grid_calendar > .header > .cell.sunday {
	background-color: #d79a9a;
}
.grid_calendar > .header > .cell.saturday {
	background-color: #bb9fd1;
}
.grid_calendar > .header > .cell.closed {
	background-color: #999999;
}
.grid_calendar > .detail {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	padding-block: 10px;
}
.grid_calendar > .detail > .cell {
	display: flex;
	flex-direction: column;
	row-gap: 2px;
}
.grid_calendar > .detail .item {
	background-color: white;
	border-radius: 4px;
	padding: 26px 8px 8px 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-start;
}
.grid_calendar > .detail .item:hover {
	cursor: pointer;
	background-color: #f3f3f3;
}
.grid_calendar > .detail .item.overlay_full::after {
	content: "";
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 4px;
}
.grid_calendar > .detail .item.overlay_src::after {
	content: "";
	background-color: #377975cf;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 4px;
}
.grid_calendar > .detail .item.overlay_full::before {
	position: absolute;
	z-index: 20;
	font-size: 20px;
	padding-block: 5px;
	padding-inline: 15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.grid_calendar > .detail .item.overlay_char_full::before {
	content: "FULL";
	color: white;
}
.grid_calendar > .detail .item .wait_cancel,
.grid_calendar > .detail .item .src{
	display: none;
}
.grid_calendar > .detail .item .wait_cancel > .accent{
	font-weight: bold;
	text-decoration: underline;
	font-size: 16px;
	margin-top: 8px;
}
.grid_calendar > .detail .item.overlay_full .wait_cancel{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: -20%;
	left: 50%;
	transform: translate(-50%, -20%);
	-webkit-transform: translateY(-20%) translateX(-50%);
	z-index: 30;
	color: white;
	text-align: center;
}

.grid_calendar > .detail .item .status_name{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	z-index: 30;
	color: white;
	text-align: center;
	font-size: 20px;
}
.grid_calendar > .detail .item > .period {
	text-decoration: underline;
	text-align: center;
	font-size: 14px;
}
.grid_calendar > .detail .item > .content {
	font-size: 12px;
	min-height: 68px;
}
.grid_calendar > .detail .item > .capacity {
	text-align: right;
	font-size: 10px;
	line-height: 14px;
}
.grid_calendar > .detail .item > .icon {
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	height: 25px;
}
.grid_calendar > .detail .item > .icon img {
	width: 25px;
	vertical-align: top;
}
@media (max-width: 801px) {
	.grid_calendar > .detail > .cell,
	.grid_calendar > .header > .cell
	{
		width: 105px;
	}
}
@media (min-width:802px) and (max-width:991px){
	.grid_calendar > .detail > .cell,
	.grid_calendar > .header > .cell
	{
		width: 125px;
	}
}
@media (max-width: 991px) {
	/*--------------------------------------
	  グリッドカレンダー
	---------------------------------------*/
	.grid_calendar {
		overflow: auto;
	}
	.grid_calendar > .detail .item.full .wait_cancel button {
		padding: 8px;
	}

	.grid_calendar > .detail .item.overlay_full .wait_cancel {
		margin-top: -20%;
	}
	div.header_week {
		display: flex;
	}
	.grid_calendar > .detail {
		gap: 2px;
	}
	.grid_calendar > .detail .item > .content {
		padding: 4px;
		min-height: 68px;
		display: grid;
		place-items: center;
	}
	.grid_calendar > .detail .item.full .wait_cancel i {
		padding: 2px;
		display: none;
	}
}
@media(min-width:992px) {
	div.header_week {
		display: none;
	}
}
@media(max-width: 560px) {
	/*--------------------------------------
	  週間日付表示部
	---------------------------------------*/
	.header_week {
		column-gap: 2px;
	}
	.header_week > div {
		padding-inline: 2px;
	}
}

/*--------------------------------------
	日付絞り込み結果
---------------------------------------*/
.panel_result > .tab_area > .tab-panel > .group_title {
	background: #ffffffff;
	padding: 10px;
	margin-bottom: 5px;
	display: inline-block;
	width: 100%;
	border-radius: 4px;
}
.panel_result > .tab_area > .tab-panel > .lesson_list {
	background: #ffffffff;
	padding: 10px;
	margin-bottom: 10px;
	display: inline-block;
	width: 100%;
	border-radius: 4px;
	position: relative;
}
.lesson_content {
	padding-bottom:3px;
	font-size: 12px;
}
.lesson_content > .bg_color {
	padding: 10px;
	margin-right: 20px;
}
.lesson_content .title {
	padding-bottom:16px;
}
.btn_reserve {
	background-color: var(--btn_reserve_bg_color) !important;
	font-size: 16px;
	height:40px;
	font-family: "NotoSansJp-Medium", sans-serif;
	border-radius: 4px;
}
.btn_reserve, .btn_reserve:focus, .btn_reserve.focus, .btn_reserve:hover, .btn_reserve.hover, .btn_reserve:active:focus, .btn_reserve:active.focus, .btn_reserve:active, .btn_reserve.active {
    background-color: #377975;
    border-radius: 4px;
}
.lesson_list> .icon {
	position: absolute;
	top: 0;
	right: 0px;
	width: 25px;
	height: 25px;
}
.lesson_list > .icon img {
	width: 25px;
	vertical-align: top;
}
/* 一覧項目：日付 */
div.rgrid > div.row > div.data > a,
div.rgrid > div.row > div.data > a:hover,
div.rgrid > div.row > div.data > a:focus
{
	color:initial;
}
button.button-calendar {
	padding: 0px;
	margin: 0px 8px 0px 0px;
	border-radius: 3px;
	background-color: #9f8fca;
}
button.button-calendar > .glyphicon-calendar {
	margin: 0px;
	padding: 7px;
	top: 0;
	background-color: var(--glyphicon_calendar_bg_color);
	color: #ffffff;
	border-radius: 5px;
}
.text_available {
	color: #960707;
}
.ic_status {
	font-size:30px;
	font-weight:bold;
}
/* レッスン状態（背景色） */
.bg_color_reserve_status_able {
	background-color: var(--reserve_status_able_bg_color);
	color: #ffffff;
	border-radius: 3px;
}
.bg_color_reserve_status_few{
	background-color: var(--reserve_status_few_bg_color);
	color: #ffffff;
	border-radius: 3px;
}
.bg_color_reserve_status_wait{
	background-color: #b6aaa2;
	color: #ffffff;
	border-radius: 3px;
}
.bg_color_reserve_status_unable{
	background-color: var(--reserve_status_unable_bg_color);
	color: #ffffff;
	border-radius: 3px;
}
.bg_color_reserve_status_done{
	background-color: #99b49a;
	color: #ffffff;
	border-radius: 3px;
}
.item > .icon.bg_color_reserve_status_able {
	padding: 3px 6px 3px 6px;
}
.item > .icon.bg_color_reserve_status_few{
	padding: 3px 6px 3px 6px;
}
.item > .icon.bg_color_reserve_status_wait{
	padding: 3px 6px 3px 6px;
}
.item > .icon.bg_color_reserve_status_unable{
	padding: 3px 6px 3px 6px;
}
.item > .icon.bg_color_reserve_status_done{
	padding: 3px 6px 3px 6px;
}
@media (max-width: 991px) {
	div.column_status {
		font-size: 12px;
		text-align: center;
		border: 0px;
		border-radius: 3px;
		padding: 8px 28px;
		margin-top:10px;
		margin-left: 0px;
		height:40px;
		width: 230px;
		position: relative;
		line-height: 25px;
		font-family: "NotoSansJp-Medium", sans-serif;
	}
	.btn_reserve {
		margin-top:10px;
		width: 120px;
	}
	.block_btn_dummy {
		width: 120px;
	}
	.btn_area {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 10px;
	}
	.lesson_content {
		padding-bottom:4px;
	}
	/* カレンダースクロール */
	.legend_posfix{
		padding-inline: 16px;
	}
	.header_posfix{
		left: 16px;
		right: 16px;
		overflow-x: auto;
		scrollbar-width: none; // firefox向け
	}
	.header_posfix::-webkit-scrollbar{
		display: none;
	}
	.header_week_posfix{
		padding-inline: 16px;
	}
}
@media(min-width:992px) {
	div.column_status {
		font-size: 12px;
		text-align: center;
		border: 0px;
		border-radius: 3px;
		padding: 8px 28px;
		margin-top:10px;
		margin-left: 20px;
		height:40px;
		width: 200px;
		position: relative;
		line-height: 25px;
		font-family: "NotoSansJp-Medium", sans-serif;
	}
	.btn_reserve {
		margin-top:10px;
		width: 150px;
	}
	/* カレンダースクロール */
	.legend_posfix{
		width:990px;
	}
	.header_posfix{
		width:990px;
	}
	.header_select_date_posfix {
		width:990px;
	}
}