/*
 * Mixin for placeholder
 * @include placeholderColor(#00ff00);
 */
.u-list-tab {
  padding: 0 15px;
}

@media screen and (min-width: 768px) {
  .u-list-tab {
    border-bottom: solid 1px #fff;
    padding: 0 30px;
  }
}

.u-list-tab .tab-inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -5px;
}

@media screen and (min-width: 768px) {
  .u-list-tab .tab-inner {
    margin: 0;
    width: 1000px;
    margin: auto;
  }
}

.u-list-tab .tab-inner .tab-item {
  width: calc(100% / 2);
  padding: 0 5px;
}

@media screen and (min-width: 768px) {
  .u-list-tab .tab-inner .tab-item {
    width: calc(100% / 4);
    padding: 0;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.u-list-tab .tab-inner .tab-item .item-inner {
  background-color: #570609;
  display: block;
  padding: 13px 15px;
  text-align: center;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 768px) {
  .u-list-tab .tab-inner .tab-item .item-inner {
    border-radius: 0px;
    font-size: 2.1rem;
    background-color: transparent;
    padding: 20px 10px;
    color: #525252;
  }
}

.u-list-tab .tab-inner .tab-item .item-inner span {
  transition: all 0.2s ease-out;
}

[data-whatinput="keyboard"] .u-list-tab .tab-inner .tab-item .item-inner:focus {
  color: #fff;
}

@media screen and (min-width: 961px) {
  .u-list-tab .tab-inner .tab-item .item-inner:hover {
    color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .u-list-tab .tab-inner .tab-item:nth-child(n + 3) {
    margin-top: 10px;
  }
}

.heroes .u-list-tab .tab-inner .tab-item .tab-heroes {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .heroes .u-list-tab .tab-inner .tab-item .tab-heroes {
    background-color: transparent;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    position: relative;
    color: #fff;
  }
  .heroes .u-list-tab .tab-inner .tab-item .tab-heroes:before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #000;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
  }
}

.kwamis .u-list-tab .tab-inner .tab-item .tab-kwamis {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .kwamis .u-list-tab .tab-inner .tab-item .tab-kwamis {
    background-color: transparent;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    position: relative;
    color: #fff;
  }
  .kwamis .u-list-tab .tab-inner .tab-item .tab-kwamis:before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #000;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
  }
}

.bigbaddies .u-list-tab .tab-inner .tab-item .tab-bigbaddies {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .bigbaddies .u-list-tab .tab-inner .tab-item .tab-bigbaddies {
    background-color: transparent;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    position: relative;
    color: #fff;
  }
  .bigbaddies .u-list-tab .tab-inner .tab-item .tab-bigbaddies:before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #000;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
  }
}

.classmates .u-list-tab .tab-inner .tab-item .tab-classmates {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .classmates .u-list-tab .tab-inner .tab-item .tab-classmates {
    background-color: transparent;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    position: relative;
    color: #fff;
  }
  .classmates .u-list-tab .tab-inner .tab-item .tab-classmates:before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #000;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
  }
}

.other .u-list-tab .tab-inner .tab-item .tab-other {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .other .u-list-tab .tab-inner .tab-item .tab-other {
    background-color: transparent;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    position: relative;
    color: #fff;
  }
  .other .u-list-tab .tab-inner .tab-item .tab-other:before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #000;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
  }
}

.u-box-tabcontent {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .u-box-tabcontent {
    margin-top: 40px;
  }
}

.u-box-pagination {
  padding: 0 15px;
  margin-top: 22px;
}

@media screen and (min-width: 768px) {
  .u-box-pagination {
    width: 1000px;
    margin: 30px auto 0;
    padding: 0 30px;
    box-sizing: content-box;
  }
}

.u-box-pagination .pagination-inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -2px;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px) {
  .u-box-pagination .pagination-inner {
    margin: 20px -10px 0;
  }
}

.u-box-pagination .pagination-inner .pagination-item {
  width: calc(100% / 3);
  padding: 0 2px;
}

@media screen and (min-width: 768px) {
  .u-box-pagination .pagination-inner .pagination-item {
    width: calc(100% / 8);
    padding: 0 7px;
    margin: 0 3px;
  }
}

.u-box-pagination .pagination-inner .pagination-item.item-marinette, .u-box-pagination .pagination-inner .pagination-item.item-wayzz {
  margin-left: 16.5%;
}

@media screen and (min-width: 768px) {
  .u-box-pagination .pagination-inner .pagination-item.item-marinette, .u-box-pagination .pagination-inner .pagination-item.item-wayzz {
    margin: 0 3px;
  }
}

.u-box-pagination .pagination-inner .pagination-item.item-adrien, .u-box-pagination .pagination-inner .pagination-item.item-nooroo {
  margin-right: 16.5%;
}

@media screen and (min-width: 768px) {
  .u-box-pagination .pagination-inner .pagination-item.item-adrien, .u-box-pagination .pagination-inner .pagination-item.item-nooroo {
    margin: 0 3px;
  }
}

.u-box-pagination .pagination-inner .pagination-item .item-inner {
  position: relative;
  display: block;
  text-decoration: none;
}

.u-box-pagination .pagination-inner .pagination-item .item-inner .item-btn {
  position: relative;
}

.u-box-pagination .pagination-inner .pagination-item .item-inner .item-btn img {
  transition: all 0.2s ease-out;
}

.u-box-pagination .pagination-inner .pagination-item .item-inner .item-btn .item-on {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.u-box-pagination .pagination-inner .pagination-item .item-inner .item-ttl {
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .u-box-pagination .pagination-inner .pagination-item .item-inner .item-ttl {
    font-size: 1.4rem;
  }
}

[data-whatinput="keyboard"] .u-box-pagination .pagination-inner .pagination-item .item-inner:focus .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media screen and (min-width: 961px) {
  .u-box-pagination .pagination-inner .pagination-item .item-inner:hover .item-btn .item-on {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

.ladybug .u-box-pagination .pagination-inner .item-ladybug .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.catnoir .u-box-pagination .pagination-inner .item-catnoir .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.renarouge .u-box-pagination .pagination-inner .renarouge .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.queenbee .u-box-pagination .pagination-inner .queenbee .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.carapace .u-box-pagination .pagination-inner .carapace .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.adrien .u-box-pagination .pagination-inner .item-adrien .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.bunnyx .u-box-pagination .pagination-inner .item-bunnyx .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.ryuko .u-box-pagination .pagination-inner .item-ryuko .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.viperion .u-box-pagination .pagination-inner .item-viperion .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.pegasus .u-box-pagination .pagination-inner .item-pegasus .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.kingmonkey .u-box-pagination .pagination-inner .item-kingmonkey .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.tikki .u-box-pagination .pagination-inner .item-tikki .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.plagg .u-box-pagination .pagination-inner .item-plagg .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.trixx .u-box-pagination .pagination-inner .item-trixx .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.pollen .u-box-pagination .pagination-inner .item-pollen .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.wayzz .u-box-pagination .pagination-inner .item-wayzz .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.fluff .u-box-pagination .pagination-inner .item-fluff .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.longg .u-box-pagination .pagination-inner .item-longg .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.sass .u-box-pagination .pagination-inner .item-sass .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.xuppu .u-box-pagination .pagination-inner .item-xuppu .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.kaalki .u-box-pagination .pagination-inner .item-kaalki .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.nooroo .u-box-pagination .pagination-inner .item-nooroo .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.duusu .u-box-pagination .pagination-inner .item-duusu .item-inner .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.u-box-character {
  margin-top: 25px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-box-character {
    margin-top: 5px;
  }
}

.u-box-character .character-inner {
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner:before {
    position: absolute;
    content: "";
    bottom: 180px;
    right: 0;
    left: 0;
    height: 310px;
    margin: auto;
  }
}

.ladybug .u-box-character .character-inner:before,
.marinette .u-box-character .character-inner:before,
.tikki .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(162, 0, 11, 0.6) 100%);
}

.catnoir .u-box-character .character-inner:before,
.adrien .u-box-character .character-inner:before,
.plagg .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(73, 124, 0, 0.6) 100%);
}

.renarouge .u-box-character .character-inner:before,
.trixx .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(254, 127, 41, 0.6) 100%);
}

.queenbee .u-box-character .character-inner:before,
.pollen .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(255, 242, 26, 0.6) 100%);
}

.carapace .u-box-character .character-inner:before,
.wayzz .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(41, 177, 78, 0.6) 100%);
}

.bunnyx .u-box-character .character-inner:before,
.fluff .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(109, 206, 245, 0.6) 100%);
}

.ryuko .u-box-character .character-inner:before,
.longg .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(237, 48, 41, 0.6) 100%);
}

.viperion .u-box-character .character-inner:before,
.sass .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(91, 195, 190, 0.6) 100%);
}

.pegasus .u-box-character .character-inner:before,
.kaalki .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(183, 136, 135, 0.6) 100%);
}

.kingmonkey .u-box-character .character-inner:before,
.xuppu .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(240, 164, 86, 0.6) 100%);
}

.nooroo .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(160, 123, 206, 0.6) 100%);
}

.duusu .u-box-character .character-inner:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(46, 97, 222, 0.6) 100%);
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap {
    width: 1000px;
    margin: 0 auto;
    padding: 0 130px;
    box-sizing: content-box;
    position: relative;
  }
}

.u-box-character .character-inner .character-wrap .character-img, .u-box-character .character-inner .character-wrap .character-img2 {
  position: relative;
}

@media screen and (max-width: 767px) {
  .u-box-character .character-inner .character-wrap .character-img:before, .u-box-character .character-inner .character-wrap .character-img2:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13.33vw;
    margin: auto;
    height: 29.33vw;
  }
}

.ladybug .u-box-character .character-inner .character-wrap .character-img:before,
.marinette .u-box-character .character-inner .character-wrap .character-img:before,
.tikki .u-box-character .character-inner .character-wrap .character-img:before, .ladybug .u-box-character .character-inner .character-wrap .character-img2:before,
.marinette .u-box-character .character-inner .character-wrap .character-img2:before,
.tikki .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(162, 0, 11, 0.6) 100%);
}

.catnoir .u-box-character .character-inner .character-wrap .character-img:before,
.adrien .u-box-character .character-inner .character-wrap .character-img:before,
.plagg .u-box-character .character-inner .character-wrap .character-img:before, .catnoir .u-box-character .character-inner .character-wrap .character-img2:before,
.adrien .u-box-character .character-inner .character-wrap .character-img2:before,
.plagg .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(73, 124, 0, 0.6) 100%);
}

.renarouge .u-box-character .character-inner .character-wrap .character-img:before, .renarouge .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(254, 127, 41, 0.6) 100%);
}

.queenbee .u-box-character .character-inner .character-wrap .character-img:before, .queenbee .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(255, 242, 26, 0.6) 100%);
}

.bunnyx .u-box-character .character-inner .character-wrap .character-img:before,
.fluff .u-box-character .character-inner .character-wrap .character-img:before, .bunnyx .u-box-character .character-inner .character-wrap .character-img2:before,
.fluff .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(109, 206, 245, 0.6) 100%);
}

.ryuko .u-box-character .character-inner .character-wrap .character-img:before,
.longg .u-box-character .character-inner .character-wrap .character-img:before, .ryuko .u-box-character .character-inner .character-wrap .character-img2:before,
.longg .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(237, 48, 41, 0.6) 100%);
}

.viperion .u-box-character .character-inner .character-wrap .character-img:before,
.sass .u-box-character .character-inner .character-wrap .character-img:before, .viperion .u-box-character .character-inner .character-wrap .character-img2:before,
.sass .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(91, 195, 190, 0.6) 100%);
}

.pegasus .u-box-character .character-inner .character-wrap .character-img:before,
.kaalki .u-box-character .character-inner .character-wrap .character-img:before, .pegasus .u-box-character .character-inner .character-wrap .character-img2:before,
.kaalki .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(183, 136, 135, 0.6) 100%);
}

.kingmonkey .u-box-character .character-inner .character-wrap .character-img:before,
.xuppu .u-box-character .character-inner .character-wrap .character-img:before, .kingmonkey .u-box-character .character-inner .character-wrap .character-img2:before,
.xuppu .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(240, 164, 86, 0.6) 100%);
}

.nooroo .u-box-character .character-inner .character-wrap .character-img:before, .nooroo .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(160, 123, 206, 0.6) 100%);
}

.duusu .u-box-character .character-inner .character-wrap .character-img:before, .duusu .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(46, 97, 222, 0.6) 100%);
}

.trixx .u-box-character .character-inner .character-wrap .character-img:before, .trixx .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(254, 127, 41, 0.6) 100%);
}

.pollen .u-box-character .character-inner .character-wrap .character-img:before, .pollen .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(255, 242, 26, 0.6) 100%);
}

.wayzz .u-box-character .character-inner .character-wrap .character-img:before, .wayzz .u-box-character .character-inner .character-wrap .character-img2:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(41, 177, 78, 0.6) 100%);
}

.u-box-character .character-inner .character-wrap .character-img .img-wrap {
  margin: 0 15px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img .img-wrap {
    margin: 0;
  }
}

.u-box-character .character-inner .character-wrap .character-img .img-wrap .img-character {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation: chara cubic-bezier(0.07, 0.83, 0.26, 1) 0.5s;
          animation: chara cubic-bezier(0.07, 0.83, 0.26, 1) 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 1;
}

.u-box-character .character-inner .character-wrap .character-img .img-wrap .img-bg {
  -webkit-animation: bg ease-out 2.5s 1.5s;
          animation: bg ease-out 2.5s 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img + .u-box-name {
    position: absolute;
    right: 130px;
    bottom: 70px;
  }
}

.u-box-character .character-inner .character-wrap .character-img + .u-box-name .u-txt-ttl2 {
  margin-top: -23px;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img + .u-box-name .u-txt-ttl2 {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img2 {
    -webkit-padding-before: 50px;
            padding-block-start: 50px;
  }
}

.u-box-character .character-inner .character-wrap .character-img2 .img2-wrap {
  position: relative;
  margin-inline: 15px;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img2 .img2-wrap {
    width: -webkit-fit-content;
    width: fit-content;
    margin-inline: auto 0;
  }
}

.u-box-character .character-inner .character-wrap .character-img2 .img2-wrap img {
  -webkit-animation: chara cubic-bezier(0.07, 0.83, 0.26, 1) 0.5s;
          animation: chara cubic-bezier(0.07, 0.83, 0.26, 1) 0.5s;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img2 + .u-box-name {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: -webkit-fit-content;
    width: fit-content;
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
}

.u-box-character .character-inner .character-wrap .character-img2 + .u-box-name .u-txt-ttl2 {
  -webkit-margin-before: 18px;
          margin-block-start: 18px;
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img2 + .u-box-name .u-txt-ttl2 {
    width: -webkit-fit-content;
    width: fit-content;
    margin-inline: auto;
    -webkit-margin-before: -15px;
            margin-block-start: -15px;
  }
}

@media screen and (min-width: 768px) {
  .u-box-character .character-inner .character-wrap .character-img2 + .u-box-name .u-txt-sub {
    width: -webkit-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}

.u-txt-ttl {
  text-align: center;
  margin-top: -23px;
  z-index: 1;
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-txt-ttl {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .ladybug .u-txt-ttl img {
    width: 41.28vw;
  }
}

@media screen and (max-width: 767px) {
  .catnoir .u-txt-ttl img {
    width: 40.64vw;
  }
}

@media screen and (max-width: 767px) {
  .renarouge .u-txt-ttl img {
    width: 41.28vw;
  }
}

@media screen and (max-width: 767px) {
  .queenbee .u-txt-ttl img {
    width: 40.64vw;
  }
}

@media screen and (max-width: 767px) {
  .carapace .u-txt-ttl img {
    width: 40.64vw;
  }
}

@media screen and (max-width: 767px) {
  .marinette .u-txt-ttl img {
    width: 46.08vw;
  }
}

@media screen and (max-width: 767px) {
  .adrien .u-txt-ttl img {
    width: 32.75vw;
  }
}

@media screen and (max-width: 767px) {
  .bunnyx .u-txt-ttl img {
    width: 46.53vw;
  }
}

@media screen and (max-width: 767px) {
  .ryuko .u-txt-ttl img {
    width: 38vw;
  }
}

@media screen and (max-width: 767px) {
  .viperion .u-txt-ttl img {
    width: 48.4vw;
  }
}

@media screen and (max-width: 767px) {
  .pegasus .u-txt-ttl img {
    width: 47.33vw;
  }
}

@media screen and (max-width: 767px) {
  .kingmonkey .u-txt-ttl img {
    width: 70.73vw;
  }
}

@media screen and (max-width: 767px) {
  .tikki .u-txt-ttl img {
    width: 25.82vw;
  }
}

@media screen and (max-width: 767px) {
  .plagg .u-txt-ttl img {
    width: 29.23vw;
  }
}

@media screen and (max-width: 767px) {
  .trixx .u-txt-ttl img {
    width: 29.23vw;
  }
}

@media screen and (max-width: 767px) {
  .pollen .u-txt-ttl img {
    width: 29.23vw;
  }
}

@media screen and (max-width: 767px) {
  .wayzz .u-txt-ttl img {
    width: 29.23vw;
  }
}

@media screen and (max-width: 767px) {
  .fluff .u-txt-ttl img {
    width: 29.33vw;
  }
}

@media screen and (max-width: 767px) {
  .longg .u-txt-ttl img {
    width: 35.33vw;
  }
}

@media screen and (max-width: 767px) {
  .sass .u-txt-ttl img {
    width: 27.33vw;
  }
}

@media screen and (max-width: 767px) {
  .xuppu .u-txt-ttl img {
    width: 38.13vw;
  }
}

@media screen and (max-width: 767px) {
  .kaalki .u-txt-ttl img {
    width: 49.93vw;
  }
}

@media screen and (max-width: 767px) {
  .nooroo .u-txt-ttl img {
    width: 42.8vw;
  }
}

@media screen and (max-width: 767px) {
  .duusu .u-txt-ttl img {
    width: 37.87vw;
  }
}

.u-txt-sub {
  margin-top: 5px;
  font-size: 23px;
  font-size: 2.3rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000,
 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000,
 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000,
 0 0 3px #000, 0 0 3px #000;
}

@media screen and (min-width: 768px) {
  .u-txt-sub {
    text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000,
 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000,
 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000,
 0 0 5px #000, 0 0 5px #000;
  }
}

.u-txt-sub span {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.75;
  display: block;
}

@media screen and (min-width: 768px) {
  .u-txt-sub span {
    font-size: 1.6rem;
  }
}

.u-txt-p {
  line-height: 2;
  margin-top: 10px;
  text-align: center;
}

.u-box-name {
  padding: 0 15px;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .u-box-name {
    padding: 0;
  }
}

.u-box-desc {
  margin-top: 15px;
}

@media screen and (min-width: 768px) {
  .u-box-desc {
    margin-top: 35px;
  }
}

.u-list-character .character-inner {
  margin: 0 -5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .u-list-character .character-inner {
    margin: 0 -20px;
  }
}

.u-list-character .character-inner .character-item {
  padding: 0 5px;
  width: calc(100% / 2);
  width: calc((100% / 2) - 0.1px) \0;
}

@media screen and (min-width: 768px) {
  .u-list-character .character-inner .character-item {
    padding: 0 20px;
    width: calc(100% / 3);
    width: calc((100% / 3) - 0.1px) \0;
  }
}

@media screen and (max-width: 767px) {
  .u-list-character .character-inner .character-item:nth-child(n + 3) {
    margin-top: 15px;
  }
}

@media screen and (min-width: 768px) {
  .u-list-character .character-inner .character-item:nth-child(n + 4) {
    margin-top: 50px;
  }
}

.u-box-character2 .character2-img {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

.u-box-character2 .character2-name {
  text-align: center;
  font-size: 23px;
  font-size: 2.3rem;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 5px;
}

@media screen and (min-width: 768px) {
  .u-box-character2 .character2-name {
    margin-top: 25px;
  }
}

.u-box-character2 .character2-name span {
  font-size: 14px;
  font-size: 1.4rem;
  display: block;
  line-height: 1.75;
}

@media screen and (min-width: 768px) {
  .u-box-character2 .character2-name span {
    font-size: 1.6rem;
  }
}

.u-box-character2 .character2-text {
  margin-top: 5px;
  font-size: 12px;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .u-box-character2 .character2-text {
    font-size: 1.4rem;
  }
}

.u-box-character3 .character3-img {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.u-box-character3 .character3-name {
  text-align: center;
  font-size: 23px;
  font-size: 2.3rem;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 5px;
}

@media screen and (min-width: 768px) {
  .u-box-character3 .character3-name {
    margin-top: 25px;
  }
}

.u-box-character3 .character3-name span {
  font-size: 14px;
  font-size: 1.4rem;
  display: block;
  line-height: 1.75;
}

@media screen and (min-width: 768px) {
  .u-box-character3 .character3-name span {
    font-size: 1.6rem;
  }
}

.u-box-character3 .character3-text {
  margin-top: 5px;
  font-size: 12px;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .u-box-character3 .character3-text {
    font-size: 1.4rem;
  }
}

.w130p {
  width: 100% !important;
}

@media screen and (min-width: 768px) {
  .w130p {
    width: 150% !important;
  }
}

.villain {
  width: 50% !important;
  padding: 0px !important;
}

@media screen and (min-width: 768px) {
  .villain {
    width: 33% !important;
    padding: 0px !important;
  }
}

.u-box-season {
  padding: 0 15px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-box-season {
    padding: 0 30px;
  }
}

.u-box-season .season-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -5px;
}

@media screen and (min-width: 768px) {
  .u-box-season .season-list {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0;
    width: 1000px;
    margin: auto;
  }
}

.u-box-season .season-list .list-item {
  width: 100%;
  padding: 0 5px;
}

@media screen and (min-width: 768px) {
  .u-box-season .season-list .list-item {
    width: 220px;
    padding: 0;
  }
}

.u-box-season .season-list .list-item .item-inner {
  background-color: #570609;
  display: block;
  padding: 13px 15px;
  text-align: center;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 768px) {
  .u-box-season .season-list .list-item .item-inner {
    border-radius: 30px;
    font-size: 2rem;
    padding: 12px 30px;
    color: #525252;
  }
}

.u-box-season .season-list .list-item .item-inner span {
  transition: all 0.2s ease-out;
}

[data-whatinput="keyboard"] .u-box-season .season-list .list-item .item-inner:focus {
  color: #fff;
}

@media screen and (min-width: 961px) {
  .u-box-season .season-list .list-item .item-inner:hover {
    color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .u-box-season .season-list .list-item:nth-child(n + 3) {
    margin-top: 10px;
  }
}

.season-1 .u-box-season .season-list .list-item .tab-season1 {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .season-1 .u-box-season .season-list .list-item .tab-season1 {
    color: #fff;
  }
}

.season-2 .u-box-season .season-list .list-item .tab-season2 {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .season-2 .u-box-season .season-list .list-item .tab-season2 {
    color: #fff;
  }
}

.season-3 .u-box-season .season-list .list-item .tab-season3 {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .season-3 .u-box-season .season-list .list-item .tab-season3 {
    color: #fff;
  }
}

.season-all .u-box-season .season-list .list-item .tab-season-all {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .season-all .u-box-season .season-list .list-item .tab-season-all {
    color: #fff;
  }
}

.kwamis .u-box-season .season-list .list-item .tab-kwamis {
  background-color: #e5240f;
}

@media screen and (min-width: 768px) {
  .kwamis .u-box-season .season-list .list-item .tab-kwamis {
    background-color: transparent;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    position: relative;
    color: #fff;
  }
  .kwamis .u-box-season .season-list .list-item .tab-kwamis:before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #000;
    left: 0;
    right: 0;
    bottom: -1px;
    margin: auto;
  }
}

.u-box-season .season-select {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 13px 15px;
  text-align: center;
  border: none;
  border-radius: 25px;
  background-color: #da0f16;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.67;
  outline: none;
  position: relative;
}

@media screen and (max-width: 767px) {
  .u-box-season:after {
    position: absolute;
    content: "";
    background: url(../../images/character/i_cross.png) center no-repeat;
    width: 10px;
    height: 10px;
    background-size: 100% auto;
    top: 0;
    bottom: 0;
    right: 45px;
    margin: auto 0;
  }
}

.u-box-btn {
  margin-block: 36px 40px;
}

@media screen and (min-width: 768px) {
  .u-box-btn {
    margin-block: 0px;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
  }
}

.u-box-btn .style-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

@media screen and (min-width: 768px) {
  .u-box-btn .style-item {
    width: -webkit-fit-content;
    width: fit-content;
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.u-box-btn .style-item .item-inner {
  position: relative;
  display: block;
  text-decoration: none;
}

.u-box-btn .style-item .item-inner .item-btn {
  position: relative;
}

@media screen and (min-width: 768px) {
  .u-box-btn .style-item .item-inner .item-btn {
    width: 100px;
  }
}

.u-box-btn .style-item .item-inner .item-btn img {
  transition: all 0.2s ease-out;
}

.u-box-btn .style-item .item-inner .item-btn .item-on {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

[data-whatinput="keyboard"] .u-box-btn .style-item .item-inner:focus .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media screen and (min-width: 961px) {
  .u-box-btn .style-item .item-inner:hover .item-btn .item-on {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

.u-box-kwamis {
  margin-top: 32px;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: fit-content;
}

@media screen and (min-width: 768px) {
  .u-box-kwamis {
    margin-inline: 0;
    margin-top: 24px;
  }
}

.u-box-kwamis .item-inner .item-btn {
  position: relative;
  width: 200px;
}

.u-box-kwamis .item-inner .item-btn img {
  transition: all 0.2s ease-out;
}

.u-box-kwamis .item-inner .item-btn .item-on {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

[data-whatinput="keyboard"] .u-box-kwamis .item-inner:focus .item-btn .item-on {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media screen and (min-width: 961px) {
  .u-box-kwamis .item-inner:hover .item-btn .item-on {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

.u-box-debut {
  margin-top: 30px;
  width: -webkit-fit-content;
  width: fit-content;
  border: 1px solid #fff;
  margin-inline: auto;
  border-radius: 30px;
  padding-block: 4px;
  padding-inline: 20px;
}

@media screen and (min-width: 768px) {
  .u-box-debut {
    margin-top: 50px;
    padding-inline: 34px;
  }
}

.u-box-debut .debut-title {
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
}

.u-link {
  margin-top: 50px;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .u-link {
    margin-top: 120px;
    max-width: 256px;
  }
}

.u-txt-ttl2 {
  text-align: center;
  z-index: 1;
  position: relative;
}

@-webkit-keyframes chara {
  0% {
    -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5);
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  }
  60% {
    -webkit-transform: scale(1.05, 1.05);
            transform: scale(1.05, 1.05);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes chara {
  0% {
    -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5);
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  }
  60% {
    -webkit-transform: scale(1.05, 1.05);
            transform: scale(1.05, 1.05);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@-webkit-keyframes bg {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  40% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes bg {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
  40% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}