@charset "UTF-8";
html, body, header, section, article, nav, header, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  margin: 0;
  overflow-x: hidden; }

html {
  font-size: 80%; }

img {
  vertical-align: baseline;
  line-height: 0;
  display: block; }

/*画面読み込み全体のフェイドイン
body {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}*/
a {
  color: #000;
  text-decoration: none;
  outline: none; }

a:link,
a:hover,
a:active,
a:visited {
  outline: none;
  text-decoration: none; }

a:hover {
  animation: navigation_font_color .2s forwards; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* End hide from IE-mac */
/*font text関連*/
.font_ss {
  font-size: 10px !important; }

.font_s {
  font-size: 12px !important; }

.font_m {
  font-size: 14px !important; }

.font_l {
  font-size: 18px !important; }

.font_ll {
  font-size: 24px !important; }

.font_xl {
  font-size: 28px !important; }

.font36 {
  font-size: 36px !important; }

.bold {
  font-weight: bold; }

.color_white {
  color: #fff; }

/*テキスト配置*/
.txt_left {
  text-align: left; }

.txt_center {
  text-align: center; }

.txt_right {
  text-align: right; }

/*レイアウト用*/
/*hr系*/
hr {
  border: none; }

.hr_gradient01 {
  margin: 0;
  display: block;
  height: 1px;
  background: black;
  /* Old browsers */ }

.space_s,
.space_m,
.space_l,
.space_xl {
  margin: 0;
  padding: 0;
  display: block;
  border: none; }

.space_s {
  height: 5px; }

.space_m {
  height: 10px; }

.space_l {
  height: 15px; }

.space_xl {
  height: 20px; }

/*===========OOCSS レイアウト===========*/
.space_auto,
.space5,
.space8,
.space10,
.space15,
.space20,
.space25,
.space30,
.space35,
.space40,
.space45,
.space50,
.space55,
.space60,
.space65,
.space70,
.space75,
.space80,
.space85,
.space90,
.space95,
.space100,
.space110,
.space120,
.space130,
.space140,
.space150,
.space160,
.space170,
.space180 {
  margin: 0;
  padding: 0; }

.space_auto {
  height: auto !important; }

.space5 {
  height: 5px !important; }

.space8 {
  height: 8px !important; }

.space10 {
  height: 10px !important; }

.space15 {
  height: 15px !important; }

.space20 {
  height: 20px !important; }

.space25 {
  height: 25px !important; }

.space30 {
  height: 30px !important; }

.space35 {
  height: 35px !important; }

.space40 {
  height: 40px !important; }

.space44 {
  height: 44px !important; }

.space45 {
  height: 45px !important; }

.space50 {
  height: 50px !important; }

.space55 {
  height: 55px !important; }

.space60 {
  height: 60px !important; }

.space65 {
  height: 65px !important; }

.space70 {
  height: 70px !important; }

.space75 {
  height: 75px !important; }

.space80 {
  height: 80px !important; }

.space85 {
  height: 85px !important; }

.space90 {
  height: 90px !important; }

.space95 {
  height: 95px !important; }

.space100 {
  height: 100px !important; }

.space110 {
  height: 110px !important; }

.space120 {
  height: 120px !important; }

.space130 {
  height: 130px !important; }

.space140 {
  height: 140px !important; }

.space150 {
  height: 150px !important; }

.space160 {
  height: 160px !important; }

.space170 {
  height: 170px !important; }

.space180 {
  height: 180px !important; }

.space100p {
  height: 100% !important; }

/*width*/
.width10 {
  width: 10px; }

.width20 {
  width: 20px; }

.width30 {
  width: 30px; }

.width40 {
  width: 40px; }

.width50 {
  width: 50px; }

.width60 {
  width: 60px; }

.width70 {
  width: 70px; }

.width80 {
  width: 80px; }

.width90 {
  width: 90px; }

.width100 {
  width: 100px; }

.width110 {
  width: 110px; }

.width120 {
  width: 120px; }

.width130 {
  width: 130px; }

.width140 {
  width: 140px; }

.width150 {
  width: 150px; }

.width160 {
  width: 160px; }

.width170 {
  width: 170px; }

.width180 {
  width: 180px; }

.width190 {
  width: 190px; }

.width200 {
  width: 200px; }

.width210 {
  width: 210px; }

.width220 {
  width: 220px; }

.width230 {
  width: 230px; }

.width240 {
  width: 240px; }

.width250 {
  width: 250px; }

.width260 {
  width: 260px; }

.width270 {
  width: 270px; }

.width280 {
  width: 280px; }

.width290 {
  width: 290px; }

.width300 {
  width: 300px; }

.width310 {
  width: 310px; }

.width320 {
  width: 320px; }

.width90p {
  width: 90%; }

.width100p {
  width: 100%; }

/*height*/
.height10 {
  height: 10px; }

.height20 {
  height: 20px; }

.height30 {
  height: 30px; }

.height40 {
  height: 40px; }

.height50 {
  height: 50px; }

.height60 {
  height: 60px; }

.height70 {
  height: 70px; }

.height80 {
  height: 80px; }

.height90 {
  height: 90px; }

.height100 {
  height: 100px; }

.height100p {
  height: 100%; }

.relative {
  position: relative; }

.absolute {
  position: absolute; }

.z0 {
  z-index: 0; }

.z1 {
  z-index: 1; }

.z2 {
  z-index: 2; }

.z10 {
  z-index: 10; }

.m0p0 {
  margin: 0;
  padding: 0; }

.mauto {
  margin: 0 auto; }

.mt0 {
  margin-top: 0 !important; }

.mt10 {
  margin-top: 10px !important; }

.mt20 {
  margin-top: 10px !important; }

.mt30 {
  margin-top: 30px !important; }

.mt50 {
  margin-top: 50px !important; }

.mt70 {
  margin-top: 70px !important; }

.mt100 {
  margin-top: 100px !important; }

.mt150 {
  margin-top: 150px !important; }

.mt200 {
  margin-top: 200px !important; }

.mt300 {
  margin-top: 300px !important; }

.mt-2 {
  margin-top: -2px !important; }

.mt-5 {
  margin-top: -5px !important; }

.mt-10 {
  margin-top: -10px !important; }

.mt-50 {
  margin-top: -50px !important; }

.mt-70 {
  margin-top: -70px !important; }

.mt-80 {
  margin-top: -80px !important; }

.mt-100 {
  margin-top: -100px !important; }

.mt-150 {
  margin-top: -200px !important; }

.mt-200 {
  margin-top: -200px !important; }

.mt-300 {
  margin-top: -300px !important; }

.mt-400 {
  margin-top: -400px !important; }

.mt-500 {
  margin-top: -500px !important; }

.mt-10p {
  margin-top: -10% !important; }

.mt-15p {
  margin-top: -20% !important; }

.mt-20p {
  margin-top: -20% !important; }

.mt-30p {
  margin-top: -30% !important; }

.mt-40p {
  margin-top: -40% !important; }

.mt-50p {
  margin-top: -50% !important; }

.mt-60p {
  margin-top: -60% !important; }

.mb100 {
  margin-bottom: 100px !important; }

.mb150 {
  margin-bottom: 150px !important; }

.mb300 {
  margin-bottom: 300px !important; }

.p0 {
  padding: 0 !important; }

.p5 {
  padding: 5px !important; }

.p10 {
  padding: 10px !important; }

.p15 {
  padding: 15px !important; }

.p20 {
  padding: 20px !important; }

.pb100 {
  padding-bottom: 100px !important; }

.clear {
  clear: both; }

.vtop {
  vertical-align: top; }

.vmiddle {
  vertical-align: middle; }

.vbottom {
  vertical-align: bottom; }

.table_div {
  display: table; }

.table_div > div {
  display: table-cell; }

.block {
  display: block; }

.iblock {
  display: inline-block; }

.fleft {
  float: left; }

.fright {
  float: right; }

ul {
  list-style: none; }

* {
  box-sizing: border-box; }

.bg_black {
  background: #000; }

.logo_bottom {
  margin-top: 50px;
  padding: 30px 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+22,1+100 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 22%, white 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 22%, white 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 22%, white 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
  /* IE6-9 */ }
  .logo_bottom img {
    margin: 0 auto;
    width: 65%; }

#footer {
  color: #fff;
  background: #ff376f; }
  #footer .title_share {
    margin: 10px auto;
    width: 25%; }
  #footer .btn_follow_top {
    padding-top: 10px;
    z-index: 1000;
    margin: 0 auto 20px;
    text-align: center; }
    #footer .btn_follow_top ul li {
      display: inline-block; }
    #footer .btn_follow_top .btn_tw_follow {
      display: inline-block;
      margin-right: 10px;
      margin-top: 4px;
      width: 30px;
      height: 30px;
      background: url("../img/btn_tw_share02.png") no-repeat center center/100% 100%;
      border-radius: 5px; }
      #footer .btn_follow_top .btn_tw_follow span {
        visibility: hidden; }
    #footer .btn_follow_top .btn_fb_follow {
      display: inline-block;
      margin-right: 10px;
      margin-top: 4px;
      width: 30px;
      height: 30px;
      background: url("../img/btn_fb_share02.png") no-repeat center center/100% 100%;
      border-radius: 5px; }
      #footer .btn_follow_top .btn_fb_follow span {
        visibility: hidden; }
    #footer .btn_follow_top .btn_line_follow {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: url("../img/btn_line_share02.png") no-repeat center center/100% 100%;
      border-radius: 5px; }
      #footer .btn_follow_top .btn_line_follow span {
        visibility: hidden; }
  #footer .footer_bottom {
    width: 100%;
    text-align: center; }
    #footer .footer_bottom .area_spec {
      margin: 0 auto; }
      #footer .footer_bottom .area_spec .icon01 {
        display: inline-block;
        margin-right: 2px;
        box-shadow: 0 0 3px #555;
        border-radius: 12px;
        width: 50px; }
      #footer .footer_bottom .area_spec .list_spec {
        display: inline-block;
        text-align: left;
        vertical-align: top;
        width: 290px; }
        #footer .footer_bottom .area_spec .list_spec li {
          line-height: 13px;
          font-size: 0.9rem; }
          #footer .footer_bottom .area_spec .list_spec li span {
            margin-left: 4.5rem; }
        #footer .footer_bottom .area_spec .list_spec sup {
          line-height: 0; }
    #footer .footer_bottom img {
      display: block;
      margin: 0 auto; }
    #footer .footer_bottom .footer_nav {
      margin: 20px auto 10px;
      width: 90%;
      color: #fff; }
      #footer .footer_bottom .footer_nav li {
        margin-top: 2%;
        margin-bottom: 2%;
        text-align: center; }
        #footer .footer_bottom .footer_nav li a {
          color: #fff; }
    #footer .footer_bottom #company_sp {
      padding: 10px 0; }
      #footer .footer_bottom #company_sp span {
        color: #fff;
        float: right; }
  #footer .copylight {
    font-weight: 100;
    font-size: 10px;
    padding: 0 10px 20px;
    font-family: sans-serif; }

/*全ページ共通要素*/
.mfp-figure:after {
  background: transparent !important; }

.mfp-close {
  background: url("../img/btn_close_white.png") 50% 50% no-repeat !important;
  background-size: 90% auto !important;
  top: -44px; }

.spinner2 .container1 div, .spinner2 .container2 div, .spinner2 .container3 div {
  background-color: #ff8cac; }

.page_title {
  padding: 80px 0 50px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 36px; }
  .page_title img {
    width: 55%;
    margin: 0 auto; }

.page_txt {
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  width: 95%; }

.fadein {
  opacity: 0;
  transition: all 0.5s;
  display: block;
  margin: 0 auto;
  text-align: center; }

.fadein.scrollin {
  opacity: 1; }

@keyframes fadein0up {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadein20up {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
.fadein0up {
  animation-name: fadein0up;
  animation-fill-mode: forwards; }

.delay300 {
  animation-duration: 2s;
  animation-delay: .3s; }

.delay500 {
  animation-duration: 2s;
  animation-delay: .5s; }

.delay600 {
  animation-duration: 2s;
  animation-delay: .6s; }

.delay900 {
  animation-duration: 2s;
  animation-delay: .9s; }

.delay1000 {
  animation-duration: 2s;
  animation-delay: 1s; }

.delay1200 {
  animation-duration: 2s;
  animation-delay: 1s; }

.delay1500 {
  animation-duration: 2s;
  animation-delay: 1.5s; }

.delay2000 {
  animation-duration: 2s;
  animation-delay: 2s; }

.delay2500 {
  animation-duration: 2s;
  animation-delay: 2.5s; }

.delay3000 {
  animation-duration: 2s;
  animation-delay: 3s; }

.delay3500 {
  animation-duration: 2s;
  animation-delay: 3.5s; }

.delay4000 {
  animation-duration: 2s;
  animation-delay: 4s; }

#page-top a {
  position: absolute;
  z-index: 100;
  right: 20px;
  bottom: -110px;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  text-decoration: none;
  background: url(../img/arrow_top_sp.png) 50% 50% no-repeat;
  background-size: 100% auto; }

#page-bottm {
  visibility: hidden;
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 50px;
  height: 50px;
  font-size: 77%;
  z-index: 10;
  background: url(../img/arrow_bottom.png) 50% 50% no-repeat;
  background-size: 100% auto; }

/* 点滅 */
.blinking {
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  -moz-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate; }

@-webkit-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes blink {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*/全ページ共通要素/*/
/*SP*/
body {
  margin: 0 0;
  padding: 0 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  overflow-x: hidden;
  font-family: sans-serif; }

/*開閉ボタン*/
header {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100; }

.header_bg {
  display: none;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.7);
  height: 60px;
  width: 100%; }

header .inner {
  position: relative; }

#nav_toggle {
  display: block;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100; }

#nav_toggle div {
  position: relative; }

#nav_toggle span {
  display: block;
  height: 2px;
  background: #555;
  position: absolute;
  width: 100%;
  left: 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out; }

#nav_toggle span:nth-child(1) {
  top: 0; }

#nav_toggle span:nth-child(2) {
  top: 8px; }

#nav_toggle span:nth-child(3) {
  top: 16px; }

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg); }

.open #nav_toggle span:nth-child(2) {
  width: 0;
  left: 50%; }

.open #nav_toggle span:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg); }

/*メニュー部分*/
nav {
  display: none;
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgba(253, 253, 253, 0.8);
  background-size: 2px 2px;
  left: 0; }

header nav ul {
  padding: 0;
  display: block;
  width: 100%;
  height: 350px;
  position: absolute;
  top: -15%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; }

header nav ul li {
  margin: 30px auto 0;
  text-align: center;
  height: 50px; }

header nav ul li:first-child {
  margin-top: 0; }

header nav ul li:last-child {
  border: none; }

header nav ul li a {
  display: block;
  outline: none;
  color: transparent;
  height: 50px; }

header nav ul li a:hover {
  transition: 0.3s liner;
  opacity: 0.7;
  outline: none; }

nav ul li:nth-child(1) a {
  background: url(../img/sp/btn_top.png?v=01) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%; }
nav ul li:nth-child(2) a {
  background: url(../img/sp/btn_news.png?v=01) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%; }
nav ul li:nth-child(3) a {
  background: url(../img/sp/btn_story.png?v=01) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%; }
nav ul li:nth-child(4) a {
  background: url(../img/sp/btn_chara.png?v=02) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%; }
nav ul li:nth-child(5) a {
  background: url(../img/sp/btn_system.png?v=02) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%; }
nav ul li:nth-child(6) {
  		/*
  		a:after{
          position: absolute;
      display: block;
      width: 30px;
      padding: 2px 3px;
      content: 'NEW ';
      top: -3px;
      left: calc( 50% - 105px );
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      background: #ff376f;
      border-radius: 50%;
      box-shadow: 0 0 5px #87060f;
      text-shadow: 0 0 5px #87060f;
        }*/
  		/*
  		a:after{
          position: absolute;
          display: block;
          width: 100%;
          height: 10px;
          //content: 'NEW ';
  		  content: 'COMING SOON ';
          top: -4px;
  		  color: red;
  		  font-size: 10px;
  		  font-weight: bold;
  		  text-align: center;
        }*/ }
  nav ul li:nth-child(6) a {
    background: url("../img/sp/btn_gallery.png?v=02") no-repeat 50% 50%;
    background-size: auto 100%;
    width: 100%; }

#box_lang {
  position: absolute;
  top: 16px;
  right: 60px;
  z-index: 999;
  margin: 0;
  padding: 2px 5px;
  width: 80px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #ddd;
  font-size: 1rem;
  text-align: center;
  color: #555;
  text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff,-1px 1px 2px #fff, 1px -1px 2px #fff; }

#list_lang {
  display: none;
  position: absolute;
  top: 48px;
  right: 60px;
  z-index: 1000;
  margin: 0; }
  #list_lang p {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 5px;
    margin: 0 0 -1px;
    width: 80px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #ddd;
    color: #555;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff,-1px 1px 2px #fff, 1px -1px 2px #fff; }
    #list_lang p:hover {
      background: rgba(255, 255, 255, 0.8);
      transition-property: all;
      transition: 0.3s linear; }

.logo_top {
  position: fixed;
  z-index: 101;
  top: 13px;
  left: 14px; }

.catch_copy_sp {
  position: relative;
  top: 20px;
  left: 20px;
  z-index: 100;
  width: 243px !important; }

.g-logo_sp {
  display: block;
  width: 100%; }

.logo_area {
  z-index: 1;
  width: 100%; }
  .logo_area .top_logo {
    margin: 0 auto;
    width: 100%;
    clear: both; }
  .logo_area .batch_top01 {
    position: absolute;
    top: 4%;
    right: 20%;
    width: 28%; }
  .logo_area .bnr_comeback02 {
    width: 94%;
    margin: 5px auto;
    box-shadow: 0 0 5px 5px white;
    border-radius: 5px;
    background: #fff; }

.txt_tag_line {
  display: block;
  margin: -3% auto 0;
  width: 100%; }

.txt_btn_download {
  display: block;
  margin: 0 auto 0;
  width: 80%; }

.box_store_buttons {
  text-align: center;
  margin-bottom: 6%; }
  .box_store_buttons .btn_app {
    display: inline-block;
    margin-right: 2%; }
  .box_store_buttons .btn_google {
    display: inline-block; }

/*.date{
    margin: -50px auto 0;
	display: block;
  }
.tagline {
  margin: 0 0 0 2%;
  float: left;
}*/
.movies {
  z-index: 1000;
  margin: 20px auto 0;
  width: 340px;
  background: #fff;
  border: solid 1px rgba(255, 139, 174, 0.75);
  text-align: center;
  box-shadow: 0 0 5px #87060f;
  	/*
  	&:after{
          position: absolute;
      	display: block;
      	width: 40px;
      	padding: 4px;
      	content: 'NEW ';
      	top: -15px;
      	left: -15px;
      	color: #fff;
      	font-size: 12px;
      	font-weight: bold;
      	text-align: center;
      	background: #ff376f;
      	border-radius: 50%;
  		box-shadow: 0 0 5px #87060f;
  		text-shadow:  0 0 5px #87060f;
       }*/ }
  .movies img {
    width: 100%; }

.bnr01 {
  z-index: 1000;
  margin: 20px auto 0;
  width: 340px;
  background: #fff;
  border: solid 1px rgba(255, 139, 174, 0.75);
  text-align: center; }
  .bnr01 img {
    width: 100%; }

.sp-block {
  display: block;
  overflow: hidden;
  position: fixed;
  width: 100%; }

.sp-block img {
  width: 100%;
  height: auto; }

.area_story,
.area_character,
.area_system {
  position: relative;
  margin: 0;
  height: auto; }
  .area_story img,
  .area_character img,
  .area_system img {
    vertical-align: bottom; }

.area_story .btn_next {
  position: absolute;
  right: 3%;
  bottom: 20px; }

.area_character .btn_next {
  position: absolute;
  right: 3%;
  bottom: 20px; }

.area_system .btn_next {
  position: absolute;
  right: 3%;
  bottom: 20px; }

.footer_character {
  margin-top: -45%;
  font-size: 12px;
  position: relative;
  padding: 270px 0 0;
  text-align: center;
  color: #fff; }

#footer,
#footer_top {
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 12px;
  z-index: 1; }

/*
#footer_top::after{
  position: absolute;
  bottom: 0;
  content: " ";
  display: block;
  width: 100%;
  height: 80%;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 10%, rgba(0,0,0,1) 100%); 
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 10%,rgba(0,0,0,1) 100%); 
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 10%,rgba(0,0,0,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 );
  z-index: -1;
}*/
#footer #movie:before,
#footer_top #movie:before {
  content: " ";
  display: block;
  width: 80px;
  height: 50px;
  background: url(../img/icon_new.png);
  background-size: 100% auto;
  position: absolute;
  top: 10px;
  left: 25px; }

#footer video,
#footer #movie img,
#footer_top video,
#footer_top #movie img {
  margin: 20px auto 0;
  width: 90%; }

#footer #news_twitter,
#footer_top #news_twitter {
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  padding: 12px 1% 0;
  width: 95%;
  margin: 30px auto 60px;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1; }

#footer #cast,
#footer #spec,
#footer #sns,
#footer #page-top,
#footer_top #cast,
#footer_top #spec,
#footer_top #sns,
#footer_top #page-top {
  position: relative;
  width: 100%;
  text-align: center; }
  #footer #cast h3,
  #footer #spec h3,
  #footer #sns h3,
  #footer #page-top h3,
  #footer_top #cast h3,
  #footer_top #spec h3,
  #footer_top #sns h3,
  #footer_top #page-top h3 {
    margin: 0 0 20px;
    height: 25px;
    text-indent: -9999px; }

#footer #spec,
#footer_top #spec {
  padding: 20px 0;
  margin-top: 0;
  font-size: 0.8em; }
  #footer #spec h3,
  #footer_top #spec h3 {
    background: url("../img/share.png") no-repeat center center;
    background-size: auto 100%; }
#footer #sns h3,
#footer_top #sns h3 {
  background: url("../img/share.png") no-repeat center center;
  background-size: auto 100%; }

#sns {
  margin: 0 auto;
  padding: 30px 0;
  text-align: center; }

#sns ul {
  width: 100%;
  margin: 0;
  padding: 0; }

#sns ul li {
  display: inline-block;
  list-style: none;
  line-height: 40px; }

#sns a span {
  visibility: hidden; }

#sns a {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 0 0 15px; }

#sns .sns1 {
  background: url("../img/btn_tw_share01.png") no-repeat 50% 50%;
  background-size: 100% auto; }

#sns .sns2 {
  background: url("../img/btn_fb_share01.png") no-repeat 50% 50%;
  background-size: 100% auto; }

#sns .sns3 {
  background: url("../img/btn_line_share.png") no-repeat 50% 50%;
  background-size: 100% auto; }

#spec {
  text-align: center; }
  #spec img {
    margin-right: 10px; }

/*
#company_pc {
  display: none;
}

#footer #company_sp {
  margin:0;
  padding-top:10px;
}

#footer #company_sp .company_logo{
  margin: 0 auto;
  width:30%;
  height:auto;
}
#footer #company_sp .company_logo_vgame{
  margin: 0 15px;
  width:36%;
  height:auto;
  margin-bottom:2%;
}
*/
.slick-slider {
  padding: 0;
  margin: 0;
  color: white; }

/* ▽news */
.news_bg {
  opacity: 0.75; }

.news_window {
  height: auto;
  min-height: calc(100vh - 200px);
  position: relative; }

#news .news-box {
  margin: 0 5% 40px; }
  #news .news-box .news-list {
    margin: 0 auto;
    text-align: left; }
    #news .news-box .news-list li.no_link {
      /* 矢印消す　リンク先がないとき */ }
      #news .news-box .news-list li.no_link:after {
        display: none; }
      #news .news-box .news-list li.no_link a {
        cursor: default; }
    #news .news-box .news-list li {
      border-bottom: solid 1px #bcbcbc;
      /* 矢印 */ }
      #news .news-box .news-list li:after {
        content: "";
        position: absolute;
        top: calc(100% - 50% );
        right: 10px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 3px solid #ccc;
        border-right: 3px solid #ccc;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
      #news .news-box .news-list li a {
        display: block;
        padding: 6% 5% 3% 1.5%; }
        #news .news-box .news-list li a .news-data {
          display: flex;
          justify-content: flex-start; }
          #news .news-box .news-list li a .news-data time {
            margin-left: 5px;
            margin-top: -3px;
            font-size: 14px;
            color: #3a3f50;
            vertical-align: middle; }
        #news .news-box .news-list li a .news-titile {
          font-size: 17px;
          font-weight: bold;
          color: #0064d5; }
  #news .news-box .info {
    content: url(../img/news_icon_info.png);
    display: block;
    width: 60px;
    height: auto; }
  #news .news-box .maint {
    content: url(../img/news_icon_maint.png);
    display: block;
    width: 70px; }
  #news .news-box .update {
    content: url(../img/news_icon_update.png);
    display: block;
    width: 70px; }
  #news .news-box .campaign {
    content: url(../img/news_icon_campaign.png);
    display: block;
    width: 70px; }
  #news .news-box .event {
    content: url(../img/news_icon_event.png);
    display: block;
    width: 60px; }
  #news .news-box .news-detail {
    margin: 0 auto; }
    #news .news-box .news-detail .detail-title {
      padding: 15px 5px 10px 5px;
      border-bottom: solid 1px #bcbcbc; }
      #news .news-box .news-detail .detail-title .news-data {
        display: flex;
        justify-content: flex-start; }
        #news .news-box .news-detail .detail-title .news-data time {
          margin-left: 5px;
          margin-top: -3px;
          font-size: 14px;
          color: #3a3f50;
          vertical-align: middle; }
      #news .news-box .news-detail .detail-title .news-titile {
        font-size: 17px;
        font-weight: bold;
        color: #0064d5; }
    #news .news-box .news-detail .detail-content {
      width: 100%; }
      #news .news-box .news-detail .detail-content img {
        display: block;
        width: 100%;
        margin: 30px auto; }
      #news .news-box .news-detail .detail-content p {
        margin: 10px 0;
        color: #413f68;
        font-size: 15px;
        line-height: 1.7; }
      #news .news-box .news-detail .detail-content h3 {
        margin: 20px 0 10px;
        padding: 0 1px 1px 1px;
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        border-bottom: solid 1px #bcbcbc; }
      #news .news-box .news-detail .detail-content ul {
        padding-left: 4px; }
        #news .news-box .news-detail .detail-content ul li {
          margin-left: 1.5em;
          padding-left: -5px !important;
          color: #fff;
          font-size: 15px;
          list-style-type: square; }
      #news .news-box .news-detail .detail-content a {
        color: #ff376f;
        text-decoration: underline; }
      #news .news-box .news-detail .detail-content .y {
        color: #e5ff07; }
      #news .news-box .news-detail .detail-content .r {
        color: #ff1493; }
#news .close_btn {
  position: fixed;
  top: 18px;
  left: 18px;
  width: 20px;
  z-index: 9999; }
  #news .close_btn img {
    display: block;
    width: 100%; }

/* △news */
/* ▽news 
.news_bg {
  opacity: 0.75; }

.news_window {
  height: 100vh;
  position: relative; }

#news .news-box {
  margin: 0 5% 40px; }
  #news .news-box .news-list {
    margin: 0 auto;
    text-align: left; }
    #news .news-box .news-list li {
      border-bottom: solid 1px #bcbcbc;
      }
      #news .news-box .news-list li:after {
        content: "";
        position: absolute;
        top: calc(100% - 50% );
        right: 10px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg); }
      #news .news-box .news-list li a {
        display: block;
        padding: 6% 5% 3% 1.5%; }
        #news .news-box .news-list li a .news-data {
          display: flex;
          justify-content: flex-start; }
          #news .news-box .news-list li a .news-data time {
            margin-right: 5px;
            padding-top: 1px;
            font-size: 14px;
            color: #ededed;
            vertical-align: middle;
            text-shadow: 2px 2px 5px #000, 2px 2px 5px #000, 2px 2px 5px #000; }
        #news .news-box .news-list li a .news-titile {
          font-size: 17px;
          font-weight: bold;
          color: #fff;
          text-shadow: 2px 2px 5px #000, 2px 2px 5px #000; }
  #news .news-box .info {
    content: url(../img/news_icon_info.png);
    display: block;
    width: 60px;
    height: auto; }
  #news .news-box .maint {
    content: url(../img/news_icon_maint.png);
    display: block;
    width: 70px; }
  #news .news-box .update {
    content: url(../img/news_icon_update.png);
    display: block;
    width: 70px; }
  #news .news-box .campaign {
    content: url(../img/news_icon_campaign.png);
    display: block;
    width: 70px; }
  #news .news-box .event {
    content: url(../img/news_icon_event.png);
    display: block;
    width: 60px; }
  #news .news-box .news-detail {
    margin: 0 auto;
    text-shadow: 1px 1px 3px #000, 1px 1px 3px #000, 1px 1px 3px #000; }
    #news .news-box .news-detail .detail-title {
      padding: 15px 5px 10px 5px;
      border-bottom: solid 1px #bcbcbc; }
      #news .news-box .news-detail .detail-title .news-data {
        display: flex;
        justify-content: flex-start; }
        #news .news-box .news-detail .detail-title .news-data time {
          margin-right: 5px;
          padding-top: 1px;
          font-size: 14px;
          color: #ededed;
          vertical-align: middle; }
      #news .news-box .news-detail .detail-title .news-titile {
        font-size: 17px;
        font-weight: bold;
        color: #fff; }
    #news .news-box .news-detail .detail-content {
      width: 100%; }
      #news .news-box .news-detail .detail-content img {
        display: block;
        width: 100%;
        margin: 30px auto; }
      #news .news-box .news-detail .detail-content p {
        margin: 10px 0;
        color: #fff;
        font-size: 15px;
        line-height: 1.7; }
      #news .news-box .news-detail .detail-content h3 {
        margin: 20px 0 10px;
        padding: 0 1px 1px 1px;
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        border-bottom: solid 1px #bcbcbc; }
      #news .news-box .news-detail .detail-content ul {
        padding-left: 4px; }
        #news .news-box .news-detail .detail-content ul li {
          margin-left: 1.5em;
          padding-left: -5px !important;
          color: #fff;
          font-size: 15px;
          list-style-type: square; }
      #news .news-box .news-detail .detail-content a {
        text-shadow: 0 0 8px #cb0ea9;
        text-decoration: underline; }
      #news .news-box .news-detail .detail-content .y {
        color: #e5ff07; }
      #news .news-box .news-detail .detail-content .r {
        color: #ff1493; }
#news .close_btn {
  position: fixed;
  top: 5px;
  right: 5px;
  width: 40px;
  z-index: 9999; }
  #news .close_btn img {
    display: block;
    width: 100%; }
△news */
/*story*/
.bg_world_sp,
.bg_system_sp {
  position: fixed;
  top: 0; }

/*
.footer_world #sns h3,
.footer_system #sns h3,
.footer_character #sns h3
{
  margin: 0 0 20px;
  height: 25px;
  text-indent: -9999px;
  background: url(../img/share.png) no-repeat center center;
  background-size: auto 100%;
}
.footer_world,
.footer_story,
.footer_system
{
  font-size: 12px;
  position: relative;
  padding: 130px 0 0;
  text-align: center;
  color: #fff;
  background: url(../img/footer_bg_sp_01_01.png) no-repeat;
  background-position: right 35% bottom 105px;
  background-size: 100% auto;
}
*/
#content01, #content02, #content03 {
  padding: 10% 10% 5%; }

#cboxClose {
  background: url(../img/btn_close.png) no-repeat;
  background-size: 100% auto;
  right: 5px; }

#cboxPrevious,
#cboxPrevious:hover {
  background: url(../img/arrow_left.png) no-repeat;
  background-size: 100% auto;
  width: 38px;
  height: 60px;
  outline: none; }

#cboxNext,
#cboxNext:hover {
  background: url(../img/arrow_right.png) no-repeat;
  background-size: 100% auto;
  width: 38px;
  height: 60px;
  outline: none; }

#cboxOverlay {
  background: #000; }

/*/story/*/
/*story_detail*/
.btn_detail_back {
  position: absolute;
  top: 20px;
  left: 10px;
  z-index: 10; }

/*/story_detail/*/
/*system*/
#system {
  position: relative;
  text-align: left;
  color: #fff;
  z-index: 0;
  	/*
  	.area_system:nth-child(3)::after{
  		position: absolute;
      	display: block;
      width: 30px;
      padding: 2px 3px;
      content: 'NEW ';
      top: -3px;
      left: calc(50% - 80px);
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      background: #ff376f;
      border-radius: 50%;
      box-shadow: 0 0 5px #87060f;
      text-shadow: 0 0 5px #87060f;
  	}*/ }
  #system .area_system {
    padding: 0 0 50px; }

/*system_detail equ*/
.system_detail_slider .btn_back {
  display: block;
  width: 78px;
  margin: -5px auto 0; }
.system_detail_slider .slick-prev, .system_detail_slider .slick-next {
  top: calc(50% - 40px);
  width: 20px;
  height: 28px;
  z-index: 10; }
.system_detail_slider .slick-next {
  right: 20px;
  background: url(../img/arrow_right.png) no-repeat;
  background-size: 100% auto; }
.system_detail_slider .slick-prev {
  left: 20px;
  background: url(../img/arrow_left.png) no-repeat;
  background-size: 100% auto; }

/*/system_detail equ/*/
/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
.slide-left {
  -webkit-animation: slide-left 1s infinite both;
  animation: slide-left 1s infinite both; }

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
/*character*/
/*
.chara_top_space{
  height: 60px;
  width: 100%;
}
.nav_character {
  margin: 0;
  position: relative;
  z-index: 9;
  li{
    display: inline-block;
    width: 33.3%;
    float: left;
    a,
    div
    {
      display: inline-block;
      width: 100%;
      height: 40px;
      cursor: pointer;
      text-indent: -99999px;
    }
    .tab_chara {
      background:rgba(0,0,0,0.5)  url(../img/sp/chara_tab1_sp.png) no-repeat 50% 50%;
      background-size: auto 70%;
    }
    .tab_chara:hover {
      transition: .3s linear;
      background: url(../img/sp/chara_tab1_mo_sp.png) no-repeat 50% 50%;
      background-size: auto 70%;
    }
    .tab_chara.active {
      background:url(../img/sp/chara_tab1_mo_sp.png) no-repeat 50% 50%;
      background-size: auto 80%;
    }

    .tab_chara02 {
      background:rgba(0,0,0,0.5)  url(../img/sp/chara_tab2_sp.png) no-repeat 50% 50%;
      background-size: auto 80%;
    }
    .tab_chara02:hover {
      transition: .3s linear;
      background: url(../img/sp/chara_tab2_mo_sp.png) no-repeat 50% 50%;
      background-size: auto 80%;
    }
    .tab_chara02.active {
      background: url(../img/sp/chara_tab2_mo_sp.png) no-repeat 50% 50%;
      background-size: auto 80%;
    }

    .tab_chara03 {
      background:rgba(0,0,0,0.5)  url(../img/sp/chara_tab3_sp.png) no-repeat 50% 50%;
      background-size: auto 80%;
    }
  }
}*/
#chara_top .area_characters {
  position: relative;
  margin: 0 auto; }
  #chara_top .area_characters .chara_all {
    width: 100%; }
  #chara_top .area_characters .chara01, #chara_top .area_characters .chara02, #chara_top .area_characters .chara03, #chara_top .area_characters .chara04, #chara_top .area_characters .chara05 {
    display: inline-block;
    height: 25%;
    width: 50%;
    margin: 0;
    position: relative; }
  #chara_top .area_characters .chara01 {
    position: absolute;
    top: 0%;
    right: 0%; }
  #chara_top .area_characters .chara02 {
    position: absolute;
    top: 11%;
    left: 0%; }
  #chara_top .area_characters .chara03 {
    position: absolute;
    top: 26%;
    right: 0%; }
  #chara_top .area_characters .chara04 {
    position: absolute;
    top: 43%;
    left: 0%; }
  #chara_top .area_characters .chara05 {
    position: absolute;
    top: 55%;
    right: 0%;
    height: 40%; }
#chara_top .chara_top_txt {
  position: relative;
  z-index: 2; }

/*
.chara_detail_slider{
  .slick-prev, .slick-next{
    top: calc(100% - 40px );
    width: 20px;
    height: 28px;
    z-index: 10;
  }
  .slick-next{
    right: 10px;
    background: url(../img/arrow_right.png) no-repeat;
    background-size:100% auto;
  }
  .slick-prev{
    left: 10px;
    background: url(../img/arrow_left.png) no-repeat;
    background-size:100% auto;
  }
  .voice_btn,
  .voice_btn_r,
  .voice_btn_r_bottom
  {
    position: absolute;
    top:15.5%;
    ul li {
      display: inline-block;
    }
  }
  .voice_btn{
    left: 13%;
    width: 25px;
  }
  .voice_btn_r{
    left: calc( 100% - 105px);
  }
}
*/
/*/character/*/
/*chara_detail*/
#chara_detail .chara_bottom_pager {
  margin: 0 auto 0;
  width: 96%; }
  #chara_detail .chara_bottom_pager li {
    display: inline-block;
    width: 18%; }
    #chara_detail .chara_bottom_pager li .chara_pager_on {
      width: 120%; }
    #chara_detail .chara_bottom_pager li .chara_pager {
      width: 120%; }

/*/chara_detail/*/
/*gallery*/
#gallery {
  height: auto;
  min-height: calc(100vh - 200px);
  position: relative; }
  #gallery .new::after {
    position: absolute;
    display: block;
    width: 30px;
    padding: 2px 3px;
    content: 'NEW ';
    top: -20%;
    left: 18%;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    background: #ff376f;
    border-radius: 50%;
    box-shadow: 0 0 5px #87060f;
    text-shadow: 0 0 5px #87060f; }
  #gallery .gallery_subtitle {
    margin-top: 20px; }
  #gallery .gallery_top_navi {
    		/*
    		li:nth-child(1) a:after
    		{
        position: absolute;
        display: block;
        width: 30px;
        padding: 2px 3px;
        content: 'NEW ';
        top: -3px;
        left: 20px;
        color: #fff;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
        background: #ff376f;
        border-radius: 50%;
        box-shadow: 0 0 5px #87060f;
        text-shadow: 0 0 5px #87060f;
    }*/ }
    #gallery .gallery_top_navi li {
      margin-bottom: 10px; }
  #gallery .gallery_area_popup {
    margin-top: 20px; }
    #gallery .gallery_area_popup ul {
      margin: 0 auto;
      width: 94%; }
      #gallery .gallery_area_popup ul li {
        display: inline-block;
        width: 48%;
        margin-bottom: 1%; }
        #gallery .gallery_area_popup ul li img {
          box-shadow: 0 0 8px #daaaaa; }
      #gallery .gallery_area_popup ul li:nth-child(odd) {
        margin-right: 1%; }
      #gallery .gallery_area_popup ul li:nth-child(even) {
        margin-left: 1%; }
    #gallery .gallery_area_popup ul.nav_gallery_card {
      margin: 10px auto 0;
      text-align: center;
      width: 100%; }
      #gallery .gallery_area_popup ul.nav_gallery_card li {
        margin: 12px 2px;
        display: inline-block;
        width: 30px; }
        #gallery .gallery_area_popup ul.nav_gallery_card li img {
          width: 100%;
          box-shadow: none; }
  #gallery .gallery_pop_thumb {
    box-shadow: 0 0 8px #daaaaa; }
  #gallery .title_movie {
    margin-top: 10px;
    font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    color: #6a3f29;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
  #gallery .list_gallery_tab_cast {
    width: 60%;
    margin: 20px auto 0;
    text-align: center; }
    #gallery .list_gallery_tab_cast li {
      margin-bottom: 10px;
      display: inline-block;
      height: auto;
      color: #000000;
      font-weight: bold;
      font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; }
      #gallery .list_gallery_tab_cast li a {
        color: #6a3f29;
        text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff; }
        #gallery .list_gallery_tab_cast li a span {
          color: #ff376f; }
  #gallery .gallery_cast_img {
    margin-top: -10%; }
  #gallery .gallery_nav_bottom {
    margin-top: 50px;
    position: relative;
    height: 50px; }
    #gallery .gallery_nav_bottom .btn_prev, #gallery .gallery_nav_bottom .btn_center, #gallery .gallery_nav_bottom .btn_next {
      position: absolute;
      top: 10px;
      display: block;
      width: 25px;
      height: 30px;
      cursor: pointer;
      text-indent: -99999px; }
    #gallery .gallery_nav_bottom .btn_prev {
      left: 0;
      background: url(../img/arrow_left01.png) 50% 50% no-repeat;
      background-size: 100% auto; }
    #gallery .gallery_nav_bottom .btn_center {
      left: calc(50% - 35px);
      width: 70px;
      background: url(../img/btn_back.png) 50% 50% no-repeat;
      background-size: 100% auto; }
    #gallery .gallery_nav_bottom .btn_next {
      right: 0;
      background: url(../img/arrow_right01.png) 50% 50% no-repeat;
      background-size: 100% auto; }
  #gallery .txt_comingsoon {
    font-size: 40px;
    font-weight: bold;
    color: #fe85a8;
    margin: 100px auto;
    text-align: center; }

/*
.slick-track{
  margin:0;
}
.box{
  box-sizing:border-box;
  //padding:10px 5px;
  position:relative;
  img{
    display:inline-block;
    margin:0 auto;
  }
  a{
    span.gallery_title{
      margin-left: 0.5em;
    }
  }
}
.number{
  position:absolute;
  left:8px;
  top:40px;
  background:#00c4fd;
  width:40px;
  color:#fff;
}
.slick-prev::before ,.slick-next::before {
  content: ' ';
  font-family:FontAwesome;
  padding: 10px;
  border: none;
}
.slick-next::before {
  content: ' ';
}
button.slick-next{
  display:block;
}

.gallery_block{
  padding-top: 80px;
  padding-bottom: 70px;
  height: auto;
  background: #000 url(../img/sp/bg_gallery_sp.jpg) 50% 50% no-repeat;
  background-size: cover;
  .gallery_title{
    width: 100%;
  }
  .gallery_nav{
    img{
      width: 100%;
    }
  }

  .gallery_nav_bottom{
    margin-top: 10px;
    position: relative;
    height: 50px;
    .btn_prev,
    .btn_center,
    .btn_next
    {
      position: absolute;
      top: 10px;
      display: block;
      width: 30px;
      height: 30px;
      cursor: pointer;
      text-indent: -99999px;
    }
    .btn_prev{
      left: 0;
      background: url(../img/arrow_left.png) 50% 50% no-repeat;
      background-size: 100% auto;
    }
    .btn_center{
      left: calc(50% - 35px);
      width: 70px;
      background: url(../img/btn_back.png) 50% 50% no-repeat;
      background-size: 100% auto;
    }
    .btn_next{
      right: 0;
      background: url(../img/arrow_right.png) 50% 50% no-repeat;
      background-size: 100% auto;
    }
  }

  .block_movie{
    padding-top: 20px;
  }

  .gallery_world_thumb{
    margin: 0 auto;
    width: 94%;
    li{
      display: inline-block;
      width: 49%;
      img{
        width: 100%;
      }
    }
  }

  .gallery_sp_cast_copy{
    margin-top: 20px;
  }

  .allow02_left{
    position: absolute;
    top:50%;
    left: -30px;
  }
  .allow02_right{
    position: absolute;
    top:50%;
    right: -55px;
  }
  .tab_wrap{
    padding-bottom: 30px;
    width: 100%;
    z-index: 1;
    max-width: 375px;
  }
  input[type="radio"]{display:none;}
  .tab_area{
    z-index: 3;
  }
  .tab_area label{
    margin: 0;
    width: 49.5%;
    height: 48px;
    display:inline-block;
    cursor:pointer;
  }

  .tab_panel{
    position: relative;
    width:100%;
    padding:0;
    display:none;
    box-sizing:border-box;
  }
  .tab_panel p{
    font-size:14px;
    letter-spacing:1px;
    text-align:center;
  }
  #tab1 ~ .tab_area .tab1_label{
    background:#333 url(../img/sp/tab_sp_pv.png) 50% 50% no-repeat;
    background-size: auto 20px;
    transition: 0.3s linear;
  }
  #tab1:hover ~ .tab_area .tab1_label{
    background:url(../img/sp/tab_sp_pv_on.png) 50% 50% no-repeat;
    background-size: auto 20px;
    transition: 0.3s linear;
  }
  #tab1:checked ~ .tab_area .tab1_label{
    background:url(../img/sp/tab_sp_pv_on.png) 50% 50% no-repeat;
    background-size: auto 20px;
  }
  #tab1:checked ~ .panel_area #panel1{display:block;}

  #tab2 ~ .tab_area .tab2_label{
    background:#333 url(../img/sp/tab_sp_chara.png) 50% 50% no-repeat;
    background-size: auto 20px;
    transition: 0.3s linear;
  }
  #tab2:hover ~ .tab_area .tab2_label{
    background:url(../img/sp/tab_sp_chara_on.png) 50% 50% no-repeat;
    background-size: auto 20px;
    transition: 0.3s linear;
  }
  #tab2:checked ~ .tab_area .tab2_label{
    background:url(../img/sp/tab_sp_chara_on.png) 50% 50% no-repeat;
    background-size: auto 20px;
  }
  #tab2:checked ~ .panel_area #panel2{display:block;}

  #tab3 ~ .tab_area .tab3_label{
    background:#333 url(../img/sp/system_tab_sp_03.png) 50% 50% no-repeat;
    background-size: auto 20px;
    transition: 0.3s linear;
  }
  #tab3:hover ~ .tab_area .tab3_label{
    background:url(../img/sp/system_tab_sp_03_on.png) 50% 50% no-repeat;
    background-size: auto 20px;
    transition: 0.3s linear;
  }
  #tab3:checked ~ .tab_area .tab3_label{
    background:url(../img/sp/system_tab_sp_03_on.png) 50% 50% no-repeat;
    background-size: auto 20px;
  }
  #tab3:checked ~ .panel_area #panel3{display:block;}

  .block_movie{
    a{
      display: block;
      width: 90%;
      margin: 0 auto 20px;
      img{
        width: 100%;
      }
    }
  }

  #panel1{
    .bx-controls{
      position: absolute;
      top: 50%;
      width: 100%;
      .bx-controls-direction a {
        position: absolute;
        z-index: 9999;
        top: -50%;
        width: 25px;
        height: 36px;
        margin-top: 0;
        text-indent: -9999px;
        outline: 0;
      }
    }
  }
  #panel2{
    #slider2 li{
      width: 100% !important;
    }
    .bx-viewport {
      height: 470px !important;
    }
  }

  .bx-wrapper{
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: -50%;
    margin-top: -250px;
    outline: 0;
    width: 25px;
    height: 36px;
    text-indent: -9999px;
    z-index: 9999;
  }
  .bx-wrapper .bx-prev,
  .bx-wrapper .bx-prev:hover
  {
    left: 0;
    background: url(../img/arrow_left.png) no-repeat;
    background-size: 100% auto;
  }
  .bx-wrapper .bx-next:link,
  .bx-wrapper .bx-next:visited,
  .bx-wrapper .bx-next:hover,
  .bx-wrapper .bx-next:active
  {
    right: 0px;
    background: url(../img/arrow_right.png) no-repeat;
    background-size: 100% auto;
  }
  .bx-pager,
  .bx-pager_movie
  {
    margin: 20px auto;
    text-align: center;
    a{
      font-size: 12px;
      display: inline-block;
      width: 70px;
      font-weight: bold;
      font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    }
    a:after{
      margin-left: 10px;
      display: inline-block;
      content: "/";
      color: #fff;
    }
    a:last-child:after{
      content: " ";
    }
    a.tab01{
      background: none;
    }
    a.tab01:hover{
      background: none;
      transition: .3s;
    }
    a.tab01.active{
      background: none;
      transition: .3s;
      color: #ffd163;
    }
    a.tab02{
      background: none;
    }
    a.tab02:hover{
      background: none;
      transition: .3s;
    }
    a.tab02.active{
      background: none;
      transition: .3s;
      color: #ffd163;
    }
    a.tab03{
      background: none;
    }
    a.tab03:hover{
      background: none;
      transition: .3s;
    }
    a.tab03.active{
      background: none;
      transition: .3s;
      color: #ffd163;
    }
    a.tab04{
      background: none;
    }
    a.tab04:hover{
      background: none;
      transition: .3s;
    }
    a.tab04.active{
      background: none;
      transition: .3s;
      color: #ffd163;
    }
    a.tab05{
      background: none;
    }
    a.tab05:hover{
      background: none;
      transition: .3s;
    }
    a.tab05.active{
      background: none;
      transition: .3s;
      color: #ffd163;
    }
  }
}

.slick-dots li button {
  font-size: 14px;
  color: #fff;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 1px solid #fff;
}
.slick-dots li.slick-active button {
  color: red;
  border: 1px solid red;
}
.slick-dots li.slick-active button:before {
  color: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
  color: transparent;
}

.tab_wrap{
  margin: 0 auto;
  width:100%;
}
input[type="radio"]{display:none;}
.tab_area{
  font-size:0;
  margin:0;
  text-align: center;
}
.tab_area label{
  width:30%;
  display:inline-block;
  padding:10px;
  color:#fff;
  background:#b8b7b7;
  font-size:10px;
  cursor:pointer;
  margin:0 1.5%;
}

.tab_panel{
  width:100%;
  display:none;
  box-sizing:border-box;
}
.tab_panel p{
  font-size:14px;
  letter-spacing:1px;
  text-align:center;
}
#tab1:checked ~ .tab_area .tab1_label{background:#00c4fd; }
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#00c4fd; }
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#00c4fd; }
#tab3:checked ~ .panel_area #panel3{display:block;}

.bg_gallery_sp
{
  position: fixed;
  top: 80px;
}
#popup01,#popup02,.mfp-bg01{
  display: none;
  position: absolute;
  z-index: 1000;
}
.mfp-bg01{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.9;
}
#popup01,#popup02{
  z-index: 1001;
  top: 40%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width: 90%;
  max-width: 1200px;
  img{
    width: 100%;
  }
}
.gallery_sound_btns{
  margin: 20px auto 0;
  li{
    display: inline-block;
    margin: 0 2.2%;
    width: 45%;
    img{
      width: 100%;
    }
  }
}
.btn{
  margin: 0 auto;
  width: 180px;
  height: 60px;
  background: url(../img/sp/gallery_sp_btn_play.png) no-repeat;
  background-size: 100% auto;
}
.btn.play{
  background: url(../img/sp/gallery_sp_btn_stop.png) no-repeat;
  background-size: 100% auto;
}
*/
/*/gallery/*/
/*policy*/
.policy_main {
  margin: 80px auto 30px;
  width: 90%; }
  .policy_main .title_policy {
    margin-bottom: 20px; }

/*/policy/*/
.tw_area,
.form_area {
  z-index: 1000; }

.form_area {
  bottom: 40px;
  height: 250px; }

.btn_tw,
.btn_form {
  float: left;
  width: 45px;
  height: 215px !important;
  cursor: pointer;
  color: transparent;
  background-size: 100% auto; }

.btn_tw:after {
  position: absolute;
  top: 155px;
  left: 15px;
  width: 18px;
  height: 47px;
  content: '';
  background: url(../img/arrow01.png) no-repeat 50% 50%;
  background-size: 100% auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.btn_form:after {
  position: absolute;
  top: 155px;
  left: 15px;
  width: 24px;
  height: 24px;
  content: '';
  background: url(../img/arrow02.png) no-repeat 50% 50%;
  background-size: 100% auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.ac:after {
  position: absolute;
  top: 155px;
  left: 15px;
  width: 18px;
  height: 47px;
  content: '';
  background: url(../img/arrow01.png) no-repeat 50% 50%;
  background-size: 100% auto;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg); }

.btn_form.ac:after {
  position: absolute;
  top: 210px;
  left: 15px;
  width: 24px;
  height: 24px;
  content: '';
  background: url(../img/arrow02.png) no-repeat 50% 50%;
  background-size: 100% auto; }

#news_twitter,
#form_inner {
  margin: 20px auto 0;
  width: 340px;
  position: relative;
  background: rgba(255, 255, 255, 0.75); }

#news_twitter {
  box-sizing: border-box;
  width: 100%; }

#form_inner {
  display: block; }

#news_twitter > div,
#form_inner > div {
  display: inline-block;
  width: 340px;
  height: 255px;
  vertical-align: top; }

#news_twitter > div {
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 0 3px #555;
  width: 100%;
  height: 400px; }
  #news_twitter > div a.tw_link {
    position: absolute;
    top: 2%;
    right: 1%;
    width: 40px;
    height: 40px;
    display: block; }

.txt_cast {
  margin: 30px auto;
  width: 100%; }

.banner_top {
  margin: 10px auto;
  width: 93%;
  box-shadow: 0 0 5px #87060f; }
  .banner_top img {
    width: 100%; }

.new:after {
  position: absolute;
  display: block;
  width: 30px;
  padding: 2px 3px;
  content: 'NEW ';
  top: -10px;
  left: -12px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  background: #ff376f;
  border-radius: 50%;
  box-shadow: 0 0 5px #87060f;
  text-shadow: 0 0 5px #87060f; }

.form_title01 {
  margin: -42px auto 10px;
  width: 80%; }

.form_txt01 {
  margin: 0 auto 5px;
  width: 35%; }

.form_txt02 {
  margin: 10px auto 5px;
  width: 40%; }

.area_block_form {
  border-top: 30px solid #ff376f;
  padding: 0;
  margin-bottom: 40px;
  background: #ffe7e7;
  z-index: 1000; }
  .area_block_form .block_form {
    	  /*
        ul li:last-child{
          display: inline-block;
          width: 10%;
        }*/ }
    .area_block_form .block_form .area_btn_sns {
      padding: 0 4%; }
    .area_block_form .block_form ul li {
      display: inline-block;
      width: 49%; }
    .area_block_form .block_form form {
      position: relative;
      text-align: left; }
      .area_block_form .block_form form .erea_email {
        display: block;
        margin: 0 auto;
        width: 90%;
        height: 35px;
        padding-left: 10px;
        border: none;
        background: url(../img/sp/bg_email_sp.png) left 50% no-repeat;
        background-size: 100% auto;
        font-size: 14px; }
      .area_block_form .block_form form .btn_submit {
        position: absolute;
        right: 20px;
        top: 0;
        display: block;
        width: 75px;
        height: 63px;
        /* margin: 5px auto 0; */
        color: transparent;
        border: 0;
        background: url(../img/sp/btn_submit.png) left top no-repeat;
        background-size: 100% auto; }
      .area_block_form .block_form form .area_radio {
        display: none;
        text-align: center;
        margin: 10px auto 0;
        padding-top: 3px;
        padding-left: 10px;
        color: #6b6b6b;
        width: 355px;
        height: 33px;
        font-size: 18px;
        border: none;
        background: url(../img/sp/bg_email_sp.png) left top no-repeat;
        background-size: 100% auto; }
        .area_block_form .block_form form .area_radio input[type='radio'] {
          margin-top: 9px; }
  .area_block_form .btn_i {
    margin-top: 15px;
    margin-right: 17px;
    float: right;
    width: 100px;
    cursor: pointer; }
    .area_block_form .btn_i img {
      width: 100%; }
  .area_block_form .btn_gift {
    display: inline-block; }
    .area_block_form .btn_gift img {
      vertical-align: bottom; }
  .area_block_form #block_gift {
    position: relative;
    border-top: 2px solid #ff376f; }
    .area_block_form #block_gift .block_link {
      position: absolute;
      bottom: 5%;
      width: 100%;
      height: 22%;
      background: transparent; }

.layer_gray_i {
  margin-bottom: 40px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  color: white;
  text-align: center; }

.layer_gray_fin,
.layer_gray_err,
.layer_gray_i {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  color: #000;
  text-align: center;
  z-index: 1000;
  /*img{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    z-index: -1;
  }*/ }

.layer_gray_fin.on,
.layer_gray_err.on,
.layer_gray_i.on {
  display: block;
  z-index: 1000; }

#block_fin, #block_err, #block_i {
  box-shadow: 0 0 3px #fe85a8;
  border: solid 1px #fe85a8;
  width: 90%;
  max-width: 375px;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.8); }
  #block_fin .blocks_inner, #block_err .blocks_inner, #block_i .blocks_inner {
    height: 100%;
    border: 1px solid #fe85a8;
    background: rgba(255, 255, 255, 0.5);
    padding: 2%;
    overflow-y: scroll; }
  #block_fin a, #block_err a, #block_i a {
    color: #fe85a8; }

#block_i {
  height: 190px; }
  #block_i .li_info20 {
    padding: 0 10px 0 20px; }
  #block_i .li_info10 {
    padding: 0 10px; }
  #block_i .bnr_pop {
    position: relative;
    width: 100%;
    z-index: 10000; }
  #block_i .txt_pop {
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.6rem; }

#block_fin .blocks_inner {
  padding: 80px 3%;
  height: 350px; }

#block_err .blocks_inner {
  padding: 80px 3%;
  height: 200px; }

.layer_gray_i:before,
.layer_gray_fin:before,
.layer_gray_err:before {
  position: absolute;
  right: 5%;
  top: calc(50% - 180px);
  content: " ";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/btn_close.png) left top no-repeat;
  background-size: 100% auto; }

.area_radio input[type=radio] {
  display: none;
  /* 標準スタイル */ }

.os_label {
  position: relative;
  /* ボックスの位置を指定する */
  padding: 0 0 0 36px;
  /* ボックス内側の余白を指定する */ }

.os_label:after, .os_label:before {
  position: absolute;
  /* ボックスの位置を指定する */
  content: "";
  /* ボックスのコンテンツ */
  display: block;
  /* ブロックレベル要素化する */
  top: 50%;
  /* 上部から配置の基準位置を決める */ }

.os_label:after {
  left: 8px;
  /* 左から配置の基準位置を決める */
  margin-top: -10px;
  /* チェック枠の位置 */
  width: 16px;
  /* ボックスの横幅を指定する */
  height: 16px;
  /* ボックスの高さを指定する */
  border: 2px solid #ccc;
  /* ボックスの境界線を実線で指定する */
  border-radius: 50%;
  /* ボックスの角丸を指定する */ }

.os_label:before {
  left: 13px;
  /* 左から配置の基準位置を決める */
  margin-top: -5px;
  /* チェックマークの位置 */
  width: 10px;
  /* ボックスの横幅を指定する */
  height: 10px;
  /* ボックスの高さを指定する */
  background: #0171bd;
  /* ボックスの背景色を指定する */
  border-radius: 50%;
  /* ボックスの角丸を指定する */
  opacity: 0;
  /* 要素を透過指定する */ }

input[type=radio]:checked + .os_label:before {
  opacity: 1;
  /* 要素を表示する */ }

.os_label:hover:after {
  border-color: #ccc;
  /* ボックスの境界線を実線で指定する */ }

.bx-wrapper {
  margin-bottom: 0;
  padding: 0;
  border: none; }

/*初回アクセス時アニメーション関連*/
#wrap_all {
  position: relative;
  overflow: hidden;
  z-index: 3; }

@keyframes fade-in-out {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
#box {
  position: relative;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff url("../img/sp/bg01_sp.jpg") no-repeat;
  background-size: cover;
  animation: fade-in-out 6s ease-in-out 0s forwards; }
  #box img {
    width: 100%; }

@keyframes fade-in-out-txt {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  40% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.txt_first {
  font-family: serif;
  position: absolute;
  top: calc(50% - 50px);
  left: 0;
  z-index: 101;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  line-height: 4rem;
  animation: fade-in-out-txt 5.5s linear 0s forwards;
  color: #fff;
  font-weight: bold;
  text-shadow: 3px 3px 0 #cdb4e7; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 100%; } }
.movie_background {
  height: 100vh;
  opacity: 0.7;
  position: fixed;
  width: 100%;
  z-index: 1;
  background: url(../img/sp/bg01_sp.jpg) no-repeat 50% 0;
  background-size: cover; }

/*
.logo_area{
	animation: fade-in 4.5s linear 0s forwards;
}
.date{
	animation: fade-in 5.5s linear 0s forwards;
}
.copylight{
	animation:fade-in 7s linear 0s forwards;
}
.movies {
	animation:fade-in 7s linear 0s forwards;
}
.bnr01 {
	animation:fade-in 7s linear 0s forwards;
}
.footer_bottom {
	animation:fade-in 7s linear 0s forwards;
}
.tw_area {
	animation:fade-in 7s linear 0s forwards;
}
.btn_follow_top {
	animation:fade-in 7s linear 0s forwards;
}
*/
@keyframes fade-in-out {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0;
    z-index: -1; } }
#box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff url("../img/pc/bg01_pc.jpg") no-repeat;
  background-size: cover;
  animation: fade-in-out 6s linear 0s forwards;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */ }

#box::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none !important; }

@keyframes fade-in-out-txt {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  40% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    opacity: 1; } }
.txt_first {
  font-family: serif;
  position: absolute;
  top: calc(50% - 125px);
  left: 0;
  z-index: 2;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
  line-height: 4rem;
  animation: fade-in-out-txt 5.5s linear 0s forwards;
  color: #fff;
  font-weight: bold;
  text-shadow: 3px 3px 0 #cdb4e7; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 100%; } }
.area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; }

.circles {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 30px;
  height: 30px;
  background: url(../img/f01.png) no-repeat 50% 50%;
  background-size: cover;
  animation: animate 25s linear infinite;
  bottom: -150px; }

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  background: url(../img/f02.png) no-repeat 50% 50%;
  background-size: cover;
  animation-delay: 0s; }

.circles li:nth-child(2) {
  left: 10%;
  width: 40px;
  height: 40px;
  background: url(../img/f03.png) no-repeat 50% 50%;
  background-size: cover;
  animation-delay: 2s;
  animation-duration: 12s; }

.circles li:nth-child(3) {
  left: 70%;
  width: 50px;
  height: 50px;
  background: url(../img/f04.png) no-repeat 50% 50%;
  background-size: cover;
  animation-delay: 4s; }

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background: url(../img/f05.png) no-repeat 50% 50%;
  background-size: cover;
  animation-delay: 0s;
  animation-duration: 18s; }

.circles li:nth-child(5) {
  left: 65%;
  width: 40px;
  height: 40px;
  animation-delay: 0s; }

.circles li:nth-child(6) {
  left: 75%;
  width: 100px;
  height: 100px;
  animation-delay: 3s; }

.circles li:nth-child(7) {
  left: 35%;
  width: 90px;
  height: 90px;
  animation-delay: 7s; }

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s; }

.circles li:nth-child(9) {
  left: 20%;
  width: 45px;
  height: 45px;
  animation-delay: 2s;
  animation-duration: 35s; }

.circles li:nth-child(10) {
  left: 85%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
  animation-duration: 11s; }

@keyframes animate {
  0% {
    transform: translateY(-1000px) rotate(0deg);
    opacity: 1;
    border-radius: 0; }
  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 0;
    border-radius: 50%; } }