html, body {
width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
.skrollable {position:fixed;z-index:100;}
.skrollr-mobile .skrollable {position:absolute;}
.skrollable .skrollable {position:absolute;}
.skrollable .skrollable .skrollable {position:static;}



body{overflow-x: hidden;height: 10000px;-webkit-animation:fadeIn 2s ease-out 0s 1 normal;animation:fadeIn 2s ease-out 0s 1 normal;font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;/*/background-color:#fff;/*/}

#wrapper{max-width: 1400px;min-width: 900px;margin: 0 auto;overflow: hidden;}
/* ==========================================================================
 ■Header
 ========================================================================== */
#header{margin:0 auto !important;width:1000px;height:60px;padding-bottom:10px;position: relative;z-index:101;margin:0;}
#header.top{background-image:none;}
#header_in{width:1000px;margin:0 auto;overflow:hidden;}
#header:after{content:".";display:block;visibility:hidden;height:0.1px;font-size:0.1em;line-height:0;clear:both;}
* html #header{display:inline-block;}
*+ html #header{display:inline-block;}

#logo_area{margin:0px auto !important;}
.msys_logo{position:fixed;top:0px;>top:0px;left:20px;z-index:13600;width:200px;height:55px;float:left;padding:0px 0px 0px 0px;}
.msys_logo a:hover{
opacity:0.8;
filter:alpha(opacity=80);       /* ie lt 8 */
-ms-filter:"alpha(opacity=80)"; /* ie 8 */
-moz-opacity:0.8;                /* FF lt 1.5, Netscape */
-khtml-opacity:0.8;             /* Safari 1.x */
zoom:1;
}




#entry_bt{position:fixed;top:20px;>top:20px;right:20px;z-index:13600;}
#facebook_bt{position:fixed;bottom:40px;left:10px;font-size:77%;z-index:15000000000;}
#facebook_bt a:hover{
opacity:0.8;
filter:alpha(opacity=80);       /* ie lt 8 */
-ms-filter:"alpha(opacity=80)"; /* ie 8 */
-moz-opacity:0.8;                /* FF lt 1.5, Netscape */
-khtml-opacity:0.8;             /* Safari 1.x */
zoom:1;
}

/* ==========================================================================
 ■Footer
 ========================================================================== */

#g_footer_out{color:#fff;position:fixed;bottom:0px;font-size:12px;z-index:1500000000000000;width:100%; background-color:#006;}
#g_footer{width:960px;margin:0 auto;padding:10px 0 30px 0;text-align:left;}
#g_footer .footercopy2{float:left;color:#fff;margin:0px; display: inline;}
#g_footer .footercopy2 a{text-decoration:none;color:#fff;}
#g_footer .footercopy{float:right;margin:0px; display: inline;}
.footercopy2 a:hover{
opacity:0.8;
filter:alpha(opacity=80);       /* ie lt 8 */
-ms-filter:"alpha(opacity=80)"; /* ie 8 */
-moz-opacity:0.8;                /* FF lt 1.5, Netscape */
-khtml-opacity:0.8;             /* Safari 1.x */
zoom:1;
}
/* page-top */
#page-top {position: fixed;bottom: 2px;right: 16px;font-size: 77%;z-index:999;z-index:4500000000000001 !important; border:1px solid #FFF;}
#page-top a {background: #006;text-decoration: none;color: #fff;width: 100px;padding:10px 0;text-align: center;display: block;}
#page-top a:hover {text-decoration: none;background: #09F;color: #fff;}


/*commonStyle--------------------------------------------------
*/
@-webkit-keyframes fadeIn{0% {opacity: 0;}30% {opacity: 0;}100% {opacity: 1}
}
@keyframes fadeIn{0% {opacity: 0;}30% {opacity: 0;}100% {opacity: 1}
}
.wrapper{position: fixed;width: 100%;}
.wrapperInner{margin: 0 auto;}
header{padding: 0;position: fixed;width: 100%;z-index: 2000;top:0;}
header .headerInner{max-width: 1340px;margin: 0 auto;padding: 0;}

@media (max-width: 640px){header .headerInner{ padding: 0;}
}

.USER_PC.VIEW_TB header{ width: 98.9%;}
header .logo,header .topArea .right .link a,header nav{transition: all 0.1s ease-out;}
header.contraction .logo{padding-top: 0;}
header.contraction .topArea .right .link a{padding-top: 10px;}
header.contraction nav{padding-top: 5px;padding-bottom: 5px;}
/*mainVisual--------------------------------------------------
*/
.mainVisual{position: relative;height:1000px;}
.earthText{opacity: 0;width:1300px;height: 800px;margin:0 auto;text-align:center;}

/*section--------------------------------------------------*/
.sectionInner{position: relative;top:0;left:50%;margin-left: -700px;width: 100%;}

/*card----------*/
.section .card{position: absolute;height:480px !important;}

/*各カテゴリー個別設定--------------------------------------------*/
.project{margin-top:0px;background:#fff;height:900px !important;}
.concept{margin-top:0px;background:#fff;height:900px !important;}
.gallery{margin-top:0px;background:#fff;height:900px !important;}
.character{margin-top:0px;background:#fff;height:900px !important;}
.entry{margin-top:0px;background: #fff;height:900px !important;}
.attention{margin-top:0px;margin-bottom:440px;background: #fff;height:900px !important;}

.pageTop{margin-top: -500px;position: relative;z-index: 1000;}
.footer{position: relative;z-index: 1000;}

/* パララックスの背景 */
.prt_bt{width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;}

.kira{background: url(../img/light.png) repeat;height:400px;margin-top:300px;z-index:0;width:1400px !important;}
.cloud{background: url(../img/cloud.png) repeat;height:800px;margin-top:500px;width:1400px !important;}
.feather{background: url(../img/feather.png) repeat;height:400px;margin-top:300px;width:1400px !important;}
.seagull{background: url(../img/seagull.png) no-repeat;height:400px;margin-top:500px;width:1400px !important;}
.star{background: url(../img/star.png) repeat;height:400px;margin-top:500px;width:1400px !important;}
.bubble{background: url(../img/bubble.png) repeat;height:400px;margin-top:500px;width:1400px !important;}

#title_project{z-index:1000000000000000000000000000000 !important;}
#image_project{z-index:-100000 !important;}


/*ギャラリーのフリップ--------------------------------------------*/
.flipcard,.list-tile > li {width:170px;height:175px;margin:0px;padding:0px;}
.flipcard,.list-tile,.slide {float:left;}
.flipcard.flip .ha.flip-front,.flip-list .ha.flip-front,.flipcard.flip .ha.flip-back,.flip-list .ha.flip-back {position:absolute;z-index:20;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;}


a, img{border:0;outline:none;}
html{width:100%;height:100%;}
body{margin:0;padding:0;}
div{display:block;}
ul li{list-style-type:none;}
.ov{position:absolute!important;top:0;left:0;}
.ovtop{position:absolute!important;top:0;left:0;}


#load{display:block;position:absolute;width:187px;height:33px;top:50%;left:50%;margin-left:-93px;margin-top:-14px;z-index:999999;}

#wrapper{position:fixed;width:100%;min-width:1024px;height:auto;　z-index:1000;display:none;}
#header{width:100%;height:64px;position:absolute;top:0;left:0;z-index:3;}

#menu{position:absolute;top:0;left:0%;z-index:999;width:100%;height:60px;margin-top:530px;background-color: #09F;}
#menu #menu_inner{width:100%;height:60px;}
#menu #menu_inner ul{display:block;width:780px;height:60px;margin:0 auto;}
#menu #menu_inner ul li{display:block;float:left;position:relative;}
#menu #menu_inner #icon{position:absolute;top:0;left:100%;}


#container{position:relative;width:100%;min-width:1024px;height:100%;margin:0 auto;}
#cont_inner{position:relative;width:100%;height:100%;}

.section{position:relative;width:100%;clear:both;}
.sc_inner{width:1024px;position:absolute;left:50%;margin-left:-450px;}

#top_area_inner{height:800px;}
#area_project_inner, #area_concept_inner, #area_gallery_inner, #area_character_inner, #area_entry_inner, #area_attention_inner{height:1000px;}


/* sc2 ***********************************************************/
.sc2_inner .dsc{width:100%; text-align:center; position:relative; left:0%;}
.sc2_inner #dsc1{top:0;}
.sc2_inner #dsc2{top:0;}
.sc2_inner #dsc3{top:0;}
.sc2_inner #dsc4{top:0;}
.sc2_inner #dsc5{top:0;}
.sc2_inner #dsc6{top:0;}

@media screen and (max-width:940px){
.sc2_inner .dsc{left:0%;}
}

@media screen and (max-width:840px){
.sc2_inner .dsc{left:-10%;}
}
@media screen and (max-width:740px){
.sc2_inner .dsc{left:-20%;}
}

@media screen and (max-width:640px){
.sc2_inner .dsc{left:-30%;}
}

/* area ***********************************************************/
#area_top{width:1024px;margin:0 auto;height:900px;}
#area_top_inner div{position:absolute;}
#area_top_inner #backno{top:240px;left:0;}
#area_top_inner #camera{top:300px;left:0;}
#area_top_inner #t1{top:0;left:0px;}
#area_top_inner #t2{top:60px;left:0px;}
#area_top_inner #spec{top:470px;left:0;}



#area_project{width:1024px;margin:0px auto;height:900px;overflow:hidden;padding:0px;}
#dsc1 .main_title{z-index:10000000;}
#dsc1 .t1{top:200px;left:0; }
#dsc1 .leaf{top:0;left:0;}

#area_concept{width:1024px;margin:0 auto;height:900px;overflow:hidden;padding:0px;}
#dsc2 .main_title{z-index:10000000;}
#dsc2 .t1{top:200px;left:0;}
#dsc2 .camera{top:180px;left:0;}
#dsc2 .leaf{top:0px;left:0;}

#area_gallery{width:1024px;margin:0 auto;height:900px;overflow:hidden;padding:0px;}
#dsc3 .main_title{top:0;left:0;}
#dsc3 .leaf{top:0px;left:0;}
#dsc3 .t2{top:0px;width:680px;margin:0 auto; text-align:center;}

#area_character{width:1024px;margin:0 auto;height:900px;overflow:hidden;padding:0px;}
#dsc4 .main_title{top:0;left:0;}
#dsc4 .leaf{top:0px;left:0; display: inherit;}
#dsc4 .t1{top:0px;left:0;z-index:100; display:inherit;}

#area_entry{width:1024px;margin:0 auto;height:900px;overflow:hidden;padding:0px;}
#dsc5 .main_title{top:0;left:0;}
#dsc5 .t1{top:0;left:0;}
#dsc5 .t3{top:380px;left:0;}

#area_attention{width:1024px;margin:0 auto;height:900px;overflow:hidden;padding:0px; }
#dsc6 .main_title{top:0;left:0;}
#dsc6 .t1{top:0;left:0;}




#wrapper{display:none;z-index:1000;}
.sc_inner{display:none;}
#header{top:-80px;}
#menu{margin-left:-60px;}




#revarsal {width: 70%;left: 50%;top: 20%;margin-left: -35%;text-align: center;font-size: 150%;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;}
#expander {height: 100%;padding-top: 10%;text-align: center;}
#slidetoleft {width: 100%;height: 100%;padding-top: 10%;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#slidetoright {width: 100%;height: 100%;padding-top: 10%;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#turncanvas {width: 100%;height: 100%;}
#turncolorsize {height: 100%;padding-top: 10%;text-align: center;}
.w680{width:680px !important; text-align:center; margin:0 auto;}


#finish {width: 100%;height: 100%;padding-top: 10%;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#sp img{visibility: hidden; }

@media screen and (min-width:680px) and ( max-width:840px) {
#revarsal{width: 100%;left:0;top: 20%;margin-left:0;}
#revarsal img{width:100% !important;}
#menu{ display:none;}
}
@media screen and ( max-width:680px) {
#sp img{ display: block; visibility: visible; }
#menu{ display:none;}

}