/* ==========================================
	色のメモ
============================================ */
/*
検索ボックスの色
#b3ae93 濃い茶　
#d3ceb9 薄い茶　

ロゴ
#22259D 紺
#D4B731 黄色

#DBC115 オレンジ
#F2F1D8 薄いオレンジ
#1488EA 青
*/

/* ==========================================
	初期化
============================================ */
html, body, div,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, input, textarea,
blockquote, th, td, p{
	margin:0;
	padding:0;
}

ul, dl {
	list-style-type: none;
}

table {
	border-collapse: collapse; border-spacing:0;
}
img {
	border: 0;
}

input[type="search"] , input[type="text"], input[type="submit"], input[type="button"]{
	/*
	-webkit-appearance: none;
	border-radius: 0;
	*/
}

/* ==========================================
	floatを使った　親要素に指定したら　最後にfloatが解除される
============================================ */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* ==========================================
	レイアウト　のみ行う
============================================ */
html, body {width: 100%;}
.flame {
	min-width: 800px;
	max-width: 950px;
	margin: 0 auto;
}

.header {}
.center {}
	.index_page .main_box{
		float: left;
		width: 65%;
	}
	.index_page .side_box{
		float: right;
		width: 35%;
	}
	
	.info_page .main_box {
		float: left;
		width: 70%;
	}
	.info_page .side_box {
		float: right;
		width: 30%;	
	}
.footer {}




/* ==========================================
	デザイン
============================================ */
body{			
	background: #F1EEE4;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; 
}

	/*リンク装飾*/
	a:hover{
	  	color:#FF4C8C;
		text-decoration:none;
	}
	
	.note {
		font-size: 12px;
		color: #666;
	}

.flame {
	padding: 10px 0;
	background: #fff;
}

.header { margin-bottom: 15px; }
	.log { margin-bottom: 5px;}
	.search_box {
		background: #d3ceb9 url("../img/search_box_bg.png");
		padding: 5px;
		margin-top: 5px; 
		border: 1px solid #b3ae93;
		border-radius: 5px;
		text-align: center;
	}
	
	.search_box form input.keyword {
		/* ボタンと高さをそろえるため　borderをboxに含める*/
		 -webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
		 -o-box-sizing: border-box;
		 -ms-box-sizing: border-box;
		 box-sizing: border-box;
		 
		-webkit-appearance: none;
		border-radius: 0;
			 
		width: 400px;
		height: 30px;
		font-size: 110%;
		padding: 0 5px;
		border: 1px solid #000;	
		vertical-align:middle; 
	}
	
	.search_box form input.search_button {
		-webkit-appearance: none;
		border-radius: 0;
	
		width: 80px;
		height: 30px;
		margin: 0;
		padding: 0;
		border: 1px solid #000;	
		background: #009fe8;
		vertical-align:middle; 
		color: #fff;
	}


.center {}

	.main_box > div {
	
	}
	h1 {
		font-size: 150%;
	}
	
	/*トップページ*/
	.index_page {}
	
		/*タブ*/
		.index_page .top_tab {
			background: #1488EA url("../img/toptab_bg.gif");
			border-radius: 10px 10px 0 0;
			
		}
		.index_page .top_tab ul li {
			display: inline-block;
			padding: 5px 5px 0 5px;
		}
		.index_page .top_tab ul li a{
			display: inline-block;
			width: 6.5em;
			height: 25px;
			text-align:center;
			color: #fff;
			font-size: 100%;
			font-weight:bold;
			border-radius: 5px 5px 0 0;
			padding-top: 5px;
		}
		.index_page .top_tab ul li a:hover,
		.index_page .top_tab ul li a.active{
			background:#C5DFF7;
			color:#0000ff;
		}
		.index_page .about { 
			border-bottom: 1px solid #ccc;
			padding: 3px; 
		}
		.index_page .tab_result { border: 5px solid #C5DFF7; }
		
		
		.index_page .main_box table {
			width: 100%;
		}
		.index_page .main_box table td{
			padding: 5px 10px;
			border-bottom: 1px solid #ccc;
		}
		 .index_page .main_box table td.ranking_number ,
		 .index_page .main_box table td.number  {
		 	width: 2em;
		 }
		 .index_page .main_box table td.thumbnail {
		 	width: 80px;
		 }
		.index_page .main_box table td .song_title { font-size: 120%; }
		
		.index_page .ranking_bar {
		    width: 200px;
		    border: 1px solid #666;
		    padding: 1px;
			font-size: 13px;
		}
		
		.index_page .ranking_bar .bar {
			position: relative;
			background: #1FAD39;
			text-align: left;
			color: #fff;
			height: 1em;
    		line-height: 1em;
			padding: 2px 0;
		}		
		.index_page .ranking_bar .bar span {
			display: block;
			width: 150px;
			position: absolute;
			left: 10px;
			text-shadow: 1px 1px 1px #000;
		}	
		
		.index_page .submit_button {
			font-size: 110%;
			margin: 10px;
		}
		
		/* トップページサイド */
		.index_page .side_box > div {
			margin-left: 10px;
		}
		.index_page .side_box h2 {
			color:#44330D;
			font-size: 110%;
			padding:6px 5px 10px;
			background:url("../img/top_side_headbg.gif") repeat-x bottom;
		}
		
		.notice p {
			line-height: 1.8;
			padding: 10px 0;
		}
		
		.new_lyrics p{
			line-height: 1.8;
			padding: 10px 0;
		}
				
		/*ひらがな索引*/
		.index_page .side_box h3 {
			font-size: 100%;
		}
		
		.kana_list ul li{
			display: inline-block;
			border: 1px solid #ccc;
			margin-bottom: 1px;
			text-align: center;
		}
		.kana_list ul li a {
			display: block;
			width: 44px;
			height: 44px;
			line-height: 44px;
		}
		
		.copyright_organization {
			padding: 10px;
		}

	/*ランキングと履歴*/
	.rireki_page table ,
	.ranking_page table {
		width: 100%;
		text-align: left;
	}
	.rireki_page table td ,
	.ranking_page table td {
		padding: 5px 10px;
		border-bottom: 1px solid #ccc;
		vertical-align: middle;
	}
	.rireki_page .number,
	.ranking_page .ranking_number {
		width: 2em;
		padding: 5px 0;
		margin:0;
	}
	.rireki_page table td.thumbnail,
	.ranking_page table td.thumbnail {
		width: 80px;
	}
	.rireki_page table td .song_title,
	.ranking_page table td .song_title {
		font-size: 120%;
	}

	.rireki_page .submit_button {
		font-size: 110%;
		margin: 10px;
	}
	
	/* 人物とカテゴリの一覧 */
	.category_list_page ul.list li{
		display: inline-block;
		width: 140px;
		vertical-align: top;
		padding: 5px 0;
		margin: 0 5px;
		margin-bottom: 10px;
		border-top: 1px solid #ccc;
		text-align: center;
	}
	.category_list_page ul.list li p{
		font-size: 120%;
	}
	
	.person_list_page ul.list li {
		padding: 5px;
		border-bottom: 1px solid #ccc;
	}
	.person_list_page ul.list li a {
		display: block;
	}
		
	/* 人物とカテゴリの曲の一覧ページ */
	.sub_cat_page {}
		.sub_cat_page h1 {
			font-size: 140%;
		}
		.sub_cat_page form select {
			font-size: 110%;
		}
		.sub_cat_page .sub_cat_ad {
			margin: 20px 0;
		}
			.sub_cat_page .sub_cat_ad > div {
				display: inline-block;
				margin-right: 20px;
			}
		
		
	/* ページング */				
	.paging {
		padding: 5px 0;
		font-size: 110%;
	}
	.paging span{
		display: inline-block;
		border: 1px solid #ccc;
		width: 44px;
		height: 30px;
		text-align: center;
	}
	.paging a {
		display: block;		
	}

	/* 曲一覧テーブル */
	.table_overflow{
		width: 100%;
		overflow: auto; 
		-webkit-overflow-scrolling: touch;
	}
	.song_list_table {
		width: 100%;
		min-height: 100px;
		table-layout: fixed;
		word-wrap:break-word;
	}
	.song_list_table th {
		background: #F2F1D8;
		border-bottom: 2px solid #ccc;
		padding: 5px;
		font-size: 88%;
	}

	.song_list_table th.add_date { width: 60px; }
	.song_list_table th.thumbnail { width: 60px; }
	.song_list_table th.song_title { width: 30%; }
	.song_list_table th.pageview { width: 6em; }
		
	.song_list_table tr:nth-child(odd){
		background: #F3F5F7;
	}

	.song_list_table td {
		padding: 5px;
		border-bottom: 2px dotted #ccc;
	}
	.song_list_table td.pageview{
		text-align: right;
		color: #666;
		min-width: 6em;
	}
	.song_list_table td.song_title {
		font-size: 120%;
	}
		.song_list_table td span.release_date {
			padding: 0 3px;
			font-weight: bold;
			border-radius: 5px;
			font-size: 12px;
		}
	
	/* ソングページ */
	.item_page {}
		.item_page .main_box > div {
			padding: 10px 0;
			border-top: 1px solid #ccc;
		}
		.item_page h1 {
			font-size: 150%;
			margin: 10px 0 10px 0;
			padding:0;
		}
		
		.item_page h2 {
			color:#BB6F01;
			margin-bottom: 5px;
			padding: 2px 0 2px 20px;
			border-left: 4px solid #BB6F01;
			font-weight: normal;
		}
		.item_page .song_image {
			float: left;
			width: 200px;
			margin-right: 10px;
			text-align: center;
		}
		.item_page .person_list_and_other {
			margin-left: 210px;
		}
		.item_page .person_list_and_other_contents {
		}
		
		.item_page .person_list {
			float: left;
			width: 50%
		}
		.item_page .other_list {
			float: left;
			margin-left: 1%;
			width: 49%;
		}
		
		.item_page .main_box > div.song_info{
			border-top: 0;
		}
		.item_page .song_info table {
			border-top: 2px dotted #C6C6C3;
			font-size: 88%; 
			width: 100%;
		}
		.item_page .person_list {}
		.item_page .other{}
				
		.item_page .song_info table th {
			width: 4em;
			text-align: left;
			background: #eee;
			border-bottom:2px dotted #C6C6C3;
			padding: 3px;
			font-weight: normal;
		}
		.item_page .song_info table td{
			border-bottom:2px dotted #C6C6C3;
			padding:5px 10px;
		}
		
		.item_page div.social_button {
			text-align: left;
			padding: 0;
			margin:0;
		}
		.item_page div.social_button ul li {
			display: inline-block;
			vertical-align: bottom;
			padding: 3px 5px;
			margin: 0;
			width: 120px;
			height: 20px;
		}

		/* 歌詞 */
			.lyrics_menu .fontsize {
				text-align: center;
				width: 210px;
				display: inline-block;
			}
			.lyrics_menu .part {
				text-align: center;
				width: 130px;
				display: inline-block;			
			}
			
			.lyrics_menu .fontsize span ,
			.lyrics_menu .part span {
				color: #666;
			}
			.lyrics_menu .fontsize ul {}
			.lyrics_menu .fontsize li ,
			.lyrics_menu .part li {
				width: 44px;
				height: 25px;
				display: inline-block;
				margin: 0 1px;
				background: #ccc;
				padding: 3px 0;
				text-align: center;			
				border-bottom: 4px solid rgba(0,0,0,0.2);
				border-radius: 6px;	
				vertical-align: top;
			}
			.lyrics_menu .fontsize li.active ,
			.lyrics_menu .part li.active {
				background: #009fe8;
				color: #fff;
				border-bottom: 3px solid rgba(0,0,0,0.2);
				margin-top: 1px;
			}
			.lyrics_menu .fontsize li:active ,
			.lyrics_menu .part li:active { /* ボタン表現 */
				padding-top: 5px;
				padding-bottom: 1px;		
			}
			
			

			.item_page .parent_lyrics {
				margin: 20px 0 40px 0;
				margin-right: -180px;
				width: 100%;
				float: left;
			}
			.item_page .lyrics {
				line-height: 1.8;
				margin-right: 180px;
				min-height: 400px;
				word-wrap: break-word; /*折り返し*/
			}
			/* パートわけ人物 */
			.item_page .lyrics table {
				width: 100%;
				word-break: break-all; /*テーブル内では無理やり折り返し*/
			}
			.item_page .lyrics table th{
				vertical-align:top;
				text-align:left;
				font-weight:normal;
				padding-right:10px;
				}		
			/* パート内容 */
			.item_page .lyrics table td{
				vertical-align:top;
				text-align:left;
				min-width:6em;
				}
			
			.item_page .lyrics_part_color {
				font-weight: bold;
			}
			.item_page .lyrics_part_color table th {
				font-weight: bold;
			}
					
		.item_page .youtube table td{
			padding: 5px;
			word-break: break-all; 
		}
		
		.item_page .ad {
			width: 160px;
			float: right;
		}
		.item_page .ad2 {
			text-align: left;
		}
			.item_page .ad2 > div { /*スマホ対応の時 marginをなくす*/
				display: inline-block;
				margin-right: 20px;
			}
		.item_page .ad3 {
			text-align: left;
		}
				
		.item_page .ranking {
			min-height: 400px;
		}
		.item_page .item_ranking {
			display: inline-block;
			width: 100px;
			vertical-align: top;
		}
		.item_page .item_ranking_name {
			padding: 5px 0;
			font-size: 120%;
			word-break: break-all;			
		}
	
	/*インフォメーションページ*/
	.info_page > div p {
		margin: 5px 0 10px 0;
		line-height: 2;
	}
	.info_page h1, .info_page h2{
	    position: relative;
		padding: 3px 5px;
	    font-size: 130%;
		border-bottom: 2px dotted #ccc;
	}
	.info_page ul li {
		margin: 5px 0;
	}
	.info_page ol {
		margin-left: 30px;
	}


.footer {
	margin-top: 20px;
	border-top: 4px solid #ECB22A;
}
	.footer .nav {
		margin: 20px 0;
	}
	.footer .change_site_mode {
		width: 250px;
		height: 50px;
		font-size: 20px;
		margin:5px;
		-webkit-appearance: none;
	}




/* ==========================================
	レスポンシブの予定
============================================ */
	.flame > div {
		padding: 0 30px;
	}
	.sp_info {
		display: none;
	}