@charset "UTF-8";
.tra-content *{
  margin:0;
  padding: 0;
  vertical-align: baseline;
}
.tra-content img {
  max-width: 100%;
  vertical-align: bottom;
  height: auto;
}

.tra-content .quicklink{
  text-align: center;
  line-height: 1.7;
  font-size: .8em;
}

.tra-content wrap{
  width: 100%;
  position: relative;
}
.tra-content .tra-display-area{
  position: relative;
  width: 100%;
  height: 401px;
  /*border: #231815 1px solid;*/
  margin: auto;
  background: #fff;
}


/*
.tra-display-area{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  height: 720px;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border: #231815 1px solid;
}
*/
.tra-content .pageDisplay{
  height: 100%;
}
.tra-display-area .main{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.tra-display-area .anime{
  width: 100%;
}
.tra-display-area .prev{
  width: 11.05%;
  display: none;
  position: absolute;
  bottom: 5%;
  left: 3%;
}
.tra-display-area .next{
  width: 11.05%;
  display: none;
  position: absolute;
  bottom: 5%;
  right: 3%;
}
.tra-display-area a:hover{
  opacity: .7 !important;
  transition: .3s;
}
.tra-display-area .fadein{
  display: none;
}

#start .next{
  width: 9.25%;
  position: absolute;
  bottom: 11%;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  transform:  translateX(-50%);
  display: block;
}

#page02 .balloon{
  width: 13.92%;
  position: absolute;
  top: 16.5%;
  left: 17.5%;
}
#page02 .main{
  width: 50%;
  top: 48%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform:  translateX(-50%);
}

.tra-display-area .start_btn{
  width: 100%;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

#page15 .select{
  position: relative;
  display: none;
  padding-top: 13.7%;
  text-align: center;
  z-index: 2;
}
#page15 .select li{
  width: 41%;
  display: inline-block;
}
#page15 .prev{
  z-index: 3;
}

#a-1 .num01, #b-1 .num01{
  width: 21%;
  display: none;
  position: absolute;
  top: 15.4%;
  left: 44%;
}
#a-1 .num02, #b-1 .num02{
  width: 12.5%;
  display: none;
  position: absolute;
  top: 40%;
  left: 44%;
}
#a-1 .num03, #b-1 .num03{
  width: 35%;
  display: none;
  position: absolute;
  top: 63.5%;
  left: 43.9%;
}
#a-1 .txt, #b-1 .txt{
  width: 37.5%;
  display: none;
  position: absolute;
  bottom: 8.5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform:  translateX(-50%);
}

#a-4, #b-4{
  width: 100%;
  height: 100%;
  background: url(/assets/includes/toraripi-simulator-long/files/images/a-4_bg.gif) no-repeat;
  background-size: cover;
}
#a-4 .select, #b-4 .select{
  position: relative;
  display: none;
  padding-top: 22.5%;
  text-align: center;
  z-index: 2;
}
#a-4 .select li, #b-4 .select li{
  width: 40.5%;
  display: inline-block;
  margin: 0 1%;
}

.tra-display-area .result01 .num01{
  width: 19.5%;
  display: none;
  position: absolute;
  top: 28%;
  right: 29.6%;
}
.tra-display-area .result01 .num02{
  width: 29.5%;
  display: none;
  position: absolute;
  top: 45%;
  right: 20%;
}
.tra-display-area .result01 .num03{
  width: 11.8%;
  display: none;
  position: absolute;
  top: 60%;
  right: 29.6%;
}

#a-a-2 .prev,#a-b-2 .prev,#b-a-2 .prev,#b-b-2 .prev,
#a-a-4 .prev,#a-b-4 .prev,#b-a-4 .prev,#b-b-4 .prev{
  left: auto;
  right: 3%;
  bottom: 13%;
}

#a-a-7 .num01{
  width: 39%;
  display: none;
  position: absolute;
  top: 33.5%;
  left: 38.5%;
}
#a-a-7 .num02{
  width: 39%;
  display: none;
  position: absolute;
  top: 57.5%;
  left: 38.2%;
}

#a-b-7 .num01{
  width: 45.8%;
  display: none;
  position: absolute;
  top: 33.5%;
  left: 35.5%;
}
#a-b-7 .num02{
  width: 45.8%;
  display: none;
  position: absolute;
  top: 57.5%;
  left: 35.3%;
}

#b-a-7 .num01{
  width: 46.5%;
  display: none;
  position: absolute;
  top: 33.5%;
  left: 34.7%;
}
#b-a-7 .num02{
  width: 46.5%;
  display: none;
  position: absolute;
  top: 57.5%;
  left: 34.7%;
}

#b-b-7 .num01{
  width: 53.2%;
  display: none;
  position: absolute;
  top: 33.5%;
  left: 32%;
}
#b-b-7 .num02{
  width: 53.5%;
  display: none;
  position: absolute;
  top: 57.5%;
  left: 31.4%;
}

#end01 .prev{
  right: 15.5%;
  left: auto;
}

#end02 .main{
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

#end03 .back{
  width: 11.05%;
  display: none;
  position: absolute;
  bottom: 5%;
  right: 3%;
}