@charset "utf-8";


/*--transitionAnimation--*/


body.title #menu_list ul li.title a{
	background-color:#d00;
	color:#fff;
}

/*----------------------------------------
	for PC
----------------------------------------*/


	@media screen and (min-width: 481px){

	/*--------common---------*/




	h2{
		font-size:40px;font-weight:800!important;
		color:#000;
		width:100%;
		text-align:center;
		padding:50px 0 50px;
		text-shadow:-2px -2px #fff,2px -2px #fff,-2px 2px #fff,2px 2px #fff;
	}

	#tab_title{
		width:100%;
		border-bottom:6px solid #000;
	}

	#tab_title a{
		display:inline-block;
		background-color:rgba(0,0,0,0.5);
		padding:10px 20px;
		color:#ddd;
		font-size:16px;
		margin-right:4px;
		float:left;
	}



	#tab_title a.active{
		padding:10px 20px 14px;
		background-color:#000;
		color:#fff;
	}

	#exp_icon{
		text-align:right;
		color:#000;
		margin:10px 0 0;
	}

	#exp_icon span{
		font-weight:bold!important;
		text-shadow:-2px -2px #fff,2px -2px #fff,-2px 2px #fff,2px 2px #fff;
	}

	#exp_icon img{
		width:22px;
		border:3px solid #000;
		margin:0 5px 0 10px;
	}

	.contents{
		width:960px;
		padding:0 20px 100px;
		margin:0 auto 0;
	}

	.contents .inner{
		display:block;
		margin-left:-2%;
	}

	.box.large{
		width:48%;
		float:left;
		margin-left:2%;
		margin-top:2%;
		background-color:rgba(0,0,0,0.8);
	}

	.box{
		width:31.33%;
		float:left;
		margin-left:2%;
		margin-top:2%;
		background-color:rgba(0,0,0,0.8);
	}

	.boxinner{
		padding:7px;
	}

	.box .thum{
		width:100%;
		display:block;
		position:relative;
	}


	.box .thum img{
		width:100%;
		display:block;
	}

	.box .thum .ti{
		font-size:16px;
		font-weight:bold;
		margin-top:18px;
		width:100%;
		padding-bottom:5px;
		border-bottom:1px solid #888;
	}

	.box .thum .txt{
		color:#fff;
		position:absolute;
		top: 0;
		left:0;
		z-index:100;
		width:90%;
		height:90%;
		text-align:left;
		opacity:0;
		padding:5%;
	}

	.box .thum .li{
		width:100%;
		border-bottom:1px solid #888;
		padding:6px 0;
		font-size:12px;
		line-height:150%;
	}



	.box .thum:hover img{
		opacity:0;
	}

	.box .thum:hover .txt{
		opacity:1;
	}

	.box .info{
		display:block;
		padding:7px 0 0;
		position:relative;
	}

	.box .icon{
		display:block;
	}

	.box .icon a{
		width:26px;
		display:block;
		position:relative;
		float:left;
		margin-right:4px;
	}

	.box .icon a.txt{
		width:auto;
		color:#fff;
		padding:3px 0 0 3px;
	}

	.box .icon a.txt:hover{
		color:#d00;
	}

	.box .icon a img{
		display:block;
		width:100%;
	}

	.box .console{
		position:absolute;
		right:4px;
		bottom:0px;
		font-size:9px;
		color:#ddd;
	}

	.box .btnArea {
		position:relative;
	}

	.box .btnArea a{
		display:block;float:left;
		width:49.5%;
		text-align:center;
		background-color:#555;
		margin-top:10px;
		padding:3px 0;
		color:#fff;
	}

	.box .btnArea a:nth-child(2){
		margin-left:1%;
	}

	.box .btnArea a:hover{
		background-color:#d00;
	}





	/*--------common---------*/

}


/*----------------------------------------
	for irregular PC
----------------------------------------*/



/*----------------------------------------
	for SP
----------------------------------------*/

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

	/*--------common sp---------*/


	h2{
		font-size:40px;font-weight:800!important;
		color:#000;
		width:100%;
		text-align:center;
		padding:50px 0 50px;
		text-shadow:-2px -2px #fff,2px -2px #fff,-2px 2px #fff,2px 2px #fff;
	}

	#tab_title{
		width:100%;
		border-bottom:6px solid #000;
	}

	#tab_title a{
		display:block;
		background-color:rgba(0,0,0,0.5);
		padding:3% 2.5%;
		color:#ddd;
		font-size:9px;
		margin-right:3px;
		float:left;
	}

	#tab_title a.active{
		padding:3% 2.5% 4%;
				background-color:#000;
		color:#fff;
	}

	#exp_icon{
		text-align:left;
		color:#000;
		margin:10px 0 0;
	}

	#exp_icon span{
		font-weight:bold!important;
		margin:0 2% 0 1px;
	}

	#exp_icon img{
		width:22px;
		border:3px solid #000;
		margin:0 2px 0 0px;
	}

	.contents{
		width:95%;
		padding:0 0px 100px;
		margin:0 auto 0;
	}

	.contents .inner{
		display:block;
		margin-left:-2%;
	}

	.box.large{
		width:98%;
		float:left;
		margin-top:2%;
		background-color:rgba(0,0,0,0.8);
	}

	.box{
		width:48%;
		float:left;
		margin-left:2%;
		margin-top:2%;
		background-color:rgba(0,0,0,0.8);
	}

	.boxinner{
		padding:7px;
	}

	.box .thum{
		width:100%;
		display:block;
		position:relative;
	}


	.box .thum img{
		width:100%;
		display:block;
	}

	.box .thum .txt{
		color:#fff;
		position:absolute;
		display:none;
		top: 0;
		left:0;
		z-index:100;
		width:100%;
		height:100%;
		text-align:center;
		opacity:0;
	}

	.box .thum .txt div{
		margin-top:50%;
	}

	.box .thum:hover img{
		opacity:1;
	}

	.box .thum:hover .txt{
		opacity:0;
	}

	.box .info{
		display:block;
		padding:7px 0 0;
		position:relative;
	}

	.box .icon{
		display:block;
	}

	.box .icon a{
		width:28px;
		display:block;
		position:relative;
		float:left;
		margin-right:4px;
	}

	.box .icon a.txt{
		width:100%;
		color:#fff;
		display:block;
		padding:4px 0 0px;
	}

	.box .icon a img{
		display:block;
		width:100%;
	}

	.box .console{
		width:100%;
		position:relative;
		font-size:10px;
		margin:5px 0 0;
	}

	.box.large .console{
		position:absolute;
		right:4px;
		width:auto;
		bottom:0px;
		font-size:11px;
	}

		.box .btnArea {
			position:relative;
		}

		.box .btnArea a{
			display:block;float:left;
			width:49.5%;
			text-align:center;
			background-color:#555;
			margin-top:10px;
			padding:5px 0;
			color:#fff;
			font-size:12px;
		}

		.box .btnArea a:nth-child(2){
			margin-left:1%;
		}

		.box .btnArea a:hover{
			background-color:#d00;
		}

	/*--------common---------*/


}