@charset "UTF-8";

/******************************************/
/*　　　　　　
/******************************************/

/*** 共通 ***/

.calendar {
  display: table;
	border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;
}

.calendar > .col-one-seventh {
	display: table-row;
}

.calendar > .col-one-seventh > div {
	display: table-cell;
}

/*** 枠線 ***/
/* 枠線が重ならないようにボーダーは以下のように指定する */

/* 曜日部分は上のボーダーだけ表示 */
.calendar > .yobi {
	border-top: solid 1px #000;
}

/* 日の曜日部分は四方をボーダーで囲う */
.calendar > .col-one-seventh > div:nth-child(1) {
	border: solid 1px #000;
}

/* 日以外の曜日部分は左のボーダーだけ消す */
.calendar > .col-one-seventh > div:not(:nth-child(1)) {
	border: solid 1px #000;
  border-left: none;
}

/* 日曜の日付部分は上のボーダーだけ消す */
.calendar > .col-one-seventh > div:nth-child(1) {
	border: solid 1px #000;
  border-top:none;
}

/* 日曜以外の日付部分は上と左のボーダーを消す */
.calendar > .col-one-seventh > div:not(:nth-child(1)) {
	border: solid 1px #000;
  border-top:none;
  border-left:none;
}

/*** 年月 ***/
.calendar h3 {
	margin: 30px 0px 10px;
	font-size: 1.5em;
	text-align: center;
  border: none;
}

/*** 曜日部分 ***/
.calendar > .yobi {
  background-color: #e8e8e8;
  text-align: center;
	font-weight: bold;
}

/*** 日付部分 ***/
.col-one-seventh > div > div {
  color: #000;
}

.cal-day p {
  padding: 0px 10px;
  font-weight: bold;
  margin: 0px;
}

/*** 予定の数に応じて、表示させる背景画像が変わる ***/
.calendar img {
  display: block;
  margin: 10px auto;
  width: 25%;
}

/*** 日曜日の曜日と日付を赤色で表示 ***/
.calendar > .col-one-seventh > div:nth-child(1),
.col-one-seventh > div:nth-child(1) > p {
	color: #ff0000;
}

/*** 土曜日の曜日と日付を青色で表示 ***/
.calendar > .col-one-seventh > div:nth-child(7),
.col-one-seventh > div:nth-child(7) > p {
	color: #0000ff;
}