@charset "utf-8";
/*
************************************************************************
 ボックス
************************************************************************
*/
.box
{
	box-shadow: 2px 2px 2px 0px #00000022;
	border:1px solid #CCCCCC;
	border-radius:0.5em;
	overflow:hidden;
}
.box > .box-title
{
	padding:0.8em;
	border-bottom:2px solid var(--main-color-01);
	background-color:#ebf1f2;
}
.box > .box-title > .main
{
	font-size:1.2em;
	font-weight:bold;
}
.box > .box-title > button
{
	position:absolute;
	top:50%;
	right:0.8em;
	transform: translateY(-50%);
}

.box > .box-sub-title
{
	margin:1.5em 1em 1em 1em ;
	padding:0.25em 0.5em;
	border-left:2px solid var(--sub-color-01);
}
.box > .box-sub-title > .main
{
	font-weight:bold;
}

.box > .box-footer
{
	padding:0.8em;
	border-top:2px solid var(--main-color-01);
	background-color:#EFEFEF;
	
	display: flex;
	align-items: center;
	align-content: center;
}
.box > .box-footer > *
{
	flex:1 0 auto;
}
.box > .box-footer > .box-footer-left
{
	display: flex;
	align-items: center;
	align-content: center;
	margin:-0.25em;
}
.box > .box-footer > .box-footer-left > *
{
	margin:0.25em;
}
.box > .box-footer > .box-footer-center
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.box > .box-footer > .box-footer-right
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	align-content: center;
}
.box > .box-contents
{
	margin:1.0em;
}

.grid
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin:-0.5em;
}
.grid > *
{
	margin:0.5em;
	flex:0 0 calc(100% - 1em);
}
.grid > *.col-01 {flex: 0 0 calc(  8.33333% - 1em); width:calc(  8.33333% - 1em);}
.grid > *.col-02 {flex: 0 0 calc( 16.66666% - 1em); width:calc( 16.66666% - 1em);}
.grid > *.col-03 {flex: 0 0 calc( 25.00000% - 1em); width:calc( 25.00000% - 1em);}
.grid > *.col-04 {flex: 0 0 calc( 33.33333% - 1em); width:calc( 33.33333% - 1em);}
.grid > *.col-05 {flex: 0 0 calc( 41.66666% - 1em); width:calc( 41.66666% - 1em);}
.grid > *.col-06 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
.grid > *.col-07 {flex: 0 0 calc( 58.33333% - 1em); width:calc( 58.33333% - 1em);}
.grid > *.col-08 {flex: 0 0 calc( 66.66666% - 1em); width:calc( 66.66666% - 1em);}
.grid > *.col-09 {flex: 0 0 calc( 75.00000% - 1em); width:calc( 75.00000% - 1em);}
.grid > *.col-10 {flex: 0 0 calc( 83.33333% - 1em); width:calc( 83.33333% - 1em);}
.grid > *.col-11 {flex: 0 0 calc( 91.66666% - 1em); width:calc( 91.66666% - 1em);}
.grid > *.col-12 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
.grid > *.col-grow{flex: 1 0 auto;}
.grid > *.col-shrink{flex: 0 1 auto;}
.grid > *.grid-center{align-self:center;}

.notice-box
{
	border:1px solid #CCCCCC;
	background-color:#EFEFEF;
	padding:1em;
	display: flex;
}
.notice-box > .eyecatch
{
	padding-right:1em;
}
.notice-box > .eyecatch > .mark
{
	font-size:2.0em;
	line-height:1.2em;
	color:var(--main-color-01);
}
.notice-box > .info
{
	flex:1 1 auto;
	border-left:1px solid #CCCCCC;
	padding-left:1em;
}
.notice-box > .info > .title
{
	margin-bottom:0.5em;
}
.notice-box > .info > .title > .main
{
	font-size:1.6em;
	line-height:1.2em;
	font-weight:bold;
	color:#000000;
}
.notice-box > .info > .description
{
	line-height:1.4;
}
.notice-box > .info > .description > li
{
	margin-bottom:0.5em;
}

.warning-box
{
	border:1px solid #d6b6b6;
	background-color:#fcdede;
	padding:1em;
	display: flex;
}
.warning-box > .eyecatch
{
	padding-right:1em;
}
.warning-box > .eyecatch > .mark
{
	font-size:2.0em;
	line-height:1.2em;
	color:#a32a2a;
}
.warning-box > .info
{
	border-left:1px solid #d6b6b6;
	padding-left:1em;
}
.warning-box > .info > .title
{
	margin-bottom:0.5em;
}
.warning-box > .info > .title > .main
{
	font-size:1.6em;
	line-height:1.2em;
	font-weight:bold;
	color:#781919;
}
.warning-box > .info > .description
{
	line-height:1.4;
}
.warning-box > .info > .description > li
{
	margin-bottom:0.5em;
}
.scroll
{
	overflow-x:scroll;
}

.operation-tab
{
	display: flex;

	border-radius:0.5em;
	border:1px solid #CCCCCC;
}
.operation-tab > *
{
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.operation-tab > button.main
{
	width:auto;
	flex:1 0 auto;
	padding: 1em;
	line-height:1.4;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.operation-tab > button.main > .label
{
	color:#666666;
}
.operation-tab > button.main > i
{
	font-size:1.8em !important;
	color:#999999;
}
.operation-tab > button.sub
{
	width:auto;
	flex:0 1 auto;
	padding: 0.5em;
	line-height:1.4;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.operation-tab > button.sub > i
{
	font-size:1.8em !important;
	color:#999999;
}
.operation-tab > button.sub > .label
{
	font-size:0.8em;
	color:#666666;
}
.operation-tab > button.active,
.operation-tab > button:hover
{
	background-color:#EFEFEF;
}
.operation-tab > button.active > i,
.operation-tab > button:hover > i
{
	color:var(--main-color-01);
}
.operation-tab > button.active > .label,
.operation-tab > button:hover > .label
{
	color:#000000;
}

.balloon
{
	background-color: #FFFFFF;
	padding:0.5em;
	border-radius: 0.0em;
	box-shadow: 2px 2px 5px 1px #00000030;
	position:absolute;
	bottom:calc(100% + 0.25em);
	right:calc(0% - 0.0em);
}
.balloon::after
{
	content:"";
	display: block;

	position: absolute;
	top:100%;
	right:1em;

	width:0px;
	height: 0px;
	border:0.5em solid transparent;
	border-top:0.5em solid #FFFFFF;
	border-left:0.5em solid #FFFFFF;

}

.qrCamera
{
	width:auto;
	height:480px;
	max-height: 100vw;
	margin: 0 auto;
	display: block;
}

.sales-ope
{
	width:100%;
	border-spacing:0px;
	border-collapse:separate;
	border:0px solid transparent;
}
.sales-ope th.ope
{
	width:10em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
}
.sales-ope th.ope .button
{
	width: 100%;
}
.sales-ope td.comment
{
	width:auto;
	padding-bottom: 0.5em;
}

.seat_ticket
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin:-1.0em;
}
.seat_ticket_item
{
	flex:0 0 calc(20% - 2.0em);
	margin:1.0em;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1200px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.sp-scroll
	{
		overflow-x:scroll;
	}

	.grid > *.col-01 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-02 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-03 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-04 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-05 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.col-06 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-07 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-08 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-09 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-10 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-11 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
	.grid > *.col-12 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}

	.grid > *.sp-col-01 {flex: 0 0 calc(  8.33333% - 1em); width:calc(  8.33333% - 1em);}
	.grid > *.sp-col-02 {flex: 0 0 calc( 16.66666% - 1em); width:calc( 16.66666% - 1em);}
	.grid > *.sp-col-03 {flex: 0 0 calc( 25.00000% - 1em); width:calc( 25.00000% - 1em);}
	.grid > *.sp-col-04 {flex: 0 0 calc( 33.33333% - 1em); width:calc( 33.33333% - 1em);}
	.grid > *.sp-col-05 {flex: 0 0 calc( 41.66666% - 1em); width:calc( 41.66666% - 1em);}
	.grid > *.sp-col-06 {flex: 0 0 calc( 50.00000% - 1em); width:calc( 50.00000% - 1em);}
	.grid > *.sp-col-07 {flex: 0 0 calc( 58.33333% - 1em); width:calc( 58.33333% - 1em);}
	.grid > *.sp-col-08 {flex: 0 0 calc( 66.66666% - 1em); width:calc( 66.66666% - 1em);}
	.grid > *.sp-col-09 {flex: 0 0 calc( 75.00000% - 1em); width:calc( 75.00000% - 1em);}
	.grid > *.sp-col-10 {flex: 0 0 calc( 83.33333% - 1em); width:calc( 83.33333% - 1em);}
	.grid > *.sp-col-11 {flex: 0 0 calc( 91.66666% - 1em); width:calc( 91.66666% - 1em);}
	.grid > *.sp-col-12 {flex: 0 0 calc(100.00000% - 1em); width:calc(100.00000% - 1em);}
}