@charset "UTF-8";

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

/* コンサート名 */
#concertTitle{
	font-size: 21px;
	line-height: 30px;
}
.android #concertTitle{ background-color: rgb(255,255,255);	 /* 自動改行対策 */ }

/* PROGRAM INFO */
#programInfo{
	/* imgRep */
	margin-top: 100px;	/* 先行する.sectionWrapper底辺との間隔 */
	width: 294px;		/* 背景画像に合わせる */
	height: 19px;		/* 背景画像に合わせる */
	background: url(base_img/programInfo.png) no-repeat left top;
}

/* 各情報 */
.sectionWrapper{ margin-top: 50px; }

.section{
	position: relative;
	padding: 15px 14px 35px 225px;
	font-size: 14px;
	line-height: 21px;
	border: 0px solid rgb(204,204,204);
	border-bottom-width: 1px;
}
.section:first-child{ border-top-width: 1px;  }

.mobileDevice .section{ border-bottom-width: 2px; }
.mobileDevice .section:first-child{ border-top-width: 2px;  }

.android .section *{ background-color: rgb(255,255,255);	/* 児童改行対策 */ }

/* 各情報の見出し [日時/会場など] */
.sectionHeading{
	position: absolute;
	left: 37px;
	color: rgb(128,128,128);
}

.subsectionHeading:before,
.subsectionHeading:after { content: "―"; }

.subsectionHeading:before{ padding-right: 0.5em; }
.subsectionHeading:after { padding-left: 0.5em }

/* サブセクション */
.subsection{ margin-top: 21px; /* subsection同士の間隔 */　}
.sectionHeading + .subsection{ margin-top: 0px; }

/* テキスト */
.text{ text-align: justify; }
.text a{
	color: rgb(191,191,191);
	text-decoration: underline;
}


/* 一覧 */
.list{}
.debug-mode .list{ background-color: orange; }

.label:before{ content:"【"; }
.label:after { content:"】"; }

.label{
	text-align: left;
	vertical-align: top;
	min-width: 5em;
}

.info {
	text-align: left;
	vertical-align: top;
	word-break: break-all;
	word-wrap: break-word;
}

.info a{
	float: left;
	color: rgb(191,191,191);
	text-decoration: underline;
}


/* セクション内の備考 */
* +.remarks{ margin-top: 21px; }
.remarks + .remarks{ margin-top: 0px; }


	/* 日時 */
	/* ====================================================================== */
	#time{ overflow: hidden;	/* 子要素のfloat対策 */ }
	#time .label{ float:left; min-width: 0px; }
	#time .info{ float: left; margin-right: 1em;　/* 後続する.labelとの間隔 */	}

	/* 会場 */
	/* ====================================================================== */
	#toMapArea{
		color: rgb(128,128,128);
		text-decoration: underline;
		cursor: pointer;
	}

	/* チケット販売状況 */
	/* ====================================================================== */
	#availabilityArea .text{ color: rgb(193,39,45); }

	/* 備考 */
	/* ====================================================================== */
	#remarksArea .text + .text{ margin-top: 21px; }

	/* アクセス */
	/* ====================================================================== */
	#mapWrapper{
		position: relative;
		width: 475px;
		height: 303px;
	}

	/* androidの児童改行対策として全要素に指定したbackground-colorを継承しないよう要明示 */
	.android #mapWrapper *{ background-color: transparent; }

	#toGmap{ display: inline-block; margin-top: 15px; /* #mapWrapper底辺との間隔 */ }

	/* 曲目 */
	/* ====================================================================== */
	#programList .piece + .composer{
		margin-top: 21px;
	}

	/* 演奏 */
	/* ====================================================================== */
	#ensembleList .name + .part{
		margin-top: 21px;
	}

	/* ポスター */
	/* ====================================================================== */
	#poster > img{
		max-width: 100%;
		height: auto;
	}

/* goToProgramInfo */
#goToProgramInfo{
	position: absolute;
	top: 35px;
	right: 0px;
	width: 140px;	/* 背景画像に合わせる */
	height: 40px;	/* 背景画像に合わせる */
	text-indent: -9999px;	/* 画像置換 */
	overflow: hidden;		/* 画像置換 */
	background: url(base_img/toProgramInfo.png) no-repeat left top;
	cursor: pointer;
}

#goToProgramInfo:hover{
	background-position: left bottom;
}