@charset "UTF-8";
.game1 img, .game2 img, .game3 img, .game4 img {
  vertical-align: bottom;
}
/*-----------------------------------*/
.game1 {
  position: relative;
  display: block;
  vertical-align: bottom;
  text-align: center;
  line-height: 1;
}
.game1 img {
  vertical-align: bottom;
}
#btnRush {
  height: 200px;
  background-color: #d0f8ff;
}
.game1 .btnActive, .game1 .btn {
  position: absolute;
  top: 65%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0;
  cursor: pointer;
  transform: translate(-50%,-50%);
}
.game1 .btnActive {
  z-index: 101;
  display: none;
  background: url(../img/story01/btn_img_active.png) no-repeat center center;
  background-size: 100%;
}
.game1 .btn {
  z-index: 100;
  display: block;
  background: url(../img/story01/btn_img.png) no-repeat center center;
  background-size: 100%;
}

.game1 .btnStart {
  position: absolute;
  top: 64%;
  left: 50%;
  z-index: 104;
  display: block;
  padding: 0.5rem 0;
  width: 80px;
  border: solid 2px #000;
  border-radius: 10px;
  background-color: #fff;
  font-weight: 800;
  font-size: 1.0rem;
  transform: translate(-50%,-50%);
}
.game1 .btnStart.push {
  display: none;
}

.game1 .ct_three {
  position: absolute;
  top: 64%;
  left: 50%;
  z-index: 3;
  z-index: 102;
  display: none;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
  font-size: 5rem;
  line-height: 1;
  transform: translate(-50%,-50%);
}
.game1 .ct_three.check {
  display: block;
}
.game1 .ct, .game1 .ct_time {
  z-index: 103;
  font-size: 4rem;
  line-height: 1;
}
.game1Reset {
  z-index: 105;
  display: none;
  margin: 90px auto 0 auto;
  padding: 0.5rem 0;
  width: 80px;
  border: solid 2px #000;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  text-align: center;
  font-weight: 800;
  font-size: 1.0rem;
  cursor: pointer;
}
.game1Reset.active {
  display: block;
}

.game1 ul {
  position: absolute;
  top: 56%;
  left: 50%;
  z-index: 1;
  display: flex;
  width: 80%;
  transform: translate(-50%,-50%);
  flex-wrap: wrap-reverse;
}
.game1 ul li {
  position: relative;
  top: -10px;
  width: 33%;
  height: 40px;
  opacity: 0;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -ms-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
}
.game1 ul li.active {
  top: 0px;
  opacity: 1.0;
}
.panel01 {
  z-index: 10;
}
.panel02 {
  z-index: 9;
}
.panel03 {
  z-index: 8;
}
.panel04 {
  z-index: 7;
}
.panel05 {
  z-index: 6;
}
.panel06 {
  z-index: 5;
}
.panel07 {
  z-index: 4;
}
.panel08 {
  z-index: 3;
}
.panel09 {
  z-index: 2;
}

/*-----------------------------------*/
.game2 {
  position: relative;
  display: block;
  background-color: #d0f8ff;
  text-align: center;
}
#panel {
  overflow: hidden;
  margin: 0 auto;
  width: 212px;
  height: 165px;
}

.card {
  z-index: 2;
  float: left;
  margin: 2px;
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 10px;
  background: white;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 26px;
  line-height: 80px;
  cursor: pointer;
}
/* 表の状態 */
.front {
  overflow: hidden;
  background-size: cover;
  line-height: 5;
}
/* 裏の状態 */
.back {
  background-image: url(../img/story02/icon_back.gif);
  background-size: contain;
}
/* 終了時 */
.finish {
  overflow: hidden;
  line-height: 5;
  opacity: 0;
  cursor: default;
}

.num1 {
  background: url(../img/story02/icon01.gif) no-repeat center center #fff;
  background-size: contain;
}
.num2 {
  background: url(../img/story02/icon02.gif) no-repeat center center #fff;
  background-size: contain;
}
.num3 {
  background: url(../img/story02/icon03.gif) no-repeat center center #fff;
  background-size: contain;
}
.num4 {
  background: url(../img/story02/icon04.gif) no-repeat center center #fff;
  background-size: contain;
}
.num5 {
  background: url(../img/story02/icon05.gif) no-repeat center center #fff;
  background-size: contain;
}
.num6 {
  background: url(../img/story02/icon06.gif) no-repeat center center #fff;
  background-size: contain;
}
.game2Clear {
  /* display: none; */
  position: absolute;
  top: 60%;
  left: 50%;
  z-index: 1;
  width: 30rem;
  height: 3rem;
  background: url(../img/story02/clear.jpg) no-repeat center center;
  background-size: 50%;
  opacity: 0.0;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -ms-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
  transform: translate(-50%,-50%);
}
.game2Clear.active {
  top: 55%;
  /* display: block; */
  opacity: 1.0;
}
.game2Reset {
  display: block;
  margin: 0 auto;
  padding: 0.1rem 0;
  width: 90px;
  border: solid 2px #000;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  text-align: center;
  font-size: 1.2rem;
  cursor: pointer;
}
/*-----------------------------------*/
.game3 {
  position: relative;
  display: block;
  text-align: center;
}
.pazzleContents {
  position: relative;
  top: -14px;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 200px;
  background: url(../img/story03/game_back.jpg) no-repeat center center;
  background-size: 100%;
}
.pazzleClear {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 200px;
  background: url(../img/story03/game_clear.jpg) no-repeat center center;
  background-size: 100%;
  opacity: 0.0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.pazzleClear.active {
  display: block;
}
#peace01, #peace02, #peace03, #base01, #base02, #base03 {
  position: absolute;
  display: block;
  width: 44px;
  height: 44px;
  transform: translate(-50%,-50%);
}
#peace01, #base01 {
  width: 50px;
  height: 50px;
}
#peace02, #base02 {
  width: 54px;
  height: 47px;
}
#peace03, #base03 {
  width: 44px;
  height: 44px;
}
#peace01 {
  top: 20%;
  left: 30%;
  z-index: 4;
}
#peace02 {
  top: 20%;
  left: 50%;
  z-index: 5;
}
#peace03 {
  top: 20%;
  left: 70%;
  z-index: 6;
}
#base01 {
  top: 45%;
  left: 85.4%;
  z-index: 1;
  opacity: 0;
}
#base02 {
  top: 80.5%;
  left: 56.7%;
  z-index: 2;
  opacity: 0;
}
#base03 {
  top: 47.2%;
  left: 21.9%;
  z-index: 3;
  opacity: 0;
}
/*-----------------------------------*/
.game4 {
  position: relative;
  display: block;
  background-color: #d0f8ff;
  text-align: center;
}
.game4 .btnStart4 {
  position: absolute;
  top: 60%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 12rem;
  border: solid 2px #000;
  background-color: #fff;
  transform: translate(-50%,-50%);
}
.game4 #contSet {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 auto;
  width: 270px;
  height: 134px;
  border: solid 3px #fff;
  border-radius: 10px;
  background: url(../img/story04/game_back.jpg) no-repeat center center;
  background-size: contain;
}
.game4 p.title {
  margin: 10px 0 8px 0;
  text-align: center;
  font-weight: 600;
  line-height: 1;
}
.objSet {
  position: absolute;
  top: 55%;
  left: -1500px;
  transform: translate(-50%,-50%);
}
.objSet ul {
  display: flex;
  flex-direction: row-reverse;
  width: 3000;
  text-align: left;

  flex-wrap: nowrap;
}
.objSet ul li {
  position: relative;
  width: 300px;
  height: 85px;
}
.game4obj {
  position: absolute;
  top: 0;
  left: 0;
  width: 85px;
  height: 85px;
}
.game4True, .game4False {
  position: absolute;
  top: 40%;
  left: 50%;
  opacity: 0;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -ms-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
  transform: translate(-50%,-50%);
}
.game4True div {
  display: block;
  width: 80px;
  height: 80px;
  border: solid 10px #f00;
  border-radius: 50%;
}
.game4False div:nth-child(1) {
  position: absolute;
  display: block;
  width: 10px;
  height: 80px;
  background-color: #00f;
  transform: translate(-50%,-50%) rotate(45deg);
}
.game4False div:nth-child(2) {
  position: absolute;
  display: block;
  width: 10px;
  height: 80px;
  background-color: #00f;
  transform: translate(-50%,-50%) rotate(-45deg);
}
.game4result {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  -webkit-transition-duration: 1.35s;
  -moz-transition-duration: 1.35s;
  -ms-transition-duration: 1.35s;
  -o-transition-duration: 1.35s;
  transition-duration: 1.35s;
  transform: translate(-50%,-50%);

  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.game4result.active{
  display: flex;
  opacity: 0.9;
}
.game4point {
  width: 100%;
  font-size: 3rem;
  line-height: 1;
}
.game4mes {
  width: 100%;
  font-size: 1.6rem;
}
.btnRetry4 {
  display: block;
  margin: 10px 0 0 0;
  padding: 0.2rem 1rem;
  border: solid 2px #000;
}
/*-----------------------------------*/
.game5 {
  position: relative;
  display: block;
  background: url(../img/story05/game_back.jpg) no-repeat center 90px #d0f8ff !important;
  background-size: 100% !important;
  text-align: center;
}
.game5 p {
  font-size: 1.4rem;
}
.game5 a {
  display: block;
  margin: 150px auto 0 auto;
  width: 70%;
}
/*-----------------------------------*/