@charset "UTF-8";

html {
																						  
  background-color: black;
}

body {
  margin: 0px;
  width: 640px;
  height: 1137px;
  position: relative;
}
div {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}
.bg-white {
  background: #FFF;
}
.bg-black {
  background: #000;
}
.bg-filter-white {
  background: linear-gradient(to right, rgba(255,255,255,0) 75%, #fff 100%),linear-gradient(to left, rgba(255,255,255,0) 75%, #fff 100%),linear-gradient(to bottom, rgba(255,255,255,0) 75%, #fff 100%),linear-gradient(to top, rgba(255,255,255,0) 75%, #fff 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 100%), linear-gradient(rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 100%), linear-gradient(to top, rgba(255, 255, 255, 0) 75%, rgb(255, 255, 255) 100%);
  background-position-x: initial, initial, initial, initial;
  background-position-y: initial, initial, initial, initial;
  background-size: initial, initial, initial, initial;
  background-repeat-x: initial, initial, initial, initial;
  background-repeat-y: initial, initial, initial, initial;
  background-attachment: initial, initial, initial, initial;
  background-origin: initial, initial, initial, initial;
  background-clip: initial, initial, initial, initial;
  background-color: initial;
}
.bg-filter-black {
  background: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(0,0,0,0.6) 100%),linear-gradient(to left, rgba(255,255,255,0) 50%, rgba(0,0,0,0.6) 100%),linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.6) 100%),linear-gradient(to top, rgba(255,255,255,0) 50%, rgba(0,0,0,0.6) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.6) 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.6) 100%), linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.6) 100%), linear-gradient(to top, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
  background-position-x: initial, initial, initial, initial;
  background-position-y: initial, initial, initial, initial;
  background-size: initial, initial, initial, initial;
  background-repeat-x: initial, initial, initial, initial;
  background-repeat-y: initial, initial, initial, initial;
  background-attachment: initial, initial, initial, initial;
  background-origin: initial, initial, initial, initial;
  background-clip: initial, initial, initial, initial;
  background-color: initial;
}
.display-off {
  display: none;
}		
 
.img-btn {
  display: block;
}
.img-btn:active {
  filter: gray;
  -webkit-filter: grayscale(100%);
  transform: scale(0.9);
}
.loading-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
																											 
  background-color: rgba(255, 121, 233, 0.3);
  background-position-y: center;
  background-size: 100%;
  z-index: 10000;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-background .story {
  background: gray;
  opacity: .7;
}

.modal-background.main {
  text-align: center;
  background-image: url(img/top_background.jpg);
  background-size: 100% 100%;
}

.main .inputarea {
  margin-top: 900px;
  height: 55px;
  background-image: -webkit-linear-gradient(left, #ffffff00, rgb(255, 255, 255), #ffffff00);
  background-image: -o-linear-gradient(left, #ffffff00, rgb(255, 255, 255), #ffffff00);
  background-image: linear-gradient(to right, #ffffff00, rgb(255, 255, 255), #ffffff00);
}

.main .input {
  width: 40%;
  height: 35px;
  margin-top: 10px;
  font-size: 25px;
  text-align: center;
  border-radius: 30px;
  background-color: #ef8aa785;
  border-style:solid;
  border-color: #e26d5fc9;
	box-shadow: 0 0 10px #ff0084bd;
  animation: inputborderanim 2s infinite;
}

.main .input:focus{
  background-color: #fdd9e39c;
}

.main .input-ok {
  width: 40%;
  height: 35px;
  margin-top: 10px;
  font-size: 25px;
  text-align: center;
  border-radius: 30px;
  background-color: #e4b71de0;
  border-style:solid;
  border-color: #f3f057c9;
	box-shadow: 0 0 10px #eccb3dc4;
  animation: inputokborderanim 2s infinite;
}

.main .random {
  position: absolute;
  left: 450px;
  top: 880px;
  width: 80px;
  height: 80px;
}

.random-btn {
    width: 100%;
    height: 100%;
}

@keyframes inputborderanim {
    50% {
         border-color: #e26d5fc9;
	       box-shadow: 0 0 30px #ff9de7bd;
    }
}

@keyframes inputokborderanim {
    50% {
         border-color: #ffb231c4;
	       box-shadow: 0 0 30px #fff431c4;
    }
}

.main .start_btn{
  margin-top: -200px;
}

.modal-frame {
  position: absolute;
  /*top: 50px;*/
  /*left: 200px;*/
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.default-story-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.touch-area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}
.background-img {
  z-index: 0;
}
.chara-main-img {
  z-index: 10;
}
.chara-main-img-center {

}
.chara-main-img-left {
  position: absolute;
  left: -30%;
}
.chara-main-img-right {
  position: absolute;
  left: 30%;
}
.chara-face-img {
  z-index: 20;
}
.text-frame {
  position: relative;
  width: 93.75%;
  height: 17%;
  top: 75%;
  margin: auto;
  background: url('http://cf-t-img-appgl.ikemen-sengoku.jp/img/640/story_window.png') no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}
.text-layout {
  position: absolute;
  width: 80%;
  top: 20%;
  left: 10.5%;
  color: #443e37;
  font-family: cursive;
  font-size: 1.6rem;
  font-weight: bold;
  white-space: normal;
  z-index: 100;
}
.name-area {
  position: absolute;
  text-align: center;
  width: 55%;
  height: 28%;
  background: url('img/story_window_name.png') no-repeat;
  background-size: 100% 100%;
  top: -30%;
}
.name-style {
  position: relative;
  margin-top: 10px;
  //top: 30%;
  //left: 25%;
  color: #443e37;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
.select-route-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(107, 94, 94, .6);
  z-index: 1000;
}
.select-route-title {
  position: relative;
  width: 100%;
  height: 18%;
  background: url('https://sgkimg.isweetygirl.com/img/640/story_label_answer_selection.png') no-repeat;
  background-position: center;
  background-size: 85%;
}
.select-route-content {
  width: 100%;
  height: 100%;
}
.select-route {
  height: 20%;
  background: url('https://sgkimg.isweetygirl.com/img/640/story_answer_selection.png') no-repeat;
  background-position: center;
  background-size: 80%;
}
.select-route-on {
  height: 20%;
  width: 100%;
  background: url('https://sgkimg.isweetygirl.com/img/640/story_answer_selection_on.png') no-repeat;
  background-position: center;
  background-size: 80%;
}
.select-route-on-position {
  position: absolute;
  width: 100%;
  top: 0;
}
.select-route-text {
  position: relative;
  top: 40%;
  width: 100%;
  color: #6a3906;
  font-size: 2.0rem;
  font-weight: bold;
  text-align: center;
}
.select-route-confirm-modal-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 200;
}
.select-route-confirm-modal {
  /*position: relative;
  height: 20%;
  top: 40%;
  width: 80%;
  margin-left: 10%;
  border-width: 80px 95px 80px 95px;
  border-image: url("http://cf-t-img-appgl.ikemen-sengoku.jp/img/640/nine_patch_background_popup.png") 125 160 125 160 fill repeat;*/
  position: relative;
  height: 24%;
  top: 40%;
  width: 92%;
  margin-left: 2%;
  border: solid;
  border-image: url(img/nine_patch_background_popup.png) 29 fill;
  border-image-width: 21px 34px;
  border-width: 21px 13px;
}
.select-route-confirm-modal-title {
    position: absolute;
    width: 80%;
    height: 70px;
    text-align: center;
    margin-top: 40px;
    margin-left: 10%;
    margin-bottom: 10%;
    background: url(img/common_background_popup_title.png) no-repeat;
    background-size: 100% 100%;
}
.select-route-confirm-modal-title-text {
  position: relative;
  top: 16px;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: bold;
}
.select-route-btn-yes {
  width: 35%;
  height: 60px;
  margin-top: 25%;
  margin-left: 10%;
  float: left;
  background-image: url(img/common_button_confirm.png);
  background-size: 100% 100%;
}
.select-route-btn-no {
  width: 35%;
  height: 60px;
  margin-top: 25%;
  margin-left: 10%;
  float: left;
  background-image: url(img/common_button_cancel_1.png);
  background-size: 100% 100%;
}
.select-route-confirm-modal-btn-text {
  position: relative;
  width: 100%;
  color: #FFF;
  top: 10%;
  font-size: 1.4rem;
  /*font-weight: bold;*/
  text-align: center;
}
.story-effect-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}

/* 選択肢が画面外から現れるアニメーション */
.select-route-animation {
  -webkit-animation-name: "select-route-animation";
  -moz-animation-name: "select-route-animation";
  animation-name: "select-route-animation";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes select-route-animation {
  0% {transform: translateY(200%);}
  99.9%,100% {transform: translateY(0%);}
}
@-webkit-keyframes select-route-animation {
  0% {transform: translateY(200%);}
  99.9%,100% {transform: translateY(0%);}
}
@-o-keyframes select-route-animation {
  0% {transform: translateY(200%);}
  99.9%,100% {transform: translateY(0%);}
}
@-ms-keyframes select-route-animation {
  0% {transform: translateY(200%);}
  99.9%,100% {transform: translateY(0%);}
}

/* 選択肢が画面外に行くアニメーション */
.select-route-confirm-animation {
  -webkit-animation-name: "select-route-confirm-animation";
  -moz-animation-name: "select-route-confirm-animation";
  animation-name: "select-route-confirm-animation";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes select-route-confirm-animation {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}
@-webkit-keyframes select-route-confirm-animation {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}
@-o-keyframes select-route-confirm-animation {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}
@-ms-keyframes select-route-confirm-animation {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}

/* モーダル表示アニメーション */
.select-route-modal-open-animation {
  -webkit-animation-name: "select-route-modal-open-animation";
  -moz-animation-name: "select-route-modal-open-animation";
  animation-name: "select-route-modal-open-animation";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes select-route-modal-open-animation {
  0% {transform: rotateX(180deg);}
  99.9%,100% {transform: translateX(0deg);}
}
@-webkit-keyframes select-route-modal-open-animation {
  0% {transform: rotateX(180deg);}
  99.9%,100% {transform: rotateX(0deg);}
}
@-o-keyframes select-route-modal-open-animation {
  0% {transform: rotateX(180deg);}
  99.9%,100% {transform: rotateX(0deg);}
}
@-ms-keyframes select-route-modal-open-animation {
  0% {transform: rotateX(180deg);}
  99.9%,100% {transform: rotateX(0deg);}
}

/* 奥行きアニメーション */
.effect-zoom {
  -webkit-animation-name: "effect-zoom";
  -moz-animation-name: "effect-zoom";
  animation-name: "effect-zoom";
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}

@keyframes effect-zoom {
  0% {transform: scale(0.9);}
  99.9%,100% {transform: scale(1.0);}
}
@-webkit-keyframes effect-zoom {
  0% {transform: scale(0.9);}
  99.9%,100% {transform: scale(1.0);}
}
@-o-keyframes effect-zoom {
  0% {transform: scale(0.9);}
  99.9%,100% {transform: scale(1.0);}
}
@-ms-keyframes effect-zoom {
  0% {transform: scale(0.9);}
  99.9%,100% {transform: scale(1.0);}
}

/* 横揺れアニメーション */
.effect-roll {
  -webkit-animation-name: "effect-roll";
  -moz-animation-name: "effect-roll";
  animation-name: "effect-roll";
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes effect-roll {
  0% {transform: translateX(0%);}
  25% {transform: translateX(10%);}
  50% {transform: translateX(0%);}
  75% {transform: translateX(-10%);}
  99.9%,100% {transform: translateX(0%);}
}
@-webkit-keyframes effect-roll {
  0% {transform: translateX(0%);}
  25% {transform: translateX(10%);}
  50% {transform: translateX(0%);}
  75% {transform: translateX(-10%);}
  99.9%,100% {transform: translateX(0%);}
}
@-o-keyframes effect-roll {
  0% {transform: translateX(0%);}
  25% {transform: translateX(10%);}
  50% {transform: translateX(0%);}
  75% {transform: translateX(-10%);}
  99.9%,100% {transform: translateX(0%);}
}
@-ms-keyframes effect-roll {
  0% {transform: translateX(0%);}
  25% {transform: translateX(10%);}
  50% {transform: translateX(0%);}
  75% {transform: translateX(-10%);}
  99.9%,100% {transform: translateX(0%);}
}

/* フラッシュ効果アニメーション */
.effect-flash {
  -webkit-animation-name: "effect-flash";
  -moz-animation-name: "effect-flash";
  animation-name: "effect-flash";
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes effect-flash {
  0% {opacity: 0;}
  50% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}
@-webkit-keyframes effect-flash {
  0% {opacity: 0;}
  50% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}
@-o-keyframes effect-flash {
  0% {opacity: 0;}
  50% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}
@-ms-keyframes effect-flash {
  0% {opacity: 0;}
  50% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}

/* フェードインアニメーション */
.animation-fadein {
  -webkit-animation-name: "fadein";
  -moz-animation-name: "fadein";
  animation-name: "fadein";
  -webkit-animation-duration: 1.8s;
  -moz-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes fadein {
  0% {opacity: 0;}
  99.9%,100% {opacity: 1;}
}
@-webkit-keyframes fadein {
  0% {opacity: 0;}
  99.9%,100% {opacity: 1;}
}
@-o-keyframes fadein {
  0% {opacity: 0;}
  99.9%,100% {opacity: 1;}
}
@-ms-keyframes fadein {
  0% {opacity: 0;}
  99.9%,100% {opacity: 1;}
}

/* フェードアウトアニメーション */
.animation-fadeout {
  -webkit-animation-name: "fadeout";
  -moz-animation-name: "fadeout";
  animation-name: "fadeout";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes fadeout {
  0% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}
@-webkit-keyframes fadeout {
  0% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}
@-o-keyframes fadeout {
  0% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}
@-ms-keyframes fadeout {
  0% {opacity: 1;}
  99.9%,100% {opacity: 0;}
}

/* 右からスライドアニメーション */
.animation-move-from-right {
  -webkit-animation-name: "move-from-right";
  -moz-animation-name: "move-from-right";
  animation-name: "move-from-right";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-from-right {
  0% {transform: translateX(200%);}
  99.9%,100% {transform: translateX(0%);}
}
@-webkit-keyframes move-from-right {
  0% {transform: translateX(200%);}
  99.9%,100% {transform: translateX(0%);}
}
@-o-keyframes move-from-right {
  0% {transform: translateX(200%);}
  99.9%,100% {transform: translateX(0%);}
}
@-ms-keyframes move-from-right {
  0% {transform: translateX(200%);}
  99.9%,100% {transform: translateX(0%);}
}

/* 左からスライドアニメーション */
.animation-move-from-left {
  -webkit-animation-name: "move-from-left";
  -moz-animation-name: "move-from-left";
  animation-name: "move-from-left";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-from-left {
  0% {transform: translateX(-200%);}
  99.9%,100% {transform: translateX(0%);}
}
@-webkit-keyframes move-from-left {
  0% {transform: translateX(-200%);}
  99.9%,100% {transform: translateX(0%);}
}
@-o-keyframes move-from-left {
  0% {transform: translateX(-200%);}
  99.9%,100% {transform: translateX(0%);}
}
@-ms-keyframes move-from-left {
  0% {transform: translateX(-200%);}
  99.9%,100% {transform: translateX(0%);}
}

/* 上からスライドアニメーション */
.animation-move-from-top {
  -webkit-animation-name: "move-from-top";
  -moz-animation-name: "move-from-top";
  animation-name: "move-from-top";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-from-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
@-webkit-keyframes move-from-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
@-o-keyframes move-from-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
@-ms-keyframes move-from-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}

/* 下からスライドアニメーション */
.animation-move-from-bottom {
  -webkit-animation-name: "move-from-bottom";
  -moz-animation-name: "move-from-bottom";
  animation-name: "move-from-bottom";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-from-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}
@-webkit-keyframes move-from-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}
@-o-keyframes move-from-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}
@-ms-keyframes move-from-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}

/* (画面外へ)右へスライドアニメーション */
.animation-move-to-right {
  -webkit-animation-name: "move-to-right";
  -moz-animation-name: "move-to-right";
  animation-name: "move-to-right";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-to-right {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}
@-webkit-keyframes move-to-right {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}
@-o-keyframes move-to-right {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}
@-ms-keyframes move-to-right {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(200%);}
}

/* (画面外へ)左へスライドアニメーション */
.animation-move-to-left {
  -webkit-animation-name: "move-to-left";
  -moz-animation-name: "move-to-left";
  animation-name: "move-to-left";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-to-left {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(-200%);}
}
@-webkit-keyframes move-to-left {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(-200%);}
}
@-o-keyframes move-to-left {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(-200%);}
}
@-ms-keyframes move-to-left {
  0% {transform: translateX(0%);}
  99.9%,100% {transform: translateX(-200%);}
}
/* (画面外へ)上へスライドアニメーション */
.animation-move-to-top {
  -webkit-animation-name: "move-to-top";
  -moz-animation-name: "move-to-top";
  animation-name: "move-to-top";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-to-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
@-webkit-keyframes move-to-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
@-o-keyframes move-to-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
@-ms-keyframes move-to-top {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(-200%);}
}
/* (画面外へ)下へスライドアニメーション */
.animation-move-to-bottom {
  -webkit-animation-name: "move-to-bottom";
  -moz-animation-name: "move-to-bottom";
  animation-name: "move-to-bottom";
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes move-to-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}
@-webkit-keyframes move-to-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}
@-o-keyframes move-to-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}
@-ms-keyframes move-to-bottom {
  0% {transform: translateY(0%);}
  99.9%,100% {transform: translateY(200%);}
}