@charset "utf-8";

/* ----------------------------------------------------------------------
main
---------------------------------------------------------------------- */
body {
    text-align:center;
    position:relative;
    min-width: 1000px;
    overflow-x: hidden;
}

#contents a{	color: #1991E6 !important; font-weight: bold;}
#contents a:hover{	color: #85CBFE !important;}


#wrap_topbanner a,.fadeeffect,
#globalnav li a,#subnav li{
	-webkit-transition-property:opacity;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property:opacity;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function: ease-out;
    -ms-transition-property:opacity;
    -ms-transition-duration:0.2s;
    -ms-transition-timing-function: ease-out;
    transition-property:opacity;
    transition-duration:0.2s;
    transition-timing-function: ease-out;
}

#wrap_topbanner a,.fadeeffect{    opacity:1.0;}
#wrap_topbanner a:hover,.fadeeffect:hover{    opacity:0.75;   }

/* ----------------------------------------------------------------------
opacityeffect
---------------------------------------------------------------------- */
.opacityeffect{
    position:relative;
    display:block;
}

.opacityeffect .base{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1; 
}

.opacityeffect .effect{
    position:absolute;
    left:0px;
    top:0px;
    z-index:2;
    display:none;
}

/* ----------------------------------------------------------------------
pagetop
---------------------------------------------------------------------- */
#button_pagetop {
    position:fixed;
    right:-10px;
    bottom:20px;
    z-index:8000;
}

#button_pagetop a{
    position:fixed;
    right:-144px;
    bottom:20px;	
    display:block;
	width:120px;
	height: 38px;
    background-image:url(../images/common/button_pagetop.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    overflow:hidden;
    text-decoration:none;
	background-position: 0 -0px;
}

#button_pagetop a{    background-position:0px 0px;   }
#button_pagetop a:hover{background-position: 0 -38px;}

/* ----------------------------------------------------------------------
background
---------------------------------------------------------------------- */
#page_background{
    position:absolute; 
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
}

#page_background .background_wrapper{
    position:fixed;
    width:1700px;
    height:100%;
    left:50%;
    top:0;
    z-index:1;
    margin-left:-850px;
}

#page_background .background_image{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    width:1700px;
    height:1600px;
}

.page_index #page_background .background_wrapper{
    position: absolute;
}

#particles {
    width: 100%;
    height: 100%;    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* ----------------------------------------------------------------------
template edited
---------------------------------------------------------------------- */
#wp{
    width:100%;   
    z-index:10;
    overflow-x: hidden;
    margin: 0 auto;
}

#contents{
    z-index:100;
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
    position:relative;
    width: 100%;
    overflow-x: hidden;
}

#wrapper{
	margin: 0 auto;
	padding: 30px 0 40px;
}

#sqexFooter{
    position:relative;
    overflow:hidden;
}

/* ----------------------------------------------------------------------
base
---------------------------------------------------------------------- */
.container{
    width: 1000px;
    margin:0 auto;
    text-align: left;
    position: relative;
    /*background-color: rgba(0,0,255,0.1);*/
}

.showpc{ display: block;}
.showsp{ display: none;}

/* socialicon */
.socialicon li{	float: left;}
.socialicon li .nav_twitter{margin:0 8px;}
.socialicon{position:absolute;right: 15px;top: 15px;z-index: 1000;}

.framebox,.box{
	border: solid 1px #000;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
    box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #000;
    -webkit-box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #000;
    -moz-box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #000;
    background-color:rgba(0,0,0,1);
}
.box{
	padding: 20px 25px;
	position: relative;
}

.framebox_innder{
    padding: 20px 40px 40px;
    position: relative;
}

.frametitle{
	margin: -20px auto 0;
	text-align: center;
}

body:not(.page_index) .frametitle{
	width: 980px;
}

.button{
    margin: 0 auto;
	display: block;
}

/* ----------------------------------------------------------------------
    header
---------------------------------------------------------------------- */
#header{
	width: 400px;
	margin: 0 auto;
	text-align: center;
    /*background-color:rgba(0,0,0,1);*/
}

.button_spec,.button_spec img{
	width: 280px;
	height: 44px;
}

.button_ranking,.button_ranking img{
	width: 420px;
	height: 94px;
	margin-bottom: 30px;
}

#header_catch.mt{    margin-left: -8px;}

/* ----------------------------------------------------------------------
    globalnav
----------------------------------------------------------------------  */
#globalnav {
    width:1020px;
    text-align: left;
    position:relative;
    z-index: 998;
	margin-left: -10px;
}

#globalnav li, 
#globalnav li a{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background-repeat:no-repeat;
    float: left;
    position: relative;
}

#globalnav li.navbtn,
#globalnav li.navbtn a{
    height: 82px;
    background-image:url(../images/nav/globalnav_sprite.png);
}
#globalnav li.navbtn#nav_faq{margin: 0 10px;}

#globalnav li.navbtn#nav_about,#globalnav li.navbtn#nav_about a{	background-position:0px 0px; width: 420px;}
#globalnav li.navbtn#nav_about a:hover{			background-position:0px -82px;}
.page_about #globalnav li.navbtn#nav_about a{	background-position:0px -164px; opacity: 1; cursor:default;}

#globalnav li.navbtn#nav_faq,#globalnav li.navbtn#nav_faq a{		background-position:-430px 0px; width: 290px;}
#globalnav li.navbtn#nav_faq a:hover{		background-position:-430px -82px;}
.page_faq #globalnav li.navbtn#nav_faq a{	background-position:-430px -164px;	opacity: 1; cursor:default;}

#globalnav li.navbtn#nav_support,#globalnav li.navbtn#nav_support a{background-position:-730px 0px; width: 290px;}
#globalnav li.navbtn#nav_support a:hover{	    background-position:-730px -82px;}

#globalnav li a,#subnav li a{
    opacity:0.0;
    text-indent:-9999px;
    overflow:hidden;
}

#globalnav li a:hover,#subnav li a:hover,
#globalnav li.current > a,#subnav li.current > a{opacity:1.0;}
#globalnav li.none a:hover,#subnav li.none a:hover{opacity:0.0;}

/* ----------------------------------------------------------------------
text
---------------------------------------------------------------------- */
.pagetitle{
    width: 940px;
    height: 150px;
    margin: 50px auto 80px;
    text-align: center;
}

.sectiontitle{
	height: 52px;
	width: 600px;
	background-image: url(../images/common/sectiontitle.png);
	background-repeat: no-repeat;
	background-position: center top ;
	margin: 60px auto 0;
	text-align: center;
}

.box ol{
  	list-style-type: decimal;
	margin: 10px 0 10px 20px;
    line-height: 2;
}
.simple_list{    
	list-style-type: disc;	
	margin: 10px 0 10px 20px;
}

/* ----------------------------------------------------------------------
#wrap_movie
---------------------------------------------------------------------- */
#wrap_movie .wrap_thumbnail{
	display: block;
	background: #000;
	width: 800px;
	border: solid 1px #000;
	box-shadow:inset 0 0 0 3px #fff;
	-webkit-box-shadow:inset 0 0 0 3px #fff;
	-moz-box-shadow:inset 0 0 0 3px #fff;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	padding: 3px;
	margin:0 auto;
	font-size: 0;
	box-sizing:border-box;
	position: relative;
}

#wrap_movie .wrap_thumbnail img{
	width: 790px;
	height: auto;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	
	border: solid 1px #000;
	box-shadow: 0 0 0 3px #fff;
	-webkit-box-shadow: 0 0 0 3px #fff;
	-moz-box-shadow: 0 0 0 3px #fff;
	
    -webkit-transition: filter 0.2s ease-out;
    -moz-transition: filter 0.2s ease-out;
    -ms-transition: filter 0.2s ease-out;	
	transition: filter 0.2s ease-out;
}

#wrap_movie .wrap_thumbnail:hover img{
	filter: brightness(120%);
}

#wrap_movie div span{
    display: block;
    width: 120px;
    height: 120px;
    background: url(../images/topmovie/button_play.png) left top no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
	margin: -60px 0 0 -60px;
    z-index: 10;
}

/* ----------------------------------------------------------------------
#spfotter
---------------------------------------------------------------------- */
#spfotter{display: none;}


/* ----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
for smartphone
----------------------------------------------------------------------
----------------------------------------------------------------------
---------------------------------------------------------------------- */
@media only screen and (max-width:640px){
    /* ----------------------------------------------------------------------
    main
    ---------------------------------------------------------------------- */
    html{
        -webkit-text-size-adjust: 100%;
        min-width:640px;
    }

    body {
        min-width:640px;
        font-size: 18px;
        overflow-x: hidden;
        background-position: center -400px!important;
    }

    /* ----------------------------------------------------------------------
    pagetop
    ---------------------------------------------------------------------- */
    #button_pagetop a{
        width:144px;
        height: 46px;
        background-position:0 -76px;
    }
    #button_pagetop a:hover{background-position: 0 -122px;}
    
    /* ----------------------------------------------------------------------
    background
    ---------------------------------------------------------------------- */	
	#page_background .background_wrapper{   margin-left:0; width: 640px;  left: 0;}
    #page_background .background_image{ width:640px;	height: auto;}
    
    /* ----------------------------------------------------------------------
    template edited
    ---------------------------------------------------------------------- */
    #contents{
        min-width:640px;
        font-size: 18px;
    }

    /* ----------------------------------------------------------------------
    base
    ---------------------------------------------------------------------- */
    .showpc{ display: none;}
    .showsp{ display: block;}
    
    .container{
        width: 640px;
    }  

    /* socialicon */
    .socialicon img{width: 45px;    height: 45px;}
	
	/* socialicon */
	.framebox{
		width: 650px;
		margin-left: -5px;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		background-color:rgba(0,0,0,0.8);
	}
	.box{
		padding: 25px 30px;
	}

	.framebox_innder{
		padding: 20px 30px 30px;
	}

	.frametitle{
		width: 640px!important;
		margin-left: 4px;
	}

	/* ----------------------------------------------------------------------
    header
	---------------------------------------------------------------------- */
	#header{
		width: 580px;
	}

	.button_spec,.button_spec img{
		width: 380px;
		height: 60px;
	}

		
	.button_ranking,.button_ranking img{
		width: 600px;
		height: 134px;
		margin-bottom: 70px;
	}
    
    #header_logo.mt{margin-top: 200px;}
	#header_catch.mt{    margin-left: -8px;}
    
    /* ----------------------------------------------------------------------
    globalnav
    ----------------------------------------------------------------------  */
	#globalnav {
		width:600px;
		margin: 0 auto;
	}

	#globalnav li.navbtn,
	#globalnav li.navbtn a{
		height: 105px;
		background-image:url(../images/nav/globalnav_sprite_sp.png);
	}
	#globalnav li.navbtn#nav_faq{margin: 0 10px 0 0;}
	#globalnav li.navbtn#nav_about{margin-bottom: 10px;}
	
	#globalnav li.navbtn#nav_about,#globalnav li.navbtn#nav_about a{	background-position:0px 0px; width: 600px;}
	#globalnav li.navbtn#nav_about a:hover{			background-position:0px -105px;}
	.page_about #globalnav li.navbtn#nav_about a{	background-position:0px -210px;}

	#globalnav li.navbtn#nav_faq,#globalnav li.navbtn#nav_faq a{		background-position:-610px 0px; width: 295px;}
	#globalnav li.navbtn#nav_faq a:hover{			background-position:-610px -105px;}
	.page_faq #globalnav li.navbtn#nav_faq a{		background-position:-610px -210px;}

	#globalnav li.navbtn#nav_support,#globalnav li.navbtn#nav_support a{background-position:-915px 0px; width: 295px;}
	#globalnav li.navbtn#nav_support a:hover{	    background-position:-915px -105px;}

    /* ----------------------------------------------------------------------
    subnav
    ---------------------------------------------------------------------- */
    #subnav_inner{display: none;}
    .page_about #subnav_inner{
        width: 100%;
        height: 214px;
        display: block;
        background: url(../images/nav/subnav_inner_sp.png) left center no-repeat;
        padding: 22px 30px 0;
        position: absolute; bottom: 0;  left: 0;
    }
    
    #subnav_inner li,
    #subnav_inner li a{
        height: 50px;
        width: 270px !important;
        background-image:url(../images/nav/subnav_sprite_sp.png);
    }
    #subnav_inner li{
        margin: 0 10px 10px 0; 
        background-color: rgba(0,0,0,0.4);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        /*box-shadow: 1px 1px rgba(255,255,255,0.4);*/
    }
    
    #subnav_inner li#subnav_page1,#subnav_inner li#subnav_page1 a{                  background-position:0px 0px;}
    #subnav_inner li#subnav_page1 a:hover,
    .page1 #subnav_inner li#subnav_page1,.page1 #subnav_inner li#subnav_page1 a{    background-position:0px -50px;}
    
    #subnav_inner li#subnav_page2,#subnav_inner li#subnav_page2 a{                  background-position:-260px 0px;}
    #subnav_inner li#subnav_page2 a:hover,
    .page2 #subnav_inner li#subnav_page2,.page2 #subnav_inner li#subnav_page2 a{    background-position:-260px -50px;}

    #subnav_inner li#subnav_page3,#subnav_inner li#subnav_page3 a{                  background-position:-520px 0px;}
    #subnav_inner li#subnav_page3 a:hover,
    .page3 #subnav_inner li#subnav_page3,.page3 #subnav_inner li#subnav_page3 a{    background-position:-520px -50px;}

    #subnav_inner li#subnav_page4,#subnav_inner li#subnav_page4 a{                  background-position:-2080px 0px;}
    #subnav_inner li#subnav_page4 a:hover,
    .page4 #subnav_inner li#subnav_page4,.page4 #subnav_inner li#subnav_page4 a{    background-position:-2080px -50px;}

    #subnav_inner li#subnav_page5,#subnav_inner li#subnav_page5 a{                  background-position:-2340px 0px;}
    #subnav_inner li#subnav_page5 a:hover,
    .page5 #subnav_inner li#subnav_page5,.page5 #subnav_inner li#subnav_page5 a{    background-position:-2340px -50px;}
    
    #subnav_inner li#subnav_page2.none,#subnav_inner li#subnav_page2.none a,
    #subnav_inner li#subnav_page3.none,#subnav_inner li#subnav_page3.none a,
    #subnav_inner li#subnav_page4.none,#subnav_inner li#subnav_page4.none a{    background-position:0 -100px;}

    #subnav_inner .none_nav{position: absolute;   top: 133px;}

    /* ----------------------------------------------------------------------
	text
	---------------------------------------------------------------------- */
	.pagetitle{
		width: 940px;
		height: 150px;
		margin: 50px auto 80px;
		text-align: center;
	}

	.sectiontitle{
		width: 600px!important;
		background-image: url(../images/common/sectiontitle.png)!important;
		margin-left: -5px;
	}
	
	.sectiontitle.long{
		padding-top: 15px;
		height: 92px;
		background-image: url(../images/common/sectiontitle_l.png)!important;
	}
	
	.box ol{
		list-style-type: decimal;
		margin: 10px 0 10px 20px;
		line-height: 2;
	}
	.simple_list{    
		list-style-type: disc;	
		margin: 10px 0 10px 20px;
	}
	

	/* ----------------------------------------------------------------------
	#wrap_movie
	---------------------------------------------------------------------- */
	#wrap_movie .wrap_thumbnail{		width: 580px;	}
	#wrap_movie .wrap_thumbnail img{	width: 570px;	}
	#wrap_movie .wrap_thumbnail:hover img{filter: brightness(100%);}
	
	/* ----------------------------------------------------------------------
	#spfotter
	---------------------------------------------------------------------- */
	#spfotter{
		display: block;
		width: 580px;
		margin: 0 auto 40px;
	}
    
}