@charset "utf-8";
body, h1, h2, h3, ul, li, dl, dt, dd, p, a, div, span {
    margin: 0;
    padding: 0;
}

html {
    height:100%;
    -webkit-tap-highlight-color:rgba(255,154,40,0.4);
}

body {
    height: 100%;
    margin : 0px auto;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    line-height: 28px;
    color : rgb(52, 2, 94);
    
  background-image : url(img/body/main_bk.png);
  background-repeat : no-repeat;
  background-attachment : fixed;background-position : center bottom;
  
}

a {
    color : rgb(198, 6, 88);
}

img {
    border:0;
}

textarea {
    resize: none;
}

.wrap {
    width: 100%;
    position: relative;
    height: auto !important; /*IE6対策*/
    height: 100%; /*IE6対策*/
    min-height: 100%;
    background :  url(img/body_back.png) repeat;
    overflow: hidden;
}


.anchor {
    margin-top:-120px;
    padding-top:120px;
}


/**/


.tbmenu{
    padding-top : 120px;
    padding-bottom : 0px;
    width : 100%;
    margin: 0 auto;
  

  height : 840px;
  

  background-color : transparent;
}
.tbmenu2{
    padding-top : 120px;
    padding-bottom : 0px;
    width : 100%;
    margin: 0 auto;
  

  height : 80px;
  

  background-color : transparent;
}
.tbwrap{
    
    
    width : 1000px;
    margin: 0 auto;
  

  

  height : 100%;
  padding-bottom : 30px;
  z-index : 11;
  

  background-color : transparent;
}
/************************************************************************************/
.page {
    margin : 0px 0px 0px;
}

.page_full {
    margin: 0;
}


.clear {
    clear: both;
    margin:0;
    padding:0;
    width:0;
    height:0;
}


.wait{
  background-image : url(img/wait.png);
  background-repeat : no-repeat;background-position : center center;
  
  margin-left : auto;
  margin-right : auto;
  
  width : 949px;
  height : 624px;
  text-align : center;
  
  top : 200px;
  margin-top : 200px;
}@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}@keyframes fadeSlideIn {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        left: 0;
        opacity: 1
    }
}


/************************************************************************************/
.topmenu {
    
    z-index: 10;
    width: 100%;
    height : 100px;
    background : transparent none repeat scroll 0% 0%;
  

  position : absolute;
}

.topmenu .bk2 {
    
    z-index : 20;
    width: 100%;
    height : 130px;
    background : transparent url(img/body/menue_bk.png) repeat-x scroll 0% bottom;
  

  position : absolute;
}

.topmenu .contents {
    position : relative;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
  background-color : transparent;
}

.topmenu .contents .ban {
    

    width : 270px;
    height : 16px;
    background : transparent url(img/body/topbar_ban.png) no-repeat scroll left 0%;
  text-align : right;
  padding-right : 0px;
  
  margin-right : 0px;
  
  margin-top : 5px;
  margin-left : 730px;
}
.topmenu .contents .menuitem {
    display: block;
    position: absolute;
    transition: background 0.2s ease-out;
    -moz-transition: background 0.2s ease-out;
    -webkit-transition: background 0.2s ease-out;
    -o-transition: background 0.2s ease-out;
    -ms-transition: background 0.2s ease-out;
}

.topmenu .contents .menuitemd {
    display: block;
    position: absolute;
    opacity: 0.5;
}


.topmenu .contents .menuitem:hover {
    display: block;
    position: absolute;
    transition: background 0.1s ease;
    -moz-transition: background 0.1s ease;
    -webkit-transition: background 0.1s ease;
    -o-transition: background 0.1s ease;
    -ms-transition: background 0.1s ease;
    animation: topmenu_menuitem 0.3s ease 0s 1 normal;
}@keyframes topmenu_menuitem {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0px);
    }
}

.topmenu .contents .top {
    
    
    width : 250px;
    height : 125px;
    background : transparent url(img/body/menue/logo_tittle.png) no-repeat scroll center center;
  

  
  
}

.topmenu .contents .top:hover {
    background : transparent url(img/body/menue/logo_tittle_on.png) no-repeat scroll 0% 0%;
}

.topmenu .contents .story {
    left : 405px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/body/menue/story.png) no-repeat scroll left 0%;
}

.topmenu .contents .story:hover {
    background : transparent url(img/body/menue/story_on.png) no-repeat scroll left 0%;
}

.topmenu .contents .chara {
    left : 490px;

    width : 161px;
    height : 125px;
    background : transparent url(img/body/menue/chara.png) no-repeat scroll left 0%;
}

.topmenu .contents .chara:hover {
    background : transparent url(img/body/menue/chara_on.png) no-repeat scroll left 0%;
}

.topmenu .contents .gallery {
    left : 635px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/body/menue/cg.png) no-repeat scroll left 0%;
}

.topmenu .contents .gallery:hover {
    background : transparent url(img/body/menue/cg_on.png) no-repeat scroll left 0%;
}

.topmenu .contents .special {
    left : 745px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/body/menue/special.png) no-repeat scroll left 0%;
}

.topmenu .contents .special:hover {
    background : transparent url(img/body/menue/special_on.png) no-repeat scroll left 0%;
}

.topmenu .contents .concept{
    left : 285px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/body/menue/concept.png) no-repeat scroll left 0%;
}

.topmenu .contents .concept:hover{
    background : transparent url(img/body/menue/concept_on.png) no-repeat scroll left 0%;
}

.topmenu .contents .dl {
    left: 849px;
    
    width : 125px;
    height : 100px;
    background : transparent url(img/body/menue/dl.png) no-repeat scroll left 0%;
}

.topmenu .contents .dl:hover {
    background : transparent url(img/body/menue/dl_on.png) no-repeat scroll left 0%;
}

/************************************************************************************/

.bottommenu {
    position : fixed;
    bottom: 0;
    width: 100%;
    height : 80px;
    background-repeat : repeat-x;background-attachment : fixed;background-position : center center;
  

  font-weight : bold;
  
  
  right : 0px;
  left : 0px;
  z-index : 15;
  
  
}

.bottommenu .contents {
    
    width: 1000px;
    height: 100%;
    margin : 0px auto 60px;
  position : absolute;
  
  padding-bottom : 5px;
}

.bottommenu .contents .menuitem {
    display: block;
    
    transition: background 0.2s ease-out;
    -moz-transition: background 0.2s ease-out;
    -webkit-transition: background 0.2s ease-out;
    -o-transition: background 0.2s ease-out;
    -ms-transition: background 0.2s ease-out;
  position : absolute;
  color : rgb(255, 11, 126);
}

.bottommenu .contents .menuitem:hover {
    display: block;
    
    transition: background 0.1s ease;
    -moz-transition: background 0.1s ease;
    -webkit-transition: background 0.1s ease;
    -o-transition: background 0.1s ease;
    -ms-transition: background 0.1s ease;
  position : absolute;
}

.bottommenu .contents .warning {
    
    
    bottom : 13px;
    height: 16px;
    font-size : 15px;
    color : rgb(102, 102, 102);
  
  font-weight : bold;
  
  position : absolute;
  left : 530px;
}


.bottommenu .contents .menu {
    
    
    
    width:500px;
    height:13px;
    font-size : 15px;
    color : rgb(255, 11, 126);
  bottom : 16px;
  
  left : 50px;
  position : absolute;
  font-weight : bolder;
}

.bottommenu .contents .menu a {
    color : rgb(255, 11, 126);
    text-decoration: none;
}

.bottommenu .contents .menu span {
    color : rgb(64, 0, 64);
    opacity: 0.5;
    text-decoration: none;
}

.bottommenu .contents .menu a:hover {
    color : rgb(64, 0, 64);
    text-decoration: none;
}

/************************************************************************************/

.title_spec {
    position: static;
    animation: fadeSlideIn 1s ease 0s 1 normal;
    margin: 20px 0;
    width : 161px;
    height: 44px;
    background : transparent url(img/common/title_spec.png) repeat scroll 0% 0%;
}

.title_chara {
    position: static;
    animation: fadeSlideIn 1s ease 0s 1 normal;
    margin : 20px 0px 20px 650px;
    width : 345px;
    height : 113px;
    background : transparent url(img/common/title_character.png) repeat scroll 0% 0%;
  

  z-index : 0;
}

.title_shop {
    position: static;
    animation: fadeSlideIn 1s ease 0s 1 normal;
    margin : -60px 0px;margin-left : 550px;
    width : 345px;
    height : 113px;
    background : transparent url(img/common/title_shop.png) repeat scroll 0% 0%;
  

  z-index : 1;
  
  
}

.title_event{
    position: static;
    animation: fadeSlideIn 1s ease 0s 1 normal;
    margin : -60px 0px;margin-left : 550px;
    width : 345px;
    height : 113px;
    background : transparent url(img/common/title_event.png) repeat scroll 0% 0%;
  

  z-index : 1;
  
  
}


.title_gallery {
    position: static;
    animation: fadeSlideIn 1s ease 0s 1 normal;
    margin : 50px 0px -60px 550px;
    width : 345px;
    height : 113px;
    background : transparent url(img/common/title_gallery.png) repeat scroll 0% 0%;
  

  z-index : 1;
  
  
}
.title_special {
    position: static;
    animation: fadeSlideIn 1s ease 0s 1 normal;
    margin-right : 0px;margin-left : 650px;
    width : 345px;
    height : 113px;
    background : transparent url(img/common/title_special.png) repeat scroll 0% 0%;
  margin-top : 20px;
  margin-bottom : 20px;
  
}


/**********************************************************************************/
.spec .section {
    float: left;
    font-weight: bolder;
    margin: 0 12px 35px 0;
    color: white;
    background-color: #ff7800;
    width: 70px;
    height: 23px;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    animation: spec_section 1s ease 0s 1 normal;
}

.spec .text {
    float: left;
    width: 850px;
    height: 23px;
    margin: 0 0 35px 0;
    text-align: left;
    line-height: 23px;
    vertical-align: middle;
    animation: spec_text 1s ease 0s 1 normal;
}

.spec .text:after {
    clear: both;
}@keyframes spec_text {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }
    30% {
        transform: translateX(20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1
    }
}@keyframes spec_section {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    30% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1
    }
}


.concept_bk{
    position : relative;
    height : 2613px;
  width : 100%;
  background-repeat : no-repeat;background-position : center top;
  background-image : url(img/concept/bese.png);
  
  z-index : -5;
  background-color : transparent;
  
  margin-top : -850px;
  margin-bottom : 30px;
}


.intro_bk01{
    position : relative;
    height : 3046px;
  width : 100%;
  background-repeat : no-repeat;background-position : center top;
  background-image : url(img/story/01.png);
  
  z-index : -5;
  background-color : transparent;
  
  margin-top : -800px;
  
}

.intro_bk02{
    position : relative;
    height : 2455px;
  width : 100%;
  background-repeat : no-repeat;background-position : center top;
  background-image : url(img/story/02.png);
  
  z-index : -5;
  background-color : transparent;
  
  margin-top : -850px;
  
}
#name{
  font-size : 40px;
  color : rgb(255, 11, 126);
  font-weight : bold;
  
  
  margin-top : 50px;
  margin-bottom : 30px;
}
#cd{
  
  width : 281px;
  height : 281px;


background-attachment : scroll;background-position : 0% 0%;
    -webkit-animation: spin 60.0s linear infinite;
    -moz-animation: spin 60.0s linear infinite;
    -ms-animation: spin 60.0s linear infinite;
    -o-animation: spin 60.0s linear infinite;
    animation: spin 60.0s linear infinite;
  
  margin-top : 0px;
  

  padding-top : 80px;
  padding-left : 30px;
  float : left;
}

#cd2{
  
  width : 281px;
  height : 281px;


background-attachment : scroll;background-position : 0% 0%;
    -webkit-animation: spin 60.0s linear infinite;
    -moz-animation: spin 60.0s linear infinite;
    -ms-animation: spin 60.0s linear infinite;
    -o-animation: spin 60.0s linear infinite;
    animation: spin 60.0s linear infinite;

  margin-top : 0px;

  padding-right : 0px;
  padding-bottom : 5px;
  margin-right : 0px;
  
  margin-left : 150px;
}

#cd3{
  
  width : 281px;
  height : 281px;


background-attachment : scroll;background-position : 0% 0%;
    -webkit-animation: spin 60.0s linear infinite;
    -moz-animation: spin 60.0s linear infinite;
    -ms-animation: spin 60.0s linear infinite;
    -o-animation: spin 60.0s linear infinite;
    animation: spin 60.0s linear infinite;
  
  margin-top : 0px;
  

  padding-top : 80px;
  padding-left : 120px;
  float : left;
}
#bigfont{
  font-size : 50px;
  color : rgb(255, 11, 126);
  
  
  
  
  
  top : 10px;
  margin-top : 20px;
  padding-top : 20px;
  padding-bottom : 15px;
  font-weight : bolder;
}
#middlefont{
  font-size : 25px;
  color : rgb(255, 255, 255);
  
  
  
  
  
  top : 10px;
  
  padding-top : 5px;
  padding-bottom : 5px;
  font-weight : bolder;
  background-color : rgb(255, 11, 126);
  width : 700px;
  margin-left : auto;
  margin-right : auto;
}
#dlfont{
  font-size : 15px;
  color : rgb(255, 255, 255);
  
  
  
  
  
  top : 10px;
  
  padding-top : 5px;
  padding-bottom : 5px;
  font-weight : bolder;
  background-color : rgb(0, 128, 255);
  width : 700px;
  margin-left : auto;
  margin-right : auto;
  text-align : center;
}
@keyframes topmenu_menuitem {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0px);
    }
}
#shikishi{
  float : right;
  position : relative;
  margin-top : 100px;
  
  padding-right : 100px;
}

#name_small{
  font-size : 16px;
  font-weight : bold;
  color : rgb(102, 102, 102);
  
  
  margin-top : 30px;
  margin-bottom : -50px;
}