.character_list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
  .character_list a {
    width: 19.824vw;
    height: 19.824vw;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    margin: 5.273vw;
    position: relative;
    display: inline-flex; }
    .character_list a i {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 19.824vw;
      height: 19.824vw;
      transform: rotate(90deg);
      overflow: hidden;
      display: block; }
      .character_list a i img {
        transform: rotate(-45deg) translateY(-22%);
        width: 28.613vw;
        height: 28.613vw;
        max-width: inherit !important; }
    .character_list a i::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border: 0.391vw solid #000;
      z-index: 1010;
      transform: scale(1.1);
      transition: 0.3s; }
    .character_list a i::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border: 0.977vw solid #e6b700;
      z-index: 1000;
      transform: scale(1.1);
      transition: 0.3s; }
  .character_list a.active {
    pointer-events: none; }
    .character_list a.active i::before {
      transform: scale(1); }
    .character_list a.active i::after {
      transform: scale(1); }
  .character_list div ~ div {
    margin-top: -14.551vw; }
  .character_list div {
    display: flex;
    width: 91.016vw;
    justify-content: center; }
  .character_list div:last-child {
    justify-content: space-between;
    width: 91.016vw;
    display: flex; }

.pc-item {
  display: none; }

.chara_wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 9.766vw;
  background: url("../image/character/bg.png") no-repeat center top/100% auto; }
  .chara_wrap::before {
    content: '';
    background: url("../image/character/name.png") no-repeat center top/100% 100%;
    width: 94.238vw;
    height: 17.09vw;
    position: absolute;
    left: 0;
    top: 105.078vw;
    z-index: 0;
    left: 2.93vw;
    opacity: 1; }
  .chara_wrap .swiper-slide {
    padding: 85.938vw 0 0;
    text-align: center;
    opacity: 0 !important; }
    .chara_wrap .swiper-slide .img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }
      .chara_wrap .swiper-slide .img img {
        width: 100%;
        height: auto; }
    .chara_wrap .swiper-slide .inner {
      position: relative;
      z-index: 100; }
    .chara_wrap .swiper-slide header {
      background: url("../image/character/name.png") no-repeat center top/100% 100%;
      width: 94.238vw;
      height: 17.09vw;
      margin: 0 auto 15.82vw;
      position: relative;
      z-index: 30; }
      .chara_wrap .swiper-slide header::before {
        content: '';
        width: 50%;
        top: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
        height: 100%;
        background: url("../image/character/rank_ssr.png") no-repeat right center;
        background-size: auto 12.109vw;
        margin-left: -2.93vw; }
      .chara_wrap .swiper-slide header[data-rank='sr']::before {
        background: url("../image/character/rank_sr.png") no-repeat right center/auto 12.109vw; }
      .chara_wrap .swiper-slide header h2 {
        width: auto;
        position: absolute;
        left: 50%;
        top: 0;
        font-size: 6.738vw;
        color: #fff;
        display: flex;
        flex-direction: column;
        letter-spacing: 0.14em;
        align-items: center;
        justify-content: center;
        height: 100%; }
        .chara_wrap .swiper-slide header h2 small {
          font-size: 2.051vw;
          letter-spacing: 0;
          padding: 1.465vw 0 0; }
      .chara_wrap .swiper-slide header ul {
        display: flex;
        width: 100%;
        position: absolute;
        left: 0;
        top: 20.41vw;
        justify-content: center; }
        .chara_wrap .swiper-slide header ul li.cv {
          background: url("../image/character/bg_cv.png") no-repeat left top/100% 100%;
          width: 32.91vw;
          height: 7.813vw;
          position: relative;
          left: -3.907vw;
          font-size: 3.223vw;
          color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 0.488vw;
          letter-spacing: 0.08em; }
          .chara_wrap .swiper-slide header ul li.cv span {
            display: inline-block;
            padding-right: 0.35em; }
        .chara_wrap .swiper-slide header ul li.voice {
          height: 7.813vw;
          background: url("../image/character/bg_voice.png") no-repeat left top/100% 100%;
          width: 34.277vw; }
          .chara_wrap .swiper-slide header ul li.voice a {
            color: #811111;
            font-size: 3.223vw;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 0 0 6.836vw;
            height: 100%;
            position: relative;
            top: -0.293vw; }
    .chara_wrap .swiper-slide .text {
      display: flex;
      justify-content: space-between;
      padding: 0 0 0 2.734vw; }
    .chara_wrap .swiper-slide .graph {
      width: 46.973vw;
      height: 50.098vw;
      background: url("../image/character/graph.png") no-repeat left top/cover; }
      .chara_wrap .swiper-slide .graph img {
        width: 100%;
        height: auto;
        position: relative; }
    .chara_wrap .swiper-slide .textwrap {
      width: 50%;
      text-align: left;
      padding: 4.883vw 0 0 1.758vw;
      margin-left: 0.781vw;
      font-family: "Noto Sans JP", sans-serif; }
      .chara_wrap .swiper-slide .textwrap dl {
        width: 44.922vw;
        border: 2px solid #821313;
        background: #fff;
        display: table;
        font-size: 2.637vw;
        line-height: 2.222; }
        .chara_wrap .swiper-slide .textwrap dl dt {
          background: #c3c3c3;
          width: 16.602vw;
          color: #821313;
          text-align: center;
          display: table-cell; }
        .chara_wrap .swiper-slide .textwrap dl dd {
          padding: 0 1.953vw;
          display: table-cell; }
          .chara_wrap .swiper-slide .textwrap dl dd img {
            height: 3.027vw;
            width: auto;
            margin-left: 0.977vw;
            position: relative;
            top: 0.391vw; }
      .chara_wrap .swiper-slide .textwrap div.table div {
        margin-top: 1.953vw;
        background: #fff;
        border: 2px solid #821313;
        width: 44.922vw; }
        .chara_wrap .swiper-slide .textwrap div.table div dl {
          border: none;
          width: 100%;
          border-bottom: 1px solid #821313; }
      .chara_wrap .swiper-slide .textwrap p {
        width: 38.477vw;
        font-size: 2.637vw;
        line-height: 1.481;
        padding: 2.637vw 3.125vw;
        border-top: none; }
  .chara_wrap .swiper-button-next,
  .chara_wrap .swiper-button-prev {
    position: absolute;
    background: url("../image/character/prev.png") no-repeat left top/cover;
    width: 10.352vw;
    height: 8.984vw;
    left: 0;
    top: 0;
    z-index: 1000;
    margin: 0;
    top: 109.082vw;
    left: 4.883vw;
    outline: none !important; }
  .chara_wrap .swiper-button-next {
    left: inherit;
    right: 4.883vw;
    background: url("../image/character/next.png") no-repeat left top/cover;
    width: 10.938vw; }
  .chara_wrap .swiper-slide.swiper-slide-active {
    opacity: 1 !important; }
  .chara_wrap .swiper-pagination {
    opacity: 0; }

@media screen and (min-width: 1024px) {
  .sp-item {
    display: none; }

  .pc-item {
    display: flex; max-width: 2020px; margin: 0 auto; }

  .character_list a {
    width: 104px;
    height: 104px;
    margin: 29px; }
    .character_list a i {
      width: 104px;
      height: 104px; }
      .character_list a i img {
        width: 147px;
        height: 147px; }
    .character_list a i::before {
      border: 2px solid #000; }
    .character_list a i::after {
      border: 5px solid #e6b700; }
  .character_list div ~ div {
    margin-top: -81px; }
  .character_list div {
    display: flex;
    width: 1024px; }
  .character_list div:last-child {
    justify-content: center;
    width: 1024px; }
  .character_list a i img {
    transition: transform 0.3s;
    backface-visibility: hidden; }
  .character_list a:hover i img {
    transition: transform 0.6s;
    transform: rotate(-45deg) scale(1.2) translateY(-22%); }

  .chara_wrap {
    width: 1126.4px;
    margin: 0 auto 0;
    background: none;
    text-align: center;
    padding-bottom: 75.68px; }
    .chara_wrap::before {
      content: '';
      background: url("../image/character/name@pc.png") no-repeat center top/100% 100%;
      width: 922.24px;
      height: 73.92px;
      position: absolute;
      left: 50%;
      top: 270px;
      transform: translateX(-50%); }
    .chara_wrap::after {
      content: '';
      background: url("../image/character/bg@pc.png") no-repeat left top/100% 100%;
      width: 762.96px;
      height: 580.8px;
      position: absolute;
      right: 50%;
      top: 402px;
      z-index: 0;
      margin-right: -149.6px;
      left: auto; }
    .chara_wrap .swiper-slide {
      padding: 64px 0 0;
      position: relative;
      min-height: 642.4px; }
      .chara_wrap .swiper-slide .img {
        position: absolute;
        right: 50%;
        left: inherit;
        margin-right: -44px;
        top: 195px;
        z-index: -1;
        width: 495.44px; }
        .chara_wrap .swiper-slide .img img {
          width: 495.44px;
          height: auto;
          position: relative;
          z-index: 10; }
      .chara_wrap .swiper-slide .inner {
        position: relative;
        z-index: 100; }
      .chara_wrap .swiper-slide header {
        background: url("../image/character/name@pc.png") no-repeat center top/100% 100%;
        width: 922.24px;
        height: 73.92px;
        margin: 0 auto 0;
        position: relative;
        z-index: 30; }
        .chara_wrap .swiper-slide header::before {
          content: '';
          width: 149.6px;
          top: 0;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 100;
          height: 100%;
          background: url("../image/character/rank_ssr.png") no-repeat right center;
          background-size: auto 56.32px;
          margin-left: 0; }
        .chara_wrap .swiper-slide header[data-rank='sr']::before {
          background: url("../image/character/rank_sr.png") no-repeat right center/auto 56.32px; }
        .chara_wrap .swiper-slide header h2 {
          width: auto;
          position: static;
          left: inherit;
          top: 0;
          font-size: 30.8px;
          color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          position: relative;
          left: 158.4px;
          top: -2.64px; }
          .chara_wrap .swiper-slide header h2 small {
            font-size: 12.32px;
            padding: inherit;
            text-align: left;
            display: inline-block;
            padding-left: 1em; }
        .chara_wrap .swiper-slide header ul {
          width: inherit;
          left: inherit;
          right: 37.84px;
          top: 17.6px;
          justify-content: flex-end; }
          .chara_wrap .swiper-slide header ul li {
            margin: 0 0 0 17.6px; }
          .chara_wrap .swiper-slide header ul li.cv {
            background: url("../image/character/bg_cv@pc.jpg") no-repeat left top/100% 100%;
            width: 148.72px;
            height: 36.08px;
            left: 0;
            font-size: 14.08px;
            padding-bottom: 0; }
          .chara_wrap .swiper-slide header ul li.voice {
            height: 36.08px;
            background: url("../image/character/bg_voice@pc.jpg") no-repeat left top/100% 100%;
            width: 154.88px; }
            .chara_wrap .swiper-slide header ul li.voice a {
              font-size: 14.08px;
              padding: 0 0 0 31.68px;
              top: 0; }
      .chara_wrap .swiper-slide .text {
        display: block;
        justify-content: center;
        width: 408.32px;
        margin-left: 638.88px; }
      .chara_wrap .swiper-slide .graph {
        width: 334.4px;
        height: 351.12px;
        margin: 55.44px 0 0 24.64px;
        background-size: cover;
        background-image: url("../image/character/graph@pc.png"); }
        .chara_wrap .swiper-slide .graph img {
          width: 100%;
          height: auto;
          position: relative; }
      .chara_wrap .swiper-slide .textwrap {
        width: auto;
        padding: 26.4px 0 0;
        margin-left: 0; }
        .chara_wrap .swiper-slide .textwrap dl {
          width: 378.4px;
          border: 2px solid #821313;
          font-size: 12.32px;
          line-height: 2.143; }
          .chara_wrap .swiper-slide .textwrap dl dt {
            width: 77.44px; }
          .chara_wrap .swiper-slide .textwrap dl dd {
            padding: 0 8.8px; }
            .chara_wrap .swiper-slide .textwrap dl dd img {
              height: 14.08px;
              width: auto;
              margin-left: 5.28px;
              top: 1.76px; }
        .chara_wrap .swiper-slide .textwrap div.table div {
          margin-top: 7.04px;
          border: 2px solid #821313;
          width: 378.4px; }
          .chara_wrap .swiper-slide .textwrap div.table div dl {
            border: none;
            border-bottom: 1px solid #821313;
            width: 50%;
            float: left; }
        .chara_wrap .swiper-slide .textwrap p {
          width: auto;
          font-size: 12.32px;
          line-height: 1.429;
          padding: 8.8px 22px;
          clear: both; }
    .chara_wrap .swiper-button-next,
    .chara_wrap .swiper-button-prev {
      position: absolute;
      background: url("../image/character/prev@pc.png") no-repeat left top/cover;
      width: 43.12px;
      height: 90.64px;
      z-index: 1000;
      margin: 0;
      top: 580.8px;
      left: inherit;
      right: 50%;
      margin: 0 514.8px 0 0; }
    .chara_wrap .swiper-button-next {
      left: 50%;
      right: inherit;
      background: url("../image/character/next@pc.png") no-repeat left top/cover;
      width: 44px;
      margin: 0 0 0 514.8px; } }
@media screen and (min-width: 1320px) {
  .chara_wrap {
    width: 1280px;
    margin: 0 auto 0;
    background: none;
    text-align: center;
    padding-bottom: 86px; }
    .chara_wrap::before {
      content: '';
      background: url("../image/character/name@pc.png") no-repeat center top/100% 100%;
      width: 1048px;
      height: 84px;
      position: absolute;
      left: 50%;
      top: 270px;
      transform: translateX(-50%); }
    .chara_wrap::after {
      content: '';
      background: url("../image/character/bg@pc.png") no-repeat left top;
      width: 867px;
      height: 660px;
      position: absolute;
      right: 50%;
      top: 402px;
      z-index: 0;
      margin-right: -170px;
      left: auto; }
    .chara_wrap .swiper-slide {
      padding: 64px 0 0;
      position: relative;
      min-height: 730px; }
      .chara_wrap .swiper-slide .img {
        position: absolute;
        right: 50%;
        left: inherit;
        margin-right: -50px;
        top: 195px;
        z-index: -1;
        width: 563px; }
        .chara_wrap .swiper-slide .img img {
          width: 563px;
          height: auto;
          position: relative;
          z-index: 10; }
      .chara_wrap .swiper-slide .inner {
        position: relative;
        z-index: 100; }
      .chara_wrap .swiper-slide header {
        background: url("../image/character/name@pc.png") no-repeat center top/100% 100%;
        width: 1048px;
        height: 84px;
        margin: 0 auto 0;
        position: relative;
        z-index: 30; }
        .chara_wrap .swiper-slide header::before {
          content: '';
          width: 170px;
          top: 0;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 100;
          height: 100%;
          background: url("../image/character/rank_ssr.png") no-repeat right center;
          background-size: auto 64px;
          margin-left: 0; }
        .chara_wrap .swiper-slide header[data-rank='sr']::before {
          background: url("../image/character/rank_sr.png") no-repeat right center/auto 64px; }
        .chara_wrap .swiper-slide header h2 {
          width: auto;
          position: static;
          left: inherit;
          top: 0;
          font-size: 35px;
          color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          position: relative;
          left: 180px;
          top: -3px; }
          .chara_wrap .swiper-slide header h2 small {
            font-size: 14px;
            padding: inherit;
            text-align: left;
            display: inline-block;
            padding-left: 1em; }
        .chara_wrap .swiper-slide header ul {
          width: inherit;
          left: inherit;
          right: 43px;
          top: 20px;
          justify-content: flex-end; }
          .chara_wrap .swiper-slide header ul li {
            margin: 0 0 0 20px; }
          .chara_wrap .swiper-slide header ul li.cv {
            background: url("../image/character/bg_cv@pc.jpg") no-repeat left top/100% 100%;
            width: 169px;
            height: 41px;
            left: 0;
            font-size: 16px;
            padding-bottom: 0; }
          .chara_wrap .swiper-slide header ul li.voice {
            height: 41px;
            background: url("../image/character/bg_voice@pc.jpg") no-repeat left top/100% 100%;
            width: 176px; }
            .chara_wrap .swiper-slide header ul li.voice a {
              font-size: 16px;
              padding: 0 0 0 36px;
              top: 0; }
      .chara_wrap .swiper-slide .text {
        display: block;
        justify-content: center;
        width: 464px;
        margin-left: 726px; }
      .chara_wrap .swiper-slide .graph {
        width: 380px;
        height: 399px;
        margin: 63px 0 0 28px;
        background-size: cover;
        background-image: url("../image/character/graph@pc.png"); }
        .chara_wrap .swiper-slide .graph img {
          width: 100%;
          height: auto;
          position: relative; }
      .chara_wrap .swiper-slide .textwrap {
        width: auto;
        padding: 30px 0 0;
        margin-left: 0; }
        .chara_wrap .swiper-slide .textwrap dl {
          width: 430px;
          border: 2px solid #821313;
          font-size: 14px;
          line-height: 2.143; }
          .chara_wrap .swiper-slide .textwrap dl dt {
            width: 88px; }
          .chara_wrap .swiper-slide .textwrap dl dd {
            padding: 0 10px; }
            .chara_wrap .swiper-slide .textwrap dl dd img {
              height: 16px;
              width: auto;
              margin-left: 6px;
              top: px2px; }
        .chara_wrap .swiper-slide .textwrap div.table div {
          margin-top: 8px;
          border: 2px solid #821313;
          width: 430px; }
          .chara_wrap .swiper-slide .textwrap div.table div dl {
            border: none;
            border-bottom: 1px solid #821313;
            width: 50%;
            float: left; }
        .chara_wrap .swiper-slide .textwrap p {
          width: auto;
          font-size: 14px;
          line-height: 1.429;
          padding: 10px 25px; }
    .chara_wrap .swiper-button-next,
    .chara_wrap .swiper-button-prev {
      position: absolute;
      background: url("../image/character/prev@pc.png") no-repeat left top/cover;
      width: 49px;
      height: 103px;
      z-index: 1000;
      margin: 0;
      top: 660px;
      left: inherit;
      right: 50%;
      margin: 0 585px 0 0; }
    .chara_wrap .swiper-button-next {
      left: 50%;
      right: inherit;
      background: url("../image/character/next@pc.png") no-repeat left top/cover;
      width: 50px;
      margin: 0 0 0 585px; } }