@charset "UTF-8";

#contentArea{
	padding-top: 100px;
	padding-bottom: 140px;
}

/* noConcert */
/* ========================================================================== */
/* コンサートがないときは余白を設ける */
.noConcert:after{
	display: block;
	content: "";
	position: relative;
	width: 100%;
	height: 280px;
}
/* ========================================================================== */
/* noConcert */


/* 年月 & Prev. Month / Next Month */
/* ========================================================================== */

#yearMonth{
	margin: 0px auto;
	width: 130px;	/* 背景画像に合わせる */
	height: 27px;	/* 背景画像に合わせる */
	background-repeat: no-repeat;
}
.debug-mode #yearMonth{ background-color: red; }

#yearMonth.year_2012{ background-image: url(img/year_2012.png); }
#yearMonth.year_2013{ background-image: url(img/year_2013.png); }
#yearMonth.year_2014{ background-image: url(img/year_2014.png); }
#yearMonth.year_2015{ background-image: url(img/year_2015.png); }
#yearMonth.year_2016{ background-image: url(img/year_2016.png); }
#yearMonth.year_2017{ background-image: url(img/year_2017.png); }
#yearMonth.year_2018{ background-image: url(img/year_2018.png); }
#yearMonth.year_2019{ background-image: url(img/year_2019.png); }
#yearMonth.year_2020{ background-image: url(img/year_2020.png); }

#yearMonth.month_01{ background-position: 0px    0px; }
#yearMonth.month_02{ background-position: 0px  -28px; }
#yearMonth.month_03{ background-position: 0px  -56px; }
#yearMonth.month_04{ background-position: 0px  -84px; }
#yearMonth.month_05{ background-position: 0px -112px; }
#yearMonth.month_06{ background-position: 0px -140px; }
#yearMonth.month_07{ background-position: 0px -168px; }
#yearMonth.month_08{ background-position: 0px -196px; }
#yearMonth.month_09{ background-position: 0px -224px; }
#yearMonth.month_10{ background-position: 0px -252px; }
#yearMonth.month_11{ background-position: 0px -280px; }
#yearMonth.month_12{ background-position: 0px -308px; }


#prevNextMonth{
	position: relative;
	margin-top: -20px;
	width: 100%;
	overflow: hidden;	/* 子要素のfloat対策 */
}

	#prevMonth{ float: left;  width: 154px;}
	#nextMonth{ float: right; width: 151px; }
	
	#prevNextMonth a{
		/* imgRep */
		display: block;
		height: 25px;	/* 背景画像に合わせる */
		background-repeat: no-repeat;
		background-image: url(img/prevNextMonth.png);
	}
	.debug-mode #prevNextMonth a{ background-color: yellow; }
	
	#prevMonth a{ background-position: left 0px; }
	#nextMonth a{ background-position: right 0px; }
	
	#prevMonth a:hover{ background-position: left  -25px; }
	#nextMonth a:hover{ background-position: right -25px; }

/* ========================================================================== */
/* 年月 & Prev. Month / Next Month */

/* concertList */
/* ========================================================================== */

#concertList{ margin-top: 100px;	/* #prevNextMonth底辺との間隔 */　}
.debug-mode #concertList{ background-color: orange; }

.concert{
	border: 1px none rgb(204,204,204);
	border-bottom-style: solid;
	color: rgb(128,128,128);
}
.concert:first-child{ border-top-style: solid; }

.android .concert{ border-width: 2px; }

.concert > a{
	display: block;
	position: relative;
	padding: 14px 14px 50px 178px;
}

	/* 通常時 */
	/* ====================================================================== */
	.date{
		position: absolute;	/* 基点: .concert > a */
		left: 30px;
		line-height: 1;
	}
	
	.day{ font-size: 50px; }
	
	.weekday{
		margin-left: 5px;
		font-size: 18px;
	}
	
	.concertTitle{
		font-size: 16px;
		line-height: 24px;
	}
	.android .concertTitle{ background-color: rgb(255,255,255); }
		
	.venue{
		display: table;		/* 上下中央配置用 */
		margin-top: 16px;	/* .concertTitle底辺との間隔 */
		height: 25px;
	}
		
	.venue > span{
		display: table-cell;	/* 上下中央配置用 */
		padding: 0px 10px;		/* 左右の余白 */
		font-size: 12px;
		color: rgb(255,255,255);
		vertical-align: middle;	/* 上下中央配置用 */
		background-color: rgb(128,128,128);
	}
	/* ---------------------------------------------------------------------- */
	/* 通常時 */
	
	
	/* hover時 */
	/* ====================================================================== */
	.concert:hover{
		color: rgb(255,255,255);
		background-color: rgb(128,128,128);
	}
		
	.concert:hover .venue > span{
		color: rgb(128,128,128);
		background-color: rgb(255,255,255);
	}
	/* ---------------------------------------------------------------------- */
	/* hover時 */

/* -------------------------------------------------------------------------- */
/* concertList */