@charset "UTF-8";
body main {
  width: 100%;
  height: 6.02rem;
  margin: 2rem auto 1.1rem;
  position: relative;
}
@media (max-width: 750px) {
  body main {
    width: 7.5rem;
    height: 8.89rem;
    margin: 2rem auto 1rem;
  }
}
body main P {
  width: 100%;
  height: 4rem;
  position: absolute;
  top: 1.3rem;
}
@media (max-width: 750px) {
  body main P {
    top: 2.75rem;
  }
}
body main .pokemon_number {
  display: none;
}
body main.attack p {
  background: -webkit-gradient(linear, left top, right top, from(#ad2b14), color-stop(40%, #ad2b14), color-stop(55%, #bb3214), color-stop(85%, #e54713), color-stop(94%, #ed4b13), to(#ef4c13));
  background: linear-gradient(to right, #ad2b14 0%, #ad2b14 40%, #bb3214 55%, #e54713 85%, #ed4b13 94%, #ef4c13 100%);
}
body main.speed p {
  background: -webkit-gradient(linear, left top, right top, from(#004485), color-stop(40%, #004485), color-stop(55%, #0b5399), color-stop(86%, #2b7ed1), color-stop(97%, #3288de), to(#3288de));
  background: linear-gradient(to right, #004485 0%, #004485 40%, #0b5399 55%, #2b7ed1 86%, #3288de 97%, #3288de 100%);
}
body main.defense p {
  background: -webkit-gradient(linear, left top, right top, from(#176900), color-stop(40%, #176900), color-stop(55%, #1f7f0e), color-stop(85%, #34bf37), color-stop(97%, #3acf41), to(#3acf41));
  background: linear-gradient(to right, #176900 0%, #176900 40%, #1f7f0e 55%, #34bf37 85%, #3acf41 97%, #3acf41 100%);
}
body main.balance p {
  background: -webkit-gradient(linear, left top, right top, from(#57086b), color-stop(40%, #57086b), color-stop(55%, #661279), color-stop(86%, #9330a5), color-stop(97%, #9d36ae), to(#9d36ae));
  background: linear-gradient(to right, #57086b 0%, #57086b 40%, #661279 55%, #9330a5 86%, #9d36ae 97%, #9d36ae 100%);
}
body main.support p {
  background: -webkit-gradient(linear, left top, right top, from(#ca6600), color-stop(41%, #ca6600), color-stop(58%, #d8730a), color-stop(86%, #f68e20), color-stop(96%, #fd9525), to(#fd9525));
  background: linear-gradient(to right, #ca6600 0%, #ca6600 41%, #d8730a 58%, #f68e20 86%, #fd9525 96%, #fd9525 100%);
}
body main h2 {
  position: absolute;
  width: 14.4rem;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}
@media (max-width: 750px) {
  body main h2 {
    width: 7.5rem;
  }
}
body section {
  width: 100%;
  margin: 0 auto;
}
body section .pokemon_movie {
  width: 11.16rem;
  margin: 0 auto 1.12rem;
  border-left: 0.08rem solid #fb7823;
  border-top: 0.08rem solid #fb7823;
  border-right: 0.08rem solid #8346e5;
  border-bottom: 0.08rem solid #8346e5;
}
@media (max-width: 750px) {
  body section .pokemon_movie {
    width: 6rem;
  }
}
body section .pokemon_movie .video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: block;
}
body section .pokemon_movie .video::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1.64rem;
  height: 1.64rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='black' fill-opacity='0.7' /%3E%3Cpath d='M38 30 L38 70 L73 50 Z' fill='white' /%3E%3C/svg%3E");
  -webkit-transition: background-image 0.3s ease-in-out;
  transition: background-image 0.3s ease-in-out;
}
body section .pokemon_movie .video img {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
body section .pokemon_movie .video:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='50' cy='50' r='50' fill='%23ff0000' fill-opacity='0.9' /%3E %3Cpath d='M38 30 L38 70 L73 50 Z' fill='%23ffffff' /%3E %3C/svg%3E");
}
body section .pokemon_movie .video:hover img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
body section .pokemon_ul {
  margin-bottom: 2.5rem;
}
body section .pokemon_ul .slick-prev,
body section .pokemon_ul .slick-next {
  background: rgba(0, 0, 0, 0.6);
  top: 52%;
  width: 1.02rem;
  height: 1.02rem;
  padding: 0.3rem;
}
body section .pokemon_ul .slick-prev {
  left: 0.9rem;
  z-index: 1;
}
@media (max-width: 750px) {
  body section .pokemon_ul .slick-prev {
    left: 0.1rem;
  }
}
body section .pokemon_ul .slick-prev::before {
  content: "";
  background: url("../common/img/slick_arrow_w.svg");
  background-size: cover;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body section .pokemon_ul .slick-next {
  right: 0.9rem;
}
@media (max-width: 750px) {
  body section .pokemon_ul .slick-next {
    right: 0.1rem;
  }
}
body section .pokemon_ul .slick-next::before {
  content: "";
  background: url("../common/img/slick_arrow_w.svg");
  background-size: cover;
}
body section .pokemon_ul .slick-next:before {
  content: "";
  background: url("../common/img/slick_arrow_w.svg");
  background-size: cover;
}
body section .pokemon_ul .slick-prev:before,
body section .pokemon_ul .slick-next:before {
  width: 0.34rem;
  height: 0.3rem;
  display: block;
}

.card-border {
  width: 2.07rem;
  height: 2.07rem;
  margin: 0 0.08rem;
  background-color: #8246e2;
  position: relative;
  cursor: pointer;
  -webkit-clip-path: polygon(0.54rem 0, 100% 0, 100% calc(100% - 0.54rem), calc(100% - 0.54rem) 100%, 0 100%, 0 0.54rem);
          clip-path: polygon(0.54rem 0, 100% 0, 100% calc(100% - 0.54rem), calc(100% - 0.54rem) 100%, 0 100%, 0 0.54rem);
  /* カードの内側 */
  /* モンスター画像 */
  /* 名前の帯 */
  /* テキスト  */
}
.card-border:hover, .card-border.slick-current {
  background-color: #000;
}
.card-border:hover .card-inner, .card-border.slick-current .card-inner {
  -webkit-animation: pokemonbg 0.2s alternate ease-in-out;
          animation: pokemonbg 0.2s alternate ease-in-out;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.card-border:hover .card-inner::before, .card-border.slick-current .card-inner::before {
  background-color: rgba(39, 37, 38, 0.7);
}
.card-border:hover .card-inner::after, .card-border.slick-current .card-inner::after {
  background: #272526;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(39, 36, 35, 0.7)), color-stop(0.15rem, rgba(39, 36, 35, 0.7)), color-stop(0.15rem, rgb(39, 36, 35)), to(rgb(39, 35, 36)));
  background: linear-gradient(180deg, rgba(39, 36, 35, 0.7) 0%, rgba(39, 36, 35, 0.7) 0.15rem, rgb(39, 36, 35) 0.15rem, rgb(39, 35, 36) 100%);
}
.card-border:hover.speed .card-inner, .card-border.slick-current.speed .card-inner {
  background-image: url("../img/pokemon/speed_bg.png");
}
.card-border:hover.attack .card-inner, .card-border.slick-current.attack .card-inner {
  background-image: url("../img/pokemon/attack_bg.png");
}
.card-border:hover.balance .card-inner, .card-border.slick-current.balance .card-inner {
  background-image: url("../img/pokemon/balance_bg.png");
}
.card-border:hover.defense .card-inner, .card-border.slick-current.defense .card-inner {
  background-image: url("../img/pokemon/defense_bg.png");
}
.card-border:hover.support .card-inner, .card-border.slick-current.support .card-inner {
  background-image: url("../img/pokemon/support_bg.png");
}
.card-border .card-inner {
  position: absolute;
  top: 0.05rem;
  left: 0.05rem;
  right: 0.05rem;
  bottom: 0.05rem;
  background-color: #fff;
  overflow: hidden;
  -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%, 0 0.5rem);
          clip-path: polygon(0.5rem 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%, 0 0.5rem);
}
.card-border .card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.33rem;
  background-color: rgba(130, 70, 226, 0.7);
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
}
.card-border .card-inner::after {
  z-index: -1;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.86rem;
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  background: #fba065;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(251, 160, 101)), color-stop(0.15rem, rgb(251, 160, 101)), color-stop(0.15rem, rgb(249, 120, 36)), to(rgb(249, 120, 36)));
  background: linear-gradient(180deg, rgb(251, 160, 101) 0%, rgb(251, 160, 101) 0.15rem, rgb(249, 120, 36) 0.15rem, rgb(249, 120, 36) 100%);
}
.card-border .monster-img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); /* 中央配置微調整 */
  width: 100%;
  height: auto;
  z-index: 10;
}
.card-border .name-plate {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.86rem;
  z-index: 11;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card-border .name-text {
  position: absolute;
  bottom: 0.07rem;
  left: 0.1rem;
  padding-right: 2em;
  line-height: 1.4;
  color: #000;
  font-size: 0.16rem;
  font-weight: 900;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0 0 1px #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff, 0 0 0.02rem #fff;
}
.card-border .pokemon_link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

@-webkit-keyframes pokemonbg {
  from {
    background-size: 300%;
  }
  to {
    background-size: 100%;
  }
}

@keyframes pokemonbg {
  from {
    background-size: 300%;
  }
  to {
    background-size: 100%;
  }
}