@charset "utf-8";


/* -- 以下、カレンダー表示領域の設定 - 既存サイトに組み込む場合はここだけを修正すればOK -------------------------------------------------------------------------------- */


div#business-calendar{
	max-width : 520px;  /* カレンダーの横幅はここで調整 */
	margin : 0 auto;  /* 既存のページに組み込む場合は、この中央寄せの設定は不要かも */
	position : relative;/* 前月・次月をクリックした際のローディング画像の位置調整のため必要 */
  display:-ms-flexbox;display:-webkit-flex;display: flex;
}

div#business-calendar table+p {display: none;}


/* -- 以下、カレンダーの枠などの設定 -------------------------------------------------------------------------------- */

div#business-calendar table,
div#business-calendar table tr th,
div#business-calendar table tr td{
	border-collapse : collapse;
	border : 1px solid #cccccc;
	text-align : center;
}

div#business-calendar table tr th,
div#business-calendar table tr td{
  padding : 7px 0;  /* 各セルの縦幅はここで調整 */
}


div#business-calendar table{
	width : 49%;
	margin : 0px 0;
	background : #ffffff;
}

div#business-calendar table + table {margin-left: 10px;}

div#business-calendar table th{
	font-weight : bold;
}

div#business-calendar table tr{
}

div#business-calendar table tr#year-month th{
	position : relative;
}

div#business-calendar table tr#year-month th ul{
	width : 100%;
	list-style-type : none;
	overflow : hidden;
	position : absolute;
	left : 0;
	bottom : 7px;
}

div#business-calendar table tr#year-month ul li#prev{
	float : left;
	margin-left : 5px;
}

div#business-calendar table tr#year-month ul li#next{
	float : right;
	margin-right : 5px;
}

div#business-calendar table tr#year-month ul li a{
	font-weight : normal;
	font-size : 85%;
	color : #004da0;
	text-decoration : none;
}

div#business-calendar table tr#year-month ul li#prev a:before{
	display : inline-block;
	font-family : icomoon;
	content : "\e903";
	line-height : 1;
	margin-right : 5px;
  font-size:10px;font-size:1.0rem;
  transform: rotate(180deg);
}

div#business-calendar table tr#year-month ul li#next a:after{
	display : inline-block;
	font-family : icomoon;
	content : "\e903";
	line-height : 1;
	margin-left : 5px;
  font-size:10px;font-size:1.0rem;
}

div#business-calendar table tr#year-month ul li a:hover{
	cursor : pointer;
	color : #004da0;
	text-decoration : underline;
}


div#business-calendar table tr td{
}

div#business-calendar table th.saturday,
div#business-calendar table td.saturday{
	color : #004da0;
}

div#business-calendar table td.saturday{
	background : rgba( 255, 0, 0, 0.1 );
}

div#business-calendar table th.sunday,
div#business-calendar table td.sunday,
div#business-calendar table td.festival{
	color : #ff3535;
}

div#business-calendar table td.sunday,
div#business-calendar table td.festival{
	background : rgba( 255, 0, 0, 0.1 );
}

div#business-calendar table td.holiday{
	background : rgba( 255, 0, 0, 0.1 );
}


/* -- 以下、「休業日」の文字などの設定 -------------------------------------------------------------------------------- */

div#business-calendar table+p{
}

div#business-calendar table+p span{
	color :  rgba( 255, 0, 0, 0.25 );
}


/* -- 以下、ローディング画像 -------------------------------------------------------------------------------- */

span.loading{
	width : 50px;
	height : 50px;
	border-radius : 50%;
	border-top : 5px solid rgba( 0, 0, 0, 0.15 );
	border-right : 5px solid rgba( 0, 0, 0, 0.15 );
	border-bottom : 5px solid rgba( 0, 0, 0, 0.15 );
	border-left : 5px solid #ffffff;
	-webkit-transform : translateZ( 0 );
	-ms-transform : translateZ( 0 );
	transform : translateZ( 0 );
	-webkit-animation : load-circle 1.0s linear infinite;
	animation : load-circle 1.0s linear infinite;
	position : absolute;
	top : 50%;
	left : 50%;
	margin-top : -25px;
	margin-left : -25px;
}

@-webkit-keyframes load-circle{
	0%{
		-webkit-transform : rotate( 0deg );
		transform : rotate( 0deg );
	}
	100%{
		-webkit-transform : rotate( 360deg );
		transform : rotate( 360deg );
	}
}

@keyframes load-circle{
	0%{
		-webkit-transform : rotate( 0deg );
		transform : rotate( 0deg );
	}
	100%{
		-webkit-transform : rotate( 360deg );
		transform : rotate( 360deg );
	}
}