@charset "utf-8";
/* CSS Document */

/***************************************************
	mv css
***************************************************/


#mvWrap{
	margin:1px auto 6px;
	width:980px;
	height:370px;
	position:relative;
}

.mv01,.mv02,.mv03,.mv04,.mv05,.mv06.mv07.mv08,.mv09,.mv10{
	width:980px;
	height:370px;
	position:absolute;
	top:0px;
	left:0px;
}

.hide{
	display:none;
}

.mv01 .outer{
    position:absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    display: table;
    height: 370px;

}

.mv01 .inner{
    text-align:right;
    color:#fff;
    display: table-cell;
    vertical-align: bottom;
    padding-right: 50px;
}

.mv01 .inner h2 .traks{
	font-size:90px;
	font-weight:bold;
	text-shadow:1px 1px 3px #000;
	-webkit-text-shadow: 1px 1px 3px #000;
	-moz-text-shadow: 1px 1px 3px #000;	
	padding-right:5px;
	line-height:1;
}

.mv02 .inner,
.mv03 .inner,
.mv04 .inner,
.mv05 .inner,
.mv06 .inner,
.mv07 .inner,
.mv08 .inner,
.mv09 .inner,
.mv10 .inner{
	position:absolute;
	top:100px;
	right:15px;
	text-align:right;
	color:#fff;
}

/* h2 明朝テキスト表示用追加CSS */
.mv02 .inner h2,
.mv03 .inner h2,
.mv04 .inner h2,
.mv05 .inner h2,
.mv06 .inner h2,
.mv07 .inner h2,
.mv08 .inner h2,
.mv09 .inner h2,
.mv10 .inner h2{
	font-size:30px;
	line-height:1.4;
	 text-shadow: 2px 2px 0 #000;
	-webkit-text-shadow: 2px 2px 0 #000;
	-moz-text-shadow: 2px 2px 0 #000;
	margin-bottom:5px;
	font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝","Times New Roman",Times,serif;
}


.inner p{
	margin-bottom:20px;
}

.inner .btn a{
	color:#fff;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	background:#e0bd63;
	box-sizing:border-box;
	border:none;
	border-bottom:3px solid #bb983e;
	padding:10px 40px;
}

.inner .btn a:hover{
	position:relative;
	top:3px;
	border-bottom:none;
}

/*ログインボックス*/
#loginBox{
	position:absolute;
	top:50px;
	left:0px;
	width:200px;
	background:#000;
	border-top:5px solid #ed2d00;
	z-index:9999;
}

#loginBox .ttl{
	text-align:center;
	padding:8px 5px 5px 5px;
	border-bottom:1px solid #666;
	margin-bottom:15px;
	color:#fff;
	font-weight:bold;
}

#loginBox div{
	padding:5px 10px;
	text-align:right;
}

#loginBox .login,
#loginBox .pass{
	width:168px;
	padding:5px;
	text-align:left;
	border:1px solid #f8f8f8;
}

#loginBox .login:focus,
#loginBox .pass:focus{
	outline: none;
	background:#ffffcc;
	border:1px solid #f8f8f8;
}

#loginBox .btn{
	width:180px;
	padding:5px;
	background:#e0bd63;
	box-sizing:border-box;
	border:none;
	border-bottom:2px solid #bb983e;
	color:#fff;
}

#loginBox .btn:hover{
	border-top:2px solid #000;
	border-bottom:none;
}

#loginBox .lost{
	padding:0 10px;
	margin-bottom:15px;
}

#loginBox .lost a{
	color:#fff;
	font-weight:bold;
	font-size:11px;
	line-height:1;
}

#loginBox .lost a:hover{
	text-decoration:none;
}

#loginBox .register{
	padding:0;
}

#loginBox .register a{
	display:block;
	text-align:center;
	text-decoration:none;
	width:200px;
	padding:8px 10px 7px;
	background:#e0bd63;
	box-sizing:border-box;
	border:none;
	border-bottom:2px solid #bb983e;
	color:#fff;
	font-weight:bold;
	font-size:16px;
	-moz-text-shadow:1px 1px 0px #bb983e;
	-webkit-text-shadow:1px 1px 0px #bb983e;
	text-shadow:1px 1px 0px #bb983e;
}


#loginBox .register a:hover{
	border-top:2px solid #000;
	border-bottom:none;
}

/*ログイン中*/
#loginNowBox{
	position:absolute;
	top:50px;
	left:0px;
	width:200px;
	background:#000;
	color:#fff;
	font-size:12px;
	padding-bottom:10px;
	border-top:5px solid #e0bd63;
	border-bottom:5px solid #e0bd63;
	text-align:center;
	z-index:9999;
}

#loginNowBox .ttl{
	text-align:center;
	padding:8px 5px 5px 5px;
	border-bottom:1px solid #666;
	margin-bottom:15px;
	color:#fff;
	font-weight:bold;
	font-size:14px;
}

#loginNowBox .ttl+div+div a{
	color:#fff;
}

#loginNowBox .ttl+div+div a:hover{
	text-decoration:none;
}


/***************************************************
	newsTikker css
***************************************************/

#newsTikker{
	width:960px;
	margin:0 auto 10px;
	background:#fff;
}

#newsTikker h3{
	font-size:12px;
	font-weight:bold;
	color:#f85151;
	float:left;
	margin-right:20px;
	width:50px;
	text-align:right;
}

#newsTikker ul{
	float:left;
}

.ticker {
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.ticker ul {
  position: relative;
  width:800px;
}

.ticker ul li {
  display: none;
  font-size:12px;
}

.ticker ul li span{
  padding-right:10px;
}

.ticker ul li a{
  color:#333;
}

.ticker ul li a:hover{
  text-decoration:none;
}



/***************************************************
	plan css
***************************************************/

#planWrap{
	text-align:center;
	background:url(../../img/en/top/bg_plan.jpg) no-repeat center center #000;
	padding-bottom:25px;
	color:#fff;
}

#planWrap h2{
	padding:25px 0 20px;
	font-size:18px;
}

#planWrap h2::before{
	content:"";
	display:inline-block;
	width:33px;
	height:30px;
	padding-right:10px;
	background:url(../../img/en/top/bg_dc01.png) no-repeat left top;
}

#planWrap h2::after{
	content:"";
	display:inline-block;
	width:33px;
	height:30px;
	padding-left:10px;
	background:url(../../img/en/top/bg_dc02.png) no-repeat right bottom;
}

#planWrap .inner{
	width:915px;
	margin:0 auto;
}

#planWrap .inner a{
	color:#fff;	
}

#planWrap .inner a:hover h3{
	color:#f85151;
}

#planWrap #perspnal{
	width:300px;
	float:left;
}

#planWrap #point{
	width:313px;
	float:left;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	position:relative;
        top:8px;
}

#planWrap .icon{
	padding:20px 0 2px;
}

#planWrap #point .reco{
	position:absolute;
	top:10px;
	left:-3px;
}

#planWrap #annual{
	width:300px;
	float:left;
}

#planWrap h3{
	font-size:14px;
}

#planWrap p{
	font-size:12px;
	margin-bottom:20px;
}


/***************************************************
	contents css
***************************************************/
#contents{
	width:980px;	
	margin:0 auto 50px;
}

#contents .ttl{
	background:#000 url(../../img/en/common/main/bg_ttl.png) center left no-repeat;
	padding:7px 10px 5px 40px;
}

#contents .refine_nav{
	position:absolute;
	top:13px;
	right:5px;
}

#contents .refine_nav li{
	float:left;
	font-size:11px;
	border-left:1px solid #fff;
	padding:0 8px;
	line-height:1;
}

#contents .refine_nav li:first-child{
	border-left:none;
	padding-left:0;
}

#contents .refine_nav li a{
	color:#fff;
}

#contents .refine_nav li a:hover{
	text-decoration:none;
}

#contents .set{
	position:relative;
	width:100px;
	height:100px;
	float:left;
	margin:0 10px 20px;
}

#contents .image{
/*    background-color:#000;
    display:inline-block;
    max-height: 100px;*/
}

#contents .image a:hover img{
    -moz-opacity:0.7;
       opacity:0.7;
       filter:alpha(opacity=70);
       webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

#node-music .new::before,
#node-sfx .new::before {
	content:"";
	display:block;
	width:42px;
	height:20px;
	position:absolute;
	top:7px;
	background:url(../../img/en/top/icon_new.png) no-repeat;
}

#contents .info{
	position:absolute;
	top:0px;
	left:100px;
	height:70px;
	width:270px;
	background:rgba(0, 0, 0, .5);
	color:#fff;
	font-size:12px;
	padding:15px 15px;
	visibility: hidden;
    opacity: 0;
	-webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

#contents #features .info{
	left:-300px;
}

#contents #sfx .info{
	left:-300px;
}

#contents .set:hover{
	z-index:999;	
}

#contents .set:hover > .info{
	visibility: visible;
    opacity: 1;
}

.info h4{
	font-size:14px;
	margin-bottom:6px;
}

.info h4 a{
	color:#fff;
}

.info h4 a:hover{
	text-decoration:none;	
}

.info .list{
	padding-left:20px;
	margin-right:10px;
	background:url(../../img/en/top/icon_list.png) no-repeat;
	float:left;
	margin-bottom:6px;
}

.info .price{
	margin-bottom:7px;
}

.info .price::before{
	content:"US$";
}

.info .point{
	margin-bottom:6px;
}

.info .price::after{
	content:"｜";
}

.info .point::after{
	content:"pts";
}

.info .coll{
	float:left;
	margin-right:10px;
	clear:both;
}

.info .idNum{
	float:left;
}

.info .fav{
	float:right;
}


#contents .btn{
	width:200px;
	margin:0 auto 40px;
}


/* お気に入りボタンの処理　favorite icon*/
/*
#contents .fav > a{
	display:block;
	width:17px;
	height:15px;
	background:url(../../img/en/common/icon/icon_fav_off.png) no-repeat;
	text-indent:-9999px;
	cursor:pointer;
}

#contents .fav.on > a{
	background:url(../../img/en/common/icon/icon_fav_check.png) no-repeat;
}
*/
#contents .fav{
	position:relative;	
}

/* お気に入りボタンでログインしてない場合の処理 */
#contents .fav .login{
	position:absolute;	
	top:20px;
	left:-90px;
	background:url(../../img/en/top/bg_favlogin.png) no-repeat;
	width:200px;
	height:60px;
	color:#fff;
	text-align:center;
	font-size:10px;
	padding-top:13px;
	display:none;
	z-index:99999;
	line-height:1.4;
}

#contents .fav .login p{
	margin-bottom:3px;
}

#contents .fav .login .btn a{
	padding:5px 10px;
}

#contents .fav:hover>.login{
	display:block;
}

#contents a{
	color:#fff;	
}


/***************************************************
	newRelease css
***************************************************/

#newRelease{
	position:relative;
	width:480px;
	float:left;
}

/***************************************************
	features css
***************************************************/

#features{
	position:relative;
	width:480px;
	float:left;
}


/***************************************************
	world css
***************************************************/

#japanese{
	position:relative;
	width:480px;
	float:left;
}


/***************************************************
	sfx css
***************************************************/

#sfx{
	position:relative;
	width:480px;
	float:left;
}

/***************************************************
	news css
***************************************************/

#news{
	position:relative;
	width:980px;
	float:left;
}

#news .ttl{
	margin-bottom:15px;	
}

#news ul{
	padding:0 10px 20px;
}

#news ul li{
	padding:10px 5px;
	border-bottom:1px dashed #ddd;
	width:950px;
	display:table;
}

#news ul li:first-child{
	padding-top:0;
}

#news ul li a{
	font-size:12px;
	color:#333;	
}

#news ul li .date{
	display:table-cell;
	width:90px;
}

#news ul li .note{
	display:table-cell;
}

#news ul li a:hover{
	text-decoration:none;
}



/***************************************************
	rogoArea css
***************************************************/
aside#rogoArea{
	padding:40px;
	text-align:center;
	background:url(../../img/en/common/footer/bg_logoArea.jpg);
}

aside#rogoArea li{
	display:inline-block;
	padding:0 10px;	
}

/***************************************************
	ADD
***************************************************/
#loginNowBox .btn {
    width: 170px;
    padding: 5px;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #bb983e;
    color: #FFF;
    background-repeat: no-repeat !important;
    background-position: 25px 6px !important;
    padding-left: 25px;
    margin-bottom: 5px;
}

#loginNowBox .btn.mypage {
    background: url("../../img/en/common/header/icon_mypage.png") #e0bd63;
}

#loginNowBox .btn.favorites {
    background: url("../../img/en/common/header/icon_fav.png") #e0bd63;
}