@charset "shift_jis";
/* ===================================================================
CSS information

 file name  :module.css
 style info :共通（ナビゲーション、ヘッダー、フッター）
=================================================================== */

/* -----------------------------------------------------------
	#header
		ヘッダー
----------------------------------------------------------- */
#header{
	width:980px;
	margin:0 auto;
}
#header img{
vertical-align:middle;
}
#header h1{
	width:600px;
	margin-top:40px;
	padding-left:5px;
	float:left;
	color:#b00;
	font-weight:normal;
}
#header .top_left{
padding-left:5px;
width:450px;
margin:10px 0 0 0;
float:left;
}
#header .top_center{
padding-left:5px;
width:250px;
margin:10px 0 0 0;
float:left;
}
#header h1 {
margin:0px;
color:#FF6600;
font-weight:normal;
}
#header div.top_right{
	margin:10px 0 0 0;
	width:200px;
	float:right;
}

top_right{
	width:200px;
	float:right;
}


#guideNav2{
	margin-left:70px;
	
}
#guideNav2 #en2{
	width:141px;
	height:28px;
	display:block;
	float:right;
}

#guideNav2 #en3{
	width:141px;
	height:28px;
	display:block;
	float:right;
}
#guideNav2 #en4{
	width:141px;
	height:28px;
	display:block;
	float:right;
}

#guideNav2 #en5{
	width:141px;
	height:28px;
	display:block;
	float:right;
}


/*枠*/
.h_middle{
  width:980px;
  background:url(../include/img/h_middle.gif);
} 
.h_bottom{
  width:980px;
  height:25px;
  margin-top:-4px;
  background:url(../include/img/h_bottom.gif) no-repeat left top;
}
.h_text{
  margin:0 20px -10px 20px;
} 

/*カラ鉄楽曲サーチ　枠*/

.ktsearch{
	width:430px;
	display:inline;
	float:left;
}
.frame-top{
  width:420px;
  height:27px;
  background:url(/img/main/search_top.gif) no-repeat left bottom;
} 
.frame-middle{
  width:420px;
  background:url(/img/main/search_middle.gif);
} 
.frame-bottom{
  width:420px;
  height:14px;
  background:url(/img/main/search_bottom.gif) no-repeat left top;
}
.frame-text{
  margin-left:5px;
  padding-top:5px;
}

.top_gro{
	width:280px;
	float:right;
	display:block;
	text-align:right;
	padding:5px;
}

/*
---------------------test3------------------------
#header3 {
	width:989px;
	margin:auto;
}

#header3 img{
vertical-align:bottom;
}

#header3 .top_left{
padding-left:5px;
width:510px;
margin:40px 0 0 0;
float:left;
}

#header3 .top_center{
padding-left:5px;
width:250px;
margin:40px 0 0 0;
float:left;
}


#header3 h1 {
margin:0px;
color:#FF6600;
font-weight:normal;
}

#header3 div.top_right{
	width:211px;
	float:right;
}

*/

/* -----------------------------------------------------------
	#footer
		フッター
----------------------------------------------------------- */
#footer {
width:960px;
clear:both;
margin:0px auto 0px;
padding-top:30px;
}

#footer_map{
	width:900px;
	clear:both;
	background:#F60;
	text-align:center;
	margin:30px auto;
	color:#666;
}
.footnav{
	float:left;
	width:190px;
	margin:0px 10px;
	text-align:left;	
}
#footer_map ul{
	width: 190px;
	list-style-type: none;
	line-height: 150%;
}
#footer_map li {
	float: left;
	width: 190px;
}
#footer_map a {
	font-size: 13px;
	padding-left: 12px;
}



/***********************footer_test************************/

#footer_test {
width:989px;
clear:both;
background-image:url(../img/share/footer_bg.gif);
background-position:top;
background-repeat:no-repeat;
margin:0px auto 5px;
text-align:center;
padding-top:30px;
color:#666666;
}

#footer_naviarea_test {
	width:960px;
	clear:both;
	background-position:top;
	background-repeat:no-repeat;
	text-align:center;
	margin:5px auto;
	padding-bottom:30px;
	color:#666666;
}

.footnavigation_test{
	float:left;
	width:155px;
	margin-right:5px;
	text-align:left;
	margin-bottom:30px;
}

#footer_naviarea_test ul {
	width: 190px;
	list-style-type: none;
	line-height: 150%;
}
#footer_naviarea_test li {
	float: left;
	width: 190px;
	background-image: url(../img/item/point02.gif);
	background-repeat: no-repeat;
	background-position: 2px 7px;
}
#footer_naviarea_test a {
	font-size: 13px;
	padding-left: 12px;
}

#copyright_area {
width:100%;
background-color:#039;
border-top:#333333 1px solid;
padding:10px 0;
}

#copyright_area #copy {
width:980px;
margin-left:auto;
margin-right:auto;
}
#copyright_area #copy ul{
	width:240px;
	font-size:xx-small;
	overflow:hidden;
	color:#fff;
	margin-bottom:10px;
}
#copyright_area #copy ul li{
	float:left;
	width:120px;
	display:block;
}
#copyright_area #copy ul li.numb{
	float:right;
	clear:both;
}

#copyright_area #copy p {
font-size:xx-small;
color:#FFFFFF;
}

/* -----------------------------------------------------------
	#pagetop
		ページトップへ戻るボタンの設定
----------------------------------------------------------- */
html>body #pagetop {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 500;
}
#pagetop {
	_position: absolute;
	_right: 0;
	_top:expression(eval(document.compatMode &&
	document.compatMode=='CSS1Compat') ?
	documentElement.scrollTop
	+(documentElement.clientHeight-this.clientHeight) - 0
	: document.body.scrollTop
	+(document.body.clientHeight-this.clientHeight) - 0);
	_z-index: 500;
	_margin: 0;
}

/* -----------------------------------------------------------
	#基本設定
----------------------------------------------------------- */

img{
	padding:0;
	margin:0;
}

a img{
	border:none;
}

.float{
	float:left;
}

.floatclear{
	clear:both;	
}

.sarch{
	
}

h1{
	font-size:100%;
}
#toptop{
	display:block;
}


/* -----------------------------------------------------------
	#search
		サイト内　PCマイ歌本
----------------------------------------------------------- */
#search{
width:300px;
float:right;
text-align:right;
position:inherit;
}
input#submit {
border-style:none;
margin:10px 0 10px 5px;
padding:0;
vertical-align:middle;
}
input#Search {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #7F9DB9;
margin:0;
padding:1px 0;
vertical-align:middle;
width:156px;
}
.jp_search{
	padding-top:1px;
	padding-bottom:1px;
	margin:0 auto;
	text-align:center;
	color:#333;
}
.jp_search img{
	margin:0 5px 0 0;
	padding:0;
	vertical-align : middle;
}
.jp_search select, .jp_search input {
	font-size:12px;
	vertical-align : middle;
	padding:1px;
	overflow: visible;
}
.jp_txt{
	vertical-align : middle;
	padding-top:4px;
}
.jp_search button{
	margin:0;
	padding:0 15px;
	color:#FFFFFF;
	background-color:#333333;
	font-size:14px;
	overflow: visible;
}

/* -----------------------------------------------------------
	ul#news03
		お知らせ欄
----------------------------------------------------------- */
ul#news03{
	widht:700px;
	display:none;
}
ul.btns{
	list-style:none;
}
ul.btns li{
	float:right;
	margin:5px;
}


/*	右カラム	*/
.right_box{
	background-color:#fff;
	margin:0 auto 5px auto;
}
.right_box ul{
}
.right_box li{
	clear:both;
}
.right_box li img{
	border:1px #999 solid;	
}
.right_box a{
	display:block;
	margin:10px 5px 0 5px;
	font-size:90%;
	height:100px;
	vertical-align:middle;
}
.right_box img{
	margin-right:5px;
	float:left;
	width:100px;
	height:100px;
}
#right_c li.title{
	width:210px;
	background-color:#333;
	color:#FFF;
}
#right_c a{
	color:#000;
}
#right_c h2 a{
	font-size:100%;
	text-decoration:none;
	text-align:center;
	display:block;
	background:url(/img/main/tenpos_s_btn.gif) no-repeat;
	width:126px;
	line-height:30px;
	padding:0 5px;
	margin:2px auto;
	color:#333;
}
#right_c h2 a:hover{
	color:#F60;
}

#ranktop{
	width:275px;
	overflow:hidden;
	border:1px #CCC solid;
	margin:10px 0;
}
#ranktop p{
	float:right;
	margin:0px;
	font-size:x-small;
}
#ranktop ul{	clear:both;	}
#ranktop ul li{
	background:#ffffff;
	color:#333;
	float:left;
	height:40px;
}
#ranktop ul.iro li{
	background:#efefef;
}
#ranktop ul li.icon01{	width:40px;	}
#ranktop ul li.icon01 img{	
	display:block;
	margin:8px auto;
}
#ranktop ul li.title{
	width:200px;
}
#ranktop ul li.icon02{	width:30px;	}
#ranktop ul li.icon02 img{
	display:block;
	width:13px;
	height:14px;
	margin:8px auto;
}

#ranktop.rightr{
	width:200px;
}
#ranktop.rightr ul li.icon01{	width:30px;	}
#ranktop.rightr ul li.title{		width:150px;	}
#ranktop.rightr ul li.icon02{	width:20px;	}




/* -----------------------------------------------------------
	#menu
		メインメニュー
----------------------------------------------------------- */  
#menu {
	width:940px;
	margin:0 auto;
	padding:0 auto;
	list-style:none;
	z-index:3;
	font-size:14px;
 }   
#menu li{
	display:block;
	width:156px;
	float:left;
	position:relative;
}

#menu a {
	float:left;
	height: 32px;
	padding:0;
	color: #fff;
	text-transform: uppercase;
	font: bold 100% Arial, Helvetica;
	text-decoration: none;
}   

*html #menu li a:hover 

/* IE6 */{
	color: #fafafa;
}
#menu li:hover > ul {
	display: block;
}
/*ver2*/
ul#menu li{
	display:block;
	width:156px;
	height:32px;
	float:left;
	padding:0;
}
ul#menu li:hover{ background-position:bottom left;}
ul#menu li.tenpo{	background-image: url("../img/menu/tenpo_btn.gif");background-repeat:no-repeat; /* 画像ファイル名 */}
ul#menu li.otoku{	background-image: url("../img/menu/otoku_btn.gif");background-repeat:no-repeat; /* 画像ファイル名 */}
ul#menu li.special{	background-image: url("../img/menu/special_btn.gif");background-repeat:no-repeat; /* 画像ファイル名 */}
ul#menu li.event{	background-image: url("../img/menu/event_btn.gif");background-repeat:no-repeat; /* 画像ファイル名 */}
ul#menu li.gakkyoku{	background-image: url("../img/menu/gakkyoku_btn.gif");background-repeat:no-repeat; /* 画像ファイル名 */}
ul#menu li.motto{	background-image: url("../img/menu/motto_btn.gif");background-repeat:no-repeat; /* 画像ファイル名 */}

  
/* サブメニュー */
#menu ul.sub {
	widht:156px;
	list-style: none;
	margin:0 auto;     
	padding: 0px;     
	display: none;     
	position: absolute;     
	top: 32px;     
	left: 0;     
	z-index: 99999;     
	background: #444;     
	background: -moz-linear-gradient(top, #444, #111);     
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));     
	-moz-border-radius: 5px;     
	border-radius: 5px; 
}   

#menu ul.sub li {
	width:156px;    
	float: none;     
	margin: 0;     
	padding: 0;     
	display: block;     
	-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;     
	-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;     
	box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; 
}   

#menu ul.sub li:last-child {     
	-moz-box-shadow: none;     
	-webkit-box-shadow: none;     
	box-shadow: none; 
}   

#menu ul.sub a {     
	padding: 10px;     
	height: auto;     
	line-height: 1;     
	display: block;     
	white-space: nowrap;     
	float: none;     
	text-transform: none; 
}   

*html #menu ul.sub a /* IE6 */{    
	height: 10px;     
	width: 150px; 
}   

*:first-child+html #menu2 ul.sub a /* IE7 */{     
	height: 10px;     width: 150px; 
}   

#menu ul.sub a:hover {     
	background: #0186ba;     
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));     
	background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important;     
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#04acec', endColorstr='#0186ba'); /* IE */
}   

#menu ul.sub li:first-child a {     
	-moz-border-radius: 5px 5px 0 0;     
	border-radius: 5px 5px 0 0; 
}   

#menu ul.sub li:first-child a:after {     
	content: '';     
	position: absolute;     
	left: 32px;     
	top: -8px;     
	width: 0;     
	height: 0;     
	border-left: 5px solid transparent;     
	border-right: 5px solid transparent;     
	border-bottom: 8px solid #444; 
}   

#menu ul.sub li:first-child a:hover:after {     
	border-bottom-color: #04acec; 
}   

#menu ul.sub li:last-child a {     
	-moz-border-radius: 0 0 5px 5px;     
	border-radius: 0 0 5px 5px; 
}   

/* Clear floated elements */
#menu:after {     
	visibility: hidden;     
	display: block;     
	font-size: 0;     
	content: " ";     
	clear: both;     
	height: 0; 
}   
* html #menu { zoom: 1; } 
/* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */ 


#menu_special{
	width:940px;
	height:29px;
	display:block;
	margin:0 auto;
	background:url(../img/menu/special_bottom.gif) no-repeat;
	padding:5px 5px 5px 10px;
	font:bold 110%;
	color:#fff;
}
#menu_special a{	color:#fff;text-decoration:none;	}
#menu_special a:hover{	color:#CCC;	}


/*↑ここまでヘッダーメニュー*/

#music_search{
	width:400px;
	float:right;
	clear:right;
}
.head h2{
	display:block;
	float:right;
	widht:300px;
	color:#fff;
}