@charset "UTF-8";

@keyframes tabAnim{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

.tab_wrap{
	width:800px;
	margin:80px auto;
#	margin:10px auto;
}


input[type="radio"]{
	display:none;
}

.tab_area{
	font-size:0;
	padding:0 10px;
}

.tab_area label{
	width:135px; 
	font-size: 16px;
	display:inline-block; 
	padding:14px 0 12px; 
	margin:5px 5px 0;
	color:#fff; 
	background:#90c9cc;
	text-align:center; 
	cursor:pointer; 
	transition:ease 0.2s opacity; 
	border-top-left-radius:10px; 
	border-top-right-radius:10px; 
	vertical-align:bottom; 
	transition:ease 0.2s; 

}

.tab_area label:hover{
	opacity:0.5;
}


.tab_panel{
	width:97%;
	opacity:0;
	padding:20px 10px;
	display:none;
	background:#d7e9ea;

}


.tab_panel p{
	font-size:14px;
	letter-spacing:1px;
	text-align:center;
}


.panel_area{
	background:#d7e9ea;
	#background:#d7e9ea;
	border-bottom-right-radius:10px; 
	border-bottom-left-radius:10px; 
	border-top:8px solid #d7e9ea;
}

#tab1:checked ~ .tab_area .tab1_label{
	background:#d7e9ea;
	color:#000;
}

#tab1:checked ~ .panel_area #panel1{
	display:block;
	animation:tabAnim ease 0.6s forwards;
	-ms-animation:tabAnim ease 0.6s forwards;
}

#tab2:checked ~ .tab_area .tab2_label{
	background:#d7e9ea;
	color:#000;
}

#tab2:checked ~ .panel_area #panel2{
	display:block;
	animation:tabAnim ease 0.6s forwards;
	-ms-animation:tabAnim ease 0.6s forwards;
}

#tab3:checked ~ .tab_area .tab3_label{
	background:#d7e9ea;
	color:#000;
}

#tab3:checked ~ .panel_area #panel3{
	display:block;
	animation:tabAnim ease 0.6s forwards;
	-ms-animation:tabAnim ease 0.6s forwards;
}

#tab4:checked ~ .tab_area .tab4_label{
	background:#d7e9ea;
	color:#000;
}

#tab4:checked ~ .panel_area #panel4{
	display:block;
	animation:tabAnim ease 0.6s forwards;
	-ms-animation:tabAnim ease 0.6s forwards;
}

#tab5:checked ~ .tab_area .tab5_label{
	background:#d7e9ea;
	color:#000;
}

#tab5:checked ~ .panel_area #panel5{
	display:block;
	animation:tabAnim ease 0.6s forwards;
	-ms-animation:tabAnim ease 0.6s forwards;
}

#tab6:checked ~ .tab_area .tab6_label{
	background:#d7e9ea;
	color:#000;
}

#tab6:checked ~ .panel_area #panel6{
	display:block;
	animation:tabAnim ease 0.6s forwards;
	-ms-animation:tabAnim ease 0.6s forwards;
}
.song_data li{
	margin-bottom:0.2em;
	word-wrap: normal;
}


/**************************************************
モバイル対応
***************************************************/

@media screen and (max-width:767px) {

	.tab_wrap{
		width : 100%;
		margin: 0 0 10px 0;
	}

	.tab_area{
		padding:0 4px;
	}

	.tab_area label{
		width:86px; 
		padding:6px 0 4px;
	}

	.tab_area label:hover{
		opacity:1.0;
	}

	.panel_area .tab_panel {
		width : 95%;
	}
}

/*パネル内のリスト修飾*/

.genre_name,.genre_name li,
.arranger_name,.arranger_name li,
.song_name,.song_name li,
.genre_name,.genre_name li{

	list-style-type: none;
}

@media screen and (max-width:767px) {

	.song_data li{
		margin-bottom:1em;
		word-wrap: normal;
		margin-left:0;
		list-style-type: none;
	}

}