@import url('https://fonts.googleapis.com/css?family=Oswald:500&text=STORYCHARACTERSSYSTEMSPECIALPRODUCTILLUSTRATIONVOICEMENUNEXTPREVwitter');
*{box-sizing: border-box;}
html,body{margin:0;height:100%;font-size:18px;}
body{
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  overflow-x:hidden;
}
#wrapper{
  width:100%;
  margin-top:31%;
  position:relative;
  z-index:2;
  background-color:rgba(255,255,255,1);
  padding-top:0.01%;
}

/*CUSTOM*/
.slideOutRight_Fillmode_Forwords{
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
  animation-fill-mode:forwards;
}


/*---BX SLIDE---*/
.bx-wrapper .bx-viewport{
  border-width:0 !important;
  background:none !important;
  box-shadow:none !important;
  left:0 !important;
}

.bx-wrapper .bx-controls-direction a{
  width:5vw !important;
  height:5vw !important;
  background:url(../images/common/bxSlide_changer.svg) no-repeat 0 !important;
  background-size:100% auto !important;
  display:block;
  top:50% !important;
  margin-top:-2.5vw !important;
  animation: sliderPager 0.5s ease -2s infinite alternate;
}

@keyframes sliderPager {
  0% {opacity:1;}
  100% {opacity:0.7;}
}

.bx-wrapper .bx-prev{
  left:0px !important;
  transform:rotate(180deg);
}

.bx-wrapper .bx-next{
  right:0px !important;
}

/*COMMON*/
.sub{
  font-size:75%;
  text-indent:-1em;
  margin-left:1em;
}
.covering{
  filter:blur(5px);
}

.oneword{
  display:inline-block;
}

.stripe_bg{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  background-image:url(../images/common/stripe_bg.png);
}
header{
  width:100%;
  position:fixed;
  top:0;left:0;
}
header #visual{
  display:block;
  width:100%;
  /*margin-top:-10%;*/
  /*transform: translate(0,-12%);*/
}
#btn_order_index{
  display:block;
  width:20%;
  float:right;
  margin-top:-20%;
}
#btn_order_index img{
  display:block;
  width:100%;
}



h2{
  font-family: 'Oswald', sans-serif;
  font-size:5vw;
  padding:0 20px;
  display:block;
  width:50%;
  margin:5% auto;
  text-align: center;
  line-height:1.3;
  color:#444444
}
h2 .subtitle{
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  display:block;
  font-size:25%;
  border:3px #777 double;
  border-width:3px 0 0 ;
  text-align:center;
  padding-top:1%;
}

section{
  width:100%;
  position:relative;
  overflow:hidden;
}
.content{
  width:95%;
  max-width:1000px;
  margin:0 auto;
}
.youtube{
  width:100%;
  padding-top:56.25%;
  position:relative;
}
.youtube>iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.screenshots{
  display:flex;
  flex-flow: row wrap;
  margin:0.5% 0 2%;
}

.screenshots a{
  display:block;
  margin:0.1% 0.2% 0.4%;
  position:relative;
  font-size:75%;
  text-decoration:none;
  color:#111;
  line-height:1.1;
  overflow:hidden;
}
.screenshots a:before{
  content:"";
  background-color:rgba(0,0,0,0.7);
  position:absolute;
  left:0;top:0;
  width:70px;
  height:70px;
  transform:translate(-50%,-50%) rotate(45deg);
}
.screenshots a:after{
  content:"＋";
  font-weight:bold;
  font-size:27px;
  color:#FFF;
  position:absolute;
  left:1px;top:1px;
}

.screenshots a img{
  display: block;
  width:100%;
  margin-bottom:0.2%;
}

footer{
  padding-top:3%;
  background-color: #FFF;
  padding-bottom:1px;
  text-align:center;
  background-color:#FFF;
}
footer #socialbuttons,
footer .footer_links{
  margin:2% auto;
}

footer .footer_banner{
  width:20%;
  max-width:500px;
}

footer #socialbuttons img{
  width:15%;
  max-width:45px;
  margin:0 0.5%;
}

footer .footer_links a{
  color:#000;
  text-decoration: none;
  font-size:90%;
  display: inline-block;
}

footer #footer_copyright{
  width:100%;
  max-width:700px;
  display: block;
  margin:2% auto 1%;
}

/*FLOATING OBJECT-*/

#btn_menu{
  padding:15px;
  background-color:rgba(0,0,0,0.8);
  border-radius:50%;
  display:none;
}
#btn_menu img{display:block;width:100%;}

.btn_menu_floating,
.btn_order_floating{
  position:fixed !important;
  z-index:1001;
}
.btn_menu_floating{
  display:block !important;
  width:70px;
  height:70px;
  top:-100px;
  left:0 !important;
  margin-top:20px;
  margin-left:20px;
  animation: downIn 0.3s ease 0s forwards;
}
.btn_order_floating{
  width:25% !important;
  max-width:200px;
  bottom:-200px;
  right:0 !important;
  animation: upIn 0.3s ease 0s forwards;
}
.btn_order_floating img{
  visibility:visible !important;
  opacity:1 !important;
}

#mobile_menu{
  position:fixed;
  width:100%;
  bottom:0;
  left:0;
  text-decoration: none;
  z-index:1001;
  display:none;
  flex-flow: nowrap row;
  justify-content: space-between;
  background-color:#000;
  /*animation: upIn 1s ease 0 forwards;*/
}
#mobile_menu>a{
  font-family: 'Oswald', sans-serif;
  color:#FFF;
  text-decoration:none;
  display:block;
  margin:0;
  padding:10px;

  /*order*/
  width:35%;background-color:#D00;text-align:center;font-size:4vw;font-weight:bold;
}
#mobile_menu>a#btn_mob_menu{width:65%;background-color:#000;text-align:left;}
#mobile_menu>a>img{height:5vw;vertical-align:-14%;margin-right:1vw;}

#attention_orderlink{
  position:fixed;
  bottom:-400px;
  right:1%;
  width:25%;
  max-width:170px;
  z-index:1002;
  animation: upIn 0.3s ease 1.5s forwards;
}
@keyframes upIn {
  0%{bottom:-200px;}
  100%{bottom:0;}
}
@keyframes downIn {
  0%{top:-200px;}
  100%{top:0;}
}


#anime_loading{
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:10%;
  max-width:70px;
  z-index:1003;
  opacity:0.4;
  display:none;
}
#anime_loading img{
  width:100%;
  animation: rote 1s linear 0s infinite;
}

@keyframes rote {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(359deg);}
}

/*MENU*/
#global_menu{
  position:absolute;
  top:0;left:0;
}
header nav,
header nav>div,
header nav>div ul{
  border-style:double;
  border-color:#000;
  border-width:0 0 0 10px;
  padding:0 4px;
  list-style-type: none;
}
header nav{
  border-style:solid;
  border-width:0 0 0 3px;
  transform:rotate(45deg) translate(-76%,-28%);
}
header nav>div ul{
  padding:150% 10px;
}
nav>div ul li{list-style-type: none;}
nav>div ul li a{
  display:block;
  padding:2px 0;
  color:#000;
  text-decoration:none;
  font-family: 'Oswald', sans-serif;
  font-weight:bold;
  font-size:2vw;
  cursor:pointer;
}
nav>div ul li a:hover{
  text-decoration:underline;
}

#twbox_window nav{
  width:100%;
  text-align:center;
  margin:120px 0;
}
#twbox_window nav ul{
  padding:0;
}

#twbox_window nav li a{
  padding:1%;
  font-size:200%;
}

nav#submenu{
  width:100%;
  max-width:900px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-flow: nowrap row;
  justify-content: space-between;
}

nav#submenu a{
  display:block;
  border:1px #DDD solid;
  border-width:1px 1px 0;
  padding:2% 2% 1.5%;
  text-decoration:none;
  color:#444;
  transform:skew(-45deg);
  background-color:#FFF;
}
nav#submenu a span{
  display: block;
  transform:skew(45deg);
}
nav#submenu a.current{
  background:linear-gradient(to bottom,rgb(184, 169, 92,0.5),rgb(237, 229, 171,0.5));
}
@media screen and (max-width:767px){
  body{
    font-size:14px;
  }
  h2{
    width:85%;
  }
  h2 .subtitle{
    font-size:60%;
  }

  #global_menu,#btn_order_index,.btn_menu_floating{display:none !important;}
  #mobile_menu{
    display:flex;
  }

  nav#submenu a{
    transform:none;
    font-size:3vw;
    padding:20px 0;
  }
  nav#submenu a span{
    transform:none;
  }

  #twbox_window nav li a{
    font-size:7vw;
    padding:2%;
  }
  footer{
    padding-bottom:60px;
  }
  footer .footer_banner{
    width:48%;
  }
}

@media screen and (max-width:459px){
  footer .footer_banner{
    width:80%;
  }
}