@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: 0;
    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-color : rgb(252, 63, 115);
}

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 : rgb(255, 255, 225) url(img/body_back.png) repeat;
    overflow: hidden;
}


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


/**/
.tbmenu_contents {
    padding-top: 81px;
    padding-bottom: 58px;
    width: 1000px;
    margin: 0 auto;
}

/************************************************************************************/
.page {
    margin: 0 0 0 60px;
}

.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 : rgb(255, 0, 128) url(img/menu_back.png) repeat;
  

  position : absolute;
}

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

.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 {
    left : 15px;
    bottom: 12px;
    width : 230px;
    height: 70px;
    background : transparent url(img/menu_tittle.png);
}

.topmenu .contents .top:hover {
    background : transparent url(img/menu_tittle_ov.png) ;
}

.topmenu .contents .story {
    left : 300px;
    bottom: 12px;
    width : 95px;
    height: 70px;
    background : transparent url(img/menu_story.png) ;
}

.topmenu .contents .story:hover {
    background : transparent url(img/menu_story_ov.png) ;
}

.topmenu .contents .chara {
    left : 410px;
    bottom: 12px;
    width : 145px;
    height: 70px;
    background : transparent url(img/menu_chara.png) ;
}

.topmenu .contents .chara:hover {
    background : transparent url(img/menu_chara_ov.png) ;
}

.topmenu .contents .gallery {
    left : 580px;
    bottom: 12px;
    width : 122px;
    height: 70px;
    background : transparent url(img/menu_gallery.png) ;
}

.topmenu .contents .gallery:hover {
    background : transparent url(img/menu_gallery_ov.png) ;
}

.topmenu .contents .special {
    left : 720px;
    bottom: 12px;
    width : 110px;
    height: 70px;
    background : transparent url(img/menu_special.png) ;
}

.topmenu .contents .special:hover {
    background : transparent url(img/menu_special_ov.png) ;
}

.topmenu .contents .spec {
    left: 849px;
    bottom: 12px;
    width : 82px;
    height: 70px;
    background : transparent url(img/menu_spec.png) ;
}

.topmenu .contents .spec:hover {
    background : transparent url(img/menu_spec_ov.png) ;
}

.topmenu .contents .home {
    left: 951px;
    bottom: 12px;
    width : 38px;
    height: 70px;
    background : transparent url(img/menu_home.png) ;
}

.topmenu .contents .home:hover {
    background : transparent url(img/menu_home_ov.png) ;
}

/************************************************************************************/
.bottommenu {
    position : fixed;
    bottom: 0;
    width: 100%;
    height : 30px;
    background-image : url(img/bottommenu_back.png);background-repeat : repeat;background-attachment : fixed;background-position : center bottom;
  

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

.bottommenu .contents {
    
    width: 1000px;
    height: 100%;
    margin: 0 auto;
  position : absolute;
}

.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;
}

.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: 12px;
    color : rgb(64, 0, 64);
  left : 470px;
  font-weight : bold;
  position : absolute;
}

.bottommenu .contents .menu {
    
    
    
    width:500px;
    height:13px;
    font-size: 13px;
    color: white;
  bottom : 16px;
  
  left : 50px;
  position : absolute;
}

.bottommenu .contents .menu a {
    color: white;
    text-decoration: none;
}

.bottommenu .contents .menu span {
    color: white;
    opacity: 0.5;
    text-decoration: none;
}

.bottommenu .contents .menu a:hover {
    color: #781400;
    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
    }
}