@charset "utf-8";
/*ワークリストページ*/
#worklist {
	text-align: center;
}
#worklist .workbox {
	background-color: rgba(255,255,255,0.60);
	margin-bottom: 3em;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.30);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.30);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 30px;
	text-align: left;
}
#worklist .workbox .mv {
	float: right;
	max-width: 37.5%;
}
#worklist .workbox .logo {
	margin-bottom: 10px;
	max-width: 25%;
}
#worklist .workbox h4 {
	display: none;
}
#worklist .workbox ul {
	width: 60%;
}

#worklist .workbox ul li {
	display: block;
	padding: 5px;
}
#worklist .workbox ul li a {
	display: block;
	text-align: center;
	background-color: rgba(36,62,120,1.00);
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-radius: 1.5em;
	color: rgba(255,255,255,1.00);
	font-size: 150%;
	font-weight: bold;
}

/*CD*/
#cd h5 {
	font-size: 150%;
	padding-left: 1em;
	border-bottom: 1px solid rgba(0,0,0,0.40);
	margin-bottom: 1em;
	margin-top: 1em;
}
#cd .cdbox {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px;
	background-color: rgba(255,255,255,0.35);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.30);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.30);
	margin-bottom: 30px;
}
#cd .cdbox .cdimg {
	float: right;
	margin-left: 15px;
	margin-right: 1em;
}
#cd .cdbox .artist {
	background-color: rgba(75,186,195,0.35);
	padding: 0.2em 1em;
	margin-bottom: 1em;
	margin-top: 1em;
}
#cd .cdbox .title {
	font-size: 150%;
	padding-left: 1em;
	margin-bottom: 1em;
}
#cd .cdbox .info {
	padding-left: 2em;
}
/*タブ*/
.tab {
	clear: right;
}
.tab li {
	display: inline-block;
	padding-left: 1px;
	padding-right: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 3em;
}
.tab li a,
.tab li span {
	display: block;
	text-align: center;
	background-color: rgba(255,255,255,0.60);
	height: 3em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	text-decoration: none;
	font-size: 90%;
	padding-top: 1em;
	position: relative;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.30);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.30);
}
.tab li span {
	text-decoration: none;
	color: rgba(36,62,120,1.00);
	cursor: pointer;
}
.tab li span:hover {
	color: #CC0000;
}

/*作品毎タブ*/
.tab_area,
.tab_area_ft {
	overflow:hidden;
	display:table;
	margin:0;
	width: 100%;
	}
	
.tab_area {
	border-bottom:2px solid rgba(0,0,0,1.00);
	margin-bottom: 10px
	}
	
.tab_area_ft {
	border-top:2px solid rgba(0,0,0,1.00);
	margin-top: 10px
	}
	
.tab_area li,
.tab_area_ft li  {
	/*Tabの装飾*/
	width:20%; 
	height:50px; 
	text-align:center; 
	border-right: 1px dotted #909090; 
	cursor: pointer; 
	vertical-align:middle; 
	display:table-cell;  
	color:#333333;
	background-color:rgba(255,255,255,0.50);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

.tab_area li:hover,
.tab_area_ft li:hover  {
	background-color:rgba(255,255,255,1.00);
	color:#e94545;
}

.all_area { 
	background:#efefef; 
	padding:10px; 
	overflow: hidden;
	}
	
.all_area div.content_area {
	/*Tabの内容を表示するエリアの装飾*/
	background:#ffffff; 
	padding:10px 10px 10px 2px;  
	border-top: 1px dotted #bbbbbb;
	}

.tab_area li.select,
.tab_area_ft li.select {
	/*アクティブタブの装飾*/
	background-color:#ffffff; 
	background-image:none; 
	color:#333333;
	}
	
.tab_area li.select {
	/*アクティブタブの装飾*/
	border-top:5px solid #e94545;
	}
	
.tab_area_ft li.select {
	/*アクティブタブの装飾*/
	border-bottom:5px solid #e94545;
	}
	
.hide {display:none;}


@media screen and (max-width:640px) {
/*ワークリスト*/
#worklist .workbox {
	padding: 30px;
}
#worklist .workbox .mv {
	max-width: 50%;
}
#worklist .workbox .logo {
	max-width: 50%;
}
#worklist .workbox ul {
	clear:right;
	width: 100%;
	padding-top:15px;
}

.tab li {
	width: 25%;
}
section.box {
	margin-top: 3em;
}
}
@media screen and (min-width:641px) and (max-width:800px) {
/*ワークリスト*/
#worklist .workbox {
	padding: 30px;
}
#worklist .workbox .mv {
	max-width: 50%;
}
#worklist .workbox .logo {
	max-width: 50%;
}
#worklist .workbox ul {
	clear:right;
	width: 100%;
	padding-top:15px;
}

.tab li {
	width: 25%;
}
section.box {
	margin-top: 3em;
}
}
@media screen and (min-width:801px) and (max-width:1200px) {
.tab li {
	width: 20%;
}
section.box {
	margin-top: 3em;
}
#worklist dl {
	width: 30%;
	margin-left: 1%;
	margin-right: 1%;
	padding: 1em;
}
}
@media screen and (min-width:1201px) {
.tab {
	clear: right;
}
.tab li {
	width: 20%;
}
section.box {
	margin-top: 3em;
}
#worklist dl {
	width: 30%;
	margin-left: 1%;
	margin-right: 1%;
	padding: 1em;
}
}