@charset "UTF-8";

/*==============================================================================================

    traning css

==============================================================================================*/
/*==============================================================================================

	traning

==============================================================================================*/
#traning_sec {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 980px;
  height: 100%;
  background: #dcdcdc;
  -moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  z-index: 50;
  -moz-transition: transform .8s ease, z-index 0s ease .8s;
  -webkit-transition: transform .8s ease, z-index 0s ease .8s;
  transition: transform .8s ease, z-index 0s ease .8s;
}

#traning_view:checked ~ #traning_sec {
  z-index: 60;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -moz-transition: transform .8s ease;
  -webkit-transition: transform .8s ease;
  transition: transform .8s ease;
}


#traning_sec > label {
  width: 25px;
  height: 50px;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: rgba(220, 220, 220, 1);
  position: absolute;
  bottom: 20px;
  right: -25px;
  z-index: 5;
  -moz-transition: all .8s ease, height .4s ease, background .3s ease, bottom .3s ease .8s;
  -webkit-transition: all .8s ease, height .4s ease, background .3s ease, bottom .3s ease .8s;
  transition: all .8s ease, height .4s ease, background .3s ease, bottom .3s ease .8s;
}

#traning_view:checked ~ #traning_sec > label {
  bottom: calc(100% - 50px);
  right: 0;
  width: 50px;
  height: 50px;
  background: rgba(220, 220, 220, 0);
  background: -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.traning_marker {
  width: 20px;
  height: 20px;
  position: relative;
}

.traning_marker > div {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.traning_marker > div .traning_img {
  width: 15px;
}

.traning_marker > div:nth-child(1) {
  opacity: 1;
  -moz-transition: opacity .3s ease;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.traning_marker > div:nth-child(2) {
  width: 18px;
  height: 4px;
  background: #333;
  opacity: 0;
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  -moz-transition: opacity .3s ease;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.traning_marker > div:nth-child(3) {
  width: 18px;
  height: 4px;
  background: #333;
  opacity: 0;
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  -moz-transition: opacity .3s ease;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}


#traning_view:checked ~ #traning_sec .traning_marker > div:nth-child(1) {
  opacity: 0;
}

#traning_view:checked ~ #traning_sec .traning_marker > div:nth-child(2),
#traning_view:checked ~ #traning_sec .traning_marker > div:nth-child(3) {
  opacity: 1;
}


.traning_contain {
  height: 100%;
}

.traning_wrap {
  height: 100%;
  position: relative;
}

.traning_title {
  width: 100%;
  height: 50px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  color: #FFFFFF;
  background: #f18d39;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  z-index: 2;
}

/*==============================================================================================

	stage

==============================================================================================*/
.traning_stage_contain {
  width: 100%;
  max-width: 768px;
  height: calc(100% - 50px);
  margin: 0 auto;
  background: url(/compas-deck/img/traning_map.jpg) top center;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}

.traning_enemy_contain {
  width: 60%;
  position: relative;
  top: -10%;

}

.traning_enemy_contain img {
  position: relative;
  z-index: 1;
}

.traning_enemy_img {
  transform-origin: bottom center;
}


.enemyatkanim .traning_enemy_img {
  animation: traninganim .2s forwards linear;
}

@keyframes traninganim {
  0% {
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  50% {
    -moz-transform: scaleY(0.9);
    -webkit-transform: scaleY(0.9);
    transform: scaleY(0.9);
  }

  100% {
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}


.traning_enemy_contain img.traning_attack_card {
  width: 60%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  transform-origin: center center;
  /* rotatey(180deg);*/
  -moz-transform: translate(-50%, -20%);
  -webkit-transform: translate(-50%, -20%);
  transform: translate(-50%, -20%);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
}

.enemy_attack img.traning_attack_card {
  opacity: 1;
  /* rotatey(360deg);*/
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transition: transform .4s ease;
  -webkit-transition: transform .4s ease;
  transition: transform .4s ease;
}

.traning_action_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
}

.g-effect {
  background: url(/compas-deck/img/battle_gurde.png) bottom center;
  background-size: cover;
}

.c-effect {
  background: url(/compas-deck/img/battle_counter.png) bottom center;
  background-size: cover;
}

.b-effect {
  background: url(/compas-deck/img/battle_buff.png) bottom center;
  background-size: cover;
}

.f-attack {
  background: rgba(255, 0, 0, 0.3);
}

.k-attack {
  background: rgba(0, 0, 255, 0.3);
}

.d-attack {
  background: rgba(0, 255, 0, 0.3);
}

.traning_result_wrap {
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  width: 100%;
  max-width: 300px;
}

.traning_result_title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.traning_result_score {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 10px 0;
}

.traning_result_score > div {
  width: 100px;
}

.traning_result_score > div[class*="traning_result"] {
  width: calc(100% - 100px);
  text-align: right;
}

.traning_result_score > div:nth-last-child(2),
.traning_result_score > div:last-child {
  padding-top: 20px;
  font-weight: bold;
}

/*==============================================================================================

	deck

==============================================================================================*/

.traning_deck_wrap {
  position: absolute;
  z-index: 5;
  bottom: 40px;
  left: 50%;
  width: 100%;
  max-width: 375px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.traning_deck_wrap:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 30%;
}

.traning_icon_wrap {
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
}

.traning_icon {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .6);
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.traning_icon_score {
  font-weight: bold;
  position: absolute;
  top: 5px;
  left: 2px;
  text-align: center;
  width: calc(100% - 4px);
}

.traning_icon_image {
  width: calc(100% - 10px);
  border-radius: 50%;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
  border: 2px solid #00F;
}

.traning_icon_image:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 100%;
}

.traning_icon_image img {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 120%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.traning_icon_name {
  font-weight: bold;
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: calc(100% - 4px);
  padding: 3px 0;
  text-align: center;
  background: #282e2a;
  color: #FFFFFF;
}


.traning_deck {
  width: 80%;
  height: calc(100% - 24px + 35%);
  position: absolute;
  top: -35%;
  right: 0;
  display: -webkit-flex;
  display: flex;
}

.traning_card_wrap {
  width: 25%;
  height: 100%;
  padding: 5px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  position: relative;
}

.traning_card_drop {
  width: 100%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.traning_card_drop img {
  width: 50%;
  position: relative;
  z-index: 6;
  bottom: -2%;
  -moz-transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.traning_card_drop.ui-droppable-active img {
  opacity: 0;
}

.traning_card {
  width: 100%;
  height: 65%;
  background: #333333;
  overflow: hidden;
  border-radius: 5px;
  border: 3px solid #d8822f;
}

.traning_card img {
  -moz-transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.cooldown {
  pointer-events: none;
}

.cooldown img {
  opacity: .3;
}

.traning_start {
  background: #4151c0;
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(80% - 5px);
  font-size: 10px;
  height: 24px;
  color: #FFFFFF;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}

/*==============================================================================================

	setting

==============================================================================================*/

.traning_setting_contain {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: calc(100% - 50px);
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  -moz-transition: left .3s ease;
  -webkit-transition: left .3s ease;
  transition: left .3s ease;
}

#traning_setting:checked ~ .traning_setting_contain {
  left: 0%;
}

.traning_setting_wrap {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  color: #FFFFFF;
}

.traning_setting_title {
  background: #4151c0;
  width: 100%;
  height: 30px;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}

.setting_close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  right: 0;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.setting_close:before {
  content: '';
  display: block;
  width: 18px;
  height: 4px;
  background: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.setting_close:after {
  content: '';
  display: block;
  width: 18px;
  height: 4px;
  background: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.traning_setting_tips {
  font-size: 12px;
  font-weight: bold;
}

.traning_setting_enemy {
  padding: 10px 0;
}

.traning_setting_enemy input[type="text"] {
  background: #FFFFFF;
  padding: 10px;
  width: 100%;
  border-radius: 5px;
}

.traning_setting_enemy .selectlabel:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.9px 4px 0 4px;
  border-color: #1a8dd0 transparent transparent transparent;
  position: absolute;
  top: 50%;
  right: 10px;
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

.traning_setting_usecard {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 5px 5px 0;
}

.traning_setting_usecard > label {
  width: calc(100% / 3);
  height: 60px;
  padding: 10px;
  background: #333333;
}

.traning_setting_usecard > label div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: .3;
}

.traning_setting_usecard input[type="checkbox"]:checked + label div {
  opacity: 1;
}

.traning_setting_breakset label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding-bottom: 10px;
}


.traning_setting_deck {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 5px 0;
}

.setting_card {
  width: 25%;
  padding: 3px;
  background: #333333;
}


.setting_card.ui-draggable-dragging {
  z-index: 10;
  max-width: 25%;
}

.traning_rule {
  padding-top: 5px;
  font-size: 10px;
  line-height: 1.8;
}