/* 共通定義 */
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: 980px;
  height: 5430px;
  text-align: center;
}

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

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

/* 要素共通定義 */

#top {
  position: relative;	//yurayura実装用
  padding-top: 8px;
  height: 850px;
}

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

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

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

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

.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: 480px;
  padding: 40px 0px 0px 0px;
}

.info_right p {
	font-weight: bold;
	background-color: #f6b86b;
	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;
}

.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;
}

.hosoku_font {
   	text-align:left;
	font-size: 16px;
	font-weight: bold;
	background-color: #f6b86b;
	opacity: 0.9;	//透過
}

/* 今回入れたお遊び */
.deg_1 {
	-webkit-transform: rotate(1deg); /* chrome、safari　*/
	-moz-transform: rotate(1deg); /* firefox　*/
}

.deg_2 {
	-webkit-transform: rotate(2deg); /* chrome、safari　*/
	-moz-transform: rotate(2deg); /* firefox　*/
}

.deg_3 {
	-webkit-transform: rotate(3deg); /* chrome、safari　*/
	-moz-transform: rotate(3deg); /* firefox　*/
}

.deg_5 {
	-webkit-transform: rotate(5deg); /* chrome、safari　*/
	-moz-transform: rotate(5deg); /* firefox　*/
}

.deg_7 {
	-webkit-transform: rotate(7deg); /* chrome、safari　*/
	-moz-transform: rotate(7deg); /* firefox　*/
}

.deg_rev1 {
	-webkit-transform: rotate(-1deg); /* chrome、safari　*/
	-moz-transform: rotate(-1deg); /* firefox　*/
}

.deg_rev2 {
	-webkit-transform: rotate(-2deg); /* chrome、safari　*/
	-moz-transform: rotate(-2deg); /* firefox　*/
}

.deg_rev3 {
	-webkit-transform: rotate(-3deg); /* chrome、safari　*/
	-moz-transform: rotate(-3deg); /* firefox　*/
}

.deg_rev5 {
	-webkit-transform: rotate(-5deg); /* chrome、safari　*/
	-moz-transform: rotate(-5deg); /* firefox　*/
}

.deg_rev7 {
	-webkit-transform: rotate(-7deg); /* chrome、safari　*/
	-moz-transform: rotate(-7deg); /* firefox　*/
}

.index_low {
	z-index: 0;
}

.index_mid {
	z-index: 1;
}

.index_high {
	z-index: 2;
}

.looooop {
   text-align:center;
   line-height:1.4;
   transiton:all 0s ease;/*アニメーションの設定*/
   -webkit-transition: all 0s ease;/*Safari & Chrome */
   -moz-transition: all 0s ease;/*FireFox */
   -ms-transition: all 0s ease;/*IE*/
}

.looooop_pad {
   padding:20px 10px 10px;
   //margin:10px 5px;
}

.looooop:hover{/*マウスオーバー時*/
   animation: kaiten 30s;
   animation-iteration-count: 777;/*アニメーションの繰り返し回数*/
   -webkit-animation: kaiten 30s; /*Safari & Chrome */
   -webkit-animation-iteration-count: 777;/*Safari & Chrome */
}

.looooop_slow:hover{/*マウスオーバー時*/
   animation: kaiten_slow 30s;
   animation-iteration-count: 777;/*アニメーションの繰り返し回数*/
   -webkit-animation: kaiten_slow 30s; /*Safari & Chrome */
   -webkit-animation-iteration-count: 777;/*Safari & Chrome */
}

.looooop_slow_rev:hover{/*マウスオーバー時*/
   animation: kaiten_slow_rev 30s;
   animation-iteration-count: 777;/*アニメーションの繰り返し回数*/
   -webkit-animation: kaiten_slow_rev 30s; /*Safari & Chrome */
   -webkit-animation-iteration-count: 777;/*Safari & Chrome */
}

.gaku_left:hover{/*マウスオーバー時*/
	-webkit-transform: rotate(-2deg); /* chrome、safari　*/
	-moz-transform: rotate(-2deg); /* firefox　*/
}

.gaku_right:hover{/*マウスオーバー時*/
	-webkit-transform: rotate(2deg); /* chrome、safari　*/
	-moz-transform: rotate(2deg); /* firefox　*/
}

@keyframes kaiten {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360000deg); } 
 
}
@-webkit-keyframes kaiten { /*Safari & Chrome */
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360000deg); } 
}

@keyframes kaiten_slow {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(3600deg); } 
 
}
@-webkit-keyframes kaiten_slow { /*Safari & Chrome */
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(3600deg); } 
}

@keyframes kaiten_slow_rev {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(-3600deg); } 
 
}
@-webkit-keyframes kaiten_slow_rev { /*Safari & Chrome */
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(-3600deg); } 
}



/*/Twitter/*/

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

/* 専用定義 */
/* スライドショー定義 */
#topcontroller {
	margin:5px auto;
	width:950px;
	height:960px;
	position:relative;
	//overflow:hidden;
}
#topcontroller div {
	position:absolute;
}
 
#moji1 { top:-2000px; left:5px; }
#moji2 { top:5000px; left:767px; }
#moji3 { width:312px; top:-150px; left:3000px; opacity:0; }
#moji4 { top:3000px; left:153px; }
#moji5 { top:-1000px; left:311px; }
#moji6 { width:1024px; height:1024px; top:0px; left:-100px; opacity:0; }
#moji7 { top:10000px; left:626px; }
#moji8 { top:-777px; left:779px; }
#moji9 { width:1px; height:1px; top:0px; left:-1000px; opacity:0; }
#moji10 { top:7777px; left:193px; }
#moji11 { top:-7777px; left:392px; }
#moji12 { top:2525px; left:580px; }
#moji13 { width:1px; height:1px; top:0px; left:1000px; opacity:0; }
#topcomp { display:none; opacity:0.9;}