@charset "UTF-8";
.game {
  width: 100%;
  max-width: 100vw;
  height: 100vw !important;
  max-height: 910px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  overflow: hidden;
}
.game img {
  vertical-align: bottom;
}
.game #boxWhite {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  max-width: 100vw;
  /* height: calc(100vw / 75 * 68); */
  height: 100vw;
  max-height: 910px;
  z-index: 20;
  background-color: rgba(255,255,255,0.8);
}
.game #boxWhite.active {
  display: block;
}
.game2 #boxWhite {
  background-color: rgba(255,255,255,0.95);
}
.game #boxWhite .btn, .game2 .nwResultSet .btn {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 80%;
  left: 50%;
  width: 50%;
  height: 13%;
  border: solid 5px #000;
  border-radius: 50rem;
  text-align: center;
  background-color: #FF3266;
  color: #fff;
  font-size: 5vw;
  font-weight: 600;
  padding: 1.2vh 0 0 0;
  display: none;
  line-height: 1.7;
}
.game #boxWhite .btn.retry {
  top: 68%;
}
.game #boxWhite .btn#nextStory2 {
  top: 85%;
}
@media screen and (min-width: 750px) {
  .game #boxWhite .btn, .game2 .nwResultSet .btn {
    height: 12%;
  }
}

/*野球盤-----------------------------------*/
.game1 {
  position: relative;
  display: block;
  text-align: center;
  line-height: 1;
  background-color: #d0f8ff;
  background: url(../img/story01/img_game_back.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  max-width: 100vw;
  /* height: calc(100vw / 75 * 68); */
  height: 100vw;
  max-height: 910px;
}

.game1 .btn.start {
  opacity: 1;
}
.game1 .btn.retry {
  opacity: 1;
}
.game1 .btn.active {
  display: block !important;
}
.game1 .check {
  opacity: 0;
}
.game1 #ball {
  position: absolute;
  transform: translate(-50%,-50%);
  top: -10%;
  left: 50%;
  display: block;
  width: 10vw;
  height: 10vw;
  background-color: #fff;
  border-radius: 50%;
}
.game1 #hitArea {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 68%;
  left: 50%;
  display: block;
  width: 13vw;
  height: 13vw;
  border: solid 2px #ccc;
  border-radius: 50%;
}
.game1 #bbBat {
  position: absolute;
  transform: translate(-5%,-50%);
  transform-origin: 0% 0%;
  rotate: 40deg;
  top: 70%;
  left: 29%;
  display: block;
  width: 30%;
  height: 5%;
  background-color: #007FFF;
  background: url(../img/story01/img_game_bat.png) no-repeat center center;
  background-size: contain;
  transition-duration: 0.2s;
}
.game1 #bbBat.batActive {
  rotate: -45deg;
}
.game1 ul {
  display: none;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 40%;
  left: 50%;
  width: 100%;
}
.game1 ul.active {
  display: block;
}
.game1 ul li {
  width: 55%;
  margin: 10px auto;
  text-align: left;
  font-size: 8vw;
  font-weight: 800;
}
#bbCountdown {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 20%;
  left: 50%;
  font-size: 20vw;
}
#bbResult {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 35%;
  left: 50%;
  width: 100%;
  z-index: 1;
}
#bbResult p {
  position: absolute;
  font-size: 10vw;
  width: 100%;
  text-shadow: 2px 2px 1px rgba(255,255,255,1), 
  -2px 2px 1px rgba(255,255,255,1), 
  2px -2px 1px rgba(255,255,255,1), 
  -2px -2px 1px rgba(255,255,255,1);
  letter-spacing: -0.5vw;
  transition-duration: 0.35s;
  opacity: 0;
}
#bbResultTxt1 {
  color: #3374B6;
}
#bbResultTxt2 {
  color: #FFA600;
}
#bbResultTxt3 {
  color: #E60000;
}
#bbResultTxt1.active, #bbResultTxt2.active, #bbResultTxt3.active {
  opacity: 1;
}

#bbGameTxt {
  display: block;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 40%;
  left: 50%;
  width: 100%;
}
#bbGameTxt h2 {
  width: 90%;
  margin: 0 auto;
}
#bbGameTxt p {
  font-size: 4.5vw;
}

#bbSwingBtnLeft, #bbSwingBtnRight {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 88%;
  left: 11%;
  display: block;
  width: 17vw;
  height: 30vw;
}
#bbSwingBtnLeft {
  left: 11%;
}
#bbSwingBtnRight {
  left: 89%;
}

/*仲間分け-----------------------------------*/
.game2 {
  position: relative;
  display: block;
  text-align: center;
  line-height: 1;
  background: url(../img/story02/img_game_back.gif) repeat center center;
  background-size: 20%;
  width: 100%;
  max-width: 100vw;
  /* height: calc(100vw / 75 * 68); */
  height: 100vw;
  max-height: 910px;
}
.game2 .btn.start {
  opacity: 1;
}
.game2 .btn.retry {
  opacity: 1;
}
.game2 .btn.active {
  display: block !important;
}
.nwResultSet {
  display: block;
  width: 100%;
  max-width: 100vw;
  height: calc(100vw / 75* 91);
  max-height: 910px;
  position: absolute;
  top: 0;
  left: 0;
}
p.nwResultTxt{
  position: absolute;
  transform: translate(-50%, -50%);
  top: 36%;
  left: 50%;
  font-size: 10vw;
  display: block;
  width: 100%;
}
.nwResultSet .btn.retry {
  top: 55% !important;
  height: 11%;
  line-height: 1.7;
}

#nwQuizSet {
  display: block;
  width: 100%;
  max-width: 100vw;
  /* height: calc(100vw / 75 * 68); */
  height: 100vw;
  max-height: 910px;
  position: relative;
}
.nwItems {
  display: none;
  width: 100%;
  max-width: 100vw;
  height: 100vw;
  max-height: 910px;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  background: url(../img/story02/img_game_back.gif) repeat center center;
  background-size: 20%;
}
.nwItems:nth-child(1) {
  z-index: 10;
}
.nwItems:nth-child(2) {
  z-index: 9;
}
.nwItems:nth-child(3) {
  z-index: 8;
}
.nwItems:nth-child(4) {
  z-index: 7;
}
.nwItems:nth-child(5) {
  z-index: 6;
}
.nwItems:nth-child(6) {
  z-index: 5;
}
.nwItems:nth-child(7) {
  z-index: 4;
}
.nwItems:nth-child(8) {
  z-index: 3;
}
.nwItems:nth-child(9) {
  z-index: 2;
}
.nwItems:nth-child(10) {
  z-index: 1;
}
.nwItems.active {
  display: block;
}
.nwImage {
  width: 75vw;
  height: 56vw;
  margin: 10% auto;
}
.nwBtn {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.nwBtn .nwAnsBtn {
  display: block;
  border: solid 5px #fff;
  margin: 0 2vw;
  padding: 3vw 4vw;
  font-size: 4.5vw;
  border-radius: 40px;
  background-color: #FF3266;
  color: #fff;
  font-weight: 800;
}
.nwBtn .nwAnsBtn:nth-child(even) {
  background-color: #2994FF;
}

.nwtrue1, .nwfalse1, 
.nwtrue2, .nwfalse2,
.nwtrue3, .nwfalse3,
.nwtrue4, .nwfalse4,
.nwtrue5, .nwfalse5,
.nwtrue6, .nwfalse6,
.nwtrue7, .nwfalse7,
.nwtrue8, .nwfalse8,
.nwtrue9, .nwfalse9,
.nwtrue10, .nwfalse10 {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 15vw;
  opacity: 0;
  transition-duration: 0.35s;
}
.nwtrue1.active, .nwfalse1.active, 
.nwtrue2.active, .nwfalse2.active, 
.nwtrue3.active, .nwfalse3.active, 
.nwtrue4.active, .nwfalse4.active, 
.nwtrue5.active, .nwfalse5.active, 
.nwtrue6.active, .nwfalse6.active, 
.nwtrue7.active, .nwfalse7.active, 
.nwtrue8.active, .nwfalse8.active, 
.nwtrue9.active, .nwfalse9.active, 
.nwtrue10.active, .nwfalse10.active {
  top: 40%;
  opacity: 1;
}

#nwGameTxt {
  display: block;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 40%;
  left: 50%;
  width: 100%;
}
#nwGameTxt h2 {
  width: 90%;
  margin: 0 auto;
}
#nwGameTxt p {
  font-size: 4.5vw;
}

/*漢字選択-----------------------------------*/
.game3 {
  position: relative;
  display: block;
  text-align: center;
  line-height: 1;
  background: url(../img/story03/img_game_back.gif) repeat center center;
  background-size: 20%;
  width: 100%;
  max-width: 100vw;
  /* height: calc(100vw / 75 * 68); */
  height: 100vw;
  max-height: 910px;
}
.game3 .btn.start {
  opacity: 1;
}
.game3 .btn.retry {
  opacity: 1;
}
.game3 .btn.active {
  display: block !important;
}

#keQuizJudge {
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  font-size: 15vw;
}
#keQuizJudge #true, #keQuizJudge #false {
  position: absolute;
  transform: translate(-50%, -60%);
  top: 60%;
  left: 50%;
  width: 50vw;
  opacity: 0;
  transition-duration: 0.35s;
  font-size: 9vw;
  font-weight: 800;
  color: #0188ff;
  text-shadow: 0 0 9px rgba(255, 255, 255, 1.0);
}
#keQuizJudge #true.active, #keQuizJudge #false.active {
  top: 40%;
  opacity: 1;
} 
#keQuizSet {
  position: relative;
  top: 0;
  left: 0;
}
.keQuiz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  /* height: calc(100vw / 75 * 68); */
  height: 100vw;
  max-height: 910px;
  background: url(../img/story03/img_game_back.gif) repeat center center;
  background-size: 20%;
  opacity: 1;
  transition-duration: 0.35s;
}
.keQuiz:nth-child(1) {
  z-index: 3;
}
.keQuiz:nth-child(2) {
  z-index: 2;
}
.keQuiz:nth-child(3) {
  z-index: 1;
}
.keQuiz.active {
  opacity: 0;
}

.keImage{
  width: 80vw;
  height: 30vw;
  margin: 10% auto 5% auto;
  background-color: #fff;
  display: flex;
  flex-wrap: nowrap;
  text-align: left;
  border-radius: 15px;
  overflow: hidden;
}
.keImage img {
  width: 40%;
}
.keImage p {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  height: 100%;
  padding: 0 2.0vw;
  font-size: 1.4rem;
  line-height: 1.6;
}
.keAnsSet, .keBtnSet {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.keAns {
  display: block;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  margin: 0 1vw;
  font-size: 11vw;
  line-height: 0;
  background-color: #fff;
  overflow: hidden;
}
.keAns ruby rt {
  font-size: 4vw;
}
.keBtn {
  display: block;
  width: 15vw;
  height: 15vw;
  border-radius: 10px;
  margin: 5% 1vw 0 1vw;
  font-size: 8vw;
  opacity: 1;
  background-color: #fff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.keBtn ruby rt {
  font-size: 4vw;
}
.keBtn.active {
  opacity: 0.5;
}

#keGameTxt {
  display: block;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 40%;
  left: 50%;
  width: 100%;
}
#keGameTxt h2 {
  width: 90%;
  margin: 0 auto;
}
#keGameTxt p {
  font-size: 4.5vw;
}
#keGameTxtEnd {
  font-size: 14vw;
  font-weight: 800;
  top: 35%;
  display: none;
}

/*不審者はじき-----------------------------------*/
.game4 {
  position: relative;
  display: block;
  text-align: center;
  line-height: 1;
  background: url(../img/story04/img_game_back.jpg) no-repeat center center;
  background-size: cover;
  max-width: 100vw;
  height: calc(100vw / 75 * 91);
  max-height: 910px;
  overflow: hidden;
}
.game4 .btn.start {
  opacity: 1;
}
.game4 .btn.retry {
  opacity: 1;
}
.game4 .btn.active {
  display: block !important;
}
.fhRisultTxt {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 40%;
  left: 50%;
  font-size: 10vw;
  width: 100%;
  display: none;
  line-height: 1.4;
  font-weight: 800;
}
.fhRisultTxt span {
  font-size: 14vw;
}
.fhRisultTxt.active {
  display: block;
}

#fhReelSet ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: calc(15rem * 15);
  position: absolute;
  top: 20vw;
  left: 100vw;
}
#fhReelSet ul li {
  position: relative;
  display: block;
  width: 50vw;
  height: 50vw;
  padding: 0 50vw 0 0;
}
#fhReelSet ul li img {
  position: relative;
  top: 0;
  left: 25%;
  width: 25vw;
  transition-duration: 0.35s;
}

#fhResult {
  position: absolute;
  width: 100%;
  height: 100%;
}
#fhResult div {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 20vw;
  width: 50%;
  opacity: 0;
  transition-duration: 0.35s;
}

#fhGameTxt {
  display: block;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 40%;
  left: 50%;
  width: 100%;
}
#fhGameTxt h2 {
  width: 90%;
  margin: 0 auto;
}
#fhGameTxt p {
  font-size: 4.5vw;
}
/*-----------------------------------*/