@charset "UTF-8";
/*index*/
html { overflow-x: hidden; }
.color-line { display: none; }
#global-nav li {text-shadow: 0 0 6px rgba(5, 22, 155, 0.9);}

.key-area {position: relative;width: 100%;height: 1720px;background: url(/img/index/key/bg-key.jpg) top center no-repeat;background-size:cover;}
.key-ch-area { margin- 0 auto; width: 100%; max-width: 1700px; height:100%; background: url(/img/index/key/key.png) center -50px no-repeat; background-size:cover; }
/*  .key-ch-area header{background-color: rgba(4,14,144,0.3);}*/

  #logo, .index-catch, .key-list li, .bnr-list, .band-info-area, .key-signup{ position: absolute; display: block; }
  #logo { top: 100px; left: calc(50% - 180px); }
  .key-signup { background: url(/img/index/key/bg-signup.png) top center no-repeat; width: 455px; height: 120px; top: 570px; left: calc(50% - 220px);}
    .key-signup .apli-list{ margin: 29px auto 0; text-align: center;}
  .index-catch { top: 40px; right: 0px; }  
  .bnr-list {top: 860px;left: 0px;display: table;border-collapse: separate;border-spacing: 16px 0;width: 1032px; text-align: center;}
    .bnr-list>li{display: inline-block;vertical-align: top;margin: 0 5px 0 0;font-size: 0;}
    .bnr-list>li:nth-child(5){margin:0 0 0 0}
  .band-info-area {top: 1040px;left: 0px;display: table;border-collapse: separate;border-spacing: 16px 0;} 
    .band-info-area .sub-tit{ font-size: 48px; }
    .band-list, .info-area { display: table-cell; vertical-align: top; }
    .band-list { width: 380px; height: 530px; }
    .band-list a{ display:block;height:100%; }
    .info-area { width: 570px; height: 530px; padding-left: 16px; }
  .key-list li{ z-index: 0;display:none;}
    .key-asahi { top: -90px; left: 30px;}
    .key-mairy { top: -20px; left: 590px;}
    .key-yamato { top: 220px; left: -120px;}
    .key-kyo { top: 260px; left: 685px;}
    .none {display:none;}
  .index-mainte {width: 320px;height: 130px;font-size: 12px;background: rgba(0, 0, 0, 0.7) url(../img/common/bg-stripe.png) top center repeat;}
  .index-mainte h3{margin: 4px 4px 7px;font-size: 18px;font-weight: bold;text-align: center;}
    .index-mainte a{ color:#fff; }
    .index-mainte ul{margin: -5px 16px 0;width: 280px;font-size: 0;}  
      .index-mainte li{margin-bottom: 4px;padding: 0;border-bottom:1px dashed #666;overflow: hidden;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 11px;}
        .mainte-entry { display: inline- block; margin-right: 8px;}
  
#index-info { display: relative; margin-top: 16px; width: 570px; color: #666; }
  .info-area .sub-tit{ margin: 10px 0 54px; font-size: 48px; }
  .info-area .btn-link a,.index-twitter-area .btn-link a{ color: #999; border:1px solid #666; background-color: rgba(0,0,0,0.5);}
  .info-area .btn-link a::after,.index-twitter-area .btn-link a::after { border-right: 2px solid #999; border-top: 2px solid #999;}
  .info-area .btn-link a{ position: absolute; top: 3px; right: 43px;}
#index-info li { position: relative; display: table; margin: 0 0 16px 0; padding: 0 32px 16px 0; background: rgba(0, 0, 0, 0.3) url(../img/common/bg-stripe.png) top center repeat; color:#fff;}
#index-info li a{ color:#fff;}
  .news-entry{ width: 50px; font-size: 38px; text-align: center; color:#666;}
  .month, .day, .part{ position: absolute;}
    .month{ top: 10px; left: 15px;}
    .day{ top: 40px; left: 35px;}
    .part{ top: 28px; left: 35px; font-size: 20px; color:#666;}
  #index-info h4, #index-info p{ display: block; padding-left: 80px; width: 400px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  #index-info .news-text p{ font-size: 12px;}
  #index-info li:hover{ opacity:0.5; cursor: pointer}

.index-twitter-area { margin: 0 auto; width: 400px !important; }
  .index-twitter-area .sub-tit{ margin: 10px 0 40px;}
  .index-twitter-area .sub-tit span{ font-size: 14px; letter-spacing: .2em;}
  .index-twitter-area .btn-link a{ margin: 40px auto; text-align: center; width: -webkit-calc(100% - 6em);  width:calc(100% - 6em);
background-color: rgba(0, 0, 0, 0.3);
}
  .index-twitter-area .twitter-timeline{background-color: #b9d7ff66!important;}

.about-area { padding: 160px 0;}

.game-info-area {padding: 100px 0 60px; background: #A7122E;}
  .game-info-signup{  position: relative; margin: 0 auto;  display: block; background: url(/img/index/text-game-info.png) top center no-repeat; width:840px; height:180px;}
  .game-info-logo{  position: relative; margin: 0 auto;  display: block; background: url(/img/index/text-game-info_logo.png) top center no-repeat; width:840px; height:180px;}
    .game-info-signup .apli-list{ position: absolute; top: 120px; left: 395px;}
    
#pageTop { background: #A7122E; margin-bottom: -3px;}

.signup-twitter-area { padding: 80px 0; background: url(../img/common/bg-renga.jpg) top center repeat;}
  .signup-twitter-area dl{ padding: 16px; width: 380;}
  .index-signup-area dt h4{ margin: 80px 0 36px; }
  .signup-twitter-area dd p{ margin: 16px 0; }
  .signup-twitter-area h5{ font-size: 30px; line-height: 1.2em; }
  .index-signup-area a,.index-twitter-area a{ display: block; width: 180px; }
  .index-signup-area a{ margin: 60px auto 0;}


/* bg-movie */
#bg-movie {
	position: fixed;
	left: 0; top: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.overlayPattern {
  /*background-image: url(../img/common/movie-filter.png);*/
  background: linear-gradient(-45deg, rgba(229,93,135,.2), rgba(95,195,228,.2)), url(../img/common/movie-filter.png);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

/* loading */
#loading{
    position:relative;
}
#loading span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#d31553;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}
 
#loading span:nth-child(2){
left:11px;
animation-delay: .2s;
 
}
#loading span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#loading span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#loading span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#d31553;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#34dbbe;}
    100% {height:5px;transform:translateY(0px);background:#ff9e14;}
}