@charset "utf-8";
/* =========================================================
 ◆基本
========================================================= */
html { background:#000}
body { line-height:1.5em; width:100% !important; overflow:hidden; background:#000; color:#000;}

img { display:block; }
.anim, .anim a{ -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s;}
imput [type=image]:hover { filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}

.fadeOut {
    -webkit-animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
    animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
}
.fadeIn {
    -webkit-animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
    animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
}


.loading { overflow:hidden; }
.bodyMask { display:block; width:0; height:0; background:#000; opacity:0; -moz-opacity:0; position:fixed; z-index:999; top:0; left:0;}
.loading .bodyMask { width:100%; height:100%; }

#sqexHeader-black_rsp { position:relative; z-index:9999}
#contents { position:relative;}

.spContent { display:none !important;}
/* =========================================================
 ◆Head
========================================================= */

.bgmWrap { position:fixed; right:0; top:37px; width:429px; height:29px; background:url(../images/bgm_bg.png) no-repeat left top; z-index:9999;}
.bgmWrap ul { float:left;}
.bgmWrap li { float:left;}
.bgm { position:relative; top:2px; height:26px; margin-left:28px; background:no-repeat; background-position:173px top;background-image:url(../images/track_num.png); }
.bgm .bgmBtn a { background-repeat: no-repeat; background-position:1px top; display:block; text-indent:-9999px; width:54px; height:26px; }
.bgm .off a { background-image:url(../images/bgm_off.png);}
.bgm .off a:hover { background-image:url(../images/bgm_off.png);}
.bgm .off.hover a:hover { background-image:url(../images/bgm_off.png);}
.bgm .on a { background-image:url(../images/bgm_on.png);}
.bgm .on a:hover { background-image:url(../images/bgm_on.png);}
.bgm .on.hover a:hover { background-image:url(../images/bgm_on.png);}
.track { height:26px; background-image:url(../images/track_1.png); background-repeat:no-repeat; background-position:73px top;}
.trackBtn { width:28px; height:26px;}
.trackBtn a { display:block; line-height:26px; text-indent:-9999px;}
#gnav { background:url(../images/menu_bg.gif) repeat-x left top; height:51px;}
#gnav ul { width:873px; margin:0 auto;}
#gnav li { float:left;}
#gnav li img { display:block;}
#gnav li { position:relative;}
#gnav li.disabled { overflow:hidden;}
#gnav li.disabled:after { content:''; display:block; position:absolute; right:0; bottom:0; border-right:solid 1px; border-color:transparent; width:100%; height:100%;background: url(../images/menu_bg.gif) repeat-x left 2px; -moz-opacity:0.8; opacity:0.8; margin:0px 1px 2px 0;}
#gnav li.new a:after { content:''; display:block; position:absolute; left:5px; top:5px; width:34px; height:13px; background: url(../images/icon-new.png) no-repeat left top; }

#pageHeader { height:150px;}
.pageHeaderInner { position:relative; width:980px; height:150px; margin:0 auto; position:relative;}
#pageHeader #logo { position:absolute; width:302px; height:102px; top:21px; left:-15px;}
#pageHeader #logo img { width:100%; height:auto;}
#pageHeader .headerBanner {
	position: absolute;
	bottom: 0;
	width: 100%;
}
	#pageHeader .headerBanner img {
		position: absolute;
		bottom: 8px;
		left: 0;
		right: -600px;
		margin: auto;
	}
.index #pageHeader { background:url(../images/top/bg1.png) no-repeat center top; height:495px; position:relative; overflow: hidden;}

#movie #bgMovie { width:100%; display:block; max-width:1400px; margin:0 auto 0; position:relative; background:#101010;}
.movieMask { content:''; display:block; width:100%; height:495px; position:absolute; top:0; left:0; background:url(../images/top/movieMask.png) repeat-y center top;}

.index .pageHeaderInner { width:auto; height:495px;}
.index #pageHeader #logo { width:600px; height:203px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}

/* =========================================================
 ◆contents
========================================================= */
#contents { background:url(../images/bg.jpg) repeat-y center top; background-color:#000;}


/* =========================================================
 ◆footer
========================================================= */
.pageTop { position:relative;}
.pageTop a { display:block; width:163px; height:30px; position:absolute; top:-48px; left:50%; margin-left:326px; background:url(../images/pageTop.png) no-repeat left top; text-indent:-9999px; }
.location .pageTop a { position:fixed; top:auto; bottom:20px; left:auto; right:20px; margin-left:0;}
.pageTop a:hover { opacity:0.7; -moz-opacity:0.7;}
#footNav { background:#111; border-top:solid 1px #444; text-align:center;}
#footNav li { line-height:43px; height:43px; display:inline-block; margin-right:25px;}
#footNav li:last-child { margin-right:0;}
#footNav li a { color:#ddd; font-size:12px; font-weight:bold;}
#footNav li a:after { content:''; background:url(../images/arrow1.png) no-repeat center center; display:inline-block; width:6px; height:9px; padding-left:10px;}


@media screen and (max-width: 980px) { /* iPad landscape */
	body { width:980px !important;}
	#gnav { background:url(../images/menu_bg.gif) repeat-x left top; height:51px;}
	#gnav ul { width:980px; margin:0 auto;}
	#gnav li { float:left;}
}


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

	/* SQUARE CSS OVERRIDE
	******************************************************/
	#sqexHeader-black_rsp { position:relative; z-index:10000; }
	/*******************************************************/


	body { width:100% !important; -webkit-text-size-adjust: 100%; }
	#contents { background:url(../images/bg_sp.png) repeat center top; -webkit-background-size:100% auto; -moz-background-size:100% auto; -ms-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto;}
	.spContent { display:block !important;}
	.pcContent { display:none !important;}
	.bgmWrap { right:auto; left:-9999px;}

	/* =========================================================
	 ◆Head
	========================================================= */
	.menuBtn { position:absolute; top:10px; right:10px; width:48px; height:45.5px;}
	#gnav { background:#222222; height:auto; position:absolute; top:-1000px; width:100%; z-index:9999; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; border-bottom:solid 1px #111111;}
	#gnav.open { top:0;}
	#gnav .menuClose { position:absolute; right:10px; top:10px; width:48px; height:45.5px;}
	#gnav .menuClose img { display:block;}
	#gnav ul { width:100%; margin:0 auto; padding-top:63px; border-bottom:solid 1px #4e4e4e;}
	#gnav li { width:300px; margin:0 auto; float:none; height:38.5px; border-bottom:solid 1px #4e4e4e; border-top:solid 1px #111111;}
	#gnav li:first-child { border-top:none;}
	#gnav li:last-child { border-bottom:none;}
	#gnav li a { display:block; height:38.5px; background-position:0 0; background-repeat:no-repeat; -webkit-background-size:300px auto; -moz-background-size:300px auto; -ms-background-size:300px auto; -o-background-size:300px auto; background-size:300px auto;}
	#gnav li img { display:none;}
	#gnav li.disabled { background-position:0 0; background-repeat:no-repeat; -webkit-background-size:300px auto; -moz-background-size:300px auto; -ms-background-size:300px auto; -o-background-size:300px auto; background-size:300px auto;}
	#gnav li:nth-child(1) a { background-image:url(../images/gnav_1_sp.png);}
	#gnav li:nth-child(2) a { background-image:url(../images/gnav_2_sp.png);}
	#gnav li:nth-child(3) a { background-image:url(../images/gnav_3_sp.png);}
	#gnav li:nth-child(4) a { background-image:url(../images/gnav_4_sp.png);}
	#gnav li:nth-child(5) a { background-image:url(../images/gnav_5_sp.png);}
	#gnav li:nth-child(6) a { background-image:url(../images/gnav_6_sp.png);}
	#gnav li:nth-child(7) a { background-image:url(../images/gnav_8_sp.png);}
	#gnav li:nth-child(8) a { background-image:url(../images/gnav_9_sp.png);}
	#gnav li.disabled:after { background:#222;}
	#gnav li.new a:after { position:relative; left:0; top:12px; width:35px; height:17px; background: url(../images/icon-new_sp.png) no-repeat left top; -webkit-background-size:35px 17px; -moz-background-size:35px 17px; -ms-background-size:35px 17px; -o-background-size:35px 17px; background-size:35px 17px;}
	#gnav li.new:nth-child(1) a:after { left:60px;}
	#gnav li.new:nth-child(2) a:after { left:83px;}
	#gnav li.new:nth-child(3) a:after { left:116px;}
	#gnav li.new:nth-child(4) a:after { left:85px;}
	#gnav li.new:nth-child(5) a:after { left:85px;}
	#gnav li.new:nth-child(6) a:after { left:230px;}
	#gnav li.new:nth-child(7) a:after { left:103px;}
	#gnav li.new:nth-child(8) a:after { left:198px;}
	#gnav li.new:nth-child(9) a:after { left:115px;}
	#gnav .btns { border-top:solid 1px #111111; background:#222222; height:auto;}
	#gnav .btns ul { padding:0; position:static; padding:10px 0;}
	#gnav .btns li { border:none; height:auto;}
	#gnav .btns li a { display:block; margin:0 auto; background:none; height:auto; width:280px;}
	#gnav .btns li img { display:block; background:none; height:auto}
	#gnav div.close { border-bottom:solid 1px #4e4e4e;}

	#pageHeader { height:77px;}
	.pageHeaderInner { position:relative; width:100%; height:77px; position:relative;}
	#pageHeader #logo { position:absolute; width:196px; height:102px; top:4px; left:-5px;}
	#pageHeader #logo img { width:100%; height:auto;}
	.index #pageHeader { background:none; height:auto; position:relative; height:312px; overflow:visible;}
	.index #pageHeader img { width:100%; position:absolute;}
	.index #pageHeader #logo { width:300px; height:101.5px; left:0; margin:0 10px; position:absolute; top:206px; z-index:10}
	.index #pageHeader .spContent { position:relative;}
	.index #pageHeader #logo img { position:relative;}
	#pageHeader .headerBanner {
		position: relative;
		bottom: auto;
	}
	#movie { display:none;}

	.index #pageHeader .topRandomImage {}
	.index #pageHeader .topRandomImage img { display:none;}


	.pageTop { position:relative; border-bottom:solid 1px #444; border-top:solid 1px #444; }
	.pageTop a { display:block; width:320px; height:42px; position:static; margin-left:0; background:url(../images/pageTop_sp.png) no-repeat left top; -webkit-background-size:320px auto; -moz-background-size:320px auto; -ms-background-size:320px auto; -o-background-size:320px auto; background-size:320px auto;}
	.location .pageTop a { bottom:-1px; right:0;}
	.pageTop a:hover { opacity:1; -moz-opacity:1;}
	#footNav { border-top:none; text-align:left;}
	#footNav ul:after { content:'.'; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}
	#footNav li { line-height:36px; height:36px; display:inline; float:left; width:50%; margin-right:0; border-bottom:solid 1px #444; background:#111;}
	#footNav li:last-child { border-bottom:none;}
	#footNav li:nth-child(5) { border:none;}
	#footNav li a { display:block; position:relative;  font-size:11px; padding-left:10px;}
	#footNav li a:after { position:absolute; right:10px; top:13px; padding-left:10px;}

}