/* 共通定義 */
html,body {
  color: #333;
  font-size: 16px;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

a { font-weight: bold; letter-spacing: 1 }
a:link { color: #333; }
a:visited { color: #333; }
a:hover { color: #999; }
a:active { color: #FFF; }
a img { border: none; }

img { border: none; }

#container {
  margin: 0 auto;
  width: 900px;
  height: 5000px;
  text-align: center;
}

/* 画像共通定義 */
.header {
  width: 800px;
  height: 80px;
}

.content {
  width: 800px;
  height: 600px;
}

/* 要素共通定義 */
#top {
  padding-top: 8px;
  height: 850px;
  position: relative; //弐などのversionクラスを載せるため 
}

#section1 { margin-top: 10px; }
#section2 { margin-top: 200px; }
#section3 { margin-top: 25px; }
.clearfix:after {
 	content: "";
 	clear: both;
 	display: block;
}

#info {
	background: url(../img/detail.png) no-repeat top center;
	width: 880px;
	height: 600px;
	margin: 0 auto;
}

.info_txt {
	padding: 12px;
	font-size: 16px;
	font-weight: bold;
}

.info_left {
	float: left;
	width: 180px;
	padding: 40px 10px 0px 100px;
}

.info_left p {
	font-weight: bold;
	background-color: #EEEEEE;
	opacity: 0.7;	//透過
	border-radius: 10px;
	-webkit-border-radius: 20px;	//タイトルバックのまるめ
	-moz-border-radius: 20px;
	padding: 1px 6px 0px 6px;	//タイトルバックの延ばし方
	margin-right: 10px;	// タイトルバックの右間隔
	margin-bottom: 12px;	//タイトルバックの上下間隔
	width: 8px;	//タイトルバックの引き伸ばし
	text-align :center;
	line-height: 36px;
}

.info_right {
  text-align: left;
  float: left;
  width: 540px;
  padding: 40px 0px 0px 0px;
}

.info_right p {
	font-weight: bold;
	background-color: #EEAAAA;
	opacity: 0.7;	//透過
	border-radius: 10px;
	-webkit-border-radius: 8px;	//タイトルバックのまるめ
	-moz-border-radius: 8px;
	padding: 1px 6px 0px 6px;	//タイトルバックの延ばし方
	margin-right: 10px;	// タイトルバックの右間隔
	margin-bottom: 12px;	//タイトルバックの上下間隔
	width: 8px;	//タイトルバックの引き伸ばし
	text-align :center;
	line-height: 36px;
}

/* アビスとは異なりヘッダ部分に追加する様式＆竹山仕様 */
.info_footer {
	float: left;
	width: 730px;
	padding: 0px 0px 0px 90px;
	margin-top: -575px;	//pタグの上部へ
}

.info_footer p {
	font-weight: bold;
	background-color: rgba(255, 50, 50, 0.7);
	opacity: 0.7;	//透過
	border-radius: 10px;
	-webkit-border-radius: 8px;	//タイトルバックのまるめ
	-moz-border-radius: 8px;
	padding: 1px 6px 0px 6px;	//タイトルバックの延ばし方
	margin-right: 10px;	// タイトルバックの右間隔
	margin-bottom: 12px;	//タイトルバックの上下間隔
	width: 8px;	//タイトルバックの引き伸ばし
	text-align :center;
	line-height: 24px;
}

.little {
	font-size: 12px;
}

.banner {
	border: 1px solid #000;
}

.artwork {
	border: 1px solid #000;
}

.add_relative{
	position: relative;
	width: 800px;
	height: 600px;
	margin: 0 auto;
}

.cdlist_jacket {
	position: absolute;
	/*box-shadow*/
	box-shadow: 5px 5px 10px #000;
	-webkit-box-shadow: 5px 5px 10px #000;
	-moz-box-shadow: 5px 5px 10px #000;
}

.cdlist_up {
	top: 100px;
}

.cdlist_down {
	top: 352px;
}

.cdlist_left {
	left: 47px;
}

.cdlist_center {
	left: 290px;
}

.cdlist_right {
	left: 535px;
}

.cdlist_middleleft {
	left: 168px;
}

.cdlist_middleright {
	left: 413px;
}

.cdlist_hosoku {
	position: absolute;
	top: 150px;
	left: 650px;
}


/*/Twitter/*/

#twit {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;	//重なり
	width: 120px;
	height: 40px;
	padding: 10px;
}


/*/second addclass/*/
.version {
	position: absolute;
	top: 410px;
	right: -38px;
}

/*
==============================================
bounce by http://www.justinaguilar.com/animations/index.html
==============================================
*/

.bounce_logo{
	animation-name: bounce_logo;
	-webkit-animation-name: bounce_logo;	

	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
}

@keyframes bounce_logo {
	0% {
		transform: translateY(0%) scaleY(0.3);
	}
	60%{
		transform: translateY(-100%) scaleY(1.3);
	}
	70%{
		transform: translateY(0%) scaleY(0.75) scaleX(1.25);
	}
	80%{
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		transform: translateY(0%) scaleY(0.85) scaleX(1.15);
	}				
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
	}	
}

@-webkit-keyframes bounce_logo {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.3);
	}
	60%{
		-webkit-transform: translateY(-100%) scaleY(1.3);
	}
	70%{
		-webkit-transform: translateY(0%) scaleY(0.75) scaleX(1.25);
	}
	80%{
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		-webkit-transform: translateY(0%) scaleY(0.85) scaleX(1.15);
	}				
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}		
}