.card {
  opacity: 0;
  position: relative;
  font-style: italic;
  color: white;
  padding: 0;
}
.card__side {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.6s ease;
  width: 100%;
}
.card__side img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: auto;
}
.card__side dl,
.card__side ul {
  position: absolute;
  z-index: 1;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
.card__side--front, .card__side--back {
  backface-visibility: hidden;
}
.card__side--front dl {
  background-image: url("../img/frame/front.png");
}
.card__side--front dl dt {
  position: absolute;
  top: 73%;
  left: 5%;
  font-size: 1.5em;
}
@media screen and (max-width: 1300px) {
  .card__side--front dl dt {
    font-size: 1.5vw;
  }
  .card__side--front dl dt > span:not(.position) {
    font-size: 90%;
  }
}
@media screen and (max-width: 970px) {
  .card__side--front dl dt {
    font-size: 3.5vw;
  }
  .card__side--front dl dt > span:not(.position) {
    font-size: 85%;
  }
}
@media screen and (max-width: 532px) {
  .card__side--front dl dt {
    font-size: 6vw;
  }
}
.card__side--front dl dt ruby rt:nth-of-type(1) {
  padding-left: 0.5em;
}
.card__side--front dl dt ruby rt:nth-of-type(2) {
  padding-left: 2em;
}
.card__side--front dl dt ruby span {
  margin-left: 0.75em;
}
.card__side--front dl dt span.position {
  font-size: 0.69em;
}
.card__side--front dl dt > span:not(.position) {
  display: inline-block;
  transform: scaleX(0.5) translateX(-50%);
  width: 150%;
}
.card__side--front dl dt > span:not(.position) span.position {
  display: inline-block;
  transform: scaleX(2);
  font-size: 0.7em;
  margin-left: 1.5em;
}
.card__side--front dl dd {
  position: absolute;
}
@media screen and (max-width: 1300px) {
  .card__side--front dl dd {
    font-size: 1vw;
  }
}
@media screen and (max-width: 970px) {
  .card__side--front dl dd {
    font-size: 2vw;
  }
}
@media screen and (max-width: 532px) {
  .card__side--front dl dd {
    font-size: 3vw;
  }
}
.card__side--front dl dd.b_t {
  top: 83%;
  left: 5%;
}
@media screen and (max-width: 970px) {
  .card__side--front dl dd.b_t {
    top: 85%;
  }
}
.card__side--front dl dd.department, .card__side--front dl dd.department2 {
  top: 89%;
  left: 5%;
  line-height: 1.1;
  width: 82%;
}
@media screen and (max-width: 970px) {
  .card__side--front dl dd.department, .card__side--front dl dd.department2 {
    top: 90%;
  }
}
.card__side--front dl dd.department2 {
  top: 87%;
  line-height: 1.5;
}
.card__side--front dl dd.number {
  top: 13.5%;
  left: 4%;
  font-size: 2vw;
  font-family: "Impact", "Anton";
  color: white;
  width: 1.1em;
  text-align: center;
}
@media screen and (max-width: 1250px) {
  .card__side--front dl dd.number {
    left: 5%;
  }
}
@media screen and (max-width: 970px) {
  .card__side--front dl dd.number {
    font-size: 6vw;
    top: 11.5%;
    left: 3%;
  }
}
@media screen and (max-width: 532px) {
  .card__side--front dl dd.number {
    font-size: 8vw;
    top: 13.5%;
    left: 5%;
  }
}
.card__side--front dl dd.remarks, .card__side--front dl dd.rookie {
  top: 2%;
  right: 11%;
  color: white;
  font-size: 1em;
  width: 3.4em;
  height: 3.4em;
  background-color: #DB3D23;
  border-radius: 50%;
  line-height: 3.4em;
  text-align: center;
}
.card__side--front dl dd.rookie {
  background-color: #E72929;
}
.card__side--front.suit dl {
  background-image: url("../img/frame/front_suit.png");
}
.card__side--front.suit dl span {
  margin-left: 0.5em;
}
.card__side--front.suit dl dd {
  top: 83%;
  line-height: 1.1;
  width: 82%;
  font-size: 0.8vw;
}
@media screen and (max-width: 1200px) {
  .card__side--front.suit dl dd {
    line-height: 1.25;
    font-size: 0.95vw;
  }
}
@media screen and (max-width: 970px) {
  .card__side--front.suit dl dd {
    font-size: 1.85vw;
    top: 85%;
  }
}
@media screen and (max-width: 532px) {
  .card__side--front.suit dl dd {
    font-size: 3.5vw;
  }
}
.card__side--back {
  transform: rotateY(180deg);
  /*dt {
  	transform 		: rotate(90deg); 
  	transform-origin: 4% 60%;
  	font-size 		: 1.5em;
  	white-space 	: nowrap;
  	font-family 	: 'Impact' , 'Anton';
  	color 			: #0072BC;
  }*/
}
.card__side--back ul {
  line-height: 1.5;
  background-image: url("../img/frame/back.png");
}
@media screen and (max-width: 1300px) {
  .card__side--back ul {
    font-size: 1.1vw;
  }
}
@media screen and (max-width: 970px) {
  .card__side--back ul {
    font-size: 2.25vw;
  }
}
@media screen and (max-width: 532px) {
  .card__side--back ul {
    font-size: 4vw;
  }
}
.card__side--back ul li {
  list-style-type: disc;
  margin-left: 12%;
  width: 75%;
  text-shadow: 1px 1px 2px #0072BC;
}
.card__side--back ul li:nth-of-type(1) {
  margin-top: 82%;
}
@media screen and (max-width: 1300px) {
  .card__side--back ul li:nth-of-type(1) {
    margin-top: 85%;
  }
}
@media screen and (max-width: 1200px) {
  .card__side--back ul li:nth-of-type(1) {
    margin-top: 82%;
  }
}
@media screen and (max-width: 970px) {
  .card__side--back ul li:nth-of-type(1) {
    margin-top: 85%;
  }
}
@media screen and (max-width: 750px) {
  .card__side--back ul li:nth-of-type(1) {
    margin-top: 80%;
  }
}
@media screen and (max-width: 532px) {
  .card__side--back ul li:nth-of-type(1) {
    margin-top: 83%;
  }
}
.card__side--back ul span {
  margin-left: 0.5em;
  font-size: 0.7em;
}
.card:hover .card__side--front:not(.suit), .card:active .card__side--front:not(.suit) {
  transform: rotateY(-180deg);
}
.card:hover .card__side--back, .card:active .card__side--back {
  transform: rotate(0);
}

ul#staff .card__side--back ul li:nth-of-type(1) {
  margin-top: 87%;
}
@media screen and (max-width: 1200px) {
  ul#staff .card__side--back ul li:nth-of-type(1) {
    margin-top: 84%;
  }
}
@media screen and (max-width: 970px) {
  ul#staff .card__side--back ul li:nth-of-type(1) {
    margin-top: 87%;
  }
}
@media screen and (max-width: 750px) {
  ul#staff .card__side--back ul li:nth-of-type(1) {
    margin-top: 84%;
  }
}/*# sourceMappingURL=card.css.map */