@charset "utf-8";


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

body{  /* 既存のページに組み込む場合は、このbody要素への設定はすべて不要 */
  font-family : "Sawarabi Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Arial, sans-serif;
  color : #454545;
  background : url( ../image/bg-body.png ) repeat 0 0;
  padding : 50px 0;
}

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


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

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;
  border: none;
}

div#business-calendar table tr th,
div#business-calendar table tr td{
  padding : 3px 0;
}


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


div#business-calendar table:first-child{
  margin-top : 0px;
}

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

div#business-calendar table tr{
}

div#business-calendar table tr#year-month th,
div#business-calendar table tr#year-month td{
  padding : 10px 0;
}

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 : 11px;
  display: none;
}

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

div#business-calendar table tr#year-month ul li#prev a:before{
  display : inline-block;
  content : "<";
  line-height : 1;
  margin-right : 5px;
  position : relative;
  top : -1px;
}

div#business-calendar table tr#year-month ul li#next a:after{
  display : inline-block;
  content : ">";
  line-height : 1;
  margin-left : 5px;
  position : relative;
  top : -1px;
}

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


div#business-calendar table tr td{
}

div#business-calendar table th.saturday,
div#business-calendar table td.saturday{
  /* color : #3535ff; */
}

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.holiday{
  background : rgba( 255, 0, 0, 0.1 );
}


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

div#business-calendar p.holiday-string{
  margin-top : 15px;
}

div#business-calendar p.holiday-string:before{
  content : "■ ";
  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 );
  }
}








/* --responsive----------------------------------------------------------------------------------------------------------------------- */

/* 640pixel start */
@media screen and ( max-width : 640px ){


div#business-calendar{
  width : 95%;  /* カレンダーの横幅はここで調整 */
  margin : 0 auto;  /* 既存のページに組み込む場合は、この中央寄せの設定は不要 */
}


}
/* 640pixel end */