@charset "utf-8";
/******************************************************
@top.css
Copyright (c) ULM Co.,Ltd. - http://www.ulm-design.com
******************************************************/
body {
	width: 100%;
	background: #fff;
	color:#000;
}
#top{
	position: relative;
	min-width: 1280px;
	margin: 0 auto;
	background: #000;
}
.contentsInner{
	position: absolute;
	z-index: 2;
	top: 0px;
}
.main{
	position: relative;
	z-index: 0;
}
.mainImg{
	position: absolute;
	z-index: 1;
	top: 0px;
}
.main0{
	z-index: 2;
	opacity: 0;
}
.main1{
	z-index: 1;
	opacity: 0;
}
.mainHousou{
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 0px;
}
.mainCopy{
	position: absolute;
	z-index: 3;
	top: 0px;
	left: 0px;
}
.copyOuter{
	position: absolute;
	z-index: 3;
    position: absolute;
    z-index: 3;
    height: 0%;
    overflow: hidden;
}
.mainBg{
	/*position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	right: 0px;*/
}
.contentsLeft{
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 20px;
}
.contentsRight{
    position: absolute;
    z-index: 10;
    top: 0px;
    right: 0px;
    padding: 20px;
    overflow: hidden;
}
.ttl{
	margin: -10px 0 0 10px;
}
.hiroTxt{
	padding: 10px 0 0 20px;
}
/*----------
navi
----------*/
.topNaviContainer{
	width: 290px;
	height: 785px;
	background: url(../img/top/navi_bg.png) no-repeat;
	background-size: 100% 100%;
	font-family: "FOT-筑紫A丸ゴシック Std D", "TsukuARdGothicStd-D";
}
.topNavi{
	width: 280px;
	margin: 0 auto;
   padding: 30px 0;
}
.topNavi li a{
	color: #fff;
	text-align: center;
	font-size: 16px;
	display: block;
	padding: 15px 0;
	text-shadow: 1px 1px 2px rgba(5,45,64,0.8);
	position: relative;
}
.topNavi li a:not(.coming):hover{
	text-shadow: 0px 0px 5px rgba(83,185,232,0.8);
}
.topNavi li a.coming{
	cursor: default;
	opacity: 0.5;
}
.topNavi li a:after{
	content: "";
	display: block;
	width: 217px;
	height: 10px;
	background: url(../img/top/under.png);
	
    bottom: -5px;
    left: 31.5px;
    position: absolute;
}
.topNavi li:nth-last-child(1) a:after{
	display: none;
}
.topNavi li a span{
	display: block;
	font-size: 14px;
}
/*********************************
*********************************/
/*----------
player
----------*/
.movieContainer{
	position:relative;
	z-index: 1;
}
.movieContainer:after{
	content: "";
	display: block;
	width: 128px;
	height: 382px;
	background: rgba(255,120,0,0.7);
	transform: rotate(45deg);
	position: absolute;
    top: -140px;
    left: 180px;
	z-index: -1;
}
.movieTtl{
	text-align: center;
	padding: 0 0 2px 0;
}
.movieThumb{
	position:relative;
	z-index:1;
	width:302px;
	height:170px;
	margin:0 auto;
	cursor:pointer;
	background:url(http://i.ytimg.com/vi/ljJbLofRaaM/maxresdefault.jpg) no-repeat;
	background-size: cover;
	background-position:1px 1px;
}
.movieStart{
	position:absolute;
	z-index:5;
	top:50%;
	left:50%;
	width:67px;
	height:67px;
	margin:-33px 0 0 -33px;
	opacity:0;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.movieThumb:hover .movieStart{
	opacity:0.8;
}
.movieFrame{
	width:300px;
	height:168px;
	border: 2px solid #ff7800;
	position:absolute;
	z-index:2;
	top:0px;
	left:0px;
}
.playerOuter{
	width:300px;
	height:168px;
	position:absolute;
	z-index:0;
	top:2px;
	left:2px;
	overflow:hidden;
}
#player{
	width:300px;
	height:368px;
	margin-top:-100px;
}
.twitterContainer{
	    position: relative;
    z-index: 0;
    text-align: center;
    padding: 50px 0 0 0;
}
.twitterContainer:after{
	content: "";
	display: block;
	width: 128px;
	height: 612px;
	background: rgba(155,234,212,0.7);
	transform: rotate(45deg);
	position: absolute;
    top: -255px;
    left: 180px;
	z-index: -1;
}
.twTtl{
	padding: 0 0 3px 0;
	
}
.twWidget{
	width: 300px;
    border: 2px solid #73ead4;
    background: rgba(255,255,255,0.8);
}
.twLinkBtn{
	width: 300px;
	height: 40px;
	line-height: 40px;
	border: 1px solid #fff;
	text-align: center;
	margin: 10px 0 0 0;
}
.twLinkBtn a{
	display: block;
	color: #3892d8;
	background: rgba(255,255,255,0.2);
}
.twLinkBtn a:hover{
	background: #3892d8;
	color: #fff;
}
.iconBanner{
	width: 304px;
	margin: 5px 0 0 0;
}
.iconBanner a{
	display: block;
	margin: 0 0 0 -20px;
}
.iconBanner:hover, .retwBanner:hover{
	opacity: 0.6;
}