html,body{
  height: 100%;
}

#GameCanvas {
  display: none;
}
#splash {
  display: none;
}
a:link, a:visited {
  color: #00a0e9;
}
a:active, a:hover {
  color: #00a0e9;
}
img {
  max-width: 100%;
}

#wrapper {
  width: 720px;
  position: relative;
  overflow: hidden;
}

#wrapper-Title{
  width: 720px;
  height: 100%;
  margin:0 auto;
  background-color: black;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  overflow: hidden;
}

#startPlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 30;
}

#contents{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 50;
}

.label.tap_start{
  z-index: 5;
  bottom: 0;
  margin-bottom: 28%;
  position: absolute;
  background-image: url("img/bg_tap_start.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.label.tap_start img {
  -webkit-animation: 'anime_blink_fewer' 0.8s ease 0s infinite alternate;
}

.buttons{
  z-index: 50;
  height: 80px;
  margin-bottom: 30px;
}
.button{
  display: inline-block;
  z-index: 50;
}
.button.addHomeIcon{
  position: absolute;
  top: 9px;
  left: 2%;
  width: 39%;
  margin-right: 2%;
}
.button.login{
  position: absolute;
  top: 0;
  left: 44%;
  width: 26%;
}
.button.logout{
  position: absolute;
  top: 0;
  left: 44%;
  width: 26%;
}
.button.inquery{
  position: absolute;
  top: 0;
  right: 2%;
  width: 26%;
}
.button.config{
  position: absolute;
  top: 0;
  left: 44%;
  width: 26%;
}
.button.gree_coincp{
  position: absolute;
  top: 0;
  left: 44%;
  width: 26%;
}
.button.transfer{
  position: absolute;
  top: 0;
  left: 6%;
  width: 26%;
}
.button.inquery_app{
  position: absolute;
  top: 0;
  left: 37%;
  width: 26%;
}
.button.delete_account_app{
  position: absolute;
  top: 0;
  right: 6%;
  width: 26%;
}
.footer{
  display: table;
  margin: 0 0 2% 0;
  width: 100%;
}
.footer .platform{
  display: inline-table;
  font-size: 23px;
  width: 250px;
  text-align: left;
}
.footer .version{
  display: inline-table;
  font-size: 25px;
  width: 230px;
  text-align: left;
  color: #000000;
}
.footer .platform a:link, .platform a:visited {
  color: #0c5589;
}
.copyright{
  display: inline-table;
  margin: 0 0 0 2%;
  vertical-align: bottom;
}

@-webkit-keyframes anime_blink_fewer {
  0%   { opacity: .1; }
  100%  { opacity: 1; }
}


/* 警告ダイアログ関連 */
#alert_dialog.dialog_bg{
  height: 360px;
  top: 34.7%;
}
#alert_dialog .dialog{
  height: 360px;
}
#alert_dialog .dialog_header img{
  margin-top: 7px;
}
#alert_dialog .dialog_dynamic_content {
  display: table-cell;
  width: 720px;
  height: 260px;
  padding-top: 50px;
  color: #FFFFFF;
  font-size: 24px;
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
}


/* ホームに追加ダイアログ */
#add_home_dialog.dialog_bg{
  height: 590px;
  top: 22.7%;
}
#add_home_dialog .dialog{
  height: 590px;
}
#add_home_dialog .dialog_text{
  display: block;
  width: 100%;
  margin: 80px 0 30px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
  letter-spacing: -0.05em;
}
#add_home_dialog .dialog_dynamic_content{
  margin: 0 0 30px;
}


/* ログアウトダイアログ */
#confirm_dialog.dialog_bg{
  height: 460px;
  top: 28.7%;
}
#confirm_dialog .dialog{
  height: 460px;
}
#confirm_dialog .dialog_dynamic_content{
  display: block;
  width: 100%;
  margin: 85px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
  color: #ffffff;
}
#confirm_dialog .dialog_text{
  display: block;
  width: 100%;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#confirm_dialog .sub_text{
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 26px;
}
#confirm_dialog .dialog_buttons{
  margin: 50px 0 20px 0;
}

#tou_dialog.dialog_bg{
  height: 460px;
  top: 28.7%;
}
#tou_dialog .dialog{
  height: 460px;
}
#tou_dialog .dialog_dynamic_content{
  display: block;
  width: 100%;
  margin: 85px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
  color: #ffffff;
}
#tou_dialog .dialog_text{
  display: block;
  width: 100%;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#tou_dialog .sub_text{
  margin: 40px 0 0 0;
  padding: 0;
  font-weight: bold;
  line-height: 34px;
}
#tou_dialog .dialog_buttons{
  margin: 50px 0 20px 0;
}
#tou_dialog .close_button{
  display: none;
}
#tou_dialog .ok_button{
  width: 40%;
}

/* own->mobageダイアログ */
#confirm_played_dialog.dialog_bg{
  height: 460px;
  top: 28.7%;
}
#confirm_played_dialog .dialog{
  height: 460px;
}
#confirm_played_dialog .dialog_dynamic_content{
  display: block;
  width: 100%;
  margin: 85px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
  color: #ffffff;
}
#confirm_played_dialog .dialog_text{
  display: block;
  width: 100%;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#confirm_played_dialog .sub_text{
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 26px;
}
#confirm_played_dialog .dialog_buttons{
  margin: 50px 0 20px 0;
}


/* OWNEDログインダイアログ */
#own_login_dialog.dialog_bg{
  height: 630px;
  top: 25.4%;
}
#own_login_dialog .dialog{
  height: 630px;
}
#own_login_dialog .dialog_text{
  display: block;
  width: 100%;
  margin: 90px 0 30px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#own_login_dialog .sub_text{
  font-size: 18px;
  margin: 0 0 20px 0;
  color: #ababab;
}
#own_login_dialog .login_mail_button{
  margin: 0 0 20px 0;
}
#own_login_dialog .login_tel_button{
  margin: 0 0 30px 0;
}
#own_login_dialog .login_game_start{
  margin: 0 0 40px;
}


/* メールアドレスでログインダイアログ */
#own_mail_login_dialog.dialog_bg{
  height: 620px;
  top: 25.8%;
}
#own_mail_login_dialog .dialog{
  height: 620px;
}
#own_mail_login_dialog .dialog_text{
  margin: 90px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#own_mail_login_dialog .dialog_form{
  width: 600px;
  margin: 0 auto;
}
#own_mail_login_dialog .loginMail{
  text-align: left;
  margin: 25px auto;
}
#own_mail_login_dialog .loginPassword{
  text-align: left;
  margin: 25px auto 10px;
}
#own_mail_login_dialog label{
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}
#own_mail_login_dialog input {
  width: 576px;
  margin-top: 10px;
  padding: 7px 10px;
  text-align: left;
  line-height: 2;
  font-size: 24px;
  border: 2px solid #156482;
  border-radius: 10px;
  background-color: #fffefe;
  box-shadow: 0 0 2px 2px rgba(20, 0, 0, 0.25) inset;
}
#own_mail_login_dialog .passwordLink{
  margin-bottom: 36px;
  font-size: 22px;
  line-height: 28px;
  color: #fff561;
  text-align: right;
}
#own_mail_login_dialog .passwordLink span{
  vertical-align: middle;
}
#own_mail_login_dialog .passwordLink img{
  margin-left: 8px;
  vertical-align: middle;
}


/* 電話番号でログインダイアログ */
#own_tel_login_dialog.dialog_bg{
  height: 520px;
  top: 30.0%;
}
#own_tel_login_dialog .dialog{
  height: 520px;
}
#own_tel_login_dialog .dialog_text{
  margin: 90px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#own_tel_login_dialog .dialog_form{
  width: 600px;
  margin: 0 auto;
}
#own_tel_login_dialog .loginTel{
  text-align: left;
  margin: 25px auto;
}
#own_tel_login_dialog label{
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}
#own_tel_login_dialog input {
  width: 576px;
  margin-top: 10px;
  padding: 7px 10px;
  text-align: left;
  line-height: 2;
  font-size: 24px;
  border: 2px solid #156482;
  border-radius: 10px;
  background-color: #fffefe;
  box-shadow: 0 0 2px 2px rgba(20, 0, 0, 0.25) inset;
}
#own_tel_login_dialog .sub_text {
  font-size: 20px;
  color: #ababab;
  text-align: left;
  width: 600px;
  margin: 50px auto 30px;
}


/* SMSコード入力ダイアログ */
#own_SMS_code_dialog.dialog_bg{
  height: 460px;
  top: 32.0%;
}
#own_SMS_code_dialog .dialog{
  height: 460px;
}
#own_SMS_code_dialog .dialog_text{
  margin: 90px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#own_SMS_code_dialog .dialog_form{
  width: 600px;
  margin: 0 auto 65px;
}
#own_SMS_code_dialog .confirmCode{
  text-align: left;
  margin: 25px auto;
}
#own_SMS_code_dialog label{
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}
#own_SMS_code_dialog input {
  width: 576px;
  margin-top: 10px;
  padding: 7px 10px;
  text-align: left;
  line-height: 2;
  font-size: 24px;
  border: 2px solid #156482;
  border-radius: 10px;
  background-color: #fffefe;
  box-shadow: 0 0 2px 2px rgba(20, 0, 0, 0.25) inset;
}


/* パスワードリセットダイアログ */
#own_reset_password_dialog.dialog_bg{
  height: 460px;
  top: 32.0%;
}
#own_reset_password_dialog .dialog{
  height: 460px;
}
#own_reset_password_dialog .dialog_text{
  margin: 90px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#own_reset_password_dialog .dialog_form{
  width: 600px;
  margin: 0 auto 65px;
}
#own_reset_password_dialog .resetPassWord{
  text-align: left;
  margin: 25px auto;
}
#own_reset_password_dialog label{
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}
#own_reset_password_dialog input {
  width: 576px;
  margin-top: 10px;
  padding: 7px 10px;
  text-align: left;
  line-height: 2;
  font-size: 24px;
  border: 2px solid #156482;
  border-radius: 10px;
  background-color: #fffefe;
  box-shadow: 0 0 2px 2px rgba(20, 0, 0, 0.25) inset;
}


/* OWNED切り替えダイアログ */
#own_switch_dialog.dialog_bg{
  height: 515px;
  top: 26.2%;
}
#own_switch_dialog .dialog{
  height: 515px;
}
#own_switch_dialog .dialog_text{
  display: block;
  width: 100%;
  margin: 80px 0 30px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}
#own_switch_dialog .sub_text{
  font-size: 22px;
  margin: 0 0 30px 0;
}
#own_switch_dialog .account_select {
  display: table;
  margin: 0 0 20px;
}
#own_switch_dialog .current_user {
  display: table-cell;
  padding: 0 13px 0 12px;
}
#own_switch_dialog .exist_user {
  display: table-cell;
  padding: 0 12px 0 13px;
}
#own_switch_dialog .user_status {
  border: 2px solid #fff561;
  border-radius: 12px;
  color: #fff561;
  font-size: 24px;
  font-weight: bold;
  padding: 20px;
  margin: 0 0 20px;
  width: 280px;
}

/* アカウント削除説明ダイアログ */
#pre_confirm_delete_account_dialog.dialog_bg {
  height: 890px;
  top: 20%;
}
#pre_confirm_delete_account_dialog .dialog {
  height: 890px;
}
#pre_confirm_delete_account_dialog .dialog_scrollable_content {
  display: block;
  width: 100%;
  margin: 74px 0 30px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
  color: #ffffff;
}
#pre_confirm_delete_account_dialog .dialog_text {
  display: block;
  width: 100%;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}

/* アカウント削除確認ダイアログ */
#confirm_delete_account_dialog.dialog_bg {
  height: 460px;
  top: 28.7%;
}
#confirm_delete_account_dialog .dialog {
  height: 460px;
}
#confirm_delete_account_dialog .dialog_dynamic_content{
  display: block;
  width: 100%;
  margin: 85px 0 40px;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
  color: #ffffff;
}
#confirm_delete_account_dialog .dialog_text {
  height: 116px;
  display: block;
  width: 100%;
  padding: 0;
  font-size: 26px;
  font-weight: bold;
  line-height: 34px;
}

/* ダイアログ共通 */
#title_overlay {
  display: none;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.6);
}
.dialog_bg {
  position: absolute;
  top: 38%;
  left: 0;
  width: 100%;
  height: 340px;
  opacity: 0;
  z-index: -99;
}
.dialog_bg.show {
  opacity: 1;
  z-index: 999;
}
.dialog {
  display: -webkit-box;
  width: 100%;
  height: 340px;
  opacity: 0;
  z-index: -99;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  overflow-y: scroll;
}
.dialog::-webkit-scrollbar {
  display: none;
}
.dialog.show {
  opacity: 1;
  z-index: 999;
}
.dialog_view {
  position: relative;
  width: 97%;
  min-height: 24%;
  min-height: 300px;
  text-align: center;
  border-style: solid;
  border-width: 3px;
  border-color: #b6b9c1;
  border-radius: 20px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.66);
}
.dialog_header{
  background: linear-gradient(to left, #1c5fab 1%,#10437d 10%,#10437d 90%,#1c5fab 100%);
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 18px 18px 0 0;
  font-size: 32px;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 1px #000000, -2px  2px 1px #000000, 2px -2px 1px #000000, -2px -2px 1px #000000, 2px  0px 1px #000000, 0px  2px 1px #000000, -2px  0px 1px #000000, 0px -2px 1px #000000;
  z-index: 0;
}
.dialog_footer{
  margin: 0 15px;
  padding: 20px 0;
  border-top: 2px solid #b6b9c1;
  font-size: 22px;
  color: #ffffff;
  line-height: 28px;
}
.dialog_close_button {
  position: absolute;
  top: -12px;
  right: -8px;
  z-index: 20;
  text-align: right;
}
.dialog_text{
  color: #FFFFFF;
  font-size: 24px;
  vertical-align: middle;
  text-align: center;
}
.dialog_buttons{
  margin-bottom: 20px;
}
.sub_text {
  color: #f9618f;
  font-size: 22px;
  margin: 35px 0 40px 0;
}
.close_button{
  display: inline-block;
  vertical-align: top;
  padding: 0 1%;
  width: 47%;
  height: auto;
}
.ok_button{
  display: inline-block;
  vertical-align: top;
  padding: 0 1%;
  width: 47%;
  height: auto;
}
input.dummy{
  display: none;
}

#alert_embedded_dialog {
  height: 480px;
}
#alert_embedded_dialog.dialog_bg {
  top: 30%;
}
#alert_embedded_dialog .dialog {
  height: 480px;
}

/* オープニング関連 */
.op_text_bg,
.op_last_text,
.op_story_1,
.op_story_2,
.op_story_3,
.op_story_4,
.op_story_5,
.op_text_1,
.op_text_2,
.op_text_3,
.op_text_4,
.op_text_5,
.op_text_6{
  opacity: 0;
}

.op_bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  animation-name: op_bg_animation;
  animation-duration: 29s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes op_bg_animation {
  0% { top: 0px; left: 0px; opacity: 0;}
  10% { opacity: 1;}
  100% { top: -1280px; left: 0px; }
}


#white_overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  z-index: 10;
}
#black_overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  z-index: 25;
}
#white_overlay.start{
  animation-name: white_IN;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
#white_overlay.delete{
  animation-name: white_OUT;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes white_IN {
  0% { opacity: 0;}
  100% { opacity: 0.5;}
}
@keyframes white_OUT {
  0% { opacity: 0.5;}
  100% { opacity: 0;}
}
#black_overlay.start{
  animation-name: black_IN;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes black_IN {
  0% { opacity: 0;}
  100% { opacity: 1;}
}


.op_story_1.start{
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 110%;
  max-width: 110%;
  opacity:0;
  z-index: 30;
  animation-name: op_story_animation;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_story_2.start{
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 110%;
  max-width: 110%;
  opacity:0;
  z-index: 30;
  animation-name: op_story_animation;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_story_3.start{
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 110%;
  max-width: 110%;
  opacity:0;
  z-index: 30;
  animation-name: op_story_animation;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_story_4.start{
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 110%;
  max-width: 110%;
  opacity:0;
  z-index: 30;
  animation-name: op_story_animation;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_story_5.start{
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 110%;
  max-width: 110%;
  opacity:0;
  z-index: 30;
  animation-name: op_story_animation;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes op_story_animation {
  0% { left: 0%; opacity:0; }
  20% { opacity:1; }
  90% { opacity:1; }
  100% { left: -10%; opacity:0; }
}



.op_text_bg{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  z-index: 20;
  animation-name: op_text_bg_animation_IN;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes op_text_bg_animation_IN {
  0% { opacity:0; }
  100% { opacity:1; }
}
.op_text_bg.delete{
  animation-name: op_text_bg_animation_OUT;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes op_text_bg_animation_OUT {
  0% { opacity:1; }
  100% { opacity:0; }
}


.op_text_1.start{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 30;
  animation-name: op_text_animation;
  animation-duration: 4s;
  animation-delay: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_text_2.start{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 30;
  animation-name: op_text_animation;
  animation-duration: 3.7s;
  animation-delay: 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_text_3.start{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 30;
  animation-name: op_text_animation;
  animation-duration: 3.7s;
  animation-delay: 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_text_4.start{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 30;
  animation-name: op_text_animation;
  animation-duration: 3.7s;
  animation-delay: 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_text_5.start{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 30;
  animation-name: op_text_animation;
  animation-duration: 3.7s;
  animation-delay: 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
.op_text_6.start{
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 30;
  animation-name: op_text_animation;
  animation-duration: 3.7s;
  animation-delay: 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes op_text_animation {
  0% { left: 0px; opacity:0; }
  10% { left: 0px; opacity:1; }
  90% { left: 0px; opacity:1; }
  100% { left: 0px; opacity:0; }
}


.op_last_text.start{
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  opacity:0;
  z-index: 20;
  animation-name: op_last_text_animation;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes op_last_text_animation {
  0% { left: 0px; opacity:0; }
  10% { left: 0px; opacity:1; }
  100% { left: 0px; opacity:1; }
}

#skip_button{
  z-index: 50;
  position: absolute;
  bottom: 5px;
  right: 10px;
  display: none;
}

iframe.maintenance {
  z-index: 90;
  display: none;
  height: 100%;
  width: 100%;
  overflow: scroll;
  border: none;
  visibility: visible;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

/** hide reCAPTCHA badge */
.grecaptcha-badge { visibility: hidden; }


#guildBattleContents {
  z-index: 50;
  width: 720px;
  height: 1280px;
  min-height: 1080px;
  max-height: 1280px;
  position: relative;
  /* バトル画面内でスクロールを有効にするために設定 */
  pointer-events: none;
}
#guildBattleContents .scroll_top_button {
  position: absolute;
  bottom: 0;
  right: 2%;
  /* 親要素はnoneで設定してあるので明示的にautoを指定 */
  pointer-events:auto;
  animation-name: fadeup;
  animation-duration: 0.5s;
  margin-bottom: 12px;
}

@keyframes fadeup {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}