@charset "UTF-8";

#headerArea{
	padding-bottom: 230px;	/* 背景画像の高さに合わせる */
	background-image: url(../base_img/headerBg-90.jpg);
}

/* lovalNavi */
/*============================================================================*/

.localNavi li a{ background-image: url(../base_img/localNavi.png); }

#lnavi_concert a  { width: 180px; background-position:    0px 0px; }
#lnavi_rehearsal a{ width: 200px; background-position: -181px 0px; }
#lnavi_interview a{ width: 200px; background-position: -382px 0px; }

#lnavi_concert a:hover  { background-position:    0px -27px; }
#lnavi_rehearsal a:hover{ background-position: -181px -27px; }
#lnavi_interview a:hover{ background-position: -382px -27px; }
/*----------------------------------------------------------------------------*/
/* localNavi */

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

#pageTitle{
	/* imgRep */
	margin: 0px auto;
	padding-bottom: 54px;	/* 背景画像とborder-bottomとの間隔 */
	width: 100%;			/* border-bottomを幅一杯まで広げる */
	height: 28px;			/* 背景画像に合わせる */
	background-repeat: no-repeat;
	background-position: center top;
	border-bottom: 1px solid rgb(204,204,204);
}

.concert   #pageTitle{ background-image: url(../base_img/pageTitle_concert.gif); }
.rehearsal #pageTitle{ background-image: url(../base_img/pageTitle_rehearsal.gif); }
.interview #pageTitle{ background-image: url(../base_img/pageTitle_interview.gif); }


/* videoList */
/*============================================================================*/
#videoList{
	margin: 0px auto;
	margin-top: 30px;	/* #pageTitle底辺との間隔 */
	width: 500px;
}

.video{
	margin-top: 100px;	/* .video同士の間隔 */
	width: 100%;
	box-shadow: 0px 0px 3px 2px rgb(180,180,180);
	background-color: rgb(0,0,0);
}
.video:first-child{ margin-top: 0px; }

.video-player-area{
	display: block;
	position: relative;
	width: 500px;
	height: 344px;
}

.video-player-area.api-ready{ cursor: pointer; }

.video-player-area.after-load{ cursor: auto; }
.video-player-area.after-load:before{ display: none; }

.video-loadBtn{
	content: "";
	position: absolute;	/* 基点: .video-player-area */
	left: 50%;			/* 中央配置 */
	top: 50%;			/* 中央配置 */
	margin-left: -41px;	/* 中央配置 */
	margin-top: -54px;	/* 中央配置 */
	width: 82px;
	height: 108px;
	background: url(../base_img/video-loadBtn.png) no-repeat left top;
	z-index: 10;
	visibility: hidden;
}

.api-ready .video-loadBtn{ visibility: visible; }
.api-ready:hover .video-loadBtn{ background-position: right top; }

.video-curtain{
	position: absolute;	/* 基点: .video-player-area */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0,0,0);
	z-index: 9;	/* .video-loadBtnより背面 */
}


.video-player{
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}
	/* video-info-area */
	/*========================================================================*/
	.video-info-area{
		position: relative;
		padding: 35px 100px 26px;	/* padding-top, padding-bottomはLH考慮 */
		min-height: 57px;
		color: rgb(102,102,102);
		background: url(../base_img/videoInfoFrame.png) no-repeat center 30px;
		background-color: rgb(242,242,242);
	}
	
	.video-info{
		font-size: 14px;
		line-height: 20px;
		text-align: center;
	}
	
	.title{
		padding-bottom: 5px;	/* border-bottomとの間隔 [LH考慮] */
		font-size: 16px;
		line-height: 25px;
		border-bottom: 1px solid rgb(204,204,204);
	}
	
	.title + .video-info{ margin-top: 6px; /* .titleのborder-bottomとの間隔  [LH考慮] */ }
	
		/* comming soon */
		.comming-soon .video-info-area{
			padding-top: 60px;		/* override */
			padding-bottom: 50px;	/* override */
		}
		
		.comming-soon .title{
			font-size: 25px;		/* override */
			line-height: 1em;		/* override */
			padding-bottom: 10px;	/* override */
		}
		
		.comming-soon .text{
			margin-top: 20px;		/* override */
			line-height: 1em;		/* override */
		}
		
	/*------------------------------------------------------------------------*/
	/* video-info */

/*----------------------------------------------------------------------------*/
/* videoList */

/* ========================================================================== */
/* ========================================================================== */

@media print{
	
	.video{
		page-break-inside: avoid;
	}
	
}