@charset "UTF-8";
.bg_game {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #000;
  opacity: 0.8;
}

.game_container_common {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.game_inner_common {
  position: relative;
  z-index: 20;
  width: 520px; /* 3マス × 100px = 300px */
  height: 520px;
  background-color: #fff;
  margin: 0 auto;
  padding: 13px 0 0 13px;
  margin-top: 40px;
}

.puzzle-piece {
  transition: top 0.2s ease-out, left 0.2s ease-out;
}

.game_inner_wrapper {
  position: relative;
  z-index: 20;
  width: 1329px;
  height: 1122px;
  padding-top: 160px;
  background-image: url(../img/img_memo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}

.game_inner_main {
  width: 942px;
  height: 875px;
  margin: 0 auto;
  background-image: url(../img/img_game_inner_main.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#game_modal {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
}

.gamemodal_container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.gamemodal_inner_flex {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 20;
  border-radius: 5px;
}

.gamemodal_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 20;
  width: 200px;
  height: 200px;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.gamemodal_inner:hover {
  opacity: 0.8;
}
.gamemodal_inner .txt {
  line-height: 1.6;
}

.gamemodal_inner + .gamemodal_inner {
  margin-left: 50px;
}

.game02_inner {
  overflow: hidden;
}

.puzzle-piece {
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: top 0.2s ease-out, left 0.2s ease-out;
}

.game_inner_common:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  opacity: 0.5;
}
.game_inner_common.game_3-3:before {
  background-image: url(../img/img_game_3-3.png);
}
.game_inner_common.game_4-4:before {
  background-image: url(../img/img_game_4-4.png);
}
.game_inner_common.game_5-5:before {
  background-image: url(../img/img_game_5-5.png);
}
.game_inner_common .puzzle-piece {
  z-index: 50;
}

#game01_01, #game01_02, #game01_03,
#game02_01, #game02_02, #game02_03,
#game03_01, #game03_02, #game03_03,
#game04_01, #game04_02, #game04_03,
#game05_01, #game05_02, #game05_03,
#game06_01, #game06_02, #game06_03,
#game07_01, #game07_02, #game07_03,
#game08_01, #game08_02, #game08_03,
#game09_01, #game09_02, #game09_03,
#game10 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  opacity: 1 !important;
  pointer-events: visible !important;
  display: none;
}

.game_inner_main {
  padding-top: 34px;
}

.game_inner_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 484px;
  height: 145px;
  margin: 0 auto;
  padding-left: 55px;
}
.game_inner_ttl .img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 112px;
  margin-right: 20px;
}
.game_inner_ttl .txt {
  width: calc(100% - 112px);
}
.game_inner_ttl .txt_01 {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 25px;
  color: #FF4040;
}
.game_inner_ttl .txt_01 img {
  width: 85px;
  margin-right: 15px;
}
.game_inner_ttl .txt_02 {
  margin-top: 30px;
  font-weight: 700;
  font-size: 22px;
  color: #FF4040;
}

.btn_game {
  margin-top: 35px;
  text-align: center;
}
.btn_game a, .btn_game span {
  display: inline-block;
  width: 334px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.btn_game a:hover, .btn_game span:hover {
  opacity: 0.8;
}

.bg_recipe {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #000;
  opacity: 0.8;
}

#recipe {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  min-width: 1330px;
}

.recipe_container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  min-width: 1330px;
}

.recipe_main {
  position: relative;
  z-index: 50;
  width: 1330px;
  height: 901px;
  background-image: url(../img/bg_recipe_main.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 158px;
}
.recipe_main .img_clip {
  position: absolute;
  top: -127px;
  left: 65px;
  width: 317px;
}
.recipe_main .recipe_main_ttl {
  font-weight: 700;
  font-size: 38px;
  color: #FF4040;
  text-align: center;
}
.recipe_main .recipe_main_container {
  display: flex;
  margin-top: 70px;
  padding: 0 49px 0 100px;
}
.recipe_main .recipe_main_img {
  width: 473px;
  padding-top: 15px;
}
.recipe_main .recipe_main_txt {
  position: relative;
  width: calc(100% - 473px);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 50px;
  font-size: 18px;
  color: #38080C;
  line-height: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}
.recipe_main .recipe_inner01 {
  padding: 0 58px 52px 20px;
}
.recipe_main .recipe_inner01_row {
  display: flex;
}
.recipe_main .recipe_inner01_row .inner01_row01 {
  width: 30px;
  font-weight: 900;
}
.recipe_main .recipe_inner01_row .inner01_row02 {
  width: calc(100% - 30px - 140px);
}
.recipe_main .recipe_inner01_row .inner01_row03 {
  width: 140px;
}
.recipe_main .recipe_inner02 {
  padding-right: 80px;
}
.recipe_main .recipe_inner02 .recipe_inner02_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-top: 4px;
  font-weight: 700;
  font-size: 18px;
  color: #38080C;
  background-color: #fff;
  border-radius: 100px;
  border: 2px solid #38080C;
}
.recipe_main .recipe_inner02 ul {
  position: relative;
  margin-top: 14px;
  counter-reset: recipe-step;
  list-style: none;
  padding-left: 20px;
}
.recipe_main .recipe_inner02 li {
  display: flex;
  counter-increment: recipe-step;
  margin-bottom: 10px;
}
.recipe_main .recipe_inner02 li::before {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding-top: 3px;
  border: 1px solid #38080C;
  color: #38080C;
  content: counter(recipe-step);
  font-weight: 500;
  margin-right: 11px;
  border-radius: 50%;
  background-color: #fff;
}
.recipe_main .recipe_main_txt {
  height: 450px;
  overflow-y: scroll;
}
.recipe_main .recipe_main_txt::-webkit-scrollbar {
  width: 10px;
}
.recipe_main .recipe_main_txt::-webkit-scrollbar-track {
  background: transparent;
}
.recipe_main .recipe_main_txt::-webkit-scrollbar-thumb {
  background: #D8CFC7;
  border-radius: 10px;
}
.recipe_main .recipe_main_txt::-webkit-scrollbar-thumb:hover {
  background: #C4B9B0;
}
.recipe_main .recipe_main_txt {
  scrollbar-width: thin;
  scrollbar-color: #D8CFC7 transparent;
}

.btn_back_modal {
  margin-top: 40px;
  text-align: center;
}
.btn_back_modal a, .btn_back_modal span {
  display: inline-block;
  width: 334px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.btn_back_modal a:hover, .btn_back_modal span:hover {
  opacity: 0.8;
}

#recipe {
  display: none;
}

.bg_game_select_level {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #000;
  opacity: 0.8;
}

#game_select_level {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  min-width: 1330px;
}

.game_select_level_container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  min-width: 1330px;
}

.game_select_level_main {
  position: relative;
  z-index: 50;
  width: 1330px;
  height: 901px;
  background-image: url(../img/bg_recipe_main.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 158px;
}

@media only screen and (max-width: 768px) {
  .game_inner_wrapper {
    width: 92.2916666667vw;
    height: 77.9166666667vw;
    padding-top: 11.1111111111vw;
  }
  .game_level_select_main_close,
  .game_modal_close {
    top: 5.3333vw;
    right: 5.3333vw;
    width: 8vw;
    height: 8vw;
  }
  .game_level_select_main_close:before,
  .game_modal_close:before {
    padding-top: 1.3333vw;
    font-size: 5.3333vw;
  }
  .game_inner_ttl .txt {
    display: inline-block;
    width: unset;
  }
  .game_inner_ttl .txt_01 {
    justify-content: center;
    font-size: 3.4666vw;
  }
  .game_inner_ttl .txt_02 {
    justify-content: center;
    text-align: center;
    margin-top: 2.6666vw;
    font-size: 3.4666vw;
  }
  .game_inner_ttl .txt_01 img {
    width: 10vw;
    margin-right: 2.6666vw;
  }
  .game_inner_common {
    margin-top: 0;
  }
  .btn_game {
    transform-origin: top center;
    margin-top: 5.3333vw;
  }
  .recipe_container {
    width: 100%;
    min-width: unset;
  }
  .recipe_main {
    padding-top: 10.9722222222vw;
  }
  .game_inner_ttl {
    width: 100%;
  }
}
.game_inner_ttl .img img {
  width: 100%;
}

.puzzle-piece {
  border-radius: min(0.4vw, 3px);
  overflow: hidden;
}

.clear-message {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 53.3%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 656px;
  min-height: 874px;
  background-color: rgba(255, 64, 64, 0.7);
  border-radius: 90px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  z-index: 100;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.clear-message .clear-message_main {
  width: 546px;
  min-height: 503px;
  border-radius: 20px;
  background-color: #fff;
  padding: 56px 32px 64px;
}
.clear-message .clear_ttl {
  width: 255px;
  margin: 0 auto;
  color: #FF4040;
  text-align: center;
}
.clear-message .clear_ttl_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.clear-message .clear_ttl_flex img {
  width: 86px;
}
.clear-message .clear_ttl_flex span {
  display: inline-block;
  font-weight: 700;
  font-size: 26px;
  margin-left: 13px;
}
.clear-message .clear_ttl_img {
  margin-top: 8px;
}
.clear-message .clear_ttl_img img {
  width: 100%;
}
.clear-message .clear_main {
  margin-top: 23px;
}
.clear-message .clear_share {
  width: 100%;
  background-color: #F1EDE5;
  border-radius: 16px;
  padding: 20px 0;
}
.clear-message .clear_share_ttl {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  color: #38080C;
}
.clear-message ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}
.clear-message li {
  width: 48px;
  height: 48px;
}
.clear-message li a {
  display: block;
  width: 100%;
  height: 100%;
}
.clear-message li + li {
  margin-left: 20px;
}
.clear-message .clear_btn_recipe {
  margin-top: 32px;
}
.clear-message .clear_btn_recipe a, .clear-message .clear_btn_recipe span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 334px;
  margin: 0 auto;
  font-size: 20px;
  background-color: #ccc;
  border-radius: 100px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.clear-message .clear_btn_recipe a:hover, .clear-message .clear_btn_recipe span:hover {
  opacity: 0.8;
}

.clear-message.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media only screen and (max-width: 768px) {
  .game_inner_main {
    width: 65.4166666667vw;
    height: 60.7638888889vw;
  }
  .game_inner_ttl {
    width: 33.6111111111vw;
    height: 10.0694444444vw;
    padding-left: 3.8194444444vw;
  }
  .game_inner_ttl .txt_01 {
    font-size: 1.7361111111vw;
  }
  .game_inner_ttl .txt_02 {
    margin-top: 2.0833333333vw;
    font-size: 1.5277777778vw;
  }
  .game_inner_common {
    width: 36.1111111111vw !important;
    height: 36.1111111111vw !important;
    padding: 0.9027777778vw 0 0 0.9027777778vw;
    margin-top: 2.7777777778vw;
  }
  .game_inner_ttl .img {
    width: 7.7777777778vw;
    height: 7.7777777778vw;
    margin-right: 1.3888888889vw;
  }
  .recipe_main {
    width: 92.3611111111vw;
    height: 62.5694444444vw;
  }
  .game_inner_main {
    padding-top: 2.3611111111vw;
  }
  .game_inner_ttl .txt_01 img {
    width: 5.9027777778vw;
    margin-right: 1.0416666667vw;
  }
  .btn_game a, .btn_game span {
    width: 23.1944444444vw;
  }
  .recipe_main .img_clip {
    top: -8.8194444444vw;
    left: 4.5138888889vw;
    width: 22.0138888889vw;
  }
  .recipe_main .recipe_main_ttl {
    font-size: 2.6388888889vw;
  }
  .recipe_main .recipe_main_container {
    margin-top: 4.8611111111vw;
    padding: 0 3.4027777778vw 0 6.9444444444vw;
  }
  .recipe_main .recipe_main_img {
    width: 32.8472222222vw;
    padding-top: 1.0416666667vw;
  }
  .recipe_main .recipe_main_txt {
    height: 31.25vw;
    width: calc(100% - 32.8472222222vw);
    padding-top: 1.3888888889vw;
    padding-bottom: 1.3888888889vw;
    padding-left: 3.4722222222vw;
    font-size: 1.25vw;
    color: #38080C;
    line-height: 2;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2.7777777778vw, black calc(100% - 2.7777777778vw), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 2.7777777778vw, black calc(100% - 2.7777777778vw), transparent 100%);
  }
  .recipe_main .recipe_inner01 {
    padding: 0 4.0277777778vw 3.6111111111vw 1.3888888889vw;
  }
  .recipe_main .recipe_inner01_row .inner01_row01 {
    width: 2.0833333333vw;
    font-weight: 900;
  }
  .recipe_main .recipe_inner01_row .inner01_row02 {
    width: calc(100% - 2.0833333333vw - 9.7222222222vw);
  }
  .recipe_main .recipe_inner01_row .inner01_row03 {
    width: 9.7222222222vw;
  }
  .recipe_main .recipe_inner02 {
    padding-right: 5.5555555556vw;
  }
  .recipe_main .recipe_inner02 .recipe_inner02_ttl {
    height: 2.7777777778vw;
    padding-top: 0.2777777778vw;
    font-size: 1.25vw;
    border-radius: 6.9444444444vw;
    border: 2px solid #38080C;
  }
  .recipe_main .recipe_inner02 ul {
    margin-top: 0.9722222222vw;
    padding-left: 1.3888888889vw;
  }
  .recipe_main .recipe_inner02 li {
    margin-bottom: 0.6944444444vw;
  }
  .btn_back_modal {
    margin-top: 2.7777777778vw;
  }
  .btn_back_modal a, .btn_back_modal span {
    width: 23.1944444444vw;
  }
  #recipe {
    min-width: unset;
  }
  .recipe_main .recipe_inner02 li::before {
    width: 2.2222222222vw;
    height: 2.2222222222vw;
    padding-top: 0.2083333333vw;
    margin-right: 0.7638888889vw;
  }
  .game_level_select_main_close, .game_modal_close {
    top: -9.3vw;
  }
  .clear-message {
    width: 80vw;
    min-height: 60.6944444444vw;
    border-radius: 6.25vw;
    font-size: 2.2222222222vw;
  }
  .clear-message .clear_btn_recipe span {
    width: 100%;
    background-color: transparent;
  }
}
.clear-message .clear_btn_recipe span {
  background-color: transparent;
}

@media only screen and (min-width: 769px) {
  .game_inner_wrapper {
    zoom: 0.65;
  }
  .recipe_main_wrapper {
    zoom: 0.65;
  }
  #game_level_select {
    zoom: 0.65;
  }
}
.game_inner_ttl .txt_01 {
  justify-content: center;
  padding-bottom: 3px;
}

.game_inner_ttl .txt_01,
.game_inner_ttl .txt_02 {
  padding-right: 37px;
  text-align: center;
  white-space: nowrap;
}

@media only screen and (max-width: 768px) {
  .game_inner_ttl .txt_01,
  .game_inner_ttl .txt_02 {
    padding-right: 2.5694444444vw;
    text-align: center;
  }
  .game_inner_ttl .txt_01 {
    padding-bottom: 2.5694444444vw;
  }
  .btn_game {
    margin-top: 3vw;
  }
  .game_inner_ttl .txt_01 {
    padding-bottom: 1.4vw;
  }
  .game_inner_ttl .txt_02 {
    margin-top: 1.5vw;
  }
}
@media screen and (max-width: 768px) {
  #game_level_select .game_level_select_main {
    background-image: url(../img/bg_gameselect_sp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 35vw;
    aspect-ratio: 750/852;
  }
  .game_inner_main {
    width: 100%;
    height: unset;
    aspect-ratio: 750/852;
    background-image: url(../img/img_memo_sp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 20vw;
  }
  .game_inner_wrapper {
    height: unset;
    aspect-ratio: 750/852;
    background-image: unset;
    padding-top: 0;
  }
  .game_inner_ttl {
    justify-content: flex-start;
    padding-left: 0;
    margin-right: unset;
    margin-left: 21vw;
  }
  .game_inner_ttl .txt_01 {
    font-size: 2.6666vw;
  }
  .game_inner_ttl .txt_02 {
    font-size: 2.4vw;
  }
  .game_inner_ttl .img {
    width: 10.1333vw;
    height: 10.1333vw;
  }
  .game_inner_common {
    margin: 0 0 0 15vw;
    width: 44vw !important;
    height: 44vw !important;
    margin-top: 3.6vw !important;
  }
  .btn_game {
    text-align: unset;
    margin-left: 17vw;
  }
  .recipe_main {
    background-image: url(../img/bg_recipe_main_sp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 750/849;
    height: unset;
    padding-top: 14.972222vw;
  }
  .recipe_main .recipe_main_txt {
    font-size: 2.6666vw;
    height: 52.25vw;
  }
  .recipe_main .recipe_main_container {
    margin-top: 5.861111vw;
    padding: 0 8.402778vw 0 9.944444vw;
  }
  .recipe_main .recipe_inner02 .recipe_inner02_ttl {
    width: 100%;
    height: 5.3333vw;
    font-size: 2.6666vw;
  }
  .btn_back_modal a, .btn_back_modal span {
    width: 40.2666vw;
  }
  .recipe_main .recipe_inner01_row .inner01_row01 {
    width: 4vw;
  }
  .recipe_main .recipe_inner01 {
    padding-right: 0;
    padding-left: 0;
  }
  .recipe_main .img_clip {
    width: 34.6666vw;
  }
  .recipe_main_ttl {
    display: none;
  }
  #game_level_select .game_level_select_main li .img:after {
    border-radius: 3.3333vw;
  }
  .game_inner_ttl .txt_01 img {
    width: 7.4666vw;
  }
  .btn_game a, .btn_game span {
    width: 40.2666vw;
  }
}
@media only screen and (max-width: 768px) {
  .btn_game {
    margin-top: 2vw;
  }
}/*# sourceMappingURL=game.css.map */