@charset "utf-8";

@import url( 'https://fonts.googleapis.com/css?family=Cinzel' );

@font-face {
	font-family : 'FontAwesome';
	src : url( '../font/fontawesome-webfont.eot?v=4.7.0' );
	src : url( '../font/fontawesome-webfont.eot?#iefix&v=4.7.0' ) format( 'embedded-opentype' ),
				url( '../font/fontawesome-webfont.woff2?v=4.7.0' ) format( 'woff2' ),
				url( '../font/fontawesome-webfont.woff?v=4.7.0' ) format( 'woff' ),
				url( '../font/fontawesome-webfont.ttf?v=4.7.0' ) format( 'truetype' ),
				url( '../font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular' ) format( 'svg' );
	font-weight : normal;
	font-style : normal;
}

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


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


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

div#business-calendar table,
div#business-calendar table tr th,
div#business-calendar table tr td{
	border-collapse: collapse;
    border: 1px solid #444;
    text-align: center;
    color: #8c8c8c;
    font-size: 1.2em;
    font-weight: bold;
}

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


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

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

div#business-calendar table tr{
}

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

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

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: #ccc;
	text-decoration : none;
}

div#business-calendar table tr#year-month ul li#prev a:before{
	display : inline-block;
	font-family : FontAwesome;
	text-rendering : auto;
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
	content : "\f053";
	line-height : 1;
	margin-right : 5px;
}

div#business-calendar table tr#year-month ul li#next a:after{
	display : inline-block;
	font-family : FontAwesome;
	text-rendering : auto;
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
	content : "\f054";
	line-height : 1;
	margin-left : 5px;
}

div#business-calendar table tr#year-month ul li a:hover{
	cursor : pointer;
	text-decoration : underline;
	opacity: 0.7;
	-webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}


div#business-calendar table tr td{
}

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

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

div#business-calendar table td.holiday{
	background: rgba(241, 63, 121, 0.2);
}


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

div#business-calendar table+p{
	color: #fff;
}

div#business-calendar table+p span{
	color: rgb(255, 229, 229);
}


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

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 );
	}
}

/*画面幅1200px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){
div#business-calendar table tr th,
div#business-calendar table tr td{
    padding : 10px;  /* 各セルの縦幅はここで調整 */
}
div#business-calendar table, div#business-calendar table tr th, div#business-calendar table tr td {
    font-size: 1.5em;
}
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
div#business-calendar table tr th,
div#business-calendar table tr td{
    padding : 0px;  /* 各セルの縦幅はここで調整 */
}
	
div#business-calendar table,
div#business-calendar table tr th,
div#business-calendar table tr td{
    font-size: 1.5em;
}
	
div#business-calendar table tr#year-month th ul{
    bottom: 0px;
}	
	
}