@charset "utf-8";

/*
 *
 * Usage: Base layout
 *
 * Name: style.css
 *
 */

/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	83  %		19px 	158 %
11px 	92  %		20px 	167 %
12px 	100 %		21px 	175 %
13px 	108 %		22px 	183 %
14px 	117 %		23px 	192 %
15px 	125 %		24px 	200 %
16px 	133 %		25px 	208 %
17px 	142 %		26px 	217 %
18px 	150 %
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
html,body   {height:100%;}


/*---------------------------------------------------------------------
CSS3 animation & parts layout
---------------------------------------------------------------------*/
/* link */
a img         {opacity:1; filter:alpha(opacity=100);  -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in;}
a:hover img   {opacity:0.7; filter:alpha(opacity=70); -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in;}
a             {-moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
a:hover       {-moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.opa_bg a,
.opa_bg input        {opacity:1; -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.opa_bg a:hover,
.opa_bg input:hover  {opacity:0.7; -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.trans_bg a          {display:block; overflow:hidden; height:0; opacity:1; filter:alpha(opacity=100); -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.trans_bg a:hover    {opacity:0; filter:alpha(opacity=0); -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}

/* text */
.small  {font-size:83%;}
.large  {font-size:117%;}




/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
/* page base */
body  {background:#180e24; min-width:900px;}
#bg   {width:2100px; height:1118px; background:url(../images/common/bg_page.gif) no-repeat 0 0; position:absolute; top:80px; left:50%; margin-left:-1050px; z-index:-1;}
#wrapper    {max-width:2100px; min-width:900px; position:relative; overflow:hidden; margin:0 auto;}
#container  {width:900px; margin:0 auto;}


/* fix parts */
#copyright  {position:fixed; top:40px; left:33px;}

#fixSNS  {position:fixed; top:44px; right:20px;}
    #fixSNS li  {margin-bottom:10px; width:27px;}
    #fixSNS a   {display:block; overflow:hidden; height:0; padding-top:27px; background:url(../images/common/btn_sns.png) no-repeat 0 0;}
    #fixSNS .sns01 a  {background-position:0 0;}
    #fixSNS .sns02 a  {background-position:0 -27px;}

#btnPagetop  {position:fixed; bottom:250px; right:13px;}


/* header */
#header  {background:url(../images/common/bg_header.gif) no-repeat 50% 0; margin-bottom:24px; padding-top:30px; height:51px;}
    #header #gnav  {width:701px; margin-left:87px;}
        #header #gnav li  {float:left;}
        #header #gnav a   {display:block; overflow:hidden; height:0; padding-top:27px; background:url(../images/common/gnav.png) no-repeat 0 0;}
        #header #gnav .gnav01  {width:80px;}
        #header #gnav .gnav02  {width:103px;}
        #header #gnav .gnav03  {width:122px;}
        #header #gnav .gnav04  {width:116px;}
        #header #gnav .gnav05  {width:73px;}
        #header #gnav .gnav06  {width:129px;}
        #header #gnav .gnav07  {width:78px;}
        
        #header #gnav .gnav01 a  {background-position:0 0;}
        #header #gnav .gnav02 a  {background-position:-80px 0;}
        #header #gnav .gnav03 a  {background-position:-183px 0;}
        #header #gnav .gnav04 a  {background-position:-305px 0;}
        #header #gnav .gnav05 a  {background-position:-421px 0;}
        #header #gnav .gnav06 a  {background-position:-494px 0;}
        #header #gnav .gnav07 a  {background-position:-622px 0;}


/* footer */
#footer  {height:115px;}
    #footer #sns  {float:left; margin-left:-64px; padding-top:48px;}
        #footer #sns li  {display:inline-block; *display:inline; *zoom:1;}
    
    #footer #link  {float:right; margin-right:-64px; padding-top:48px;}
        #footer #link li  {display:inline-block; *display:inline; *zoom:1; margin-left:32px; text-align:right;}

    #footer #btnPagetop2  {position:absolute; bottom:0; left:50%; margin-left:-97px; width:194px;}
        #footer #btnPagetop2 a  {display:block; overflow:hidden; height:0; padding-top:97px; background:url(../images/common/btn_pagetop2.gif) no-repeat 0 20px;}
        #footer #btnPagetop2 a:hover  {background-position:0 0px;}



/* page container */
#pageContainer  {}
    #pageContainer h1  {text-align:center;}