@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
---------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

html,body   {height:100%;}
body  {min-width:960px; width:100%; color:#666; letter-spacing:3pt;}
body a  {color:#666;}

::selection {background: #98d9e7; color: #666;}
::-moz-selection {background: #98d9e7; color: #666;}

.droid  {font-family:'Droid Serif', 游明朝体, Yu Mincho, ヒラギノ明朝 Pro, Hiragino Mincho Pro, YuMincho, serif;}
.yugo   {font-family:"游ゴシック体", "Yu Gothic", YuGothic, Osaka, sans-serif;}

/*---------------------------------------------------------------------
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; transition:all 0.2s ease-in;}
a:hover img   {opacity:0.7; filter:alpha(opacity=70); -webkit-transition:opacity 0.2s ease-in; -moz-transition:opacity 0.2s ease-in; transition:opacity 0.2s ease-in;}
a             {-moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
a:hover       {-moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; 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; 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; 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; 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; transition: all 0.2s ease-in;}

.obj  {position:absolute; z-index:0;}

/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
#header  {position:absolute; top:35px; left:36px; z-index:999;}
    #header h1  {margin-bottom:40px;}
    #header #gnav li    {margin-bottom:5px;}
    #header #gnav li a  {display:block;}
    #header #gnav li a.active  {opacity:0.5;}

    #header .nav  {padding-top:30px;}
        #header .nav dt  {margin-bottom:10px; color:#b3b3b3;}
        #header .nav dd  {padding-left:15px;}
        #header .nav li  {margin-bottom:5px; font-size:11px;}
        #header .nav a   {text-decoration:none;}
        #header .nav a:hover  {color:#b3b3b3;}

    #cateNav  {background:url(../images/news/line_sep.gif) no-repeat 0 0; margin-top:80px;}

#footer  {position:fixed; bottom:23px; left:0; z-index:999; width:100%;}
    #footer #btnPagetop  {position:absolute; bottom:52px; right:25px; -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
    #footer #btnPagetop:hover  {bottom:57px;}

    #footer #copyright  {text-align:right; padding-right:25px;}
    #footer #btnFb      {position:absolute; left:33px; bottom:8px;}
    #footer #btnIg      {position:absolute; left:65px; bottom:8px;}

/* page layout */
#wrapper    {width:100%; overflow:hidden; min-width:960px;}
#pageTitle  {position:absolute; top:60px; right:60px;}
#container  {width:680px; margin:0 auto; position:relative; padding:200px 140px 100px 140px;}

.title  {text-align:center; font-size:18px; display:inline-block; position:relative; line-height:25px; padding:0 50px;}
    .title:before  {content:''; width:25px; height:25px; position:absolute; top:0; left:0; background:url(../images/common/bg_title.gif) no-repeat 0 0;}
    .title:after   {content:''; width:25px; height:25px; position:absolute; top:0; right:0; background:url(../images/common/bg_title.gif) no-repeat 0 0;}


/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
#topWrapper    {width:100%; height:100%; position:relative; min-width:800px; min-height:600px; overflow:hidden;}
#top #bgImg    {position:fixed;}
#top #header   {position:fixed;}
#top .scene    {position:fixed; top:50%; left:50%; width:580px; height:500px; margin:-250px 0 0 -290px;}
#top #scene01  {-webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in; opacity:0;}
#top #scene01.active  {opacity:1;}
    #top .scene .obj  {position:absolute; opacity:0; filter:alpha(opacity=0);}

    #top #scene01 #txt01_1  {top:133px; right:155px;}
    #top #scene01 #txt01_2  {top:140px; right:228px;}
    #top #scene01 #txt01_3  {top:130px; left:256px;}
    #top #scene01 #txt01_4  {top:140px; left:178px;}
    #top #scene01 #txt01_5  {top:130px; left:100px;}
    #top #scene01 #scrollDown  {bottom:82px; left:240px;}

    #top #scene02 #txt02_1  {top:11px; right:187px;}
    #top #scene02 #txt02_2  {top:35px; right:273px;}
    #top #scene02 #txt02_3  {top:181px; right:275px;}
    #top #scene02 #txt02_4  {top:265px; right:273px;}
    #top #scene02 #txt02_5  {top:380px; right:276px;}
    #top #scene02 #txt02_6  {top:36px; left:209px;}
    #top #scene02 #txt02_7  {top:96px; left:206px;}
    #top #scene02 #txt02_8  {top:267px; left:206px;}

    #top #scene03 #txt03_1   {top:62px; right:64px;}
    #top #scene03 #txt03_2   {top:148px; right:69px;}
    #top #scene03 #txt03_3   {top:265px; right:69px;}
    #top #scene03 #txt03_4   {top:62px; right:128px;}
    #top #scene03 #txt03_5   {top:148px; right:128px;}
    #top #scene03 #txt03_6   {top:55px; right:250px;}
    #top #scene03 #txt03_7   {top:141px; right:250px;}
    #top #scene03 #txt03_8   {top:55px; left:243px;}
    #top #scene03 #txt03_9   {top:199px; left:240px;}
    #top #scene03 #txt03_10  {top:315px; left:240px;}
    #top #scene03 #txt03_11  {top:62px; left:112px;}
    #top #scene03 #txt03_12  {top:62px; left:57px;}
    #top #scene03 #txt03_13  {top:148px; left:57px;}
    #top #scene03 #txt03_14  {top:176px; left:53px;}
    #top #scene03 #txt03_15  {top:293px; left:53px;}

    #top #scene04 #txt04_1  {top:34px; right:255px;}
    #top #scene04 #txt04_2  {top:112px; right:258px;}
    #top #scene04 #txt04_3  {top:312px; right:263px;}
    #top #scene04 #txt04_4  {top:34px; left:240px;}
    #top #scene04 #txt04_5  {top:148px; left:237px;}
    #top #scene04 #txt04_6  {top:206px; left:237px;}
    #top #scene04 #txt04_7  {top:380px; left:237px;}


#scrlContainer  {height:11000px;}

#top #water  {-webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}
#top #water.active,
#top #water.active .obj  {opacity:1;}



/*---------------------------------------------------------------------
About layout
---------------------------------------------------------------------*/
#about .section  {margin-bottom:180px; text-align:center;}
    #about .section h3  {margin-bottom:70px;}
    #about .section p   {font-size:117%; line-height:220%; margin-bottom:20px;}
    #about .section .company   {font-size:150%; line-height:260%; margin-bottom:50px;}
	#about .section a    {text-decoration: none; background:url(../images/common/line_solid-x.gif) repeat-x 0 100%; padding:0 3px 0 3px; line-height:100%; }
	#about .section a:hover  {text-decoration: none; background:url(../images/common/line_solid-x2.gif) repeat-x 0 100%; padding:0 3px 0 3px; line-height:100%; }


/*---------------------------------------------------------------------
News layout
---------------------------------------------------------------------*/
#news .section  {margin-bottom:180px; text-align:center;}
    #news .section h3  {margin-bottom:60px;}
    #news .section p   {font-size:117%; line-height:220%; margin-bottom:30px;}
    #news .section .opening   {font-size:150%; line-height:260%;}
	#news .section a    {text-decoration: none; background:url(../images/common/line_solid-x.gif) repeat-x 0 100%; padding:0 3px 0 3px;}
	#news .section a:hover  {text-decoration: none; background:url(../images/common/line_solid-x2.gif) repeat-x 0 100%; padding:0 3px 0 3px;}

    #news .section .title  {font-size:14px;}
    #news .section .entry_title  {font-size:22px;}
    #news .section .entry_body   {text-align: left;}
    #news .section .entry_body .img,
    #news .section .entry_body .txt {margin-left: auto; margin-right: auto; width: 650px;}
    #news .section .entry_body .img a,
    #news .section .entry_body .img a:hover {background: none;}
    #news .section .entry_body .img img {
        -webkit-transition:opacity 0.2s ease-in;
        -moz-transition:opacity 0.2s ease-in;
        transition:opacity 0.2s ease-in;
        max-width: 100%; height: auto;
    }


/*---------------------------------------------------------------------
Shoplist layout
---------------------------------------------------------------------*/
#shoplist .section  {margin-bottom:130px; text-align:center;}
    #shoplist .section h3  {margin-bottom:60px;}
    #shoplist .section li  {margin-bottom:60px; line-height:220%;}
        #shoplist .section li .name   {font-size:117%; display:inline-block; margin-bottom:12px;}
        #shoplist .section li .name a    {text-decoration: none; background:url(../images/common/line_solid-x.gif) repeat-x 0 100%; padding:0 3px 0 3px;}
        #shoplist .section li .name a:hover  {text-decoration: none; background:url(../images/common/line_solid-x2.gif) repeat-x 0 100%; padding:0 3px 0 3px;}