@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/base/body_back.jpg);
  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 : 100px;
    padding-bottom : 0px;
    width : 100%;
    margin: 0 auto;
  

  height : 1400px;
  
}
.tbwrap{
    
    
    width : 1000px;
    margin: 0 auto;
  

  

  height : 100%;
  padding-bottom : 30px;
  z-index : 11;
  
}
/************************************************************************************/
.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 : url(img/base/menu_back.png);background-position : 0% 0%;
  

  position : absolute;
}

.topmenu .bk2 {
    
    z-index: 10;
    width: 100%;
    height : 100px;
    background : url(img/base/menu_back2.png);background-position : 0% 0%;
  

  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;
    
    width : 169px;
    height : 100px;
    background : transparent url(img/base/bm_menu_top.png) no-repeat scroll center center;
  
}

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

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

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

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

    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_chara.png) no-repeat scroll left 0%;
}

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

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

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

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

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

.topmenu .contents .spec {
    left : 800px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_spec.png) no-repeat scroll left 0%;
}

.topmenu .contents .spec:hover {
    background : transparent url(img/base/menu_spec_ov.png) no-repeat scroll left 0%;
}

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

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

.topmenu .contents .system {
    left: 849px;
    
    width : 165px;
    height : 100px;
    background : transparent url(img/base/menu_system.png) no-repeat scroll left 0%;
}

.topmenu .contents .system:hover {
    background : transparent url(img/base/menu_system_ov.png) no-repeat scroll left 0%;
}
.topmenu .contents .home {
    left : 910px;
    
    width : 66px;
   
    height : 100px;
    background : transparent url(img/base/menu_home.png) repeat scroll 0% 0%;
}

.topmenu .contents .home:hover {
    background : transparent url(img/base/menu_home_ov.png) repeat scroll 0% 0%;
}

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

/************************************************************************************/
.topmenu_1203 {
    
    z-index: 10;
    width: 100%;
    height : 100px;
    background : white;background-attachment : scroll;background-position : 0% 0%;
  

  position : absolute;
  
}

.topmenu_1203 .bk2 {
    
    z-index: 10;
    width: 100%;
    height : 100px;
    background : rgb(255, 0, 108);background-repeat : repeat;background-attachment : scroll;background-position : 0% 0%;
  

  position : absolute;
}

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

.topmenu_1203 .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_1203 .contents .menuitemd {
    display: block;
    position: absolute;
    opacity: 0.5;
}


.topmenu_1203 .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_1203 .contents .top {
    left : 15px;
    
    width : 169px;
    height : 100px;
    background : transparent url(img/base/bm_menu_top.png) no-repeat scroll center center;
  
}

.topmenu_1203 .contents .top:hover {
    background : transparent url(img/base/bm_menu_top_ov.png) no-repeat scroll 0% 0%;
}

.topmenu_1203 .contents .story {
    left : 250px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_story.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .story:hover {
    background : transparent url(img/base/menu_story_ov.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .chara {
    left : 370px;

    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_chara.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .chara:hover {
    background : transparent url(img/base/menu_chara_ov.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .gallery {
    left : 520px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_gallery.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .gallery:hover {
    background : transparent url(img/base/menu_gallery_ov.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .special {
    left : 670px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_special.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .special:hover {
    background : transparent url(img/base/menu_special_ov.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .spec {
    left : 800px;
    
    width : 152px;
    height : 100px;
    background : transparent url(img/base/menu_spec.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .spec:hover {
    background : transparent url(img/base/menu_spec_ov.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .dl {
    left: 849px;
    
    width : 165px;
    height : 100px;
    background : transparent url(img/base/menu_dl.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .dl:hover {
    background : transparent url(img/base/menu_dl_ov.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .system {
    left: 849px;
    
    width : 165px;
    height : 100px;
    background : transparent url(img/base/menu_system.png) no-repeat scroll left 0%;
}

.topmenu_1203 .contents .system:hover {
    background : transparent url(img/base/menu_system_ov.png) no-repeat scroll left 0%;
}
.topmenu_1203 .contents .home {
    left : 910px;
    
    width : 66px;
   
    height : 100px;
    background : transparent url(img/base/menu_home.png) repeat scroll 0% 0%;
}

.topmenu_1203 .contents .home:hover {
    background : transparent url(img/base/menu_home_ov.png) repeat scroll 0% 0%;
}

/************************************************************************************/
.bottommenu {
    position : fixed;
    bottom: 0;
    width: 100%;
    height : 30px;
    background-image : url(img/base/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;
  color : yellow;
}

.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 : white;
  
  font-weight : bold;
  
  position : absolute;
  left : 530px;
}

.bottommenu .contents .warning_1203 {
    
    
    bottom : 13px;
    height: 16px;
    font-size : 15px;
    color : white;
  
  font-weight : bold;
  
  position : absolute;
  left : 530px;
}
.bottommenu .contents .menu {
    
    
    
    width:500px;
    height:13px;
    font-size : 15px;
    color : yellow;
  bottom : 16px;
  
  left : 50px;
  position : absolute;
  font-weight : bolder;
}

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

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

/************************************************************************************/
.bottommenu_1203 {
    position : fixed;
    bottom: 0;
    width: 100%;
    height : 35px;
    background-repeat : repeat;background-attachment : fixed;background-position : center bottom;
  

  font-weight : bold;
  
  
  right : 0px;
  left : 0px;
  

  background-color : rgb(64, 0, 0);
}

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

.bottommenu_1203 .contents_1203 .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 : yellow;
}

.bottommenu_1203 .contents_1203 .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_1203 .contents_1203 .warning {
    
    
    bottom : 13px;
    height: 16px;
    font-size : 15px;
    color : white;
  
  font-weight : bold;
  
  position : absolute;
  left : 530px;
}

.bottommenu_1203 .contents_1203 .menu {
    
    
    
    width:500px;
    height:13px;
    font-size : 15px;
    color : yellow;
  bottom : 16px;
  
  left : 50px;
  position : absolute;
  font-weight : bolder;
}

.bottommenu_1203 .contents_1203 .menu a {
    color : yellow;
    text-decoration: none;
}

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

.bottommenu_1203 .contents_1203 .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
    }
}